/* ============================================================
   HOMEPAGE
   ============================================================ */

/* ---------- HERO / SLATE ENTRANCE ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 32rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--color-base);
}

.hero__stage {
  position: absolute;
  inset: 0;
}

/* Reel stage — was a slow single-plane drift (a Ken-Burns move for a
   static poster). Removed now that this holds real moving footage
   shown at native aspect: a continuous scale is itself a zoom, which
   runs against showing the reel as an untouched widescreen plate.
   inset:0 (not the old -4% overscan) since contain mode needs no
   bleed margin to hide edges. */
.hero__reel {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Widened/strengthened vs. the original single-poster tuning — this
     now needs to hold legible contrast across a moving reel with very
     bright shots (golden-hour sky, sunlit golf course), not just one
     hand-picked frame. */
  background: linear-gradient(to top, rgba(14,13,12,0.95) 0%, rgba(14,13,12,0.55) 35%, rgba(14,13,12,0.15) 60%, transparent 80%);
}

.hero__content {
  position: relative;
  z-index: 4;
  padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
}

.hero__logline {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  line-height: var(--leading-display);
  margin: 0 0 1.5rem;
}
.hero__logline-line {
  display: inline-block;
  white-space: nowrap; /* each phrase must render on exactly one line
                           at every viewport, per instruction — this
                           is the literal guarantee of that, rather
                           than relying on width being coincidentally
                           enough at every screen size */
}
@media (max-width: 767px) {
  /* At the unmodified mobile font-size (36px), "Built with
     intention." measured 434px wide against a ~350px safe content
     width -- with nowrap forcing one line and .hero's own
     overflow:hidden, that overflow was being silently clipped
     (confirmed by screenshot: "BUILT WITH INTENTI" cut off mid-
     word), not wrapped or scrolled. This is the minimum reduction
     that clears it with a safety margin, not a stylistic choice --
     going smaller was necessary specifically to avoid shipping cut-
     off text while still forcing the two-line composition. */
  .hero__logline { font-size: 1.75rem; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
}

/* Mobile: the desktop full-viewport-height / bottom-pinned-content
   treatment is deliberately NOT used here. Splash card is gone (see
   js/main.js), so there's nothing left needing a tall reserved stage
   to fade over — the reel now behaves like a normal content block:
   a short gap below the header, its own natural aspect ratio, then
   the headline/CTA flow directly beneath it in normal document flow.
   No min-height:100vh, no bottom alignment, no empty reserved space.
   This block is placed AFTER every base .hero/.hero__stage/etc. rule
   above (not just inside a media query near the top of the file) —
   an earlier attempt at this fix sat before the base .hero__stage
   rule, and since both have equal specificity, the later, unscoped
   base rule silently won the cascade at every width, including
   mobile, undoing the override entirely despite the media query
   condition matching correctly. Source order matters here as much as
   the condition does. */
@media (max-width: 767px) {
  .hero {
    height: auto;
    min-height: 0;
    display: block;
    padding-top: 112px; /* fixed header's real rendered height (~84px,
                            measured) + 28px gap below it (within the
                            requested 24-32px range) */
  }
  .hero__stage {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 3; /* new mobile export is native 4:3 (verified:
                             1280x960, no letterbox via cropdetect) --
                             container matches it exactly, no crop
                             needed */
    margin-bottom: 32px; /* gap to the headline below, within the
                             requested 28-36px range */
  }
  .hero__scrim {
    display: none; /* was a text-legibility gradient for content
                       overlaid on the video; content no longer sits
                       on top of the video on mobile, so this would
                       just dim the reel for no reason now */
  }
  .hero__content {
    position: relative;
    padding: 1.75rem var(--gutter) 2rem;
  }
}

.hero__sound-toggle {
  position: absolute;
  z-index: 4;
  top: clamp(5.5rem, 10vh, 7rem);
  right: var(--gutter);
  background: transparent;
  border: 1px solid var(--color-hairline);
  color: var(--color-paper);
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  cursor: pointer;
}

/* ---------- PROOF LINE ---------- */

.proof-line {
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
  border-bottom: 1px solid var(--color-hairline);
  text-align: center;
}

.proof-line__text {
  display: inline-block;
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-support);
  max-width: 62rem;
}

