/* Praxis Institute Holdings: locked direction: Praxis Brand True (2026-08-18)
   Iteration 2: inspiration grammar applied (Catalyst word masks + offset editorial,
   OCI bracketed indexes + ruled lists + stairs, Halston chips + wipes + curtain footer,
   Pace soft-key buttons + frosted capsule). Motion per brand-kit/interactions.md. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-var-latin.woff2") format("woff2");
  font-style: normal; font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-italic-var-latin.woff2") format("woff2");
  font-style: italic; font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  font-style: normal; font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-italic-var-latin.woff2") format("woff2");
  font-style: italic; font-weight: 100 900; font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #FDFAF4;
  --surface: #FFFFFF;
  --ink: #1F1F24;
  --muted: #616164;
  --accent: #C12558;
  --accent-deep: #7A1E3D;
  --accent-on: #FFFFFF;
  --gold: #E0BB62;
  --gold-deep: #B48430;
  --gold-text: #856123; /* AA gold for text-tier mono labels: 5.40:1 on cream, 4.75 on champagne, 4.68 on blush (gold-deep measures 3.2:1 and stays for decoration, borders, and focus rings) */
  --blush: #F8E6E8;
  --champagne: #F6EBD3;
  --hairline: rgba(31, 31, 36, 0.12);
  --gold-hairline: rgba(224, 187, 98, 0.55);
  --radius: 8px;
  --hfont: "Cormorant Garamond", "Times New Roman", serif;
  --bfont: "Inter", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease-enter: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-exit: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-hover: cubic-bezier(0.15, 0.9, 0.34, 0.95);
  --dur-hover: 0.25s;
  --dur-ui: 0.4s;
  --dur-reveal: 0.7s;
  --dur-hero: 1.2s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--bfont);
  font-synthesis: none;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; border-radius: 2px; }

.wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block: clamp(4.5rem, 10vw, 8.5rem); }

h1, h2, .serif { font-family: var(--hfont); font-weight: 600; line-height: 1.06; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.lede { color: var(--muted); max-width: 60ch; font-size: 1.1rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.acc { color: var(--accent); }
/* editorial accent: crimson serif runs inside display headlines set italic (wave 1) */
h1 .acc { font-style: italic; }

/* orphan-word prevention (P-005, mandatory): balance display text, pretty prose */
h1, h2, h3, .lede, .hero .sub, .closer .motto, .capsule-answer .big { text-wrap: balance; }
.faq .answer, .prose p, article p { text-wrap: pretty; }

/* ── section header system: mono eyebrow + bracketed index (OCI) ─ */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: .65rem; margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.sec-head .label {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); display: inline-flex; align-items: center; gap: .55rem;
}
.sec-head .label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.sec-head .index {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: var(--muted);
}
.on-dark .sec-head { border-color: rgba(253, 250, 244, .22); }
.on-dark .sec-head .label { color: var(--gold); }
.on-dark .sec-head .index { color: rgba(253, 250, 244, .6); }

/* ── buttons (Pace soft-key) ────────────────────────────────── */
.btn {
  display: inline-block; background: var(--accent); color: var(--accent-on);
  border: none; border-radius: var(--radius); cursor: pointer;
  padding: .9rem 1.7rem; font-family: var(--bfont); font-size: 1rem; font-weight: 600;
  box-shadow: 0 1px 2px rgba(10,12,18,.05), inset 0 -2px 0 rgba(10,12,18,.08), inset 0 0 0 1px rgba(10,12,18,.12);
  transition: background var(--dur-hover) var(--ease-hover), transform var(--dur-hover) var(--ease-hover);
}
.btn:hover { background: var(--accent-deep); color: var(--accent-on); }
.btn.ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn.ghost:hover { background: var(--blush); color: var(--accent-deep); }

/* wave 3: primary CTA depth. The overlay gradient is a lighting pass only
   (white lift into the logo ramp's dark end at low alpha), so the fill still
   reads as the locked flat crimson while the color transitions underneath. */
.btn-primary {
  background-color: var(--accent);
  background-image: linear-gradient(172deg, rgba(255, 255, 255, 0.07) 0%, rgba(84, 4, 16, 0.12) 100%);
  box-shadow:
    0 10px 26px rgba(193, 37, 88, 0.2),
    0 1px 2px rgba(10, 12, 18, 0.05),
    inset 0 -2px 0 rgba(10, 12, 18, 0.08),
    inset 0 0 0 1px rgba(10, 12, 18, 0.12);
  transition: background-color var(--dur-hover) var(--ease-hover),
    box-shadow var(--dur-hover) var(--ease-hover),
    transform var(--dur-hover) var(--ease-hover);
}
.btn-primary:hover {
  background-color: var(--accent-deep);
  box-shadow:
    0 5px 14px rgba(122, 30, 61, 0.38),
    0 1px 2px rgba(10, 12, 18, 0.05),
    inset 0 -2px 0 rgba(10, 12, 18, 0.12),
    inset 0 0 0 1px rgba(10, 12, 18, 0.14);
}
/* the capsule pill keeps its resting soft-key; the deep shadow arrives via
   the existing .is-past-hero floating-cta rule */
.capsule .btn-primary {
  box-shadow: 0 1px 2px rgba(10, 12, 18, 0.05), inset 0 -2px 0 rgba(10, 12, 18, 0.08), inset 0 0 0 1px rgba(10, 12, 18, 0.12);
}
/* the curtain closer keeps its locked white-to-gold treatment, with the
   wave's depth vocabulary translated for the maroon ground */
.closer .btn-primary {
  background-color: #FFFFFF; background-image: none; color: var(--accent-deep);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(31, 31, 36, 0.06);
}
.closer .btn-primary:hover {
  background-color: var(--gold); color: var(--ink);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(31, 31, 36, 0.08);
}

/* mono CTA bar (OCI stacked-label swap) */
.bar-wrap { text-align: center; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
/* wave 7: trust microcopy rides with the bar where no adjacent line exists */
.bar-wrap .bar-note { font-size: .88rem; color: var(--muted); margin-top: .95rem; }
.mono-bar {
  display: inline-block; text-align: center;
  border: 1px solid var(--accent); border-radius: var(--radius);
  font-family: var(--mono); font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); position: relative; overflow: hidden; padding: 1.05rem 2.8rem;
}
.mono-bar .lbl { display: block; transition: transform var(--dur-ui) var(--ease-exit), opacity var(--dur-ui) var(--ease-exit); position: relative; z-index: 1; }
.mono-bar .lbl.dup { position: absolute; inset: 0; display: grid; place-items: center; transform: translateY(100%); opacity: 0; color: var(--accent-on); }
.mono-bar::before { content: ""; position: absolute; inset: -1px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-ui) var(--ease-exit); }
.mono-bar:hover::before { transform: scaleY(1); }
.mono-bar:hover .lbl.main { transform: translateY(-100%); opacity: 0; }
.mono-bar:hover .lbl.dup { transform: translateY(0); opacity: 1; }

/* ── home intro: the mark resolves over the real hero, then joins the nav ── */
.brand-intro {
  display: none;
}
@keyframes brandIntroFailSafe { to { opacity: 0; visibility: hidden; } }
html.js-motion.has-brand-intro .brand-intro { display: contents; }
.brand-intro__logo {
  position: fixed; z-index: 12001; left: 50%; top: 50%;
  translate: -50% -50%; pointer-events: none;
  width: clamp(220px, 23vw, 320px); aspect-ratio: 262 / 138;
  will-change: transform; transform-origin: center;
  animation: brandIntroFailSafe .01s linear 4.6s forwards;
}
.brand-intro__mark {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(.88); filter: blur(12px) saturate(.72);
}
.brand-intro.is-running .brand-intro__mark {
  opacity: 1; transform: scale(1); filter: blur(0) saturate(1);
  transition: opacity .92s var(--ease-enter) .04s,
    transform 1.05s var(--ease-enter) .04s,
    filter .98s var(--ease-enter) .04s;
}
.brand-intro__halo {
  position: absolute; z-index: -1; inset: -42%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .96) 0%, rgba(248, 230, 232, .3) 32%, transparent 69%);
  opacity: 0; transform: scale(.7);
}
.brand-intro.is-running .brand-intro__halo {
  opacity: 1; transform: scale(1);
  transition: opacity .82s var(--ease-enter) .04s, transform 1.08s var(--ease-enter) .04s;
}
.brand-intro.is-flying .brand-intro__halo { opacity: 0; transition: opacity .35s var(--ease-hover); }
.brand-intro.is-flying .brand-intro__logo { transition: transform 1.12s cubic-bezier(.45, 0, .2, 1); }
.brand-intro.is-flying .brand-intro__mark { filter: blur(0) saturate(1); }
.brand-intro.is-done { display: none !important; animation: none; }

/* The real nav mark stays absent until the flying copy covers its exact slot.
   At landing, JS reveals the real image underneath before clearing the overlay. */
html.js-motion.has-brand-intro .brand-intro:not(.is-done) ~ .site-header .brand img { opacity: 0; }

@media (max-width: 720px) {
  .brand-intro__logo { width: clamp(198px, 56vw, 245px); }
}
@media (prefers-reduced-motion: reduce) {
  html.js-motion.has-brand-intro .brand-intro { display: none !important; }
  html.js-motion.has-brand-intro .brand-intro ~ .site-header .brand img { opacity: 1 !important; }
}

/* ── capsule header: left-anchored, nav collapses behind Menu ── */
.site-header {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  pointer-events: none;
  padding-inline: clamp(1rem, 3vw, 2.4rem);
}
.site-header > .floating-cta { pointer-events: auto; flex: none; border-radius: 999px; }
.capsule {
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: .9rem;
  background: rgba(253, 250, 244, 0.55);
  border: 1px solid rgba(224, 187, 98, 0.38);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; padding: .5rem .6rem .5rem 1.1rem; max-width: calc(100vw - 2rem);
  transition: background var(--dur-ui) var(--ease-exit), box-shadow var(--dur-ui) var(--ease-exit);
}
.site-header.is-past-hero .capsule { background: rgba(255, 255, 255, 0.93); box-shadow: 0 12px 34px rgba(31, 31, 36, 0.12); }
.capsule .brand img { height: 40px; width: auto; }
/* wave 4: below 430px the capsule ran out of room and the brand, the only
   shrinkable child, collapsed to a sliver. Compact treatment: logo protected
   at 36px, sep dropped, menu goes glyph-only (label stays in the acc tree). */
