/* ============================================================
   Ripples Space — Landing Page
   Warm editorial system. Light by default; oxblood for emphasis.
   Palette pulled from ripples.space (oxblood + cream + taupe)
   ============================================================ */

:root {
  /* --- raw palette --- */
  --oxblood:      #490308;
  --oxblood-deep: #360206;
  --oxblood-dark: #2a0206;
  --panel:        #551112;
  --panel-2:      #611519;
  --line-red:     #6a2226;
  --cream:        #feedc9;
  --cream-dim:    #e9d9b8;
  --taupe:        #c7b49c;
  /* Was #a3917c (5.3:1 on oxblood) — lifted for the same reason --ink-dim was
     darkened on the light side: small notes were reading muddy. Now 6.9:1. */
  --taupe-dim:    #b9a68f;
  --gold:         #e9c48a;
  --gold-soft:    rgba(233, 196, 138, 0.16);

  --paper:      #f7f0e2;   /* primary light surface */
  --paper-alt:  #efe5d3;   /* alternate light surface */
  --paper-card: #fdfaf2;   /* raised card on light */
  --ink:        #3f0a0d;   /* deep oxblood ink (headings) */
  /* Body text is the same ink as the headings. The old #7c625a cleared 4.5:1
     on paper by a hair but read washed-out against it; small labels at
     #a08d81 were 2.8:1 and failed outright. --ink-dim is now only a step
     down from the body colour — enough to rank a label below a sentence,
     still 6.5:1 on --paper and 7.1:1 on --paper-card. */
  --ink-soft:   #3f0a0d;   /* body text on light */
  --ink-dim:    #6b4f45;   /* small labels on light */
  --clay:       #a2472f;   /* terracotta eyebrow */
  --red-accent: #7c1418;   /* accent for italics on light */

  --serif: Georgia, "Times New Roman", "Times", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1200px;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  background: var(--oxblood);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
}

::selection { background: var(--gold); color: var(--oxblood-dark); }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* --- grain overlay --- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   THEME TOKENS
   .section defaults to LIGHT. .sec--alt = deeper paper.
   .sec--red = oxblood emphasis theme.
   ============================================================ */
.section {
  --surface:   var(--paper);
  --fg:        var(--ink);
  --fg-soft:   var(--ink-soft);
  --fg-dim:    var(--ink-dim);
  --eyebrow:   var(--clay);
  --accent:    var(--red-accent);
  --accent-soft: rgba(124, 20, 24, 0.10);
  --card:      var(--paper-card);
  --card-line: rgba(63, 10, 13, 0.12);
  --line:      rgba(63, 10, 13, 0.12);

  position: relative;
  padding: clamp(84px, 11vw, 140px) 0;
  background: var(--surface);
  color: var(--fg);
}
.section.sec--alt { --surface: var(--paper-alt); --card: #f6efdf; }
.section.sec--red {
  --surface:   var(--oxblood);
  --fg:        var(--cream);
  /* Mirrors the light theme: body text is the same cream as the headings
     (taupe read muddy against oxblood), with the dim tone one step down for
     small labels rather than for sentences. */
  --fg-soft:   var(--cream);
  --fg-dim:    var(--taupe);
  --eyebrow:   var(--gold);
  --accent:    var(--gold);
  --accent-soft: var(--gold-soft);
  --card:      var(--panel);
  --card-line: rgba(254, 237, 201, 0.10);
  --line:      rgba(254, 237, 201, 0.10);
}

/* ============ TYPOGRAPHY ============ */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--eyebrow); margin-bottom: 22px;
}
.eyebrow.center { text-align: center; }

.section__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 2.8rem);
  line-height: 1.12; letter-spacing: -0.01em; color: var(--fg);
  text-wrap: balance;
  /* Scales with the heading, so a 2.8rem display line gets more air beneath it
     than a 1.75rem one. This is a MARGIN, not padding, so it collapses with
     whatever the next block already sets (.lede's 22px, the landing pages'
     34px) — those stay exactly as they were, and only the cases that set
     nothing pick up a gap. */
  margin-bottom: clamp(1rem, 1.4vw, 1.35rem);
}
.section__title.center { text-align: center; }
.section__title em { font-style: italic; color: var(--accent); }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: var(--fg-soft); max-width: 60ch; margin-top: 22px; line-height: 1.6;
}
.lede.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ============ LAYOUT ============ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.wrap--narrow { max-width: 880px; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: 15px;
  padding: 13px 26px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  transition: transform .5s var(--ease), background .3s ease, color .3s ease, box-shadow .5s var(--ease), border-color .3s ease;
}
.btn--lg { padding: 16px 34px; font-size: 16px; }
.btn--cream {
  background: var(--cream); color: #4c0004;
  box-shadow: 0 10px 30px -12px rgba(254,237,201,.5);
}
.btn--cream:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -14px rgba(254,237,201,.65), 0 0 44px -8px var(--gold-soft); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--card-line); }
.btn--ghost:hover { border-color: currentColor; background: rgba(254,237,201,.06); }
/* solid ink button for light contexts */
.btn--ink { background: var(--ink); color: var(--paper); box-shadow: 0 12px 30px -14px rgba(63,10,13,.6); }
.btn--ink:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -16px rgba(63,10,13,.7); }

/* ============ NAV ============ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
/* Solid, not glass: a translucent blur over the light sections turned the
   bar into a washed-out pink band. Opaque oxblood matches the footer and
   reads cleanly against both the paper and oxblood surfaces.
   Still a pseudo-element rather than .nav's own background so it can paint
   ABOVE the drawer (z-index 2 vs 1) — .nav's background would sit under its
   own children and the open panel would cover the bar. */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: 2; box-sizing: border-box; opacity: 0;
  background: var(--oxblood-dark);
  border-bottom: 1px solid rgba(254,237,201,.10);
  transition: opacity .4s ease;
}
.nav.scrolled::before,
.nav.is-drawer-open::before { opacity: 1; }
.nav__inner { position: relative; z-index: 3; max-width: var(--maxw); margin: 0 auto; padding: 16px clamp(20px, 5vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--cream); }
.brand__mark { display: inline-flex; color: var(--gold); }
.brand__mark svg { width: 30px; height: 30px; overflow: visible; }
.brand__mark svg circle { stroke-width: 8; }
.footer__brand .brand__mark svg { width: 26px; height: 26px; }
.brand__mark .ripple-ring { display: none; }
.brand__mark .ripples-orbit { transform-box: view-box; transform-origin: 129px 129px; animation: brandOrbit 22s linear infinite; }
@keyframes brandOrbit { to { transform: rotate(360deg); } }
.nav__links { display: flex; gap: 30px; font-size: 14.5px; color: var(--taupe); }
.nav__links a { position: relative; transition: color .3s ease; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--gold); transition: width .35s var(--ease); }
.nav__links a:hover { color: var(--cream); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { padding: 10px 20px; font-size: 14px; }

/* ============ NAV BURGER + DRAWER ============ */
/* 44px hit area (2.5.8) with a 22px visual icon inside it. */
.nav__burger {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(254, 237, 201, 0.22); border-radius: 10px;
  color: var(--cream); cursor: pointer;
  transition: border-color .3s ease, background .3s ease;
}
.nav__burger:hover { border-color: var(--gold); background: rgba(254, 237, 201, 0.06); }
.nav__burger-box { position: relative; display: block; width: 22px; height: 14px; }
.nav__burger-box span {
  position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: transform .4s var(--ease), opacity .25s ease, width .4s var(--ease);
}
.nav__burger-box span:nth-child(1) { top: 0; }
.nav__burger-box span:nth-child(2) { top: 6.25px; width: 74%; }
.nav__burger-box span:nth-child(3) { top: 12.5px; }
/* Burger → X */
.nav__burger[aria-expanded="true"] .nav__burger-box span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-box span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] .nav__burger-box span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

.navdrawer {
  position: fixed; inset: 0; z-index: 1;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.navdrawer.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s var(--ease); }