.proof-line__text strong {
  color: var(--color-paper);
  font-weight: 500;
}

/* ---------- SELECTED WORK ---------- */

.section {
  padding: var(--section-gap) var(--gutter);
}

/* Featured Work -> Impact & Recognition transition: exact fixed
   values per instruction, not the fluid --section-gap clamp, so the
   gap between "View all work" and the next heading is deliberate and
   compact rather than however two independent clamps happen to add
   up on a given viewport. */
.home-featured {
  padding-bottom: 72px;
}
@media (max-width: 640px) {
  .home-featured { padding-bottom: 56px; }
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section__eyebrow {
  margin: 0 0 0.75rem;
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  line-height: var(--leading-display);
  margin: 0;
  max-width: 34ch;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem 1.25rem;
}

/* Text-only variant: used while no cleared imagery exists yet. No
   image slot, no placeholder art — just title/logline/role, with the
   lead project given a larger typographic treatment so the hierarchy
   still reads without a photo. */
.work-grid--text {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-hairline);
}

.work-card--static {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-hairline);
}

.work-card--static:first-child .work-card__title {
  font-size: var(--step-h2);
}

.work-card--static .work-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}

/* Same text-only layout as --static, but a real, working link — used
   for confirmed projects where a case study exists but no static
   thumbnail could be sourced (e.g. Facebook-hosted media, which blocks
   automated access entirely, so no poster frame can be extracted). */
.work-card--linked-text {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-hairline);
  transition: opacity var(--dur-dissolve) var(--ease-dissolve);
}
.work-card--linked-text:hover,
.work-card--linked-text:focus-visible {
  opacity: 0.75;
}
.work-card--linked-text .work-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}

/* NOTE: the old image-based asymmetric grid rules (.work-card__frame,
   nth-child spans, etc.) were removed — the homepage currently has no
   cleared imagery, so cards render as plain text rows via
   .work-grid--text above. If/when real stills or clips are approved,
   reintroduce an image-card layout here rather than reusing this. */
.work-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.work-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.work-card__title {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  margin: 0 0 0.35rem;
}

.work-card__logline {
  color: var(--color-support);
  font-size: 0.95rem;
  margin: 0;
  max-width: 42ch;
}

.work-card__role {
  font-size: var(--step-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-support);
  white-space: nowrap;
}

.section__foot {
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* ---------- POV / CAPABILITY STATEMENT ---------- */

.pov {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 104px var(--content-padding-inline); /* trimmed from --section-space (144px) so this closing beat doesn't read as an isolated afterthought */
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}
@media (max-width: 640px) {
  .pov { padding-top: 40px; padding-bottom: 40px; } /* was 64px mobile */
}

.pov__quote {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  line-height: var(--leading-display);
  max-width: 30ch;
  margin: 0 0 2rem;
}

.pov__body {
  max-width: var(--measure);
  color: var(--color-support);
}

/* ---------- CLOSING CTA ---------- */

.closing-cta {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.closing-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.closing-cta__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(14,13,12,0.72);
}

.closing-cta__content {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--section-space) var(--content-padding-inline);
}

.closing-cta__title {
  font-family: var(--font-display);
  font-size: var(--step-h1);
  line-height: var(--leading-display);
  max-width: 18ch;
  margin: 0 0 2rem;
}

/* Reveal-on-scroll: single opacity + small upward drift,
   removed entirely (not just shortened) under reduced motion */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-dissolve-slow) var(--ease-dissolve),
              transform var(--dur-dissolve-slow) var(--ease-dissolve);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* The logo wall's scroll-reveal was leaving it invisible on initial
   mobile load whenever the section started outside the IntersectionObserver's
   trigger zone (e.g. a short viewport, or the section sitting further
   down the page than usual) -- it would only appear once the user
   scrolled far enough to cross that threshold. Removing the
   scroll/IntersectionObserver dependency entirely for this one
   section at mobile widths: fully visible immediately on load, no
   transform offset, no transition to wait on. Desktop is untouched --
   this only overrides the .reveal defaults below 767px, and only for
   .logo-wall specifically; every other .reveal section (Impact &
   Recognition, POV, etc.) keeps its normal scroll-triggered behavior
   on both desktop and mobile. */
