/* Dip Studio dip-site: HOMEPAGE. One stylesheet, loaded after core.css.
   Part 1 is what survived the original homepage (hero, award body,
   testimonial cards); part 2 is the scroll-driven design that replaced it on
   2026-09-03 (it began life as the V2 comparison build, home-v2.css). With no
   JS or reduced motion, every default below is the finished state. */

/* ================================================= part 1: shared set pieces */
/* Dip Studio dip-site: homepage set pieces (hero, statement, services stage,
   product theatre, award, testimonials). Ported from the Astro redesign. */
/* ---------------------------------------------------------------- S1 hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: var(--header-h);
  overflow: clip;
}
.hero__content { padding-bottom: clamp(2.5rem, 6vh, 5.5rem); display: grid; gap: clamp(1.4rem, 2.5vw, 2.2rem); }
/* grid children must never stretch to an overwide headline track */
.hero__content > * { min-width: 0; max-width: 100%; }
.hero__kicker {
  font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.7rem;
}
.hero__kicker::before { content: ""; width: 2rem; height: 2px; background: var(--accent); }
.hero__title { max-width: none; }
/* sized so the longest line ("healthcare and wellness devices.") holds one
   row wherever nowrap applies; below 980px the lines wrap naturally */
.hero .hero__title { font-size: clamp(2.9rem, 0.2rem + 5.2vw, 5.9rem); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero__title .line > span { display: block; }
@media (min-width: 980px) {
  .hero__title .line { white-space: nowrap; }
}
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.hero__sub { max-width: 46ch; color: var(--ink); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
@media (min-width: 920px) {
  .hero__row { padding-right: 5rem; }
}
/* short phones (iPhone SE class): trim the stack so the button stays in the
   first screen with browser chrome open (launch review 2026-09-04) */
@media (max-width: 479.98px) {
  .hero .hero__title { font-size: clamp(2.4rem, 1rem + 6vw, 2.9rem); }
  .hero__sub { font-size: var(--fs-body); max-width: 34ch; }
  .hero__content { gap: 1.1rem; padding-bottom: clamp(1.5rem, 4vh, 3rem); }
}
/* hero intro: CSS-driven so above-the-fold never depends on JS */
html.motion-ready .hero__kicker { animation: dip-rise 0.9s var(--ease-out) 0.1s both; }
html.motion-ready .hero__title .line > span { animation: dip-unmask 1s var(--ease-out) both; }
html.motion-ready .hero__title .line:nth-child(1) > span { animation-delay: 0.18s; }
html.motion-ready .hero__title .line:nth-child(2) > span { animation-delay: 0.3s; }
html.motion-ready .hero__sub { animation: dip-rise 0.9s var(--ease-out) 0.45s both; }
html.motion-ready .hero__cta { animation: dip-rise 0.9s var(--ease-out) 0.58s both; }
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .hero__kicker,
  html.motion-ready .hero__title .line > span,
  html.motion-ready .hero__sub,
  html.motion-ready .hero__cta { opacity: 1 !important; transform: none !important; animation: none !important; }
}
/* -------------------------------------------------- S2 statement (dark) */
.value__copy { max-width: 46ch; font-size: var(--fs-lead); color: var(--on-dark-muted); }
.service__points { margin-top: 1.2rem; display: grid; gap: 0.55rem; }
.service__points li { position: relative; padding-left: 1.4rem; color: var(--ink); }
.service__points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.55rem; height: 2px; background: var(--accent); }
@media (min-width: 920px) {
  html.motion-init .service { grid-template-columns: 1fr; min-height: 56vh; align-content: center; }
}
/* ------------------------------------------------ S5 work (product theatre) */
.work { background: var(--dark); color: var(--on-dark); overflow: clip; }
.work__head {
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.work__head .display-h2 { max-width: 20ch; margin-top: 1.1rem; }
/* ------------------------------------------------ S6 proof (award moment) */
.proof__award { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.proof__body { display: grid; gap: 1.1rem; justify-items: start; }
.proof__body h2 { max-width: 12ch; }
.proof__sub { font-size: var(--fs-lead); max-width: 34ch; }
@media (min-width: 920px) {
  .proof__award { grid-template-columns: minmax(0, 0.85fr) 1.15fr; column-gap: clamp(3rem, 6vw, 6rem); }
}
/* -------------------------------- S7 testimonials (dark, original layout)
   Three quotes side by side like the live site, restyled for the ink band:
   hairline-dark top rules, green opening quote, attribution pinned to the
   bottom so the three rows align. */
.tst__grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); }
/* boxed cards (David 2026-08-23: wants visible division between quotes) */
.tst {
  display: grid; gap: 1.6rem;
  grid-template-rows: 1fr auto;
  background: var(--dark-2);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.tst__quote {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.4rem);
  line-height: 1.45; letter-spacing: -0.01em;
  color: var(--on-dark);
  text-indent: -0.45em; /* hang the opening quote */
}
.tst__quote::before { content: "\201C"; color: var(--accent); }
.tst__quote::after { content: "\201D"; color: var(--accent); }
.tst__who { display: flex; align-items: center; gap: 0.9rem; align-self: end; }
.tst__avatar {
  width: 48px; height: 48px; border-radius: 50%; overflow: clip; flex: none;
  background: var(--dark-2); border: 1px solid var(--hairline-dark);
}
.tst__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tst__id { display: grid; gap: 0.1rem; }
.tst__name { font-weight: 600; font-size: 0.95rem; color: var(--on-dark); }
.tst__role { color: var(--on-dark-muted); font-size: 0.85rem; }
@media (min-width: 860px) {
  .tst__grid { grid-template-columns: repeat(3, 1fr); column-gap: clamp(2rem, 4vw, 4rem); }
}