.navdrawer__backdrop {
  position: absolute; inset: 0; background: rgba(42, 2, 6, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
  cursor: pointer;
}
.navdrawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(460px, 100%); display: flex; flex-direction: column;
  /* `safe` matters on short viewports (landscape phones): with plain `center`,
     content taller than the panel overflows BOTH ends and the top is stranded
     above scrollTop 0. Older browsers keep the plain `center` above. */
  justify-content: center;
  justify-content: safe center;
  /* Top padding clears the fixed bar so the burger stays reachable as the
     close control while the drawer is open. */
  padding: 104px clamp(24px, 5vw, 44px) clamp(28px, 5vh, 48px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--oxblood-deep); border-left: 1px solid rgba(254, 237, 201, 0.12);
  box-shadow: -40px 0 90px -40px rgba(0, 0, 0, .7);
  transform: translateX(18px); transition: transform .4s var(--ease);
}
.navdrawer.is-open .navdrawer__panel { transform: none; }
.navdrawer__panel:focus { outline: none; }
.navdrawer__title {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--taupe-dim); margin-bottom: 18px;
}
.navdrawer__paths { display: grid; gap: 14px; }
.navdrawer__foot { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.navdrawer__link { font-size: 14px; color: var(--taupe); border-bottom: 1px solid rgba(199, 180, 156, .35); transition: color .3s ease, border-color .3s ease; }
.navdrawer__link:hover { color: var(--cream); border-bottom-color: var(--gold); }
body.drawer-open { overflow: hidden; }

/* Audience path cards — used inside the drawer. */
.path-link {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 22px; border-radius: 13px; text-align: left;
  background: rgba(254, 237, 201, 0.06); border: 1px solid rgba(254, 237, 201, 0.18);
  color: var(--cream);
  transition: transform .5s var(--ease), background .3s ease, border-color .3s ease, box-shadow .5s var(--ease);
}
.path-link:hover { background: rgba(254, 237, 201, 0.10); border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
.path-link__label { font-family: var(--serif); font-size: clamp(1.02rem, 2.2vw, 1.16rem); line-height: 1.35; }
.path-link__meta { display: block; margin-top: 4px; font-family: var(--sans); font-size: 13px; letter-spacing: .02em; color: var(--taupe-dim); }
.path-link__arrow {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: var(--gold); border: 1px solid rgba(233,196,138,.35);
  transition: transform .45s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
}
.path-link__arrow svg { width: 15px; height: 15px; }
.path-link:hover .path-link__arrow { background: var(--gold); border-color: var(--gold); color: var(--oxblood-dark); transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .navdrawer, .navdrawer__panel { transition: none; }
}
html.motion-reduced .navdrawer,
html.motion-reduced .navdrawer__panel { transition: none !important; }

/* ============ HERO (red) ============ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 130px 0 80px; overflow: hidden; background: var(--oxblood); color: var(--cream);
  --fg: var(--cream); --fg-soft: var(--cream); --eyebrow: var(--gold); --accent: var(--gold); --card-line: rgba(254,237,201,.10); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Thin. The field behind it is hairlines now, not a full-bleed wash, and the
   ripples originate at the BOTTOM centre — the old near-opaque bottom stop
   erased them exactly where they start. This only softens the top under the
   nav and lands the bottom edge on the section colour. */
.hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(42,2,6,.55), transparent 22%, transparent 78%, rgba(54,2,6,.72)); }
.hero__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 clamp(20px, 5vw, 48px); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.hero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--cream); margin-bottom: 26px; text-wrap: balance; }
.hero__title em { font-style: italic; color: var(--gold); }
.hero__sub { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--cream); max-width: 52ch; margin-bottom: 34px; text-wrap: pretty; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__trust { margin-top: 22px; font-size: 13.5px; letter-spacing: .04em; color: var(--taupe-dim); }

/* ============ HERO (light variant) ============
   Same structure, paper surface. The ripple field is re-tinted in main.js
   from the canvas's data-theme, so only the overlay + type need retoning. */
.hero--light {
  background: var(--paper); color: var(--ink);
  --fg: var(--ink); --fg-soft: var(--ink-soft); --fg-dim: var(--ink-dim);
  --eyebrow: var(--clay); --accent: var(--red-accent); --card-line: rgba(63,10,13,.12);
}
/* No clearing behind the copy. The lines run straight under the type and are
   simply faint enough not to matter — a 1px hairline at 6% alpha costs the
   headline nothing measurable, and ink on paper stays at 12.6:1. All this
   does is soften the top under the nav and land the bottom on --paper so the
   join to the next section is seamless. */
.hero--light .hero__veil {
  background: linear-gradient(to bottom, rgba(253,250,242,.42), transparent 20%, transparent 76%, var(--paper));
}
.hero--light .hero__title { color: var(--ink); }
.hero--light .hero__title em { color: var(--red-accent); }
.hero--light .hero__sub { color: var(--ink-soft); }
.hero--light .btn--ghost { border-color: rgba(63,10,13,.22); }
.hero--light .btn--ghost:hover { background: rgba(63,10,13,.05); border-color: var(--ink); }
.hero--light .scroll-cue { color: var(--red-accent); }
.hero--light .scroll-cue i { background: linear-gradient(var(--red-accent), transparent); }
.hero--light .scroll-cue i::after { background: var(--ink); }
.hero--light :focus-visible { outline-color: var(--red-accent); }

/* The bar is transparent until scrolled, so over a light hero its cream
   brand and burger have nothing to sit on. Swap to ink for that window only;
   .scrolled brings the oxblood bar back and the cream with it. */
.nav--on-light:not(.scrolled):not(.is-drawer-open) .brand { color: var(--ink); }
.nav--on-light:not(.scrolled):not(.is-drawer-open) .brand__mark { color: var(--red-accent); }
.nav--on-light:not(.scrolled):not(.is-drawer-open) .nav__links { color: var(--ink-dim); }
.nav--on-light:not(.scrolled):not(.is-drawer-open) .nav__links a:hover { color: var(--ink); }
.nav--on-light:not(.scrolled):not(.is-drawer-open) .nav__burger { color: var(--ink); border-color: rgba(63,10,13,.22); }
.nav--on-light:not(.scrolled):not(.is-drawer-open) .nav__burger:hover { border-color: var(--red-accent); background: rgba(63,10,13,.05); }
/* Pages that pair an on-light hero with a nav CTA (the case studies) — a cream
   button on paper has nothing to sit on until .scrolled brings the bar back. */
.nav--on-light:not(.scrolled):not(.is-drawer-open) .nav__cta { background: var(--ink); color: var(--paper); box-shadow: 0 12px 30px -14px rgba(63,10,13,.6); }

/* Hero dashboard mockup (white / light-mode app on red) */
.hero__stage { position: relative; }
.panel { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: 0 30px 70px -34px rgba(63,10,13,.4); }
.sec--red .panel, .hero .panel { background: #ffffff; border-color: rgba(63,10,13,.08); box-shadow: 0 44px 90px -40px rgba(0,0,0,.55), 0 3px 10px -4px rgba(63,10,13,.18); }
.dash { overflow: hidden; }
.dash__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(63,10,13,.07); background: #f5edde; }
.dash__bar .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(63,10,13,.16); }
.dash__bar .dot:nth-child(1){ background: #c96a3a; }
.dash__title { font-size: 12.5px; color: var(--ink-soft); margin-left: 8px; }
.dash__live { margin-left: auto; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); display: flex; align-items: center; gap: 6px; }
.dash__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); animation: livePulse 2s infinite; }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(162,71,47,.45);} 70%{box-shadow:0 0 0 8px rgba(162,71,47,0);} 100%{box-shadow:0 0 0 0 rgba(162,71,47,0);} }
.dash__body { padding: 22px; }
.stat { display: flex; flex-direction: column; margin-bottom: 8px; }
.stat__label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.stat__num { font-family: var(--sans); font-weight: 600; font-size: 3rem; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.dash__chart { margin: 6px 0 20px; }
.dash__chart svg { width: 100%; height: 90px; }
#chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dash__feed { display: flex; flex-direction: column; gap: 2px; }
.feed__row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid rgba(63,10,13,.07); font-size: 14px; color: var(--ink); }
.feed__row time { margin-left: auto; font-size: 12px; color: var(--ink-dim); }
.feed__row .tick { width: 20px; height: 20px; border-radius: 50%; background: rgba(162,71,47,.14); color: var(--clay); display: grid; place-items: center; font-size: 11px; flex: none; }