@media (max-width: 430px) {
  .capsule { gap: .6rem; padding-left: .95rem; }
  .capsule .sep { display: none; }
  .capsule .brand { flex-shrink: 0; }
  .capsule .brand img { height: 36px; }
  .menu-toggle .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); }
  .capsule .btn { padding: .55rem .95rem; font-size: .875rem; }
}
@media (max-width: 370px) {
  .site-header > .floating-cta { display: none; }
}
.capsule .sep { width: 1px; height: 26px; background: var(--hairline); flex-shrink: 0; }
.capsule nav {
  display: flex; gap: 1.15rem; font-size: .92rem; font-weight: 500; align-items: center;
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .55s var(--ease-exit), opacity .35s var(--ease-hover);
}
.capsule.nav-open nav { max-width: 860px; opacity: 1; }
.capsule nav a { color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease-hover), transform .3s var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.capsule.nav-open nav a { opacity: 1; transform: translateY(0); }
.capsule.nav-open nav a:nth-child(1) { transition-delay: .12s; }
.capsule.nav-open nav a:nth-child(2) { transition-delay: .18s; }
.capsule.nav-open nav a:nth-child(3) { transition-delay: .24s; }
.capsule.nav-open nav a:nth-child(4) { transition-delay: .3s; }
.capsule nav a:hover { color: var(--accent); }
.menu-toggle {
  display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0;
  background: transparent; border: none; cursor: pointer; padding: .4rem .3rem;
  font-family: var(--bfont); font-size: .92rem; font-weight: 500; color: var(--ink);
}
.menu-toggle:hover { color: var(--accent); }
.menu-toggle .glyph { position: relative; width: 16px; height: 16px; }
.menu-toggle .glyph .dots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; transition: opacity .25s var(--ease-hover), transform .35s var(--ease-exit); }
.menu-toggle .glyph .dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.menu-toggle .glyph .x { position: absolute; inset: 0; opacity: 0; transform: rotate(-90deg); transition: opacity .25s var(--ease-hover), transform .35s var(--ease-exit); }
.menu-toggle .glyph .x::before, .menu-toggle .glyph .x::after {
  content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 1.6px; background: currentColor;
}
.menu-toggle .glyph .x::before { transform: rotate(45deg); }
.menu-toggle .glyph .x::after { transform: rotate(-45deg); }
.capsule.nav-open .menu-toggle .dots { opacity: 0; transform: rotate(90deg); }
.capsule.nav-open .menu-toggle .x { opacity: 1; transform: rotate(0); }
.menu-toggle .lbl { position: relative; overflow: hidden; display: inline-block; height: 1.2em; }
.menu-toggle .lbl span { display: block; transition: transform .3s var(--ease-exit); }
.menu-toggle .lbl span:last-child { position: absolute; inset: 0; transform: translateY(110%); }
.capsule.nav-open .menu-toggle .lbl span:first-child { transform: translateY(-110%); }
.capsule.nav-open .menu-toggle .lbl span:last-child { transform: translateY(0); }
.capsule .btn { padding: .6rem 1.15rem; font-size: .9rem; border-radius: 999px; flex-shrink: 0; }
@media (max-width: 860px) {
  .capsule nav {
    position: absolute; top: calc(100% + 10px); left: 0; right: auto; min-width: 230px;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: #FFFFFF; border: 1px solid var(--hairline); border-radius: 18px;
    box-shadow: 0 18px 48px rgba(31, 31, 36, 0.16); padding: .6rem 0;
    max-width: none; white-space: normal; overflow: hidden;
    transform: translateY(-8px); visibility: hidden;
    transition: opacity .3s var(--ease-hover), transform .35s var(--ease-exit), visibility 0s .35s;
  }
  .capsule.nav-open nav { opacity: 1; transform: translateY(0); visibility: visible; transition-delay: 0s; max-width: none; }
  .capsule nav a { width: 100%; padding: .7rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .capsule nav, .capsule nav a, .menu-toggle .glyph .dots, .menu-toggle .glyph .x, .menu-toggle .lbl span { transition: none !important; }
}

/* mobile sticky book bar */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.95); border-top: 1px solid var(--hairline);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--dur-ui) var(--ease-exit), visibility 0s var(--dur-ui);
}
.sticky-cta.show { transform: translateY(0); visibility: visible; transition: transform var(--dur-ui) var(--ease-exit), visibility 0s 0s; }
.sticky-cta .btn { flex: 1; text-align: center; padding: .8rem 0; }
/* wave 7: the booked hour is the doctrine primary, so it takes the width;
   Call stays a full-height thumb target at natural width */
.sticky-cta .btn.ghost { flex: 0 1 auto; min-width: 92px; padding: .8rem 1.05rem; }
@media (max-width: 720px) { .sticky-cta { display: flex; } }

/* wave 7 (BUILD-STANDARDS 7b-5): stacked mobile CTA groups equalize to the
   widest button instead of stacking ragged. The `body` prefix out-specifies
   the page-scoped `.page-hero .cta-row { display: flex }` recipes. */
@media (max-width: 480px) {
  body :is(.hero, .page-hero, .contact-top) .cta-row { display: grid; grid-template-columns:max-content; justify-content: start; }
  body :is(.hero, .page-hero, .contact-top) .cta-row .btn { text-align: center; }
}

/* desktop floating CTA: the capsule's pill button lifts once the header solidifies */
@media (min-width: 721px) {
  .site-header.is-past-hero .floating-cta { box-shadow: 0 8px 22px rgba(193, 37, 88, 0.28); }
  .site-header.is-past-hero .floating-cta:hover { box-shadow: 0 10px 26px rgba(122, 30, 61, 0.34); }
}

/* ── hero: her circuit art, full strength, type-led ─────────── */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: clip; }
.hero .art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero .art .photo {
  position: absolute; inset: -6% 0; background-image: url("images/circuit-texture.webp");
  background-size: cover; background-position: right top; opacity: .95;
  will-change: transform;
}
.hero .art .veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(253,250,244,.94) 0%, rgba(253,250,244,.82) 38%, rgba(253,250,244,.28) 68%, rgba(253,250,244,.05) 100%),
    linear-gradient(180deg, rgba(253,250,244,.1) 55%, rgba(253,250,244,.9) 92%, var(--bg) 100%);
}
.hero .traces { position: absolute; right: -2%; top: 4%; width: 58%; max-width: 900px; height: auto; opacity: .9; }
.hero .traces path { stroke-dasharray: var(--len, 1200); stroke-dashoffset: 0; }
.hero .traces circle, .hero .traces rect { opacity: 1; }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(7rem, 17vh, 12rem); padding-top: 8.5rem; }
.hero .eyebrow-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-text); border: 1px solid var(--gold-hairline); border-radius: 999px;
  background: rgba(253, 250, 244, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: .45rem .95rem; margin-bottom: clamp(1.6rem, 3.4vh, 2.4rem); position: relative; overflow: hidden;
}
.hero .eyebrow-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.hero h1 {
  font-size: clamp(2.7rem, 5.5vw, 4.6rem); line-height: 1.05; letter-spacing: -0.01em;
  margin-bottom: clamp(2rem, 4.6vh, 3.2rem);
  perspective: 600px;
  position: relative;
}
/* wave 3: soft cream halo behind display H1s lifts the type off the circuit
   art. Every carrier declares perspective, so the negative z-index stays
   inside the heading's own stacking context. */
.page-hero h1, .contact-top h1 { position: relative; }
.hero h1::before, .page-hero h1::before, .contact-top h1::before {
  content: ""; position: absolute; z-index: -1; inset: -24% -11%;
  /* The falloff has to REACH transparent inside this box. The previous ellipse
     (88% vertical radius at 55%) only hit zero at ~122% of the box height, so
     the box clipped it at roughly 40% opacity and drew a hard horizontal edge
     across the photo, most visible on the short About heading. These radii
     land the fade at ~7% and ~93% vertically, inside the box, so there is no
     edge to see. */
  background: radial-gradient(ellipse 62% 58% at 34% 50%, rgba(253, 250, 244, 0.88) 0%, rgba(253, 250, 244, 0.5) 42%, rgba(253, 250, 244, 0) 74%);
  pointer-events: none;
}
/* Her tagline lands on "with big dreams." Rows two and three are both accent
   italic, so the payoff read as one continuous crimson block with nothing to
   mark where the promise turns. It gets a shade more scale, a little air above
   it, and a gold rule that draws under it once the words have settled: the
   same hairline-draw idiom the rest of the page uses, so the emphasis is the
   site's own vocabulary rather than an underline. */
.hero h1 .row--payoff {
  /* fit-content rather than inline-block: `.hero h1 .row { display: block }`
     is declared later at equal specificity and would win, leaving the rule
     spanning the whole heading instead of the words. */
  display: block; width: fit-content; position: relative;
  font-size: 1.06em; margin-top: .06em;
}
.hero h1 .row--payoff::after {
  content: ""; position: absolute; left: .04em; right: .12em; bottom: -.1em; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 55%, rgba(224, 187, 98, 0) 100%);
  transform: scaleX(0); transform-origin: left center;
}
html.js-motion .hero.is-entered .row--payoff::after {
  transform: scaleX(1);
  transition: transform 1.15s var(--ease-exit);
  transition-delay: 2.72s;
}
@media (max-width: 860px) {
  .hero h1 .row--payoff { font-size: 1em; margin-top: 0; }
  html.js-motion .hero.is-entered .row--payoff::after { transition-delay: 1.1s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .row--payoff::after { transform: scaleX(1) !important; transition: none !important; }
}
.hero h1 .row { white-space: nowrap; }
@media (max-width: 640px) { .hero h1 .row { white-space: normal; } }
.hero h1 .row { display: block; }
/* Mobile wants four lines that cross the row boundaries: "technology" lives in
   row one and "for" in row two, so the rows have to flow together before the
   breaks can land. The payoff row stays block, because its gold rule is sized
   to that row's own width. The <br> carries no word space, so the space before
   it is kept for the desktop case where the break is hidden. */
.br-m { display: none; }
@media (max-width: 640px) {
  .hero h1 .row:not(.row--payoff) { display: inline; }
  .br-m { display: inline; }
}
.hero .sub { color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 46ch; margin-bottom: clamp(1.5rem, 3vh, 2rem); }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-bottom: 1.1rem; }
.hero .microline { font-size: .88rem; color: var(--muted); }
.hero .chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip-data {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--gold-hairline); border-radius: 4px;
  background: rgba(255, 255, 255, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: .5rem .8rem;
}
.chip-data::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
@media (max-width: 720px) {
  .hero .traces { width: 130%; right: -40%; top: 0; opacity: .55; }
  .hero .art .photo { background-position: 70% top; }
}

/* ── stairs divider (scroll-scrubbed, partial push) ─────────── */
.stairs { display: grid; gap: 0; line-height: 0; }
.stairs span { display: block; height: 14px; transform-origin: left center; transform: scaleX(var(--p, 1)); }
.stairs.to-surface span { background: var(--surface); }
.stairs.to-maroon span { background: var(--accent-deep); }
.stairs.to-blush span { background: var(--blush); }
.stairs.to-ink span { background: var(--ink); }
/* Leaving the dark runs the same steps the other way. The entry divider is ink
   bars anchored LEFT, narrowing downward, so the dark arrives stepping in from
   the left. The exit divider is the same ink bars anchored RIGHT, so the dark
   departs stepping away to the right and the two dividers read as a pair.
   The bars must be the colour of the section they extend, not the one they
   land in: cream bars on the cream page ground are invisible. */
.stairs--rev { justify-items: end; }
.stairs--rev span { transform-origin: right center; }
.stairs span:nth-child(1) { width: 68%; }
.stairs span:nth-child(2) { width: 45%; }
.stairs span:nth-child(3) { width: 22%; }
@media (prefers-reduced-motion: reduce) {
  .stairs span { transform: scaleX(1) !important; }
}

/* ── capability statement (her site, verbatim) ──────────────── */
.capability { background: var(--blush); position: relative; overflow: clip; }
/* The home premise is the only section on the site whose job is to feel bad.
   On the blush ground it read as a pleasant pink panel; on ink the four faults
   land, and the maroon audit band that follows becomes the way out. Scoped:
   the service pages reuse .capability for explanatory copy. */
.capability.is-premise { background: var(--ink); color: #F4EFE9; }
.capability.is-premise .sec-head .label { color: var(--gold); }
.capability.is-premise .sec-head .index { color: rgba(244, 239, 233, .45); }
.capability.is-premise .sec-head { border-color: rgba(244, 239, 233, .16); }
.capability .rails { position: absolute; inset: 0; pointer-events: none; }
.capability .rails i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(122, 30, 61, .07); }
.capability.is-premise .rails i { background: rgba(244, 239, 233, .06); }
.capability .rails i:nth-child(1) { left: 25%; } .capability .rails i:nth-child(2) { left: 50%; } .capability .rails i:nth-child(3) { left: 75%; }
.capability .statement {
  font-family: var(--hfont); font-weight: 600; font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  line-height: 1.08; margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
}
.capability.is-premise .statement { color: #FFFFFF; }
/* Brand crimson is 2.87:1 on ink, under the 3:1 large-text floor. This tint of
   the same hue reads as the accent and clears AA at 4.98:1. */
.capability.is-premise .statement .acc { color: #E0648C; }
.capability .statement .acc { color: var(--accent); }
.capability .offset { margin-left: auto; width: min(100%, 620px); }
.capability .offset p { font-size: 1.12rem; line-height: 1.7; color: var(--ink); }
.capability .offset p + p { margin-top: 1.1rem; color: var(--muted); }
.capability .offset p b { color: var(--accent-deep); }

/* ── framework pillars (her three, verbatim) ────────────────── */
.pillars .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.6vw, 2.2rem); }
.pillar {
  position: relative; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) * 2); padding: clamp(1.5rem, 3vw, 2.2rem);
  translate: 0 0;
  transition: translate var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover);
}
/* wave 3: feature cards lift under the pointer (desktop pointers only).
   The 6px translateY lift rides the separate `translate` property so it
   composes with the reveal system's `transform`, which owns the entrance. */