/* ================================================= part 2: the scroll design
   Scroll drives everything: the hero reel docks into the expertise card, the
   pinned switcher (the page's one pin) slides its three services in, the
   ticker moves with scroll velocity, the work row pans with the mouse, the
   award year fills over the plaque scene, the testimonials drift. */

/* the docked reel's transformed box reaches past the viewport edge (the
   clip-path hides it, but transformed boxes still count as scrollable
   overflow). clip, not hidden: clip does not create a scroll container, so
   sticky and the pin keep working. */
.page--home, .page--home main { overflow-x: clip; }

/* ------------------------------------------------------------- 1. hero */
.page--home .hero { overflow: visible; position: relative; z-index: 3; }
.v2-reel {
  position: absolute; inset: 0; z-index: -2;
  display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; appearance: none; text-align: left;
  background: var(--dark-2); overflow: clip;
  pointer-events: none;
  will-change: transform, clip-path;
}
.v2-reel img, .v2-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-reel video { opacity: 0.001; transition: opacity var(--dur-media-fade) var(--ease-out); }
.v2-reel video.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .v2-reel video { display: none; } }
/* hero progress line replaces the looping scroll cue */
.v2-progress {
  position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 6vh, 5.5rem);
  width: 1px; height: 4rem; background: var(--gray-300);
}
.v2-progress span { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleY(0); transform-origin: top; }
@media (max-width: 919.98px) { .v2-progress { display: none; } }

/* ---------------------------------------------------------- 2. tickers */
.v2-ticker {
  overflow: clip; background: var(--paper);
  padding-block: clamp(0.9rem, 1.4vw, 1.2rem);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.v2-ticker__track { display: flex; width: max-content; will-change: transform; }
/* a strip, not a billboard (David 2026-09-01: smaller) */
.v2-ticker__row {
  display: flex; align-items: center; white-space: nowrap;
  gap: clamp(1.4rem, 2.5vw, 2.4rem); padding-right: clamp(1.4rem, 2.5vw, 2.4rem);
  font-family: var(--font-display); font-weight: 600; line-height: 1;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); letter-spacing: -0.01em; color: var(--ink);
}
.v2-ticker__row i { font-style: normal; color: var(--accent); font-size: 0.5em; }
/* --------------------------------------- 3. expertise switcher (pinned)
   Dark band. Left: the three services stacked in one box, only the active
   one visible; home.js pins the section and slides them in from the
   left one after another. Right: the card the hero reel docks into. With
   no motion (or under 920px) the panels simply stack in flow. */