.float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: #ffffff; border: 1px solid rgba(63,10,13,.08); box-shadow: 0 24px 50px -22px rgba(0,0,0,.5); will-change: transform; }
.float-card strong { display: block; font-size: 14px; color: var(--ink); }
.float-card small { font-size: 12px; color: var(--ink-soft); }
.fc__icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--clay); color: #fff; font-size: 14px; }
.fc1 { top: -26px; right: -18px; }
.fc2 { bottom: -26px; left: -26px; }

.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe-dim); }
.scroll-cue i { width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.scroll-cue i::after { content:""; position:absolute; top:-40%; left:0; width:1px; height:40%; background:var(--cream); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0%{transform:translateY(0);} 100%{transform:translateY(240%);} }

/* red-section ambient glow */
.sec--red { overflow: hidden; }
.sec--red::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(90% 60% at 80% 0%, rgba(233,196,138,.10), transparent 60%); }
.sec--red .wrap { position: relative; z-index: 1; }

/* ============ REAL PROBLEM (tried fixing it) ============ */
.tried { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 46px 0 40px; }
.tried li { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--card); color: var(--fg-soft); font-size: 16px; transition: transform .4s var(--ease), border-color .3s ease; }
.tried li:hover { transform: translateY(-3px); border-color: var(--accent); }
.tried li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.tried__after { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.8vw, 1.9rem); line-height: 1.35; color: var(--fg); margin-bottom: 26px; text-wrap: balance; }
.tried__after em { font-style: italic; color: var(--accent); }
.prose p { color: var(--fg-soft); font-size: clamp(1.02rem, 1.5vw, 1.18rem); max-width: 64ch; }
.prose p + p { margin-top: 18px; }
/* Body copy now matches --fg in both themes, so an em set to --fg would be
   italic-only. Accent keeps the emphasis visible (gold on red, deep red on
   paper), matching how .section__title em already behaves. */
.prose em { color: var(--accent); font-style: italic; }

/* ============ SYMPTOMS (cost) ============ */
.symptoms { list-style: none; margin: 46px 0; border-top: 1px solid var(--line); }
.symptoms li { display: flex; gap: 16px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid var(--line); font-size: clamp(1rem, 1.7vw, 1.18rem); color: var(--fg); font-family: var(--sans); font-weight: 400; transition: color .3s ease, padding-left .4s var(--ease); }
.symptoms li span { color: var(--accent); font-size: 1rem; flex: none; }
.symptoms li em { font-style: italic; color: var(--accent); }
.symptoms li:hover { padding-left: 12px; }
.closer { font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.4; color: var(--fg-soft); max-width: none; text-wrap: balance; }
.closer em { color: var(--accent); font-style: italic; }

/* ============ PILLARS ============ */
.head--narrow { max-width: 42ch; margin-bottom: 56px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar { padding: 34px 30px; border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card); transition: transform .5s var(--ease), border-color .4s ease, box-shadow .4s ease; }
.pillar:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 24px 50px -30px rgba(63,10,13,.35); }
.pillar__num { font-family: var(--serif); font-size: 1rem; color: var(--accent); letter-spacing: .1em; }
.pillar h3 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin: 14px 0 12px; color: var(--fg); }
.pillar p { color: var(--fg-soft); font-size: 15.5px; }

/* ============ WORK / FLOW (red) ============ */
.work__grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.automations { list-style: none; margin-top: 34px; }
.automations li { position: relative; padding: 15px 0 15px 30px; border-top: 1px solid var(--card-line); color: var(--fg-soft); font-size: 15.5px; }
.automations li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.flow { padding: 24px; }
.flow__head { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 20px; }
.flow__diagram { position: relative; }
.flow__wires { position: absolute; left: 22px; top: 0; width: 40px; height: 100%; overflow: visible; }
.flow__wires .wire { fill: none; stroke: rgba(63,10,13,.16); stroke-width: 2; stroke-dasharray: 4 5; }
.flow__wires .pulse { fill: var(--clay); filter: drop-shadow(0 0 6px var(--clay)); opacity: 0; }
.node { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 20px; border-radius: 12px; background: #faf4e9; border: 1px solid rgba(63,10,13,.08); transition: border-color .35s ease, background .35s ease, transform .35s var(--ease), box-shadow .35s ease; }
.node:last-child { margin-bottom: 0; }
.node__ic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 16px; background: #ffffff; border: 1px solid rgba(63,10,13,.10); color: var(--clay); transition: all .35s ease; }
.node__tx strong { display: block; font-size: 15px; color: var(--ink); }
.node__tx small { font-size: 12.5px; color: var(--ink-soft); }
.node.is-active { border-color: var(--clay); background: #fdf0e6; transform: translateX(4px); box-shadow: 0 12px 30px -14px rgba(162,71,47,.5); }
.node.is-active .node__ic { background: var(--clay); color: #fff; border-color: var(--clay); }

/* ============ WEEK / TASKS (light) ============ */
.tasks { margin-top: 44px; padding: 12px 8px; }
.task { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 10px; font-size: 16px; color: var(--fg); transition: color .5s ease; }
.task + .task { border-top: 1px solid var(--line); }
.cb { width: 20px; height: 20px; border-radius: 6px; border: 1.6px solid var(--fg-dim); flex: none; position: relative; transition: all .4s var(--ease); }
.task__by { margin-left: auto; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); opacity: 0; transition: opacity .4s ease; }
.task.done .cb { background: var(--accent); border-color: var(--accent); }
.task.done .cb::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--paper); }
.task.done .task__t { color: var(--fg-dim); text-decoration: line-through; text-decoration-color: var(--card-line); }
.task.done .task__by { opacity: 1; color: var(--accent); }

/* ============ PROCESS (animated timeline) ============ */
.head--wide { max-width: 40ch; margin-bottom: 60px; }
.process__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.process__head { position: sticky; top: 116px; }
.process__note { margin-top: 20px; color: var(--fg-soft); font-size: 16px; max-width: 32ch; }
.timeline { position: relative; }
.timeline__line { position: absolute; left: 27px; top: 12px; bottom: 12px; width: 2px; background: var(--card-line); border-radius: 2px; overflow: visible; }
/* The fill is scaled, not resized: growing it by `height` relaid out and
   repainted the gradient (and the glow below it) on every scroll frame,
   which is what made this section stutter. scaleY stays on the compositor.
   The dot rides separately so the scale can't squash it into an ellipse. */
.timeline__fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 2px; background: linear-gradient(180deg, var(--accent), #c96a3a); transform-origin: 50% 0; will-change: transform; }
.timeline__dot { position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px 3px var(--accent-soft), 0 0 6px 1px var(--accent); opacity: 0; will-change: transform, opacity; }
/* Without JS the line just reads as complete; main.js empties it before the
   first scroll, the same way .reveal is pre-hidden only for html.js. */
html.js .timeline__fill { transform: scaleY(0); }
.timeline__steps { list-style: none; display: flex; flex-direction: column; gap: clamp(30px, 4.5vw, 48px); }
.tstep { position: relative; padding-left: 76px; }
.tstep__marker { position: absolute; left: 16px; top: -2px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--card-line); display: grid; place-items: center; transition: transform .3s var(--ease), border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.tstep__num { font-family: var(--serif); font-size: 13px; line-height: 1; color: var(--fg-dim); transition: color .3s ease; }
.tstep__marker.is-on { border-color: var(--accent); background: var(--accent); transform: scale(1.14); box-shadow: 0 0 0 6px var(--accent-soft), 0 0 22px -4px var(--accent); }
.tstep__marker.is-on .tstep__num { color: var(--paper); }
.tstep__eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.tstep__card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: var(--fg); margin-bottom: 10px; line-height: 1.12; }
.tstep__card p { color: var(--fg-soft); font-size: 15.5px; max-width: 58ch; }

