/* ============================================================
   Kieera - recreation of the reference design language
   Tokens sourced 1:1 from DESIGN-SPEC.md
   ============================================================ */

:root {
  /* Color */
  --canvas:        #FAFAFA;
  --surface:       #FFFFFF;
  --accent:        #8A6647;   /* brown / clay - primary */
  --accent-rgb:    138, 102, 71;   /* keep in sync with --accent; used for alpha tints */
  --accent-hover:  #7A5A3E;
  --ink:           #000000;
  --muted:         rgba(56,56,56,0.8);   /* #383838cc */
  --text-on-dark:  #DEDEDE;
  --white:         #FFFFFF;
  --hairline:      rgba(0,0,0,0.12);
  --hairline-soft: rgba(136,136,136,0.14);
  --scrim:         rgba(34,34,34,0.8);

  /* Type */
  --font-display: 'Host Grotesk', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Radius */
  --r-btn: 12px;
  --r-card: 16px;
  --r-lg: 40px;
  --r-pill: 9999px;
  --r-sm: 8px;

  /* Layout */
  --container: 1128px;
  --pad: 24px;
  --text-col: 680px;

  /* ---- Type scale ----
     Ratio ~1.5 between display steps so hierarchy reads at a glance.
     Host Grotesk finally gets a real display role at --t-display. */
  --t-display: clamp(44px, 7.4vw, 92px);
  --t-h2:      clamp(32px, 3.6vw, 48px);
  --t-h3:      clamp(22px, 2vw, 26px);
  --t-lead:    clamp(18px, 1.5vw, 21px);

  /* ---- Section rhythm ----
     Deliberately unequal: the system section is the page's dominant moment,
     quiet sections breathe less so the loud one lands harder. */
  --sect-quiet: clamp(72px, 9vw, 112px);
  --sect-loud:  clamp(96px, 13vw, 168px);

  /* ---- The Thread ----
     The continuous clay line that carries brief → decision → drawing → delivery
     down the page. This is the signature element; nothing else competes with it. */
  --thread-w: 2px;
  --thread:      rgba(var(--accent-rgb), 0.30);
  --thread-live: var(--accent);

  /* Motion */
  --ease-inout: cubic-bezier(0.44,0,0.56,1);
  --ease-out:   cubic-bezier(0.2,0,0,1);
  --ease-soft:  cubic-bezier(0.22,1,0.36,1);   /* calm, expo-out for reveals/hover */
  --dur-fast: 0.1s;
  --dur: 0.4s;

  /* ---- Craft layer (invisible depth) ----
     Warm editorial grade + warm shadows + warm hairlines + one grain system.
     Restraint-budgeted so no single pixel exceeds ~one grain + one light + one shadow. */

  /* Unified warm editorial grade - reconciles warm/cool photos into one shoot */
  --grade:       sepia(0.06) saturate(1.04) contrast(1.02);
  --grade-hover: sepia(0.06) saturate(1.06) contrast(1.02);

  /* Natural layered shadows - warm near-black (24,18,12), ambient + contact */
  --shadow-card:
     0 1px 2px rgba(24,18,12,0.05),
     0 12px 28px -14px rgba(24,18,12,0.06);
  --shadow-card-hover:
     0 1px 2px rgba(24,18,12,0.06),
     0 20px 40px -16px rgba(24,18,12,0.08);

  /* Self-contained monochrome film grain (feTurbulence, desaturated) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Warm-retune the existing hairline tokens at IDENTICAL alpha (pure temperature shift) */
:root {
  --hairline:      rgba(28,20,14,0.12);
  --hairline-soft: rgba(120,104,92,0.14);
  /* warm card/separator hairlines — belong to the clay world, separate without drawing attention */
  --hairline-warm:  rgba(60,46,34,0.12);
  --hairline-warm2: rgba(60,46,34,0.08);
}

/* ONE global film grain - the base tooth for every flat surface.
   Fixed so it never tile-crawls on scroll. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: var(--grain);
  background-size: 180px 180px;
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* anchor targets land clear of the fixed 64px nav */
  scroll-padding-top: 84px;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(var(--accent-rgb),0.24); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
ul { list-style: none; }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}
/* Unequal by design: quiet sections breathe less so the loud one lands. */
.section { padding-block: var(--sect-quiet); }
.section--loud { padding-block: var(--sect-loud); }

/* ---------- typography ---------- */
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.h2--left { text-align: left; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
  font-weight: 400;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted);
  display: inline-block;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.3px;
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
}
.lead--left { margin-inline: 0; }