.v2-xp { background: var(--dark); color: var(--on-dark); padding-bottom: 0; }
.v2-xp__layout { padding-bottom: var(--section-y); }
/* partner logos as the section's bottom band (white artwork on the ink) */
.v2-logoband { min-width: 0; width: 100%; border-top: 1px solid var(--hairline-dark); padding: clamp(1.1rem, 2vw, 1.6rem) var(--gutter); }
.v2-logoband__row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem clamp(1.2rem, 2.5vw, 2.5rem); align-items: center; margin: 0;
}
.v2-logoband__row li { display: flex; align-items: center; justify-content: center; }
.v2-logoband__row img { height: clamp(20px, 2vw, 30px); width: auto; max-width: 100%; opacity: 0.82; transition: opacity 0.3s var(--ease-out); }
.v2-logoband__row li:hover img { opacity: 1; }
@media (min-width: 920px) { .v2-logoband__row { grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 600px) and (max-width: 919.98px) { .v2-logoband__row img { height: clamp(24px, 3.4vw, 30px); } }
.v2-xp__layout { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
.v2-xp__text { display: grid; gap: clamp(1.4rem, 3vw, 2rem); align-content: center; }
.v2-panels { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.v2-panel { display: grid; gap: 1rem; justify-items: start; }
.v2-panel .v2-svc__num { color: var(--on-dark-muted); }
.v2-panel .v2-svc__title { color: var(--on-dark); }
.v2-panel .v2-svc__copy { color: var(--on-dark-muted); }
.v2-panel .service__points li { color: var(--on-dark); }
.v2-xp__progress { display: none; }
.v2-slot__media {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg); overflow: clip; background: var(--dark-2);
}
.v2-slot__media img, .v2-slot__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-slot__media video { opacity: 0.001; transition: opacity var(--dur-media-fade) var(--ease-out); }
.v2-slot__media video.is-live { opacity: 1; }
/* desktop + motion: the slot is empty (a dark landing pad) until the reel
   docks, then the slot copy of the reel takes over and the hero reel
   hides. Both are the same clip, synced at the swap. */
html.motion-init .v2-slot__media.is-ghost:not(.is-docked) > * { visibility: hidden; }
.v2-reel.is-docked { visibility: hidden; }
@media (min-width: 920px) {
  .v2-xp__layout { grid-template-columns: 1.08fr 0.92fr; column-gap: clamp(3rem, 6vw, 6rem); }
  html.motion-init .v2-xp { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; padding-block: 0; padding-top: var(--header-h); }
  html.motion-init .v2-xp__layout { padding-bottom: 0; }
  html.motion-init .v2-panels { position: relative; min-height: min(30rem, calc(100vh - 24rem)); }
  html.motion-init .v2-panel { position: absolute; inset: 0; align-content: center; }
  html.motion-init .v2-panel:not(.is-active) { pointer-events: none; }
  /* pushed down so the two-line Mechanical Engineering panel never crowds it */
  html.motion-init .v2-xp__progress { display: block; height: 2px; width: min(100%, 22rem); background: var(--hairline-dark); margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
  html.motion-init .v2-xp__progress span { display: block; height: 100%; background: var(--on-dark); transform: scaleX(0); transform-origin: left; }
}
.v2-svc__num { font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--gray-600); font-weight: 600; font-variant-numeric: tabular-nums; }
.v2-svc__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.6rem); line-height: 0.98; letter-spacing: -0.03em;
}
.v2-svc__copy { color: var(--gray-600); max-width: 44ch; font-size: var(--fs-lead); }

/* ------------------------------------ 4. why dip: statement + big video
   Light band, everything centered. The statement words brighten (shared
   split), alternate lines drift, and the player frame scales up into place
   as it enters. The player is the core click-to-play component. */
.v2-story { background: var(--paper); border-top: 1px solid var(--hairline); border-bottom: 0; padding-bottom: 0; }
.v2-story > .v2-ticker { margin-top: clamp(3rem, 5vw, 5rem); }
.v2-story__inner { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); justify-items: center; text-align: center; }
.v2-story__statement { max-width: 18ch; color: var(--ink); font-size: clamp(2.2rem, 1.2rem + 3.6vw, 5.2rem); text-wrap: balance; }
.v2-story .value__copy { max-width: 52ch; color: var(--gray-600); font-size: var(--fs-lead); }
.v2-story .founder__byline { justify-content: center; text-align: left; }
.v2-story__player {
  position: relative; width: min(100%, 1180px); aspect-ratio: 16 / 9;
  margin-top: clamp(1rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg); overflow: clip; background: #000; isolation: isolate;
  will-change: transform;
}
.v2-story__player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* under the paragraph: the signature and Alex's byline on one line, the
   pair centered, the byline vertically centered on the drawing (David
   2026-09-03); the pair stacks and centers on narrow phones */