@media (hover: hover) {
  .pillar.feature-card:hover {
    translate: 0 -6px; /* translateY(-6px) equivalent, reveal-safe */
    box-shadow: 0 18px 40px rgba(31, 31, 36, 0.1), 0 4px 10px rgba(31, 31, 36, 0.05);
    border-color: var(--gold-hairline);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pillar.feature-card:hover { translate: none; }
}
.pillar .num { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; color: var(--gold-text); display: block; margin-bottom: 1rem; }
.pillar .rule { width: 34px; height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: 1.1rem; }
.pillar h3 { font-family: var(--hfont); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.7rem); margin-bottom: .6rem; }
.pillar p { color: var(--muted); font-size: 1rem; line-height: 1.62; }
@media (max-width: 860px) { .pillars .grid { grid-template-columns: 1fr; } }

/* ── offerings ledger (practice-on-paper port: pinned frame, rows as
      equal slots, content slides up inside masked rows, rules draw
      horizontally, divider draws vertically) ─────────────────────── */
.offerings { background: var(--surface); }
.offerings.is-ledger { min-height: 280vh; padding-block: 0; }
.offerings.is-ledger .ledger-sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(5.5rem, 9vh, 6.5rem) clamp(1.6rem, 4vh, 2.6rem);
}
.offerings.is-ledger .ledger-sticky > .wrap {
  display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0;
}
.offerings.is-ledger .sec-head { margin-bottom: clamp(.8rem, 1.8vh, 1.2rem); }
.offerings.is-ledger h2 { font-size: clamp(1.5rem, 2.7vw, 2.05rem); margin-bottom: .3rem; }
.offerings.is-ledger .lede { margin-bottom: clamp(.8rem, 1.8vh, 1.2rem); font-size: 1rem; }
.ledger-frame { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); flex: 1 1 auto; min-height: 320px; border-top: 1px solid var(--hairline); }
.offer-row { --p: 1; position: relative; overflow: hidden; min-height: 0; }
.offer-row .o-rule {
  position: absolute; inset: auto 0 0 0; height: 1px; background: var(--hairline);
  transform: scaleX(var(--p)); transform-origin: left; will-change: transform;
}
.offer-row .o-divide {
  position: absolute; left: 42%; top: 14%; bottom: 14%; width: 1px; background: var(--gold-hairline);
  transform: scaleY(var(--p)); transform-origin: center; will-change: transform;
}
.offer-row .o-clip {
  position: absolute; inset: 0; display: grid; grid-template-columns: 42% 1fr;
  align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem);
  transform: translate3d(0, calc((1 - var(--p)) * 105%), 0); will-change: transform;
}
.offer-row .o-left { display: grid; gap: .3rem; padding-right: clamp(1rem, 2.5vw, 2rem); }
.offer-row .o-left .idx { font-family: var(--mono); font-size: .72rem; color: var(--gold-text); letter-spacing: .1em; }
.offer-row h3 { font-family: var(--hfont); font-weight: 600; font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.08; }
.offer-row .tiers { font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; color: var(--accent-deep); line-height: 1.45; }
.offer-row .o-right { padding-left: clamp(.4rem, 1.5vw, 1.2rem); }
.offer-row .o-right p { color: var(--muted); font-size: 1rem; line-height: 1.5; max-width: 52ch; margin-bottom: .45rem; }
.offer-row .more { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; }
.offer-row .more .arr { display: inline-block; }

/* wave 3: fly-through arrow on every mono link (interactions.md pattern 5:
   exit right, teleport, return, 0.4s, hover pointers only) */
@keyframes arr-fly {
  0% { transform: translateX(0); opacity: 1; }
  38% { transform: translateX(0.85em); opacity: 0; }
  50% { transform: translateX(-0.85em); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@media (hover: hover) {
  a.more:hover .arr, .svc-row:hover .more .arr, .mono-link:hover .arr, .faq-bridge a:hover .arr {
    animation: arr-fly var(--dur-ui) var(--ease-exit);
  }
}
@media (prefers-reduced-motion: reduce) {
  a.more:hover .arr, .svc-row:hover .more .arr, .mono-link:hover .arr, .faq-bridge a:hover .arr { animation: none; }
}
.offerings.is-ledger .bar-wrap { margin-top: clamp(1.1rem, 2.4vh, 1.6rem); }
.offerings.is-ledger .vocab-strip { margin-top: clamp(.8rem, 1.8vh, 1.2rem); justify-content: center; }
/* wave 7: inside the pinned ledger the trust note yields to the locked
   100vh geometry; it shows in the static layout, where mobile converts */
.offerings.is-ledger .bar-note { display: none; }
@media (max-width: 980px), (max-height: 680px) {
  .offerings.is-ledger { min-height: 0; padding-block: clamp(4.5rem, 10vw, 8.5rem); }
  .offerings.is-ledger .ledger-sticky { position: static; height: auto; display: block; padding-block: 0; }
  .offerings.is-ledger .ledger-sticky > .wrap { display: block; height: auto; }
  .ledger-frame { min-height: 0; }
  .ledger-frame { display: block; border-top: 1px solid var(--hairline); }
  .offer-row { overflow: visible; }
  .offer-row .o-clip { position: static; transform: none; grid-template-columns: 1fr; gap: .6rem; padding-block: 1.4rem; }
  .offer-row .o-divide { display: none; }
  .offer-row .o-rule { transform: scaleX(1); }
  .offerings.is-ledger .bar-note { display: block; }
}

/* ── circuit decorations: the hero's line language, sitewide ─── */
.trace-deco { position: absolute; pointer-events: none; z-index: 0; }
/* --len is each path's own measured length, set by site.js. A fixed dash
   constant made every line finish drawing in the first fraction of its
   duration and then sit still for the rest, which is why the draw snapped
   instead of flowing. Driving the dash from the real length means the line
   travels for the whole transition. */
.trace-deco path { fill: none; stroke-dasharray: var(--len, 900); stroke-dashoffset: 0; }
html.js-motion .trace-deco path { stroke-dashoffset: var(--len, 900); }
html.js-motion .trace-deco.is-visible path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset calc(var(--dur, 900) * 1.7ms) cubic-bezier(.25, .6, .35, 1);
  transition-delay: calc(var(--i, 0) * 200ms);
}
html.js-motion .trace-deco circle, html.js-motion .trace-deco rect { opacity: 0; }
html.js-motion .trace-deco.is-visible circle, html.js-motion .trace-deco.is-visible rect {
  opacity: 1; transition: opacity .6s var(--ease-enter);
  transition-delay: calc(.9s + var(--i, 0) * 150ms);
}
.capability .trace-deco { right: 10px; top: 8%; width: clamp(160px, 24vw, 340px); }
.translate .trace-deco { right: 2%; bottom: 6%; width: clamp(150px, 22vw, 320px); opacity: .85; }
.closer .trace-deco { left: 3%; top: 12%; width: clamp(130px, 18vw, 260px); opacity: .7; }
.principles .trace-deco { right: 3%; bottom: 10%; width: clamp(130px, 18vw, 250px); opacity: .8; }
@media (max-width: 720px) { .trace-deco { display: none; } }

/* steps spine: vertical gold trace + node per step */
.steps { position: relative; padding-left: 1.6rem; }
.steps::before {
  content: ""; position: absolute; left: 5px; top: 1.2rem; bottom: 1.2rem; width: 1px;
  background: var(--gold-hairline); transform-origin: top;
}
.step::after {
  content: ""; position: absolute; left: calc(-1.6rem + 1px); top: 1.55rem; width: 9px; height: 9px;
  border-radius: 50%; background: var(--gold); border: 1.5px solid var(--gold-deep);
  transform-origin: center; transform-box: border-box;
}
html.js-motion .steps::before { transform: scaleY(0); }
html.js-motion .steps.is-visible::before { transform: scaleY(1); transition: transform 1.6s var(--ease-enter) .2s; }
html.js-motion .step::after { transform: scale(0); }
html.js-motion .step.is-visible::after { transform: scale(1); transition: transform .5s var(--ease-enter); transition-delay: calc(.3s + var(--i, 0) * 140ms); }
@media (prefers-reduced-motion: reduce) {
  .steps::before, .step::after { transform: none !important; transition: none !important; }
  html.js-motion .trace-deco path { stroke-dashoffset: 0 !important; transition: none !important; }
  html.js-motion .trace-deco circle, html.js-motion .trace-deco rect { opacity: 1 !important; transition: none !important; }
  .offer-row .o-clip, .offer-row .o-rule, .offer-row .o-divide { transform: none !important; }
  .stairs span { transform: scaleX(1) !important; }
}
.vocab-strip {
  margin-top: clamp(1.6rem, 3vw, 2.2rem); font-family: var(--mono); font-size: .78rem;
  letter-spacing: .08em; color: var(--muted); text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: baseline;
  justify-content: center; text-align: center;
}
/* The label takes a full row so the lane links always land together on the line
   underneath it, centred, on every page that carries the strip. */
.vocab-strip > span:first-child { flex: 0 0 100%; margin-bottom: .1rem; }
.vocab-strip a { color: var(--muted); border-bottom: 1px solid var(--gold-hairline); padding-bottom: 2px; }
.vocab-strip a:hover { color: var(--accent); }
/* ── answer capsule: balanced two-column editorial ──────────── */
.capsule-answer { background: var(--surface); }
.capsule-answer .cols { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.capsule-answer h2.q { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; margin-bottom: 1.2rem; }
.capsule-answer .q-rule { width: 64px; height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: 1.1rem; }
.capsule-answer .q-note { font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.capsule-answer .big {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.48; font-weight: 400;
  letter-spacing: -0.01em; color: var(--ink);
}
.capsule-answer .big strong { font-weight: 600; color: var(--accent-deep); }
@media (max-width: 860px) { .capsule-answer .cols { grid-template-columns: 1fr; } }

/* ── sound familiar ─────────────────────────────────────────── */
.familiar { background: var(--blush); position: relative; overflow: clip; }
.familiar .rails { position: absolute; inset: 0; pointer-events: none; }
.familiar .rails i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(122, 30, 61, .07); }
.familiar .rails i:nth-child(1) { left: 25%; } .familiar .rails i:nth-child(2) { left: 50%; } .familiar .rails i:nth-child(3) { left: 75%; }
.familiar .line {
  font-family: var(--hfont); font-weight: 500; font-style: italic;
  font-size: clamp(1.6rem, 3.8vw, 2.6rem); line-height: 1.18; max-width: 24ch;
}
.familiar .line + .line { margin-top: clamp(1.2rem, 2.6vw, 1.9rem); }
.familiar .line:nth-of-type(2) { margin-left: clamp(0rem, 8vw, 7rem); }
.familiar .line:nth-of-type(3) { margin-left: clamp(0rem, 16vw, 14rem); }
.familiar .line .tick { color: var(--accent); font-style: normal; }
.familiar .turn { max-width: 56ch; font-size: 1.12rem; margin-top: clamp(2rem, 4vw, 3rem); }
.familiar .turn b { color: var(--accent-deep); }

/* ── services: ruled editorial list + rails ─────────────────── */
.services { position: relative; }
.services .rails { position: absolute; inset: 0; pointer-events: none; }
.services .rails i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(31, 31, 36, .05); }
.services .rails i:nth-child(1) { left: 33%; } .services .rails i:nth-child(2) { left: 66%; }
.svc-row {
  position: relative; display: grid; grid-template-columns: auto 1fr 1.2fr auto; gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center; padding-block: clamp(1.4rem, 2.6vw, 1.9rem); text-decoration: none;
}
.svc-row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hairline); transform-origin: left; }
.svc-row:last-of-type::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--hairline); }
.svc-row .idx { font-family: var(--mono); font-size: .78rem; color: var(--gold-text); letter-spacing: .08em; }
.svc-row h3 { font-family: var(--hfont); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--ink); transition: color var(--dur-hover) var(--ease-hover), transform var(--dur-hover) var(--ease-hover); }
.svc-row p { color: var(--muted); font-size: 1rem; max-width: 44ch; }
.svc-row .more { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--accent); white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
.svc-row .more .arr { display: inline-block; }
@media (hover: hover) {
  .svc-row:hover h3 { color: var(--accent); transform: translateX(.6rem); }
}
@media (max-width: 860px) {
  .svc-row { grid-template-columns: auto 1fr auto; }
  .svc-row p { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 480px) {
  .svc-row { grid-template-columns: auto 1fr; }
  .svc-row p { grid-column: 1 / -1; grid-row: 2; max-width: 100%; }
  .svc-row .more { grid-column: 1 / -1; grid-row: 3; white-space: normal; }
}

/* ── how it works ───────────────────────────────────────────── */
.how { background: var(--bg); }
.how .grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.steps { display: grid; }
.step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.15rem; align-items: baseline; padding-block: 1.25rem; }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hairline); transform-origin: left; }
.step .num { font-family: var(--mono); font-weight: 600; font-size: .8rem; letter-spacing: .1em; color: var(--accent); }
.step h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: .15rem; }
.step p { color: var(--muted); font-size: 1rem; max-width: 52ch; }
.matrix-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: calc(var(--radius) * 2);
  padding: clamp(1.2rem, 2.5vw, 1.8rem); position: sticky; top: 96px;
}
.matrix-card figcaption { font-size: .88rem; color: var(--muted); margin-top: .9rem; line-height: 1.55; }
.matrix-card svg { width: 100%; height: auto; }
.matrix-card .dot { transform-origin: center; transform-box: fill-box; }
html.js-motion .matrix-card .dot { transform: scale(0); }
html.js-motion .matrix-card.is-visible .dot {
  transform: scale(1);
  transition: transform .6s var(--ease-enter);
  transition-delay: calc(.15s + var(--d, 0) * 120ms);
}
@media (max-width: 860px) { .how .grid { grid-template-columns: 1fr; } .matrix-card { position: static; } }