@media (max-width: 767px) {
  .logo-wall.reveal {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* Hero video — shown as a true widescreen film plate: native 16:9
   composition, no crop. object-fit:contain means the frame's own
   aspect ratio is fully preserved; wherever the viewport doesn't
   match 16:9, the surrounding black hero stage shows through as
   letterboxing rather than the video being scaled/cropped to fill. */
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--color-base);
  pointer-events: none; /* decorative background — no click-to-pause, no accidental control surfacing */
  opacity: 0;
  transition: opacity 480ms ease-out;
}
.hero__video.is-ready {
  opacity: 1;
}
@media (max-width: 767px) {
  /* Same cascade-order issue as the video-source bug fixed earlier:
     this must come after the base .hero__video rule above (which
     sets object-fit:contain unscoped, for all widths) since equal-
     specificity rules resolve by source order, not by which media
     query condition is narrower. Placing it here, after that base
     rule, is what makes it actually win on mobile. */
  .hero__video { object-fit: cover; }
}
.hero__video::-webkit-media-controls {
  display: none !important;
}

/* Work cards that have real cleared media get a poster frame; cards
   without media stay text-only rather than showing an empty box. */
.work-card__frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #17150F;
  margin-bottom: 1rem;
}
.work-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--dur-dissolve) var(--ease-dissolve);
}
a.work-card:hover .work-card__frame img,
a.work-card:focus-visible .work-card__frame img {
  opacity: 0.82;
}

/* ---------- IN GOOD COMPANY (proof bar) ---------- */

.proof-bar {
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
  border-bottom: 1px solid var(--color-hairline);
  text-align: center;
}

.proof-bar__heading {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.15rem;
  color: var(--color-support);
  margin: 0 0 1.75rem;
}
@media (max-width: 640px) {
  .proof-bar__heading {
    font-size: 1.3rem; /* +13% from 1.15rem, middle of the requested 10-15% */
    color: #A8A49C; /* a modest brighten from --color-support (#8C8880), not full white/paper */
  }
}

.proof-bar__tier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.75rem 2.5rem;
}

/* Mobile: flex-wrap + centered items meant a wrapped item like "Ring
   City USA" could end up alone on its own centered line, disconnected
   from the label it belongs with. Stack each proof item as its own
   full-width line instead, consistently spaced, no mid-item wrap. */
@media (max-width: 640px) {
  .proof-bar__tier {
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
  }
  .proof-bar__item {
    text-align: center;
    line-height: 1.5;
  }
}

.proof-bar__item {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-support);
}
.proof-bar__item em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-support);
  margin-right: 0.5em;
}
.proof-bar__item--mobile-only { display: none; }
@media (max-width: 640px) {
  /* Mobile-only credit-first reformat: the same four credits, same
     role/status text, just reordered so the bold/white credit leads
     and the muted role follows the em dash — desktop keeps its
     existing order and wording completely untouched via the paired
     .proof-bar__item--desktop-only element above each of these. */
  .proof-bar__item--desktop-only { display: none; }
  .proof-bar__item--mobile-only { display: inline; }
}
.proof-bar__item strong {
  color: var(--color-paper);

  font-weight: 600;
}

/* Production credits (a real role, on a real production) sit visually
   heavier than platform mentions — the distinction the instruction
   requires isn't just semantic, it should be legible at a glance. */
.proof-bar__tier--credits .proof-bar__item {
  font-size: 1.0625rem;
}
@media (max-width: 640px) {
  .proof-bar__tier--credits .proof-bar__item { font-size: 0.865rem; } /* -9% from 0.95rem, middle of the requested 8-10% */
}

.proof-bar__divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0 1.25rem;
}
.proof-bar__divider::before,
.proof-bar__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-hairline);
}
.proof-bar__divider .u-label {
  white-space: nowrap;
  font-size: 0.65rem;
}

/* Platform/broadcast mentions run quieter and smaller — no role is
   implied, so nothing here should compete visually with the credits
   above it. */
.proof-bar__tier--platform .proof-bar__item {
  font-size: 0.9rem;
  opacity: 0.85;
}

@media (max-width: 640px) {
  .proof-bar__tier { flex-direction: column; gap: 0.6rem; }
}

/* ---------- Logo wall grid (typographic wordmarks, see HTML comment
   for why these are text, not reproduced brand artwork) ---------- */