/* ============ PROOF ============ */
.proof__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; }
.quote { padding: 34px; border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card); display: flex; flex-direction: column; }
.quote--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 40px; }
.quote blockquote { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.4; color: var(--fg); margin: 22px 0; }
.quote--wide blockquote { max-width: 34ch; }
.quote figcaption strong { display: block; font-size: 15px; color: var(--fg); }
.quote figcaption span { font-size: 13px; color: var(--fg-soft); }

.photo-slot { position: relative; border-radius: 12px; overflow: hidden; border: 1px dashed var(--fg-dim); background: repeating-linear-gradient(-45deg, rgba(63,10,13,.03) 0 10px, transparent 10px 20px), rgba(63,10,13,.03); display: grid; place-items: center; color: var(--fg-dim); }
.photo-slot span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.photo-slot::after { content: attr(data-label); position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); opacity: .7; }
.photo-slot--avatar { width: 62px; height: 62px; border-radius: 50%; }
.photo-slot--avatar::after { display: none; }
.photo-slot--wide { width: 100%; aspect-ratio: 16/9; }
.quote--wide .photo-slot--wide { flex: 1.1; }
.quote--wide .qw { flex: 1; display: flex; flex-direction: column; }

/* ============ FIT ============ */
.fit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 54px; }
.fit__col { padding: 34px 32px; border-radius: var(--radius); border: 1px solid var(--card-line); background: var(--card); }
.fit__col h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin-bottom: 22px; }
.fit__col ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.fit__col li { position: relative; padding-left: 30px; color: var(--fg-soft); font-size: 15.5px; }
.fit__col li::before { position: absolute; left: 0; top: 0; font-size: 16px; }
.fit__col--yes h3 { color: var(--accent); }
.fit__col--yes li::before { content: "✓"; color: var(--accent); }
.fit__col--no h3 { color: var(--fg-soft); }
.fit__col--no li::before { content: "·"; color: var(--fg-dim); font-weight: 700; }
.fit__cta { margin-top: 46px; display: flex; justify-content: center; }
.agenda { margin-top: 40px; padding: 28px 34px; border-left: 2px solid var(--accent); background: var(--accent-soft); border-radius: 0 12px 12px 0; font-family: var(--sans); font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.6; color: var(--fg); }
.agenda em { color: var(--accent); font-style: italic; }

/* ============ FAQ ============ */
.accordion { margin-top: 48px; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; padding: 26px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.55rem); color: var(--fg); transition: color .3s ease; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa__x { position: relative; width: 18px; height: 18px; flex: none; }
.qa__x::before, .qa__x::after { content: ""; position: absolute; background: var(--accent); transition: transform .35s var(--ease), opacity .35s ease; }
.qa__x::before { top: 8px; left: 0; width: 18px; height: 2px; }
.qa__x::after { top: 0; left: 8px; width: 2px; height: 18px; }
.qa[open] .qa__x::after { transform: rotate(90deg); opacity: 0; }
.qa__a { overflow: hidden; }
.qa__a p { color: var(--fg-soft); font-size: 16px; padding-bottom: 26px; max-width: 62ch; }
.qa__a em { color: var(--accent); font-style: italic; }

/* ============ CTA (red) ============ */
.cta { position: relative; overflow: hidden; text-align: center; padding: clamp(110px, 15vw, 180px) 0; background: var(--oxblood-dark); }
.cta__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.cta .cta__inner { position: relative; z-index: 2; }
.cta__canvas { z-index: 0; }
/* Softened alongside .hero__veil: the old stop reached full --oxblood-dark by
   78% and swallowed the outer rings. */
.cta::after { content:""; position:absolute; inset:0; z-index:0; background: radial-gradient(90% 130% at 50% 120%, transparent 45%, rgba(42,2,6,.7) 92%); pointer-events:none; }
.cta__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.04; color: var(--cream); margin-bottom: 26px; letter-spacing: -0.02em; text-wrap: balance; }
.cta__sub { color: var(--cream); font-size: clamp(1.05rem, 1.7vw, 1.3rem); max-width: 54ch; margin: 0 auto 40px; }
.cta__actions { display: flex; justify-content: center; }
.cta__note { margin-top: 26px; font-size: 13px; letter-spacing: .06em; color: var(--taupe-dim); line-height: 1.7; }
/* The WhatsApp escape hatch offered under every call CTA. Gold rather than
   inheriting --taupe-dim: at 13px a link needs to look like one. */
.cta__note a { color: var(--gold); border-bottom: 1px solid currentColor; transition: color .3s ease, border-color .3s ease; }
.cta__note a:hover { color: var(--cream); }

/* ============ FOOTER ============ */
.footer { background: var(--oxblood-dark); border-top: 1px solid rgba(254,237,201,.10); padding: 50px 0; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 18px; color: var(--cream); }
.footer__pillars { list-style: none; display: flex; gap: 26px; flex-wrap: wrap; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe-dim); }
.footer__copy { font-size: 13px; color: var(--taupe-dim); }

/* ============ REVEAL ============ */
/* will-change applied transiently by GSAP during the tween.

   Reveal targets start hidden in CSS so they never flash in at their final
   position before the scripts run. Gated on html.js (set by the inline head
   script) so a no-JS visitor still sees everything, and skipped entirely when
   motion is reduced. */
html.js:not(.motion-reduced) .reveal { opacity: 0; transform: translateY(26px); }

/* GSAP rewrites `transform` frame-by-frame during the reveal. Any CSS
   transform transition on the same element (.pillar, .path-link, .btn …)
   would re-interpolate every write and smear the motion, so suppress it
   until the element has landed and main.js adds .is-revealed. */
html.js .reveal:not(.is-revealed) { transition: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 60px; }
  .hero__stage { max-width: 460px; }
  .work__grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: 1fr; gap: 44px; }
  .process__head { position: static; top: auto; }
  .proof__grid { grid-template-columns: 1fr; }
  .fit__grid { grid-template-columns: 1fr; }
  .tried { grid-template-columns: 1fr; }
  .quote--wide { flex-direction: column; align-items: flex-start; gap: 24px; }
  .nav__links { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .float-card { display: none; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .nav__cta { padding: 9px 16px; }
}

/* ============ ACCESSIBILITY ============ */
/* Visually-hidden (available to screen readers) */
.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;
}

/* Skip link — appears on keyboard focus */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 10000;
  transform: translateY(-160%); transition: transform .25s var(--ease);
  background: var(--cream); color: #4c0004;
  padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 500;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.5);
}
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--gold); outline-offset: 2px; }

/* Clear, high-contrast keyboard focus ring.
   Gold reads well on the dark/red surfaces; dark red on the light sections. */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.section:not(.sec--red) :focus-visible { outline-color: var(--red-accent); }
/* The booking dialog is a direct child of <body>, so it never matched the
   .section rule above and inherited the gold ring — gold on --paper-card is
   ~1.6:1 and fails 1.4.11. These surfaces are always light, so pin them. */
.bookmodal :focus-visible,
.bookcal :focus-visible { outline-color: var(--red-accent); }
/* Don't show the ring for mouse users who don't need it */
:focus:not(:focus-visible) { outline: none; }
/* Programmatic skip-link target: move focus without a full-width outline */
main[tabindex="-1"]:focus { outline: none; }

