/* ===========================================================================
   Brand v3 — homepage (/) and services index (/services/).
   Ported from the approved designs "Tilth Brand v3.dc.html" and
   "Tilth Services.dc.html".

   The design prototypes drove every breakpoint from JS (a layout() method that
   wrote inline styles on resize). That is a design-tool constraint, not a design
   decision: here the same thresholds are expressed as CSS media queries so the
   correct layout is painted on first frame instead of after hydration. Values
   below are taken verbatim from the prototypes' BP tables.

   Scoped under .v3 so the other 31 generated pages are untouched.
   =========================================================================== */

/* --- canonical Tilth brand palette -----------------------------------------
   The single source of truth. Everything below — themes, surfaces, borders,
   component states — derives from these. Nothing in this file should restate a
   brand colour as a literal; add a token here instead.

   *-rgb triplets exist so alpha variants stay programmatically derived from the
   canonical colour rather than drifting into hand-written near-misses. */
.v3 {
  --tilth-carbon: #101310;      /* primary dark brand surface */
  --tilth-moss: #BEF54F;        /* primary digital accent — selective use only */
  --tilth-mineral: #F3F5F1;     /* primary text on Carbon / approved light surface */
  --tilth-stone: #A7ACA5;       /* secondary + muted text (on Carbon) */
  --tilth-stone-deep: #5E655C;  /* the Stone equivalent for light surfaces */
  --tilth-clay: #E66A3D;        /* secondary accent — sparing */
  --tilth-moss-deep: #4A661A;   /* the one approved Moss text token for light surfaces */

  --tilth-carbon-rgb: 16, 19, 16;
  --tilth-moss-rgb: 190, 245, 79;
  --tilth-mineral-rgb: 243, 245, 241;
}

/* --- tokens ---------------------------------------------------------------
   From THEMES in both prototypes. Dark is the default; .v3 is dark-first.
   --moss stays constant across themes (it is a fill); --mosstext is the text
   token and darkens to var(--tilth-moss-deep) on light so it clears AA on the light ground. */
.v3 {
  --moss: var(--tilth-moss);
  --clay: var(--tilth-clay);
  --bg: var(--tilth-carbon);
  --fg: var(--tilth-mineral);
  --raise: #171B16;
  --hover: #1E231C;
  --line: rgba(var(--tilth-mineral-rgb), .13);
  --line2: rgba(var(--tilth-mineral-rgb), .2);
  --grid: rgba(var(--tilth-mineral-rgb), .05);
  --stone: var(--tilth-stone);
  --mosstext: var(--tilth-moss);
  --ghost: rgba(var(--tilth-mineral-rgb), .07);
  --headbg: rgba(var(--tilth-carbon-rgb), .9);
  /* the design's #5F655D measured 3.12:1 on Carbon — below the 4.5 AA floor for
     the footer meta and the small mono labels that share this token. Derived from
     Mineral instead of a new grey, which lands at ~5.0:1 and stays dimmer than
     --stone so the hierarchy the design intended is preserved. */
  --foot: rgba(var(--tilth-mineral-rgb), .5);
  --ibg: var(--tilth-mineral);
  --ifg: var(--tilth-carbon);
  --imut: var(--tilth-stone-deep);
  --ibody: #31362F;
  --iline: rgba(var(--tilth-carbon-rgb), .16);
  --ichip: rgba(var(--tilth-carbon-rgb), .22);

  --pad: 18px;
  --sy: 66px;
  --h2: 30px;
  --h3: 19px;
  --body: 16px;
  --card: 15px;
  --menu: 34px;
}

html[data-theme="light"] .v3 {
  --bg: var(--tilth-mineral);
  --fg: var(--tilth-carbon);
  --raise: #E7EBE2;
  --hover: #DEE3D8;
  --line: rgba(var(--tilth-carbon-rgb), .16);
  --line2: rgba(var(--tilth-carbon-rgb), .24);
  --grid: rgba(var(--tilth-carbon-rgb), .06);
  --stone: var(--tilth-stone-deep);
  --mosstext: var(--tilth-moss-deep);
  --ghost: rgba(var(--tilth-carbon-rgb), .08);
  --headbg: rgba(var(--tilth-mineral-rgb), .9);
  /* light-theme counterpart — #6E756C measured 4.33:1, also under AA */
  --foot: rgba(var(--tilth-carbon-rgb), .62);
  --ibg: var(--tilth-carbon);
  --ifg: var(--tilth-mineral);
  --imut: var(--tilth-stone);
  --ibody: #D3D8CF;
  --iline: rgba(var(--tilth-mineral-rgb), .14);
  --ichip: rgba(var(--tilth-mineral-rgb), .22);
}

/* Per-page display scale. CLAUDE.md 6b: authored sizes are derived from the
   longest unbreakable run (7.83em in Syne 800) against the column at each
   breakpoint, so the fit safeguard stays idle instead of firing on every load.
   The rendered result is identical either way - min() already resolved to these
   values - but stating them makes the intent explicit. */
.v3-home { --h1: 43px; }
.v3-services { --h1: 40px; }

@media (min-width: 768px) {
  .v3 { --pad: 32px; --sy: 88px; --h2: 38px; --h3: 20px; --body: 16.5px; --menu: 44px; }
  .v3-home { --h1: 85px; }
  .v3-services { --h1: 62px; }
}
@media (min-width: 1024px) {
  .v3 { --pad: 40px; --sy: 112px; --h2: 46px; --h3: 21px; --body: 17px; --menu: 46px; }
  .v3-home { --h1: 114px; }
  .v3-services { --h1: 60px; }
}
@media (min-width: 1200px) { .v3 { --menu: 56px; } }
@media (min-width: 1440px) {
  .v3 { --pad: 48px; --sy: 140px; --h2: 56px; --h3: 22px; --menu: 60px; }
  .v3-home { --h1: 163px; }
  .v3-services { --h1: 86px; }
}

/* --- base ----------------------------------------------------------------- */
.v3 {
  /* longhand, so the declared property and the transitioned property are the
     same one — see the transition note below */
  background-color: var(--bg);
  color: var(--fg);
  font-family: Chivo, system-ui, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  /* Only the ground is transitioned. Transitioning `color` here latched body's
     inherited colour on the first dark->light toggle: the ground went light while
     every heading that inherits body colour (h1, .v3-srow__title, .v3-eng h3)
     stayed Mineral — invisible on Mineral. The token resolved correctly
     throughout; it was the running transition on the inherited property that
     held the old value. The text swap is instant now, which is imperceptible
     against the 0.4s ground fade. */
  transition: background-color .4s;
}
/* :where() keeps these at .v3's specificity (0,1,0) so component classes like
   .v3-navcta / .v3-btn win on source order. Without it, `.v3 a` (0,1,1) beats
   every single-class anchor rule and the CTAs inherit the body colour — which
   rendered the header CTA as light-on-light. */