.v2-story__after { display: grid; gap: clamp(1.2rem, 2.5vw, 1.8rem); justify-items: center; margin-top: clamp(1rem, 2.5vw, 2rem); width: 100%; }
.v2-story__sign {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.5rem, 3vw, 3rem);
}
.v2-story__sign .founder__byline { justify-content: flex-start; }
.v2-story__cta { margin-top: clamp(0.5rem, 2vw, 1.5rem); }
/* handwritten signature between the copy and the byline */
/* preview: the poster is the true first frame, so no fade is needed */
.v2-story__player video { opacity: 1; }
.v2-story__player.is-playing .player__play { display: none; }
/* 80% of the PAGE, not the container: the grid centers it, so it overflows
   the container symmetrically */
@media (min-width: 920px) { .v2-story__player { width: 62vw; max-width: 1040px; } }

/* ------------------------------------------------ 5. work track (pin) */
/* back on the shared section rhythm (David 2026-09-01): the tight, one-screen
   padding only existed for the pin, and the pin is gone */
.v2-work { overflow: visible; }
.v2-work .work__head { margin-bottom: 0; }
.v2-work__stage { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
/* the head shares the row's left edge (the page gutter), not the centered
   container's, so the title lines up with the first tile on wide screens */
.v2-work__stage > .container { width: auto; max-width: none; margin: 0; padding-inline: var(--gutter); }
.v2-track__hint { display: none; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--on-dark-muted); }
.v2-track__hint--touch { display: none; }
@media (hover: hover) and (min-width: 920px) { html.motion-init .v2-track__hint { display: inline; } }
@media (hover: none) { .v2-track__hint { display: inline; } .v2-track__hint--mouse { display: none; } .v2-track__hint--touch { display: inline; } }
/* the title has to share one screen with the tiles now */
.v2-work__title { font-size: clamp(1.7rem, 0.9rem + 2vw, 2.9rem); max-width: 30ch; }
.v2-track__viewport { position: relative; }
.v2-track__row { display: grid; gap: clamp(2rem, 4vw, 3rem); padding: 0 var(--gutter); }
.v2-tile { display: grid; gap: 1rem; color: var(--on-dark); text-decoration: none; }
.v2-tile__media {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: clip;
  background: var(--tile-bg, #f4f4f4); display: grid; place-items: center;
  transition: transform 0.6s var(--ease-out);
}
.v2-tile__media picture { width: 100%; height: 100%; display: grid; place-items: center; }
/* larger product image with room under it before the title (David 2026-09-03) */
.v2-tile__media { margin-bottom: 1.1rem; }
.v2-tile__media img { width: 96%; height: 96%; object-fit: contain; transition: transform 0.6s var(--ease-out); }
.v2-tile:hover .v2-tile__media img { transform: scale(1.04); }
.v2-tile__meta { display: flex; gap: 1rem; align-items: flex-start; min-height: 2.6em; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--on-dark-muted); }
.v2-tile__num { color: var(--on-dark); font-family: var(--font-display); letter-spacing: 0.04em; }
/* title first under the image (David 2026-09-03); reserved two lines so the
   meta beneath lines up across tiles */
.v2-tile__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.45rem); letter-spacing: -0.02em; line-height: 1.1; min-height: 2.2em; }
.v2-tile { gap: 0.6rem; }
.v2-tile__cta { color: var(--on-dark-muted); font-size: 0.9rem; }
.v2-tile:hover .v2-tile__cta { color: var(--accent); }
.v2-track__index { display: none; }
@media (min-width: 920px) {
  html.motion-init .v2-work__stage {
    /* minmax(0, 1fr): the row is wider than the screen and grid items keep
       their content width by default (same trap as the ticker band) */
    grid-template-columns: minmax(0, 1fr); overflow: hidden;
  }
  html.motion-init .v2-track, html.motion-init .v2-track__viewport { min-width: 0; width: 100%; }
  html.motion-init .v2-track__viewport { cursor: default; }
  html.motion-init .v2-track__viewport { display: flex; align-items: center; overflow: hidden; }
  html.motion-init .v2-track__row {
    display: flex; width: max-content; align-items: flex-start;
    gap: clamp(2rem, 3vw, 3.5rem); padding: 0 var(--gutter); will-change: transform;
  }
  /* sized by height as well as width so title + tiles fit short screens */
  html.motion-init .v2-tile { width: clamp(240px, min(24vw, 40vh), 380px); flex: none; }
  html.motion-init .v2-tile.is-active .v2-tile__media { transform: scale(1.03); }
  /* counter sits in the head row beside the link, never under the tiles */
  html.motion-init .v2-track__index { display: block; }
  .v2-work__side { display: flex; align-items: center; gap: 1.5rem; }
}