.section__head { display: flex; flex-direction: column; gap: 16px; }
.section__head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
  margin-bottom: 56px;
}
.section__head--center .h2 { text-align: center; max-width: var(--text-col); }
.section__head--center .lead { margin-inline: auto; }
.section__head:not(.section__head--center) { max-width: var(--text-col); margin-bottom: 48px; }
.section__head:not(.section__head--center) .h2 { text-align: left; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  border-radius: var(--r-btn);
  transition: background 0.35s var(--ease-soft),
              box-shadow 0.35s var(--ease-soft),
              transform 0.2s var(--ease-soft),
              color 0.35s var(--ease-soft);
}
.btn:active { transform: scale(0.985); }
.btn--primary {
  background: var(--accent); color: var(--white); padding: 13px 22px;
  box-shadow: 0 1px 2px rgba(24,18,12,0.12), 0 6px 16px -8px rgba(24,18,12,0.18);
}
.btn--primary:hover {
  background: #1A1A1A;
  color: var(--white);
  /* warm clay halo — the ring belongs to the palette, not neutral gray */
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0.28), 0 2px 8px rgba(0,0,0,0.28), 0 10px 24px -8px rgba(0,0,0,0.30);
}
.btn--lg { padding: 17px 34px; font-size: 17px; }
/* Quiet variant so the filled clay CTA isn't competing with itself four times
   over. Used where the ask is navigational, not conversion. */
.btn--quiet {
  background: transparent;
  color: var(--ink);
  padding: 13px 22px;
  box-shadow: inset 0 0 0 1px var(--hairline-warm);
}
.btn--quiet:hover {
  background: rgba(var(--accent-rgb), 0.06);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34);
}

/* ---------- chips / icons ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--white);
  flex: none;
}
.chip--sm { width: 40px; height: 40px; }
.chip--light { background: rgba(255,255,255,0.16); color: var(--white); }
.chip--social { width: 42px; height: 42px; transition: background var(--dur) var(--ease-inout); }
.chip--social:hover { background: var(--accent-hover); }

.round-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--white);
  flex: none;
  box-shadow: 0 1px 2px rgba(24,18,12,0.10), 0 8px 20px -10px rgba(24,18,12,0.20);
  transition: background 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), transform 0.25s var(--ease-soft);
}
.round-btn:hover { background: var(--accent-hover); box-shadow: 0 1px 2px rgba(24,18,12,0.12), 0 12px 26px -10px rgba(24,18,12,0.26); }
.round-btn:active { transform: scale(0.96); }
/* at the ends of the carousel the arrow dims and stops responding — never "stuck" */
.round-btn.is-disabled {
  opacity: 0.32;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(24,18,12,0.08);
}

/* tasteful focus: no default blue outline; a soft warm ring for keyboard users only */
.btn:focus, .round-btn:focus, .chip--social:focus, .nav__toggle:focus,
.nav__links a:focus, .footer__nav a:focus, .acc-item__head:focus { outline: none; }
.btn:focus-visible, .round-btn:focus-visible, .chip--social:focus-visible,
.nav__toggle:focus-visible,
.acc-item__head:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.35);
}
.nav__links a:focus-visible, .footer__nav a:focus-visible {
  outline: none; text-decoration: underline; text-underline-offset: 4px;
}

/* skip link: invisible until a keyboard user tabs into the page */
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  transform: translateY(calc(-100% - 16px));
  background: var(--surface);
  color: var(--ink);
  font-size: 14px; font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-card-hover), 0 0 0 1px var(--hairline-warm2);
  transition: transform 0.3s var(--ease-soft);
}
/* reveal on plain :focus so browsers without :focus-visible never hold an invisible tab stop */
.skip-link:focus {
  outline: none;
  transform: none;
  box-shadow: var(--shadow-card-hover), 0 0 0 3px rgba(var(--accent-rgb),0.35);
}
/* the skip target takes programmatic focus (tabindex="-1"); no ring on a whole landmark */
main[tabindex="-1"]:focus { outline: none; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background var(--dur) var(--ease-inout),
              box-shadow var(--dur) var(--ease-inout),
              border-color var(--dur) var(--ease-inout);
  border-bottom: 1px solid transparent;
}
/* soft top scrim keeps white nav text legible over the hero; fades once scrolled */
.nav::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 120px;
  background: linear-gradient(to bottom, rgba(20,15,10,0.38) 0%, rgba(20,15,10,0) 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dur) var(--ease-inout);
  z-index: -1;
}
.nav.is-scrolled::before { opacity: 0; }
.nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--white); }
/* Logo mark: PNG used as a mask so it inherits currentColor like the old inline SVG */
.brand__mark, .footer__mark {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url('assets/img/logo/kieera-logo-mask.png') center / contain no-repeat;
  mask: url('assets/img/logo/kieera-logo-mask.png') center / contain no-repeat;
  transition: transform 0.7s var(--ease-inout);
}
.brand__mark { width: 26px; height: 26px; }
/* mark has 6-fold symmetry: one 60° petal-step lands back on itself */
.brand:hover .brand__mark,
.footer__brand:hover .footer__mark { transform: rotate(60deg); }
@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand__mark,
  .footer__brand:hover .footer__mark { transform: none; }
}
.brand__word { font-size: 20px; font-weight: 500; letter-spacing: -0.4px; }
.nav__links { display: flex; gap: 34px; margin-right: auto; }
.nav__links a {
  font-size: 16px; color: var(--white);
  transition: opacity var(--dur) var(--ease-inout);
}
.nav__links a:hover { opacity: 0.7; }
.nav__cta { color: var(--white); }