/* ── maroon color block: plain english (OCI color-block) ────── */
.translate { background: var(--accent-deep); color: #FBEFF0; position: relative; }
.translate h2 { color: #FFFFFF; }
.translate .lede { color: rgba(251, 239, 240, .78); }
.translate .t-row {
  position: relative; display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: baseline; padding-block: clamp(1.3rem, 2.6vw, 1.8rem);
}
.translate .t-row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(224, 187, 98, .34); transform-origin: left; }
.translate .t-row:last-of-type::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: rgba(224, 187, 98, .34); }
.translate .term { font-family: var(--hfont); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--gold); }
.translate .plain { color: rgba(251, 239, 240, .85); font-size: 1.05rem; }
.translate .plain b { color: #FFFFFF; font-weight: 600; }
@media (max-width: 720px) { .translate .t-row { grid-template-columns: 1fr; gap: .3rem; } }

/* ── meet lexi: image wipe reveal (Halston) ─────────────────── */
.meet { background: var(--surface); }
.meet .grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.meet .photo { position: relative; border-radius: calc(var(--radius) * 2); overflow: hidden; }
.meet .photo img { transform: scale(1); transition: transform 1.4s var(--ease-enter); }
html.js-motion .meet .photo img { transform: scale(1.18); }
html.js-motion .meet .photo.is-visible img { transform: scale(1); }
.meet .photo .wipe { position: absolute; inset: 0; background: var(--champagne); transform: scaleX(1); transform-origin: right; }
html.js-motion .meet .photo.is-visible .wipe { transform: scaleX(0); transition: transform 1s var(--ease-exit) .05s; }
.meet .photo-frame { position: relative; }
.meet .photo-frame::after {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  border: 1px solid var(--gold-hairline); border-radius: calc(var(--radius) * 2);
  pointer-events: none;
}
/* wave 4: framed-image treatment. A soft maroon-tinted glow lifts the portrait
   off the surface; the inner gold ring rides an overlay so it paints above the
   photo. Same vocabulary on every framed image sitewide. */
.meet .photo.image-frame {
  box-shadow: 0 18px 44px rgba(122, 30, 61, 0.13), 0 6px 18px rgba(31, 31, 36, 0.07);
}
.meet .photo.image-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(224, 187, 98, 0.42);
  pointer-events: none; z-index: 1;
}
.meet p { margin-bottom: 1.05rem; max-width: 58ch; }
.meet p:last-of-type { margin-bottom: 0; }
.ledger { margin-top: 1.8rem; display: grid; }
.ledger li { list-style: none; position: relative; display: flex; gap: .7rem; align-items: baseline; padding-block: .72rem; font-size: .96rem; }
.ledger li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hairline); transform-origin: left; }
.ledger li::before { content: "✦"; color: var(--gold-deep); font-size: .8rem; }
@media (max-width: 860px) { .meet .grid { grid-template-columns: 1fr; } .meet .photo-frame { max-width: 420px; } }

/* ── stat row: display-face numerals, accent bars, small labels (wave 2) ─ */
.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 3.5vw, 3rem);
  margin-top: clamp(2.8rem, 5vw, 4.2rem); padding-top: clamp(1.9rem, 3vw, 2.6rem);
  border-top: 1px solid var(--hairline);
}
.stat { display: flex; flex-direction: column; gap: .6rem; }
.stat-bar { width: 30px; height: 2px; background: var(--accent); border-radius: 1px; }
.stat .num {
  font-family: var(--hfont); font-weight: 600; font-size: clamp(2.1rem, 3.2vw, 2.8rem);
  line-height: 1; color: var(--ink); font-variant-numeric: lining-nums;
}
.stat .num em { font-style: italic; color: var(--accent); font-size: .6em; }
.stat-label { font-size: .9rem; color: var(--muted); line-height: 1.5; max-width: 26ch; }
@media (max-width: 860px) { .stat-row { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1.4rem; } }
@media (max-width: 400px) { .stat-row { grid-template-columns: 1fr; } }

/* ── who it's for ───────────────────────────────────────────── */
.who .grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.who .sticky { position: static; }
.who .stage { position: relative; padding-block: 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline; }
.who .stage::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hairline); transform-origin: left; }
.who .stage:last-of-type::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--hairline); }
.who .stage .num { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--gold-text); }
/* wave 3: audience rows reward attention. The top hairline re-draws as a
   crimson-to-gold bar and the index glyph morphs to the accent. */
.stage.audience-card .num { transition: color var(--dur-hover) var(--ease-hover); }
.stage.audience-card::before {
  background-image: linear-gradient(90deg, var(--accent), var(--gold));
  background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size 0.55s var(--ease-hover), height var(--dur-hover) var(--ease-hover);
}
@media (hover: hover) {
  .stage.audience-card:hover::before { background-size: 100% 100%; height: 2px; }
  .stage.audience-card:hover .num { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .stage.audience-card::before { transition: none; }
}
/* post-reveal handoff: keep the .draw entrance timing on transform while the
   hover sweep owns background-size and height (out-specifies the generic
   .draw.is-visible transition so the bar animates instead of snapping) */
html.js-motion .stage.audience-card.draw.is-visible::before {
  transition: transform 0.9s var(--ease-exit) calc(var(--i, 0) * 80ms),
    background-size 0.55s var(--ease-hover),
    height var(--dur-hover) var(--ease-hover);
}
/* same handoff for pillar cards: entrance keeps the reveal timing on
   opacity and transform; translate, shadow, and border answer the pointer */
html.js-motion .pillar.feature-card.is-visible {
  transition: opacity var(--dur-reveal) var(--ease-enter) calc(var(--i, 0) * 80ms),
    transform var(--dur-reveal) var(--ease-enter) calc(var(--i, 0) * 80ms),
    translate var(--dur-hover) var(--ease-hover),
    box-shadow var(--dur-hover) var(--ease-hover),
    border-color var(--dur-hover) var(--ease-hover);
}
.who .stage h3 { font-family: var(--hfont); font-weight: 600; font-size: 1.55rem; margin-bottom: .35rem; }
.who .stage p { color: var(--muted); font-size: 1rem; max-width: 50ch; }
.who .closer-line { margin-top: 1.4rem; font-weight: 600; color: var(--accent-deep); }
@media (max-width: 860px) { .who .grid { grid-template-columns: 1fr; } }

/* ── AI principles: champagne band, gold frame ──────────────── */
.principles { position: relative; overflow: clip; background: var(--champagne); border-block: 1px solid var(--gold-hairline); }
.principles .grid { display: grid; grid-template-columns: 1fr .94fr; gap: clamp(1.6rem, 3.4vw, 3.1rem); align-items: start; }
.principles ul { display: grid; gap: .9rem; }
.principles li { list-style: none; display: flex; gap: .75rem; align-items: baseline; font-size: 1.08rem; font-weight: 500; }
.principles li::before { content: ""; width: 22px; height: 1px; background: var(--gold-deep); flex-shrink: 0; transform: translateY(-4px); }
.principles .bigline { font-family: var(--hfont); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.12; }
.principles .bigline .acc { color: var(--accent); }
@media (max-width: 860px) { .principles .grid { grid-template-columns: 1fr; } }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq details { position: relative; }
.faq details::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hairline); transform-origin: left; }
.faq details:last-of-type::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--hairline); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center;
  padding-block: 1.3rem; font-family: var(--hfont); font-weight: 600; font-size: clamp(1.4rem, 2.5vw, 1.65rem);
}
/* The FAQ questions ARE headings, so they are marked up as h3. Inside the
   summary's flex row they must carry none of h3's own type or spacing: the
   summary already sets the family, weight and size. Marking them up this way
   is also what lets an answer engine, and our own grader, see them as
   question headings at all. */
.faq summary .faq-q { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mark {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline); position: relative;
  transition: border-color var(--dur-hover) var(--ease-hover);
}
.faq summary:hover .mark, .faq details[open] summary .mark { border-color: var(--accent); }
.faq summary .mark::before, .faq summary .mark::after {
  content: ""; position: absolute; background: var(--accent); top: 50%; left: 50%;
  transition: transform var(--dur-hover) var(--ease-hover);
}
.faq summary .mark::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.faq summary .mark::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.faq details[open] summary .mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq .answer { color: var(--muted); max-width: 68ch; padding-bottom: 1.35rem; font-size: 1.02rem; }
/* wave 7: FAQ exit ramp. The list of answers ends with a way to ask the one
   that is not listed; same mono-link vocabulary as the rest of the site. */
/* A second way into the report, under the three answers: a reader who came for
   reassurance should not have to scroll back up to act on it. */
.faq-start { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); display: grid; justify-items: start; gap: .7rem; }
.faq-start .microline { font-size: .88rem; color: var(--muted); }
.faq .faq-bridge {
  margin-top: 1.5rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .08em;
  color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline;
}
.faq .faq-bridge a { color: var(--accent); display: inline-flex; gap: .4rem; align-items: baseline; white-space: nowrap; padding-block: .8rem; margin-block: -.8rem; }
.faq .faq-bridge a:hover { color: var(--accent-deep); }
.faq .faq-bridge .arr { display: inline-block; }

/* ── curtain closer + footer (Halston reveal-from-behind) ───── */
main { position: relative; z-index: 2; background: var(--bg); box-shadow: 0 30px 60px rgba(31, 31, 36, .18); }
.curtain { position: sticky; bottom: 0; z-index: 1; }
/* The reveal needs the whole curtain to fit under the viewport. Where it cannot
   (phones; short desktop windows), sticky pins the closer permanently off-screen,
   so the curtain joins normal flow and the closer scrolls into view like any section. */
