/* KYUL.CO — HOME page styles */

/* ============================================================
   HOME HERO — large typographic statement with typing cursor
   (coder.com-inspired layout)
   ============================================================ */

@keyframes home-hero-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Hero heading — merged canonical (more.css values preserved as today's computed) */
.home-hero-static__h {
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  white-space: nowrap;
  margin: 0 0 32px;
}
.home-hero-static__grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  min-height: 460px;
}
.home-hero-static__left {
  flex: 0 1 54%;
}
.home-hero-static__right {
  flex: 0 1 38%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.home-hero-static__lede {
  color: #000;
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.6;
}
/* Tagline (typing animation target) — moved from more.css */
.home-hero-static__tagline {
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.3;
  font-weight: 500;
  text-align: left;
  margin: 0;
  min-height: 2.6em;
}
/* Centred hero variant — headline + sub + CTA stacked over the bg video */
.home-hero-static__grid--center {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0;
}
.home-hero-static__grid--center .home-hero-static__h {
  color: #fff;
  font-weight: 700;
  font-size: clamp(32px, 4.8vw, 72px);
  white-space: normal; /* base rule sets nowrap; this headline is too long for it */
  margin: 0 0 24px;
  text-shadow: 0 2px 24px rgba(10, 16, 40, .35);
}
.home-hero-static__accent { font-style: normal; color: #284CA0; }

/* Sub-copy brand word: white type on a solid blue marker block.
   <mark> defaults to a yellow highlight in every browser — both properties
   have to be set, not just the background. */
.home-hero-static__mark {
  background-color: #284CA0;
  color: #fff;
  padding: 0.08em 0.28em;
}

/* Headline typewriter (modules/home-hero-typewriter.js).
   visibility — not display — so unrevealed characters still reserve their
   space and the headline never reflows or jumps line as it types. */
.hero-tw__ch.is-hidden { visibility: hidden; }
.hero-tw__cursor {
  display: inline-block;
  width: 3px;
  height: 0.92em;
  margin-left: 2px;
  vertical-align: -0.08em;
  background: currentColor;
  animation: hero-tw-blink 1s steps(1) infinite;
}
.home-hero-static__h.is-typing .hero-tw__cursor { animation: none; opacity: 1; }
@keyframes hero-tw-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.home-hero-static__grid--center .home-hero-static__lede {
  color: rgba(255, 255, 255, .92);
  margin: 0 0 40px;
  text-shadow: 0 1px 12px rgba(10, 16, 40, .35);
}
.home-hero-static__cta {
  display: inline-block;
  padding: 18px 40px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.04em;
}
/* Same letter-flicker hover as .btn / .cta-band__btn (keyframes in styles.css).
   main.js splits the label into .btn-letter spans for these selectors. */
.home-hero-static__cta .btn-letter { display: inline-block; white-space: pre; }
.home-hero-static__cta:hover .btn-letter,
.home-hero-static__cta:focus-visible .btn-letter { animation: btn-letter-flicker 1s ease-in-out forwards; }

@media (max-width: 900px) {
  /* Chained class: the .home-hero-static__grid mobile rule below sets
     align-items:flex-start at equal specificity and later source order. */
  .home-hero-static__grid.home-hero-static__grid--center { align-items: center; text-align: center; }
  /* Colour/text-shadow overrides removed 2026-07-29: mobile now plays the same
     dark hero video as desktop, so the copy inherits the desktop light-on-dark
     treatment (white + shadow) instead of the #111/#333 it used against the old
     white-washed still. Only the spacing override is mobile-specific. */
  .home-hero-static__grid--center .home-hero-static__lede { margin-bottom: 32px; }
  .home-hero-static__cta { padding: 16px 32px; }
  .home-hero-static__h {
    font-size: clamp(40px, 12vw, 68px);
    font-weight: 500;
    white-space: normal; /* revert nowrap on mobile */
  }
  .home-hero-static__grid {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
  }
  .home-hero-static__left,
  .home-hero-static__right {
    flex-basis: 100%;
  }
  .home-hero-static__tagline { font-size: clamp(22px, 6vw, 36px); }
}

/* ============================================================
   HOME INTRO — 한결같이, 바르게, 진심으로
   ============================================================ */
.home-intro {
  padding-block: clamp(72px, 9vw, 140px);
}
.home-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
.home-intro h2 {
  font-size: clamp(40px, 4.8vw, 64px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.home-intro__copy.home-intro__copy--lg { font-size: 17px; line-height: 1.8; max-width: none; }
.home-intro__copy-bold { font-size: 1.08em; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.home-intro__copy {
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.8;
  margin: 0;
  max-width: none;
}

@media (max-width: 900px) {
  .home-intro { padding-block: clamp(48px, 7vw, 80px); }
  .home-intro__grid { grid-template-columns: 1fr; gap: 28px; }
  #page-0 .home-intro__learn-more { margin-top: 0; }
}

/* ============================================================
   HOME FEATURE CARD — dark image + metrics
   ============================================================ */

/* ============================================================
   HOME PURPOSE & VALUES — image left, copy right, labels at bottom
   ============================================================ */
/* ============================================================
   HOME PURPOSE — Figma 721:19 (desktop 1500x610) / 721:1056 (mobile 335x480)
   Left column: heading top, panel copy + ‹ › arrows pinned to the bottom.
   Right column: the 1000x610 media plate (2fr of a 1fr/2fr split).
   Mobile flips to heading|arrows on one row, then a single 335x400 plate with
   the copy overlaid in white — see the @media block below.
   ============================================================ */
.home-purpose { padding-bottom: var(--section-y); background-color: #ffffff; }
.home-purpose__head {
  grid-area: head;
  align-self: start;
}
.home-purpose__head h2 {
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.11;               /* 40/36 */
  margin: 0;
  color: var(--ink);
}
.home-purpose__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "head media"
    "copy media"
    "nav  media";
  gap: 0 clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.home-purpose__media {
  grid-area: media;
  position: relative;
  aspect-ratio: 1000 / 610;
  overflow: hidden;
}
.home-purpose__img {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.home-purpose__img.is-active { opacity: 1; }
/* (moved into combined block) */
/* All four panels share one grid cell so they cross-fade in place. */
.home-purpose__copy {
  grid-area: copy;
  align-self: end;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.home-purpose__panel {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.home-purpose__panel.is-active { opacity: 1; pointer-events: auto; }
.home-purpose__panel h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.5;                /* 30/20 */
  margin: 0 0 9px;
  color: var(--ink);
}
.home-purpose__panel p {
  font-size: 16px;
  line-height: 1.5;                /* 24/16 */
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  word-break: keep-all;
}

/* ‹ › pair — two 36px outline circles, 14px apart (Figma 721:136: 85.71 total). */
.home-purpose__nav {
  grid-area: nav;
  align-self: end;
  display: flex;
  gap: 14px;
  margin-top: 32px;
}
.home-purpose__arrow {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;                       /* the ring below draws the circle, not a border */
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  overflow: visible;
  transition: background-color .2s ease, color .2s ease;
}
/* Hover stays subtle on purpose: a solid dark fill would swallow the progress
   ring, which is the same reason the facts rotator uses a 10% wash. */
.home-purpose__arrow:hover { background: rgba(0, 0, 0, .06); }
.home-purpose__arrow:hover .home-purpose__ring-track { stroke: rgba(0, 0, 0, .45); }
.home-purpose__arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Progress ring — ported from .home-facts__ring. rotate(-90deg) starts the
   sweep at 12 o'clock; stroke-dashoffset is scrubbed by home-purpose.js. */
.home-purpose__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: rotate(-90deg);
  overflow: visible;
}
.home-purpose__ring-track {
  fill: none;
  stroke: rgba(0, 0, 0, .25);
  stroke-width: 1;
  transition: stroke .3s;
}
.home-purpose__ring-fill {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 97.39;         /* 2*pi*15.5 — keep in sync with r in front-page.php */
  stroke-dashoffset: 97.39;        /* fully hidden until JS scrubs it */
}

@media (max-width: 900px) {
  /* Heading and arrows share the top row; the plate below carries the copy as a
     white overlay (Figma 721:1056), so .home-purpose__copy is placed INTO the
     media area rather than after it. */
  .home-purpose__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "head  nav"
      "media media";
    gap: 20px 16px;
  }
  .home-purpose__media { aspect-ratio: 335 / 400; }
  .home-purpose__nav { align-self: start; margin-top: 0; }
  .home-purpose__copy {
    grid-area: media;
    align-self: end;
    z-index: 2;
    padding: 22px;
    color: #fff;
  }
  .home-purpose__panel h3 { font-size: 16px; line-height: 1.25; margin-bottom: 8px; color: #fff; }
  .home-purpose__panel p  { font-size: 13px; line-height: 1.54; color: rgba(255,255,255,.88); }
}

/* ============================================================
   PV ART — deep navy waves (Built on Trust hero image)
   ============================================================ */
.pv-art {
  position: absolute; inset: 0;
  background: #0b1424;
  overflow: hidden;
}
.pv-art::before,
.pv-art::after {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 60% 40% at 30% 35%, rgba(40,60,100,.55), transparent 60%),
    radial-gradient(ellipse 70% 50% at 70% 65%, rgba(20,32,60,.7), transparent 65%),
    radial-gradient(ellipse 90% 30% at 50% 50%, rgba(60,90,140,.25), transparent 70%);
  filter: blur(2px);
}
.pv-art::after {
  background:
    repeating-linear-gradient(
      170deg,
      transparent 0,
      transparent 24px,
      rgba(255,255,255,.04) 24px,
      rgba(255,255,255,.04) 25px,
      transparent 25px,
      transparent 60px,
      rgba(0,0,0,.4) 60px,
      rgba(0,0,0,.4) 90px
    );
  mix-blend-mode: overlay;
  filter: blur(8px);
  opacity: .9;
}
/* Per-value art — each pillar gets its own atmosphere.
   We override ::before/::after on the modifier so the four panels read
   as distinct images rather than four identical navy gradients. */

/* 0 — Built on Trust: deep navy horizontal waves (default) */
.pv-art--0 { background: #0b1424; }

/* 1 — Beyond Boundaries: warm horizon, expanding light */
.pv-art--1 { background: #1a1410; }
.pv-art--1::before {
  background:
    radial-gradient(ellipse 90% 35% at 50% 60%, rgba(220,140,80,.45), transparent 65%),
    radial-gradient(ellipse 60% 25% at 50% 78%, rgba(255,180,110,.55), transparent 70%),
    linear-gradient(180deg, #0c0a08 0%, #1c1410 60%, #2a1a10 100%);
  filter: blur(0);
}
.pv-art--1::after {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0, transparent 80px,
      rgba(255,255,255,.04) 80px, rgba(255,255,255,.04) 81px
    );
  mix-blend-mode: screen;
  filter: blur(0);
  opacity: .6;
}

/* 2 — One Team: convergent radial, three streams meeting at center */
.pv-art--2 { background: #0d1620; }
.pv-art--2::before {
  background:
    conic-gradient(from 210deg at 50% 55%,
      rgba(80,140,200,.35) 0deg,
      transparent 90deg,
      rgba(60,180,160,.3) 180deg,
      transparent 270deg,
      rgba(120,100,200,.32) 330deg,
      rgba(80,140,200,.35) 360deg),
    radial-gradient(circle at 50% 55%, rgba(255,255,255,.08), transparent 25%);
  filter: blur(6px);
}
.pv-art--2::after {
  background:
    radial-gradient(circle at 50% 55%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 4%, transparent 8%);
  mix-blend-mode: screen;
  opacity: 1;
  filter: blur(1px);
}

/* 3 — Growing Together: organic vertical growth, soft greens rising */
.pv-art--3 { background: #0a1612; }
.pv-art--3::before {
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(60,140,100,.4), transparent 65%),
    radial-gradient(ellipse 30% 60% at 35% 90%, rgba(90,180,140,.25), transparent 60%),
    radial-gradient(ellipse 30% 70% at 70% 95%, rgba(120,200,160,.2), transparent 65%),
    linear-gradient(180deg, #08120e 0%, #0a1612 60%, #102018 100%);
  filter: blur(2px);
}
.pv-art--3::after {
  background:
    repeating-linear-gradient(
      88deg,
      transparent 0, transparent 18px,
      rgba(255,255,255,.025) 18px, rgba(255,255,255,.025) 19px
    );
  mix-blend-mode: overlay;
  filter: blur(0);
  opacity: .7;
}

/* PURPOSE mobile horizontal-scroll list removed 2026-07-29 along with the
   desktop bullet list, the .home-purpose__bullet/__progress/__label rules and
   template-parts/purpose-icon.php — the redesign (Figma 721:1056) navigates
   with the ‹ › arrows at every width, so there is no row list to style. */

/* ============================================================
   HOME GLANCE — At a Glance, left copy + 2x2 numbered grid
   ============================================================ */
.home-glance { padding-bottom: 84px; }
.home-glance__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
.home-glance__left .micro {
  display: block;
  margin-bottom: 18px;
}
.home-glance__left h2 {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin: 0 0 24px;
  color: var(--ink);
  max-width: 14ch;
}
.home-glance__left p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
  margin: 0;
  max-width: 38ch;
}
.home-glance__right {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.glance-card {
  border-top: none;
  padding: 0;
  background: var(--bg);
  border-radius: 0;
}
.glance-card .micro {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.glance-card h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink);
}
.glance-card p {
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #3d3950;
  margin: 0;
}
@media (max-width: 1100px) {
  .home-glance__right { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 600px) {
  .home-glance__grid { gap: 12px; }
  .home-glance__right { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ---- HOME ONLY — Figma 721:33 / 721:1040 -------------------------------
   Everything below is scoped to #page-0 because .home-glance / .glance-card
   are shared with #page-history, which still wants the numbered 4-up cards.
   The band is a full-bleed #f8f8f8 plate behind the (max-width) .container. */
#page-0 .home-glance {
  position: relative;
  padding-block: 112px 118px;      /* 470 tall at the Figma type scale */
  isolation: isolate;
}
/* The section is already full-bleed (.container sits INSIDE it), so the plate
   just fills it. It used to escape with `inset:0 50%; width:100vw` + a centring
   translate — but `html{zoom:1.25}` above 1152px does not scale vw, so 100vw
   rendered 25% too wide and pushed 144-200px of horizontal scroll onto every
   desktop viewport. inset:0 has no viewport units, so neither the zoom nor a
   classic scrollbar's gutter can desync it from the section. */
#page-0 .home-glance::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f8f8f8;
  z-index: -1;
}
#page-0 .home-glance__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0 clamp(24px, 3vw, 40px);
  align-items: start;
}
#page-0 .home-glance__left h2 {
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.11;               /* 40/36 */
  margin: 0;
  max-width: none;
}
#page-0 .home-glance__right {
  /* Same trap as .home-stack__outer: a fixed 450px first track ate the whole
     region on a ~930px container and left the second column 86px wide. The
     Figma columns are 450 : 550 inside the 1000px right region — express that
     as a ratio so it degrades instead of collapsing. */
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 54px 0;                     /* rows sit 150px apart; each item is 96 tall */
}
#page-0 .glance-card h3 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.54;               /* 40/26 */
  margin: 0 0 4px;
  color: #000;
}
#page-0 .glance-card p {
  font-size: 18px;
  line-height: 1.44;               /* 26/18 */
  letter-spacing: -0.02em;
  color: #6c6c6e;
  white-space: pre-line;           /* the \n in each body becomes the line break */
}
/* The base .glance-card paints var(--bg) (white), which showed as four white
   plates on the #f8f8f8 band. Let the band show through instead. */
#page-0 .glance-card { background: transparent; }
/* No hover arrow in the new design — the title no longer shifts to make room. */
#page-0 .glance-card { cursor: default; }
#page-0 .glance-card__arrow { display: none; }
#page-0 .glance-card:hover .glance-card__title-row h3 { transform: none; }

@media (max-width: 900px) {
  #page-0 .home-glance { padding-block: 50px 54px; }
  #page-0 .home-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-0 .home-glance__left h2 { line-height: 1.25; }   /* 30/24 */
  #page-0 .home-glance__right {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px 0;                   /* 106 pitch − 84 item height */
  }
  #page-0 .glance-card h3 { font-size: 18px; line-height: 2.22; margin-bottom: 0; }
  #page-0 .glance-card p  { font-size: 14px; line-height: 1.43; }
}

/* ---- glance-card hover (coder.com arrow + title-shift) ---- */
.glance-card { cursor: pointer; }

.glance-card__title-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.glance-card__arrow {
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  color: var(--ink);
}

.glance-card:hover .glance-card__arrow {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 0.3s, transform 0.3s;
}

.glance-card__title-row h3 {
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glance-card:hover .glance-card__title-row h3 {
  transform: translateX(28px);
  transition-delay: 0.1s;
}

/* ============================================================
   HOME BANNER — scroll-driven letterbox → full-bleed
   Background lives on section::before so JS can scaleX it
   without triggering layout reflow. Inner is a static text
   container — text never moves.
   ============================================================ */
.home-banner {
  position: relative;
  padding: 0;
  margin: 0 0 84px;
  overflow: hidden;
}
/* Background layer — static full-bleed */
.home-banner::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  background-color: #0d0d0d;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url('../images/page-cta-bg.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 0;
}
/* Text container — static, no background, never resized by JS */
.home-banner__inner {
  position: relative;
  z-index: 1;
  max-width: 100%;
  width: 100%;
  margin: 0;
  border-radius: 0;
  padding: clamp(96px, 12vw, 180px) var(--gutter);
  overflow: visible;
  color: #fff;
}
.home-banner h2 {
  position: relative;
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 32px;
  text-shadow: 0 2px 20px rgba(0,0,0,.2);
  text-align: center;
}
.home-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-banner .btn {
  position: relative;
  background: #ffffff;
  color: #0d0d0d;
  border: none;
  border-radius: 9999px;
  padding: 14px 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background .2s, color .2s, transform .15s;
}
.home-banner .btn:hover {
  background: #f0f0f0;
}

@media (max-width: 900px) {
  .home-banner__inner { padding: clamp(48px, 12vw, 72px) 24px; }
}

/* ============================================================
   HOME FEATURE TABS — Integrated / Global / Musical
   (coder.com style vertical auto-tabs)
   ============================================================ */
.home-tabs {
  padding-bottom: clamp(80px, 9vw, 140px);
}
.home-tabs__head { margin-bottom: 52px; max-width: none; padding-left: 0; }
.home-tabs__head .micro { display: block; margin-bottom: 18px; }
.home-tabs__eyebrow {
  display: block;
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.home-tabs__statement {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.45;
  margin: 0;
  max-width: 30ch;
}
.home-tabs__statement .is-dark { color: var(--ink); }
.home-tabs__statement .is-muted { color: #b7b3ad; }

.home-tabs__head p {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 52ch;
}
/* Accordion grid scroll-reveal: fade up when .is-in is added by intersection observer */
.home-tabs__grid.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.home-tabs__grid.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Coder-style accordion layout — flex row, list left + image right */
.home-tabs__grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  margin-top: 80px;
}

/* Image panel — flex: takes up ~55% */
.home-tabs__img-wrap {
  flex: 1;
  max-width: 710px;
  aspect-ratio: 710 / 828;
}
.home-tabs__img-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid var(--line);
  background: #f0ede7;
}

/* Accordion list — fixed width left column */
.home-tabs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 522px;
  overflow: hidden;
}
.home-tabs__list li {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 300ms;
  flex: 0 0 auto;
}
.home-tabs__list li.is-active { flex: 1; }
.home-tabs__list li:hover { background-color: rgba(0,0,0,.03); }

/* Top divider and white corner mask */
.home-tabs__divider {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}

/* Accordion button */
.home-tabs__list button {
  width: 100%;
  cursor: pointer;
  padding: 24px 32px 24px 0;
  text-align: left;
  background: none;
  border: none;
  outline: none;
  display: block;
}
.home-tabs__title-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}
.home-tabs__title-row h3 {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
}
.home-tabs__num {
  font-family: var(--f-mono, monospace);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 0.6em;
  display: inline-block;
}

/* Description body — visible on mobile always */
.home-tabs__body {
  padding: 3px 0 0;
  transition: opacity 200ms;
}
.home-tabs__body p {
  font-size: clamp(15px, 1.5vw, 18px);
  max-width: 392px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

/* Progress bar */
.home-tabs__progress {
  position: absolute; left: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  width: 0;
  transition: none;
}
.home-tabs__list li.is-active .home-tabs__progress { transition: width 5s linear; width: 100%; }

/* Viz panels */
.home-tabs__viz-panel {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-tabs__viz-panel.is-active { opacity: 1; }
.home-tabs__viz-panel.is-leaving { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.home-tabs__viz-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Desktop: description is absolutely positioned (out of flow) when inactive */
@media (min-width: 768px) {
  .home-tabs__grid { margin-top: 40px; }
  .home-tabs__list button { padding: 36px 36px 36px 0; }
  .home-tabs__body {
    position: absolute;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    transition: none;
  }
  .home-tabs__list li.is-active .home-tabs__body {
    position: relative;
    opacity: 1;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
    pointer-events: auto;
  }
}

@media (max-width: 900px) {
  .home-tabs__grid { flex-direction: column; margin-top: 48px; }
  .home-tabs__img-wrap { max-width: none; }
  .home-tabs__list { width: 100%; max-width: none; height: auto; }
}

/* ============================================================
   HOME TABS — scroll-pinned igisam-style effect (>900px only)
   Tall wrapper holds a sticky pin; JS maps scroll progress to the
   active tab + clip-path wipe + parallax. ≤900px keeps the timer
   accordion (rules above). reduced-motion falls back to crossfade.
   Spec: docs/superpowers/specs/2026-06-04-home-tabs-scroll-pin-design.md
   ============================================================ */
@media (min-width: 901px) {
  /* `.home-tabs { height: 400svh }` REMOVED 2026-07-29. It was the tall wrapper
     for the retired scroll-pin design, but .home-tabs__pin no longer exists in
     the markup — the sticky-stack deck supplies its own runway via each item's
     padding-bottom. The orphaned height was still reserving four viewports, so
     ~4000px of dead space sat between the last stack card and .home-service.
     Do not reintroduce a height here; the base padding-bottom is the spacing. */
  .home-tabs__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    /* top-aligned with clearance for the fixed nav — head copy stays visible;
       the grid flexes to fill whatever height remains (content is taller than
       the viewport, so centering would clip the head off the top). */
    justify-content: flex-start;
    padding-top: clamp(84px, 12vh, 124px);
    padding-bottom: clamp(24px, 5vh, 56px);
  }
  /* grid fills the leftover pin height; image stretches to it (cover-cropped)
     instead of forcing its portrait aspect-ratio and overflowing. */
  .home-tabs__grid {
    flex: 1;
    min-height: 0;
    align-items: stretch;
    margin-top: clamp(16px, 3vh, 36px);
  }
  .home-tabs__grid .home-tabs__img-wrap {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }
  /* draw-line accent under the head */
  .home-tabs__head-line {
    height: 1px;
    margin: 22px 0 4px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .8s ease-out;
  }
  .home-tabs__head-line.is-drawn { transform: scaleX(1); }
  /* clip-path wipe replaces the opacity crossfade; all panels visible,
     JS writes inline clip-path + img transform every frame. */
  .home-tabs__viz-panel { opacity: 1; clip-path: inset(100% 0 0 0); will-change: clip-path; }
  .home-tabs__viz-panel.is-active { clip-path: inset(0 0 0 0); }
  .home-tabs__viz-panel img { will-change: transform; }
  /* scroll-driven progress (JS sets width inline) — no 5s timer animation */
  .home-tabs__progress,
  .home-tabs__list li.is-active .home-tabs__progress { transition: none; }
}

/* Accessible path: no pin / no scroll-jack — restore the crossfade accordion.
   Placed after the pin block so it wins for desktop + reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  /* `.home-tabs { height: auto }` dropped — nothing sets a height any more. */
  .home-tabs__pin { position: static; height: auto; }
  .home-tabs__head-line { transition: none; transform: scaleX(1); }
  .home-tabs__viz-panel { transition: opacity .3s; clip-path: none; opacity: 0; }
  .home-tabs__viz-panel.is-active { opacity: 1; clip-path: none; }
  .home-tabs__viz-panel img { transform: none; }
}

/* ============================================================
   HOME SERVICE GRID — 6 cards
   ============================================================ */
.home-service {
  padding-block: 0 clamp(80px, 9vw, 140px);
}
.home-service__head { margin-bottom: 56px; }
.home-service__head h2 {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-align: center;
  line-height: 1.05;
}
.home-service__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  background: rgb(246, 246, 246);
  border-radius: 0;
  padding: 40px 36px;
}
.service-card .micro { display: block; margin-bottom: 18px; color: var(--ink-4); }
.service-card h3 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.service-card p {
  font-size: 16px;
  color: var(--ink-3);
  line-height: 1.65;
  margin: 0 0 24px;
}

@media (max-width: 900px) {
  .home-service__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  /* Horizontal free-scroll carousel (no snap, smooth momentum) — full-bleed,
     80%-width cards peek the next. Bleeds past the .container gutter with negative
     margin + matching padding so the first card aligns with content and the last
     card keeps a trailing gutter. Card sizing matches Coder's benefits cards. */
  .home-service__grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
  }
  .home-service__grid::-webkit-scrollbar { display: none; }
  /* While mouse-dragging the row: grabbing cursor, kill text selection and
     smooth-scroll so the drag tracks the pointer 1:1 (see drag IIFE in main.js). */
  .home-service__grid.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
  }
  /* Narrower + taller portrait cards: more of the next card peeks (swipe cue),
     content gets vertical breathing room. Icon sits at top, heading+text pushed
     to the bottom via margin-top:auto on the heading. */
  .home-service__grid .service-card {
    flex: 0 0 70%;
    display: flex;
    flex-direction: column;
    min-height: 232px;
    padding: 20px 18px;
  }
  .home-service__grid .service-card h3 {
    margin-top: auto;
  }
  .home-service__grid .service-card__thumb {
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
  }
  .home-service__grid .service-card h3 {
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin-bottom: 12px;
  }
  .home-service__grid .service-card p {
    font-size: 17px;
    line-height: 1.55;
    margin-bottom: 0;
  }
}