/* nav becomes a solid bar + text turns dark once scrolled off the hero */
.nav.is-scrolled {
  background: var(--canvas);
  border-bottom-color: var(--hairline);
  box-shadow: 0 1px 12px rgba(20,15,10,0.06);
}
.nav.is-scrolled .brand,
.nav.is-scrolled .nav__links a { color: var(--ink); }
.nav.is-scrolled .nav__toggle span { background: var(--ink); }
/* the CTA is a filled brown button — its label stays white in every nav state */
.nav__cta, .nav.is-scrolled .nav__cta { color: var(--white); }

/* 44x44 minimum tap target; bars stay visually centered and unchanged */
.nav__toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 44px; height: 44px; margin-left: auto; margin-right: -8px; border-radius: 8px; }
.nav__toggle span {
  display: block; height: 2px; width: 24px; background: var(--white); border-radius: 2px;
  transition: background var(--dur) var(--ease-inout), transform var(--dur) var(--ease-inout);
}
.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 24px 20px;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline-soft);
}
.nav__mobile a { padding: 12px 0; font-size: 18px; color: var(--ink); }
.nav__mobile .btn { margin-top: 8px; }
@keyframes nav-menu-in { from { opacity: 0; transform: translateY(-6px); } }
/* the open animation is gated on no-preference, so reduced-motion needs no override
   (an equal-specificity animation:none elsewhere would lose to source order) */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .nav.is-open .nav__mobile { animation: nav-menu-in 0.35s var(--ease-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__toggle span { transition-property: background; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* content sits optically centred: nav clearance up top, room for the
     thread to descend below */
  padding: 96px 24px 88px;
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  background: image-set(url('assets/img/fr-hero.webp') type('image/webp'), url('assets/img/fr-hero.jpg') type('image/jpeg')) center/cover no-repeat;
  z-index: 0;
  /* Architectural-photographer grade: softer than digital — reduced HDR/contrast,
     muted, warm highlights, and a whisper of optical softness (film, not render). */
  filter:
    sepia(0.12) saturate(0.88) contrast(0.94) brightness(1.02)
    blur(0.4px);
  /* note: parallax JS scales this layer to 1.06, which also hides the blur edge bleed */
}
/* Atmospheric haze + natural highlight-warmth — depth through light, not effects */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* soft warm veil lifts deep shadows → air/atmosphere in the room */
    linear-gradient(180deg, rgba(214,198,178,0.05) 0%, rgba(214,198,178,0.03) 45%, rgba(30,22,16,0.05) 100%),
    /* warm the bright zone (upper-right daylight) so highlights glow, not clip */
    radial-gradient(70% 55% at 74% 30%, rgba(232,206,168,0.10) 0%, transparent 60%);
  mix-blend-mode: soft-light;
}
/* Pronounced film grain over the hero image (matches the reference look) */
.hero__scrim::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.16;
}
@media (prefers-reduced-motion: reduce) { .hero__scrim::after { opacity: 0.08; } }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* whisper of warm top-light - golden hour entering the frame */
    radial-gradient(90% 60% at 50% 4%, rgba(var(--accent-rgb),0.06) 0%, rgba(var(--accent-rgb),0.025) 34%, transparent 66%),
    /* legibility band centred on the headline: the type now sits mid-frame,
       where the sky is brightest, so the scrim has to follow the text */
    radial-gradient(84% 56% at 50% 52%, rgba(20,14,9,0.70) 0%, rgba(20,14,9,0.50) 48%, transparent 80%),
    /* deepen shadows naturally at the base + corners (organic falloff) */
    radial-gradient(120% 95% at 50% 92%, rgba(22,16,11,0.60) 0%, rgba(22,16,11,0.14) 46%, transparent 72%),
    radial-gradient(140% 120% at 50% 50%, transparent 58%, rgba(20,15,10,0.22) 100%),
    linear-gradient(to bottom, rgba(20,15,10,0.26) 0%, rgba(20,15,10,0.05) 32%, rgba(20,15,10,0.30) 68%, rgba(20,15,10,0.54) 100%);
}
.hero__content { position: relative; z-index: 4; max-width: 940px; color: var(--white); }
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 0.97;
  letter-spacing: -0.035em;
  color: var(--white);
  text-wrap: balance;
}
/* "operating system" is the claim — it carries the optical weight of the line */
.hero__sub {
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: var(--text-on-dark);
  max-width: 540px;
  margin-inline: auto;
  text-wrap: pretty;
}
.hero__content .btn { margin-top: 32px; }
/* real scarcity, stated plainly — the honest trust signal for a pre-launch product */
.hero__note {
  margin-top: 18px;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.72);
}