.v3 :where(a) { color: inherit; text-decoration: none; }
.v3 :where(a):hover { color: var(--mosstext); }
.v3 ::selection { background: var(--moss); color: var(--tilth-carbon); }
.v3 :focus-visible { outline: 2px solid var(--mosstext); outline-offset: 3px; }
.v3 h1, .v3 h2, .v3 h3 { font-family: Syne, sans-serif; }
.v3 img { max-width: 100%; }

.v3-mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .16em;
  line-height: 1.5;
}
.v3-eyebrow { color: var(--mosstext); margin-bottom: 20px; }

/* Theme swap: suppress transitions for the one frame the tokens change.
   A transition whose value comes from a var() that changes can latch on the old
   value — the dark->light toggle left headings Mineral on a Mineral ground and
   the inverted section stuck on the wrong ground. Every affected property is
   themed, so rather than strip individual transitions (and lose the designed
   hover/interaction motion) the swap itself is made instantaneous. Applied by
   the toggle and removed on the next frame, so normal interaction is untouched. */
html.v3-theming, html.v3-theming *, html.v3-theming *::before, html.v3-theming *::after {
  transition: none !important;
}

@keyframes v3Rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes v3Fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .v3 *, .v3 *::before, .v3 *::after { animation: none !important; transition: none !important; }
}

/* --- header --------------------------------------------------------------- */
.v3-headwrap {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 14px var(--pad);
  background: transparent; border: 0; box-shadow: none;
  pointer-events: none;
}
.v3-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 7px 7px 7px 16px;
  border-radius: 999px; border: 1px solid transparent; background: transparent;
  pointer-events: auto;
  transition: background .45s, border-color .45s, box-shadow .45s;
}
@media (min-width: 768px) { .v3-head { padding: 8px 8px 8px 22px; } }
/* scrolled state — the pill fills with moss and its contents invert to carbon */
.v3-head.is-on { background: var(--moss); border-color: var(--moss); box-shadow: 0 10px 30px rgba(var(--tilth-carbon-rgb), .18); }
.v3-head.is-on .v3-navitem { color: var(--tilth-carbon); }
.v3-head.is-on .v3-navcta { background: var(--tilth-carbon); color: var(--tilth-mineral); }
.v3-head.is-on .v3-themebtn { border-color: rgba(var(--tilth-carbon-rgb), .3); }
.v3-head.is-on .v3-theme-dot { border-color: var(--tilth-carbon); background: linear-gradient(90deg, var(--tilth-carbon) 0 50%, transparent 50% 100%); }
.v3-head.is-on .v3-burger { color: var(--tilth-carbon); border-color: rgba(var(--tilth-carbon-rgb), .3); }

.v3-logo { height: 21px; width: auto; display: block; }
.v3-brandlink { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }

.v3-navlinks { display: none; align-items: center; gap: 20px; font-size: 14.5px; line-height: 1; flex: 0 1 auto; }
@media (min-width: 1120px) { .v3-navlinks { display: flex; } }
@media (min-width: 1280px) { .v3-navlinks { gap: 28px; } }
.v3-navitem { color: var(--fg); white-space: nowrap; transition: color .45s, opacity .3s; }
.v3-navitem:hover { opacity: .6; color: var(--fg); }
.v3-head.is-on .v3-navitem:hover { color: var(--tilth-carbon); }
.v3-navitem[aria-current] { color: var(--mosstext); font-weight: 500; }
.v3-head.is-on .v3-navitem[aria-current] { color: var(--tilth-carbon); }

.v3-headright { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.v3-depth {
  display: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .08em; color: var(--stone);
  white-space: nowrap; line-height: 1; margin-right: 2px; transition: color .45s;
}
@media (min-width: 640px) { .v3-depth { display: inline; } }
.v3-head.is-on .v3-depth { color: var(--tilth-carbon); }

.v3-themebtn {
  flex: 0 0 auto; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: transparent; border-radius: 999px;
  cursor: pointer; padding: 0; transition: border-color .45s;
}
.v3-theme-dot {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--fg);
  background: linear-gradient(90deg, var(--fg) 0 50%, transparent 50% 100%);
  transition: border-color .45s, background .45s, transform .45s;
}
html[data-theme="light"] .v3-theme-dot { transform: rotate(180deg); }

.v3-navcta {
  display: none; flex: 0 0 auto; height: 42px;
  align-items: center; justify-content: center; padding: 0 22px;
  background: var(--fg); color: var(--bg);
  font-family: Syne, sans-serif; font-weight: 700; font-size: 13.5px;
  letter-spacing: .01em; line-height: 1; white-space: nowrap; border-radius: 999px;
  transition: background .45s, color .45s;
}
@media (min-width: 900px) { .v3-navcta { display: inline-flex; } }
.v3-navcta:hover { color: var(--bg); }
.v3-head.is-on .v3-navcta:hover { color: var(--tilth-mineral); }

.v3-burger {
  flex: 0 0 auto; min-width: 92px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
  letter-spacing: .14em; line-height: 1; white-space: nowrap; padding: 0 18px;
  border-radius: 999px; cursor: pointer; transition: color .45s, border-color .45s;
}
@media (min-width: 1120px) { .v3-burger { display: none; } }