/* ============ REDUCE-MOTION TOGGLE ============ */
.motion-toggle {
  position: absolute; right: 20px; bottom: 20px; z-index: 6;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 12px; border-radius: 999px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; line-height: 1;
  color: var(--cream); background: rgba(42, 2, 6, 0.74);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(254, 237, 201, 0.22); cursor: pointer;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.6);
  transition: background .3s ease, border-color .3s ease, transform .3s var(--ease), color .3s ease;
}
.motion-toggle:hover { border-color: var(--gold); transform: translateY(-1px); color: #fff; }
.motion-toggle__icon { width: 16px; height: 16px; flex: none; color: var(--gold); }
.motion-toggle__slash { opacity: 0; transition: opacity .3s ease; }
.motion-toggle[data-reduced="true"] .motion-toggle__icon { color: var(--taupe); }
.motion-toggle[data-reduced="true"] .motion-toggle__slash { opacity: 1; }
/* Fallback: fixed corner when there is no hero to sit inside */
.motion-toggle--floating { position: fixed; left: 16px; right: auto; bottom: 16px; z-index: 120; }
@media (max-width: 560px) {
  .motion-toggle { right: 14px; bottom: 14px; padding: 9px 13px; font-size: 12px; }
  .motion-toggle--floating { left: 12px; right: auto; bottom: 12px; }
}

/* ============================================================
   BOOKING MODAL
   Was duplicated byte-for-byte in changemakers/ and service-businesses/.
   Lifted here so there is one copy; the controller lives in booking.js.
   ============================================================ */
.bookmodal {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.bookmodal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s var(--ease); }
.bookmodal__backdrop {
  position: absolute; inset: 0; background: rgba(42,2,6,.62);
  -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1);
  cursor: pointer;
}
.bookmodal__dialog {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: min(620px, 100%); max-height: min(900px, 92vh);
  background: var(--paper-card); border: 1px solid rgba(63,10,13,.10); border-radius: var(--radius);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(233,196,138,.14);
  overflow: hidden; transform: translateY(14px) scale(.985);
  transition: transform .4s var(--ease);
}
.bookmodal.is-open .bookmodal__dialog { transform: none; }
.bookmodal__dialog:focus { outline: none; }
.bookmodal__head {
  position: relative; padding: 22px 52px 16px 26px;
  background: linear-gradient(180deg, #fff, var(--paper-card));
  border-bottom: 1px solid rgba(63,10,13,.08);
}
.bookmodal__eyebrow {
  display: inline-block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--clay); font-weight: 600; margin-bottom: 8px;
}
.bookmodal__title {
  font-family: var(--serif); color: var(--ink); font-size: clamp(21px, 3.4vw, 26px);
  line-height: 1.14; margin: 0; font-weight: 600;
}
.bookmodal__sub { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
/* Same escape hatch inside the modal, on a light surface. */
.bookmodal__sub a { color: var(--red-accent); font-weight: 500; border-bottom: 1px solid currentColor; transition: color .3s ease; }
.bookmodal__sub a:hover { color: var(--oxblood); }
.bookmodal__close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--oxblood);
  font-size: 26px; line-height: 1; cursor: pointer; border-radius: 50%;
  transition: background .2s ease, transform .25s var(--ease), color .2s ease;
}
.bookmodal__close:hover { background: rgba(73,3,8,.08); color: var(--oxblood-deep); transform: rotate(90deg); }
.bookmodal__body { position: relative; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; padding: 22px 26px 26px; }
body.bookmodal-open { overflow: hidden; }

@media (max-width: 560px) {
  .bookmodal { padding: 0; }
  .bookmodal__dialog { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bookmodal, .bookmodal__dialog, .bookmodal__close { transition: none; }
}
html.motion-reduced .bookmodal,
html.motion-reduced .bookmodal__dialog,
html.motion-reduced .bookmodal__close { transition: none !important; }

/* ============================================================
   BOOKING WIDGET (.bookcal)
   Rendered by booking.js into any [data-bookcal] mount.
   ============================================================ */
.bookcal {
  /* The contextual tokens (--fg, --card, …) are declared on .section, and the
     modal lives outside every .section — so each is given a raw-palette
     fallback. Everything below consumes only --bc-*. */
  --bc-fg:      var(--fg, var(--ink));
  --bc-soft:    var(--fg-soft, var(--ink-soft));
  --bc-card:    var(--card, var(--paper-card));
  --bc-accent:  var(--accent, var(--red-accent));
  /* Not --card-line: at .12 alpha it composites to ~1.2:1, fine for a card
     edge but a 1.4.11 failure on a control boundary. This is ~3.4:1. */
  --bc-line:    rgba(73, 3, 8, .50);
  --bc-line-soft: rgba(73, 3, 8, .16);
  --bc-error:   #a3121a;

  font-family: var(--sans);
  color: var(--bc-fg);
}

/* A step with `display:flex` would beat [hidden]'s UA `display:none`, leaving
   hidden steps visible AND tabbable. Cheap insurance. */
.bookcal [hidden] { display: none !important; }

/* The fixed nav would otherwise sit over a focused chip near the top of the
   inline widget (2.4.11 Focus Not Obscured). */
.bookcal :is(input, button, select, textarea, a[href], [tabindex]) { scroll-margin-top: 96px; }

/* No-JS fallback: same html.js gate the .reveal system uses. */
html.js .bookcal__fallback { display: none; }
.bookcal__fallback { padding: 4px 0 8px; }
.bookcal__fallback-title { font-family: var(--serif); font-size: 20px; color: var(--ink); margin-bottom: 10px; font-weight: 600; }
.bookcal__fallback p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.bookcal__fallback a { color: var(--red-accent); border-bottom: 1px solid currentColor; }

/* ---- progress ---- */
.bookcal__progress {
  list-style: none; display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 0;
  font-size: 12.5px; letter-spacing: .04em; color: var(--bc-soft);
}
.bookcal__progress-item { display: inline-flex; align-items: center; gap: 7px; }
.bookcal__progress-item + .bookcal__progress-item::before { content: ""; width: 16px; height: 1px; background: var(--bc-line-soft); margin-right: 7px; }
.bookcal__progress-num {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: var(--bc-line-soft); color: var(--bc-fg); font-size: 11.5px; font-weight: 600;
}
.bookcal__progress-item[aria-current="step"] { color: var(--bc-fg); font-weight: 600; }
.bookcal__progress-item[aria-current="step"] .bookcal__progress-num { background: var(--ink); color: var(--paper); }

/* ---- steps ---- */
.bookcal__step { display: flex; flex-direction: column; }
.bookcal__step-title { font-family: var(--serif); font-size: clamp(19px, 2.6vw, 23px); font-weight: 600; color: var(--bc-fg); line-height: 1.2; }
.bookcal__step-title:focus { outline: none; }
.bookcal__step-note { margin-top: 5px; font-size: 14px; color: var(--bc-soft); }

/* ---- timezone ---- */
.bookcal__tz { margin-top: 18px; }
.bookcal__label { display: block; font-size: 14px; font-weight: 600; color: var(--bc-fg); margin-bottom: 5px; }
.bookcal__select,
.bookcal__input,
.bookcal__textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--bc-fg);
  background: #fff; border: 1px solid var(--bc-line); border-radius: 10px;
  padding: 11px 13px; min-height: 44px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bookcal__textarea { resize: vertical; line-height: 1.55; }
.bookcal__select:hover,
.bookcal__input:hover,
.bookcal__textarea:hover { border-color: var(--ink); }
.bookcal__input[aria-invalid="true"],
.bookcal__textarea[aria-invalid="true"] { border-color: var(--bc-error); box-shadow: 0 0 0 3px rgba(163,18,26,.10); }

/* ---- status line (the only live region) ----
   The height is reserved for two lines and never collapses. say() blanks the
   region for a moment to force screen readers to re-announce an identical
   message; with a :empty rule that collapsed it, every date selection made the
   whole widget lurch up ~37px and back. Reserving the space costs a little
   whitespace and removes the flicker entirely. */
.bookcal__status {
  min-height: 2.9em; margin-top: 14px; font-size: 14px; line-height: 1.45;
  color: var(--bc-soft);
}
@media (max-width: 560px) { .bookcal__status { min-height: 4.35em; } }