/* ============================================================
   THE THREAD — signature element
   A single clay line that leaves the hero and runs the length of the
   page, drawing itself as you scroll. It is the visual argument for
   "one continuous line, from first brief to final delivery".
   ============================================================ */

/* the line descends out of the hero, connecting it to the page below */
.hero__thread {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--thread-w);
  height: clamp(56px, 9vh, 104px);
  transform: translateX(-50%);
  z-index: 5;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.55));
  transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__thread { animation: thread-drop 1.1s var(--ease-soft) 0.5s both; }
}
@keyframes thread-drop { from { transform: translateX(-50%) scaleY(0); } }

/* the stage list: the six sequence steps, threaded together left-to-right.
   The clay line now runs horizontally across the page — this is the
   dominant moment, so it spans the full width, not a centred column. */
.thread { position: relative; }
/* one continuous hairline behind the whole row — the line is unbroken and
   the nodes sit ON it, rather than the line being stitched from stubs */
.thread__list::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(to right,
    transparent, var(--thread) 6%, var(--thread) 94%, transparent);
  z-index: 0;
}
.thread__list {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: start;
  gap: 0;
}
.thread__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: clamp(8px, 1.2vw, 18px);
  padding-top: 6px;
}
/* the node: a small clay dot riding the line, ringed by canvas so the
   hairline appears to pass behind it. Restrained on purpose — filled discs
   read as infographic; a jewel-point reads as considered. */
.thread__node {
  position: relative;
  z-index: 2;
  /* the ordinal sits below the line; the point rides on it */
  padding-top: 20px;
  display: grid; place-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(var(--accent-rgb), 0.5);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s var(--ease-soft);
}
/* the point on the line — a canvas ring lets the hairline pass behind it */
.thread__node::after {
  content: "";
  position: absolute;
  top: 2px; left: 50%;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: var(--r-pill);
  background: var(--canvas);
  box-shadow: 0 0 0 5px var(--canvas), inset 0 0 0 1px rgba(var(--accent-rgb), 0.45);
  transition: background 0.55s var(--ease-soft), box-shadow 0.55s var(--ease-soft), transform 0.55s var(--ease-soft);
}
.thread__body { padding-top: 12px; max-width: 21ch; }
.thread__title {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin-bottom: 7px;
}
.thread__text {
  font-size: 14.5px; line-height: 1.55;
  color: var(--muted); text-wrap: pretty;
  max-width: 19ch; margin-inline: auto;
}

/* as a step enters the viewport the node fills and its right-hand
   segment draws across to the next node */
/* as a stage enters, its point fills clay and its label deepens — the
   sequence resolves quietly, one jewel at a time */
.thread__step.is-lit .thread__node { color: var(--accent); }
.thread__step.is-lit .thread__node::after {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 4px 12px -3px rgba(var(--accent-rgb), 0.5);
  transform: scale(1.15);
}
@media (prefers-reduced-motion: reduce) {
  .thread__node, .thread__node::after { transition: none; }
}

/* Below the tablet breakpoint six columns crush; let the thread scroll
   horizontally so the left-to-right sequence is preserved on phones. */