/* --- full-screen menu ------------------------------------------------------ */
.v3-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg); color: var(--fg);
  animation: v3Fade .3s ease both;
  display: flex; flex-direction: column;
  padding: 14px var(--pad) 28px; overflow-y: auto;
}
.v3-menu[hidden] { display: none; }
.v3-menu__top {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.v3-menu__close {
  flex: 0 0 auto; min-width: 96px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
  letter-spacing: .14em; line-height: 1; white-space: nowrap; padding: 0 18px;
  border-radius: 2px; cursor: pointer;
}
.v3-menu__grid {
  flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 28px; padding: 44px 0 40px; align-content: start;
}
@media (min-width: 768px) { .v3-menu__grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (min-width: 1200px) { .v3-menu__grid { grid-template-columns: 1.2fr .9fr .9fr; gap: 48px; } }
.v3-menu__links {
  display: flex; flex-direction: column; gap: 2px;
  font-family: Syne, sans-serif; font-weight: 700; font-size: var(--menu);
  letter-spacing: -.035em; line-height: 1.06; text-transform: uppercase;
}
.v3-menu__col { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.v3-menu__col h2 { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .16em; color: var(--mosstext); margin: 0; font-weight: 400; }
.v3-menu__col a { font-size: 15.5px; line-height: 1.4; color: var(--stone); }
.v3-menu__col a.is-plain { color: var(--fg); font-size: 16px; word-break: break-word; }
.v3-menu__col a[aria-current] { color: var(--mosstext); }
.v3-menu__cta {
  flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center;
  gap: 20px; background: var(--moss); color: var(--tilth-carbon); padding: 20px 24px; border-radius: 3px;
  font-family: Syne, sans-serif; font-weight: 700; font-size: var(--h3);
  letter-spacing: -.02em; text-transform: uppercase; line-height: 1.1;
}
.v3-menu__cta:hover { color: var(--tilth-carbon); }

/* --- shared section furniture --------------------------------------------- */
.v3-sec { padding: var(--sy) var(--pad); }
.v3-sec--grid { background-image: linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: calc(100% / 6) 100%; }
.v3-sec--raise { background: var(--raise); transition: background .4s; }
/* Same container pattern as .v3: --ifg is inherited by this section's headings.
   Declared as longhand and only background-color is transitioned — with the
   `background` shorthand the latch simply moved to the background, leaving a
   Mineral heading on a Mineral ground. */
.v3-sec--inv { background-color: var(--ibg); color: var(--ifg); transition: background-color .4s; }
.v3-h2 {
  margin: 0; font-family: Syne, sans-serif; font-weight: 700; font-size: var(--h2);
  line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase;
}
.v3-headrow { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
@media (min-width: 1024px) { .v3-headrow { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px; } }
.v3-headrow__note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--stone); max-width: 32ch; }

.v3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px; background: var(--moss); color: var(--tilth-carbon);
  font-family: Syne, sans-serif; font-weight: 700; font-size: 14.5px;
  letter-spacing: .01em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  border-radius: 2px; box-sizing: border-box;
  transition: background .3s, color .3s, transform .3s;
}
.v3-btn:hover { background: var(--clay); color: var(--tilth-mineral); transform: translateY(-2px); }
.v3-btn--ghost {
  background: transparent; color: inherit; border: 1px solid var(--line);
  font-family: Chivo, sans-serif; font-weight: 400; text-transform: none; font-size: 14.5px;
}
.v3-btn--ghost:hover { background: transparent; border-color: var(--fg); color: inherit; transform: none; }

/* =========================================================================
   HOMEPAGE
   ========================================================================= */
.v3-hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  padding: 96px var(--pad) 0; box-sizing: border-box;
  /* the strata rows start translated up to +96px right and settle on scroll; the
     design contains that with overflow-x:hidden on the root, but an overflow
     ancestor there would break position:sticky on the services depth map, so the
     clip is scoped to the hero that actually produces the overhang */
  overflow-x: clip;
}
.v3-hero__kicker {
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
  align-items: baseline; color: var(--stone); animation: v3Fade .8s ease both;
}
.v3-hero__kicker .is-moss { color: var(--mosstext); }
/* The design's ramp tops out at 168px. Its longest line ("BEFORE"/"GROWTH") is
   ~7.9em in Syne 800, so at the narrower desktop widths the design value would
   push past the content box — the /8 divisor holds the design size wherever it
   fits and eases it down only where it would otherwise clip. */
.v3-h1 {
  margin: 26px 0 0; font-family: Syne, sans-serif; font-weight: 800;
  font-size: min(var(--h1), calc((100vw - 2 * var(--pad) - 18px) / 8));
  line-height: .86; letter-spacing: -.045em; text-transform: uppercase;
  animation: v3Rise 1s cubic-bezier(.2, .7, .2, 1) both;
}
@media (min-width: 768px) { .v3-h1 { margin-top: 38px; } }
.v3-h1 .is-moss { color: var(--mosstext); }

/* hero strata — parallax bars, hidden below md exactly as the design specifies */
.v3-strata { display: none; margin-top: 30px; flex-direction: column; gap: 6px; max-width: 660px; will-change: transform; }
@media (min-width: 768px) { .v3-strata { display: flex; } }
.v3-stratum { display: flex; align-items: center; gap: 16px; will-change: transform, opacity; }
.v3-stratum__bar { height: 6px; flex: 1; background: var(--line2); border-radius: 1px; transform-origin: left; transition: background .5s; }
.v3-stratum__label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .14em;
  line-height: 1; color: var(--stone); width: 96px; text-align: right; white-space: nowrap; transition: color .5s;
}
.v3-stratum__bar.is-locked { background: var(--mosstext); }
.v3-stratum__label.is-locked { color: var(--mosstext); }

.v3-hero__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; margin-top: 38px; }
@media (min-width: 768px) { .v3-hero__foot { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 56px; } }
.v3-hero__lede { margin: 0; font-size: var(--body); line-height: 1.6; max-width: 46ch; color: var(--stone); animation: v3Rise 1s .12s cubic-bezier(.2, .7, .2, 1) both; }
.v3-hero__cta { display: flex; flex-direction: column; align-self: stretch; gap: 12px; flex: 0 0 auto; animation: v3Rise 1s .2s cubic-bezier(.2, .7, .2, 1) both; }
.v3-hero__cta > a { width: 100%; }
@media (min-width: 768px) { .v3-hero__cta { flex-direction: row; align-self: auto; } .v3-hero__cta > a { width: auto; } }

