/* home.css
   Page-scoped ARRANGEMENT AND COMPOSITION ONLY for the homepage (/).
   Every value derives from tokens already defined in _shared/styles.css.
   No new custom properties, no new colours. Not loaded on any other page.
   All rules are namespaced under .homepage-v2 — the body class and hv2-*
   prefixes are kept from the page's life as the /homepage-v2/ preview
   (promoted to the live homepage in iteration 43); renaming them would churn
   every selector and the CLAUDE.md documentation for no visual change. */

/* --- Section 1 · Hero --- */
/* The revised h1 ("We modernise how marketing gets made.") runs to three lines at
   wide widths and left "made." as a widow. Balance distributes the same three
   lines evenly; harmless no-op where unsupported. */
.homepage-v2 .hero h1 {
  text-wrap: balance;
}
/* Hero sub-copy sits UNDER the h1. Both lines share the display face.
   The lead-in (the three-metric hook) is the strong, larger statement; the
   subline is a small, single-line supporting sentence beneath it. */
.homepage-v2 .hv2-leadin {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--gm-grey-500);
  max-width: 640px;
  margin: 16px auto 0;
}
.homepage-v2 .hv2-subline {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--gm-grey-500);
  max-width: 760px;
  margin: 16px auto 0;
}
/* Design -> build -> run as a scannable three-beat triad. Bold verbs and the
   gold "with you" make the concrete "what we do" (and the partnership that
   differentiates from a vendor) land at a glance. Replaces the prose sub-line. */
.homepage-v2 .hv2-triad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 760px;
  margin: 20px auto 0;
}
.homepage-v2 .hv2-triad-beat {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.25;
  color: var(--gm-grey-500);
  padding: 2px 26px;
}
.homepage-v2 .hv2-triad-beat + .hv2-triad-beat {
  border-left: 1px solid var(--gm-grey-200);
}
.homepage-v2 .hv2-triad-beat b {
  color: var(--gm-black);
  font-weight: 700;
}
@media (max-width: 560px) {
  .homepage-v2 .hv2-triad { flex-direction: column; gap: 6px; }
  .homepage-v2 .hv2-triad-beat + .hv2-triad-beat { border-left: 0; }
}
.homepage-v2 .hv2-decide {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--gm-black);
  letter-spacing: -0.02em;
  margin-top: 18px;
}

/* --- Section 2 · Pillars — bordered cards matching the client-card geometry so
   the two sets read as one system. Each pillar's icon carries its accent colour
   (Experience=purple, Marketing=green, Workflow=amber), threading to the
   matching client card the "See the work" link anchors to. No hover-lift here:
   the client cards below stay the primary click targets. --- */
/* Visually-hidden section heading: gives the pillar section an h2 so the
   heading order stays h1 -> h2 -> h3 with no skipped level, while keeping the
   "no visible pillar heading" design intent. */
.homepage-v2 .hv2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* --- Section 2 · "The problem → what we do" pinned card stack ----------------
   (iteration 38 stack; problem card rolled in as card 1 and section headings
   removed in revision 3.) Four landscape cards, each position: sticky at the
   SAME offset with an ascending z-index, so later cards slide over the top of
   earlier ones rather than sitting beside them — the three discipline cards
   literally cover the problem card. The photo in each right-hand panel drifts
   against its mask (see the parallax script in index.html).

   Two values drive the whole behaviour:

   --hv2-pin-top  Where a card comes to rest. The shared nav is position: sticky
                  and 81px tall, so this is 81 + 32px of breathing room = 113px.
                  (The design handoff said 92px, but that assumed a 60px nav.)

   --hv2-hold     How long a card sits FULLY visible before the next one starts
                  covering it. The gap between two cards IS that hold: card N is
                  unobscured only until card N+1's top reaches card N's bottom.
                  At the handoff's 50px the stack reads as an instant hand-off,
                  so the resting gap is 50px + this hold. Note the handoff claimed
                  a spacer element buys the hold "without widening the resting
                  gap" — it doesn't; a spacer and a margin are identical here, so
                  this uses the margin and skips the extra DOM node. Dial the hold
                  here and nowhere else. Each hand-off then takes a further
                  ~card-height of scroll to complete, which is where the slide reads. */