/* ------------------------------------------------------------ 6. award */
.v2-award .sec-label { color: var(--gray-600); }
.v2-award__big {
  position: relative; margin: 0 0 0.6rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(4rem, 2rem + 9vw, 11rem); line-height: 0.9; letter-spacing: -0.045em;
  white-space: nowrap;
}
.v2-award__base { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(20, 20, 18, 0.22); }
.v2-award__fill { position: absolute; inset: 0; color: var(--ink); }
/* the plaque scene as the section background (David 2026-09-03): the scene
   is a warm gray studio sweep with the plaque in its left third, so the
   section keeps the image's own tone and the copy sits in the right half.
   Under 920px the scene becomes a 16:9 band above the copy instead, so the
   plaque is never covered by text. */
/* Under 920px David's PORTRAIT scene is the background instead (2026-09-03):
   the plaque stands in the top half and the floor below it is empty, so the
   section is a two-row grid, 55/45: the top row is the plaque's room, the
   copy sits in the bottom row. Cover anchored to the top keeps the plaque
   whole; the section is never shorter than the scene's own ratio (153vw),
   otherwise a wide tablet crops by width and the plaque base slides under
   the copy row. The section grows with the copy. */
/* 2026-09-06: the background is now David's product shot of the plaque on a
   white sweep. Under 920px the PORTRAIT shot is cropped to 1560x1580 (ratio
   1.0128) with the plaque's base at 83% of it; it is drawn with CONTAIN,
   anchored top, so the image is exactly one band 101.28vw tall and the copy
   row starts right under it with normal section spacing (David: the text sat
   too low with the old cover-and-min-height arrangement). */
.v2-award { position: relative; isolation: isolate; background: #fff; padding: 0; display: grid; grid-template-rows: calc(100vw * 1.0128) auto; }
.v2-award__bg { position: absolute; inset: 0; z-index: -1; display: block; margin: 0; }
.v2-award__bg img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; }
.v2-award .proof__award { display: block; grid-row: 2; align-self: start; padding-block: clamp(1.25rem, 4vw, 2rem) clamp(3rem, 8vw, 5rem); }
@media (min-width: 920px) {
  .v2-award { min-height: clamp(560px, 82vh, 900px); grid-template-rows: none; align-items: center; background: #fff; }
  .v2-award__bg img { object-fit: cover; object-position: 22% 50%; }
  .v2-award .proof__award { grid-row: auto; padding-block: var(--section-y); }
  .v2-award .proof__body { width: 46%; margin-left: auto; }
}

/* ----------------------------------------------------- 7. testimonials */
/* cards drift at their own speeds; the giant outlined quote marks that
   floated above them are gone (David 2026-09-03) */
.v2-tst .tst { position: relative; will-change: transform; }

/* -------------------------------------------------------- 9. CTA arrival */
.page--home .cta-band {
  /* David 2026-09-03: the same ink as the footer, the two read as one
     closing block split by a hairline; no arrival animation (his call) */
  background: var(--dark);
}

/* ------------------------------------------- header over dark sections
   home.js adds .is-on-dark to the fixed header while any dark section
   sits under it (ScrollTrigger, pin-aware). Mirrors core's page--dark set. */
.page--home .site-header .nav__link,
.page--home .site-header .wordmark,
.page--home .site-header .btn--primary { transition: color 0.35s var(--ease-out), background-color 0.35s var(--ease-out); }
.page--home .site-header.is-on-dark.is-stuck { background: rgba(20, 20, 18, 0.82); box-shadow: 0 1px 0 var(--hairline-dark); }
.page--home .site-header.is-on-dark .nav__link,
.page--home .site-header.is-on-dark .wordmark { color: var(--on-dark); }
.page--home .site-header.is-on-dark .nav-toggle span { background: var(--on-dark); }
.page--home .site-header.is-on-dark .btn--primary { background: var(--paper); color: var(--ink); }
.page--home .site-header.is-on-dark .btn--primary:hover,
.page--home .site-header.is-on-dark .btn--primary:focus-visible { background: var(--accent); color: var(--accent-ink); }

/* story video: on hover-capable devices the POINTER becomes the play label
   (.v2-cursor, moved by home.js) and there is no overlay on the video at
   all; keyboard focus still reveals the real button. Touch keeps the
   centered pill. David-approved exception to the no-cursor-following rule. */
.v2-cursor {
  position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%);
  transition: opacity 0.2s var(--ease-out);
  white-space: nowrap;
}
.v2-cursor.is-on { opacity: 1; }
@media (hover: hover) {
  .v2-story__player.has-js:not(.is-playing) { cursor: none; }
  .v2-story__player.has-js .player__play { opacity: 0 !important; pointer-events: none; }
  .v2-story__player.has-js:focus-within .player__play { opacity: 1 !important; transform: none; }
}
.v2-story__player.is-playing .player__play { opacity: 0 !important; }