.v3-stats {
  margin-top: auto; padding: 56px 0 26px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
  animation: v3Fade 1.1s .4s ease both;
}
@media (min-width: 1024px) { .v3-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v3-stat { background: var(--bg); padding: 20px 18px 18px; }
.v3-stat:first-child { padding-left: 0; }
.v3-stat__v { font-family: Syne, sans-serif; font-weight: 700; font-size: 34px; letter-spacing: -.03em; line-height: 1; }
@media (min-width: 768px) { .v3-stat__v { font-size: 38px; } }
@media (min-width: 1024px) { .v3-stat__v { font-size: 40px; } }
@media (min-width: 1440px) { .v3-stat__v { font-size: 46px; } }
.v3-stat__v.is-moss { color: var(--mosstext); }
.v3-stat__v.is-clay { color: var(--clay); }
.v3-stat__v sup, .v3-stat__v .unit { font-size: .6em; }
.v3-stat__l { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .12em; line-height: 1.4; color: var(--stone); margin-top: 9px; }

/* brand rail */
.v3-brandsec { padding: clamp(46px, 5vw, 72px) 0 clamp(50px, 5.5vw, 78px); border-bottom: 1px solid var(--line); }
.v3-brandsec__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 28px; padding: 0 var(--pad); }
.v3-brandsec__note { font-size: 14px; line-height: 1.5; color: var(--stone); }
.v3-brandrail {
  margin-top: clamp(26px, 3vw, 38px); overflow: hidden; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.v3-brandtrack { display: flex; align-items: center; gap: clamp(44px, 5vw, 84px); width: max-content; will-change: transform; list-style: none; margin: 0; padding: 0; }
.v3-brand {
  font-family: Syne, sans-serif; font-weight: 600; font-size: 26px; letter-spacing: -.03em;
  line-height: 1.2; white-space: nowrap; color: var(--stone); opacity: .58; transition: color .4s;
}
@media (min-width: 768px) { .v3-brand { font-size: 30px; } }
@media (min-width: 1024px) { .v3-brand { font-size: 34px; } }
@media (min-width: 1440px) { .v3-brand { font-size: 38px; } }

/* problem split + settling bands */
.v3-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; }
@media (min-width: 1024px) { .v3-split { grid-template-columns: 1fr 1fr; gap: 72px; } }
.v3-split--mid { align-items: center; }
@media (min-width: 1024px) { .v3-split--mid { gap: 64px; } }
.v3-lede { margin: 26px 0 0; font-size: var(--body); line-height: 1.65; color: var(--stone); max-width: 46ch; }
.v3-bands { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.v3-band {
  background: var(--raise); border-left: 2px solid var(--line2); padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; will-change: transform;
}
.v3-band__name { font-size: 15px; line-height: 1.3; }
.v3-band__d { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .1em; color: var(--stone); white-space: nowrap; }
.v3-band--deep { display: block; background: rgba(var(--tilth-moss-rgb), .1); border-left-color: var(--moss); padding: 20px; }
.v3-band--deep .v3-band__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.v3-band--deep .v3-band__name, .v3-band--deep .v3-band__d { color: var(--mosstext); }
.v3-band--deep p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--stone); max-width: 44ch; }

/* diagnostic (inverse section) */
.v3-symrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.v3-sym {
  height: 46px; display: inline-flex; align-items: center;
  border: 1px solid var(--ichip); background: transparent; color: var(--ifg);
  font-family: Chivo, sans-serif; font-size: 14.5px; line-height: 1; white-space: nowrap;
  padding: 0 18px; border-radius: 2px; cursor: pointer; transition: all .3s;
}
.v3-sym[aria-pressed="true"] { background: var(--ifg); color: var(--ibg); border-color: var(--ifg); }
.v3-dxgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--iline); margin-top: 36px; border: 1px solid var(--iline); }
@media (min-width: 1024px) { .v3-dxgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v3-dx { background: var(--ibg); padding: 26px 24px 28px; transition: background .4s; }
.v3-dx--cta { display: flex; flex-direction: column; align-items: flex-start; }
.v3-dx__k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--imut); }
.v3-dx__layer { font-family: Syne, sans-serif; font-weight: 700; font-size: 27px; letter-spacing: -.03em; line-height: 1.08; margin-top: 12px; text-transform: uppercase; }
@media (min-width: 768px) { .v3-dx__layer { font-size: 30px; } }
/* three-up from 1024: "MEASUREMENT" is ~9em and the cell is ~261px of content at
   that width, so the design's flat 34px clips until the columns get wider */
@media (min-width: 1024px) { .v3-dx__layer { font-size: min(34px, 2.75vw); } }
.v3-dx__meter { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.v3-dx__track { height: 4px; flex: 1; background: var(--iline); position: relative; overflow: hidden; }
.v3-dx__bar { position: absolute; inset: 0 auto 0 0; background: var(--clay); width: 100%; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.v3-dx__depth { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--imut); white-space: nowrap; }
.v3-dx p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ibody); }
.v3-dx__cta { margin-top: auto; padding-top: 22px; }
.v3-dx__cta span {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px;
  background: var(--bg); color: var(--fg); font-family: Syne, sans-serif; font-weight: 700;
  font-size: 13.5px; letter-spacing: .02em; text-transform: uppercase; line-height: 1;
  white-space: nowrap; border-radius: 2px; transition: background .3s, color .3s;
}
.v3-dx__cta:hover span { background: var(--clay); color: var(--tilth-mineral); }

/* method */
.v3-method { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .v3-method { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v3-method__cell { background: var(--bg); padding: 32px 24px 36px; }
.v3-method__n { font-family: Syne, sans-serif; font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.04em; color: var(--mosstext); }
@media (min-width: 768px) { .v3-method__n { font-size: 48px; } }
@media (min-width: 1024px) { .v3-method__n { font-size: 52px; } }
@media (min-width: 1440px) { .v3-method__n { font-size: 58px; } }
.v3-method__n.is-clay { color: var(--clay); }
.v3-method__cell h3 { margin: 20px 0 12px; font-weight: 700; font-size: var(--h3); letter-spacing: -.02em; line-height: 1.15; text-transform: uppercase; }
.v3-method__cell p { margin: 0; font-size: var(--card); line-height: 1.6; color: var(--stone); }

/* service rows (shared by home + services index) */
.v3-srow-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.v3-srow-head__all { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .14em; color: var(--stone); white-space: nowrap; }
.v3-srow {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .55s cubic-bezier(.16, 1, .3, 1), background .45s cubic-bezier(.16, 1, .3, 1), border-color .4s;
}
@media (min-width: 768px) { .v3-srow { grid-template-columns: 56px 1fr; gap: 26px; } }
.v3-srow:hover { padding-left: 16px; background: rgba(var(--tilth-moss-rgb), .05); color: inherit; }
.v3-srow__n { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--stone); }
.v3-srow__title { margin: 0; font-family: Syne, sans-serif; font-weight: 700; font-size: 23px; letter-spacing: -.03em; line-height: 1.08; text-transform: uppercase; }
@media (min-width: 768px) { .v3-srow__title { font-size: 26px; } }
@media (min-width: 1024px) { .v3-srow__title { font-size: 29px; } }
@media (min-width: 1440px) { .v3-srow__title { font-size: 34px; } }
.v3-srow__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: baseline; }
@media (min-width: 1024px) { .v3-srow__inner { grid-template-columns: 1.1fr 1fr 24px; gap: 36px; } }
.v3-srow__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--stone); max-width: 44ch; }
.v3-srow__arrow { color: var(--mosstext); font-size: 18px; line-height: 1; justify-self: end; }