@media (max-width: 860px) {
  .thread { margin-inline: calc(var(--pad) * -1); }   /* bleed to screen edge */
  .thread__list {
    grid-auto-columns: minmax(180px, 42vw);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-inline: var(--pad);
    /* generous vertical padding: overflow-x:auto also clips the Y axis, so the
       dots (which ride above the row) and labels need room inside the scroller */
    padding-top: 14px;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  /* keep the hairline aligned with the dots now that the row is padded down */
  .thread__list::before { top: 19px; }
  .thread__list::-webkit-scrollbar { display: none; }
  .thread__step { scroll-snap-align: center; }
  .thread__body { padding-top: 16px; }
}

/* ============================================================
   INTRO / BENTO
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: 236px 236px;
  gap: 16px;
}
.bento__card {
  border-radius: var(--r-card); overflow: hidden; position: relative;
  /* outer warm depth + dark matted inner edge in ONE declaration (box-shadow can't stack across rules) */
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(24,18,12,0.05);
  transition: box-shadow 0.5s var(--ease-soft);
}
.bento__card:hover { box-shadow: var(--shadow-card-hover), inset 0 0 0 1px rgba(24,18,12,0.05); }
.bento__card--large { grid-column: 1; grid-row: 1 / span 2; }
.bento__card--stat  { grid-column: 2; grid-row: 1; }
.bento__card--small { grid-column: 2; grid-row: 2; }
.bento__card--tall  { grid-column: 3; grid-row: 1 / span 2; }

.card-img { background: var(--surface); }
.card-img::before {
  content: ""; position: absolute; inset: 0;
  background: var(--img) center/cover no-repeat;
  filter: var(--grade);   /* per-image editorial grade, at rest */
  transition: transform 1.1s var(--ease-soft);
  will-change: transform;
}
.card-img:hover::before { transform: scale(1.03); }
.card-img__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(20,16,12,0.84) 0%, rgba(20,16,12,0.30) 32%, rgba(20,16,12,0.05) 55%, transparent 74%),
    linear-gradient(200deg, rgba(120,90,58,0.05), transparent 45%);
}
/* scoped editorial grain INSIDE the scrim - dithers banding behind titles */
.card-img__scrim::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: 150px 150px;
  mix-blend-mode: overlay; opacity: 0.025;
}
.card-img__body {
  position: absolute; inset: auto 0 0 0;
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  z-index: 4;
}
.card-img__title {
  font-family: var(--font-body);
  font-weight: 500; font-size: 20px; line-height: 1.1; letter-spacing: -0.6px;
  color: var(--white);
}

.bento__card--stat {
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 30%, transparent 60%),
    var(--accent);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 24px;
}
.bento__card--stat > * { position: relative; z-index: 2; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 400; font-size: var(--t-h2); line-height: 1; letter-spacing: -0.03em; color: var(--white);
}
.stat__label { font-size: 16px; line-height: 1.35; color: rgba(255,255,255,0.9); max-width: 220px; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.how__left { display: flex; flex-direction: column; gap: 16px; }
.how__left .h2 { margin-bottom: 16px; }

.accordion { display: flex; flex-direction: column; gap: 12px; }
.acc-item {
  background: var(--surface);
  border: 1px solid var(--hairline-warm);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: background 0.4s var(--ease-soft), border-color 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft), color 0.4s var(--ease-soft);
}
.acc-item:hover { border-color: rgba(var(--accent-rgb),0.28); box-shadow: var(--shadow-card); }
.acc-item.is-open { border-color: var(--hairline-warm); box-shadow: var(--shadow-card); }
.acc-item__head {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 20px;
  text-align: left;
}
.acc-item__title {
  flex: 1;
  font-family: var(--font-body);
  font-weight: 500; font-size: 18px; letter-spacing: -0.2px; color: var(--ink);
}
.acc-item__icon {
  position: relative; width: 20px; height: 20px; flex: none;
}
.acc-item__icon::before, .acc-item__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 15px; height: 1.6px; background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease-inout), opacity var(--dur) var(--ease-inout);
}
.acc-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-item.is-open .acc-item__icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.acc-item.is-open .acc-item__icon::after { transform: translate(-50%, -50%) rotate(-45deg); }

.acc-item__panel {
  display: grid; grid-template-rows: 0fr;
  /* expo-out, not in-out: the row springs open and settles, instead of
     easing into the end and reading as sluggish on tall answers */
  transition: grid-template-rows 0.52s var(--ease-soft);
}
.acc-item.is-open .acc-item__panel { grid-template-rows: 1fr; }
.acc-item__panel > p {
  overflow: hidden;
  padding: 0 20px 20px 74px;   /* aligns to title: 20 head-pad + 40 chip + 14 gap */
  font-size: 16px; line-height: 1.45; color: var(--muted);
  text-wrap: pretty;
  /* the text fades in behind the opening height so it never appears to
     push the row; on close it leaves first, so the collapse looks clean */
  opacity: 0; transition: opacity 0.3s var(--ease-soft);
}
.acc-item.is-open .acc-item__panel > p { transition-delay: 0.12s; }
.acc-item.is-open .acc-item__panel > p { opacity: 1; }
/* FAQ accordion: no chip, indent panel to text */
/* FAQ is reference material — read only when a question comes up. It gets the
   quietest grammar on the page: hairline-separated rows, no card, no fill.
   Cards here would claim attention the content hasn't earned. */