.logo-wall {
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
  padding-top: 24px; /* tightened from the hero -- was 64px desktop */
  border-bottom: 1px solid var(--color-hairline);
  text-align: center;
}
@media (max-width: 640px) {
  .logo-wall { padding-top: 12px; } /* was 40px mobile */
}

.logo-wall .proof-bar__tier--credits {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-hairline);
}

.logo-wall__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1.5rem;
  max-width: 56rem;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .logo-wall__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .logo-wall__grid { grid-template-columns: repeat(4, 1fr); }
}

.logo-wall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--color-support);
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity var(--dur-dissolve) var(--ease-dissolve),
              color var(--dur-dissolve) var(--ease-dissolve);
}

.logo-wall__item:hover {
  opacity: 1;
  color: var(--color-paper);
}

/* If/when a real <img> logo replaces a wordmark span, this keeps every
   tile the same visual weight regardless of the source logo's native
   proportions. */
.logo-wall__item img {
  max-height: 28px;
  width: auto;
  filter: grayscale(1) brightness(1.6);
  opacity: 0.8;
}

/* Real logo wall — a quiet, high-end client credit field: floating
   marks on black, not a boxed logo grid. No borders, no tile
   backgrounds, no grid lines — the 4x4/2-col structure is an
   invisible alignment grid only, held together by generous
   whitespace. Marks are pre-processed to a uniform white silhouette
   (see images/logos/); sizing here is deliberately modest — this
   should read as curated and confident, not like sponsor signage.
   Optical size still varies per mark (see .logo-wall__item--boost-*)
   but the baseline and the boosts are both much smaller than the
   earlier boxed-grid pass. */
.logo-wall__grid--logos {
  grid-template-columns: repeat(2, 1fr);
  row-gap: clamp(2.5rem, 5vw, 4rem);
  column-gap: clamp(2rem, 5vw, 4rem);
  max-width: 90%;
  width: 76rem;
}
@media (max-width: 640px) {
  .logo-wall__grid--logos { row-gap: 1.9rem; } /* tightened alongside the smaller mobile marks below, so the section still reads as full rather than scattered */

  /* Mobile-only re-pairing — sizing and desktop's hand-tuned 4x4
     source order are both untouched; this uses CSS `order` (grid
     items respect it same as flex) purely to change which two logos
     land in the same row once the layout collapses to 2 columns, so
     every row pairs one visually heavier mark with a lighter one
     instead of source order accidentally putting two heavy marks
     (NBC Sports + Campbell's) or two mismatched extremes (ESPN +
     Sony Music) in the same row. No HTML changes, no size changes —
     only which pair shares a row. */
  .logo-wall__grid--logos .logo-wall__item:nth-child(1)  { order: 1; }  /* Netflix */
  .logo-wall__grid--logos .logo-wall__item:nth-child(2)  { order: 2; }  /* DAZN */
  .logo-wall__grid--logos .logo-wall__item:nth-child(3)  { order: 4; }  /* ESPN */
  .logo-wall__grid--logos .logo-wall__item:nth-child(4)  { order: 3; }  /* Sony Music */
  .logo-wall__grid--logos .logo-wall__item:nth-child(5)  { order: 5; }  /* NBC Sports */
  .logo-wall__grid--logos .logo-wall__item:nth-child(6)  { order: 6; }  /* Campbell's */
  .logo-wall__grid--logos .logo-wall__item:nth-child(7)  { order: 7; }  /* Prime Video */
  .logo-wall__grid--logos .logo-wall__item:nth-child(8)  { order: 8; }  /* NSG Group */
  .logo-wall__grid--logos .logo-wall__item:nth-child(9)  { order: 9; }  /* Applebee's */
  .logo-wall__grid--logos .logo-wall__item:nth-child(10) { order: 14; } /* Wall Street Journal */
  .logo-wall__grid--logos .logo-wall__item:nth-child(11) { order: 10; } /* TNT Sports */
  .logo-wall__grid--logos .logo-wall__item:nth-child(12) { order: 16; } /* Johnson & Johnson Institute */
  .logo-wall__grid--logos .logo-wall__item:nth-child(13) { order: 13; } /* Sandals */
  .logo-wall__grid--logos .logo-wall__item:nth-child(14) { order: 15; } /* USGA */
  .logo-wall__grid--logos .logo-wall__item:nth-child(15) { order: 11; } /* Blanton's */
  .logo-wall__grid--logos .logo-wall__item:nth-child(16) { order: 12; } /* Dewesoft */
}