/* industries rail */
.v3-indrail { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--raise); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.v3-indrail::-webkit-scrollbar { display: none; width: 0; height: 0; }
.v3-indgrid { display: grid; grid-template-columns: repeat(5, minmax(168px, 1fr)); min-width: 100%; width: max-content; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .v3-indgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.v3-ind {
  display: flex; align-items: center; justify-content: center; padding: 15px 10px;
  border-right: 1px solid var(--line);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em;
  line-height: 1; white-space: nowrap; color: var(--stone);
  transition: color .35s, background .35s, opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 768px) { .v3-ind { padding: 16px 12px; letter-spacing: .16em; } }
@media (min-width: 1024px) { .v3-ind { font-size: 12px; } }
.v3-ind:last-child { border-right: 0; }
.v3-ind a { display: block; width: 100%; text-align: center; color: inherit; }
.v3-ind:hover { color: var(--mosstext); background: rgba(var(--tilth-moss-rgb), .06); }

/* evidence */
.v3-filters { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 1024px) { .v3-filters { justify-content: flex-end; } }
.v3-filt {
  height: 38px; display: inline-flex; align-items: center; border: 1px solid var(--line);
  background: transparent; color: var(--stone);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em;
  line-height: 1; white-space: nowrap; padding: 0 14px; border-radius: 2px; cursor: pointer; transition: all .3s;
}
.v3-filt[aria-pressed="true"] { background: var(--moss); color: var(--tilth-carbon); border-color: var(--moss); }
.v3-evgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); margin-top: 36px; border: 1px solid var(--line); }
@media (min-width: 768px) { .v3-evgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .v3-evgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v3-ev { background: var(--raise); padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 16px; transition: background .35s; }
.v3-ev__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .12em; white-space: nowrap; }
.v3-ev__tag { color: var(--mosstext); }
.v3-ev__dur { color: var(--stone); }
.v3-ev__metrics { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.v3-ev__m { font-family: Syne, sans-serif; font-weight: 700; font-size: 27px; letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
@media (min-width: 768px) { .v3-ev__m { font-size: 28px; } }
@media (min-width: 1200px) { .v3-ev__m { font-size: 30px; } }
.v3-ev__m.is-moss { color: var(--mosstext); }
.v3-ev__ml { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; line-height: 1.4; color: var(--stone); margin-top: 7px; }
.v3-ev h3 { margin: 0; font-weight: 600; font-size: 17.5px; line-height: 1.3; letter-spacing: -.02em; }
.v3-ev p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--stone); }
/* Evidence spotlight — the selected-category state (CLAUDE.md §2C).
   Sizes and proportions taken from the approved design's data-spot block. */
.v3-spot {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
  margin-top: 36px; border: 1px solid var(--line); background: var(--line);
}
.v3-spot[hidden] { display: none; }
@media (min-width: 1024px) { .v3-spot { grid-template-columns: 58fr 42fr; min-height: 300px; } }
.v3-spot__side, .v3-spot__metrics { background: var(--raise); padding: 26px 22px 28px; transition: background .4s; }
@media (min-width: 768px) { .v3-spot__side, .v3-spot__metrics { padding: 34px 32px 36px; } }
.v3-spot__side { display: flex; flex-direction: column; }
.v3-spot__top {
  display: flex; align-items: baseline; gap: 14px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: .12em; white-space: nowrap;
}
.v3-spot__tag { color: var(--mosstext); }
.v3-spot__rule { flex: 1; height: 1px; background: var(--line); }
.v3-spot__dur { color: var(--stone); }
.v3-spot__title {
  margin: 22px 0 0; font-family: Syne, sans-serif; font-weight: 700; font-size: 23px;
  line-height: 1.12; letter-spacing: -.03em; max-width: 20ch;
}
@media (min-width: 768px) { .v3-spot__title { font-size: 27px; } }
@media (min-width: 1200px) { .v3-spot__title { font-size: 30px; } }
.v3-spot__body { margin: 18px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--stone); max-width: 52ch; }
.v3-spot__metrics { display: flex; flex-direction: column; justify-content: center; }
.v3-spot__m { padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.v3-spot__m.is-second { padding: 26px 0 0; border-bottom: 0; }
.v3-spot__mv {
  font-family: Syne, sans-serif; font-weight: 700; font-size: 40px;
  letter-spacing: -.04em; line-height: 1; white-space: nowrap;
}
@media (min-width: 768px) { .v3-spot__mv { font-size: 48px; } }
@media (min-width: 1200px) { .v3-spot__mv { font-size: 56px; } }
.v3-spot__mv.is-moss { color: var(--mosstext); }
.v3-spot__ml {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: .12em; line-height: 1.4; color: var(--stone); margin-top: 12px;
}

.v3-evnote { margin: 20px 0 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .1em; line-height: 1.6; color: var(--stone); }

/* tools calculator */
.v3-calc { border: 1px solid var(--line); background: var(--raise); padding: 28px 26px 30px; transition: background .4s; }
.v3-calc__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 14px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; white-space: nowrap; }
.v3-calc__fields { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.v3-calc__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--stone); }
.v3-calc__row output { font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--fg); white-space: nowrap; }
.v3-calc input[type="range"] { width: 100%; margin-top: 11px; accent-color: var(--tilth-moss); }
.v3-calc__out { display: grid; grid-template-columns: auto auto; gap: 24px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .v3-calc__out { grid-template-columns: auto auto 1fr; } }
.v3-calc__k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; color: var(--stone); }
.v3-calc__v { font-family: Syne, sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -.03em; line-height: 1; margin-top: 8px; white-space: nowrap; }
.v3-calc__v.is-moss { color: var(--mosstext); }
.v3-calc__verdict { font-size: 14px; line-height: 1.5; margin-top: 8px; color: var(--stone); }
.v3-toolslink { display: inline-block; margin-top: 22px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .14em; color: var(--mosstext); border-bottom: 1px solid rgba(var(--tilth-moss-rgb), .4); padding-bottom: 4px; }

/* founder */
.v3-portrait { aspect-ratio: 4 / 5; max-width: 400px; width: 100%; overflow: hidden; background: var(--raise); }
.v3-portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.v3-textlink { display: inline-block; margin-top: 22px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .14em; color: var(--stone); border-bottom: 1px solid var(--line); padding-bottom: 4px; }