/* ---- chip groups ---- */
.bookcal__group { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.bookcal__legend { padding: 0; font-size: 14px; font-weight: 600; color: var(--bc-fg); margin-bottom: 10px; }
.bookcal__month { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--bc-soft); margin: 14px 0 8px; }
.bookcal__month:first-of-type { margin-top: 0; }
.bookcal__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.bookcal__chip { position: relative; display: inline-flex; }
.bookcal__chip-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; appearance: none; cursor: pointer; }
.bookcal__chip-face {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 44px;
  /* Symmetric side padding permanently reserves room for the checked tick, so
     selecting a chip can never change its size. */
  min-width: 76px; padding: 6px 22px;
  background: #fff; border: 1px solid var(--bc-line); border-radius: 10px;
  font-size: 14.5px; color: var(--bc-fg); line-height: 1.25; text-align: center;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.bookcal__chip-input:hover ~ .bookcal__chip-face { border-color: var(--ink); background: #fffdf7; }
.bookcal__chip-input:focus-visible ~ .bookcal__chip-face { outline: 3px solid var(--red-accent); outline-offset: 3px; }
/* Checked state must not be colour-only (1.4.1) — and background-color is
   discarded in forced-colors, where the opacity:0 input is invisible. The
   glyph and the border weight are what survive. */
.bookcal__chip-input:checked ~ .bookcal__chip-face {
  border-color: var(--ink);
  /* The heavier ring is an inset shadow, not a wider border. Growing the
     border and shrinking the padding to match still leaves a sub-pixel shift
     once the browser scales fractional values; a shadow costs no layout at all.
     Forced-colors drops shadows, which is why the tick below carries the
     non-colour signal there. */
  box-shadow: inset 0 0 0 1px var(--ink);
  background: rgba(73,3,8,.06);
  /* Deliberately no font-weight change: bolder text is wider, and a ~1.5px
     reflow per chip reads as jitter while arrowing through the list. */
}
/* Absolutely positioned so it is NOT a flex item. As a flex item in this
   column container it added an entire row, making the chip 19px taller,
   stretching every chip on that row and shifting the page below it. */
.bookcal__chip-input:checked ~ .bookcal__chip-face::before {
  content: "✓";
  position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 700; line-height: 1;
}
.bookcal__chip-dow { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bc-soft); }
.bookcal__chip-input:checked ~ .bookcal__chip-face .bookcal__chip-dow { color: var(--bc-fg); }
.bookcal__chip-day { font-weight: 500; }
.bookcal__more { margin-top: 12px; align-self: flex-start; }

.bookcal__group--times { animation: none; }

/* ---- review list ---- */
.bookcal__summary {
  margin: 16px 0 22px; padding: 16px 18px;
  background: var(--bc-card); border: 1px solid var(--bc-line-soft); border-radius: 12px;
}
.bookcal__summary-row { display: flex; gap: 14px; flex-wrap: wrap; }
.bookcal__summary-row + .bookcal__summary-row { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--bc-line-soft); }
.bookcal__summary-term { flex: none; width: 88px; font-size: 13.5px; color: var(--bc-soft); }
.bookcal__summary-value { font-size: 14.5px; font-weight: 500; color: var(--bc-fg); }

/* ---- fields ---- */
.bookcal__field { margin-top: 16px; }
.bookcal__optional { font-weight: 400; color: var(--bc-soft); }
.bookcal__hint { font-size: 13.5px; color: var(--bc-soft); margin-bottom: 6px; }
.bookcal__error { font-size: 13.5px; font-weight: 600; color: var(--bc-error); }
.bookcal__error:not(:empty) { margin-bottom: 6px; }

/* ---- custom fields from the GHL calendar ---- */
.bookcal__group--check { margin-top: 16px; }
.bookcal__checks { display: grid; gap: 2px; }
.bookcal__check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.bookcal__check-input { flex: none; width: 20px; height: 20px; accent-color: var(--ink); cursor: pointer; }
.bookcal__check-label { font-size: 15px; color: var(--bc-fg); cursor: pointer; flex: 1; }

/* Honeypot. Off-screen rather than display:none so bots still "see" it. */
.bookcal__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- error summary ---- */
.bookcal__errors {
  margin-top: 16px; padding: 15px 18px;
  border: 2px solid var(--bc-error); border-radius: 12px; background: rgba(163,18,26,.05);
}
.bookcal__errors:focus { outline: none; box-shadow: 0 0 0 3px rgba(163,18,26,.22); }
.bookcal__errors-title { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--bc-error); margin-bottom: 7px; }
.bookcal__errors-list { margin: 0; padding-left: 19px; font-size: 14px; }
.bookcal__errors-list li + li { margin-top: 4px; }
.bookcal__errors-list a { color: var(--bc-error); font-weight: 600; border-bottom: 1px solid currentColor; }

/* ---- actions ---- */
.bookcal__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.bookcal__actions .btn { min-height: 44px; }
/* aria-disabled, not disabled — the control keeps its place in the tab order
   so it can explain itself instead of vanishing under the user's fingers. */
.bookcal [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.bookcal [aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* ---- terminal states ---- */
.bookcal__done, .bookcal__notice { padding: 6px 0 4px; }
.bookcal__done-title, .bookcal__notice-title { font-family: var(--serif); font-size: clamp(20px, 3vw, 25px); font-weight: 600; color: var(--bc-fg); line-height: 1.2; }
.bookcal__done-title:focus, .bookcal__notice-title:focus { outline: none; }
.bookcal__done-body, .bookcal__notice p { margin-top: 10px; color: var(--bc-soft); font-size: 15px; line-height: 1.6; }
.bookcal__done-body strong { color: var(--bc-fg); font-weight: 600; }
.bookcal__done-actions, .bookcal__notice .btn { margin-top: 18px; }
.bookcal__done a, .bookcal__notice a:not(.btn) { color: var(--red-accent); border-bottom: 1px solid currentColor; }

/* Step + reveal transitions. Global reduced-motion rules already flatten these
   to .001ms, so no separate handling is needed. */
.bookcal__step, .bookcal__done, .bookcal__notice { animation: bookcal-in .28s var(--ease) both; }
@keyframes bookcal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (forced-colors: active) {
  .bookcal__chip-face { border-color: ButtonBorder; }
  .bookcal__chip-input:checked ~ .bookcal__chip-face { border-color: Highlight; }
}

@media (max-width: 560px) {
  .bookcal__summary-term { width: 100%; }
  .bookcal__actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   CASE STUDIES
   Shared by /case-studies/ (the filterable index) and every
   /case-studies/<slug>/ detail page. Built on the same theme
   tokens as .section so it works on light, alt, or red surfaces.
   ============================================================ */

/* ---- tag chips (filter pills + card/hero tags share the shape) ---- */
.cs-tag {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 100px;
  border: 1px solid var(--card-line); color: var(--fg-soft);
  background: transparent;
}

/* ---- filter bar (buttons; index page only) ---- */
.cs-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.cs-filter {
  cursor: pointer; font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  padding: 9px 18px; border-radius: 100px; border: 1px solid var(--card-line);
  background: var(--card); color: var(--fg-soft);
  transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s var(--ease);
}
.cs-filter:hover { border-color: var(--accent); color: var(--fg); transform: translateY(-2px); }
.cs-filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.section.sec--red .cs-filter.is-active { color: var(--oxblood-dark); }

/* ---- case study grid + card ---- */
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px; }
.cs-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card);
  overflow: hidden;
  transition: opacity .4s var(--ease), transform .5s var(--ease), border-color .4s ease, box-shadow .4s ease;
}
.cs-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 30px 60px -32px rgba(63,10,13,.4); }
.cs-card.is-hidden { display: none; }
.cs-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.cs-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.cs-card:hover .cs-card__media img { transform: scale(1.04); }
.cs-card__body { padding: 26px 28px 30px; }
.cs-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cs-card__tags .cs-tag { padding: 5px 12px; font-size: 11px; }
.cs-card__title { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--fg); margin-bottom: 10px; }
.cs-card__desc { color: var(--fg-soft); font-size: 15px; line-height: 1.6; }
.cs-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--accent); }
.cs-card__more svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.cs-card:hover .cs-card__more svg { transform: translateX(3px); }
.cs-card__link { position: absolute; inset: 0; z-index: 2; }
.cs-empty { display: none; color: var(--fg-dim); font-size: 15px; margin-top: 48px; }
.cs-empty.is-visible { display: block; }

/* ---- hero meta row (client · role · scope · live link) ---- */
.cs-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(22px, 4vw, 46px);
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--card-line);
}
.cs-meta__item { display: flex; flex-direction: column; gap: 5px; padding: 6px 0; text-align: left; }
.cs-meta__label { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); }
.cs-meta__value { font-family: var(--sans); font-size: 14.5px; color: var(--fg); }
.cs-meta__value a { border-bottom: 1px solid var(--accent); color: var(--accent); }