/* Service-card draw-in animation — card expands top→bottom then content fades in */
@keyframes svc-card-expand {
  from { clip-path: inset(0 0 calc(100% - 4px) 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes svc-content-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* Per-card delays — row 1: 1–3, row 2: 4–6 */
.home-service__grid .service-card:nth-child(1) { --card-delay: 0s; }
.home-service__grid .service-card:nth-child(2) { --card-delay: 0.08s; }
.home-service__grid .service-card:nth-child(3) { --card-delay: 0.16s; }
.home-service__grid .service-card:nth-child(4) { --card-delay: 0.45s; }
.home-service__grid .service-card:nth-child(5) { --card-delay: 0.53s; }
.home-service__grid .service-card:nth-child(6) { --card-delay: 0.61s; }

/* Hidden state before viewport entry */
.home-service__grid .service-card.reveal {
  clip-path: inset(0 0 calc(100% - 4px) 0);
}
.home-service__grid .service-card.reveal .service-card__thumb,
.home-service__grid .service-card.reveal h3,
.home-service__grid .service-card.reveal p {
  opacity: 0;
}

/* Triggered: card box expands, then content fades in */
.home-service__grid.reveal-stagger.is-in .service-card {
  animation: svc-card-expand 0.5s cubic-bezier(0.4, 0, 0.2, 1) var(--card-delay, 0s) both;
}
.home-service__grid.reveal-stagger.is-in .service-card .service-card__thumb,
.home-service__grid.reveal-stagger.is-in .service-card h3,
.home-service__grid.reveal-stagger.is-in .service-card p {
  animation: svc-content-in 0.4s ease-out calc(var(--card-delay, 0s) + 0.42s) both;
}

/* ============================================================
   HOME FACTS — deep navy hero with diffused glow
   ============================================================ */
.home-facts {
  position: relative;
  background: #050a18 url('../images/home-facts-bg-0.jpg?v=169') center/cover no-repeat;
  color: #fff;
  padding: clamp(56px, 7vw, 96px) 0 clamp(52px, 6.5vw, 88px);
  overflow: hidden;
  isolation: isolate;
}
.home-facts[data-slide="0"] { background-image: url('../images/home-facts-bg-0.jpg?v=169'); }
.home-facts[data-slide="1"] { background-image: url('../images/home-facts-bg-1.jpg?v=169'); }
.home-facts[data-slide="2"] { background-image: url('../images/home-facts-bg-2.jpg?v=169'); }
.home-facts::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(5, 10, 24, 0.25);
  pointer-events: none;
}
/* One background video per slide (see modules/home-facts-video.js), swapped
   in sync with [data-slide]. z-index:-2 so it paints below the ::before
   darkening tint above (-1) and below the real title/subtitle text (.home-facts
   already isolates its own stacking context via isolation:isolate, so this
   stays local to the section). Desktop only, same as the hero video. */
/* Geometry applies at every width; only `display` is gated. Default off, then
   turned on for desktop (any template) and for the whole front page including
   mobile (2026-07-29). Deliberately NOT global: the AI-SEO templates reuse this
   partial and home.css, so ungating it outright would put ~10MB of video on
   their mobile pages too. body.home is (0,2,1) and beats the (0,1,0) default. */
.home-facts__bg-video {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.home-facts__bg-video.is-active { opacity: 1; }
@media (min-width: 901px) {
  .home-facts__bg-video { display: block; }
}
body.home .home-facts__bg-video { display: block; }
.home-facts > .container {
  position: relative;
  min-height: 480px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
}
.home-facts__top {
  position: relative;
  z-index: 2;
}
.home-facts__title {
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 0 0 28px;
}
.home-facts__subtitle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.85);
  margin: 0 0 8px;
}
.home-facts__more {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
}
.home-facts__more:hover { color: #fff; }
.home-facts__top:hover .home-facts__more { color: #fff; }
.home-facts__top:hover .insight-card__more-arrow-y {
  transform: translateY(7.75px);
  transition-delay: 0s;
}
.home-facts__top:hover .insight-card__more-arrow-x {
  transform: translateX(10px);
  transition-delay: 0.15s;
}
.home-facts__top:hover .insight-card__more-line-fill { transform: translateX(0); }
/* Nudge underline 1px lower in facts context */
.home-facts__more .insight-card__more-line { bottom: -1.5px; }

.home-facts__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}
.home-facts__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.home-fact {
  flex: 0 0 100%;
  position: relative;
}
.home-fact__art { display: none; }

.home-facts__bottom {
  position: relative;
  z-index: 2;
  grid-row: 3;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 80px;
}
.home-facts__nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-facts__btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.85);
  font-size: 14px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: scale 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  position: relative;
  overflow: visible;
}
.home-facts__btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.home-facts__btn:hover .home-facts__ring-track { stroke: rgba(255,255,255,.6); }
.home-facts__btn:active { scale: .95; }
/* Arrow span — spring-eased translate on hover, matching reference */
.home-facts__btn span {
  display: inline-flex;
  transition: translate 0.8s linear(0 0%, 0.006 1.1%, 0.024 2.3%, 0.097 5%,
              0.534 15.9%, 0.722 21.6%, 0.795 24.5%, 0.855 27.4%, 0.904 30.5%,
              0.942 33.7%, 0.989 40.5%, 1.009 49.1%, 1 100%);
}
.home-facts__btn[data-dir="1"]:hover span { translate: 2px 0; }
.home-facts__btn[data-dir="-1"]:hover span { translate: -2px 0; }