/* contact (moss) */
.v3-contact { background: var(--moss); color: var(--tilth-carbon); padding: var(--sy) var(--pad); }
.v3-contact a:hover { color: var(--tilth-carbon); }
.v3-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 1150px) { .v3-contact__grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.v3-contact__eyebrow { color: rgba(var(--tilth-carbon-rgb), .6); margin-bottom: 20px; }
.v3-contact__h { margin: 0; font-family: Syne, sans-serif; font-weight: 800; font-size: 42px; line-height: .94; letter-spacing: -.04em; text-transform: uppercase; max-width: 12ch; }
@media (min-width: 768px) { .v3-contact__h { font-size: 58px; } }
@media (min-width: 1024px) { .v3-contact__h { font-size: 70px; } }
@media (min-width: 1150px) { .v3-contact__h { font-size: 70px; } }
@media (min-width: 1440px) { .v3-contact__h { font-size: 88px; } }
.v3-contact__p { margin: 24px 0 0; font-size: var(--body); line-height: 1.6; max-width: 38ch; color: rgba(var(--tilth-carbon-rgb), .8); }
.v3-contact__links { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; font-size: 16px; }
.v3-contact__links a { align-self: flex-start; border-bottom: 1px solid rgba(var(--tilth-carbon-rgb), .35); padding-bottom: 3px; word-break: break-word; }
.v3-form { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
@media (min-width: 1150px) { .v3-form { margin-top: 0; } }
.v3-form__inner { display: flex; flex-direction: column; gap: 20px; }
.v3-field { display: flex; flex-direction: column; gap: 8px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; color: rgba(var(--tilth-carbon-rgb), .65); }
.v3-field input, .v3-field textarea {
  font-family: Chivo, sans-serif; font-size: 16px; color: var(--tilth-carbon); background: transparent;
  border: 0; border-bottom: 1px solid rgba(var(--tilth-carbon-rgb), .35); padding: 11px 0; outline: none;
  width: 100%; box-sizing: border-box;
}
.v3-field textarea { resize: vertical; }
.v3-field input:focus, .v3-field textarea:focus { border-color: var(--tilth-carbon); }
.v3-fsyms { display: flex; flex-wrap: wrap; gap: 7px; }
.v3-fsym {
  height: 42px; display: inline-flex; align-items: center; border: 1px solid rgba(var(--tilth-carbon-rgb), .35);
  background: transparent; color: var(--tilth-carbon); font-family: Chivo, sans-serif; font-size: 13.5px;
  line-height: 1; white-space: nowrap; padding: 0 15px; border-radius: 2px; cursor: pointer; transition: all .3s;
}
.v3-fsym[aria-pressed="true"] { background: var(--tilth-carbon); color: var(--tilth-mineral); border-color: var(--tilth-carbon); }
.v3-submit {
  margin-top: 4px; align-self: flex-start; height: 54px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 30px; background: var(--tilth-carbon); color: var(--tilth-mineral);
  font-family: Syne, sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: .02em;
  text-transform: uppercase; line-height: 1; white-space: nowrap; border: 0; border-radius: 2px;
  cursor: pointer; transition: background .3s;
}
.v3-submit:hover { background: var(--clay); }
.v3-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- footer --------------------------------------------------------------- */
.v3-foot { padding: 56px var(--pad) 26px; }
.v3-foot--rule { border-top: 1px solid var(--line); }
.v3-foot__k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .16em; line-height: 1.5; color: var(--stone); margin-bottom: 18px; }
.v3-clocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; padding-bottom: 30px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .v3-clocks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.v3-clock { display: flex; flex-direction: column; gap: 8px; }
.v3-clock__city { display: flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .16em; color: var(--stone); }
.v3-clock__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--stone); transition: background .5s; }
.v3-clock__dot.is-day { background: var(--mosstext); box-shadow: none; }
.v3-clock__dot.is-night { background: transparent; box-shadow: inset 0 0 0 1px var(--stone); }
.v3-clock__t { font-family: Syne, sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .v3-clock__t { font-size: 22px; } }
.v3-clock__suffix { font-size: .58em; font-weight: 500; letter-spacing: .04em; margin-left: 5px; opacity: .62; }
.v3-footgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .v3-footgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v3-footcol { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--stone); }
.v3-footcol h2 { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .16em; color: var(--mosstext); margin: 0 0 4px; font-weight: 400; }
.v3-wordmarkwrap { padding-top: 28px; display: flex; justify-content: center; }
.v3-wordmark { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.v3-wordmark img { height: 58px; width: auto; max-width: 100%; display: block; opacity: .16; user-select: none; }
@media (min-width: 768px) { .v3-wordmark img { height: 92px; } }
@media (min-width: 1024px) { .v3-wordmark img { height: 120px; } }
@media (min-width: 1440px) { .v3-wordmark img { height: 150px; } }
.v3-wm-veil { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s cubic-bezier(.16, 1, .3, 1); }
.v3-wm-veil > span {
  display: block; width: 100%; height: 100%; background: var(--moss);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.v3-footbottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 20px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .1em; color: var(--foot); }

/* =========================================================================
   SERVICES INDEX
   ========================================================================= */
.v3-shero { padding: 112px var(--pad) 0; }
.v3-crumb { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; color: var(--stone); animation: v3Fade .8s ease both; }
.v3-crumb a { color: var(--stone); }
.v3-crumb .sep { color: var(--mosstext); padding: 0 6px; }
.v3-crumb .cur { color: var(--fg); }
.v3-sherogrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: end; margin-top: 34px; }
/* minmax(0,…) so a long unbreakable word can never widen the track past the
   viewport — the design's own tracks are plain fr and do blow out at 1440. */
/* The design declares 1.15fr/.85fr, but in the approved render the headline's
   intrinsic width wins the track and the diagram collapses to ~121px — that is
   the layout that was reviewed, so it is reproduced explicitly here. Stating the
   diagram track as a fixed 121px (rather than letting an fr fight the headline)
   is what keeps the headline column deterministic and the page overflow-free. */
@media (min-width: 1100px) { .v3-sherogrid { grid-template-columns: minmax(0, 1fr) 121px; gap: 64px; } }

/* Services H1 sizing — CLAUDE.md §6b.
   The design's max-width:14ch is not reproducible as authored: `ch` scales with
   font-size, which §6b explicitly rules out, and it resolves differently per font
   face. The measure is therefore a px cap per breakpoint, matching the approved
   ~1147px column at xl.

   Soft hyphens in the copy drop the longest unbreakable run from "FOUNDATIONS."
   (12.29em in Syne 800) to "DATIONS." (~8.2em), so the authored sizes fit and the
   /9.5 divisor is only a safeguard — it fires on a genuine overrun rather than
   shrinking type that already fits. 18px is a classic-scrollbar allowance, since
   100vw includes the scrollbar but the content box does not. */