.homepage-v2 .hv2-stack-section {
  --hv2-pin-top: 113px;
  /* 240px originally. Trimmed in revision 3 to shorten the page overall — each
     card still sits fully visible for 200px of scroll before the next starts
     covering it (the handoff doc's 50px read as instant). Raise this if the
     hand-offs feel rushed. */
  --hv2-hold: 150px;
  /* Off-white for the copy panel. Deliberately NOT --gm-white (too stark against the
     photograph) and NOT --gm-grey-100, which is this section's own background and would
     make the panel read as a hole punched in the card. Not a design-system token yet —
     promote it if this treatment ships. */
  --hv2-panel: #f8f8f6;
  padding-bottom: 130px;
}
/* No section heading: the wayfinding eyebrows live INSIDE the cards (see
   .hv2-scard-kicker below). A label in the flow between two sticky cards can
   never be read — it scrolls up beneath the pinned card above it — but a label
   inside the card rides the pin, and because every card rests at the same
   offset, "The problem" is replaced on screen by "What we do · 01" at the exact
   moment the cards hand off. */
/* No overflow/transform/filter anywhere on this container or its ancestors —
   any of them would silently kill position: sticky on the cards.

   Note the trailing space that gives the last card its hold lives on that CARD's
   margin, not on this container's padding — a sticky element is constrained by its
   containing block's CONTENT box, so padding here buys it nothing. */
.homepage-v2 .hv2-stack {
  /* No heading above the cards any more, so the section's own padding is the
     only lead-in the stack needs. */
  padding-top: 0;
  /* flow-root, so the last card's bottom margin is CONTAINED rather than
     collapsing out through this box. That margin is what gives card 3 its sticky
     travel; if it collapses away, the stack's content box stops at card 3's
     bottom edge and card 3 can never come to rest. */
  display: flow-root;
}
/* Two-panel card: copy on an off-white panel at one third, photograph at two thirds.
   The copy no longer sits on the image, so there is no veil and no contrast
   compromise — text is on a solid panel and the photographs run at full strength.

   All three cards share a min-height so they are the same size. That is structural,
   not cosmetic: a card in this stack must fully cover the one before it, so if an
   earlier card were taller its bottom edge would peek out below the card covering it. */
.homepage-v2 .hv2-scard {
  position: sticky;
  top: var(--hv2-pin-top);
  /* Equal heights are structural, not cosmetic: each card must fully cover the one
     before it, so if a later card were shorter the earlier card's bottom edge would
     jut out below it. The Marketing card is the tallest (four-line merged heading
     plus the longest body in a third-width column) and its content peaks at 630px
     at 1024px wide, the tightest point before this layout stacks; the problem card
     peaks at 599px there. 636px clears all four at every desktop width, so they
     lock to one height. If the copy on any card grows, re-measure: a card that
     outgrows this value breaks the stack. */
  min-height: 636px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  background: var(--hv2-panel);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04);
}
/* Ascending z-index is what makes each card paint over the one before it. */
.homepage-v2 .hv2-scard:nth-of-type(1) { z-index: 1; }
.homepage-v2 .hv2-scard:nth-of-type(2) { z-index: 2; }
.homepage-v2 .hv2-scard:nth-of-type(3) { z-index: 3; }
.homepage-v2 .hv2-scard:nth-of-type(4) { z-index: 4; }
/* The gaps are SPACER SIBLINGS, not margins on the cards, and that is load-bearing.
   A sticky box is constrained to its containing block reduced by its OWN margins,
   so a margin-bottom both creates the room and consumes it: the last card ends up
   with zero travel (it slides straight past its rest point) and cards 1 and 2
   release a full gap-height early, sliding off the top while card 3 is still on its
   way in. Spacers put the space in the container's content box without charging it
   to any card, so every card holds and none releases until the section truly ends.
   The trailing spacer after card 3 is what lets card 3 come to rest at all. */