.home-facts__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: rotate(-90deg);
  overflow: visible;
}
.home-facts__ring-track {
  fill: none;
  stroke: rgba(255,255,255,.35);
  stroke-width: 1.5;
  transition: stroke .3s;
}
.home-facts__ring-fill {
  fill: none;
  stroke: rgba(255,255,255,.85);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 97.39;
  stroke-dashoffset: 97.39;
  transition: stroke .3s;
}
.home-facts__count {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: #fff;
}
@media (max-width: 700px) {
  /* Carousel art is hidden on mobile, so the section's tall bottom padding left
     a dark dead-zone *below* the nav row — making the nav look "too high".
     Trim the bottom padding and the gap above the nav, and shrink the empty
     middle so the nav/count sit near the section's visual bottom edge. */
  .home-facts { padding-block: 50px; }
  /* Scale the art to fill the section height and crop the width from the centre
     (the panorama's subject sits mid-frame), rather than letterboxing it. */
  .home-facts { background-size: auto 100%; background-position: center center; }
  .home-facts > .container { min-height: 300px; }
  .home-facts__bottom { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; }
}

/* ============================================================
   HOME METRIC 50+
   ============================================================ */
.home-stat {
  padding-block: var(--section-y);
}
.home-stat__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
}
.home-stat__left h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin-bottom: 20px;
}
.home-stat__left p {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.75;
  max-width: 40ch;
}
.home-stat__num {
  text-align: right;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-size: clamp(100px, 18vw, 250px);
  color: var(--ink);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 16px;
}
.home-stat__arrow {
  font-size: 0.6em;
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1;
  align-self: flex-start;
  margin-top: 0.1em;
  width: 0.6em;
  height: 0.6em;
}
.home-stat__plus {
  color: var(--ink-4);
  font-weight: 500;
}