@media (max-width: 720px), (max-height: 860px) { .curtain { position: static; } }
.closer {
  position: relative; overflow: clip;
  background: linear-gradient(155deg, var(--accent-deep) 0%, #5C142D 100%);
  color: #FBEFF0; text-align: center;
  padding-block: clamp(10rem, 24vh, 14rem) clamp(3rem, 8vh, 5rem);
}
.closer .motto { font-family: var(--hfont); font-weight: 600; font-size: clamp(2.2rem, 5.4vw, 3.8rem); line-height: 1.1; margin-bottom: 1.1rem; color: #FFFFFF; }
.closer .motto em { font-style: italic; color: var(--gold); }
.closer p { max-width: 54ch; margin-inline: auto; margin-bottom: 1.7rem; color: rgba(251, 239, 240, .85); }
.closer .btn { background: #FFFFFF; color: var(--accent-deep); box-shadow: none; }
.closer .btn:hover { background: var(--gold); color: var(--ink); }
.closer .reach { margin-top: 1.3rem; font-size: .95rem; }
.closer .reach a { color: var(--gold); transition: color var(--dur-hover) var(--ease-hover); }
.closer .reach a:hover { color: #FFFFFF; }
.site-footer { background: #2A0E1B; color: rgba(251, 239, 240, .8); padding-block: 2rem 1.6rem; font-size: .9rem; }
.site-footer a { color: rgba(251, 239, 240, .92); }
.site-footer a:hover { color: var(--gold); }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 1.6rem 2.5rem; justify-content: space-between; align-items: flex-start; margin-bottom: 1.4rem; }
.site-footer .brandcol img { height: 46px; width: auto; margin-bottom: .7rem; }
.site-footer .brandcol p { max-width: 34ch; font-size: .9rem; }
.site-footer h3 { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; }
.site-footer ul { list-style: none; display: grid; gap: .4rem; }
.site-footer .legal { border-top: 1px solid rgba(224, 187, 98, .25); padding-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .875rem; }
@media (max-height: 760px) { .closer { padding-block: 7.5rem 2rem; } .closer .motto { font-size: clamp(1.9rem, 4.6vw, 2.6rem); } }
/* static-flow closer on phones: the reveal stage pad is unnecessary in normal flow */
@media (max-width: 720px) { .closer { padding-block: 5rem 3rem; } }
/* clear the sticky mobile CTA bar so the legal row stays readable at page end
   (wave 8 note: the bar now also yields entirely while the curtain is in view,
   so the closer CTA can never sit under it at any viewport height) */
/* A break that reads as a deliberate turn on a wide line becomes an orphan on
   a narrow one, where the sentence already wraps on its own. */
@media (max-width: 860px) { br.br-wide { display: none; } }

/* The mobile footer was a ragged flex wrap: space-between pushed Services and
   Praxis apart by an arbitrary 81px, then the two long-label groups took rows
   of their own at unrelated widths, so nothing shared a left edge. It is a
   real grid on small screens: the brand spans, the two short-label groups pair
   into even columns, and the groups whose labels run long (Industries &
   Guides, and Reach Lexi with its full email address) span the width so they
   never have to wrap inside a half column. Child order is brand, Services,
   Praxis, Industries & Guides, Reach Lexi. */
@media (max-width: 720px) {
  .site-footer .cols {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.9rem 1.3rem; align-items: start;
  }
  .site-footer .cols > .brandcol,
  .site-footer .cols > :nth-child(4),
  .site-footer .cols > :nth-child(5) { grid-column: 1 / -1; }
  .site-footer .brandcol p { max-width: none; }
}
@media (max-width: 720px) { .site-footer { padding-bottom: 6.5rem; } }

/* ── motion: js-motion gate + reduced-motion bailout ────────── */
html.js-motion .reveal, html.js-motion [data-reveal] { opacity: 0; transform: translateY(22px); }
html.js-motion .reveal.is-visible, html.js-motion [data-reveal].is-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-reveal) var(--ease-enter), transform var(--dur-reveal) var(--ease-enter);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* hairline draw-ins */
html.js-motion .draw::before, html.js-motion .draw::after,
html.js-motion .draw .ledger li::after { transform: scaleX(0); }
html.js-motion .draw.is-visible::before, html.js-motion .draw.is-visible::after,
html.js-motion .draw.is-visible .ledger li::after {
  transform: scaleX(1);
  transition: transform .9s var(--ease-exit);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* Catalyst word-mask: words rise with rotateY under perspective */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: .12em; margin-block: -.12em; padding-inline: .08em; margin-inline: -.08em; }
.w > span { display: inline-block; will-change: transform; }
html.js-motion .w > span { transform: translateY(115%) rotateY(-18deg); transform-origin: 50% 100%; }
html.js-motion .is-entered .w > span, html.js-motion .w.is-visible > span {
  transform: translateY(0) rotateY(0);
  transition: transform var(--dur-hero) var(--ease-enter);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* hero support elements enter after the words */
html.js-motion .hero .eyebrow-pill, html.js-motion .hero .sub, html.js-motion .hero .cta-row,
html.js-motion .hero .microline, html.js-motion .hero .chips { opacity: 0; transform: translateY(16px); }
html.js-motion .hero.is-entered .eyebrow-pill, html.js-motion .hero.is-entered .sub,
html.js-motion .hero.is-entered .cta-row, html.js-motion .hero.is-entered .microline,
html.js-motion .hero.is-entered .chips {
  opacity: 1; transform: translateY(0);
  transition: opacity .9s var(--ease-enter), transform .9s var(--ease-enter);
}
html.js-motion .hero.is-entered .sub { transition-delay: .5s; }
html.js-motion .hero.is-entered .cta-row { transition-delay: .62s; }
html.js-motion .hero.is-entered .microline { transition-delay: .74s; }
html.js-motion .hero.is-entered .chips { transition-delay: .86s; }

/* The circuitry leads the copy on desktop, where it is the full-strength
   graphic and the moment actually reads. On phones the traces are a faint
   background wash (opacity .55, pushed off-frame at 130% width), so holding the
   headline behind something barely visible buys nothing; mobile keeps the
   snappy entrance. Note this is a DESIGN call, not a performance one: measured
   both ways, mobile scored 88/2.9s with the hold and 87/3.0s without it, so the
   hold was not moving the number either way. */
@media (min-width: 861px) {
  html.js-motion .hero.is-entered .w > span { transition-delay: calc(1.5s + var(--i, 0) * 90ms); }
  html.js-motion .hero.is-entered .eyebrow-pill { transition-delay: 1.36s; }
  html.js-motion .hero.is-entered .sub { transition-delay: 2.1s; }
  html.js-motion .hero.is-entered .cta-row { transition-delay: 2.24s; }
  html.js-motion .hero.is-entered .microline { transition-delay: 2.36s; }
  html.js-motion .hero.is-entered .chips { transition-delay: 2.48s; }
}

/* circuit traces draw on load */
html.js-motion .hero .traces path { stroke-dashoffset: var(--len, 1200); }
/* The circuitry leads the page: the traces flow in first, their nodes light as
   each run lands, and only then does the hero copy arrive. Duration comes from
   each path's own measured length so the line travels the whole time rather
   than finishing early and holding. */
html.js-motion .hero.is-staged .traces path,
html.js-motion .hero.is-entered .traces path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset calc(var(--dur, 900) * 1ms) cubic-bezier(.25, .6, .35, 1);
  transition-delay: calc(.12s + var(--i, 0) * 100ms);
}
html.js-motion .hero .traces circle, html.js-motion .hero .traces rect { opacity: 0; }
html.js-motion .hero.is-staged .traces circle, html.js-motion .hero.is-staged .traces rect,
html.js-motion .hero.is-entered .traces circle, html.js-motion .hero.is-entered .traces rect {
  opacity: 1; transition: opacity .6s var(--ease-enter);
  transition-delay: calc(.86s + var(--i, 0) * 100ms);
}

/* header entrance */
html.js-motion .site-header { opacity: 0; transform: translateY(-18px); }
html.js-motion .site-header.is-entered {
  opacity: 1; transform: translateY(0);
  transition: opacity 1.2s var(--ease-enter), transform 1.2s var(--ease-enter);
  transition-delay: .65s;
}

/* The intro already supplies the long opening beat. During its dissolve, the
   hero and capsule answer promptly so the handoff feels continuous instead of
   beginning a second entrance sequence after the first one ends. */
html.js-motion.has-brand-intro .site-header.is-entered {
  transition-duration: .72s;
  transition-delay: 0s;
}
html.js-motion.has-brand-intro .site-header { transform: none; }
html.js-motion.has-brand-intro .hero.is-entered .w > span {
  transition-duration: .62s;
  transition-delay: calc(.48s + var(--i, 0) * 30ms);
}
html.js-motion.has-brand-intro .hero.is-entered .eyebrow-pill { transition-duration: .72s; transition-delay: .4s; }
html.js-motion.has-brand-intro .hero.is-entered .sub { transition-duration: .72s; transition-delay: .68s; }
html.js-motion.has-brand-intro .hero.is-entered .cta-row { transition-duration: .72s; transition-delay: .76s; }
html.js-motion.has-brand-intro .hero.is-entered .microline { transition-duration: .72s; transition-delay: .84s; }
html.js-motion.has-brand-intro .hero.is-entered .chips { transition-duration: .72s; transition-delay: .9s; }
html.js-motion.has-brand-intro .hero.is-entered .row--payoff::after { transition-delay: .96s; }

@media (prefers-reduced-motion: reduce) {
  html.js-motion .reveal, html.js-motion [data-reveal], html.js-motion .w > span,
  html.js-motion .hero .eyebrow-pill, html.js-motion .hero .sub, html.js-motion .hero .cta-row,
  html.js-motion .hero .microline, html.js-motion .hero .chips,
  html.js-motion .site-header, html.js-motion .meet .photo img,
  html.js-motion .matrix-card .dot {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  /* wipe bailout resolves to its END state (cleared), so the photo stays visible */
  html.js-motion .meet .photo .wipe { transform: scaleX(0) !important; transition: none !important; }
  html.js-motion .hero .traces path { stroke-dashoffset: 0 !important; transition: none !important; }
  html.js-motion .hero .traces circle, html.js-motion .hero .traces rect { opacity: 1 !important; transition: none !important; }
  html.js-motion .draw::before, html.js-motion .draw::after, html.js-motion .draw .ledger li::after { transform: scaleX(1) !important; }
  .stairs span { transform: scaleX(1) !important; }
  .hero .art .photo { transform: none !important; }
}

/* ── wave 8: 44px tap floors (padding grows the touch area; matching negative
   margins keep rendered geometry unchanged, so the locked compositions hold) ── */
a.more, .svc-row .more, .offer-row .more, .mono-link {
  padding-block: .72rem; margin-block: -.72rem;
}
.capsule .brand { padding-block: .3rem; margin-block: -.3rem; }
.menu-toggle { min-width: 44px; min-height: 44px; justify-content: center; margin-block: -.5rem; }
@media (max-width: 860px) {
  .capsule .btn { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 720px) {
  .site-footer ul { gap: 0; }
  .site-footer ul a { display: inline-block; padding-block: .7rem; }
  .site-footer .legal a { display: inline-block; padding: .85rem .3rem; margin: -.45rem -.3rem; }
}

/* ── wave 8: print sanity. Chrome off, every motion state resolved to its end,
   dark grounds released so nothing prints white-on-white. ── */
@media print {
  * { transition: none !important; animation: none !important; }
  .brand-intro, .site-header, .sticky-cta, .stairs, .faq-bridge { display: none !important; }
  .curtain { position: static !important; }
  html.js-motion .reveal, html.js-motion [data-reveal], html.js-motion .site-header,
  html.js-motion .hero .eyebrow-pill, html.js-motion .hero .sub, html.js-motion .hero .cta-row,
  html.js-motion .hero .microline, html.js-motion .hero .chips,
  html.js-motion .pillar.feature-card {
    opacity: 1 !important; transform: none !important;
  }
  html.js-motion .w > span { transform: none !important; }
  html.js-motion .draw::before, html.js-motion .draw::after,
  html.js-motion .draw .ledger li::after { transform: scaleX(1) !important; }
  html.js-motion .steps::before { transform: scaleY(1) !important; }
  html.js-motion .step::after, html.js-motion .matrix-card .dot { transform: scale(1) !important; }
  html.js-motion .meet .photo img { transform: none !important; }
  html.js-motion .meet .photo .wipe { transform: scaleX(0) !important; }
  html.js-motion .trace-deco path { stroke-dashoffset: 0 !important; }
  html.js-motion .trace-deco circle, html.js-motion .trace-deco rect { opacity: 1 !important; }
  [data-offer-ledger] .offer-row, [data-offer-ledger] .offer-row * { transform: none !important; opacity: 1 !important; }
  .offerings.is-ledger .ledger-frame { position: static !important; height: auto !important; }
  .closer, .site-footer { background: none !important; }
  .closer, .closer *, .site-footer, .site-footer * { color: #1F1F24 !important; }
  .closer .btn { border: 1.5px solid #1F1F24; }
}

/* ── §7c mobile patterns + skip link (final-launch-audit, step 4) ─────────── */
a, button, input, select, textarea, summary { touch-action: manipulation; }
#primary-nav { overscroll-behavior: contain; }
html { overscroll-behavior-x: none; }

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 300;
  background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: .85rem; letter-spacing: .06em;
  padding: .65rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

/* ── field frames: documentary imagery inside the circuit system ──────────
   The client's world, photographed plainly, then pulled into the brand: warm
   archival monochrome with a maroon wash, the sitewide offset gold ring, a
   champagne wipe reveal, and a drawn trace that plugs the frame into the page.
   One band per page at most. Same vocabulary as the framed portrait (wave 4). */
/* The note's heading lines up with the circuit line that arrives over the
   photograph, so the two read as one connected object rather than a caption
   floating beside a picture. */
.field-band {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.8rem, 4.5vw, 4rem); align-items: start;
}
.field-note { margin-top: var(--field-note-offset, -2.2rem); }

/* Phrases that must never split across a line break. */
.nowrap { white-space: nowrap; }
@media (max-width: 860px) { .field-note { margin-top: 0; } }
.field-band.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.field-band.flip .field-fig { order: 2; }
.field-fig { position: relative; margin: 0; }
.field-frame { position: relative; }
.field-frame .clip {
  position: relative; overflow: hidden; border-radius: calc(var(--radius) * 2);
  background: var(--champagne);
}
.field-frame .clip img {
  display: block; width: 100%; height: auto;
  filter: grayscale(1) sepia(.22) contrast(1.02) brightness(1.04);
  transform: scale(1); transition: transform 1.4s var(--ease-enter);
}
.field-frame .clip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(122, 30, 61, .30) 0%, rgba(122, 30, 61, .10) 48%, rgba(224, 187, 98, .14) 100%);
  mix-blend-mode: multiply;
  border-radius: calc(var(--radius) * 2);
  box-shadow: inset 0 0 0 1px rgba(31, 31, 36, .10);
}
.field-frame::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 1px solid var(--gold-hairline); border-radius: calc(var(--radius) * 2);
  pointer-events: none;
}
.field-frame .wipe { position: absolute; inset: 0; background: var(--champagne); transform: scaleX(1); transform-origin: right; z-index: 2; }
html.js-motion .field-frame .clip img { transform: scale(1.14); }
html.js-motion .field-frame.is-visible .clip img { transform: scale(1); }
html.js-motion .field-frame.is-visible .wipe { transform: scaleX(0); transition: transform 1s var(--ease-exit) .05s; }
.field-fig .trace-deco { z-index: 2; }
/* End nodes sit ON the viewBox edge by design, so the line reads as arriving
   from off-frame. SVG defaults to overflow:hidden, which sliced every one of
   those dots in half; the section's own overflow still bounds them. */
.trace-deco, .page-hero.has-photo .art .traces { overflow: visible; }
/* Those traces are positioned to bleed just past their figure, which at tablet
   widths pushed the page a few pixels wider than the viewport. The section
   bounds them: the bleed still reads, the page stops scrolling sideways. */
.field-sec { overflow: clip; }
.field-cap {
  display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.45rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-text);
}
.field-cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; margin-top: .32em; }
.field-note h2, .field-note h3 { margin-bottom: .9rem; }
.field-note p + p { margin-top: .85rem; }
@media (max-width: 860px) {
  .field-band, .field-band.flip { grid-template-columns: 1fr; gap: 1.9rem; }
  .field-band.flip .field-fig { order: 0; }
  .field-frame::after { inset: 10px -10px -10px 10px; }
}

/* ── pain grid: the bruise, skimmable (operator direction, addendum wave B) ── */
.pain-kicker {
  font-size: 1.12rem; line-height: 1.6; color: var(--muted); max-width: 52ch;
  margin-bottom: clamp(1.6rem, 3vh, 2.2rem);
}
.pain-kicker::after {
  content: ""; display: block; width: 64px; height: 2px; margin-top: 1.1rem;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.pain-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.pain-card {
  background: rgba(244, 239, 233, .045); border: 1px solid rgba(244, 239, 233, .12);
  border-radius: calc(var(--radius) * 2); padding: clamp(1.5rem, 2.6vw, 2rem);
  display: flex; flex-direction: column; gap: .65rem; position: relative; overflow: clip;
}
.pain-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
}
.pain-card h3 { font-size: 1.2rem; font-weight: 650; line-height: 1.3; color: #FFFFFF; }
.pain-card p { color: rgba(244, 239, 233, .72); font-size: .96rem; line-height: 1.6; }

/* Each fault is numbered, and the circuit line across the top of the card is
   SEVERED: the site's own motif for a working system, broken. That is the
   signal that these four are faults and not features. */
.pain-card .fault-no {
  position: absolute; top: clamp(1.5rem, 2.6vw, 2rem); right: clamp(1.5rem, 2.6vw, 2rem);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  color: rgba(244, 239, 233, .32);
}
.pain-card .fault {
  display: flex; align-items: center; gap: 7px; width: 78px; margin-bottom: .35rem;
}
.pain-card .fault i { display: block; height: 1px; background: var(--gold-deep); }
.pain-card .fault i:first-child { width: 26px; }
.pain-card .fault i:last-child { width: 20px; opacity: .45; }
/* This one deliberately breaks the palette. Everywhere else the accent is the
   brand crimson; on a severed circuit run it reads as decoration rather than a
   fault, so the break node goes to a true alarm red and glows. It is the only
   place on the site that uses this colour, which is the point. */
.pain-card .fault b {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: #FF4438;
  box-shadow: 0 0 0 3px rgba(255, 68, 56, .20), 0 0 10px 2px rgba(255, 68, 56, .55);
}
html.js-motion .pain-card.is-visible .fault b { animation: faultPulse 2.6s ease-in-out infinite; }
@keyframes faultPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 68, 56, .18), 0 0 8px 2px rgba(255, 68, 56, .45); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 68, 56, .10), 0 0 18px 6px rgba(255, 68, 56, .8); }
}
@media (prefers-reduced-motion: reduce) {
  html.js-motion .pain-card.is-visible .fault b { animation: none; }
}
.capability.is-premise .pain-kicker { color: rgba(244, 239, 233, .78); }
.pain-card .fix {
  margin-top: auto; padding-top: .5rem; font-family: var(--mono); font-size: .73rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text);
  text-decoration: none; border-bottom: none; align-self: flex-start;
}
.pain-card .fix:hover { color: var(--accent); }
@media (max-width: 760px) { .pain-grid { grid-template-columns: 1fr; } }