.homepage-v2 .hv2-stack-gap {
  height: calc(50px + var(--hv2-hold));
}
.homepage-v2 .hv2-stack-gap--last {
  height: var(--hv2-hold-last, 220px);
}

/* Narrow column, so the padding comes in from the handoff's 52/56 and the heading
   scales down — at 36px the longest title ("Communications & automation") ran to
   three lines in a third of the card. */
.homepage-v2 .hv2-scard-copy {
  padding: 44px 40px 46px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.homepage-v2 .hv2-scard-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}
.homepage-v2 .hv2-scard-icon svg { display: block; }
.homepage-v2 .hv2-scard-icon--exp { background: var(--gm-purple-pale); color: var(--gm-purple); }
.homepage-v2 .hv2-scard-icon--com { background: var(--gm-green-pale);  color: var(--gm-green); }
.homepage-v2 .hv2-scard-icon--wf  { background: var(--gm-amber-pale);  color: var(--gm-amber); }
.homepage-v2 .hv2-scard-icon--prob { background: var(--gm-red-pale); color: var(--gm-red); }

/* The in-card eyebrow: 12px uppercase wayfinding label between the icon and the
   heading. Same optics as the section eyebrows this page used to carry — they
   moved into the cards so they survive the pin (see the note above). */
.homepage-v2 .hv2-scard-kicker {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gm-grey-500);
}

/* Text sits on a solid panel now, so these are back to the handoff's values — body
   copy in grey-500 rather than the near-black the image overlay forced. The h2 in
   the grouping is the problem card's heading: an h2 for the document outline,
   styled at card-title scale. Every card heading pairs a black title sentence
   with a gold .accent continuation — one emphasis language across all four. */
.homepage-v2 .hv2-scard h3,
.homepage-v2 .hv2-scard h2 {
  margin: 0;
  font-size: clamp(26px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--gm-black);
}
/* (The separate .hv2-scard-lead sub heading was folded into the card headings in
   revision 3 — each heading now carries its lead as a gold .accent span, matching
   the problem card's treatment.) */
.homepage-v2 .hv2-scard-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gm-grey-500);
  text-wrap: pretty;
}
/* Stat pushed to the card base so the cards align regardless of copy length. */
.homepage-v2 .hv2-scard-stat {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--gm-black);
}
/* The problem card's punchline takes the same base slot the stats occupy on the
   discipline cards — one anatomy across all four. */
.homepage-v2 .hv2-scard-close {
  margin: auto 0 0;
  padding-top: 24px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--gm-black);
  text-wrap: pretty;
}
/* Back to the site's blue link: it failed at 1.57:1 over the photograph, but on the
   solid off-white panel it is the standard treatment and passes. */