/* ---- centered caption, for anything that isn't inside a <figure> ---- */
.cs-cap {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; font-family: var(--sans); font-size: 12.5px; letter-spacing: .04em; color: var(--fg-dim);
}

/* ---- unified figure: framed screenshot + caption ----
   Screenshots are never cropped — a page shot is shown at its full length, so
   the frame just sizes to the image. Full pages get long; that is the point,
   and .cs-zoom opens any of them large. */
.cs-figure { margin: 0; }
.cs-figure__frame { border-radius: var(--radius); border: 1px solid var(--card-line); background: var(--card); overflow: hidden; }
.cs-figure__frame img { display: block; width: 100%; height: auto; }
.cs-figure__cap { margin-top: 12px; font-family: var(--sans); font-size: 12.5px; line-height: 1.5; letter-spacing: .03em; color: var(--fg-dim); }

/* ---- a framed screenshot that opens in the lightbox ---- */
.cs-zoom {
  display: block; width: 100%; padding: 0; cursor: zoom-in; overflow: hidden;
  border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card);
  transition: transform .45s var(--ease), border-color .3s ease, box-shadow .4s ease;
}
.cs-zoom img { display: block; width: 100%; height: auto; }
.cs-zoom:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 30px 60px -32px rgba(63,10,13,.45); }
.cs-zoom__hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--sans); font-size: 12.5px; color: var(--fg-dim); }
.cs-zoom__hint svg { width: 13px; height: 13px; }

/* ---- before/after reveal slider ----
   The control is a real <input type="range">, sized to cover the whole frame
   and made invisible. That buys the arrow keys, Home/End, focus, touch
   dragging and the "slider" role from the platform instead of reimplementing
   them with pointer events; the visible divider and knob are just decoration
   driven by --pos. */
.cs-slider__frame {
  --pos: 50%;
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--card-line); background: var(--card);
}
.cs-slider__shot { display: block; width: 100%; height: auto; }
/* The "before" shot sits exactly on top of the "after" one and is clipped back
   to --pos. Both captures share a viewport ratio, so they register perfectly. */
.cs-slider__before { position: absolute; inset: 0; z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cs-slider__before .cs-slider__shot { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

.cs-slider__tag {
  position: absolute; top: 14px; z-index: 2; pointer-events: none;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px;
  background: rgba(42, 2, 6, .62); color: var(--cream);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cs-slider__tag--before { left: 14px; }
.cs-slider__tag--after { right: 14px; }

.cs-slider__range {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; cursor: ew-resize;
  /* Let a vertical swipe scroll the page; only horizontal drags drive it. */
  touch-action: pan-y;
}
/* A hairline thumb keeps the reported value aligned with the pointer (a wide
   thumb insets its own travel by half its width at each end). Pressing
   anywhere on the track jumps to that spot and starts the drag. */
.cs-slider__range::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100%; background: transparent; border: 0; cursor: ew-resize; }
.cs-slider__range::-moz-range-thumb { width: 2px; height: 100%; background: transparent; border: 0; border-radius: 0; cursor: ew-resize; }
.cs-slider__range::-moz-range-track { background: transparent; border: 0; }
.cs-slider__range:focus { outline: none; }

.cs-slider__divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4;
  width: 2px; margin-left: -1px; background: var(--cream);
  box-shadow: 0 0 0 1px rgba(42, 2, 6, .22);
  pointer-events: none;
}
.cs-slider__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  background: var(--cream); color: var(--oxblood);
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .7);
}
.cs-slider__knob svg { width: 15px; height: 15px; }
/* Focus sits on the invisible input, so surface it on the knob the user sees. */
.cs-slider__range:focus-visible ~ .cs-slider__divider .cs-slider__knob { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Not a flex row: the keycaps sit inside the sentence, so they have to wrap
   with the words rather than being pushed to the end of the line. */
.cs-slider__hint { display: block; text-align: center; }
.cs-slider__hint kbd {
  display: inline-block; vertical-align: baseline;
  font-family: var(--sans); font-size: 11px; line-height: 1;
  padding: 3px 6px; border-radius: 5px;
  border: 1px solid var(--card-line); background: var(--card); color: var(--fg-soft);
}
/* ---- before / after comparison (stays side by side for real comparison) ---- */
.cs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 30px); align-items: start; margin-top: 44px; }
.cs-compare__label {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-dim);
}
.cs-compare__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cs-compare__item--after .cs-compare__label { color: var(--accent); }
.cs-compare__item--after .cs-zoom { border-color: var(--accent); box-shadow: 0 26px 54px -30px rgba(63,10,13,.42); }

/* ---- the goal: the pivot of the whole case study, so it gets a full-width
       oxblood panel rather than a quiet inline note ---- */
.cs-goal {
  position: relative; overflow: hidden; text-align: center;
  margin-top: clamp(48px, 6.5vw, 84px);
  padding: clamp(42px, 6vw, 78px) clamp(26px, 5vw, 60px);
  border-radius: var(--radius); background: var(--oxblood); color: var(--cream);
  box-shadow: 0 40px 90px -50px rgba(63,10,13,.7);
}
.cs-goal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(78% 70% at 50% 0%, rgba(233,196,138,.17), transparent 62%);
}
.cs-goal > * { position: relative; z-index: 1; }
.cs-goal__label { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.cs-goal__text {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem); line-height: 1.3; color: var(--cream);
  max-width: 26ch; margin: 0 auto; text-wrap: balance;
}
.cs-goal__text em { font-style: italic; color: var(--gold); }

/* ---- mood boards: shown whole (never cropped), click to open the lightbox ---- */
.cs-boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; margin-top: 48px; }
.cs-board { margin: 0; display: flex; flex-direction: column; }
.cs-board--selected .cs-zoom { border-color: var(--accent); box-shadow: 0 26px 54px -30px rgba(63,10,13,.42); }
.cs-board__cap { margin-top: 18px; padding: 0 2px; }
.cs-board__badge {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 9px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.cs-board__cap h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--fg); margin-bottom: 7px; }
.cs-board__cap p { color: var(--fg-soft); font-size: 14.5px; line-height: 1.55; }

/* ---- lightbox ---- */
.cs-lightbox { position: fixed; inset: 0; z-index: 200; display: none; }
.cs-lightbox.is-open { display: block; }
.cs-lightbox__backdrop {
  position: absolute; inset: 0; background: rgba(28, 1, 4, .90);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cs-lightbox__dialog {
  position: absolute; inset: clamp(10px, 2.4vw, 30px);
  display: flex; flex-direction: column; gap: 14px;
}
.cs-lightbox__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--cream); flex: none; }
.cs-lightbox__title { font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 500; }
.cs-lightbox__count { font-family: var(--sans); font-size: 12.5px; letter-spacing: .12em; color: var(--taupe); margin-left: 12px; }
/* The board images are several thousand pixels tall, so the stage scrolls. */
.cs-lightbox__stage {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  border-radius: var(--radius); background: #fff;
  width: 100%; max-width: 900px; margin: 0 auto;
}
.cs-lightbox__stage img { display: block; width: 100%; height: auto; }
.cs-lightbox__btn {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(254,237,201,.28); background: rgba(254,237,201,.06);
  color: var(--cream); font-size: 20px; line-height: 1;
  transition: background .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.cs-lightbox__btn:hover { background: rgba(254,237,201,.16); border-color: var(--gold); transform: translateY(-2px); }
.cs-lightbox__btn svg { width: 18px; height: 18px; }
.cs-lightbox__foot { display: flex; align-items: center; justify-content: center; gap: 18px; flex: none; }

/* ---- journey / flow strip (Discover → Explore → Trust → Inquire) ----
   Set as a typographic path, not pills: bordered chips read as buttons and
   invite a click that isn't there. */
.cs-journey { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(10px, 1.8vw, 18px); margin-top: clamp(30px, 4vw, 40px); }
.cs-journey__step {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.25; color: var(--fg);
}
.cs-journey__arrow { color: var(--accent); font-size: clamp(.9rem, 1.5vw, 1.1rem); }

/* ---- outcomes: stat cards with room to say what the number means ---- */
.cs-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); margin-top: 48px; }
.cs-outcome {
  display: flex; flex-direction: column; padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card);
  transition: transform .5s var(--ease), border-color .4s ease, box-shadow .4s ease;
}
.cs-outcome:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 28px 58px -32px rgba(63,10,13,.4); }
.cs-outcome__num { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 5.4vw, 3.6rem); line-height: 1; color: var(--accent); }
.cs-outcome__label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); margin: 14px 0 10px; }
.cs-outcome__note { font-size: 14.5px; line-height: 1.6; color: var(--fg-soft); }