/* ── dictionary entries: the definition, as the dictionary would set it ── */
.dict-entry {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) * 2); padding: clamp(1.6rem, 3vw, 2.4rem);
  position: relative; max-width: 660px;
}
.dict-entry::after {
  content: ""; position: absolute; inset: 12px -12px -12px 12px;
  border: 1px solid var(--gold-hairline); border-radius: calc(var(--radius) * 2);
  pointer-events: none;
}
.dict-entry .hw-row { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.dict-entry .headword {
  font-family: var(--hfont); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.12; color: var(--ink);
}
.dict-entry .pos { font-style: italic; font-size: .92rem; color: var(--gold-text); }
.dict-entry .pron { font-family: var(--mono); font-size: .8rem; letter-spacing: .02em; color: var(--muted); margin-top: .4rem; }
.dict-entry ol { margin: 1.1rem 0 0; padding-left: 1.5rem; display: grid; gap: .7rem; }
.dict-entry ol li { line-height: 1.6; }
.dict-entry ol li::marker { color: var(--gold-text); font-family: var(--mono); font-size: .85em; }
.dict-entry .ety {
  margin-top: 1.2rem; padding-top: .95rem; border-top: 1px solid var(--gold-hairline);
  font-size: .88rem; font-style: italic; color: var(--muted);
}
.dict-sec .wrap { display: flex; justify-content: center; }
.capsule-answer .dict-entry { margin-top: clamp(1.8rem, 3.5vh, 2.6rem); }

/* ── vocab strip, stacked + centered variant ── */
.vocab-strip.stacked { flex-direction: column; align-items: center; text-align: center; gap: .9rem; }
.vocab-strip.stacked .links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.1rem; }

/* ── footer attribution: the LocalCraft word always carries the accent ──
   (crimson fails contrast on the maroon curtain; gold is the accent that reads) */
.site-footer .legal a[href*="localcraftdigital.com"] { color: var(--gold); }
.site-footer .legal a[href*="localcraftdigital.com"]:hover { color: #FFFFFF; }

/* ── services flyout: the capsule grows a second story ──────── */
.nav-svc { display: inline-flex; align-items: center; gap: .25rem; }
.svc-toggle {
  background: transparent; border: 0; cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; padding: .5rem .45rem; margin: -.2rem 0;
}
.svc-toggle svg { width: 11px; height: 7px; transition: transform .3s var(--ease-hover); }
.svc-toggle:hover { color: var(--accent); }
.capsule.fly-open .svc-toggle svg { transform: rotate(180deg); }
.svc-fly {
  position: absolute; top: calc(100% + 10px); left: clamp(1rem, 16vw, 15rem); min-width: 260px;
  display: grid; padding: .6rem 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline); border-radius: 18px;
  box-shadow: 0 18px 48px rgba(31, 31, 36, 0.16);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease-hover), transform .35s var(--ease-exit), visibility 0s .35s;
}
.capsule.fly-open .svc-fly { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.capsule nav .svc-fly a { display: block; width: 100%; padding: .55rem 1.3rem; opacity: 1; transform: none; }
.capsule nav .svc-fly a:hover { color: var(--accent); background: rgba(248, 230, 232, .5); }
.capsule.nav-open nav a:nth-child(5) { transition-delay: .36s; }
@media (max-width: 860px) {
  /* inside the mobile panel the flyout flows inline as an indented group */
  .svc-fly {
    position: static; min-width: 0; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; transform: none;
    visibility: hidden; opacity: 0; display: none;
  }
  .capsule.fly-open .svc-fly { display: grid; visibility: visible; opacity: 1; }
  .nav-svc { width: 100%; justify-content: space-between; padding-right: 1rem; }
  .nav-svc a { width: auto; }
  .svc-toggle { padding: .55rem .6rem; }
  .capsule nav .svc-fly a { padding: .55rem 1.2rem .55rem 2.3rem; font-size: .9rem; position: relative; }
  .capsule nav .svc-fly a::before {
    content: ""; position: absolute; left: 1.35rem; top: 50%; width: .5rem; height: 1px;
    background: var(--gold-deep);
  }
}

/* ── bandwidth audit: the assessment funnel ─────────────────── */
.audit-progress { display: flex; align-items: center; gap: 0; max-width: 560px; margin: 0 auto clamp(2rem, 4vh, 3rem); }
.audit-progress .node { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--gold-hairline); background: var(--surface);
  display: grid; place-items: center; font-family: var(--mono); font-size: .72rem; color: var(--muted);
  transition: border-color .3s var(--ease-hover), background .3s var(--ease-hover), color .3s var(--ease-hover); }
.audit-progress .node.is-done, .audit-progress .node.is-here { border-color: var(--gold-deep); color: var(--accent-deep); }
.audit-progress .node.is-here { background: var(--blush); box-shadow: 0 0 0 4px rgba(224, 187, 98, .18); }
.audit-progress .node.is-done { background: var(--champagne); }
.audit-progress .link { flex: 1; height: 2px; background: var(--hairline); position: relative; overflow: hidden; }
.audit-progress .link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-exit); }
.audit-progress .link.is-done::after { transform: scaleX(1); }

.audit-step { background: var(--surface); border: 1px solid var(--hairline); border-radius: calc(var(--radius) * 2);
  padding: clamp(1.5rem, 3vw, 2.4rem); max-width: 760px; margin-inline: auto; }
.audit-step[hidden] { display: none; }
.audit-step .step-tag { display: flex; align-items: baseline; gap: .6rem; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .5rem; }
.audit-step .step-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; transform: translateY(-1px); }
.audit-step h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin-bottom: .4rem; }
.audit-step .step-lede { color: var(--muted); margin-bottom: 1.4rem; max-width: 58ch; }
.audit-q { padding-block: 1.15rem; border-top: 1px solid var(--hairline); }
.audit-q:first-of-type { border-top: 0; }
.audit-q legend, .audit-q .q-label { font-weight: 600; font-size: 1.02rem; margin-bottom: .75rem; display: block; }
.audit-q fieldset { border: 0; padding: 0; margin: 0; }
.opts { display: flex; flex-wrap: wrap; gap: .55rem; }
.opts label { position: relative; cursor: pointer; }
.opts input { position: absolute; opacity: 0; pointer-events: none; }
.opts .pill { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--hairline); border-radius: 999px;
  font-size: .92rem; color: var(--ink); background: var(--bg);
  transition: border-color .2s var(--ease-hover), background .2s var(--ease-hover), color .2s var(--ease-hover); }