.homepage-v2 .hv2-scard-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--gm-primary);
  text-decoration: none;
  align-self: flex-start;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.homepage-v2 .hv2-scard-arrow {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.homepage-v2 .hv2-scard-link:hover { color: var(--gm-gold-deep); }
.homepage-v2 .hv2-scard-link:hover .hv2-scard-arrow { transform: translateX(3px); }
/* Marketing card carries no stat, so its link takes the base slot itself. */
.homepage-v2 .hv2-scard-link--base {
  margin-top: auto;
  padding-top: 24px;
}

/* The image panel — a grid cell at two thirds, no longer a full-bleed layer behind
   the copy. No hover-zoom: a scale() here would fight the transform the script owns. */
.homepage-v2 .hv2-scard-media {
  position: relative;
  overflow: hidden;
  background: var(--gm-grey-200);
}
/* 112%/-6% rather than 132%/-16%: the overhang is the parallax travel budget, but it
   is also a zoom — a 32% overhang scales the photograph up by a third and crops it
   hard. 12% keeps a visible drift while showing much more of the original frame. The
   drift amplitude in data-parallax is matched to the smaller budget. */
.homepage-v2 .hv2-scard-media img {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  display: block;
}
/* No veil. The copy is on its own panel, so the photographs run at full strength —
   which is the whole point of moving off the full-bleed treatment. */
@media (prefers-reduced-motion: no-preference) {
  .homepage-v2 .hv2-scard-media img { will-change: transform; }
}

/* Mirror the Experience photograph so its face turns INTO the card rather than away
   from the copy. The transform goes on the wrapper, not the img: the parallax script
   owns the img's transform property and would overwrite a scaleX there. */
.homepage-v2 .hv2-scard-media--flip {
  transform: scaleX(-1);
}

/* Anchor offset so a "See the work" link doesn't hide the target card top behind
   the position:sticky nav (81px). */
.homepage-v2 .hv2-card[id] { scroll-margin-top: 104px; }

/* Tablet: one column, image first, tighter card padding. The pin still works —
   there is enough viewport height for the hand-off to read. */
/* Tablet: a third of the card is too narrow for the copy, so stack it — image band on
   top, copy beneath. */
@media (max-width: 1023px) {
  .homepage-v2 .hv2-scard {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    /* Still pinned at this breakpoint, so all four cards still have to match.
       Natural heights here peak at 700px — the Marketing card at 768px (measured
       across 768–1023; the problem card peaks at 665px). */
    min-height: 706px;
  }
  .homepage-v2 .hv2-scard-media { order: -1; height: 300px; }
  .homepage-v2 .hv2-scard-copy { padding: 36px 36px 40px; }
  .homepage-v2 .hv2-scard h3,
  .homepage-v2 .hv2-scard h2 { font-size: 30px; }
  .homepage-v2 .hv2-stack-section { --hv2-hold: 120px; }
}

/* Mobile: drop the pin entirely and stack normally. A sticky stack on a short
   viewport leaves no room for the hand-off to read, and the script disables the
   drift at the same breakpoint. */
@media (max-width: 767px) {
  .homepage-v2 .hv2-scard {
    position: static;
    top: auto;
  }
  .homepage-v2 .hv2-scard:not(:last-of-type) { margin-bottom: 24px; }
  .homepage-v2 .hv2-stack-gap { height: 0; }
  .homepage-v2 .hv2-scard { min-height: 0; }
  .homepage-v2 .hv2-scard-media { height: 220px; }
  .homepage-v2 .hv2-scard-copy { padding: 30px 26px 32px; }
  .homepage-v2 .hv2-scard h3,
  .homepage-v2 .hv2-scard h2 { font-size: 26px; }
  .homepage-v2 .hv2-stack { padding-top: 40px; }
  .homepage-v2 .hv2-stack-section { padding-bottom: 64px; }
}

/* --- Section 3 · Client work header --- */
.homepage-v2 .hv2-work-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 32px;
}
.homepage-v2 .hv2-work-head h2 {
  max-width: none;
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.05;
}
/* Tighter gutter between the four cards. Scoped to the grid that follows the
   work header so the shared .grid-2 elsewhere on the site is untouched. */
.homepage-v2 .hv2-work-head + .grid-2 { gap: 24px; }

/* --- Section 3 · Client work cards --- */
/* COMPACTION (iteration 36): this section was 2021px of a 5633px page (36%) —
   the single longest block, with the photo band alone taking 346px of an 816px
   card. The band is now a wide 16/7 letterbox and the card's internal rhythm is
   tightened throughout. Geometry only: no copy was cut, no card lost an image,
   the 2x2 grid and the card language are unchanged. */
.homepage-v2 .hv2-card {
  /* min-width: 0 is load-bearing on phones. The media band's aspect-ratio (16/7)
     plus its 180px min-height transfers a 411px min-content width into the grid
     track, and grid items default to min-width: auto — so below ~455px viewport
     the card refused to shrink and the page scrolled sideways (413px card on a
     375px screen). Zeroing min-width lets the track shrink; the 180px floor then
     takes over from the ratio exactly as the media-band comment below intends. */
  min-width: 0;
  background: var(--gm-white);
  border: 1px solid var(--gm-grey-200);
  border-radius: 18px;
  padding: 30px 30px 30px;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-med) var(--ease-out),
              box-shadow var(--duration-med) var(--ease-out);
}
.homepage-v2 .hv2-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(29, 29, 31, .09);
}