.v3-sh1 {
  margin: 0; font-family: Syne, sans-serif; font-weight: 800;
  font-size: min(var(--h1), calc((100vw - 2 * var(--pad) - 18px) / 8));
  line-height: .92; letter-spacing: -.045em; text-transform: uppercase;
  hyphens: manual;
  max-width: 760px;   /* flat px cap, exactly as the final approved design */
  animation: v3Rise 1s cubic-bezier(.16, 1, .3, 1) both;
}
@media (min-width: 1100px) {
  /* two-column hero: the diagram column reserves 121px + the 64px gap */
  .v3-sh1 { font-size: min(var(--h1), calc((100vw - 2 * var(--pad) - 185px - 18px) / 8)); }
}
.v3-sh1 .is-moss { color: var(--mosstext); }
.v3-shero__p { margin: 32px 0 0; font-size: var(--body); line-height: 1.6; max-width: 52ch; color: var(--stone); animation: v3Rise 1s .12s cubic-bezier(.16, 1, .3, 1) both; }
.v3-shero__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 34px; animation: v3Rise 1s .2s cubic-bezier(.16, 1, .3, 1) both; }
@media (min-width: 560px) { .v3-shero__cta { flex-direction: row; } }

/* hero depth diagram — hidden below 700 per the design */
.v3-herodiag { display: none; padding-bottom: 6px; }
@media (min-width: 700px) { .v3-herodiag { display: block; } }
.v3-herodiag__k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--stone); display: flex; justify-content: space-between; gap: 12px; }
.v3-herodiag__k.is-moss { color: var(--mosstext); margin-top: 14px; }
.v3-hdrows { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; }
.v3-hd { display: flex; align-items: center; gap: 14px; }
.v3-hd__bar { height: 7px; flex: 1; background: var(--line2); border-radius: 1px; transform-origin: left; transition: background .5s, transform .7s cubic-bezier(.16, 1, .3, 1); }
.v3-hd__l { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .12em; color: var(--stone); width: 104px; text-align: right; white-space: nowrap; }

.v3-svchead { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
@media (min-width: 1024px) { .v3-svchead { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 40px; } }
.v3-svchead--rule { border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.v3-maphint { display: none; margin: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; line-height: 1.7; color: var(--stone); max-width: 30ch; }
@media (min-width: 1180px) { .v3-maphint { display: block; text-align: right; } }

.v3-svclayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; margin-top: 8px; }
@media (min-width: 1180px) { .v3-svclayout { grid-template-columns: minmax(0, 1fr) minmax(320px, 32%); gap: 48px; } }
@media (min-width: 1440px) { .v3-svclayout { gap: 64px; } }

/* services-index service rows carry more furniture than the homepage rows */
.v3-srow--full { align-items: start; }
.v3-srow--full .v3-srow__n { padding-top: 6px; }
.v3-srow__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; }
.v3-srow__title--wrap { max-width: 22ch; font-size: 22px; }
@media (min-width: 768px) { .v3-srow__title--wrap { font-size: 25px; } }
@media (min-width: 1024px) { .v3-srow__title--wrap { font-size: 28px; } }
@media (min-width: 1440px) { .v3-srow__title--wrap { font-size: 32px; } }
.v3-srow__depth { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--mosstext); white-space: nowrap; }
.v3-srow__desc { margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--stone); max-width: 62ch; }
/* Compact inline Growth System — the sub-1180 counterpart to the sticky depth map
   (CLAUDE.md §8). Shown only where the rail is not, carries the same four facts
   (layer, qualitative depth, position in the layer stack, and the row's own
   service), needs no hover, and adds no extra card. */
.v3-srow__mini { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
@media (min-width: 1180px) { .v3-srow__mini { display: none; } }
.v3-srow__mini-k {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px;
  letter-spacing: .14em; color: var(--foot);
}
.v3-srow__mini-ends {
  display: flex; justify-content: space-between; max-width: 260px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px;
  letter-spacing: .12em; color: var(--foot);
}
/* eight segments = the eight growth layers, surface -> foundation; the service's
   own layers light in moss so depth reads positionally as well as by name */
.v3-srow__mini-bar { display: flex; gap: 3px; max-width: 260px; }
.v3-srow__mini-seg { flex: 1; height: 3px; border-radius: 1px; background: var(--line2); transition: background .4s; }
.v3-srow__mini-seg.is-on { background: var(--mosstext); }

.v3-srow__conn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-top: 16px; }
.v3-srow__connk { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; color: var(--foot); }
.v3-chip { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; color: var(--stone); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; line-height: 1; }
.v3-srow__explore { display: inline-block; margin-top: 18px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; color: var(--fg); }
.v3-srow.is-active, .v3-srow.is-connected { border-bottom-color: rgba(var(--tilth-moss-rgb), .35); }
.v3-alsohead { padding: 64px 0 24px; }

/* sticky depth map */
.v3-svcmap {
  display: none; position: sticky; top: 116px; align-self: start; height: max-content;
  max-height: calc(100vh - 140px); overflow-y: auto; scrollbar-width: none;
  border: 1px solid var(--line); background: var(--raise); padding: 26px 24px 28px;
}
.v3-svcmap::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (min-width: 1180px) { .v3-svcmap { display: block; } }
.v3-svcmap__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.v3-svcmap__layers { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; }
.v3-layer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; border-left: 2px solid var(--line2); background: transparent;
  transition: background .4s, border-color .4s, transform .5s cubic-bezier(.16, 1, .3, 1);
}
@media (max-height: 859px) { .v3-layer { padding: 8px 12px; } }
.v3-layer__n { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--stone); transition: color .4s; }
.v3-layer__d { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; color: var(--foot); transition: color .4s; }
.v3-layer.is-on { background: rgba(var(--tilth-moss-rgb), .12); border-left-color: var(--mosstext); transform: translateX(6px); }
.v3-layer.is-on .v3-layer__n, .v3-layer.is-on .v3-layer__d { color: var(--mosstext); }
.v3-layer.is-near { background: rgba(var(--tilth-moss-rgb), .05); border-left-color: rgba(var(--tilth-moss-rgb), .45); }
.v3-layer.is-near .v3-layer__n { color: var(--fg); }
.v3-svcmap__active { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.v3-svcmap__k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; color: var(--stone); }
.v3-svcmap__name { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.v3-svcmap__name b { font-family: Syne, sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.02em; line-height: 1.15; }
.v3-svcmap__name span { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--stone); font-weight: 400; }
.v3-svcmap__depth { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; color: var(--mosstext); margin-top: 10px; }
.v3-svcmap__conn { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; }
.v3-svcmap__conn span { font-size: 13.5px; line-height: 1.45; color: var(--fg); padding: 7px 0; border-bottom: 1px solid var(--line); }
.v3-svcmap__go { display: inline-block; margin-top: 18px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--mosstext); }