.opts label:hover .pill { border-color: var(--accent); }
.opts input:checked + .pill { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.opts input:focus-visible + .pill { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.scale { display: flex; gap: .45rem; }
.scale label { position: relative; cursor: pointer; }
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale .dot { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hairline); font-family: var(--mono); font-size: .85rem; color: var(--ink); background: var(--bg);
  transition: border-color .2s var(--ease-hover), background .2s var(--ease-hover), color .2s var(--ease-hover); }
.scale label:hover .dot { border-color: var(--accent); }
.scale input:checked + .dot { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.scale input:focus-visible + .dot { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.risk-pair { display: grid; gap: .8rem; }
.risk-pair .pair-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.risk-pair .pair-lbl { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-width: 8.5ch; }
.audit-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.audit-nav .back { background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .6rem .4rem; }
.audit-nav .back:hover { color: var(--accent); }
.audit-err { color: var(--accent-deep); font-size: .9rem; margin-top: 1rem; display: none; }
.audit-err.show { display: block; }

@media (max-width: 640px) { .audit-progress .node { width: 30px; height: 30px; } .scale .dot { width: 38px; height: 38px; } }

/* ── bandwidth audit callouts ── */
.closer-alt { margin-top: 1rem; font-size: .95rem; }
.closer-alt a { color: var(--gold); border-bottom: 1px solid rgba(224, 187, 98, .45); padding-bottom: 2px; }
.closer-alt a:hover { color: #FFFFFF; }
.capsule.nav-open nav a:nth-child(6) { transition-delay: .42s; }

/* ── audit pill: the Pace treatment, the lead magnet as its own button ── */
.capsule .audit-pill {
  border: 1px solid var(--accent); border-radius: 999px; color: var(--accent);
  padding: .45rem 1rem; font-weight: 600; white-space: nowrap;
  transition: background .2s var(--ease-hover), color .2s var(--ease-hover),
    opacity .3s var(--ease-hover), transform .3s var(--ease-hover);
}
.capsule .audit-pill:hover { background: var(--accent); color: var(--accent-on); }
.audit-pill-fixed { flex: none; }
@media (min-width: 861px) { .capsule nav .audit-pill { display: none; } }
@media (max-width: 860px) { .audit-pill-fixed { display: none; } }
@media (max-width: 430px) { .site-header > .floating-cta { padding: .55rem .95rem; font-size: .875rem; } }
.capsule.nav-open nav a:nth-child(7) { transition-delay: .42s; }
@media (max-width: 860px) {
  .capsule .audit-pill { width: auto; margin: .5rem 1.2rem .35rem; text-align: center; }
}

/* ── audit wizard: one question, full focus (Typeform pattern) ── */
html.audit-lock, html.audit-lock body { overflow: hidden; }
html.audit-lock .sticky-cta { display: none; }
html.audit-lock .site-header { display: none; }
.audit-stage {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  display: flex; flex-direction: column; overflow-y: auto;
  padding: max(env(safe-area-inset-top), 1.1rem) clamp(1.1rem, 4vw, 3rem) 1.2rem;
}
.audit-stage::before {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; width: min(48vw, 640px);
  background: url("images/circuit-texture-macro.webp") right center / cover no-repeat;
  opacity: .1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 60%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 60%);
}
.audit-stage[hidden] { display: none; }
.stage-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; max-width: 880px; margin-inline: auto; position: relative; z-index: 1;
}
.stage-brand { font-family: var(--mono); font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-text); }
.stage-count { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: var(--muted); }
.stage-exit {
  background: transparent; border: 1px solid var(--hairline); border-radius: 50%;
  width: 38px; height: 38px; cursor: pointer; color: var(--ink); font-size: .95rem;
  display: grid; place-items: center; transition: color .2s var(--ease-hover), border-color .2s var(--ease-hover);
}
.stage-exit:hover { color: var(--accent); border-color: var(--accent); }
.audit-stage .audit-progress { margin: clamp(1rem, 2.5vh, 1.8rem) auto .7rem; position: relative; z-index: 1; }
.stage-track { width: 100%; max-width: 560px; margin: 0 auto; height: 2px; background: var(--hairline); border-radius: 1px; position: relative; z-index: 1; }
.stage-fill { height: 100%; border-radius: 1px; background: linear-gradient(90deg, var(--gold-deep), var(--accent)); width: 0; transition: width .5s var(--ease-exit); }
#audit-form { flex: 1; display: flex; align-items: center; width: 100%; position: relative; z-index: 1; }
.q-screen { width: 100%; max-width: 760px; margin-inline: auto; padding-block: 1.5rem; }
.q-screen[hidden] { display: none; }
.q-tag {
  display: flex; align-items: baseline; gap: .6rem; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .9rem;
}
.q-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; transform: translateY(-1px); }
.q-title { font-size: clamp(1.75rem, 3.4vw, 2.4rem); line-height: 1.18; margin-bottom: 1.4rem; }
.q-context { color: var(--muted); font-size: .95rem; max-width: 60ch; margin: -0.6rem 0 1.4rem; }
.q-context a { color: var(--accent); }
.audit-stage .opts { gap: .7rem; }
.audit-stage .opts .pill { font-size: 1.02rem; padding: .8rem 1.3rem; background: var(--surface); }
.audit-stage .scale .dot { width: 50px; height: 50px; font-size: .95rem; background: var(--surface); }
.audit-stage .risk-pair { gap: 1.1rem; }
.stage-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; max-width: 760px; margin-inline: auto; padding-top: .6rem; position: relative; z-index: 1;
}
.stage-hint { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stage-bottom .back {
  background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .6rem .4rem;
}
.stage-bottom .back:hover { color: var(--accent); }
html.js-motion .q-screen:not([hidden]) { animation: qRise .45s var(--ease-enter) both; }
@keyframes qRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { html.js-motion .q-screen:not([hidden]) { animation: none; } }
@media (max-width: 640px) {
  .audit-stage .scale .dot { width: 44px; height: 44px; }
  .q-screen { padding-block: 1rem; }
  .stage-hint { display: none; }
}

/* ── audit landing: one screen, pitch left, the word right ── */
.page-hero .hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr);
  gap: clamp(2.6rem, 7.5vw, 7rem); align-items: center;
}
.page-hero .hero-grid .dict-entry { margin-top: .5rem; }
@media (max-width: 900px) {
  .page-hero .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .page-hero .hero-grid .dict-entry { max-width: 560px; }
}

/* ── credibility band: slim authority strip under the hero ── */

/* ── audit CTA bar: full-width maroon, text left, button right ── */
/* The audit call is a band, not a card: full-bleed maroon at section scale,
   sitting between the premise and the framework. */
/* The leak report sits INSIDE the premise, spanning both columns of the fault
   grid, so it reads as the answer to the four faults above it rather than a
   separate banner. Maroon on ink: the first warmth after the dark stretch, and
   the only card in the section that is not a fault. */
.audit-card {
  grid-column: 1 / -1;
  background: var(--accent-deep); color: #FBEFF0;
  border-radius: calc(var(--radius) * 2);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 2.6vw, 2rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.4rem, 3vw, 3rem);
  margin-top: clamp(.4rem, 1vw, .8rem);
}
.audit-card h3 { font-family: var(--hfont); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; color: #FFFFFF; margin-bottom: .5rem; }
.audit-card p { color: rgba(251, 239, 240, .85); font-size: 1rem; line-height: 1.6; max-width: 58ch; }
.audit-card .btn { flex: none; background: var(--gold); border-color: var(--gold); color: var(--accent-deep); font-weight: 600; }
.audit-card .btn:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--accent-deep); }
@media (max-width: 760px) { .audit-card { flex-direction: column; align-items: flex-start; } }

/* The practice capsule's left column carries the standing facts, so the
   column has real weight against the paragraph instead of trailing off under
   the heading. Mono label, plain value, hairline between: the same register
   the ledger and the spec rows use. */
.capsule-answer .q-facts { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 34ch; }
.capsule-answer .q-facts > div {
  display: grid; grid-template-columns: 8.5ch 1fr; gap: .9rem;
  padding-block: .7rem; border-top: 1px solid var(--hairline);
}
.capsule-answer .q-facts > div:last-child { border-bottom: 1px solid var(--hairline); }
.capsule-answer .q-facts dt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-text); padding-top: .18em;
}
.capsule-answer .q-facts dd { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink); }
@media (max-width: 860px) { .capsule-answer .q-facts { max-width: none; } }

/* Credentials sit under her photo in Meet Lexi. The decorative gold frame
   stays wrapped around the portrait itself, never around the list. */
.meet .photo-col { position: relative; }
.meet .ledger.under-photo { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.meet .ledger.under-photo li { font-size: .92rem; }

/* ── credibility bar: standalone, on the hero's cream, directly beneath it ── */
.cred-band { background: var(--bg); padding-top: clamp(.5rem, 1.2vh, 1rem); padding-bottom: clamp(2rem, 4vh, 3rem); }
/* Centred columns: the accent bar centres with the number instead of hanging
   off a left edge, and the label wraps symmetrically under it. */
.cred-band .stat { align-items: center; text-align: center; }
.cred-band .stat-label { max-width: 30ch; }
.cred-band .stat-row { margin-top: 0; padding-top: 0; border-top: 0; }
/* The numbers COUNT UP. The stat itself only fades (the generic reveal would
   otherwise rise the whole block 22px and carry the digits with it); site.js
   drives the count and reserves the final width first, so the row never
   reflows as the digits grow. */
html.js-motion .cred-band .stat { transform: none; }
.cred-band .num { display: block; padding-bottom: .06em; }
.cred-band .num > span { display: inline-block; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  html.js-motion .cred-band .num > span { transform: none; }
}
.stat-row--3 { grid-template-columns: repeat(3, 1fr); max-width: 980px; }
@media (max-width: 640px) { .stat-row--3 { grid-template-columns: 1fr; } }

/* ============ LocalCraft blog publishing kit (appended from blog-publishing-kit/template/blog.css; keep verbatim, bridge below) ============ */
/* ============ Blog (content/blog → /blog/) - LocalCraft blog kit ============
   Append this block to the site's styles.css. Uses the site's existing
   tokens (--accent, --accent-2, --accent-3, --ink, --ink-soft, --ink-deep,
   --surface, --line, --s2..--s6, --radius, --radius-lg, --font-heading) and
   shared classes (.container, .eyebrow, .lede, .card, .card-grid, .offer-link,
   .band-surface, .page-hero, .ty-hero). No new tokens required. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.blog-measure { max-width: 760px; }
.blog-post-head { padding-top: var(--s6); }
.blog-post-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1.08; margin: 0 0 var(--s2); }
.blog-kicker-link { color: inherit; text-decoration: none; }
.blog-meta { color: var(--ink-soft); font-size: 0.95rem; }
.blog-hero-figure { margin: var(--s4) 0 0; }
.blog-hero-figure img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; box-shadow: 0 10px 34px rgba(22,8,32,0.10); }
.blog-prose { font-size: 1.075rem; line-height: 1.72; color: var(--ink); margin-top: var(--s4); }
.blog-prose > * + * { margin-top: 1.1em; }
.blog-prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.2; margin-top: 2em; }
.blog-prose h3 { font-size: 1.25rem; margin-top: 1.6em; }
.blog-prose a { color: var(--accent); text-underline-offset: 2px; }
.blog-prose ul, .blog-prose ol { padding-left: 1.3em; }
.blog-prose li + li { margin-top: 0.4em; }
.blog-prose blockquote { border-left: 4px solid var(--accent-3); padding-left: var(--s3); color: var(--ink-soft); font-style: italic; }
.blog-prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.blog-prose strong { color: var(--ink-deep); }
.blog-faq { max-width: 820px; }
.blog-faq-list { margin-top: var(--s4); display: flex; flex-direction: column; gap: 12px; }
.blog-faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.blog-faq-item summary { cursor: pointer; list-style: none; padding: var(--s3); font-weight: 600; font-family: var(--font-heading); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.blog-faq-item summary::-webkit-details-marker { display: none; }
.blog-faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.blog-faq-item[open] summary::after { content: "−"; }
.blog-faq-a { padding: 0 var(--s3) var(--s3); color: var(--ink-soft); }
.blog-faq-a p { margin: 0; }
.blog-card .num { color: var(--accent-2); text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ============ Blog kit bridge (Praxis-specific; the kit block above stays pristine) ============
   The kit was authored against the fleet token set. Map its token names onto this
   site's real tokens and supply the layout classes it assumes the host provides
   (.container, .eyebrow, .card, .card-grid, .offer-link, .band-surface, .ty-hero).
   Inner pages define .page-hero per page in their own <style>, so the /blog/ index
   hero gets its rhythm here. Bridge only: never patch scripts/build-blog.mjs. */
:root {
  --accent-2: var(--accent-deep);
  --accent-3: var(--gold);
  --ink-soft: var(--muted);
  --ink-deep: var(--ink);
  --line: var(--hairline);
  --radius-lg: calc(var(--radius) * 2);
  --font-heading: var(--hfont);
  --s2: .5rem; --s3: 1rem; --s4: 1.5rem; --s5: 2.5rem; --s6: 4rem;
}
/* .container mirrors .wrap, the site's one page gutter */
.container { max-width: 1160px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
/* .eyebrow mirrors the mono gold label used by .sec-head .label and .eyebrow-pill */
.eyebrow {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); display: inline-flex; align-items: center; gap: .55rem;
  margin-bottom: clamp(1rem, 2.4vh, 1.4rem);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
.eyebrow a { color: inherit; }
/* /blog/ index hero: same clearance and type scale as the other inner-page heroes */
.page-hero.ty-hero { position: relative; overflow: clip; background: var(--bg); padding-top: clamp(8.5rem, 16vh, 10.75rem); padding-bottom: clamp(2.4rem, 5vh, 3.5rem); }
.page-hero.ty-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -0.01em; margin-bottom: 1.2rem; perspective: 600px; }
.page-hero.ty-hero .lede { margin-bottom: 0; }
/* post head clears the fixed capsule header (two-class selector outranks the kit's .blog-post-head) */
.blog-post .blog-post-head { padding-top: clamp(8.5rem, 16vh, 10.75rem); }
.blog-post { padding-bottom: clamp(3rem, 6vw, 5rem); }
.blog-prose h3 { font-family: var(--hfont); font-weight: 600; }
/* post list: .card follows .pain-card (surface, hairline, radius x2); the anchor must be a block */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); margin-top: clamp(1rem, 3vw, 2.4rem); margin-bottom: clamp(4.5rem, 10vw, 8.5rem); }
.card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: calc(var(--radius) * 2);
  padding: clamp(1.3rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; gap: .65rem; color: var(--ink);
}
a.card { text-decoration: none; transition: transform var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover); }
a.card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 12px 34px rgba(31, 31, 36, 0.10); border-color: var(--gold-hairline); }
.blog-card .num { font-family: var(--mono); font-size: .8rem; }
.blog-card h3 { font-family: var(--hfont); font-weight: 600; font-size: clamp(1.35rem, 2vw, 1.65rem); line-height: 1.1; margin: 0; }
.blog-card p { color: var(--muted); margin: 0; line-height: 1.55; }
.offer-link {
  margin-top: auto; padding-top: .4rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem;
}
/* FAQ band on posts: white surface off the cream page, same section rhythm as .section */
.band-surface { background: var(--surface); border-top: 1px solid var(--hairline); padding-block: clamp(3.5rem, 8vw, 6rem); }