/* ============================================ phones, tablets, touch, no motion
   Appended after every base rule on purpose (launch review 2026-09-04):
   these override base declarations of the same specificity. */
/* the counter pill, shown by the contexts below */
.v2-track__index {
  display: none; margin: 0;
  color: var(--on-dark); background: rgba(244, 243, 239, 0.08); border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-pill); padding: 0.55rem 0.85rem;
  font-size: 0.78rem; letter-spacing: 0.16em; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* no motion at desktop: four tiles across instead of one 1,650px tile per row */
@media (min-width: 920px) { .v2-track__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* under 920 the switcher stacks: each service is its own hairline-topped
   block, and the reel slot (the desktop dock target) is not shown at all,
   which also keeps the second copy of the reel from loading on phones */
@media (max-width: 919.98px) {
  .v2-panels { gap: 0; }
  .v2-panel + .v2-panel { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--hairline-dark); }
  .v2-slot { display: none; }
}
/* phones and tablets: Selected Work is a native snap scroller with a peek of
   the next tile, the counter and a swipe hint; tiles are positioned so
   nothing inside them can escape the clip */
@media (max-width: 919.98px) {
  .v2-track__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .v2-track__viewport::-webkit-scrollbar { display: none; }
  .v2-track__row { display: flex; gap: 1rem; padding: 0 var(--gutter); width: max-content; }
  .v2-tile { flex: 0 0 min(72vw, 300px); width: min(72vw, 300px); scroll-snap-align: start; scroll-margin-left: var(--gutter); position: relative; }
  .v2-tile__media { margin-bottom: 0.8rem; }
  .v2-track__index { display: block; }
  .v2-work__side { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  /* BUG FIX 2026-09-06 (David could not swipe the row on his phone): the
     scroller's own box was as wide as its content (2,317px at 375px), because
     a grid/flex item defaults to min-width:auto and grows to its content;
     the page clips overflow, so there was nothing to scroll and the tiles
     past the first three were simply unreachable. Pin the stage column, the
     track and the viewport to the screen width so the viewport is the thing
     that scrolls. */
  .v2-work__stage { grid-template-columns: minmax(0, 1fr); }
  .v2-track, .v2-track__viewport { min-width: 0; width: 100%; max-width: 100%; }
  html.motion-init .v2-track__viewport { display: block; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html.motion-init .v2-track__row { display: flex; gap: 1rem; padding: 0 var(--gutter); width: max-content; transform: none; }
  html.motion-init .v2-tile { scroll-snap-align: start; scroll-margin-left: var(--gutter); position: relative; }
}
@media (min-width: 600px) and (max-width: 919.98px) { .v2-tile { flex-basis: min(40vw, 340px); width: min(40vw, 340px); } }
/* touch devices at desktop width (iPad landscape): the mouse pan never runs,
   so the same native scroller takes over */
@media (hover: none) and (min-width: 920px) {
  html.motion-init .v2-track__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html.motion-init .v2-track__viewport::-webkit-scrollbar { display: none; }
  html.motion-init .v2-tile { scroll-snap-align: start; scroll-margin-left: var(--gutter); position: relative; }
}

/* Alex's review 2026-09-06: the Location Capital wordmark reads larger and
   higher than the other logos; 20% smaller, scaled about its centre so it
   sits on the same line as the rest. */
.v2-logoband__row li:last-child img { transform: scale(0.8); transform-origin: 50% 50%; }