/* Rolling-stat counter on home (slot machine, coder.com pattern) */
.rolling-stat--home {
  display: inline-flex;
  align-items: flex-end;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.rolling-stat--home .rolling-number {
  /* needs a width — ghost glyph supplies it; ensure overflow clips above + below */
  overflow-y: clip;
  align-items: flex-start;
  line-height: 1; /* match clip window to digit height; 0.95 inherited from parent causes clipping */
}
.rolling-stat--home:not(.is-rolled) .rn-ghost { opacity: 1; }
.rolling-stat--home:not(.is-rolled) .rn-track { display: none; }

@media (max-width: 900px) {
  .home-stat__grid { gap: 28px; }
}
@media (max-width: 560px) {
  .home-stat__grid { grid-template-columns: 1fr; gap: 24px; }
  /* Keep the big number right-aligned on mobile, matching the desktop layout. */
  .home-stat__num { justify-content: flex-end; }
}

/* ============================================================
   HOME PARTNERS logo row
   ============================================================ */
/* padding-top 0: the rolling counter above and this marquee read as one
   statement, so the boundary between them is deliberately tighter than the
   site's section rhythm. The counter's own bottom padding supplies the gap —
   see the `#page-0 .home-stat` rules below and in the 900px block. */
.home-partners {
  padding: 0 0 var(--section-y-md);
  text-align: center;
}
#page-0 .home-stat { padding-bottom: 32px; }
.home-partners .micro { display: block; margin-bottom: 28px; }
.home-partners__scroll-wrapper {
  overflow: hidden;
}
.home-partners__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 64px;
  padding: 0 32px;
  will-change: transform;
  backface-visibility: hidden;
  animation: scroll-left-partners 90s linear infinite;
}
/* Two identical copies of the 54-logo set → shift one full copy (-50%) for a seamless loop */
@keyframes scroll-left-partners {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Each source file is a 120x120 square, so the outline can sit on the wrapper
   and needs no fixed sizing of its own. overflow:hidden clips the artwork's
   corners to the radius so the logo does not square off the rounded edge. */
.home-partners__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
/* Explicit square box, not width:auto. The 108 logos are loading="lazy", so an
   un-loaded img measures 0 wide and the max-content track keeps re-measuring as
   each one decodes — that layout shift is what made the marquee jump. */
.home-partners__logo img {
  height: 120px;
  width: 120px;
  display: block;
  object-fit: contain;
}

/* Phones: tighter pitch so 4–5 logos are on screen at once (76 + 20 = 96px each
   against a ~390px viewport). Duration drops with the track so the scroll keeps
   its ~112px/s pace instead of halving. */
@media (max-width: 767px) {
  .home-partners__track {
    gap: 20px;
    padding: 0 20px;
    animation-duration: 46s;
  }
  .home-partners__logo img { height: 76px; width: 76px; }
}

/* ============================================================
   HOME INSIGHT — left header on same row as 3 cards
   ============================================================ */
.home-insight {
  padding-block: clamp(72px, 7vw, 120px) clamp(80px, 9vw, 140px);
}
.home-insight__row {
  display: flex;
  flex-direction: row;
  gap: clamp(56px, 12vw, 178px);
  align-items: start;
}
.home-insight__head {
  flex: 0.3;
  max-width: 384px;
  position: sticky;
  top: 100px;
  padding-top: 48px;
}
.home-insight__head .micro { display: block; margin-bottom: 14px; color: var(--ink-4); }
.home-insight__head h2 {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 18px;
}
.home-insight__head p {
  font-size: 14px; color: var(--ink-3); line-height: 1.75;
  margin-bottom: 24px;
  max-width: 30ch;
}
.home-insight__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  overflow-x: auto;
}
/* Home page insight-card variant — base lives in more.css; these scope home-only overrides */
.home-insight__grid .insight-card {
  display: grid;
  gap: 16px;
  cursor: pointer;
}
.home-insight__grid .insight-card__img {
  aspect-ratio: 302 / 162;
  border-radius: 0;
  overflow: hidden;
  background: #f5f5f5;
  position: relative;
  border: none;
  margin-bottom: 12px;
  transition: transform .35s ease;
}
.home-insight__grid .insight-card:nth-child(1) .insight-card__img {
  background: linear-gradient(135deg, #3b1a5a, #1e3adb 70%, #0a0a2e);
}
.home-insight__grid .insight-card:nth-child(2) .insight-card__img {
  background: linear-gradient(135deg, #0a0a12 0%, #1a1a24 50%, #2a2a3a 100%);
}
.home-insight__grid .insight-card:nth-child(3) .insight-card__img {
  background: linear-gradient(135deg, #9ec0e8, #e8d4c0);
}
/* Real thumbnails now supplied via inline background-image — drop the gradient
   overlay (::before from more.css) and the placeholder/sparkle box (::after) so
   the actual image shows through */
.home-insight__grid .insight-card__img::before,
.home-insight__grid .insight-card__img::after {
  content: none;
}
.home-insight__grid .insight-card .micro { color: var(--ink-4); }
.home-insight__grid .insight-card h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.home-insight__grid .insight-card p {
  font-size: 12.5px;
  color: var(--ink-4);
  line-height: 1.6;
  margin: 0;
}
.home-insight__grid .insight-card {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.home-insight__grid .insight-card__img img,
.home-insight__grid .insight-card__img > * {
  transition: transform .4s ease;
}
.home-insight__grid .insight-card:hover .insight-card__img {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.home-insight__grid .insight-card:hover .insight-card__img img,
.home-insight__grid .insight-card:hover .insight-card__img > * {
  transform: scale(1.06);
}

/* Insight card stagger reveal — parent .home-insight__row.reveal triggers via is-in */
.home-insight__grid .insight-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.home-insight__row.is-in .home-insight__grid .insight-card:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.home-insight__row.is-in .home-insight__grid .insight-card:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.14s; }
.home-insight__row.is-in .home-insight__grid .insight-card:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.28s; }

@media (max-width: 900px) {
  .home-insight__row { flex-direction: column; gap: 10px; }
  .home-insight__head { position: static; max-width: none; }
  .home-insight__grid { grid-template-columns: 1fr; gap: 24px; overflow-x: visible; }
}

.home-tabs__num {
  font-size: 0.66em;
  font-weight: inherit;
  font-family: inherit;
  color: var(--ink-3);
  vertical-align: baseline;
  margin-left: 8px;
  letter-spacing: inherit;
  top: 0;
}

.service-card {
  position: relative;
}
.service-card__thumb {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 40px;
  border-radius: 0;
  background: #d8d2c8;
  overflow: hidden;
  pointer-events: none;
}
/* AIO — soft sphere glow */
.service-card__thumb--aio {
  background:
    radial-gradient(circle at 35% 30%, #fff 0%, #ffd2b8 30%, #d97757 70%, #4a2010 100%);
}
/* SEO — concentric rings */
.service-card__thumb--seo {
  background:
    radial-gradient(circle at 50% 50%, transparent 18%, #1a1a1a 18.5%, #1a1a1a 22%, transparent 22.5%, transparent 32%, #1a1a1a 32.5%, #1a1a1a 36%, transparent 36.5%, transparent 46%, #1a1a1a 46.5%, #1a1a1a 50%, transparent 50.5%) ,
    #EEEAE4;
}
/* GEO — map pin */
.service-card__thumb--geo {
  background:
    radial-gradient(circle at 50% 38%, #1a1a1a 0%, #1a1a1a 22%, transparent 23%),
    radial-gradient(circle at 50% 38%, #fff 0%, #fff 8%, transparent 9%),
    linear-gradient(180deg, #f0ece6 0%, #d8d2c8 100%);
}
/* Content — stacked lines */
.service-card__thumb--content {
  background:
    repeating-linear-gradient(180deg,
      #1a1a1a 0, #1a1a1a 4px,
      transparent 4px, transparent 12px) ,
    #EEEAE4;
  background-size: 70% 100%, 100% 100%;
  background-position: 50% 50%, 0 0;
  background-repeat: no-repeat, no-repeat;
}
/* Analytics — bar chart */
.service-card__thumb--analytics {
  background:
    linear-gradient(to top, #1a1a1a 30%, transparent 30%) 12% 100% / 14% 100% no-repeat,
    linear-gradient(to top, #1a1a1a 55%, transparent 55%) 38% 100% / 14% 100% no-repeat,
    linear-gradient(to top, #1a1a1a 75%, transparent 75%) 64% 100% / 14% 100% no-repeat,
    linear-gradient(to top, #1a1a1a 92%, transparent 92%) 90% 100% / 14% 100% no-repeat,
    #EEEAE4;
}
/* Advisory — speech / cross */
.service-card__thumb--advisory {
  background:
    linear-gradient(#1a1a1a, #1a1a1a) center / 60% 4px no-repeat,
    linear-gradient(#1a1a1a, #1a1a1a) center / 4px 60% no-repeat,
    radial-gradient(circle at 50% 50%, #fff 28%, transparent 29%),
    #2a2a2a;
}

.service-card h3,
.service-card p {
  position: relative;
  padding-right: 0;
}
.service-card p {
  padding-right: 0;
}

/* ===== Dark CTA — coder.com pill button style ===== */
#page-0 .dark-cta { text-align: left; color: #1b2524; }
#page-0 .dark-cta p { margin-left: 0; color: #1b2524; }
#page-0 .dark-cta .btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  min-height: 43px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  border-radius: 9999px;
  background-color: #f5f5f5;
  color: #1b2524;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.4s ease, transform 0.2s ease;
  margin-top: 32px;
}
#page-0 .dark-cta .btn:hover { background-color: #eaeaea; }
#page-0 .dark-cta .btn:active { transform: scale(0.975); }

/* ===== Bridge edits 2026-05-18 ===== */

/* 528c72a6 — hero gradient bleeds into nav (nav is 64px tall, fixed)
   Merged from more.css: background + position + overflow now live here.
   Load-order trick no longer needed — all .home-hero-static rules are in this file. */
.home-hero-static {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Preserved today's computed padding: more.css shorthand `padding: var(--section-y) 0`
     won over the old `padding-top` in this file — keeping that outcome here. */
  padding: var(--section-y) 0;
  /* Fallback ambient gradient — overridden by mobile/desktop bg rules below */
  background:
    radial-gradient(ellipse at 20% 40%, rgba(180,200,230,.85) 0%, rgba(180,160,210,.5) 35%, transparent 60%),
    radial-gradient(ellipse at 78% 55%, rgba(120,140,200,.5) 0%, transparent 55%),
    linear-gradient(135deg, #e9eef6 0%, #d6d4ed 50%, #b3b8d8 100%);
}
.home-hero-static > .container {
  width: 100%;
}
/* Mobile: nav-compensated top padding. The background is now the video's own
   poster frame rather than home-hero-mobile.jpg under a white wash — the wash
   existed to carry dark copy, and the copy is light-on-dark here now. Using the
   poster means no light→dark flash before the video buffers, and a readable
   fallback if it never loads at all. */
@media (max-width: 900px) {
  .home-hero-static {
    padding-top: calc(64px + clamp(48px, 5vw, 80px));
    background: #0a1028 url('../images/hero-bg-poster.jpg?v=176') center/cover no-repeat;
  }
}
/* Desktop: full-bleed main visual — equal specificity; source order now wins within this file */
@media (min-width: 901px) {
  .home-hero-static {
    background: url('../images/mmain_visual.jpg?v=175') center / cover no-repeat;
  }
}

/* Hero background video — desktop only. The background: url(...) above
   stays as the poster/fallback for mobile and for the instant before the
   video buffers. z-index:0 on the section pins a local stacking context so
   the video (z-index:0, absolute) can never paint over .container's text —
   an absolutely-positioned box with no stacking context otherwise paints
   ABOVE static in-flow siblings regardless of DOM order. */
.home-hero-static { z-index: 0; }
.home-hero-static > .container { position: relative; z-index: 1; }
/* Shown at EVERY width as of 2026-07-29 — mobile used to fall back to the
   static home-hero-mobile.jpg. This element only exists on the front page, so
   no body scope is needed. Note the hero copy switches to the light-on-dark
   treatment at mobile too (see the ≤900px block near the top of this file):
   the video is dark, so the old #111 headline would be unreadable over it. */
.home-hero-static__bg-video {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ced8a7f3 — decrease paddings on home-intro */
.home-intro {
  padding-block: clamp(48px, 5.5vw, 72px) clamp(52px, 6.5vw, 80px);
}
@media (max-width: 900px) {
  .home-intro { padding-block: clamp(32px, 4vw, 48px) clamp(36px, 5vw, 56px); }
}

/* 25710686 (panel h3 23px) and task-005 (head line-height 1.05) removed
   2026-07-29 — both were later-in-file overrides that silently beat the
   redesigned .home-purpose type scale above. The Figma values (20/30 panel h3,
   36/40 heading) now live in the HOME PURPOSE block and are not re-stated here.

   ae25d73a + 5f3e7dd8 glance grid also removed: the 1fr/3fr split is superseded
   by the 1fr/2fr + 450px column geometry in the HOME GLANCE block. */

/* statement size — home-tabs keeps the standard container gutter at all widths */
.home-tabs__head p.home-tabs__statement {
  font-size: 27px;
  font-weight: 600;
  line-height: 1.45;
  max-width: 950px;
  word-break: keep-all;
}

/* b85eadbd — swap left/right on home-tabs two-column (img-wrap is first in HTML so row-reverse puts list left).
   Desktop only: on mobile (<=900px) the grid is column (image stacks on top), so row-reverse must NOT apply. */
@media (min-width: 901px) {
  .home-tabs__grid {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 24px;
    margin-top: 16px;
  }
  .home-tabs__grid .home-tabs__img-wrap {
    max-width: none;
  }
}
.home-tabs__list button {
  padding: 24px 20px 24px 0;
}
@media (min-width: 768px) {
  .home-tabs__grid { margin-top: 24px; }
  .home-tabs__list button { padding: 28px 20px 28px 0; }
}
/* Mobile: image fills full width, sits above list, list below */
@media (max-width: 900px) {
  .home-tabs__grid { margin-top: 24px; gap: 24px; }
  .home-tabs__img-wrap { aspect-ratio: 4 / 5; width: 100%; }
}
.home-tabs__title-row h3 {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
}
.home-tabs__num {
  font-size: 1em;
  font-weight: 600;
}

/* 736bed6d — decrease space between service heading and grid below */
.home-service__head {
  margin-bottom: 32px;
}

/* f719f11b — decrease insight card width so 3 fit without scrolling */
.home-insight__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  overflow-x: visible;
}

/* ece660b9 — hide .home-insight__head .micro */
.home-insight__head .micro {
  display: none;
}

/* cfab2ebc — hide .home-insight__head p */
.home-insight__head p {
  display: none;
}

/* eec86a6f — hide .home-insight__head .btn--link */
.home-insight__head .btn--link {
  display: none;
}

/* ===== Bridge edits 2026-05-04 ===== */
/* Hide the 4th home-stat block on the History page */
#page-history > section.home-stat:nth-child(4) {
  display: none;
}
/* Tighter height for History page's stat section */
#page-history .home-stat {
  padding: 48px 0 56px;
}
#page-history .home-stat__grid {
  gap: 40px;
}
#page-history .home-stat__left h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin-bottom: 12px;
}
#page-history .home-stat__num {
  font-size: clamp(56px, 7.5vw, 104px);
}
#page-history .home-glance__grid {
  margin-top: 36px;
  gap: 28px 56px;
}
#page-history .home-glance__right {
  gap: 24px 40px;
}
#page-history .glance-card {
  padding-top: 14px;
}
#page-history .glance-card .micro {
  margin-bottom: 10px;
}
#page-history .glance-card h3 {
  margin-bottom: 6px;
}
@media (max-width: 900px) {
  #page-history .home-stat { padding-block: 36px 44px; }
  #page-history .home-glance__grid { margin-top: 24px; }
}
/* Remove top + left outline from partnerGrid */
#partnerGrid {
  border-top: none;
  border-left: none;
}

/* 0ec74ed9 — insight card "See more" label */
.insight-card__more {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ref-* orphan block removed — styles folded into .home-facts__btn and .home-tabs__viz-panel above */

/* ===== Insight carousel ===== */

/* Track wrapper: clips cards horizontally but lets "See more" arrow/underline breathe vertically */
.home-insight__track-wrap {
  flex: 1;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
}

/* Override grid → flex carousel track */
.home-insight__grid {
  display: flex;
  grid-template-columns: unset;
  flex-wrap: nowrap;
}

/* Each card: 1/3 of wrap width (2 gaps × 24px ÷ 3 = 16px subtracted per card) */
.home-insight__grid .insight-card {
  flex: 0 0 calc(33.333% - 16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Insight card layout: img → meta → title → see more */
.home-insight__grid .insight-card { gap: 12px; }
.home-insight__grid .insight-card .insight-card__meta {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.home-insight__grid .insight-card p { display: none; }
.home-insight__grid .insight-card .insight-card__more { margin-top: auto; }

/* Remove the translateY lift — keep only inner scale */
.home-insight__grid .insight-card:hover .insight-card__img {
  transform: none;
  box-shadow: none;
}

/* Gradients for cards 4–6 */
.home-insight__grid .insight-card:nth-child(4) .insight-card__img {
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}
.home-insight__grid .insight-card:nth-child(5) .insight-card__img {
  background: linear-gradient(135deg, #1a0a2e 0%, #3d1060 60%, #7b1fa2 100%);
}
.home-insight__grid .insight-card:nth-child(6) .insight-card__img {
  background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 50%, #5a5a5a 100%);
}
/* Fill the frame with the inline thumbnail (overrides the gradient's auto sizing) */
.home-insight__grid .insight-card:nth-child(n) .insight-card__img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Stagger reveal for cards 4–6 */
.home-insight__row.is-in .home-insight__grid .insight-card:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.42s; }
.home-insight__row.is-in .home-insight__grid .insight-card:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.56s; }
.home-insight__row.is-in .home-insight__grid .insight-card:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.70s; }

/* Carousel controls — above the track, right-aligned */
.home-insight__controls {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.home-insight__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  color: var(--ink);
  padding: 0;
}

.home-insight__btn:hover { background-color: rgba(0,0,0,.06); }
.home-insight__btn:active { transform: scale(0.95); }
.home-insight__btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.home-insight__btn--ring { overflow: visible; border: none; }

.home-insight__ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
  pointer-events: none;
}

.home-insight__ring-track {
  fill: none;
  stroke: rgba(0,0,0,.15);
  stroke-width: 1.5;
  transition: stroke .3s;
}
.home-insight__ring-fill {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 97.39;
  stroke-dashoffset: 97.39;
  transition: stroke .3s;
}

.home-insight__btn-icon--prev {
  display: inline-flex;
  transform: rotate(180deg);
}

/* "See more" animated arrow + sliding underline */
.insight-card__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  gap: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  margin-top: 0;
}

.insight-card__more-arrow-y {
  display: inline-flex;
  transform: translateY(0);
  transition: transform 0.3s ease 0.15s;
}
.insight-card:hover .insight-card__more-arrow-y {
  transform: translateY(7.75px);
  transition-delay: 0s;
}

.insight-card__more-arrow-x {
  display: inline-flex;
  transform: translateX(-4px);
  transition: transform 0.3s ease 0s;
}
.insight-card:hover .insight-card__more-arrow-x {
  transform: translateX(10px);
  transition-delay: 0.15s;
}

.insight-card__more-label {
  position: relative;
}

.insight-card__more-line {
  position: absolute;
  left: -4px;
  right: 0;
  height: 2px;
  overflow: hidden;
  bottom: -0.5px;
}

.insight-card__more-line-fill {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: translateX(101%);
  transition: transform 800ms linear(0, 0.006 1.1%, 0.024 2.3%, 0.097 5%, 0.534 15.9%, 0.722 21.6%, 0.795 24.5%, 0.855 27.4%, 0.904 30.5%, 0.942 33.7%, 0.989 40.5%, 1.009 49.1%, 1);
}
.insight-card:hover .insight-card__more-line-fill {
  transform: translateX(0);
}

/* home-intro "Learn More" — reuses insight-card__more inner elements */
.home-intro__learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  margin-top: calc(-40px + 8px); /* grid gap is 40px; pull up to leave only 8px */
}
.home-intro__learn-more:hover .insight-card__more-arrow-y,
.home-intro__copy:hover ~ .home-intro__learn-more .insight-card__more-arrow-y {
  transform: translateY(7.75px);
  transition-delay: 0s;
}
.home-intro__learn-more:hover .insight-card__more-arrow-x,
.home-intro__copy:hover ~ .home-intro__learn-more .insight-card__more-arrow-x {
  transform: translateX(10px);
  transition-delay: 0.15s;
}
.home-intro__learn-more:hover .insight-card__more-line-fill,
.home-intro__copy:hover ~ .home-intro__learn-more .insight-card__more-line-fill {
  transform: translateX(0);
}

/* Mobile: single card per view + fix horizontal overflow from align-items:start */
@media (max-width: 900px) {
  .home-insight__grid .insight-card {
    flex: 0 0 100%;
  }
  /* align-items:start lets track-wrap grow to intrinsic width (471px) on mobile.
     Override to stretch so track-wrap and grid are constrained to row width (350px). */
  .home-insight__row {
    align-items: stretch;
  }
  .home-insight__grid {
    width: 100%;
  }
  /* Reduce gap between partners and insight rows on mobile */
  .home-partners {
    padding-bottom: 24px;
  }
  .home-insight {
    padding-top: 16px;
  }

  /* Insight header bar: "Insight" h2 (left) + carousel controls (right) on
     ONE line, cards below. __controls is nested in __track-wrap (not a sibling
     of __head), so absolutely position it to the row's top-right — this keeps
     __track-wrap's overflow-clip intact for the carousel. */
  #page-0 .home-insight__row { position: relative; }
  #page-0 .home-insight__head { padding-top: 0; min-height: 36px; display: flex; align-items: center; }
  #page-0 .home-insight__controls {
    position: absolute;
    top: 0;
    right: 0;
    margin-bottom: 0;
  }
}

/* Mobile: bodies always in flow (no height animation = no layout shift).
   Only opacity changes so the section height stays constant on switch. */
/* Mobile: grid-template-rows 0fr→1fr animates real content height so
   collapse/expand are symmetric — opposing items cancel and list height
   stays stable throughout the transition (no layout shift). */
@media (max-width: 767px) {
  .home-tabs__body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    padding: 0;
    transition: grid-template-rows 0.35s ease, opacity 0.2s ease;
  }
  .home-tabs__body p {
    overflow: hidden;
    min-height: 0;
    padding: 3px 0 24px;
    max-width: none;
  }
  .home-tabs__list li.is-active .home-tabs__body {
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.35s ease, opacity 0.2s ease;
  }
}

/* Transparent nav — homepage only */
body.home .nav {
  position: fixed;
  width: 100%;
  background: transparent;
  border-bottom-color: transparent;
}
body.home .nav.is-scrolled {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.home .nav.nav--mega-open {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* ─────────────────────────────────────────────────────────────
   Uniform mobile section rhythm (homepage only — #page-0)
   Every inter-section gap collapses to a single token so the page
   reads as one coherent flow. Bottom-only padding avoids double
   gaps; the few sections with stray top padding are zeroed.
   ID scope (#page-0) beats the class-only base rules above.
   home-hero (page top) and home-facts (dark full-bleed block with
   its own internal mobile tuning) are deliberately left alone.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* --hsec = gap BETWEEN whole sections (transparent boundaries).
     --hgap = gap WITHIN a section (heading → content). One knob each. */
  #page-0 { --hsec: clamp(80px, 18vw, 104px); --hgap: clamp(20px, 4.5vw, 28px); }

  #page-0 .home-intro   { padding-block: var(--hsec) var(--hsec); }
  #page-0 .home-purpose { padding-top: 0; padding-bottom: var(--hsec); }
  /* .home-glance is NOT in this list: since 2026-07-29 it paints its own
     full-bleed #f8f8f8 band, so its padding is the band's height and is set
     with the rest of the band geometry in the HOME GLANCE block above.
     Re-adding it here would silently win (same specificity, later in file)
     and stretch the grey plate. */
  #page-0 .home-banner  { margin-bottom: var(--hsec); }
  #page-0 .home-tabs    { padding-bottom: var(--hsec); }
  #page-0 .home-service { padding-bottom: var(--hsec); }
  /* padding-bottom stays off the --hsec rhythm on purpose — the marquee below
     belongs to the counter, so that one boundary is tightened to 32px. */
  #page-0 .home-stat    { padding-top: var(--hsec); padding-bottom: 32px; }
  #page-0 .home-partners { padding-top: 0; padding-bottom: var(--hsec); }
  #page-0 .home-insight  { padding-top: 0; padding-bottom: var(--hsec); }
  #page-0 .cta-band      { padding-block: 0 var(--hsec); }

  /* Intra-section: tighten heading → content. Scoped to #page-0 so it
     beats the class-only base rules (52px tabs, 32px service, 28px intro). */
  #page-0 .home-intro__grid    { gap: var(--hgap); }
  #page-0 .home-tabs__head     { margin-bottom: var(--hgap); }
  #page-0 .home-service__head  { margin-bottom: var(--hgap); }
}

/* ===========================================================
   ZOOM COMPENSATION (pairs with `html { zoom: 1.25 }` in styles.css)
   Root zoom does not scale svh/vh, so full-height sections would render 25%
   taller than the screen. 100svh / 1.25 = 80svh → paints as exactly one viewport.
   =========================================================== */
@media (min-width: 1152px) {
  /* .home-tabs / .home-tabs__pin heights removed 2026-07-29 with the 901px
     rule above — the scroll-pin wrapper they compensated for is gone. */
  .home-hero-static { min-height: 80vh; }
}

/* Phone widths break inside words — see the body rule in styles.css. */
@media (max-width: 700px) {
  .home-tabs__head p.home-tabs__statement { word-break: break-all; }
}

/* ===========================================================
   HOME TABS — short-viewport vertical budget (pin mode, >900px)
   -----------------------------------------------------------
   The pin is exactly one viewport tall and must hold: head copy +
   3 tab rows + the ACTIVE tab's body copy. On a short window that
   stops fitting and `.home-tabs__list { overflow: hidden }` silently
   swallows the body text (reported 2026-07-28, reproduced at
   1280x620). Compress the vertical rhythm instead of clipping.

   max-height evaluates the REAL viewport, but every value here is
   design px — so each tier is stated twice: once for the unzoomed
   901–1151px range, once for >=1152px where html{zoom:1.25} means
   the same design height is 1.25x more real px.
   See wiki/desktop-zoom.md.
   =========================================================== */

/* Tier 1 — under ~720 design px: tighten padding and row rhythm. */
@media (min-width: 901px) and (max-height: 719px) {
  .home-tabs {
    --htab-padtop: 44px; --htab-padbottom: 16px;
    --htab-gridtop: 10px; --htab-rowpad: 12px;
  }
}
@media (min-width: 1152px) and (max-height: 899px) {
  .home-tabs {
    --htab-padtop: 44px; --htab-padbottom: 16px;
    --htab-gridtop: 10px; --htab-rowpad: 12px;
  }
}

/* Tier 2 — under ~520 design px there is no rhythm left to give, so the
   head's supporting statement steps aside. The eyebrow and all three tab
   bodies stay; clipped body copy would be the worse trade. */
@media (min-width: 901px) and (max-height: 519px) {
  .home-tabs { --htab-rowpad: 8px; }
  .home-tabs .home-tabs__statement { display: none; }
  .home-tabs .home-tabs__title-row h3 { font-size: 22px; }
}
@media (min-width: 1152px) and (max-height: 649px) {
  .home-tabs { --htab-rowpad: 8px; }
  .home-tabs .home-tabs__statement { display: none; }
  .home-tabs .home-tabs__title-row h3 { font-size: 22px; }
}

/* Consumers. Fallbacks repeat the tall-screen values already set above and
   at L1746/L1747, so an untouched (tall) viewport renders byte-identical. */
@media (min-width: 901px) {
  .home-tabs__pin {
    padding-top: var(--htab-padtop, clamp(84px, 12vh, 124px));
    padding-bottom: var(--htab-padbottom, clamp(24px, 5vh, 56px));
  }
  .home-tabs__grid { margin-top: var(--htab-gridtop, 24px); }
  .home-tabs__list button {
    padding-top: var(--htab-rowpad, 28px);
    padding-bottom: var(--htab-rowpad, 28px);
  }
  /* `flex: 1` is `flex: 1 1 0%` — with negative free space the active row
     collapses to 0 height and its body renders *outside* the clipped list
     (that is what put the copy off-screen, not merely tight spacing).
     `1 0 auto` still absorbs spare room but never shrinks below content. */
  .home-tabs__list li.is-active { flex: 1 0 auto; }
}

/* ============================================================
   home sticky-stack deck (.home-stack)
   Ported from junsik-fx-site fx-lib `simpac-stack-scroll` /
   `sticky-stack-cards` (simpac.com .main-business).
   Replaced the scroll-pinned .home-tabs__grid accordion.

   NOTE: modules/sticky-stack-cards.js writes --stack-top, padding-bottom and
   margin-top per item, and margin-bottom on the list. Do not set those here —
   they are computed from the card heights at runtime.

   NOTE: position:sticky dies silently if ANY ancestor between .home-stack__item
   and the document scroll root has overflow:hidden. Verified clear as of
   2026-07-29 (html/body/.page/main/.container are all visible).
   ============================================================ */
.home-stack { margin-top: 80px; }
.home-stack__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* --stack-offset is the live header height, measured and written by the module.
   Without it every card pins at viewport 0 and the fixed nav (96 real px) eats
   most of the 152 real px sliver that is supposed to show the pinned card's
   number + title — which is the entire point of the fan. */
.home-stack__item {
  position: sticky;
  top: calc(var(--stack-offset, 0px) + var(--stack-top, 0px));
  left: 0;
}
/* The measured + translated element. Must be the only direct child of __item. */
/* Column split + type scale from Figma 721:73 (1500 row: 670px plate on the
   right, text left; title 40/50, body 20/32, number a 16px superscript). */
.home-stack__outer {
  display: grid;
  /* Proportional, NOT a fixed 670px track. The Figma row is 830 text : 670 media
     inside 1500; a hard 670px cap held its full width once the container dropped
     below ~1250 (real at 1182px viewport under html{zoom:1.25}), squeezing the
     text column to 122px and wrapping the title every two words. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.81fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  min-height: 300px;               /* must exceed the 122px desktop stack offset */
  padding: 40px 0 60px;
  border-top: 1px solid var(--line);
  background: var(--bg);           /* opaque — cards have to occlude each other */
}
.home-stack__text { align-content: start; }
/* Superscript, not a column: the number rides the title's line box (see
   home-stack-card.php) so it stays inside the ~122px pinned sliver. */
.home-stack__num {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-left: 8px;
  top: -0.75em;                    /* <sup> default is too high at 40px */
}
.home-stack__title {
  font-size: clamp(22px, 2.7vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;               /* 50/40 */
  margin: 0 0 32px;
}
.home-stack__body {
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.6;                /* 32/20 */
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 46ch;
  word-break: keep-all;
}
.home-stack__media {
  align-self: start;
  overflow: hidden;                /* descendant, not an ancestor — sticky is safe */
  background: #f0ede7;
  aspect-ratio: 670 / 500;
}
.home-stack__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  /* Mobile keeps the two columns (Figma 721:1026: 145px of text beside a
     168x125 plate) rather than stacking — the row is only ~182px tall, which
     is what lets three of them fan inside one screen. */
  .home-stack { margin-top: 48px; }
  .home-stack__outer {
    grid-template-columns: minmax(0, 1fr) 168px;
    gap: 16px;
    min-height: 220px;             /* still above the 62/78px mobile offsets */
    padding: 28px 0 30px;
  }
  .home-stack__media { aspect-ratio: 168 / 125; }
  .home-stack__title { font-size: 20px; line-height: 1.3; margin-bottom: 10px; }
  .home-stack__num   { font-size: 13px; margin-left: 6px; }
  .home-stack__body  { font-size: 14px; line-height: 1.43; }
}

/* Reduced motion: sticky-stack-cards.js bails before its layout pass, so undo
   the fan here too and let the cards render in normal document flow. */
@media (prefers-reduced-motion: reduce) {
  .home-stack__item {
    position: static !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .home-stack__list { margin-bottom: 0 !important; }
}