/* ── interior hero v2: the owner's world behind the words ──────────────────
   Operator direction: interior heroes were all the same art; they now carry a
   distinct documentary photograph per page, graded warm to sit with the cream,
   veiled on the left for legibility and FADED OUT AT THE BOTTOM into the page
   (the thing the home hero does right), with drawn gold circuitry laid over the
   photograph so the CSS traces meld with the image. One photo per page, never
   the same one twice. Mobile stacks the photo above the copy as a fading band. */
.page-hero.has-photo { overflow: clip; }
.page-hero.has-photo .art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.page-hero.has-photo .art .photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(62vw, 900px);
  overflow: hidden;
}
.page-hero.has-photo .art .photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--ph-pos, 60% 40%);
  filter: saturate(.82) sepia(.14) contrast(1.02);
  transform: scale(1); transition: transform 1.6s var(--ease-enter);
}
html.js-motion .page-hero.has-photo .art .photo img { transform: scale(1.06); }
html.js-motion .page-hero.has-photo.is-visible .art .photo img { transform: scale(1); }
.page-hero.has-photo .art .veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--bg) 0%, var(--bg) 41%, rgba(253,250,244,.97) 49%, rgba(253,250,244,.72) 58%, rgba(253,250,244,.34) 69%, rgba(253,250,244,.08) 82%, rgba(253,250,244,0) 92%),
    linear-gradient(180deg, rgba(253,250,244,.78) 0%, rgba(253,250,244,.08) 22%, rgba(253,250,244,0) 48%, rgba(253,250,244,.62) 82%, var(--bg) 100%);
}
.page-hero.has-photo .art .traces {
  position: absolute; right: -1%; top: 2%; width: clamp(300px, 38vw, 560px); height: auto; opacity: .9;
  mix-blend-mode: multiply;
}
.page-hero.has-photo .art .traces path { fill: none; stroke-dasharray: var(--len, 1100); stroke-dashoffset: 0; }
html.js-motion .page-hero.has-photo .art .traces path { stroke-dashoffset: var(--len, 1100); }
html.js-motion .page-hero.has-photo.is-visible .art .traces path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.9s cubic-bezier(.2, .5, .3, 1);
  transition-delay: calc(.25s + var(--i, 0) * 140ms);
}
html.js-motion .page-hero.has-photo .art .traces circle,
html.js-motion .page-hero.has-photo .art .traces rect { opacity: 0; transition: opacity .5s var(--ease-hover) 1.4s; }
html.js-motion .page-hero.has-photo.is-visible .art .traces circle,
html.js-motion .page-hero.has-photo.is-visible .art .traces rect { opacity: 1; }
.page-hero.has-photo .wrap { position: relative; z-index: 1; }
@media (min-width: 861px) {
  /* Several interior heroes came in shallow (services 579px, fractional CTO
     606px, about 617px), which squeezed the photo into a thin band and pushed
     its subject high. A floor lifts only those. The extra height is CENTRED
     rather than added as padding, so the short heroes gain space above the
     copy while the risk assessment and AI advisory heroes, which already clear
     the floor, keep the exact height and padding they have now: the floor sits just under the
     risk assessment hero's natural 674px. */
  .page-hero.has-photo {
    min-height: 672px;
    /* GRID, not flex. As a flex container this made .wrap shrink to its
       content (1160px -> 720px), and the wrap's auto side margins then centred
       it, dragging every interior heading from x=180 to x=400. A grid item
       stretches to the full column by default, so the copy keeps its left
       edge while align-content still centres the extra height. */
    display: grid; align-content: center;
  }
  /* .wrap declares max-width + auto side margins but no width, which fills the
     line in block flow and shrinks to content as a grid item, whereupon the
     auto margins centre it. The home hero never hit this because .hero .wrap
     sets width:100%; interior heroes need the same. */
  .page-hero.has-photo > .wrap { width: 100%; }
}
@media (max-width: 860px) {
  .page-hero.has-photo { padding-top: 0; }
  .page-hero.has-photo .art { position: relative; inset: auto; height: 52svh; min-height: 330px; }
  /* the floating header lives in the top 56px; the photo starts under it and fades in from cream */
  .page-hero.has-photo .art .photo { width: 100%; top: 56px; }
  .page-hero.has-photo .art .photo img { object-position: var(--ph-pos-m, var(--ph-pos, 60% 40%)); }
  .page-hero.has-photo .art .veil {
    background: linear-gradient(180deg, var(--bg) 0, var(--bg) 56px, rgba(253,250,244,.55) 20%, rgba(253,250,244,0) 34%, rgba(253,250,244,0) 60%, var(--bg) 100%);
  }
  .page-hero.has-photo .art .traces { width: 64%; right: -4%; top: 16%; opacity: .8; }
  .page-hero.has-photo .wrap { margin-top: -2.2rem; }
}

/* ── forms: shared field system ───────────────────────────────────────────
   These rules lived only in the contact page's own <style> block. The Leak
   Report reuses the same class names, so its gate rendered as raw browser
   inputs and, worse, its honeypot pair (Website / Company URL, aria-hidden and
   tabindex -1) showed up as two real-looking fields, which both looked broken
   and would have poisoned the spam trap the moment a visitor filled them in.
   Promoted here so every form on the site inherits one definition. */
.f-row { display: grid; gap: .35rem; margin-bottom: 1.05rem; }
.f-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.f-row label { font-size: .875rem; font-weight: 600; }
.f-row label .opt { font-weight: 400; color: var(--muted); }
.f-row input, .f-row select, .f-row textarea {
  font: inherit; font-size: 1rem; color: var(--ink); width: 100%;
  background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: .72rem .85rem;
  transition: border-color var(--dur-hover) var(--ease-hover),
    box-shadow var(--dur-hover) var(--ease-hover),
    background-color var(--dur-hover) var(--ease-hover);
}
.f-row textarea { min-height: 128px; resize: vertical; }
.f-row ::placeholder { color: var(--muted); opacity: .75; }
.f-row input:hover, .f-row select:hover, .f-row textarea:hover { border-color: rgba(31, 31, 36, .3); }
.f-row input:focus-visible, .f-row select:focus-visible, .f-row textarea:focus-visible {
  outline: none; border-color: var(--gold-deep); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(180, 132, 48, .16);
}
/* the error line only appears once the visitor has actually interacted */
.f-row input:user-invalid, .f-row select:user-invalid, .f-row textarea:user-invalid { border-color: var(--accent); }
.f-err { display: none; font-size: .875rem; color: var(--accent-deep); }
.f-row input:user-invalid ~ .f-err { display: block; }
/* Delivery status line under a lead form's submit button. Never display:none,
   so screen readers announce each message; it takes no space while empty. */
.form-status { margin: .9rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--ink); max-width: 52ch; }
.form-status:empty { margin: 0; }
.form-status.is-error { color: var(--accent-deep); font-weight: 600; }
/* Honeypot. Must stay in the DOM and out of sight: never display:none, which
   some bots detect and skip. */
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) { .f-duo { grid-template-columns: 1fr; } }

/* ── Leak Report results page ─────────────────────────────────────────────
   The report used to render in a panel bolted under the questionnaire, which
   left the reader looking at their result with the FAQ still beneath it. It is
   its own page now. Readings are stated in the units the questions asked for;
   the previous version showed invented indices ("35 out of 100") that nothing
   on the page could explain. */
.results-hero { padding-top: clamp(9rem, 16vh, 11rem); padding-bottom: clamp(2.4rem, 5vh, 3.6rem); }
.results-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.1; margin-bottom: 1.1rem; max-width: 20ch; }
.results-hero h1 .acc { color: var(--accent); }
.results-hero .lede { max-width: 60ch; }
.reading-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1rem, 2.2vw, 1.5rem); }
.reading {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) * 2); padding: clamp(1.3rem, 2.4vw, 1.7rem);
  display: grid; align-content: start; gap: .45rem;
}
.reading .rd-k { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.reading .rd-v { font-family: var(--hfont); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; color: var(--ink); }
.reading .rd-n { font-size: .92rem; line-height: 1.55; color: var(--muted); }
.risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.results-risk .matrix-card { position: static; }
.risk-key { list-style: none; display: grid; gap: .8rem; margin-top: 1.6rem; }
.risk-key li { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: baseline; font-size: .95rem; }
.risk-key .k-dot { width: 11px; height: 11px; border-radius: 50%; transform: translateY(1px); }
.risk-key .k-score { font-family: var(--mono); font-size: .82rem; color: var(--muted); }
/* the note under the buttons was hugging them */
.next-cta { margin-top: clamp(1.6rem, 3vw, 2.2rem); display: flex; flex-wrap: wrap; gap: .9rem; }
.next-note { margin-top: clamp(1.5rem, 2.8vw, 2rem); font-size: .9rem; color: var(--muted); max-width: 60ch; }
.results-next .lede { max-width: 62ch; }
.results-empty { text-align: left; }
@media (max-width: 860px) { .risk-grid { grid-template-columns: 1fr; } }