@media (min-width: 900px) {
  .logo-wall__grid--logos { grid-template-columns: repeat(4, 1fr); }
}

.logo-wall__grid--logos .logo-wall__item {
  min-height: unset;
  height: clamp(4.5rem, 7vw, 6.25rem); /* reverted to original -- the
                                            taller tile is no longer
                                            needed now that Sony Music
                                            and NBC Sports are sized
                                            relative to the baseline
                                            they actually render at,
                                            not "100% of tile" */
  padding: 0;
  border: none;
  margin: 0;
  opacity: 1;
  filter: none;
  overflow: visible; /* no longer load-bearing: no mark exceeds its
                          tile now, so there's nothing to clip */
}

.logo-wall__grid--logos .logo-wall__item img {
  max-width: 100%;
  max-height: 72%; /* baseline mark height, as a fraction of the tile (reverted to original) */
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 0.88;
  transition: opacity var(--dur-dissolve) var(--ease-dissolve);
}

.logo-wall__grid--logos .logo-wall__item:hover img {
  opacity: 1;
}

/* Optical sizing — every value below is max-height as a percentage of
   the tile (no transform anywhere), so a mark can never render larger
   than the space actually reserved for it.

   Sony Music and NBC Sports were increased by ~20% and ~15%
   respectively (by request). Sony Music was already at 100% of the
   tile -- the tile height itself had to grow 20% to give it anywhere
   to grow into, since nothing can exceed 100% without either clipping
   or bleeding into a neighbor (the exact bug fixed earlier in this
   project). Every other logo's percentage below was reduced by the
   same factor (divided by 1.2) specifically to cancel that taller
   tile back out, so its own rendered size is pixel-for-pixel
   unchanged from before this request -- only Sony Music (still 100%,
   now of a taller tile) and NBC Sports (recalculated to land at +15%
   of its own prior absolute size) actually changed. */
/* IMPORTANT DISCOVERY, and why this block is scoped the way it is:
   the base rule above (".logo-wall__grid--logos .logo-wall__item img")
   has HIGHER CSS specificity (two classes) than a single-class
   override like ".logo-wall__item--boost-sm img" (one class) --
   confirmed by direct computed-style inspection. That means NONE of
   the per-logo differentiation below this comment has ever actually
   applied, for any logo, at any point -- every one of these 7 marks
   has always rendered at the single shared baseline percentage,
   varying in appearance only by each image's own aspect ratio at
   that fixed height, never by the intended distinct percentage.

   Given that's the ACTUAL current live appearance (not what the
   comments here claimed), fixing that specificity bug broadly right
   now would silently change 7 other logos' sizes as a side effect --
   directly against this request's "do not change any other logo
   sizes." So the fix is applied ONLY to the two logos actually being
   resized below (nbc-adj, sonymusic-adj), with their new values
   calculated relative to the baseline size they've actually been
   rendering at (72%), not the higher intended-but-inert value. The
   other five overrides are left exactly as inert as they've always
   been -- unchanged in effect, even though the values still visually
   document original intent for whenever this gets revisited. */
.logo-wall__item--boost-sm img { max-height: 78%; }   /* WSJ, J&J Institute — inert (see note above); unchanged from current actual rendering */
.logo-wall__item--boost-md img { max-height: 83%; }   /* Dewesoft, Blanton's, Campbell's, Prime Video — inert; unchanged from current actual rendering */
.logo-wall__item--netflix-adj img { max-height: 74%; } /* Netflix — inert; unchanged from current actual rendering */
.logo-wall__item--espn-adj img { max-height: 74%; }    /* ESPN — inert; unchanged from current actual rendering */
.logo-wall__item--usga-adj img { max-height: 75%; }    /* USGA — inert; unchanged from current actual rendering */
.logo-wall__grid--logos .logo-wall__item--nbc-adj img { max-height: 82.8%; }      /* NBC Sports — the specificity fix IS applied here: +15% from the 72% baseline it was actually rendering at (72*1.15=82.8) */
.logo-wall__grid--logos .logo-wall__item--sonymusic-adj img { max-height: 86.4%; } /* Sony Music — the specificity fix IS applied here: +20% from the 72% baseline it was actually rendering at (72*1.2=86.4) */