.accordion--faq { gap: 0; }
.accordion--faq .acc-item {
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline-warm2);
  border-radius: 0;
  box-shadow: none;
}
.accordion--faq .acc-item:last-child { border-bottom: 1px solid var(--hairline-warm2); }
.accordion--faq .acc-item__head { gap: 0; padding: 22px 4px; }
.accordion--faq .acc-item__panel > p { padding: 0 44px 22px 4px; }
/* the row itself is the affordance; the title warms rather than the whole block */
.accordion--faq .acc-item.is-open,
.accordion--faq .acc-item:hover,
.accordion--faq .acc-item.is-open:hover { background: none; box-shadow: none; }
.accordion--faq .acc-item:hover .acc-item__title { color: var(--accent); }
.accordion--faq .acc-item.is-open .acc-item__title { color: var(--accent); }

.how__intro { margin-bottom: 8px; }

.how__right { position: sticky; top: 90px; }
.how__stack {
  position: relative;
  /* taller than the photos' native ratio so the sticky column visually
     balances the accordion instead of leaving a void beneath it */
  width: 100%; aspect-ratio: 4 / 4.4;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(24,18,12,0.06);
}
.how__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.55s var(--ease-soft), transform 0.7s var(--ease-soft);
  pointer-events: none;
}
.how__img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* active How item gets the brown highlight (matches the reference) */
/* Same hairline grammar as the FAQ: no cards, no filled active block.
   The open item is marked by its clay title and chip — enough to identify
   which stage drives the image, without a heavy brown slab. */
.accordion[data-how] { gap: 0; }
.accordion[data-how] .acc-item {
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline-warm2);
  border-radius: 0;
  box-shadow: none;
}
.accordion[data-how] .acc-item:last-child { border-bottom: 1px solid var(--hairline-warm2); }
.accordion[data-how] .acc-item__head { padding: 20px 4px; }
.accordion[data-how] .acc-item__panel > p { padding: 0 44px 22px 58px; }
.accordion[data-how] .acc-item:hover,
.accordion[data-how] .acc-item.is-open,
.accordion[data-how] .acc-item.is-open:hover { background: none; box-shadow: none; }
.accordion[data-how] .acc-item:hover .acc-item__title,
.accordion[data-how] .acc-item.is-open .acc-item__title { color: var(--accent); }
/* the chip is the quiet marker of which stage is showing */
.accordion[data-how] .acc-item .chip { background: rgba(var(--accent-rgb),0.10); color: var(--accent); }
.accordion[data-how] .acc-item.is-open .chip { background: var(--accent); color: var(--white); }

/* ============================================================
   FIRMS / TESTIMONIALS
   ============================================================ */
.firms__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
.firms__left { display: flex; flex-direction: column; gap: 16px; }
.firms__left .h2 { margin-bottom: 8px; }
.firms__nav { display: flex; gap: 12px; margin-top: 16px; }

/* No outer card: the photograph carries this section on its own. A bordered
   white box around an image is a card wrapping a card, and it was making
   this block compete with the accordion above it. */
.testimonial {
  position: relative;
}
.testimonial__slide { display: none; grid-template-columns: 340px 1fr; gap: 40px; align-items: center; }
.testimonial__slide.is-active { display: grid; }
.testimonial__media {
  aspect-ratio: 271 / 416;
  max-height: 480px;
  border-radius: var(--r-card);
  background: var(--img) center/cover no-repeat;
  filter: var(--grade);
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(24,18,12,0.06);
}
.testimonial__content { padding: 8px 8px 8px 0; }
.testimonial__title {
  font-family: var(--font-display);
  font-weight: 400; font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.03em; color: var(--ink);
}
.testimonial__text { margin-top: 12px; font-size: 16px; line-height: 1.45; color: var(--muted); }
.testimonial__foot {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--hairline-warm2);
  display: flex; justify-content: flex-end;
}
.testimonial__count { font-size: 14px; color: var(--muted); }

/* ============================================================
   FAQ
   ============================================================ */
.faq__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.faq__left { display: flex; flex-direction: column; gap: 16px; }
.faq__left .h2 { margin-bottom: 8px; }
.faq__left .btn { align-self: flex-start; margin-top: 8px; }