/* diagnostic tiles */
.v3-symgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: 40px; }
@media (min-width: 700px) { .v3-symgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; } }
@media (min-width: 1100px) { .v3-symgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v3-tile {
  min-height: 64px; display: flex; align-items: center; justify-content: flex-start; text-align: left;
  background: rgba(var(--tilth-carbon-rgb), .035); border: 1px solid var(--ichip); border-radius: 8px; color: var(--ifg);
  font-family: Chivo, sans-serif; font-size: 14.5px; line-height: 1.35; padding: 12px 17px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(var(--tilth-mineral-rgb), .7), 0 1px 0 rgba(var(--tilth-carbon-rgb), .06);
  transition: background .32s cubic-bezier(.16, 1, .3, 1), color .32s, border-color .32s, box-shadow .32s, transform .32s;
}
@media (min-width: 700px) { .v3-tile { min-height: 76px; padding: 14px 20px; } }
@media (min-width: 1100px) { .v3-tile { min-height: 80px; } }
/* :where() keeps this at .v3-tile's specificity so it restyles the default tile
   without outranking [aria-pressed="true"]. Written as html[data-theme=...] it
   was (0,2,1) and beat the selected rule (0,2,0), which silently dropped the
   Moss fill off the selected tile in light theme. */
:where(html[data-theme="light"]) .v3-tile { background: rgba(var(--tilth-mineral-rgb), .05); box-shadow: inset 0 1px 0 rgba(var(--tilth-mineral-rgb), .09), 0 1px 0 rgba(var(--tilth-carbon-rgb), .45); }
.v3-tile:hover { border-color: var(--ifg); transform: translateY(-1px); }
.v3-tile[aria-pressed="true"] {
  background: var(--moss); color: var(--tilth-carbon); border-color: var(--moss); font-weight: 500; transform: none;
  box-shadow: inset 0 1px 0 rgba(var(--tilth-mineral-rgb), .30), inset 0 -1px 0 rgba(var(--tilth-carbon-rgb), .16);
}

/* prescription */
.v3-rx { margin-top: 30px; }
@media (min-width: 1024px) { .v3-rx { margin-top: 36px; } }
.v3-rx__head { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-bottom: 22px; border-bottom: 1px solid var(--iline); }
@media (min-width: 620px) { .v3-rx__head { flex-direction: row; align-items: baseline; } }
.v3-rx__k { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--imut); width: 100%; }
.v3-rx__layer { font-family: Syne, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.03em; line-height: 1.1; text-transform: uppercase; overflow-wrap: normal; hyphens: none; }
@media (min-width: 700px) { .v3-rx__layer { font-size: 30px; } }
@media (min-width: 1024px) { .v3-rx__layer { font-size: 32px; } }
.v3-rx__depth { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; line-height: 1.6; color: var(--imut); }
.v3-rx__lk { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--imut); margin-top: 34px; }
.v3-rxlist { display: flex; flex-direction: column; margin-top: 6px; }
.v3-rxrow { display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; gap: 12px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--iline); transition: padding-left .45s cubic-bezier(.16, 1, .3, 1); color: var(--ifg); }
@media (min-width: 620px) { .v3-rxrow { grid-template-columns: 52px minmax(0, 1fr) 28px; gap: 20px; } }
.v3-rxrow:hover { padding-left: 10px; color: var(--ifg); }
.v3-rxrow__n { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.55; color: var(--imut); padding-top: 4px; }
.v3-rxrow__t { font-family: Syne, sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.02em; line-height: 1.25; }
.v3-rxrow p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ibody); max-width: 76ch; }
.v3-rxrow__a { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.55; padding-top: 4px; justify-self: end; }
.v3-rx__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 36px; }
@media (min-width: 620px) { .v3-rx__cta { flex-direction: row; align-items: center; gap: 26px; } }
.v3-rx__btn { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 28px; background-color: var(--ifg); color: var(--ibg); font-family: Syne, sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; line-height: 1; white-space: nowrap; border-radius: 2px; transition: background-color .35s; }
.v3-rx__btn:hover { background-color: var(--clay); color: var(--tilth-mineral); }
.v3-rx__alt { display: inline-flex; align-items: center; height: 54px; font-size: 14.5px; line-height: 1; color: var(--imut); white-space: nowrap; transition: color .3s; }
.v3-rx__alt:hover { color: var(--ifg); }
.v3-rx__alt span { border-bottom: 1px solid var(--ichip); padding-bottom: 4px; }

/* engagement models */
.v3-engage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 38px; }
@media (min-width: 1024px) { .v3-engage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v3-eng { background: var(--bg); padding: 28px 22px 32px; display: flex; flex-direction: column; }
@media (min-width: 1280px) { .v3-eng { padding: 32px 26px 36px; } }
.v3-eng__n { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--mosstext); }
.v3-eng__n.is-clay { color: var(--clay); }
.v3-eng h3 { margin: 18px 0 12px; font-weight: 700; font-size: var(--h3); letter-spacing: -.02em; line-height: 1.15; text-transform: uppercase; }
.v3-eng p { margin: 0; font-size: var(--card); line-height: 1.6; color: var(--stone); }
.v3-eng ul { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.v3-eng li { font-size: 14px; line-height: 1.5; color: var(--stone); padding-left: 16px; position: relative; }
.v3-eng li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; background: var(--mosstext); }
.v3-eng--clay li::before { background: var(--clay); }
.v3-eng__go { margin-top: auto; padding-top: 26px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; }

/* Reveal primitives — JS adds data-shown; without JS everything stays visible.
   CLAUDE.md §9: never animate clip-path on a reveal. If the hide/show state ever
   desyncs, a clip-path leaves the content permanently cut off, whereas a stuck
   opacity/transform still resolves to readable text. Opacity + translateY carry
   the motion on their own. The shown state is keyed off a data attribute so it is
   idempotent — re-applying it can never re-hide content. */
.v3-reveal { will-change: opacity, transform; }
.v3-js .v3-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .95s cubic-bezier(.16, 1, .3, 1), transform 1.05s cubic-bezier(.16, 1, .3, 1);
}
.v3-js .v3-reveal[data-shown] { opacity: 1; transform: none; }
.v3-js .v3-reveal:nth-child(3n+2) { transition-delay: 90ms; }
.v3-js .v3-reveal:nth-child(3n+3) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) { .v3-js .v3-reveal { opacity: 1; transform: none; } }