/* Text fallback for NSG Group — used instead of the image if the
   native-size mark still reads as pixelated. Matches the site's
   existing plain-typographic wall styling, not a new treatment. */
.logo-wall__item--text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--color-paper);
  opacity: 0.88;
}
.logo-wall__item--text:hover { opacity: 1; }

@media (max-width: 640px) {
  .logo-wall__grid--logos .logo-wall__item { height: clamp(3.325rem, 10.5vw, 4.24rem); } /* reverted to original */
}

.logo-wall__qualifier {
  margin: 2.25rem auto 0;
  max-width: 46rem;
  font-size: 0.7rem;
  color: var(--color-support);
  opacity: 0.8;
}

/* Production partners — a distinct, visually quieter tier below the
   qualifier, never merged into the client grid above it. */
.logo-wall__partners {
  margin-top: 3.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--color-hairline);
}

.logo-wall__partners-label {
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

.logo-wall__grid--partners {
  max-width: 40rem;
  grid-template-columns: repeat(3, 1fr);
}

.logo-wall__grid--partners .logo-wall__item {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-paper);
  opacity: 0.85;
}

@media (max-width: 640px) {
  .logo-wall__grid--partners { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------- Impact & Recognition ---------- */

.impact-recognition {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 72px var(--content-padding-inline) var(--section-gap);
  border-bottom: 1px solid var(--color-hairline);
}
@media (max-width: 640px) {
  .impact-recognition { padding-top: 56px; }
}

.impact-recognition__eyebrow {
  margin-bottom: 2rem;
}

/* Two cards side-by-side on desktop, stacked on mobile — each card is
   its own self-contained unit (image on top, copy below), not a
   left/right split within one continuous block. */
.impact-recognition__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start; /* a taller card must never stretch its neighbor
                          to match — each card's height is its own */
}
/* Single column at every width, by request — DeWine first, Corey
   Taylor second, stacked full-width beneath it, not side-by-side. */

.impact-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.impact-card__image-link {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  margin-bottom: 1.75rem;
  transition: opacity var(--dur-dissolve) var(--ease-dissolve);
}
.impact-card__image-link:hover,
.impact-card__image-link:focus-visible {
  opacity: 0.85;
  outline: none;
}

.impact-card__image {
  width: 100%;
  height: auto; /* the actual bug: without this, the <img>'s intrinsic
                    size (from its real pixel dimensions) was winning
                    over aspect-ratio for the height axis, rendering
                    the source's native ~1:1 shape instead of 16:9 */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 30%; /* keeps the post's caption + video
                                   preview frame in view rather than
                                   centering on empty space */
  display: block;
}

/* Text-only fallback (H.O.O.V.E.S./Corey Taylor — no real thumbnail
   asset exists yet, see the HTML comment above it) — no image slot,
   no placeholder box, nothing implying a missing/broken asset. */
.impact-card--text-only .impact-card__body {
  max-width: 32rem;
}

.impact-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-size: var(--step-h3);
  line-height: 1.05;
  margin: 0 0 1.25rem;
  /* "#InThisTogetherOhio" is a single long token even at desktop
     column widths — standing protection, not just the mobile
     safety net below. */
  overflow-wrap: anywhere;
}

.impact-card__quote {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--color-hairline);
}
.impact-card__quote p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--color-paper);
  margin: 0 0 0.6rem;
}
.impact-card__quote cite {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--color-support);
}

.impact-card__copy {
  max-width: 52ch;
  color: var(--color-support);
  margin: 0 0 1.25rem;
}

.impact-card__stats {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-support);
  margin: 0 0 1.5rem;
}


/* ---------- Featured Work (homepage) ---------- */
/* Reuses the exact same .featured-card component as work.html (same
   geometry, image treatment, title placement, hover behavior) — only
   the grid's column count differs: 3 desktop / 2 tablet / 1 mobile,
   per this section's own spec, vs. work.html's 4-column version. */
@media (min-width: 900px) {
  .home-featured__grid { grid-template-columns: repeat(3, 1fr); }
}