/* ---- testimonials: client quotes as cards, mirroring the outcome cards'
       border/card treatment so the section reads as part of the same system ---- */
.cs-testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 26px); margin-top: 48px; align-items: stretch; }
.cs-testimonial {
  position: relative; display: flex; flex-direction: column; margin: 0;
  padding: clamp(30px, 3.4vw, 42px) clamp(26px, 3vw, 34px);
  border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card);
  transition: transform .5s var(--ease), border-color .4s ease, box-shadow .4s ease;
}
.cs-testimonial:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 28px 58px -32px rgba(63,10,13,.4); }
.cs-testimonial::before {
  content: "\201C"; display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; color: var(--accent); opacity: .5;
  margin-bottom: 6px;
}
.cs-testimonial__quote { flex: 1; }
.cs-testimonial__quote p { font-family: var(--serif); font-weight: 500; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.55; color: var(--fg); text-wrap: balance; }
.cs-testimonial__quote p + p { margin-top: 14px; }
.cs-testimonial__by { display: flex; flex-direction: column; gap: 4px; margin-top: clamp(22px, 2.6vw, 28px); padding-top: clamp(18px, 2vw, 22px); border-top: 1px solid var(--line); }
.cs-testimonial__name { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--fg); }
.cs-testimonial__role { font-family: var(--sans); font-size: 12.5px; color: var(--fg-dim); }

/* ---- what shipped ---- */
.cs-shipped { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 60px); margin-top: clamp(42px, 5vw, 62px); }
.cs-shipped li { position: relative; padding: 15px 0 15px 28px; border-top: 1px solid var(--line); color: var(--fg-soft); font-size: 15px; line-height: 1.5; }
.cs-shipped li::before { content: "✓"; position: absolute; left: 0; top: 15px; color: var(--accent); font-size: 13px; }

/* ---- CRM pipeline stage chip ---- */
/* Monospaced because these are literal stage names in the CRM, not prose. */
.cs-stage {
  display: inline-flex; align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; letter-spacing: .01em; line-height: 1.3;
  padding: 7px 13px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid currentColor;
}
.cs-tagchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; padding: 5px 11px; border-radius: 100px;
  background: var(--accent-soft); color: var(--accent);
}

/* ---- vertical flow diagram (a system's steps, in order) ---- */
.cs-flow { list-style: none; position: relative; margin: clamp(30px, 4vw, 42px) 0 0; padding: 0; }
/* The spine runs between the first and last marker, not the full list height. */
.cs-flow::before {
  content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 1px;
  background: linear-gradient(var(--accent), var(--card-line));
  opacity: .5;
}
.cs-flow__step { position: relative; padding: 0 0 26px 34px; }
.cs-flow__step:last-child { padding-bottom: 0; }
.cs-flow__step::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
}
.cs-flow__label { font-size: clamp(15px, 1.6vw, 16.5px); line-height: 1.5; color: var(--fg); }
.cs-flow__note { margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--fg-soft); }
.cs-flow__sub { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.cs-flow__sub li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--fg-soft); }
.cs-flow__sub li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .65; }
/* A step whose content is a CRM stage rather than a description. */
.cs-flow__step--stage::before { background: var(--accent); }

/* ---- timed sequence (the reminder schedule) ---- */
.cs-seq { list-style: none; margin: clamp(30px, 4vw, 42px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.cs-seq__item {
  display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: clamp(14px, 2.5vw, 28px);
  align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .4s var(--ease);
}
.cs-seq__item:hover { padding-left: 10px; }
.cs-seq__time { font-family: var(--serif); font-weight: 500; font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--accent); line-height: 1.3; }
.cs-seq__what { font-size: 15.5px; line-height: 1.55; color: var(--fg-soft); }
/* The moment the sequence was building toward. */
.cs-seq__item--live .cs-seq__what { color: var(--fg); font-weight: 500; }

/* ---- two-column section: copy on one side, the visual on the other ----
   A single narrow measure of prose leaves half the section empty; this pairs
   it with whatever that section is actually showing. Also halves the rendered
   height of the full-page screenshots, which run several thousand pixels at
   full width. */
.cs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4.5vw, 68px); align-items: start; }
.cs-split__text, .cs-split__visual { min-width: 0; }
.cs-split__text .prose p { max-width: none; }
.cs-split--wide { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
@media (min-width: 901px) {
  /* The copy holds its place while a tall screenshot scrolls past it. */
  .cs-split--sticky .cs-split__text { position: sticky; top: clamp(96px, 12vh, 130px); }
}
@media (max-width: 900px) {
  .cs-split, .cs-split--wide { grid-template-columns: 1fr; }
}

/* ---- phase cards ---- */
.cs-phases { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 28px); margin-top: clamp(36px, 4.5vw, 48px); }
.cs-phase {
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card);
  transition: transform .5s var(--ease), border-color .4s ease, box-shadow .4s ease;
}
.cs-phase:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 28px 58px -32px rgba(63,10,13,.4); }
.cs-phase__num { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.cs-phase h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.5rem); color: var(--fg); margin: 12px 0 10px; }
.cs-phase p { color: var(--fg-soft); font-size: 15px; line-height: 1.6; }

/* ---- back link (detail page) ---- */
.cs-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: inherit; opacity: .85; }
.cs-back svg { width: 15px; height: 15px; }
.cs-back:hover { opacity: 1; }

@media (max-width: 860px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-outcomes { grid-template-columns: 1fr; }
  .cs-shipped { grid-template-columns: 1fr; }
  .cs-phases { grid-template-columns: 1fr; }
  .cs-testimonials { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  /* Stack the time above what happened rather than squeezing both into two
     unreadable columns. */
  .cs-seq__item { grid-template-columns: 1fr; gap: 4px; }
}
/* The board trio and the before/after pairs exist to be compared at a glance,
   so they hold their side-by-side layout further down than a normal card grid
   would — stacking only once a column is too narrow to read anything in. */
@media (max-width: 680px) {
  .cs-boards { grid-template-columns: 1fr; }
  .cs-boards .cs-zoom { max-width: 420px; }
}
@media (max-width: 560px) {
  .cs-compare { grid-template-columns: 1fr; }
  .cs-meta { justify-content: flex-start; gap: 0 26px; }
  .cs-lightbox__dialog { inset: 8px; }
}

/* ============ PHONES: PARED-BACK MOTION ============ */
/* Keep this breakpoint in step with LITE in main.js (760px). Everything
   switched off here is decoration that costs real frames on a phone; the
   JS side skips the matching work rather than just hiding the result. */
@media (max-width: 760px) {
  /* A fixed, full-viewport multiply layer forces the compositor to re-blend
     the whole screen on every scrolled frame. At .045 opacity the texture is
     effectively invisible at this size anyway. */
  .grain { display: none; }

  /* main.js never builds these on a phone; hide them so nothing reserves
     space for an empty canvas. */
  .hero__canvas, .cta__canvas { display: none; }

  /* Loops that never end: a rotating logo mark, a pulsing "live" dot and the
     scroll cue's travelling hairline. All three keep a layer awake for the
     whole visit. The cue's own gradient bar stays — only the runner goes,
     which is dropped rather than paused because it parks out of frame. */
  .brand__mark .ripples-orbit { animation: none; }
  .dash__live i { animation: none; }
  .scroll-cue i::after { display: none; }
}

/* ============ REDUCED MOTION ============ */
/* System preference OR the in-page toggle (html.motion-reduced) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}
/* Kept in step with the media query above so the in-page toggle is honest —
   it quiets transitions too, not just keyframe loops. */
html.motion-reduced *, html.motion-reduced *::before, html.motion-reduced *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html.motion-reduced { scroll-behavior: auto; }