/* Supporting image — carousel-style full-bleed cover with hover zoom.
   Negative margins cancel the card padding so the media meets the card edge;
   top corners match the 18px card radius. */
.homepage-v2 .hv2-card-media {
  margin: -30px -30px 22px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  min-height: 180px;
  background: var(--gm-black);
}
.homepage-v2 .hv2-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform var(--duration-med) var(--ease-out);
}
.homepage-v2 .hv2-card:hover .hv2-card-media img {
  transform: scale(1.06);
}
/* Wide source (e.g. the World Vision classroom panorama) — anchor the crop left
   so the subjects stay in frame and the image's right-hand fade is cropped out. */
.homepage-v2 .hv2-card-media img.hv2-media-left {
  object-position: left center;
}

/* MOCK-UP: subtle image parallax on the client-card photos. The image is a
   touch taller than its frame; the inline script translates it within the
   overflow as the card scrolls through the viewport, so the photo drifts
   slightly slower than the card. Motion users only — under reduced-motion the
   media query never applies and the image stays a static 100% cover.
   Note: while active, this supersedes the hover-zoom on these images. */
@media (prefers-reduced-motion: no-preference) {
  .homepage-v2 .hv2-card-media img {
    height: 122%;
    transition: none;
    will-change: transform;
  }
}

.homepage-v2 .hv2-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
}
/* Tinted pillar lozenges drop the grey border. Scoped to .hv2-lz only —
   never touches the shared .lozenge. */
.homepage-v2 .hv2-lz {
  border: none;
}
.homepage-v2 .hv2-lz--exp { background: var(--gm-purple-pale); color: var(--gm-purple); }
.homepage-v2 .hv2-lz--com { background: var(--gm-green-pale);  color: var(--gm-green); }
.homepage-v2 .hv2-lz--wf  { background: var(--gm-amber-pale);  color: var(--gm-amber); }

.homepage-v2 .hv2-client {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gm-black);
  display: block;
  margin-bottom: 10px;
}
/* Global h3/p carry no bottom margin, so the card body reads cramped. Open up
   the heading-to-body gap and space the paragraphs. */
.homepage-v2 .hv2-card h3 { margin-bottom: 12px; }
.homepage-v2 .hv2-card p { margin-bottom: 12px; }

.homepage-v2 .hv2-pull {
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  color: var(--gm-grey-400);
  border-left: 2px solid var(--gm-grey-200);
  padding-left: 14px;
}

/* margin-top: auto pins footers to the card base so the 2x2 grid aligns
   despite unequal body lengths. */
.homepage-v2 .hv2-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gm-grey-400);
  margin-top: auto;
  padding-top: 18px;
}
.homepage-v2 .hv2-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-primary);
  margin-top: auto;
  padding-top: 18px;
  text-decoration: none;
}
.homepage-v2 .hv2-link:hover {
  text-decoration: underline;
}

/* Card 4 pending statistic — rule defined so uncommenting requires no CSS work. */
.homepage-v2 .hv2-stat {
  background: var(--gm-red-pale);
  border: 1px dashed var(--gm-red);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 20px;
}

/* --- Responsive --- */
/* .grid-2 and .card-grid--3 already collapse in _shared/styles.css. */
@media (max-width: 900px) {
  .homepage-v2 .hv2-work-head {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* No media-band breakpoint: the 180px floor on .hv2-card-media (declared with
   the band above) does the job continuously. A 16/7 band on a ~330px phone card
   would be a 146px strip with no readable subject; the floor takes over below
   ~410px of card width and the ratio governs everywhere above it, so there is no
   step change at 768px where the grid collapses to one column. */