/* FAQ row styling lives with the accordion rules above — this section owns
   layout only. (A card-era override here used to re-fill the open row white
   and win on source order, breaking the hairline grammar.) */

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(80px, 11vw, 136px) 24px clamp(76px, 9.5vw, 112px);
  text-align: center;
  color: var(--white);
  box-shadow: var(--shadow-card);
}
/* the closing ask carries the same display weight as the opening claim —
   the page ends where it began */
.cta-card__title {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.032em;
}
.cta-card::before {
  content: ""; position: absolute; inset: 0;
  background: var(--img) center/cover no-repeat;
  /* pushed further out of focus: the photograph is atmosphere here, not subject —
     the type has to be the only thing you read */
  filter: blur(6px) sepia(0.14) saturate(0.82) contrast(0.96) brightness(0.92);
  transform: scale(1.08);
}
/* one merged warm scrim: top sheen + vignette + darkness written once */
.cta-card__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(150,120,86,0.12) 0%, transparent 55%),
    radial-gradient(120% 120% at 50% 120%, rgba(20,14,9,0.40) 0%, transparent 60%),
    linear-gradient(180deg, rgba(30,22,16,0.60), rgba(30,22,16,0.68));
}
.cta-card__content { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; }
.cta-card__title { color: var(--white); text-align: center; }
.cta-card__sub { color: rgba(255,255,255,0.86); margin-top: 16px; margin-inline: auto; }
.cta-form { margin-top: 40px; max-width: 460px; margin-inline: auto; text-align: left; }
.cta-form__label { display: block; font-size: 15px; color: var(--white); margin-bottom: 10px; }
.cta-form__row { display: flex; gap: 12px; }
.cta-form__input {
  flex: 1;
  height: 52px;
  padding: 0 18px;
  border-radius: var(--r-btn);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
  color: var(--white);
  font-size: 16px;
  transition: border-color 0.4s var(--ease-soft), background 0.4s var(--ease-soft);
}
.cta-form__input::placeholder { color: rgba(255,255,255,0.6); }
.cta-form__input:focus { outline: none; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.14); }
.cta-form .btn { height: 52px; white-space: nowrap; }
.cta-form__msg { margin-top: 14px; font-size: 15px; color: rgba(255,255,255,0.85); min-height: 1.3em; }
.cta-form__msg.is-success { color: #fff; text-align: center; font-size: 17px; }
/* warm apricot keeps the error legible on the dark scrim without leaving the palette */
.cta-form__msg.is-error { color: #FFCDB8; }

/* ============================================================
   FOOTER
   ============================================================ */
/* Warm architectural charcoal — a premium, editorial ending.
   Blackened steel / burnt oak, never pure black. */
.footer {
  position: relative;
  background: #1A1816;                 /* warm charcoal with brown undertone */
  color: #F4F1EC;                      /* off-white, not pure white */
  padding-block: clamp(72px, 8vw, 120px) 0;
  border-top: none;
  overflow: hidden;                    /* the wordmark bleeds; the page must not */
}
/* whisper of warm top-light where the charcoal begins — depth, not decoration */
.footer::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 220px;
  pointer-events: none;
  background: radial-gradient(80% 100% at 50% 0%, rgba(164,122,84,0.06) 0%, transparent 70%);
}
/* Oversized ghosted wordmark: the brand signs off at architectural scale,
   filling the footer as a backdrop. The closing line rides across it, and
   its baseline sits flush with the page edge so the letters resolve on screen. */
.footer__wordmark {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 3vw, 56px);      /* baseline rides above the page edge */
  transform: translateX(-50%);
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(72px, 15vw, 240px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  /* a whisper, not a billboard: just enough to sense the brand in the
     charcoal without competing with the links above it */
  color: rgba(var(--accent-rgb), 0.055);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.footer .container { position: relative; z-index: 1; }
.footer__inner {
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start;
  padding-bottom: clamp(88px, 12vw, 156px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer__brand { display: flex; flex-direction: column; gap: 22px; max-width: 340px; }
.footer__mark { color: #F4F1EC; width: 28px; height: 28px; }
.footer__tag { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.72); }
.footer__socials { display: flex; gap: 12px; }
/* social chips: quiet on charcoal, warm accent on hover (used sparingly) */
.footer__socials .chip--social {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.72);
  transition: background var(--dur) var(--ease-inout), color var(--dur) var(--ease-inout);
}
.footer__socials .chip--social:hover { background: #A47A54; color: #F4F1EC; }
.footer__nav { display: flex; flex-direction: column; gap: 14px; min-width: 160px; }
.footer__nav-title { font-size: 16px; font-weight: 500; color: #F4F1EC; margin-bottom: 4px; }
.footer__nav a { font-size: 16px; color: rgba(255,255,255,0.72); transition: color var(--dur) var(--ease-inout); }
.footer__nav a:hover { color: #F4F1EC; }
/* quiet closing line that rides ACROSS the wordmark, with a hairline
   drawn over the giant letters — the reference's signature move. */
.footer__base {
  position: relative;
  display: flex; justify-content: space-between; align-items: center; gap: 12px 24px;
  flex-wrap: wrap;
  padding-top: 28px; padding-bottom: 28px;
  font-size: 14px; color: rgba(255,255,255,0.52);
}
.footer__base a { color: rgba(255,255,255,0.52); transition: color var(--dur) var(--ease-inout); }
.footer__base a:hover { color: rgba(255,255,255,0.82); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* Only hide reveal content when JS is present to bring it back (.js set in <head>).
   Without JS — or if the script fails to load — content stays visible for crawlers
   and no-JS visitors rather than being stranded at opacity:0. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
  /* one out-curve so fade, rise and deblur settle together — calm, page-turn feel */
  transition: opacity 0.85s var(--ease-soft), transform 0.85s var(--ease-soft), filter 0.85s var(--ease-soft);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }
/* CSS-only stagger cascade for the four bento cards */
.js .bento.reveal.is-in .bento__card { animation: bento-rise 0.85s var(--ease-soft) both; }
.bento.reveal .bento__card:nth-child(1) { animation-delay: 0.00s; }
.bento.reveal .bento__card:nth-child(2) { animation-delay: 0.07s; }
.bento.reveal .bento__card:nth-child(3) { animation-delay: 0.14s; }
.bento.reveal .bento__card:nth-child(4) { animation-delay: 0.21s; }
@keyframes bento-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .js .bento.reveal.is-in .bento__card { animation: none; }
  .card-img:hover::before, .work-card:hover::before { transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */
@media (max-width: 1000px) {
  .h2 { font-size: 32px; }
  .section { padding-block: 88px; }

  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(220px, 1fr));
  }
  .bento__card--large { grid-column: 1 / -1; grid-row: 1; }
  .bento__card--stat  { grid-column: 1; grid-row: 2; }
  .bento__card--small { grid-column: 2; grid-row: 2; }
  .bento__card--tall  { grid-column: 1 / -1; grid-row: 3; }

  .how__grid, .firms__grid, .faq__grid { grid-template-columns: 1fr; gap: 32px; }
  .how__right { position: static; }
  .testimonial__slide.is-active { grid-template-columns: 260px 1fr; }
  .work-card { width: 320px; height: 460px; }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */
@media (max-width: 720px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav.is-open .nav__mobile { display: flex; }

  /* open menu: bar goes solid, hamburger crosses into an ×.
     Scoped to mobile so a stale is-open can never restyle the desktop bar. */
  .nav.is-open { background: var(--canvas); }
  .nav.is-open::before { opacity: 0; }
  .nav.is-open .brand { color: var(--ink); }
  .nav.is-open .nav__toggle span { background: var(--ink); }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

  .hero { min-height: 92vh; padding-bottom: 88px; }
  .hero__title { font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; }
  .hero__sub { font-size: 18px; }

  .h2 { font-size: 32px; line-height: 1.15; }
  .lead { font-size: 18px; }
  .section { padding-block: 72px; }

  .section__head--center { margin-bottom: 40px; }

  .bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .bento__card { grid-column: 1 !important; grid-row: auto !important; min-height: 320px; }
  .bento__card--stat { min-height: 240px; }

  .how__grid, .firms__grid, .faq__grid { gap: 28px; }
  /* stacked below the accordion here, so keep the photos' natural landscape ratio */
  .how__stack { aspect-ratio: 4 / 3.4; }
  .testimonial__slide.is-active { grid-template-columns: 1fr; }
  .testimonial__media { aspect-ratio: 16/11; max-height: 260px; }

  .work-card { width: 82vw; max-width: 340px; height: 440px; }
  .carousel__prev, .carousel__next { display: none; }

  .cta-card { padding: 64px 20px 72px; border-radius: 28px; }
  .cta-form__row { flex-direction: column; }
  /* in the column row, flex:1 acts on the vertical axis and squashes the input */
  .cta-form__input { flex: none; width: 100%; }
  .cta-form .btn { width: 100%; }

  .footer__inner { grid-template-columns: 1fr; gap: 40px; }
}