/* ============================================================
   NEWLEAD DIGITAL — editorial brutalist × Brisbane premium
   ============================================================ */

:root {
  --bone: #ECE6D8;
  --bone-2: #E3DCCB;
  --ink: #111111;
  --ink-2: #1b1b1b;
  --paper: #F5F0E4;
  --accent: #0B6E6E;      /* clinical teal */
  --forest: #17372C;      /* deep subtropical green */
  --lime: #D6FF4B;        /* pop accent */
  --rule: rgba(17,17,17,.14);
  --rule-2: rgba(17,17,17,.07);

  /* glass tokens */
  --glass-bg:    rgba(245, 240, 228, 0.48);
  --glass-bg-2:  rgba(245, 240, 228, 0.28);
  --glass-dark:  rgba(17, 17, 17, 0.42);
  --glass-brd:   rgba(255, 255, 255, 0.6);
  --glass-brd-d: rgba(245, 240, 228, 0.18);
  --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.15) 20%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,.08) 100%);
  --shadow-sm:   0 1px 2px rgba(17,17,17,.04), 0 6px 18px -8px rgba(17,17,17,.12), inset 0 1px 0 rgba(255,255,255,.5);
  --shadow-md:   0 10px 30px -12px rgba(17,17,17,.22), 0 2px 6px rgba(17,17,17,.06), inset 0 1px 0 rgba(255,255,255,.55);
  --shadow-lg:   0 30px 60px -20px rgba(17,17,17,.28), 0 8px 20px -8px rgba(17,17,17,.1), inset 0 1px 0 rgba(255,255,255,.55);

  --f-display: "Fraunces", "Instrument Serif", Georgia, serif;
  --f-serif:   "Instrument Serif", Georgia, serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;
  --f-sans:    ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-sans);
  background: var(--bone);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.55;
  /* Note: NOT setting overflow-x here — overflow on body/html can
     break `position: sticky` for descendants. Horizontal-overflow
     prevention is handled per-section where needed. */
}
/* html { overflow-x: clip; }   ← removed; was breaking sticky in Safari + some Chrome */

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* --------- shared glass sheen helper --------- */
/* adds top specular + gradient border ring on any container marked with [data-glass] */
[data-glass] { position: relative; }
[data-glass]::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.2) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* --------- grain overlay --------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* --------- ambient blobs (behind everything) --------- */
.ambient {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.ambient__blob {
  position: absolute; display: block;
  width: 42vw; height: 42vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .4;
  will-change: transform;
}
.ambient__blob--1 { background: var(--accent); top: -16vw; left: -12vw; animation: float1 22s ease-in-out infinite; }
.ambient__blob--2 { background: var(--forest); top: 30vw; right: -14vw; opacity: .55; animation: float2 28s ease-in-out infinite; }
.ambient__blob--3 { background: var(--lime); bottom: -20vw; left: 30vw; opacity: .25; animation: float3 32s ease-in-out infinite; }
.ambient__blob--4 { background: var(--accent); top: 70vh; left: -10vw; opacity: .3; width: 28vw; height: 28vw; animation: float1 26s ease-in-out infinite reverse; }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(6vw,4vw)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-5vw,-3vw)} }
@keyframes float3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-4vw,-6vw)} }

/* Floating CTA chip — appears on scroll, desktop only */
.floating-cta {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 80;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 16px;
  background: linear-gradient(155deg, #1c1c1c, #0a0a0a);
  color: var(--paper);
  border-radius: 999px;
  border: 1px solid rgba(245,240,228,.1);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 14px 30px -10px rgba(17,17,17,.45),
    0 0 40px -10px rgba(11,110,110,.35);
  opacity: 0;
  transform: translateY(20px) scale(.96);
  pointer-events: none;
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.floating-cta:hover {
  transform: translateY(-2px) scale(1);
}
.floating-cta__label {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 9px;
  background: rgba(11,110,110,.14);
  border-radius: 999px;
}
.floating-cta__main {
  font-family: var(--f-mono); font-size: 12.5px;
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 6px;
}
@media (max-width: 720px) {
  .floating-cta { display: none; }
}

/* Exit-intent modal */
.exit-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s cubic-bezier(.2,.7,.2,1), visibility .35s;
}
.exit-modal.is-open {
  opacity: 1; visibility: visible;
}
.exit-modal__dim {
  position: absolute; inset: 0;
  background: rgba(17,17,17,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0; cursor: pointer;
}
.exit-modal__card {
  position: relative;
  max-width: 520px; width: 100%;
  background: var(--paper);
  border-radius: 28px;
  padding: 44px 40px 36px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 60px 100px -30px rgba(11,110,110,.35),
    0 30px 60px -20px rgba(0,0,0,.5);
  transform: translateY(20px);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.exit-modal.is-open .exit-modal__card { transform: translateY(0); }
.exit-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(17,17,17,.06);
  font-size: 22px; line-height: 1;
  color: var(--ink-2);
  border: 0; cursor: pointer;
  transition: background .2s, color .2s;
}
.exit-modal__close:hover { background: var(--ink); color: var(--paper); }
.exit-modal__badge {
  display: inline-block;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: var(--lime); color: var(--ink);
  margin-bottom: 18px;
}
.exit-modal__title {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 55, "opsz" 120;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.exit-modal__lede {
  font-family: var(--f-serif); font-size: 17px; line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 20px;
}
.exit-modal__checks {
  list-style: none; padding: 0; margin: 0 0 24px;
  font-family: var(--f-mono); font-size: 12.5px; line-height: 2;
  color: var(--ink-2);
}
.exit-modal__fields {
  display: flex; flex-direction: column; gap: 10px;
}
.exit-modal__fields input {
  font: inherit; font-family: var(--f-serif); font-size: 17px;
  padding: 14px 16px;
  background: rgba(17,17,17,.04);
  border: 1px solid rgba(17,17,17,.14);
  border-radius: 12px;
  color: var(--ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.exit-modal__fields input:focus {
  outline: 0;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(11,110,110,.12);
}
.exit-modal__fine {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(17,17,17,.55); text-align: center; margin: 4px 0 0;
}
.exit-modal__done {
  font-family: var(--f-serif); font-size: 18px;
  padding: 12px 0; text-align: center; margin: 0;
  color: var(--accent);
}
.exit-modal__or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 12px;
}
.exit-modal__or-line {
  flex: 1; height: 1px;
  background: var(--rule);
}
.exit-modal__or-text {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.exit-modal__book {
  margin-bottom: 8px;
}
.exit-modal__spots {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--accent); font-weight: 600;
  text-align: center; margin: 0;
}
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 9998;
  pointer-events: none;
  background: rgba(17,17,17,.04);
}
.scroll-progress__bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), #1eaaaa 70%, var(--lime));
  box-shadow: 0 0 16px rgba(11,110,110,.45), 0 0 2px rgba(11,110,110,.9);
  transition: width .1s linear;
}

/* make sure content sits above ambient */
.nav, .marquee, section, footer { position: relative; z-index: 1; }

/* ============================================================
   PRELOADER — minimalist, refined
   ============================================================ */
.preloader {
  position: fixed; inset: 0;
  z-index: 10000;
  background: var(--bone);
  display: grid; place-items: center;
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), visibility 1s;
  /* CSS failsafe — always fade away by ~2.8s, even if JS fails */
  animation: preloader-failsafe 0.01s linear 2.8s forwards;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes preloader-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.preloader__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 24px;
  text-align: center;
  animation: pre-breath 2.4s cubic-bezier(.45,0,.55,1) infinite;
}
.preloader__mark {
  width: clamp(48px, 6vw, 72px);
  height: auto;
  color: var(--ink);
  display: block;
}
/* N path — stroke draws on, then the lime chip pops */
.preloader__mark .preloader__n {
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
  animation: pre-n-draw 1.4s cubic-bezier(.6,.05,.3,.95) .15s forwards;
}
.preloader__mark .preloader__chip {
  transform-origin: 21.5px 2.5px;
  transform: scale(0);
  animation: pre-chip-pop .35s cubic-bezier(.2,1.6,.5,1) 1.25s forwards;
}
@keyframes pre-n-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes pre-chip-pop {
  to { transform: scale(1); }
}
.preloader__hidden {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2); opacity: 0;
  margin: 0;
  animation: pre-rise 1.1s cubic-bezier(.2,.7,.2,1) .4s forwards;
}
@keyframes pre-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pre-breath {
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 12px; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  margin: 12px auto 0;
  max-width: calc(100% - 24px);
  padding: 10px 12px 10px 22px;
  background: var(--glass-bg);
  backdrop-filter: blur(26px) saturate(1.6);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -1px 0 rgba(17,17,17,.05) inset,
    0 6px 18px -8px rgba(17,17,17,.15),
    0 30px 60px -30px rgba(17,17,17,.18);
  overflow: hidden;
  transition: max-width .5s cubic-bezier(.2,.7,.2,1), padding .5s, box-shadow .4s, background .4s;
}
.nav::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 50%);
  pointer-events: none; border-radius: inherit;
}
.nav > * { position: relative; }
.nav.is-scrolled {
  max-width: min(880px, calc(100% - 24px));
  box-shadow: var(--shadow-md);
  background: rgba(245, 240, 228, .72);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark {
  width: 22px; height: 26px;
  display: block;
  color: var(--ink);
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.brand__lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.brand__name {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.brand__sub {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}

.nav__links {
  display: flex; gap: 28px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.nav__links a { position: relative; padding: 6px 2px; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--ink);
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover::after { width: 100%; }

@media (max-width: 900px) { .nav__links { display: none; } }

/* Hamburger button — hidden on desktop */
.nav__burger {
  display: none;
  position: relative;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(155deg, #1c1c1c, #0a0a0a);
  color: var(--paper);
  cursor: pointer;
  border: 1px solid rgba(245,240,228,.1);
  padding: 0; margin: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 4px 10px -4px rgba(17,17,17,.3);
  transition: background .25s, transform .2s;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}
.nav__burger:hover { transform: translateY(-1px); }
.nav__burger:active { transform: translateY(0); }
.nav__burger span {
  position: absolute;
  left: 50%;
  width: 16px; height: 1.75px;
  background: var(--paper);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), top .3s cubic-bezier(.2,.7,.2,1), opacity .15s;
  pointer-events: none;
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 21px; }
.nav__burger span:nth-child(3) { top: 26px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) {
  top: 21px; transform: translateX(-50%) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) {
  top: 21px; transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav__burger { display: block; }
  .nav__cta { display: none; }
  .nav { padding: 8px 8px 8px 20px; }
  .nav .brand { font-size: 20px; }
  .nav .brand__mark { font-size: 18px; }
}

/* Mobile drawer */
.nav-drawer {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 90;
  padding: 100px 28px 40px;
  background: var(--bone);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), visibility .5s;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 100vh;
  min-height: 100dvh;
}
.nav-drawer::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(11,110,110,.14), transparent 60%),
    radial-gradient(500px 400px at 0% 100%, rgba(23,55,44,.1), transparent 60%);
  pointer-events: none;
}
.nav-drawer > * { position: relative; }
.nav-drawer.is-open {
  transform: translateY(0);
  visibility: visible;
}
.nav-drawer__links {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 24px;
}
.nav-drawer__links a {
  font-family: var(--f-display);
  font-size: 34px; line-height: 1.1;
  letter-spacing: -0.025em;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-2);
  transition: color .25s, padding-left .3s cubic-bezier(.2,.7,.2,1);
}
.nav-drawer__links a:hover { color: var(--accent); padding-left: 8px; }
.nav-drawer__cta {
  width: 100%; justify-content: center;
  margin-top: 16px;
}
.nav-drawer__foot {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-2); opacity: .6;
  margin: 32px 0 0; text-align: center;
}
body.nav-open { overflow: hidden; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .02em;
  border: 1px solid transparent;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, box-shadow .25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn--lg  { padding: 16px 26px; font-size: 13.5px; }
.btn--xl  { padding: 20px 32px; font-size: 14.5px; }
.btn--full{ width: 100%; justify-content: center; }

.btn--ink {
  background: linear-gradient(155deg, #1c1c1c, #0b0b0b);
  color: var(--paper);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 6px 16px -6px rgba(17,17,17,.35),
    0 20px 40px -20px rgba(17,17,17,.5);
}
.btn--ink:hover { background: linear-gradient(155deg, var(--accent), #053838); color: #fff; }

.btn--accent {
  background: linear-gradient(155deg, #149494 0%, var(--accent) 60%, #084F4F 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -1px 0 rgba(0,0,0,.15) inset,
    0 10px 30px -8px rgba(11,110,110,.5),
    0 4px 0 -2px rgba(17,17,17,.3);
}
.btn--accent:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -1px 0 rgba(0,0,0,.15) inset,
    0 14px 40px -8px rgba(11,110,110,.6),
    0 8px 0 -2px rgba(17,17,17,.35);
  background: linear-gradient(155deg, #1eaaaa 0%, #0d8080 60%, #053838 100%);
}

.btn--ghost {
  background: var(--glass-bg-2);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: var(--ink); border: 1px solid var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--ghost-light {
  background: rgba(245,240,228,.08);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: var(--paper); border: 1px solid rgba(245,240,228,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset;
}
.btn--ghost-light:hover { background: var(--paper); color: var(--forest); border-color: var(--paper); }

/* marquee removed */

/* ============================================================
   HERO — centred
   ============================================================ */
.hero {
  position: relative;
  padding: 0 32px 180px;
  min-height: 100svh;
  justify-content: center;
  width: 100%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  border-bottom: 1px solid var(--rule);
  /* clip-path lets the bg extend UP past the hero (behind the nav)
     but clips at the bottom so it can't leak into the next section. */
  clip-path: inset(-200px 0 0 0);
}
/* Constrain text content (not the bg) to a comfortable reading width */
.hero > :not(.hero__bg, .hero__tag, .hero__proof) {
  max-width: 1180px;
  width: 100%;
}
.hero > .hero__tag,
.hero > .hero__proof { align-self: center; }

/* hero background image — painted forest atmosphere */
.hero__bg {
  position: absolute;
  /* Extend 200px above the hero so the painting fills the area
     behind the sticky nav. clip-path on .hero allows this overhang. */
  top: -200px; left: 50%;
  transform: translate3d(-50%, calc(var(--pY, 0) * 1px * 0.18), 0);
  width: 100vw; max-width: 2400px;
  height: calc(100% + 200px);
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}
.hero__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(.72) brightness(1.04);
  /* Subtle Ken-Burns scale-up as page scrolls past hero */
  transform: scale(calc(1 + var(--pY, 0) * 0.0002));
  will-change: transform;
}
/* inverted vignette — bone-solid in the middle for text contrast,
   image peeks through at the edges like a painted frame */
.hero__bg-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(
      ellipse 55% 70% at 50% 45%,
      rgba(236,230,216,.82) 0%,
      rgba(236,230,216,.78) 25%,
      rgba(236,230,216,.5) 55%,
      rgba(236,230,216,.18) 80%,
      rgba(236,230,216,0) 100%
    );
}
/* bottom fade to bone so page flows cleanly */
.hero__bg-fade {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, transparent 0%, var(--bone) 90%);
}

.hero__tag {
  align-self: center; width: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 14px;
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  background: var(--glass-bg-2);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--shadow-sm);
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 24px;
}
.hero__tag-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(11,110,110,.18);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(11,110,110,0); } }

.hero__title {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 50, "opsz" 144, "wght" 400;
  font-size: clamp(48px, 6.4vw, 112px);
  line-height: .96;
  letter-spacing: -0.032em;
  margin: 0 0 28px;
  font-weight: 400;
  max-width: 18ch;
  /* Foreground parallax — title lifts faster than the bg drifts. */
  transform: translate3d(0, calc(var(--pY, 0) * 1px * -0.12), 0);
  will-change: transform;
}
.hero__title .line { display: block; }
.hero__title .line--italic {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--accent);
  padding-left: 0.04em;
}

.hero__lede {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.45;
  max-width: 52ch;
  color: var(--ink-2);
  margin: 0 auto 12px;
  /* Mid-layer parallax — between title and bg. */
  transform: translate3d(0, calc(var(--pY, 0) * 1px * -0.06), 0);
  will-change: transform;
}
.hero__lede em { font-style: italic; color: var(--ink); }

/* Positioning line — sharper, larger, ink-coloured to anchor the offer */
.hero__lede--positioning {
  font-family: var(--f-display);
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 38ch;
  margin-bottom: 10px;
}
.hero__lede--positioning strong {
  font-weight: 500;
  color: var(--accent);
}

/* Sub-lede — supporting tagline + price anchor */
.hero__lede--sub {
  font-size: clamp(16px, 1.2vw, 19px);
  margin-bottom: 32px;
  max-width: 44ch;
}
.hero__lede--sub em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: .92em;
  letter-spacing: .02em;
  color: var(--ink);
  padding-left: 4px;
}

.hero__cta {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-bottom: 24px;
  /* Closest to viewer — biggest lift */
  transform: translate3d(0, calc(var(--pY, 0) * 1px * -0.04), 0);
  will-change: transform;
}

/* Mobile only: turn parallax off (touch scroll + parallax = jank).
   KEEP the bg's translateX(-50%) centering. */
@media (max-width: 760px) {
  .hero__bg          { transform: translateX(-50%) !important; }
  .hero__bg img      { transform: none !important; }
  .hero__title,
  .hero__lede,
  .hero__cta         { transform: none !important; opacity: 1 !important; }
}
.hero__trust {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  opacity: .7; margin: 0 0 80px;
}

/* Social proof pill — stars + score + text */
.hero__proof {
  align-self: center; width: auto;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 18px 8px 14px;
  margin: 8px 0 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 4px 14px -4px rgba(17,17,17,.1);
  flex-wrap: wrap; justify-content: center;
  max-width: 100%;
}
.hero__proof-stars {
  position: relative;
  font-size: 13px; letter-spacing: 1px;
  line-height: 1;
  color: rgba(17,17,17,.18);
  display: inline-block;
}
.hero__proof-stars-fill {
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  overflow: hidden;
  white-space: nowrap;
  /* full 5 stars lit */
  width: 100%;
  text-shadow: 0 1px 4px rgba(11,110,110,.35);
}
.hero__proof-stars-track { visibility: hidden; }
.hero__proof-score {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.hero__proof-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-2); opacity: .35;
}
.hero__proof-text {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.hero__proof-spots {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--accent);
  font-weight: 600;
}
.hero__cta-secondary {
  /* sits next to the primary in the hero CTA row */
}

@media (max-width: 560px) {
  .hero__proof { padding: 10px 16px; gap: 10px; }
  .hero__proof-text { font-size: 10.5px; }
}
.stars { color: var(--accent); letter-spacing: .12em; }
.hero__trust-mark { color: var(--accent); font-size: 14px; }

.hero__stats {
  width: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.stat {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 22px;
  padding: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -1px 0 rgba(17,17,17,.08) inset,
    0 6px 18px -6px rgba(17,17,17,.15),
    0 30px 60px -30px rgba(17,17,17,.2);
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.stat::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--glass-sheen);
  pointer-events: none;
}
.stat > * { position: relative; }
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat__num em {
  font-family: var(--f-serif); font-style: italic;
  color: var(--accent); font-weight: 400;
}
.stat__num {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 60, "opsz" 96;
  font-size: clamp(36px, 4.6vw, 62px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
}
.stat--featured .stat__num { color: var(--lime); }
.stat__lbl {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2);
  max-width: 20ch;
}

@media (max-width: 860px) {
  .hero { padding: 56px 20px 80px; }
  .hero__stats { grid-template-columns: 1fr; }
}

/* ============================================================
   PROOF — skinny elegant marquee
   ============================================================ */
.marquee-proof {
  position: relative;
  padding: 18px 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(236,230,216,.4), rgba(227,220,203,.6));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.marquee-proof::before,
.marquee-proof::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 140px; z-index: 2; pointer-events: none;
}
.marquee-proof::before {
  left: 0;
  background: linear-gradient(90deg, var(--bone) 10%, rgba(236,230,216,0));
}
.marquee-proof::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bone) 10%, rgba(236,230,216,0));
}
.marquee-proof__track {
  display: flex;
  width: max-content;
  animation: marquee-slide 68s linear infinite;
  will-change: transform;
}
.marquee-proof:hover .marquee-proof__track { animation-play-state: paused; }
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-proof__group {
  display: flex; align-items: center; gap: 36px;
  padding-right: 36px;
  flex-shrink: 0;
}
.marquee-proof__group a,
.marquee-proof__group > span:not(.marquee-proof__dot):not(.marquee-proof__label) {
  font-family: var(--f-display);
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  white-space: nowrap;
  opacity: .78;
  transition: opacity .25s, color .25s;
}
.marquee-proof__group a:hover { opacity: 1; color: var(--accent); }
.marquee-proof__group a:nth-of-type(2n) {
  font-family: var(--f-serif); font-style: italic;
}
.marquee-proof__dot {
  color: var(--accent);
  opacity: .55;
  font-size: 11px;
  font-family: var(--f-mono);
  letter-spacing: .04em;
}
.marquee-proof__label {
  font-family: var(--f-mono);
  font-size: 10.5px !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .55;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .marquee-proof::before, .marquee-proof::after { width: 60px; }
  .marquee-proof__group { gap: 28px; padding-right: 28px; }
  .marquee-proof__group a,
  .marquee-proof__group > span:not(.marquee-proof__dot):not(.marquee-proof__label) {
    font-size: 15px;
  }
}

/* ============================================================
   SECTION HEAD (shared) — centred variant
   ============================================================ */
.section-head {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
  padding: 120px 32px 56px;
  max-width: 860px; margin: 0 auto;
}
.section-head--light {}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--glass-bg-2);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 2px 6px -2px rgba(17,17,17,.08);
  white-space: nowrap;
}
.eyebrow--light {
  color: rgba(245,240,228,.85);
  border-color: rgba(245,240,228,.18);
  background: rgba(245,240,228,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 2px 6px -2px rgba(0,0,0,.15);
}

.h2 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 50, "opsz" 120;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 76px);
  line-height: .98;
  letter-spacing: -0.028em;
  margin: 0 auto; max-width: 20ch;
}
.h2 em { font-family: var(--f-serif); font-style: italic; color: var(--accent); font-weight: 400; }
.h2--light { color: var(--paper); }
.h2--light em { color: var(--lime); }

@media (max-width: 760px) {
  .section-head { padding: 72px 20px 32px; gap: 14px; }
}

/* ============================================================
   SERVICES — centred intro, card grid
   ============================================================ */
.services { padding: 140px 32px 120px; text-align: center; }
.services__head {
  max-width: 860px; margin: 0 auto 64px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.services__head .eyebrow { padding: 0; }
.services__lede {
  font-family: var(--f-serif); font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.45; color: var(--ink-2);
  max-width: 56ch; margin: 0;
}
.h2--center { text-align: center; margin-left: auto; margin-right: auto; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1200px; margin: 0 auto;
}
.service {
  text-align: left;
  padding: 36px 32px 32px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(17,17,17,.08) inset,
    0 10px 24px -10px rgba(17,17,17,.18),
    0 40px 80px -40px rgba(17,17,17,.25);
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, background .3s;
}
.service::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.45), transparent 40%),
    radial-gradient(ellipse at top, rgba(255,255,255,.2), transparent 60%);
  pointer-events: none; border-radius: inherit;
}
.service > * { position: relative; }
.service:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service--accent {
  background: linear-gradient(155deg, var(--forest), #0e241c);
  color: var(--paper);
  border-color: rgba(245,240,228,.1);
}
.service--accent::before { background: linear-gradient(135deg, rgba(214,255,75,.12), transparent 45%); }
.service--accent h3, .service--accent p, .service--accent ul { color: var(--paper); }

.service__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px;
}
.service__num {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(11,110,110,.3);
  background: rgba(11,110,110,.06);
}
.service--accent .service__num { color: var(--lime); border-color: rgba(214,255,75,.3); background: rgba(214,255,75,.08); }
.service__icon {
  font-size: 28px; line-height: 1;
  color: var(--accent); opacity: .85;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.service--accent .service__icon { color: var(--lime); }
.service:hover .service__icon { transform: rotate(45deg) scale(1.1); }

.service h3 {
  font-family: var(--f-display); font-weight: 500;
  font-variation-settings: "SOFT" 40, "opsz" 96;
  font-size: clamp(22px, 1.8vw, 28px); line-height: 1.1; margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.service p {
  font-family: var(--f-serif); font-size: 16.5px; line-height: 1.5;
  margin: 0 0 24px; color: var(--ink-2);
}
.service--accent p { color: rgba(245,240,228,.82); }
.service ul {
  list-style: none; margin: 0; padding: 20px 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
}
.service--accent ul { border-top-color: rgba(245,240,228,.15); }
.service ul li { padding: 5px 0; opacity: .85; }

@media (max-width: 760px) {
  .services { padding: 80px 20px 80px; }
  .services__grid { grid-template-columns: 1fr; }
}

.services__catalog-link {
  max-width: 1200px; margin: 48px auto 0;
  display: flex; justify-content: center;
}
.catalog-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 18px 14px 22px;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 10px 24px -10px rgba(17,17,17,.15);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.catalog-pill:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 14px 30px -10px rgba(17,17,17,.2);
}
.catalog-pill__kicker {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  padding: 4px 10px;
  background: rgba(11,110,110,.1);
  border-radius: 999px;
}
.catalog-pill__main {
  font-family: var(--f-display); font-style: italic;
  font-size: 17px; letter-spacing: -0.005em;
  color: var(--ink);
}
.catalog-pill__arrow {
  font-size: 16px; color: var(--accent);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.catalog-pill:hover .catalog-pill__arrow { transform: translateX(4px); }

@media (max-width: 560px) {
  .catalog-pill { flex-direction: column; text-align: center; padding: 18px 24px; border-radius: 22px; gap: 10px; }
  .catalog-pill__main { font-size: 16px; }
}

/* ============================================================
   PULSE — a letter, revealed as you read
   ============================================================ */
.pulse {
  position: relative;
  padding: 120px 32px 140px;
}
.pulse__inner {
  display: flex; flex-direction: column; align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.pulse__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 14px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  margin-bottom: 56px;
}
.pulse__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(11,110,110,.22);
  animation: pulse 2s ease-in-out infinite;
}
/* letter container — sized as a centred column.
   Desktop: ~30-36vw of viewport (capped 640px on huge screens, floored 360px on narrow desktops).
   Mobile: full width via media query override below. */
.pulse__letter {
  width: clamp(360px, 36vw, 640px);
  max-width: 100%;
  margin: 56px auto 0;
  text-align: left;
  position: relative;
}
.pulse__letter::before {
  content: "";
  position: absolute;
  top: -24px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 48px;
  background: linear-gradient(180deg, transparent, rgba(17,17,17,.25));
}

/* All paragraphs — big display serif, editorial scale.
   Type scales with the column (cqw) so the rhythm stays tight in the
   centred 30%-of-viewport reading column. */
.pulse-para {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 60, "opsz" 144;
  font-weight: 400;
  font-size: clamp(28px, 2.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 32px;
}
.pulse-para em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* opening line — slightly bigger, italic for tone */
.pulse-para--open {
  font-style: italic;
  font-size: clamp(34px, 2.8vw, 50px);
  margin-bottom: 40px;
}

/* truth line — subtle emphasis block */
.pulse-para--truth {
  padding: 32px 36px;
  background: rgba(11,110,110,.04);
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  margin: 48px 0;
  font-style: italic;
}

/* pivot — same look as base now */
.pulse-para--pivot { margin-bottom: 22px; }
.pulse-para--pivot:first-of-type { margin-top: 56px; }

/* list — keep italics for the punchy bullets */
.pulse-list {
  list-style: none;
  padding: 0;
  margin: 40px 0 40px;
}
.pulse-list li {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  padding: 10px 0;
  color: var(--ink);
  position: relative;
  padding-left: 28px;
}
.pulse-list li::before {
  content: "→";
  position: absolute; left: 0; top: 14px;
  font-family: var(--f-mono); font-size: 16px;
  color: var(--accent);
}

/* close — the summation */
.pulse-para--close {
  font-size: clamp(32px, 2.7vw, 48px);
  margin-top: 48px;
  margin-bottom: 48px;
}

/* signoff */
.pulse-signoff {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(28px, 2.4vw, 34px);
  color: var(--accent);
  margin-top: 40px;
  margin-bottom: 0;
}

/* ----- Highlight + underline accents (digestibility helpers) ----- */
.pulse-para mark.hl,
.pulse-list mark.hl {
  background: linear-gradient(120deg,
    rgba(11,110,110,0) 0%,
    rgba(11,110,110,.22) 18%,
    rgba(11,110,110,.32) 50%,
    rgba(11,110,110,.22) 82%,
    rgba(11,110,110,0) 100%);
  color: inherit;
  padding: 0 .12em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.pulse-para mark.hl--ink,
.pulse-list mark.hl--ink {
  background: linear-gradient(120deg,
    rgba(17,17,17,0) 0%,
    rgba(17,17,17,.10) 18%,
    rgba(17,17,17,.16) 50%,
    rgba(17,17,17,.10) 82%,
    rgba(17,17,17,0) 100%);
}
.pulse-para u,
.pulse-list u {
  text-decoration: none;
  background-image: linear-gradient(transparent 70%, var(--accent) 70%, var(--accent) 88%, transparent 88%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 .04em;
}

/* ----- Emoji punctuation — keep them small + soft so they don't dominate ----- */
.pulse-emoji {
  display: inline-block;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', emoji;
  font-size: .65em;
  line-height: 1;
  vertical-align: 0.18em;
  margin: 0 .12em;
  filter: saturate(.9);
  -webkit-user-select: none;
  user-select: none;
}
/* List bullets: emoji replaces the orange arrow */
.pulse-list li .pulse-emoji {
  position: absolute;
  left: -2px;
  top: 12px;
  font-size: 22px;
  margin: 0;
}
.pulse-list li:has(.pulse-emoji)::before { content: none; }

/* ============================================================
   REVEAL — simple, premium paragraph fade-in
   Used by the pulse letter and any other [data-rev] elements.
   ============================================================ */
[data-rev] {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  transition:
    opacity .9s cubic-bezier(.2,.7,.2,1),
    filter .9s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1);
}
[data-rev].is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Tablet — letter takes more width since the desktop 36vw is too narrow */
@media (max-width: 900px) {
  .pulse__letter {
    width: 100%;
    max-width: 560px;
  }
}

/* Mobile — fluid full width with section padding doing the breathing room */
@media (max-width: 600px) {
  .pulse { padding: 72px 22px 100px; }
  .pulse__letter {
    margin-top: 44px;
    width: 100%;
    max-width: none;
  }
  .pulse-para {
    font-size: 28px;
    line-height: 1.18;
    margin-bottom: 28px;
  }
  .pulse-para--open {
    font-size: 32px;
    margin-bottom: 36px;
  }
  .pulse-para--pivot:first-of-type { margin-top: 44px; }
  .pulse-list { margin: 36px 0; }
  .pulse-list li {
    font-size: 24px;
    line-height: 1.25;
    padding: 10px 0 10px 26px;
  }
  .pulse-list li::before { top: 12px; left: 2px; font-size: 14px; }
  .pulse-para--close {
    font-size: 30px;
    margin-top: 44px;
    margin-bottom: 48px;
  }
  .pulse-para--truth {
    padding: 22px 24px;
    margin: 36px 0;
  }
  .pulse-signoff { font-size: 26px; margin-top: 36px; }
  /* Mobile-trim: hide the secondary paragraphs so the letter reads tight */
  .pulse-para--mhide { display: none; }
}

/* ============================================================
   POSITION — founder card + manifesto principles spread
   ============================================================ */
.position {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 140px 32px 140px;
  overflow: hidden;
  isolation: isolate;
}
.position::before, .position::after {
  content: "";
  position: absolute;
  width: 720px; height: 720px;
  border-radius: 50%;
  filter: blur(160px);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
}
.position::before { background: var(--accent); top: -260px; right: -180px; }
.position::after  { background: var(--forest, #17372C); bottom: -300px; left: -200px; opacity: .55; }

.position__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.position__head {
  text-align: center;
  margin: 0 auto 80px;
  max-width: 760px;
}
.position__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  padding: 7px 16px 7px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom: 28px;
}
.position__eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(11,110,110,.22);
  animation: pulse 2s ease-in-out infinite;
}
.position__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: .98;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--paper);
}
.position__title em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}

/* Two-column spread on desktop */
.position__grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 80px;
  align-items: start;
}

/* ----- Founder card ----- */
.founder {
  position: sticky;
  top: 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 24px;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 30px 60px -30px rgba(0,0,0,.5);
}
.founder__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(11,110,110,.35), transparent 60%),
    linear-gradient(135deg, #2a2a2a, #0d0d0d);
  margin-bottom: 22px;
}
.founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s;
  filter: contrast(1.02) saturate(1.05);
}
.founder:hover .founder__photo img { transform: scale(1.04); }
.founder__photo-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 88px;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,.85);
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
  z-index: 0;
}
.founder__photo--fallback .founder__photo-initials { z-index: 1; }
.founder__photo-frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
  z-index: 2;
}

.founder__meta {
  padding: 0 4px;
}
.founder__role {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.founder__name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 16px;
}
.founder__name em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.founder__bio {
  font-family: var(--f-serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
  margin: 0 0 18px;
}
.founder__bio em { font-style: italic; color: var(--paper); }

.founder__cred {
  list-style: none;
  margin: 0 0 22px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.founder__cred li {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
}
.founder__cred li::first-letter,
.founder__cred li > a { color: var(--accent); }
.founder__cred a { color: rgba(255,255,255,.85); text-decoration: none; transition: color .2s; }
.founder__cred a:hover { color: var(--accent); }

.founder__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  width: 100%;
  justify-content: center;
  transition: background .25s, color .25s, transform .25s;
}
.founder__cta:hover { background: var(--accent); color: var(--paper); transform: translateY(-1px); }
.founder__cta span { transition: transform .25s; }
.founder__cta:hover span { transform: translateX(3px); }

/* ----- Manifesto column ----- */
.position__manifesto { padding-top: 8px; }
.position__quote {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 56px;
  max-width: 28ch;
}
.position__quote em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.position__quote .mark {
  background: linear-gradient(transparent 60%, rgba(11,110,110,.4) 60%);
  padding: 0 2px;
}

.position__principles {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.principle {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.principle:last-child { border-bottom: 1px solid rgba(255,255,255,.08); }
.principle__num {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(11,110,110,.12);
  color: var(--accent);
  border: 1px solid rgba(11,110,110,.22);
  flex-shrink: 0;
  transition: background .3s, transform .3s;
}
.principle__num svg { width: 22px; height: 22px; }
.principle:hover .principle__num {
  background: var(--accent);
  color: var(--paper);
  transform: rotate(-4deg) scale(1.06);
}
.principle__body h4 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--paper);
}
.principle__body p {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
  margin: 0;
  max-width: 56ch;
}
.principle__body em { font-style: italic; color: var(--paper); }

.position__signoff {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  font-size: 22px;
  color: rgba(255,255,255,.7);
  margin: 0;
}

/* Tablet — single column, founder card unsticks */
@media (max-width: 960px) {
  .position { padding: 100px 22px 100px; }
  .position__head { margin-bottom: 56px; }
  .position__grid { grid-template-columns: 1fr; gap: 48px; }
  .founder { position: relative; top: auto; }
  .founder__photo { aspect-ratio: 1 / 1; max-width: 360px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 600px) {
  .principle { grid-template-columns: 44px 1fr; gap: 16px; }
  .principle__num { width: 40px; height: 40px; }
  .principle__num svg { width: 18px; height: 18px; }
  .position__quote { font-size: 26px; line-height: 1.25; margin-bottom: 40px; }
}

/* ============================================================
   PROCESS — fog-clearing scroll reveal
   ============================================================ */
.process { padding-bottom: 120px; }

/* Fog variant: section becomes a tall scroll track, with a sticky
   stage inside that holds the steps + a fog veil layered on top.
   --p (0 → 1) is set by JS as the user scrolls through the section. */
.process--fog {
  --p: 0;                       /* scroll progress 0..1, set by JS */
  --veil: 1;
  position: relative;
  padding-bottom: 0;
}
/* Track holds the sticky stage. Tall enough to provide ~160vh of scroll
   travel for the reveal. The stage inside pins for the duration. */
.process--fog .process__track {
  position: relative;
  height: 260vh;
}
.process--fog .process__stage {
  /* Position is controlled by JS for bulletproof pinning. JS toggles
     between position: relative (before/after pin range) and
     position: fixed (during pin range). */
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.process--fog .process__stage.is-pinned {
  position: fixed;
}
.process--fog .process__stage.is-past {
  position: absolute;
  top: auto;
  bottom: 0;
}

/* List sits underneath the fog */
.process--fog .process__list {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  /* Each step rises in as fog clears */
  --reveal: clamp(0, calc((var(--p) - 0.35) / 0.45), 1);
}
.process--fog .process__list .step {
  opacity: var(--reveal, 0);
  transform: translateY(calc((1 - var(--reveal, 0)) * 24px));
  transition: opacity .2s linear, transform .2s linear;
}

/* The fog veil — sits on top until cleared */
.process__fog {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Veil fades out as --p approaches 1 */
  --veil: 1;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255, calc(0.55 * var(--veil))) 0%, rgba(255,255,255, calc(0.85 * var(--veil))) 45%, rgba(248,245,239, calc(0.95 * var(--veil))) 100%);
  backdrop-filter: blur(calc(28px * var(--veil))) saturate(calc(1 + 0.4 * var(--veil)));
  -webkit-backdrop-filter: blur(calc(28px * var(--veil))) saturate(calc(1 + 0.4 * var(--veil)));
  transition: backdrop-filter .15s linear;
}

/* Layered drifting mist clouds — these add texture & motion */
.process__fog-mist {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(40% 35% at 20% 40%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(45% 40% at 75% 60%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(35% 30% at 50% 25%, rgba(255,255,255,.75), transparent 70%);
  filter: blur(20px);
  opacity: var(--veil, 1);
  animation: fogDrift 22s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.process__fog-mist--2 {
  background:
    radial-gradient(50% 40% at 70% 30%, rgba(248,245,239,.85), transparent 70%),
    radial-gradient(40% 35% at 25% 75%, rgba(248,245,239,.75), transparent 70%);
  animation-duration: 28s;
  animation-direction: alternate-reverse;
  filter: blur(28px);
}
.process__fog-mist--3 {
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(255,255,255,.6), transparent 75%);
  filter: blur(40px);
  animation-duration: 34s;
}
@keyframes fogDrift {
  0%   { transform: translate3d(-3%,  2%, 0) scale(1.05); }
  50%  { transform: translate3d( 4%, -3%, 0) scale(1.10); }
  100% { transform: translate3d(-2%, -2%, 0) scale(1.05); }
}

/* "Four weeks, no fog." copy — the hero sitting inside the mist */
.process__fog-copy {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 24px;
  /* Title fades earlier than the fog so the steps are revealed clean */
  --title-op: clamp(0, calc(1 - var(--p) * 1.6), 1);
  opacity: var(--title-op);
  transform: translateY(calc(var(--p) * -24px));
  transition: opacity .15s linear, transform .15s linear;
}
.process__fog-copy .eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--ink);
  opacity: .7;
}
.process__fog-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(54px, 9vw, 132px);
  line-height: .95;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
  text-shadow: 0 2px 30px rgba(255,255,255,.5);
}
.process__fog-title em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.process__fog-hint {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .8;
  animation: fogHintBob 2.4s ease-in-out infinite;
}
@keyframes fogHintBob {
  0%, 100% { transform: translateY(0);   opacity: .7; }
  50%      { transform: translateY(4px); opacity: 1;  }
}

/* Original list styles (used by both fog + non-fog variants) */
.process__list {
  list-style: none; margin: 0 auto; padding: 0 32px;
  max-width: 1200px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.step {
  padding: 28px 24px 32px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 8px 20px -10px rgba(17,17,17,.15),
    0 30px 60px -30px rgba(17,17,17,.2);
  position: relative;
  min-height: 280px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.step::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.25) 0%, transparent 50%);
  pointer-events: none;
  border-radius: inherit;
}
.step > * { position: relative; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step__week {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 24px;
}
.step h3 {
  font-family: var(--f-display); font-weight: 500;
  font-size: 26px; line-height: 1.05; margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.step p {
  font-family: var(--f-serif); font-size: 15.5px; line-height: 1.5;
  margin: 0 0 auto; color: var(--ink-2);
}
.step__tag {
  margin-top: 28px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
  padding-top: 14px; border-top: 1px solid var(--rule);
  opacity: .8;
}
/* Mobile (≤700) — only here we drop the sticky pin. Above 700px we
   keep the sticky behavior so laptops with smaller browser windows
   still get the pinned cinematic. */
@media (max-width: 700px) {
  .process__list { grid-template-columns: 1fr; }
  .process--fog .process__track { height: auto; }
  .process--fog .process__stage {
    position: relative;
    height: auto;
    min-height: 60vh;
    flex-direction: column;
    padding: 80px 0 40px;
  }
  .process--fog .process__fog {
    position: relative;
    inset: auto;
    height: 60vh;
    margin-bottom: 40px;
    --veil: 1;
  }
  .process--fog .process__list .step {
    opacity: 1;
    transform: none;
  }
  .process__fog-title { font-size: clamp(48px, 12vw, 88px); }
}
@media (max-width: 560px) {
  .process__list { grid-template-columns: 1fr; padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .process__fog-mist { animation: none; }
  .process__fog-hint { animation: none; }
}

/* ============================================================
   QUIZ
   ============================================================ */
/* Quiz section — color-rhythm break (warm tinted band, not full dark).
   Adds breathing room above + below so the quiz card has its own beat. */
.quiz {
  padding: 60px 0 140px;
  margin: 80px 0 40px;
  background:
    radial-gradient(900px 600px at 85% 15%, rgba(11,110,110,.14), transparent 55%),
    radial-gradient(800px 600px at 10% 95%, rgba(23,55,44,.10), transparent 55%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 3%, var(--bone)) 25%, color-mix(in srgb, var(--accent) 3%, var(--bone)) 75%, transparent);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.quiz .section-head,
.calc .section-head,
.process .section-head,
.services .section-head {
  padding-top: 96px; padding-bottom: 48px;
}
.quiz__intro-p {
  font-family: var(--f-serif); font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5; color: var(--ink-2); max-width: 56ch;
  margin: 0;
}
.quiz__chips {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.quiz__chips li {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .04em;
  padding: 6px 12px;
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.quiz__wrap {
  max-width: 780px; margin: 0 auto;
  padding: 0 32px;
}
.quiz__card {
  background: linear-gradient(155deg, #1a1a1a, #0a0a0a);
  color: var(--paper);
  border: 1px solid rgba(245,240,228,.08);
  border-radius: 28px;
  padding: 40px;
  box-shadow:
    0 50px 100px -30px rgba(0,0,0,.45),
    0 20px 40px -20px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(245,240,228,.06);
  position: relative;
  min-height: 520px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.quiz__card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(400px 300px at 100% 0%, rgba(11,110,110,.16), transparent 60%),
    radial-gradient(300px 200px at 0% 100%, rgba(214,255,75,.06), transparent 60%);
  pointer-events: none;
}
.quiz__card > * { position: relative; }

.quiz__head { margin-bottom: 32px; }
.quiz__progress {
  display: flex; flex-direction: column; gap: 10px;
}
.quiz__step-lbl {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(245,240,228,.6);
}
.quiz__bar {
  height: 3px; background: rgba(245,240,228,.1);
  border-radius: 3px; overflow: hidden;
}
.quiz__bar-fill {
  height: 100%; width: 16%;
  background: var(--accent);
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}

.quiz__stage { flex: 1; display: flex; flex-direction: column; }
.quiz__stage h3 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 50, "opsz" 120;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 28px;
  max-width: 26ch;
  color: var(--paper);
}
.quiz__opts {
  display: grid; gap: 8px;
  margin: 0 0 20px; padding: 0; list-style: none;
}
.quiz__opt {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  background: rgba(245,240,228,.04);
  border: 1px solid rgba(245,240,228,.1);
  border-radius: 14px;
  font-family: var(--f-serif); font-size: 17px;
  color: rgba(245,240,228,.92);
  cursor: pointer; text-align: left;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, border-color .25s;
}
.quiz__opt:hover {
  transform: translateX(4px);
  background: rgba(245,240,228,.08);
  border-color: rgba(245,240,228,.3);
}
.quiz__opt[aria-pressed="true"] {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
  box-shadow: 0 10px 30px -10px rgba(11,110,110,.5);
}
.quiz__opt[aria-pressed="true"] .quiz__opt-key { color: #fff; opacity: .65; }
.quiz__opt[aria-pressed="true"] .quiz__opt-arrow { opacity: .9; color: #fff; }
.quiz__opt-key {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--accent); margin-right: 16px; min-width: 22px;
}
.quiz__opt-arrow { opacity: .4; font-family: var(--f-mono); }

.quiz__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 20px; margin-top: auto;
  border-top: 1px solid rgba(245,240,228,.1);
  gap: 16px;
}
.quiz__hint {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .04em; color: rgba(245,240,228,.55);
}
.quiz__back {
  background: transparent;
  border: 1px solid rgba(245,240,228,.2);
  color: var(--paper);
}
.quiz__back:hover { background: rgba(245,240,228,.08); color: var(--paper); border-color: rgba(245,240,228,.4); }
.quiz__back:disabled { opacity: .3; cursor: not-allowed; }
.quiz__back:disabled:hover { transform: none; background: transparent; border-color: rgba(245,240,228,.2); }

/* quiz result */
.quiz__result {
  opacity: 0; transform: translateY(20px);
  animation: rise .7s cubic-bezier(.2,.7,.2,1) .1s forwards;
}
/* unified quiz verdict pill — always has all pill styles; modifiers only tint */
.quiz__verdict-tag,
.quiz__verdict-tag--warn,
.quiz__verdict-tag--ok {
  display: inline-block;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
  background: var(--lime); color: var(--ink);
  border: 1px solid rgba(17,17,17,.35);
  margin-bottom: 20px;
  box-shadow: 0 4px 12px -4px rgba(214,255,75,.35);
}
.quiz__verdict-tag--warn {
  background: var(--accent); color: #fff;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 6px 16px -4px rgba(11,110,110,.55);
}
.quiz__verdict-tag--ok {
  background: var(--forest); color: var(--paper);
  border-color: rgba(245,240,228,.18);
  box-shadow: 0 4px 12px -4px rgba(23,55,44,.4);
}

/* verdict context line */
.quiz__ctx {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(245,240,228,.55);
  margin: -8px 0 20px;
}
.quiz__ctx strong {
  color: rgba(245,240,228,.9); font-weight: 400;
}

.quiz__verdict-h {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 60, "opsz" 144;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1; letter-spacing: -0.025em;
  font-weight: 400; margin: 0 0 20px;
}
.quiz__verdict-h em { font-family: var(--f-serif); font-style: italic; color: var(--accent); }

.quiz__verdict-p {
  font-family: var(--f-serif); font-size: 18px; line-height: 1.45;
  margin: 0 0 28px; color: rgba(245,240,228,.85); max-width: 52ch;
}
.quiz__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 0 0 20px;
}
.quiz__metric {
  padding: 18px; border-radius: 16px;
  background: rgba(245,240,228,.05);
  border: 1px solid rgba(245,240,228,.12);
}
.quiz__metric-num {
  display: block;
  font-family: var(--f-display);
  font-size: 28px; line-height: 1;
  letter-spacing: -0.02em; font-weight: 400;
  margin-bottom: 6px;
  color: var(--paper);
}
.quiz__metric-lbl {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(245,240,228,.55);
}
.quiz__money {
  background: linear-gradient(135deg, var(--accent), #053838);
  color: #fff;
  border-radius: 16px; padding: 22px 26px;
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin: 0 0 24px;
  box-shadow: 0 12px 30px -12px rgba(11,110,110,.5);
}
.quiz__money strong {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 48px);
  color: #fff; letter-spacing: -0.02em; font-weight: 400;
}
.quiz__rec {
  margin: 0 0 22px;
  padding: 18px 22px;
  background: rgba(214,255,75,.06);
  border: 1px solid rgba(214,255,75,.22);
  border-radius: 16px;
}
.quiz__rec-eyebrow {
  display: block;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(214,255,75,.85);
  margin-bottom: 8px;
}
.quiz__rec-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
}
.quiz__rec-meta {
  display: flex; align-items: baseline; gap: 10px;
}
.quiz__rec-name {
  font-family: var(--f-display);
  font-size: 24px; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--lime);
}
.quiz__rec-price {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(245,240,228,.7);
}
.quiz__rec-why {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.4;
  color: rgba(245,240,228,.85);
  margin: 0;
  flex: 1; min-width: 220px;
}
.quiz__money span {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.quiz__restart {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .04em;
  color: rgba(245,240,228,.65);
  text-decoration: underline; text-underline-offset: 4px;
  background: transparent; padding: 0;
}
.quiz__restart:hover { color: var(--paper); }
.quiz__verdict-h { color: var(--paper); }
.quiz__verdict-h em { color: var(--lime); }

.quiz__side {
  padding: 32px 4px;
  display: flex; flex-direction: column; gap: 16px;
}
.quiz__kicker {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; opacity: .7;
}
.quiz__benefits {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.quiz__benefits li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  font-family: var(--f-serif); font-size: 18px; line-height: 1.35;
  padding: 16px 18px;
  background: var(--glass-bg-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
}
.quiz__benefits li span {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--accent); letter-spacing: .08em;
}
.quiz__fine {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .04em; opacity: .6; margin: 8px 0 0;
}

@media (max-width: 760px) {
  .quiz__wrap { padding: 0 20px; }
  .quiz__card { padding: 28px 24px; min-height: 480px; }
  .quiz__metrics { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PRICING CALCULATOR
   ============================================================ */
.calc {
  padding-bottom: 120px;
  background:
    linear-gradient(180deg, transparent, rgba(17,17,17,.02)),
    var(--bone);
}
.calc__wrap {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 28px; padding: 0 32px;
  align-items: start;
}
.calc__controls {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 28px;
  padding: 36px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 14px 28px -12px rgba(17,17,17,.18),
    0 50px 100px -40px rgba(17,17,17,.25);
  position: relative;
  overflow: hidden;
}
.calc__controls::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.25), transparent 50%);
  pointer-events: none;
}
.calc__controls > * { position: relative; }

/* New step-based calculator */
.calc__step { margin-bottom: 32px; }
.calc__step:last-child { margin-bottom: 0; }
.calc__step-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 16px;
}
.calc__step-num {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--accent);
  padding: 4px 10px;
  background: rgba(11,110,110,.1);
  border-radius: 999px;
}
.calc__step-head h3 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 50, "opsz" 96;
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.15; letter-spacing: -0.015em;
  margin: 0;
}

/* Scope cards (radio cards) */
.calc__scope {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.calc__scope-card,
.calc__timeline-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 18px 20px;
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-brd);
  border-radius: 16px;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s;
  position: relative;
}
.calc__scope-card:hover,
.calc__timeline-card:hover { transform: translateY(-2px); }
.calc__scope-card input,
.calc__timeline-card input {
  position: absolute; opacity: 0; pointer-events: none;
}
.calc__scope-tier {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.calc__scope-title {
  font-family: var(--f-display); font-weight: 500;
  font-size: 18px; letter-spacing: -0.015em; line-height: 1.1;
  color: var(--ink);
}
.calc__scope-desc {
  font-family: var(--f-serif);
  font-size: 13.5px; line-height: 1.4;
  color: var(--ink-2); opacity: .85;
}
.calc__scope-card:has(input:checked) {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 10px 20px -8px rgba(17,17,17,.3);
}
.calc__scope-card:has(input:checked) .calc__scope-title { color: var(--paper); }
.calc__scope-card:has(input:checked) .calc__scope-desc { color: rgba(245,240,228,.7); }
.calc__scope-card:has(input:checked) .calc__scope-tier { color: var(--lime); }

/* Chips (add-on toggles) */
.calc__chips {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.calc__chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px;
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .2s;
  position: relative;
}
.calc__chip:hover { transform: translateY(-1px); }
.calc__chip input {
  position: absolute; opacity: 0; pointer-events: none;
}
.calc__chip::after {
  content: ""; position: absolute; top: 14px; right: 14px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--rule);
  background: transparent;
  transition: all .2s;
}
.calc__chip:has(input:checked)::after {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 4px 10px -2px rgba(11,110,110,.5);
}
.calc__chip:has(input:checked) {
  background: var(--paper);
  border-color: var(--ink);
}
.calc__chip-main {
  font-family: var(--f-display); font-weight: 500;
  font-size: 15px; letter-spacing: -0.01em;
  padding-right: 28px;
}
.calc__chip-sub {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .02em;
  color: var(--ink-2); opacity: .7;
  padding-right: 28px;
}

/* Timeline cards */
.calc__timeline {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.calc__timeline-card {
  text-align: center;
  align-items: center;
  padding: 18px 14px;
}
.calc__timeline-weeks {
  font-family: var(--f-display);
  font-size: 26px; line-height: 1;
  letter-spacing: -0.02em; font-weight: 500;
}
.calc__timeline-label {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-2); opacity: .75;
}
.calc__timeline-card:has(input:checked) {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}
.calc__timeline-card:has(input:checked) .calc__timeline-label { color: rgba(245,240,228,.7); }

@media (max-width: 720px) {
  .calc__scope { grid-template-columns: 1fr; }
  .calc__chips { grid-template-columns: 1fr; }
  .calc__timeline { grid-template-columns: 1fr; }
}

/* result card */
.calc__result {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 12px;
}
.calc__result-inner {
  background: linear-gradient(155deg, #1a1a1a, #0a0a0a);
  color: var(--paper);
  border-radius: 28px;
  padding: 36px;
  border: 1px solid rgba(245,240,228,.1);
  box-shadow: 0 40px 80px -24px rgba(17,17,17,.5);
  position: relative;
  overflow: hidden;
}
.calc__result-inner::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(400px 300px at 100% 0%, rgba(11,110,110,.28), transparent 60%),
    radial-gradient(300px 200px at 0% 100%, rgba(214,255,75,.12), transparent 60%);
  pointer-events: none;
}
.calc__result-inner > * { position: relative; }
.calc__kicker {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: .7; display: block; margin-bottom: 14px;
}
.calc__price {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 60, "opsz" 144;
  font-size: clamp(34px, 4.8vw, 56px);
  letter-spacing: -0.03em; line-height: 1;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin-bottom: 8px;
}
.calc__dash { color: var(--accent); }
.calc__plus {
  font-family: var(--f-mono); font-size: 13px;
  letter-spacing: .03em; margin: 0 0 18px;
  color: var(--lime);
}
.calc__verdict {
  font-family: var(--f-serif); font-size: 17px; line-height: 1.4;
  color: rgba(245,240,228,.85);
  margin: 0 0 24px;
}

.calc__breakdown {
  display: flex; flex-direction: column;
  padding: 18px 0; margin-bottom: 20px;
  border-top: 1px solid rgba(245,240,228,.15);
  border-bottom: 1px solid rgba(245,240,228,.15);
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .02em;
}
.calc__breakdown-row {
  display: flex; justify-content: space-between;
  padding: 5px 0; opacity: .85;
}
.calc__breakdown-row span:last-child { opacity: .6; }

.calc__ctas { display: flex; flex-direction: column; gap: 10px; }
.calc__fine {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .04em; opacity: .55;
  text-align: center; margin: 2px 0 0;
}
.calc__cheap {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .03em; line-height: 1.45;
  padding: 14px 18px;
  background: rgba(11,110,110,.1);
  border: 1px solid rgba(11,110,110,.3);
  border-radius: 14px;
  margin: 0; color: var(--accent);
}

@media (max-width: 960px) {
  .calc__wrap { grid-template-columns: 1fr; padding: 0 20px; }
  .calc__controls { padding: 28px 24px; }
  .calc__toggles { grid-template-columns: 1fr; }
  .calc__result { position: static; }
}

/* ============================================================
   LEAD MAGNET
   ============================================================ */
.magnet {
  padding: 140px 32px 160px;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.magnet::before, .magnet::after {
  content: ""; position: absolute;
  width: 780px; height: 780px; border-radius: 50%;
  filter: blur(140px); opacity: .45;
  pointer-events: none;
}
.magnet::before { background: var(--accent); top: -320px; left: 50%; transform: translateX(-50%); }
.magnet::after  { background: var(--forest); bottom: -360px; left: 50%; transform: translateX(-50%); opacity: .55; }

.magnet__intro {
  position: relative; z-index: 1;
  max-width: 780px; margin: 0 auto 64px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.magnet__intro .eyebrow {
  color: rgba(245,240,228,.85);
  border-color: rgba(245,240,228,.2);
  background: rgba(245,240,228,.06);
}
.magnet__intro .h2 { color: var(--paper); }
.magnet__intro .h2 em { color: var(--accent); }
.magnet__kicker-p {
  font-family: var(--f-serif); font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5; color: rgba(245,240,228,.8); max-width: 52ch;
  margin: 0;
}

.magnet__card {
  position: relative; z-index: 1;
  max-width: 620px; margin: 0 auto;
  background: var(--paper);
  border: 1px solid rgba(245,240,228,.1);
  border-radius: 32px;
  padding: 60px 52px 52px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(17,17,17,.05) inset,
    0 60px 120px -30px rgba(11,110,110,.4),
    0 30px 60px -20px rgba(0,0,0,.55),
    0 0 0 1px rgba(245,240,228,.08);
  text-align: left;
  /* no overflow:hidden — badge pokes above */
}
.magnet__card::before {
  /* keep the sheen inside the card border radius via clip-path instead of overflow */
  clip-path: inset(0 round 32px);
}
.magnet__card::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), transparent 40%, transparent 60%, var(--lime));
  opacity: .5; z-index: -1;
  filter: blur(1px);
}
.magnet__card > * { position: relative; }
.magnet__badge {
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(155deg, #1eaaaa, var(--accent));
  color: #fff;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 8px 20px -4px rgba(11,110,110,.55);
  border: 1px solid rgba(255,255,255,.2);
}
.magnet__title {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 50, "opsz" 120;
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-align: center;
  margin: 0 0 32px;
}
.magnet__title em { font-family: var(--f-serif); font-style: italic; color: var(--accent); }
.magnet__checks {
  list-style: none; padding: 0; margin: 0 0 36px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-family: var(--f-mono); font-size: 13px;
}
.magnet__checks li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(17,17,17,.04);
  border: 1px solid rgba(17,17,17,.1);
  border-radius: 12px;
  letter-spacing: .01em;
  color: var(--ink-2);
}
.magnet__checks li span {
  font-size: 10px; letter-spacing: .08em;
  color: var(--accent);
  padding: 3px 7px;
  background: rgba(11,110,110,.1);
  border-radius: 999px;
  flex-shrink: 0;
}

.magnet__form { margin-top: 16px; }
.magnet__cal {
  margin-top: 16px;
  border-radius: 16px;
  overflow: hidden;
  min-height: 600px;
  background: rgba(255,255,255,.04);
}
.magnet__fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.magnet__fields label {
  display: flex; flex-direction: column; gap: 6px;
}
.magnet__fields label span {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; opacity: .65;
  color: var(--ink);
}
.magnet__fields input {
  font: inherit; font-family: var(--f-serif); font-size: 17px;
  background: rgba(17,17,17,.04);
  border: 1px solid rgba(17,17,17,.14);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.magnet__fields input::placeholder {
  color: rgba(17,17,17,.38);
  font-style: italic;
}
.magnet__fields input:hover {
  border-color: rgba(17,17,17,.28);
  background: rgba(17,17,17,.06);
}
.magnet__fields input:focus {
  outline: 0;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(11,110,110,.12);
}
.magnet__url { grid-column: 1 / -1; }
.magnet__submit { grid-column: 1 / -1; margin-top: 12px; }
.magnet__fineprint {
  grid-column: 1 / -1;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(17,17,17,.55); text-align: center; margin: 6px 0 0;
}
.magnet__done {
  text-align: center; padding: 24px 0;
  font-family: var(--f-serif); font-size: 20px;
}
.magnet__tick {
  font-size: 64px; color: var(--accent); margin: 0 0 8px;
  font-family: var(--f-display);
}

.magnet__also {
  position: relative; z-index: 1;
  max-width: 1040px; margin: 80px auto 0;
  text-align: center;
}
.magnet__also-label {
  display: block;
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,240,228,.55); margin-bottom: 24px;
}
.magnet__also-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.magnet .freebie {
  background: rgba(245,240,228,.06);
  border-color: rgba(245,240,228,.15);
  color: var(--paper);
  text-align: left;
}
.magnet .freebie:hover {
  background: var(--lime); color: var(--ink);
  border-color: var(--lime);
}
.magnet .freebie__num { color: var(--accent); }
.magnet .freebie:hover .freebie__num { color: var(--ink); opacity: .6; }
.magnet .freebie__body em { color: rgba(245,240,228,.7); }
.magnet .freebie:hover .freebie__body em { color: rgba(17,17,17,.7); }
.magnet__kicker {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; opacity: .7; margin-bottom: 8px;
}
.freebie {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 20px; align-items: center;
  padding: 20px 22px;
  background: var(--glass-bg-2);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-brd);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s;
}
.freebie:hover { transform: translateY(-4px); background: var(--lime); box-shadow: var(--shadow-md); }
.freebie__num {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--accent); letter-spacing: .1em;
}
.freebie__body { display: flex; flex-direction: column; gap: 2px; }
.freebie__body strong {
  font-family: var(--f-display); font-weight: 500; font-size: 19px; letter-spacing: -0.01em;
}
.freebie__body em {
  font-family: var(--f-mono); font-style: normal; font-size: 12px;
  opacity: .75; letter-spacing: .02em;
}
.freebie__arrow { font-size: 20px; }

@media (max-width: 760px) {
  .magnet { padding: 72px 20px 88px; }
  .magnet__card { padding: 44px 24px 32px; }
  .magnet__checks { grid-template-columns: 1fr; }
  .magnet__fields { grid-template-columns: 1fr; }
  .magnet__also-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WORK — real case studies
   ============================================================ */
.work {
  padding: 0 32px 140px;
  background:
    radial-gradient(800px 500px at 20% 10%, rgba(11,110,110,.06), transparent 60%),
    radial-gradient(700px 500px at 90% 90%, rgba(23,55,44,.08), transparent 60%);
}
.work__intro-p {
  font-family: var(--f-serif); font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5; color: var(--ink-2); max-width: 58ch;
  margin: 0;
}
.work__grid {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.work-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 12px 24px -10px rgba(17,17,17,.15),
    0 40px 80px -40px rgba(17,17,17,.25);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .3s;
  display: flex; flex-direction: column;
}
.work-card::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 30%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
}
.work-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink);
}
.work-card__link {
  position: absolute; inset: 0;
  z-index: 3;
}
.work-card--featured { grid-column: span 2; }
.work-card--featured .work-card__media { aspect-ratio: 21 / 9; }

.work-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(155deg, #1a1a1a, #0a0a0a);
  border-bottom: 1px solid var(--rule);
}
.work-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.work-card:hover .work-card__media img {
  transform: scale(1.04);
}
.work-card__media iframe {
  position: absolute; top: 0; left: 0;
  width: 200%; height: 200%;
  transform: scale(0.5);
  transform-origin: 0 0;
  border: 0; pointer-events: none;
  background: var(--paper);
  transition: opacity .5s;
}
.work-card__frame {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(17,17,17,.08));
  pointer-events: none;
  transition: background .3s;
}
.work-card:hover .work-card__frame {
  background: linear-gradient(180deg, rgba(11,110,110,.03), rgba(17,17,17,.04));
}

.work-card__body {
  padding: 28px 28px 28px;
  display: flex; flex-direction: column; gap: 14px;
  flex: 1;
}
.work-card__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.work-card__tag {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-2);
}
.work-card__tag--mono {
  background: transparent; border-color: transparent;
  opacity: .6; padding-left: 0;
  text-transform: none; letter-spacing: .02em;
}
.work-card h3 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 50, "opsz" 120;
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 2px 0 0;
}
.work-card p {
  font-family: var(--f-serif);
  font-size: 16.5px; line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 56ch;
}
.work-card p em { font-style: italic; color: var(--ink); }
.work-card__stack {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.work-card__stack li {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .04em;
  padding: 4px 9px; border-radius: 6px;
  background: rgba(17,17,17,.05);
  color: var(--ink-2);
}
.work-card__cta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .02em;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--accent);
  transition: color .25s, gap .3s;
}
.work-card__cta span {
  font-size: 14px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.work-card:hover .work-card__cta span { transform: translate(4px, -4px); }

.work__foot {
  max-width: 1240px; margin: 48px auto 0;
  text-align: center;
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .06em;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  color: var(--ink-2);
}
.work__foot-dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(11,110,110,.18);
  animation: pulse 2s ease-in-out infinite;
}

@media (max-width: 860px) {
  .work__grid { grid-template-columns: 1fr; }
  .work-card--featured { grid-column: auto; }
  .work-card--featured .work-card__media { aspect-ratio: 16 / 10; }
  .work { padding: 0 20px 80px; }
}

/* ============================================================
   INSIGHTS / BLOG CARDS
   ============================================================ */
.insights {
  padding: 0 32px 140px;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(11,110,110,.05), transparent 60%);
}
.insights__intro-p {
  font-family: var(--f-serif); font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5; color: var(--ink-2); max-width: 58ch;
  margin: 0;
}
.insights__grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.insights__foot {
  max-width: 1240px; margin: 56px auto 0;
  display: flex; justify-content: center;
}

.post-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 12px 24px -10px rgba(17,17,17,.15),
    0 40px 80px -40px rgba(17,17,17,.25);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .3s;
}
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink);
}
.post-card__link { position: absolute; inset: 0; z-index: 3; }
.post-card--featured { grid-column: span 1; }

.post-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: linear-gradient(155deg, #1a1a1a, #0a0a0a);
}
.post-card__category {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(245,240,228,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245,240,228,.2);
  color: var(--paper);
}
.post-card__pattern {
  position: absolute; inset: 0;
  opacity: .85;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.post-card:hover .post-card__pattern { transform: scale(1.06); }

/* Three distinct generative patterns */
.post-card__pattern--1 {
  background:
    radial-gradient(circle at 30% 30%, rgba(11,110,110,.55), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(214,255,75,.25), transparent 50%),
    repeating-linear-gradient(45deg, rgba(245,240,228,.03) 0 8px, transparent 8px 16px),
    linear-gradient(155deg, #1a1a1a, #0a0a0a);
}
.post-card__pattern--1::after {
  content: "◐"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 180px;
  color: rgba(245,240,228,.06);
}
.post-card__pattern--2 {
  background:
    radial-gradient(circle at 80% 20%, rgba(23,55,44,.65), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(11,110,110,.2), transparent 60%),
    repeating-linear-gradient(0deg, rgba(245,240,228,.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(245,240,228,.05) 0 1px, transparent 1px 32px),
    linear-gradient(155deg, #131c17, #0a0a0a);
}
.post-card__pattern--2::after {
  content: "∑"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 160px; font-style: italic;
  color: rgba(245,240,228,.08);
}
.post-card__pattern--3 {
  background:
    radial-gradient(circle at 50% 50%, rgba(11,110,110,.4), transparent 45%),
    conic-gradient(from 180deg at 50% 50%, rgba(11,110,110,.2), transparent 30%, rgba(214,255,75,.08) 60%, transparent 90%),
    linear-gradient(155deg, #1a1a1a, #0a0a0a);
}
.post-card__pattern--3::after {
  content: "$"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--f-display); font-style: italic; font-size: 200px;
  color: rgba(245,240,228,.09);
}

.post-card__body {
  padding: 26px 28px 30px;
  display: flex; flex-direction: column; gap: 14px; flex: 1;
}
.post-card__meta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .04em; color: var(--ink-2); opacity: .7;
}
.post-card__dot {
  width: 3px; height: 3px; border-radius: 50%; background: currentColor;
  opacity: .5;
}
.post-card h3 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 50, "opsz" 120;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.12; letter-spacing: -0.018em;
  font-weight: 500;
  margin: 0;
}
.post-card p {
  font-family: var(--f-serif); font-size: 16px; line-height: 1.5;
  color: var(--ink-2); margin: 0;
}
.post-card__cta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .02em;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--accent);
}
.post-card__cta span {
  font-size: 14px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.post-card:hover .post-card__cta span { transform: translateX(4px); }

@media (max-width: 960px) {
  .insights__grid { grid-template-columns: 1fr; }
  .insights { padding: 0 20px 80px; }
}

/* ============================================================
   WALL (testimonials) — legacy, unused
   ============================================================ */
.wall {
  background: var(--forest);
  color: var(--paper);
  padding-bottom: 100px;
  position: relative;
  overflow: hidden;
}
.wall .section-head { border-bottom-color: rgba(245,240,228,.18); }
.wall__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  padding: 0 32px;
}
.quote {
  grid-column: span 2;
  margin: 0;
  padding: 28px;
  background: rgba(245,240,228,.08);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(245,240,228,.18);
  border-radius: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 240px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s, border-color .3s;
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.45);
}
.quote:hover { transform: translateY(-5px); background: rgba(245,240,228,.14); border-color: rgba(245,240,228,.3); }
.quote blockquote {
  font-family: var(--f-serif); font-size: 19px; line-height: 1.35;
  margin: 0 0 20px;
}
.quote figcaption {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em;
  padding-top: 16px; border-top: 1px solid rgba(245,240,228,.18);
}
.quote figcaption strong { font-family: var(--f-display); font-weight: 500; font-size: 16px; letter-spacing: -0.005em; }
.quote figcaption span { opacity: .7; text-transform: uppercase; }

.quote--tall { grid-column: span 2; grid-row: span 2; }
.quote--tall blockquote { font-size: 23px; line-height: 1.3; }
.quote--wide { grid-column: span 4; }
.quote--wide blockquote { font-size: 22px; line-height: 1.3; }
.quote--accent { background: var(--accent); color: var(--ink); border-color: var(--ink); }
.quote--accent figcaption { border-top-color: rgba(17,17,17,.25); }

@media (max-width: 960px) {
  .wall__grid { grid-template-columns: 1fr 1fr; }
  .quote, .quote--tall, .quote--wide { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px) {
  .wall__grid { grid-template-columns: 1fr; padding: 0 20px; }
  .quote, .quote--tall, .quote--wide { grid-column: span 1; }
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing { padding-bottom: 100px; }
.pricing__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; padding: 0 32px;
}
.plan {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 24px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 26px;
  position: relative;
  /* no overflow:hidden — ribbon floats above */
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 14px 28px -12px rgba(17,17,17,.16),
    0 50px 90px -40px rgba(17,17,17,.25);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.plan::before {
  /* contain the sheen to the rounded card shape without overflow:hidden */
  clip-path: inset(0 round 24px);
}
.plan::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.45), transparent 40%),
    radial-gradient(ellipse at top, rgba(255,255,255,.15), transparent 60%);
  pointer-events: none;
}
.plan > * { position: relative; }
.plan:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.plan header h3 {
  font-family: var(--f-display); font-variation-settings: "SOFT" 50, "opsz" 120;
  font-size: 34px; line-height: 1; margin: 0 0 8px;
  font-weight: 400; letter-spacing: -0.025em;
}
.plan header p {
  font-family: var(--f-serif); font-size: 15.5px;
  margin: 0; color: var(--ink-2); font-style: italic;
}
.plan__price {
  font-family: var(--f-display); font-size: 40px; font-weight: 400;
  letter-spacing: -0.03em; line-height: 1; margin: 0;
  padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.plan__from, .plan__unit {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; opacity: .65;
  vertical-align: middle; margin-left: 6px;
}
.plan__from { margin-right: 6px; margin-left: 0; }
.plan ul {
  list-style: none; padding: 0; margin: 0;
  font-family: var(--f-mono); font-size: 13px; line-height: 1.9;
  flex: 1;
}
.plan--featured {
  background: linear-gradient(155deg, #1a1a1a, #0a0a0a);
  color: var(--paper);
  transform: translateY(-14px);
  box-shadow: 0 40px 70px -25px rgba(17,17,17,.5), 0 0 0 1px rgba(245,240,228,.06) inset;
  border-color: rgba(245,240,228,.12);
}
.plan--featured::before {
  background: linear-gradient(135deg, rgba(11,110,110,.28), transparent 50%);
}
.plan--featured:hover { transform: translateY(-20px); box-shadow: 0 50px 90px -25px rgba(17,17,17,.55); }
.plan--featured .plan__price { border-color: rgba(245,240,228,.2); }
.plan--featured header p { color: rgba(245,240,228,.7); }
.plan__ribbon {
  position: absolute; top: -14px; right: 24px;
  background: var(--lime); color: var(--ink);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--ink);
}

.pricing__foot {
  text-align: center; padding: 48px 32px 0;
  font-family: var(--f-serif); font-style: italic; font-size: 18px;
  color: var(--ink-2); max-width: 62ch; margin: 0 auto;
}

/* pricing intro paragraph under section-head */
.pricing .section-head .pricing__intro-p,
.pricing__intro-p {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto;
}

/* AI Receptionist add-on card */
.pricing__addon {
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 36px 40px;
  background: linear-gradient(155deg, #1c1c1c, #0a0a0a);
  color: var(--paper);
  border: 1px solid rgba(245,240,228,.1);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 30px 60px -20px rgba(17,17,17,.4),
    0 60px 120px -40px rgba(11,110,110,.18);
}
.pricing__addon::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(480px 300px at 100% 0%, rgba(11,110,110,.28), transparent 60%),
    radial-gradient(360px 240px at 0% 100%, rgba(214,255,75,.1), transparent 60%);
  pointer-events: none;
}
.pricing__addon > * { position: relative; }

.pricing__addon-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(245,240,228,.08);
  border: 1px solid rgba(245,240,228,.16);
  color: rgba(245,240,228,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 24px;
}
.pricing__addon-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(214,255,75,.22);
}

.pricing__addon-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: start;
}
.pricing__addon-grid h3 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 55, "opsz" 120;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--paper);
}
.pricing__addon-lede {
  font-family: var(--f-serif);
  font-size: 18px; line-height: 1.5;
  color: rgba(245,240,228,.82);
  margin: 0 0 22px;
  max-width: 56ch;
}
.pricing__addon-list {
  list-style: none; padding: 0; margin: 0;
  font-family: var(--f-mono); font-size: 13px; line-height: 1.9;
  column-count: 1;
}
.pricing__addon-list li { color: rgba(245,240,228,.8); }

.pricing__addon-price {
  padding: 28px 28px 24px;
  background: rgba(245,240,228,.06);
  border: 1px solid rgba(245,240,228,.14);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.pricing__addon-num {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 55, "opsz" 120;
  font-size: clamp(36px, 4vw, 52px);
  letter-spacing: -0.025em; line-height: 1;
  color: var(--lime);
}
.pricing__addon-num .plan__unit {
  color: rgba(214,255,75,.6);
  font-size: 12px;
  margin-left: 4px;
}
.pricing__addon-note {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(245,240,228,.55);
  margin: 0;
}
.pricing__addon-price .btn--ink {
  background: var(--paper); color: var(--ink);
  border: 1px solid rgba(245,240,228,.3);
  margin-top: auto;
}
.pricing__addon-price .btn--ink:hover {
  background: var(--lime); color: var(--ink);
}

@media (max-width: 760px) {
  .pricing__addon { padding: 28px 24px; }
  .pricing__addon-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 960px) {
  .pricing__grid { grid-template-columns: 1fr; }
  .plan--featured { transform: none; }
  .plan--featured:hover { transform: translateY(-6px); }
}

/* Annual prepay variant — slightly different gradient cue */
.pricing__addon--annual::before {
  background:
    radial-gradient(480px 300px at 100% 0%, rgba(214,255,75,.22), transparent 60%),
    radial-gradient(360px 240px at 0% 100%, rgba(11,110,110,.12), transparent 60%) !important;
}
.pricing__addon-num--small {
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.1;
  color: rgba(245,240,228,.6);
}
.pricing__addon-num--small strong {
  display: block;
  font-size: clamp(36px, 4vw, 52px);
  color: var(--lime);
  font-weight: 400;
  letter-spacing: -0.025em;
}
.pricing__addon-list--cols li strong { color: var(--paper); }
.pricing__addon-list--cols li span {
  color: var(--lime);
  margin-left: 6px;
  font-size: 12px;
  opacity: .85;
}

/* ============================================================
   PRICING GUARANTEES BAND — risk reversal
   ============================================================ */
.pricing__guarantees {
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 28px 32px;
  background: var(--glass-bg);
  border: 1px solid var(--rule);
  border-radius: 24px;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pricing__guarantee {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
}
.pricing__guarantee-icon {
  grid-row: 1 / span 2;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--ink);
  margin-top: 2px;
}
.pricing__guarantee-icon svg { width: 20px; height: 20px; }
.pricing__guarantee strong {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 55, "opsz" 120;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pricing__guarantee span {
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}
@media (max-width: 880px) {
  .pricing__guarantees { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
}

/* ============================================================
   VERSUS — comparison band (Newlead vs Hire vs Freelancer)
   ============================================================ */
.versus {
  padding: 120px 0 100px;
  position: relative;
}
.versus__lede {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto;
}
.versus__grid {
  max-width: 1120px;
  margin: 56px auto 0;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 820px) {
  .versus__grid { grid-template-columns: 1fr; }
}

/* Role + salary rows */
.versus__roles {
  list-style: none;
  margin: 24px 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.versus__roles li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--f-mono);
  font-size: 13.5px;
  letter-spacing: .01em;
  color: var(--ink-2);
}
.versus__roles li:last-child { border-bottom: 0; }
.versus__role { color: var(--ink); }
.versus__pay {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--accent);
  white-space: nowrap;
}
.versus__col--us .versus__role { color: var(--paper); }
.versus__col--us .versus__roles li { border-bottom-color: rgba(245,240,228,.12); color: rgba(245,240,228,.7); }
.versus__col--us .versus__pay {
  color: var(--lime);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.versus__col {
  position: relative;
  padding: 32px 28px 28px;
  background: var(--glass-bg);
  border: 1px solid var(--rule);
  border-radius: 22px;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  display: flex; flex-direction: column;
  min-height: 360px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .35s;
}
.versus__col--alt {
  opacity: .9;
}
.versus__col--us {
  background: linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 30px 60px -20px rgba(17,17,17,.5),
    0 60px 120px -40px rgba(11,110,110,.22);
  transform: translateY(-12px);
}
.versus__col--us::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(480px 300px at 100% 0%, rgba(11,110,110,.28), transparent 60%);
  pointer-events: none; border-radius: 22px;
}
.versus__col--us > * { position: relative; }
.versus__col-head {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px; margin-bottom: 18px;
}
.versus__col--us .versus__col-head {
  border-bottom-color: rgba(245,240,228,.18);
}
.versus__col-tag {
  display: inline-block;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(17,17,17,.06);
  color: var(--ink-2);
  margin-bottom: 12px;
}
.versus__col--us .versus__col-tag {
  background: var(--accent); color: var(--ink); font-weight: 600;
}
.versus__col-title {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 55, "opsz" 120;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: inherit;
  margin: 0 0 10px;
}
.versus__col-price {
  font-family: var(--f-display);
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}
.versus__col-price strong { font-weight: 500; }
.versus__col-price span {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .7;
  margin-left: 6px;
}
.versus__list {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.versus__list li {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.4;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  color: inherit;
}
.versus__x {
  color: var(--ink-2);
  opacity: .6;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
}
.versus__col--us .versus__x { color: rgba(245,240,228,.4); }
.versus__check {
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  margin-top: 2px;
}
.versus__col-foot {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
  padding-top: 16px;
  border-top: 1px dashed var(--rule);
  color: var(--ink-2);
}
.versus__col--us .versus__col-foot {
  border-top-color: rgba(245,240,228,.18);
  color: var(--lime);
}
.versus__col-foot strong {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.versus__foot {
  max-width: 720px;
  margin: 56px auto 0;
  text-align: center;
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  padding: 0 32px;
}
.versus__foot strong {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}
@media (max-width: 960px) {
  .versus__grid { grid-template-columns: 1fr; gap: 18px; }
  .versus__col--us { transform: none; }
  .versus__col { min-height: 0; }
}

/* ============================================================
   THIRTY DAYS — onboarding timeline
   ============================================================ */
.thirty {
  padding: 120px 0 140px;
  background: linear-gradient(180deg, transparent 0%, rgba(23,55,44,0.04) 100%);
  position: relative;
}
.thirty__lede {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto;
}

/* Vertical editorial timeline — accent rail down the left, big day
   marker per row, glass pill card on the right. */
.thirty__rail {
  list-style: none;
  margin: 72px auto 0;
  padding: 0 32px;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
}
.thirty__rail::before {
  content: "";
  position: absolute;
  left: calc(32px + 96px);
  top: 36px;
  bottom: 36px;
  width: 1px;
  background: linear-gradient(180deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 60%, transparent) 50%,
    color-mix(in srgb, var(--accent) 0%, transparent) 100%);
  z-index: 0;
}
.thirty__step {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 40px;
  align-items: stretch;
  z-index: 1;
}
/* Connecting dot on the rail */
.thirty__step::before {
  content: "";
  position: absolute;
  left: calc(96px - 6px);
  top: 28px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bone);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
  z-index: 2;
}
.thirty__step:first-child::before {
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent);
}
/* Big day marker on the left */
.thirty__day {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 60, "opsz" 144;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  text-align: right;
  padding: 14px 0 0;
  align-self: start;
  white-space: nowrap;
}
/* Glass pill card on the right */
.thirty__step > .thirty__h,
.thirty__step > .thirty__p,
.thirty__step > .thirty__deliv {
  /* Wrap content side via a sibling — emulate via grid: */
}
.thirty__step .thirty__h,
.thirty__step .thirty__p,
.thirty__step .thirty__deliv {
  grid-column: 2;
}
.thirty__step .thirty__h {
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(248,245,239,.32));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid color-mix(in srgb, white 22%, transparent);
  border-radius: 24px 24px 0 0;
  padding: 22px 28px 6px;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "opsz" 120;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  border-bottom: 0;
}
.thirty__step .thirty__h em {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--accent);
}
.thirty__step .thirty__p {
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(248,245,239,.32));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-left: 1px solid color-mix(in srgb, white 22%, transparent);
  border-right: 1px solid color-mix(in srgb, white 22%, transparent);
  padding: 8px 28px 20px;
  margin: 0;
  font-family: var(--f-serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.thirty__step .thirty__deliv {
  background: linear-gradient(135deg, rgba(255,255,255,.45), rgba(248,245,239,.22));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid color-mix(in srgb, white 22%, transparent);
  border-top: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 0 0 24px 24px;
  padding: 14px 28px 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}

.thirty__foot {
  max-width: 720px;
  margin: 64px auto 0;
  text-align: center;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  padding: 0 32px;
  display: inline-flex; align-items: center; gap: 10px;
  justify-content: center;
  width: 100%;
}
.thirty__foot-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(11,110,110,.18);
  flex: none;
}

@media (max-width: 720px) {
  .thirty__rail { padding: 0 16px; gap: 24px; }
  .thirty__rail::before { left: 28px; }
  .thirty__step {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-left: 56px;
  }
  .thirty__step::before { left: 22px; top: 12px; }
  .thirty__day {
    text-align: left;
    padding: 0;
    font-size: clamp(28px, 9vw, 40px);
  }
  .thirty__step .thirty__h,
  .thirty__step .thirty__p,
  .thirty__step .thirty__deliv { grid-column: 1; }
}

/* ============================================================
   ROI CALCULATOR — homepage break-even math
   ============================================================ */
.roi {
  padding: 100px 0 100px;
  position: relative;
}
.roi__lede {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto;
}
.roi__panel {
  max-width: 1100px;
  margin: 56px auto 0;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.roi__inputs,
.roi__output {
  background: var(--glass-bg);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 32px;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.roi__output {
  background: linear-gradient(165deg, #1a1a1a 0%, #0a0a0a 100%);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 30px 60px -20px rgba(17,17,17,.5),
    0 60px 120px -40px rgba(11,110,110,.22);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 20px;
}
.roi__output::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 280px at 100% 0%, rgba(11,110,110,.22), transparent 60%);
  pointer-events: none;
}
.roi__output > * { position: relative; }

.roi__field {
  display: block;
  margin-bottom: 28px;
}
.roi__field:last-child { margin-bottom: 0; }
.roi__field-lbl {
  display: block;
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 55, "opsz" 120;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
  padding: 0;
}
.roi__field-help {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink-2); opacity: .8;
}
.roi__input-row {
  display: flex; align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: rgba(255,255,255,.5);
  overflow: hidden;
  font-family: var(--f-display);
  transition: border-color .2s;
}
.roi__input-row:focus-within { border-color: var(--accent); }
.roi__input-prefix,
.roi__input-suffix {
  display: flex; align-items: center;
  padding: 0 14px;
  background: rgba(17,17,17,.04);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--ink-2);
}
.roi__input-prefix {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--ink);
  padding-right: 0;
  background: transparent;
  padding-left: 18px;
}
.roi__input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--f-display);
  font-size: 22px; font-variation-settings: "SOFT" 55, "opsz" 120;
  letter-spacing: -0.01em;
  padding: 14px 8px;
  color: var(--ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.roi__input::-webkit-outer-spin-button,
.roi__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.roi__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  margin-top: 14px;
  background: var(--rule);
  border-radius: 999px;
  outline: 0;
}
.roi__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  background: var(--accent);
  border: 2px solid var(--paper);
  box-shadow: 0 4px 10px -2px rgba(11,110,110,.5);
  border-radius: 50%; cursor: pointer;
}
.roi__range::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--accent);
  border: 2px solid var(--paper);
  box-shadow: 0 4px 10px -2px rgba(11,110,110,.5);
  border-radius: 50%; cursor: pointer;
}

.roi__plans {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.roi__plan { cursor: pointer; }
.roi__plan input { position: absolute; opacity: 0; pointer-events: none; }
.roi__plan-card {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 14px;
  background: rgba(255,255,255,.5);
  border: 1px solid var(--rule);
  border-radius: 14px;
  transition: border-color .2s, background .2s, transform .2s;
}
.roi__plan input:checked + .roi__plan-card {
  background: var(--ink);
  border-color: var(--ink);
}
.roi__plan input:checked + .roi__plan-card .roi__plan-name,
.roi__plan input:checked + .roi__plan-card .roi__plan-price { color: var(--paper); }
.roi__plan input:checked + .roi__plan-card .roi__plan-price small { color: rgba(245,240,228,.6); }
.roi__plan input:focus-visible + .roi__plan-card { outline: 2px solid var(--accent); outline-offset: 3px; }
.roi__plan-name {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
}
.roi__plan-badge {
  position: absolute;
  top: -7px; right: 10px;
  font-size: 8px; padding: 2px 7px;
  background: var(--accent); color: var(--paper);
  border-radius: 999px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 4px 10px -3px rgba(11,110,110,.45);
  white-space: nowrap;
}
.roi__plan-price {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.roi__plan-price small {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 2px;
  color: var(--ink-2);
}

.roi__output-headline {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(245,240,228,.12);
}
.roi__output-eyebrow {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,240,228,.55);
}
.roi__output-num {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 55, "opsz" 120;
  font-weight: 400;
  font-size: clamp(56px, 7vw, 88px);
  line-height: .95;
  letter-spacing: -0.03em;
  color: var(--lime);
}
.roi__output-unit {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 17px;
  color: rgba(245,240,228,.85);
}

.roi__bars {
  display: flex; flex-direction: column; gap: 10px;
}
.roi__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  background: rgba(245,240,228,.05);
  border: 1px solid rgba(245,240,228,.1);
  border-radius: 14px;
}
.roi__bar-lbl {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em;
  color: rgba(245,240,228,.7);
}
.roi__bar-val {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--paper);
  white-space: nowrap;
}
.roi__bar-val--good { color: var(--lime); }
.roi__bar-val--great {
  color: var(--accent);
  font-size: 22px;
}

.roi__verdict {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(245,240,228,.85);
  margin: 0;
  padding: 4px 0 6px;
}
.roi__verdict strong {
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
}

.roi__cta { margin-top: 4px; }
.roi__fineprint {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em;
  color: rgba(245,240,228,.55);
  margin: 4px 0 0;
  text-align: center;
}

@media (max-width: 880px) {
  .roi__panel { grid-template-columns: 1fr; }
  .roi__inputs, .roi__output { padding: 24px; }
  .roi__plans { grid-template-columns: 1fr; }
  .roi__plan-card { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============================================================
   SHIP FEED — live deliveries log
   ============================================================ */
.ship {
  padding: 100px 0 120px;
  position: relative;
}
.ship__lede {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto;
}
.ship__panel {
  max-width: 1100px;
  margin: 56px auto 0;
  padding: 32px 32px 36px;
  background: linear-gradient(165deg, #1a1a1a 0%, #0a0a0a 100%);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 30px 60px -20px rgba(17,17,17,.5),
    0 60px 120px -40px rgba(11,110,110,.18);
}
.ship__panel::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(540px 360px at 100% 0%, rgba(11,110,110,.18), transparent 60%),
    radial-gradient(420px 280px at 0% 100%, rgba(214,255,75,.08), transparent 60%);
  pointer-events: none;
}
.ship__panel > * { position: relative; }

.ship__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(245,240,228,.12);
  margin-bottom: 18px;
}
.ship__head-status {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  color: rgba(245,240,228,.7);
}
.ship__head-status strong {
  color: var(--paper); font-weight: 500;
  font-family: var(--f-display); font-size: 14px;
  letter-spacing: -0.005em;
  margin-left: 4px;
}
.ship__head-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(214,255,75,.18);
  animation: shipPulse 2s ease-in-out infinite;
}
@keyframes shipPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(214,255,75,.18); }
  50%      { box-shadow: 0 0 0 8px rgba(214,255,75,.05); }
}

.ship__filters {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.ship__filter {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  padding: 6px 12px;
  background: rgba(245,240,228,.05);
  border: 1px solid rgba(245,240,228,.1);
  color: rgba(245,240,228,.65);
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
  text-transform: uppercase;
}
.ship__filter:hover { color: var(--paper); border-color: rgba(245,240,228,.25); }
.ship__filter.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

.ship__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
}
.ship__item {
  display: grid;
  grid-template-columns: 100px 70px 1fr auto;
  align-items: start;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(245,240,228,.08);
  transition: background .2s;
}
.ship__item:hover { background: rgba(245,240,228,.02); }
.ship__item:last-child { border-bottom: 0; }
.ship__item.is-hidden { display: none; }

.ship__date {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .04em;
  color: rgba(245,240,228,.55);
  padding-top: 4px;
}
.ship__tag {
  display: inline-block;
  font-family: var(--f-mono); font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  text-align: center;
  background: rgba(245,240,228,.08);
  color: var(--paper);
  height: fit-content;
  margin-top: 2px;
}
.ship__tag--seo    { background: rgba(214,255,75,.16); color: var(--lime); }
.ship__tag--ai     { background: rgba(11,110,110,.18);  color: var(--accent); }
.ship__tag--ads    { background: rgba(118,167,238,.18); color: #76a7ee; }
.ship__tag--cro    { background: rgba(245,158,11,.16); color: #fbbf24; }
.ship__tag--report { background: rgba(168,85,247,.18); color: #c084fc; }

.ship__body {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.ship__h {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 55, "opsz" 120;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--paper);
}
.ship__p {
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(245,240,228,.72);
  margin: 0;
}
.ship__client {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(245,240,228,.5);
  margin-top: 2px;
}
.ship__sep { opacity: .4; margin: 0 4px; }

.ship__status {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  align-self: start;
  margin-top: 2px;
  white-space: nowrap;
}
.ship__status--live    { background: rgba(214,255,75,.14); color: var(--lime); }
.ship__status--running { background: rgba(11,110,110,.18);  color: var(--accent); }

.ship__foot {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(245,240,228,.12);
  font-family: var(--f-serif); font-style: italic;
  font-size: 18px;
  text-align: center;
  color: rgba(245,240,228,.85);
}
.ship__foot em {
  color: var(--paper);
  font-style: italic;
}

@media (max-width: 760px) {
  .ship__panel { padding: 24px 18px 28px; }
  .ship__head { flex-direction: column; align-items: flex-start; }
  .ship__item {
    grid-template-columns: auto auto;
    grid-template-areas:
      "date tag"
      "body body"
      "status status";
    gap: 8px 12px;
  }
  .ship__date { grid-area: date; padding: 0; }
  .ship__tag { grid-area: tag; justify-self: end; margin: 0; }
  .ship__body { grid-area: body; }
  .ship__status { grid-area: status; justify-self: start; }
}

/* ============================================================
   MICROQUOTES — inline pull-quotes between sections
   ============================================================ */
.microq {
  max-width: 800px;
  margin: 0 auto;
  padding: 56px 32px;
  text-align: center;
}
.microq blockquote {
  margin: 0 0 18px;
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 55, "opsz" 120;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-style: italic;
}
.microq blockquote::before { content: "\201C"; color: var(--accent); margin-right: 4px; }
.microq blockquote::after  { content: "\201D"; color: var(--accent); }
.microq figcaption {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.microq figcaption strong {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-transform: none;
  margin-right: 8px;
}

/* ============================================================
   STICKY BOOK BAR — fixed bottom, conversion catcher
   ============================================================ */
.stickbar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, calc(100% + 30px));
  z-index: 60;
  width: min(720px, calc(100vw - 32px));
  pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s;
  opacity: 0;
}
.stickbar.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.stickbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px 12px 24px;
  background: linear-gradient(160deg, #1a1a1a, #0a0a0a);
  color: var(--paper);
  border: 1px solid rgba(245,240,228,.14);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 28px 48px -16px rgba(17,17,17,.55),
    0 50px 100px -40px rgba(11,110,110,.35);
}
.stickbar__copy {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--paper); flex: 1; min-width: 0;
}
.stickbar__price {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--lime);
}
.stickbar__sep { opacity: .4; }
.stickbar__note { opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickbar__cta {
  flex: none;
  white-space: nowrap;
  padding: 10px 18px;
  font-size: 13px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
@media (max-width: 560px) {
  .stickbar { bottom: 14px; width: calc(100vw - 20px); }
  .stickbar__inner { padding: 10px 8px 10px 16px; gap: 8px; }
  .stickbar__note { display: none; }
  .stickbar__sep { display: none; }
  .stickbar__cta { padding: 9px 14px; font-size: 12px; }
}
/* When the sticky CTA is up, lift the chat fab above it so neither
   overlaps the other. Keeps the stickbar perfectly centered. */
.chatbot-fab { transition: bottom .35s cubic-bezier(.2,.7,.2,1), transform .25s, opacity .25s; }
body:has(.stickbar.is-visible) .chatbot-fab {
  bottom: calc(22px + 64px + 14px);
}
@media (max-width: 560px) {
  body:has(.stickbar.is-visible) .chatbot-fab {
    bottom: calc(14px + 56px + 12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stickbar { transition: opacity .2s; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding-bottom: 120px; }
.faq__list {
  max-width: 820px; margin: 0 auto; padding: 0 32px;
  display: flex; flex-direction: column; gap: 10px;
}
.faq details {
  padding: 22px 26px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 4px 14px -6px rgba(17,17,17,.1);
  position: relative; overflow: hidden;
  transition: background .3s, transform .3s, box-shadow .3s;
}
.faq details:hover { transform: translateY(-1px); }
.faq details::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 50%);
  pointer-events: none; border-radius: inherit;
}
.faq details[open] {
  background: var(--paper);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 12px 30px -12px rgba(17,17,17,.18);
}
.faq details > * { position: relative; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-display); font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 400; letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 40, "opsz" 96;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span {
  font-family: var(--f-mono); font-size: 20px; opacity: .5;
  transition: transform .3s;
}
.faq details[open] summary span { transform: rotate(45deg); color: var(--accent); opacity: 1; }
.faq details p {
  font-family: var(--f-serif); font-size: 17px; line-height: 1.5;
  color: var(--ink-2); max-width: 62ch;
  margin: 14px 0 0;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding: 140px 32px 160px;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(700px 400px at 80% 10%, rgba(11,110,110,.35), transparent 60%),
    radial-gradient(600px 500px at 10% 80%, rgba(214,255,75,.12), transparent 70%);
  pointer-events: none;
}
.cta__inner { position: relative; max-width: 1100px; margin: 0 auto; }
.cta__inner .eyebrow { margin-bottom: 28px; display: block; }
.cta__title {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 60, "opsz" 144;
  font-size: clamp(42px, 6.5vw, 104px);
  line-height: .96;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0 0 28px;
}
.cta__title em { font-family: var(--f-serif); font-style: italic; color: var(--lime); }
.strike {
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 6px;
  opacity: .55;
}
.cta__lede {
  font-family: var(--f-serif); font-size: clamp(19px, 1.6vw, 24px);
  max-width: 52ch; line-height: 1.4; margin: 0 0 40px;
  color: rgba(245,240,228,.85);
}
.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.cta__sig {
  font-family: var(--f-mono); font-size: 12.5px;
  letter-spacing: .06em; opacity: .65; margin: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(11,110,110,.05), transparent 60%),
    var(--bone-2);
  padding: 80px 24px 0;
  position: relative;
  overflow: hidden;
}
.foot__grid {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 14px;
  padding: 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 30px 60px -30px rgba(17,17,17,.18);
  margin-bottom: 40px;
  position: relative; overflow: hidden;
}
.foot__grid::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 40%);
  pointer-events: none; border-radius: inherit;
}
.foot__grid > div {
  position: relative;
  padding: 24px 28px;
  background: rgba(245,240,228,.4);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.foot__brand {
  font-family: var(--f-display);
  font-size: 28px; font-weight: 500;
  letter-spacing: -0.02em; margin: 0 0 8px;
}
.foot__brand span { color: var(--accent); }
.foot__tag {
  font-family: var(--f-serif); font-size: 17px; font-style: italic;
  color: var(--ink-2); margin: 0; max-width: 24ch;
}
.foot__h {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; margin: 0 0 16px; opacity: .7;
}
.foot__grid > div a {
  display: block; padding: 5px 0;
  font-family: var(--f-serif); font-size: 18px;
  transition: color .2s, padding .25s;
}
.foot__grid > div a:hover { color: var(--accent); padding-left: 8px; }

.foot__base {
  max-width: 1240px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 20px 28px;
  background: var(--glass-bg-2);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .04em; opacity: .85;
  position: relative; z-index: 1;
}
.foot__mega {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 80, "opsz" 144;
  font-size: clamp(120px, 28vw, 480px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: .78;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  text-align: center;
  margin: 40px -5vw -8vw;
  pointer-events: none;
  user-select: none;
  opacity: .85;
}

@media (max-width: 760px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__mega { -webkit-text-stroke: 1px var(--ink); }
}

/* ============================================================
   LOAD-IN ANIMATIONS
   IMPORTANT: only animate `opacity` here. Hero elements have a
   parallax `transform` driven by --pY at runtime — animating
   transform here would clobber it (animations beat inline + cascade).
   ============================================================ */
.hero__title .line {
  opacity: 0;
  animation: heroFadeIn .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__title .line:nth-child(1) { animation-delay: .1s; }
.hero__title .line:nth-child(2) { animation-delay: .25s; }
.hero__title .line:nth-child(3) { animation-delay: .4s; }
.hero__lede, .hero__cta {
  opacity: 0;
  animation: heroFadeIn .9s .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__cta { animation-delay: .85s; }
.hero__stats {
  opacity: 0; transform: translateY(20px);
  animation: rise .9s 1s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes heroFadeIn {
  to { opacity: 1; }
}
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* data-anim — generic appear animation */
[data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .85s cubic-bezier(.2,.7,.2,1),
    transform .85s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-anim].is-in { opacity: 1; transform: translateY(0); }

/* section-head appear (h2 + eyebrow + lede) */
.services__head > *,
.section-head > *,
.magnet__intro > *,
.manifesto__inner > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.is-in .services__head > *,
.services__head.is-in > *,
.section-head.is-in > *,
.magnet__intro.is-in > *,
.manifesto__inner.is-in > * { opacity: 1; transform: translateY(0); }

.services__head.is-in > *:nth-child(1),
.section-head.is-in > *:nth-child(1),
.magnet__intro.is-in > *:nth-child(1),
.manifesto__inner.is-in > *:nth-child(1) { transition-delay: 0s; }
.services__head.is-in > *:nth-child(2),
.section-head.is-in > *:nth-child(2),
.magnet__intro.is-in > *:nth-child(2),
.manifesto__inner.is-in > *:nth-child(2) { transition-delay: .1s; }
.services__head.is-in > *:nth-child(3),
.section-head.is-in > *:nth-child(3),
.magnet__intro.is-in > *:nth-child(3),
.manifesto__inner.is-in > *:nth-child(3) { transition-delay: .2s; }
.manifesto__inner.is-in > *:nth-child(4) { transition-delay: .3s; }
.manifesto__inner.is-in > *:nth-child(5) { transition-delay: .4s; }

/* hero animations run immediately — preloader covers them until ~2.8s;
   by the time the preloader fades, the hero is fully revealed underneath */

/* selection */
::selection { background: var(--accent); color: #fff; }

/* ============================================================
   ARTICLE PAGES (shared by case studies + blog posts)
   ============================================================ */
.article-body { background: var(--bone); min-height: 100vh; }

.article-nav {
  position: sticky; top: 12px; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  margin: 12px auto 0;
  max-width: calc(100% - 24px);
  padding: 10px 14px 10px 22px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.article-nav__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 12.5px;
  letter-spacing: .02em;
  padding: 6px 4px;
  transition: transform .25s;
}
.article-nav__back:hover { transform: translateX(-3px); }

.article-hero {
  max-width: 920px; margin: 0 auto;
  padding: 72px 32px 48px;
  text-align: center;
}
.article-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 14px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--glass-bg-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 28px;
}
.article-hero__eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(11,110,110,.2);
}
.article-hero h1 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 55, "opsz" 144, "wght" 400;
  font-size: clamp(36px, 5.6vw, 80px);
  line-height: 1; letter-spacing: -0.032em;
  font-weight: 400;
  margin: 0 0 24px;
}
.article-hero h1 em {
  font-family: var(--f-serif); font-style: italic; color: var(--accent);
}
.article-hero__dek {
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.4; color: var(--ink-2);
  max-width: 54ch; margin: 0 auto 28px;
}
.article-hero__meta {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--ink-2); opacity: .7;
}
.article-hero__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

.article-cover {
  max-width: 1100px; margin: 0 auto 80px;
  padding: 0 32px;
}
.article-cover__inner {
  aspect-ratio: 21 / 9;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(155deg, #1a1a1a, #0a0a0a);
}
.article-cover__inner--image { background: linear-gradient(155deg, #1a1a1a, #0a0a0a); }
.article-cover__inner--image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.article-cover__inner.pattern-1 {
  background:
    radial-gradient(circle at 30% 30%, rgba(11,110,110,.45), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(214,255,75,.15), transparent 50%),
    linear-gradient(155deg, #1a1a1a, #0a0a0a);
}
.article-cover__inner.pattern-2 {
  background:
    radial-gradient(circle at 80% 20%, rgba(23,55,44,.65), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(11,110,110,.2), transparent 60%),
    repeating-linear-gradient(0deg, rgba(245,240,228,.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(245,240,228,.04) 0 1px, transparent 1px 40px),
    linear-gradient(155deg, #131c17, #0a0a0a);
}
.article-cover__inner.pattern-3 {
  background:
    radial-gradient(circle at 50% 50%, rgba(11,110,110,.4), transparent 45%),
    conic-gradient(from 180deg at 50% 50%, rgba(11,110,110,.2), transparent 30%, rgba(214,255,75,.08) 60%, transparent 90%),
    linear-gradient(155deg, #1a1a1a, #0a0a0a);
}

/* stat band for case studies */
.article-stats {
  max-width: 1100px; margin: 0 auto 72px;
  padding: 0 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.article-stat {
  padding: 24px 26px;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-brd);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.article-stat__lbl {
  display: block;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); opacity: .65;
  margin-bottom: 10px;
}
.article-stat__val {
  display: block;
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 50, "opsz" 120;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.02em; line-height: 1;
  font-weight: 400;
}

/* prose */
.prose {
  max-width: 720px; margin: 0 auto;
  padding: 0 32px 64px;
  font-family: var(--f-serif);
  font-size: 19px; line-height: 1.65;
  color: var(--ink);
}
.prose h2 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 50, "opsz" 120;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08; letter-spacing: -0.022em;
  font-weight: 400;
  margin: 64px 0 20px;
}
.prose h2 em { font-family: var(--f-serif); font-style: italic; color: var(--accent); }
.prose h3 {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(22px, 2vw, 26px);
  letter-spacing: -0.018em; line-height: 1.2;
  margin: 40px 0 14px;
}
.prose p { margin: 0 0 20px; }
.prose em { font-style: italic; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 24px; }
.prose li { margin-bottom: 8px; }
.prose hr {
  border: 0; height: 1px; background: var(--rule);
  margin: 56px auto; max-width: 120px;
}
.prose blockquote {
  margin: 40px 0;
  padding: 28px 32px;
  background: var(--glass-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 16px 16px 0;
  font-family: var(--f-serif); font-style: italic;
  font-size: 22px; line-height: 1.45;
  color: var(--ink);
}
.prose__quote {
  margin: 40px 0;
}
.prose__quote blockquote {
  margin: 0;
}
.prose__quote figcaption {
  margin-top: 14px;
  padding-left: 32px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2); font-style: normal;
}
.prose code {
  font-family: var(--f-mono); font-size: 14px;
  background: rgba(17,17,17,.07);
  padding: 2px 8px; border-radius: 6px;
  color: var(--accent);
}

.prose .callout {
  margin: 40px 0;
  padding: 28px 32px;
  background: linear-gradient(155deg, #1a1a1a, #0a0a0a);
  color: var(--paper);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.prose .callout::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(300px 200px at 100% 0%, rgba(11,110,110,.2), transparent 60%);
  pointer-events: none;
}
.prose .callout > * { position: relative; }
.prose .callout strong {
  color: var(--lime); font-weight: 400;
  font-family: var(--f-serif); font-style: italic;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  display: block; margin-bottom: 10px;
}
.prose .callout p { margin: 0; color: rgba(245,240,228,.88); }

.prose .steps {
  list-style: none; padding: 0; margin: 32px 0;
  display: flex; flex-direction: column; gap: 14px;
}
.prose .steps li {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  padding: 22px 26px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 16px;
  margin: 0;
}
.prose .steps li::before {
  content: counter(step);
  counter-increment: step;
  grid-row: span 2;
  font-family: var(--f-display);
  font-size: 32px; line-height: 1;
  letter-spacing: -0.02em; color: var(--accent);
}
.prose .steps { counter-reset: step; }
.prose .steps strong {
  font-family: var(--f-display); font-weight: 500;
  font-size: 19px; letter-spacing: -0.01em;
  display: block;
}
.prose .steps p { margin: 4px 0 0; font-size: 16.5px; color: var(--ink-2); }

/* article CTA block */
.article-cta {
  max-width: 1040px; margin: 40px auto 0;
  padding: 0 32px 120px;
}
.article-cta__inner {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #1a1a1a, #0a0a0a);
  color: var(--paper);
  border-radius: 28px;
  padding: 64px 48px;
  text-align: center;
}
.article-cta__inner::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(500px 320px at 100% 0%, rgba(11,110,110,.3), transparent 60%),
    radial-gradient(400px 260px at 0% 100%, rgba(214,255,75,.1), transparent 60%);
  pointer-events: none;
}
.article-cta__inner > * { position: relative; }
.article-cta h2 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 60, "opsz" 144;
  font-size: clamp(32px, 4.5vw, 60px);
  line-height: 1; letter-spacing: -0.028em;
  font-weight: 400; margin: 0 0 20px;
}
.article-cta h2 em { font-family: var(--f-serif); font-style: italic; color: var(--lime); }
.article-cta p {
  font-family: var(--f-serif); font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5; margin: 0 0 32px;
  color: rgba(245,240,228,.85); max-width: 52ch; margin-left: auto; margin-right: auto;
}
.article-cta__actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}

/* related posts */
.article-related {
  max-width: 1240px; margin: 0 auto;
  padding: 0 32px 120px;
}
.article-related h3 {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 20px; opacity: .7;
}
.article-related__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}

@media (max-width: 860px) {
  .article-hero { padding: 48px 20px 32px; }
  .article-cover { padding: 0 20px; margin-bottom: 48px; }
  .article-stats { grid-template-columns: repeat(2, 1fr); padding: 0 20px; margin-bottom: 48px; }
  .prose { padding: 0 20px 48px; font-size: 17px; }
  .prose .steps li { padding: 18px 20px; gap: 14px; }
  .prose blockquote { padding: 22px 24px; font-size: 19px; }
  .article-cta { padding: 0 20px 80px; }
  .article-cta__inner { padding: 48px 24px; }
  .article-related { padding: 0 20px 80px; }
  .article-related__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICES PAGE — AI Operations Systems catalogue
   ============================================================ */
.svc-body { background: var(--bone); }

.svc-hero {
  max-width: 1080px; margin: 0 auto;
  padding: 60px 32px 40px;
  text-align: center;
  position: relative; z-index: 1;
}
.svc-hero h1 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 55, "opsz" 144, "wght" 400;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: .98;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin: 24px 0 24px;
}
.svc-hero h1 em {
  font-family: var(--f-serif); font-style: italic; color: var(--accent);
}
.svc-hero__dek {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 60ch; margin: 0 auto 28px;
}
.svc-hero__meta {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 14px; justify-content: center;
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .04em; color: var(--ink-2);
  padding: 10px 22px;
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
}
.svc-hero__meta strong {
  font-family: var(--f-display); font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink);
  margin-right: 4px;
}
.svc-hero__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .4; }

/* ============================================================
   MARKETPLACE — sidebar + grid layout
   ============================================================ */
.mkt-layout {
  max-width: 1280px;
  margin: 40px auto 60px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: flex-start;
  position: relative;
}

/* Mobile filter bar (hidden on desktop) */
.mkt-mobile-bar {
  display: none;
  grid-column: 1 / -1;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 4px;
  position: sticky;
  top: 72px;
  z-index: 35;
  padding: 10px 0;
  background: linear-gradient(180deg, var(--bone) 70%, transparent);
}
.mkt-mobile-bar__filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 12px;
  font-family: var(--f-mono); font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.mkt-mobile-bar__active-count {
  min-width: 20px; height: 20px;
  display: inline-grid; place-items: center;
  padding: 0 6px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  opacity: 0;
  transition: opacity .2s;
}
.mkt-mobile-bar__active-count[data-has="1"] { opacity: 1; }
.mkt-mobile-bar__search {
  flex: 1;
  position: relative;
  display: flex; align-items: center;
}
.mkt-mobile-bar__search input {
  width: 100%;
  font: inherit; font-family: var(--f-serif); font-size: 15px;
  padding: 12px 14px 12px 36px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: var(--ink);
}
.mkt-mobile-bar__search input:focus {
  outline: 0; border-color: var(--ink);
}
.mkt-mobile-bar__search .mkt-search__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-2); opacity: .45;
  pointer-events: none;
}

/* Sidebar */
.mkt-sidebar {
  position: sticky;
  top: 92px;
  align-self: flex-start;
  padding: 24px 22px 22px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 10px 24px -12px rgba(17,17,17,.1);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.mkt-sidebar::-webkit-scrollbar { width: 6px; }
.mkt-sidebar::-webkit-scrollbar-thumb { background: rgba(17,17,17,.15); border-radius: 3px; }

.mkt-sidebar__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule-2);
}
.mkt-sidebar__kicker {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-2); opacity: .6;
}
.mkt-sidebar__close {
  display: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(17,17,17,.06);
  color: var(--ink);
  font-size: 20px; line-height: 1;
  border: 0; cursor: pointer;
}

.mkt-sidebar__search {
  position: relative;
  display: flex; align-items: center;
  margin-bottom: 22px;
}
.mkt-sidebar__search .mkt-search__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-2); opacity: .45;
  pointer-events: none;
}
.mkt-sidebar__search input {
  width: 100%;
  font: inherit; font-family: var(--f-serif); font-size: 15px;
  padding: 10px 14px 10px 38px;
  background: rgba(17,17,17,.04);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink);
  transition: border-color .2s, background .2s;
}
.mkt-sidebar__search input::placeholder { color: var(--ink-2); opacity: .55; font-style: italic; }
.mkt-sidebar__search input:focus {
  outline: 0;
  border-color: var(--ink);
  background: #fff;
}

.mkt-sidebar__group {
  margin-bottom: 20px;
}
.mkt-sidebar__label {
  display: block;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2); opacity: .55;
  margin: 0 0 10px;
}

.mkt-sidebar__list {
  display: flex; flex-direction: column; gap: 1px;
}
.mkt-side-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
}
.mkt-side-item:hover { background: rgba(17,17,17,.04); color: var(--ink); }
.mkt-side-item[data-active="true"] {
  background: var(--ink); color: var(--paper);
}
.mkt-side-item[data-active="true"] .mkt-side-item__count {
  color: rgba(245,240,228,.6);
}
.mkt-side-item__name {
  font-family: var(--f-serif);
  font-size: 15px;
  letter-spacing: -0.005em;
}
.mkt-side-item__count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2); opacity: .55;
  flex-shrink: 0;
}

.mkt-sidebar__tiers {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mkt-tier-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mkt-tier-btn:hover { background: rgba(17,17,17,.04); color: var(--ink); }
.mkt-tier-btn[data-active="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

.mkt-sidebar .mkt-sort {
  width: 100%;
  font: inherit; font-family: var(--f-mono); font-size: 12.5px;
  padding: 10px 30px 10px 14px;
  background: rgba(17,17,17,.04);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23111' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.mkt-sidebar__clear {
  margin-top: 6px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.mkt-sidebar__clear:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.mkt-sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 85;
  background: rgba(17,17,17,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
  cursor: pointer;
}
.mkt-sidebar-overlay.is-open { opacity: 1; visibility: visible; }

/* Results column */
.mkt-results {
  min-width: 0;
}
.mkt-results__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 4px 4px 18px;
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: 20px;
}
.mkt-results__count {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--ink-2);
}
.mkt-results__count strong {
  font-family: var(--f-display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.015em;
  color: var(--ink);
  margin-right: 4px;
}
.mkt-results__active {
  font-family: var(--f-mono); font-size: 11.5px;
  color: var(--ink-2); opacity: .7;
  letter-spacing: .02em;
}

.mkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.mkt-empty {
  padding: 60px 20px;
  text-align: center;
  font-family: var(--f-serif); font-size: 17px; font-style: italic;
  color: var(--ink-2); opacity: .75;
}

@media (max-width: 960px) {
  .mkt-layout { grid-template-columns: 1fr; padding: 0 20px; margin-top: 24px; gap: 0; }
  .mkt-mobile-bar { display: flex; }
  .mkt-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(340px, 86vw);
    z-index: 90;
    max-height: 100vh;
    border-radius: 0 24px 24px 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .4s cubic-bezier(.2,.7,.2,1), visibility .4s;
    padding-top: 24px;
  }
  .mkt-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .mkt-sidebar__close { display: grid; place-items: center; }
  .mkt-sidebar-overlay { display: block; }
  body.mkt-sidebar-open { overflow: hidden; }
}

@media (max-width: 560px) {
  .mkt-mobile-bar { top: 68px; }
  .mkt-grid { grid-template-columns: 1fr; }
}

/* Legacy top-bar controls (no longer used but kept for safety) */
.mkt-controls {
  position: sticky; top: 76px; z-index: 40;
  max-width: 1240px;
  margin: 40px auto 28px;
  padding: 20px 24px 18px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 10px 30px -12px rgba(17,17,17,.12);
}

.mkt-controls__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule-2);
}
.mkt-controls__kicker {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-2); opacity: .65;
}
.mkt-controls__count-pill {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .08em; color: var(--ink-2);
  padding: 5px 12px;
  background: rgba(17,17,17,.04);
  border-radius: 999px;
}
.mkt-controls__count-pill strong {
  font-family: var(--f-display); font-weight: 500;
  font-size: 14px; letter-spacing: -0.01em;
  color: var(--ink);
  margin-right: 2px;
}

/* Search + sort row */
.mkt-controls__row {
  display: flex; gap: 10px; align-items: stretch;
  margin-bottom: 14px;
}
.mkt-search {
  flex: 1;
  position: relative;
  display: flex; align-items: center;
}
.mkt-search__icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--ink-2); opacity: .45;
  pointer-events: none;
}
.mkt-search input {
  width: 100%;
  font: inherit; font-family: var(--f-serif); font-size: 16px;
  padding: 12px 14px 12px 40px;
  background: rgba(17,17,17,.04);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.mkt-search input::placeholder { color: var(--ink-2); opacity: .55; font-style: italic; }
.mkt-search input:focus {
  outline: 0;
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(17,17,17,.08);
}

.mkt-sort-wrap {
  display: flex; flex-direction: column; justify-content: center;
  padding: 6px 16px;
  background: rgba(17,17,17,.04);
  border: 1px solid transparent;
  border-radius: 12px;
  min-width: 170px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.mkt-sort-wrap:hover { background: rgba(17,17,17,.06); }
.mkt-sort-label {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-2); opacity: .6;
  margin-bottom: 2px;
}
.mkt-sort {
  font: inherit; font-family: var(--f-mono); font-size: 13px;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  padding: 0 22px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23111' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  width: 100%;
}
.mkt-sort:focus { outline: 0; }

/* Filter rows (tier, industry) */
.mkt-filter-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
}
.mkt-filter-row + .mkt-filter-row {
  border-top: 1px solid var(--rule-2);
}
.mkt-filter-label {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2); opacity: .55;
  flex-shrink: 0;
  min-width: 60px;
}

/* Chips */
.mkt-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mkt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .02em;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.mkt-chip:hover {
  background: rgba(17,17,17,.04);
  color: var(--ink);
  border-color: rgba(17,17,17,.2);
}
.mkt-chip[data-active="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.mkt-chip-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.mkt-chip-dot--bronze { background: #a8772e; }
.mkt-chip-dot--silver { background: rgba(17,17,17,.4); }
.mkt-chip-dot--gold   { background: var(--lime); box-shadow: 0 0 0 1px var(--ink); }

/* Horizontal-scroll industry chips with edge fades */
.mkt-filter-row--industries {
  align-items: flex-start;
}
.mkt-filter-row--industries .mkt-filter-label {
  padding-top: 8px;
}
.mkt-industries-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
.mkt-chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 4px;
  scroll-padding: 0 24px;
}
.mkt-chips--scroll::-webkit-scrollbar { display: none; }
.mkt-chips--scroll .mkt-chip { flex-shrink: 0; }
.mkt-industries-fade {
  position: absolute; top: 0; bottom: 0;
  width: 30px; z-index: 2; pointer-events: none;
}
.mkt-industries-fade--left {
  left: 0;
  background: linear-gradient(90deg, var(--paper), rgba(245,240,228,0));
}
.mkt-industries-fade--right {
  right: 0;
  background: linear-gradient(-90deg, var(--paper), rgba(245,240,228,0));
}

.mkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.mkt-empty {
  padding: 60px 20px;
  text-align: center;
  font-family: var(--f-serif); font-size: 18px; font-style: italic;
  color: var(--ink-2); opacity: .75;
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .mkt-controls {
    max-width: calc(100% - 24px);
    padding: 16px 16px 14px;
  }
  .mkt-controls__row { flex-direction: column; gap: 8px; }
  .mkt-sort-wrap { min-width: 0; flex-direction: row; align-items: center; gap: 10px; padding: 10px 16px; }
  .mkt-sort-label { margin: 0; }
  .mkt-filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .mkt-filter-row--industries { gap: 6px; }
  .mkt-filter-row--industries .mkt-filter-label { padding-top: 0; }
  .mkt-industries-wrap { width: 100%; }
}

/* Legacy sticky filter (unused now but kept for safety) */
.svc-filter {
  position: sticky; top: 76px; z-index: 40;
  margin: 40px auto 0;
  max-width: calc(100% - 24px);
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 8px 20px -8px rgba(17,17,17,.15),
    0 30px 60px -30px rgba(17,17,17,.18);
  overflow: hidden;
}
.svc-filter__inner {
  display: flex; gap: 2px; align-items: center;
  padding: 6px 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.svc-filter__inner::-webkit-scrollbar { display: none; }
.svc-filter__inner a {
  flex-shrink: 0;
  padding: 8px 14px;
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-2);
  border-radius: 999px;
  transition: background .2s, color .2s;
}
.svc-filter__inner a:hover { background: rgba(17,17,17,.06); color: var(--ink); }
.svc-filter__tier {
  background: var(--ink); color: var(--paper) !important;
  margin-left: auto;
}
.svc-filter__tier:hover { background: var(--accent) !important; color: #fff !important; }

.svc-main {
  max-width: 1240px; margin: 0 auto;
  padding: 60px 32px 40px;
  position: relative; z-index: 1;
}

/* Industry section */
.svc-industry {
  padding: 56px 0;
  scroll-margin-top: 140px;
  border-top: 1px solid var(--rule-2);
}
.svc-industry:first-child { border-top: 0; padding-top: 20px; }

.svc-industry__head {
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  align-items: start;
  margin-bottom: 36px;
  max-width: 920px;
}
.svc-industry__icon {
  width: 64px; height: 64px;
  border-radius: 20px;
  background: linear-gradient(155deg, #1a1a1a, #0a0a0a);
  color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-size: 30px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 10px 20px -8px rgba(17,17,17,.35);
  flex-shrink: 0;
}
.svc-industry__head h2 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 50, "opsz" 120;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 10px;
}
.svc-industry__head p {
  font-family: var(--f-serif);
  font-size: 17px; line-height: 1.5;
  color: var(--ink-2); margin: 0;
  max-width: 66ch;
}

/* Service cards grid */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.svc-card {
  position: relative;
  padding: 26px 28px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 8px 20px -10px rgba(17,17,17,.12),
    0 30px 60px -30px rgba(17,17,17,.18);
  display: flex; flex-direction: column;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .3s;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 14px 30px -10px rgba(17,17,17,.18),
    0 40px 80px -30px rgba(17,17,17,.25);
  border-color: rgba(17,17,17,.2);
}
.svc-card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 40%);
  pointer-events: none;
}
.svc-card > * { position: relative; }

.svc-card__num {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 8px;
}

/* Marketplace top meta row */
.svc-card__top {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.svc-card__industry {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px;
  background: rgba(11,110,110,.08);
  border-radius: 999px;
}
.svc-card__tier {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.svc-card__tier--bronze { background: rgba(176,127,56,.12); color: #a8772e; border-color: rgba(176,127,56,.25); }
.svc-card__tier--silver { background: rgba(17,17,17,.06); color: var(--ink-2); border-color: var(--rule); }
.svc-card__tier--gold   { background: var(--ink); color: var(--lime); border-color: var(--ink); }

/* Add-to-quote button */
.svc-card__add {
  margin-top: 16px;
  width: 100%;
  padding: 12px 18px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s, color .25s, transform .2s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  position: relative;
}
.svc-card__add:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.svc-card__add span span { font-size: 15px; line-height: 1; }
.svc-card__add-default { display: inline-flex; align-items: center; gap: 6px; }
.svc-card__add-added   { display: none; align-items: center; gap: 6px; }
.svc-card__add.is-added {
  background: rgba(214,255,75,.18);
  color: var(--forest);
  border-color: rgba(23,55,44,.3);
}
.svc-card__add.is-added .svc-card__add-default { display: none; }
.svc-card__add.is-added .svc-card__add-added   { display: inline-flex; color: var(--forest); }
.svc-card h3 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 50, "opsz" 96;
  font-weight: 500;
  font-size: 21px; line-height: 1.15; letter-spacing: -0.018em;
  margin: 0 0 10px;
  color: var(--ink);
}
.svc-card p {
  font-family: var(--f-serif); font-size: 15.5px; line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.svc-card__why {
  font-family: var(--f-mono); font-size: 12px; line-height: 1.5;
  color: var(--ink-2);
  padding: 12px 14px;
  background: rgba(11,110,110,.05);
  border: 1px solid rgba(11,110,110,.18);
  border-radius: 10px;
  margin-bottom: 12px;
}
.svc-card__why span {
  display: block;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  font-weight: 500;
}
.svc-card__target {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-2); opacity: .75;
  margin-bottom: 20px;
}
.svc-card__price {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.svc-card__setup {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--ink-2); opacity: .8;
}
.svc-card__mo {
  font-family: var(--f-display);
  font-size: 24px; letter-spacing: -0.02em; line-height: 1;
  font-weight: 400;
}
.svc-card__mo span {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-2); opacity: .7;
  margin-left: 2px;
}

/* Tier comparison */
.svc-tiers {
  padding: 80px 0 40px;
  scroll-margin-top: 140px;
  border-top: 1px solid var(--rule-2);
  margin-top: 40px;
}
.svc-tiers__head {
  text-align: center; margin: 0 auto 48px;
  max-width: 720px;
}
.svc-tiers__head h2 {
  font-family: var(--f-display);
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 400; letter-spacing: -0.028em; line-height: 1;
  margin: 16px 0 16px;
}
.svc-tiers__head p {
  font-family: var(--f-serif);
  font-size: 17px; line-height: 1.5;
  color: var(--ink-2); max-width: 52ch; margin: 0 auto;
}

.svc-tiers__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1040px; margin: 0 auto;
}
.svc-tier {
  position: relative;
  padding: 32px 28px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 10px 24px -10px rgba(17,17,17,.15),
    0 40px 80px -40px rgba(17,17,17,.25);
}
.svc-tier::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.3), transparent 40%);
  pointer-events: none;
}
.svc-tier > * { position: relative; }
.svc-tier--featured {
  background: linear-gradient(155deg, #1c1c1c, #0a0a0a);
  color: var(--paper);
  border-color: rgba(245,240,228,.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 40px 80px -25px rgba(17,17,17,.5),
    0 0 80px -20px rgba(11,110,110,.25);
}
.svc-tier__ribbon {
  position: absolute; top: -12px; right: 20px;
  background: var(--lime); color: var(--ink);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--ink);
  box-shadow: 0 6px 14px -4px rgba(214,255,75,.5);
}
.svc-tier__badge {
  display: inline-block;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(17,17,17,.06);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  margin-bottom: 24px;
}
.svc-tier--featured .svc-tier__badge {
  background: rgba(245,240,228,.08);
  border-color: rgba(245,240,228,.2);
  color: var(--paper);
}
.svc-tier__price {
  font-family: var(--f-display);
  font-size: 40px; line-height: 1; font-weight: 400;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
}
.svc-tier__price span {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2); opacity: .7;
  margin-left: 6px;
}
.svc-tier--featured .svc-tier__price span { color: rgba(245,240,228,.7); }
.svc-tier__mo {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .02em;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.svc-tier__mo span {
  opacity: .65; letter-spacing: .06em;
}
.svc-tier--featured .svc-tier__mo { color: rgba(245,240,228,.8); }
.svc-tier ul {
  list-style: none; padding: 16px 0; margin: 0;
  font-family: var(--f-mono); font-size: 13px; line-height: 1.9;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.svc-tier--featured ul {
  border-color: rgba(245,240,228,.12);
}
.svc-tier__note {
  font-family: var(--f-serif); font-style: italic;
  font-size: 14px; line-height: 1.45;
  color: var(--ink-2);
  margin: 18px 0 0;
}
.svc-tier--featured .svc-tier__note { color: rgba(245,240,228,.78); }

@media (max-width: 960px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-tiers__grid { grid-template-columns: 1fr; }
  .svc-industry__head { grid-template-columns: 1fr; gap: 16px; }
  .svc-industry__icon { width: 56px; height: 56px; font-size: 26px; }
}

@media (max-width: 760px) {
  .svc-hero { padding: 36px 20px 28px; }
  .svc-main { padding: 40px 20px 20px; }
  .svc-filter { top: 68px; margin-top: 24px; }
  .svc-card { padding: 22px 22px; }
  .svc-industry { padding: 40px 0; }
  .mkt-controls { top: 68px; padding: 12px; }
  .mkt-controls__inner { gap: 10px; }
  .mkt-filter-group { width: 100%; }
  .mkt-filter-group--sort { flex-direction: row; }
  .mkt-sort { flex: 1; }
}

/* ============================================================
   CART / QUOTE BUILDER
   ============================================================ */
.cart-toggle {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 75;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px 12px 14px;
  background: linear-gradient(155deg, #1c1c1c, #0a0a0a);
  color: var(--paper);
  border-radius: 999px;
  border: 1px solid rgba(245,240,228,.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 14px 30px -10px rgba(17,17,17,.5),
    0 0 40px -12px rgba(11,110,110,.3);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
}
.cart-toggle:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 18px 40px -10px rgba(17,17,17,.55),
    0 0 50px -12px rgba(11,110,110,.45);
}
.cart-toggle__icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(245,240,228,.08);
  display: grid; place-items: center;
  color: var(--paper);
}
.cart-toggle__count {
  min-width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  padding: 0 6px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0;
}
.cart-toggle__count[data-has="0"] {
  background: rgba(245,240,228,.1);
  color: rgba(245,240,228,.6);
}
.cart-toggle.is-pulsing .cart-toggle__count {
  animation: cart-pulse 2s ease-in-out infinite;
}
@keyframes cart-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(11,110,110,.5); }
  50%      { box-shadow: 0 0 0 8px rgba(11,110,110,0); }
}

.cart-overlay {
  position: fixed; inset: 0;
  z-index: 85;
  background: rgba(17,17,17,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0; padding: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
  cursor: pointer;
}
.cart-overlay.is-open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 16px; bottom: 16px; right: 16px;
  width: 420px; max-width: calc(100vw - 32px);
  z-index: 90;
  background: var(--paper);
  border-radius: 24px;
  border: 1px solid rgba(17,17,17,.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 40px 80px -20px rgba(17,17,17,.35),
    0 0 80px -20px rgba(11,110,110,.15);
  padding: 26px 26px 22px;
  display: flex; flex-direction: column;
  transform: translateX(calc(100% + 24px));
  visibility: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), visibility .5s;
}
.cart-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.cart-drawer__head h2 {
  font-family: var(--f-display);
  font-size: 28px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1;
  margin: 0;
}
.cart-drawer__close {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(17,17,17,.06);
  color: var(--ink-2);
  font-size: 22px; line-height: 1;
  border: 0; cursor: pointer;
  transition: background .2s, color .2s;
}
.cart-drawer__close:hover { background: var(--ink); color: var(--paper); }

.cart-drawer__intro {
  font-family: var(--f-serif); font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 20px;
}

.cart-list {
  list-style: none; padding: 0; margin: 0 0 16px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0;
}
.cart-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(17,17,17,.04);
  border: 1px solid var(--rule-2);
  border-radius: 14px;
}
.cart-item__body { flex: 1; min-width: 0; }
.cart-item__industry {
  display: block;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}
.cart-item__title {
  display: block;
  font-family: var(--f-display); font-weight: 500;
  font-size: 15px; letter-spacing: -0.01em; line-height: 1.2;
  margin-bottom: 4px;
}
.cart-item__price {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-2); opacity: .75;
}
.cart-item__remove {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(17,17,17,.06);
  color: var(--ink);
  font-size: 18px; line-height: 1;
  border: 0; cursor: pointer;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.cart-item__remove:hover { background: var(--accent); color: #fff; }

.cart-empty {
  font-family: var(--f-serif); font-style: italic;
  font-size: 15px; line-height: 1.5;
  color: var(--ink-2); opacity: .7;
  margin: 20px 0 auto;
  padding: 20px;
  text-align: center;
  background: rgba(17,17,17,.03);
  border-radius: 14px;
  border: 1px dashed var(--rule);
}
.cart-empty strong { font-style: normal; color: var(--accent); font-weight: 500; }

.cart-totals {
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  margin-bottom: 14px;
}
.cart-totals__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
  font-family: var(--f-mono); font-size: 13px;
  color: var(--ink-2);
}
.cart-totals__row strong {
  font-family: var(--f-display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.015em;
  color: var(--ink);
}
.cart-totals__row strong em {
  font-family: var(--f-mono); font-size: 11px;
  font-style: normal; letter-spacing: .04em;
  color: var(--ink-2); opacity: .7;
  margin-left: 2px;
}
.cart-totals__note {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em;
  color: var(--ink-2); opacity: .65;
  line-height: 1.5;
  margin: 8px 0 0;
}

.cart-drawer__actions {
  display: flex; flex-direction: column; gap: 10px;
}
.cart-clear {
  background: transparent;
  color: var(--ink-2);
  border: 0;
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .04em;
  text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer; padding: 4px 0;
  opacity: .6; transition: opacity .2s, color .2s;
}
.cart-clear:hover { opacity: 1; color: var(--accent); }

body.cart-open { overflow: hidden; }

@media (max-width: 560px) {
  .cart-toggle { bottom: 16px; right: 16px; padding: 10px 14px 10px 12px; }
  .cart-toggle__label { display: none; }
  .cart-drawer { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 85vh; border-radius: 24px 24px 0 0; transform: translateY(calc(100% + 24px)); }
  .cart-drawer.is-open { transform: translateY(0); }
}

/* ============================================================
   SERVICES — editorial slabs (asymmetric, alternating)
   ============================================================ */
.svc {
  position: relative;
  padding: 100px 0 60px;
}
.svc__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
  padding: 0 24px;
}
.svc__intro .h2 { margin-top: 12px; }
.svc__lede {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-2);
  margin: 14px 0 0;
  line-height: 1.5;
}
.svc__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1280px;
  margin: 0 auto;
}
.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  align-items: stretch;
  padding: 0 6vw;
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
  transition: background-color .55s cubic-bezier(.2,.7,.2,1);
}
.svc-row:first-child { border-top: 1px solid var(--rule); }
/* Alternating direction — even rows flip number to the right */
.svc-row:nth-child(even) {
  grid-template-columns: 1.1fr 1fr;
}
.svc-row:nth-child(even) .svc-row__viz { order: 2; border-left: 1px solid var(--rule); border-right: none; }
.svc-row:nth-child(even) .svc-row__copy   { order: 1; }

/* Per-row tints */
.svc-row--01 { --svc-tint: rgba(214,255,75,.10);  --svc-glow: rgba(214,255,75,.35); }
.svc-row--02 { --svc-tint: rgba(11,110,110,.10);   --svc-glow: rgba(11,110,110,.35);  }
.svc-row--03 { --svc-tint: rgba(23,55,44,.10);    --svc-glow: rgba(23,55,44,.30);   }
.svc-row--04 { --svc-tint: rgba(11,110,110,.07);   --svc-glow: rgba(214,255,75,.35); }

.svc-row:hover {
  background-color: var(--svc-tint);
}

/* Number box — the editorial showpiece */
.svc-row__viz {
  position: relative;
  border-right: 1px solid var(--rule);
  padding: 80px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 420px;
}
/* ----- Shared viz container ----- */
.viz {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ----- 01 · Hand-drawn ellipse around the stat ----- */
.viz--circled {
  height: 200px;
  justify-content: center;
}
.viz-circled__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--accent);
  opacity: .9;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), color .4s;
}
.svc-row:hover .viz-circled__ring {
  transform: rotate(2deg) scale(1.04);
}
.viz-circled__stat {
  position: relative;
  z-index: 2;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(64px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variation-settings: "SOFT" 80, "opsz" 144;
}
.viz-circled__label {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ----- 02 · Concentric rings + clock metaphor ----- */
.viz--rings {
  height: 240px;
  justify-content: center;
}
.viz-rings__core,
.viz-rings__halo--2,
.viz-rings__halo--3 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.viz-rings__halo--3 {
  width: 220px; height: 220px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.viz-rings__halo--2 {
  width: 170px; height: 170px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.viz-rings__core {
  width: 140px; height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  background: rgba(255,255,255,.5);
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.svc-row:hover .viz-rings__core { transform: translate(-50%, -50%) scale(1.04); }
.svc-row:hover .viz-rings__halo--2 { transform: translate(-50%, -50%) scale(1.06); }
.svc-row:hover .viz-rings__halo--3 { transform: translate(-50%, -50%) scale(1.10); }
.viz-rings__halo--2,
.viz-rings__halo--3 {
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.viz-rings__stat {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.viz-rings__stat small {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  margin-left: 4px;
  color: var(--ink-2);
  letter-spacing: .04em;
}
.viz-rings__sub {
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.viz-rings__line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76%;
  height: 4px;
  transform: translate(-50%, -50%);
  color: var(--accent);
  z-index: 1;
}

/* ----- 03 · Conversion sparkline / browser frame ----- */
.viz--chart {
  width: 100%;
  max-width: 380px;
  gap: 16px;
}
.viz-chart__frame {
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 32px 16px 16px;
  box-shadow: 0 12px 30px -16px rgba(17,17,17,.18);
  overflow: hidden;
}
.viz-chart__dots {
  position: absolute;
  top: 10px; left: 12px;
  display: inline-flex;
  gap: 5px;
}
.viz-chart__dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(0,0,0,.12);
}
.viz-chart__dots span:first-child { background: rgba(11,110,110,.6); }
.viz-chart__url {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: .04em;
}
.viz-chart__graph {
  width: 100%;
  height: 110px;
  color: var(--accent);
  display: block;
}
.viz-chart__legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.viz-chart__legend span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.viz-chart__legend strong {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.viz-chart__legend span:last-child strong { color: var(--accent); }
.viz-chart__arrow { color: var(--accent); }

/* ----- 04 · Monthly bars compounding ----- */
.viz--bars {
  width: 100%;
  max-width: 380px;
  gap: 16px;
}
.viz-bars__row {
  width: 100%;
  height: 160px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 4px;
  padding: 8px;
  background: rgba(255,255,255,.5);
  border: 1px solid var(--rule);
  border-radius: 12px;
  position: relative;
}
.viz-bars__label {
  display: none; /* labels collapsed; bars carry the meaning */
}
.viz-bars__bar {
  display: block;
  width: 100%;
  height: var(--h, 20%);
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
  transition: height .8s cubic-bezier(.2,.7,.2,1), background .4s;
}
.svc-row:hover .viz-bars__bar { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.viz-bars__bar--peak { background: var(--accent) !important; }
.viz-bars__caption {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* Soft glow halo behind number on hover */
.svc-row__viz::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--svc-glow), transparent 65%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.8);
  opacity: 0;
  transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}
.svc-row:hover .svc-row__viz::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Copy column */
.svc-row__copy {
  padding: 80px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 56ch;
}
.svc-row__tag {
  display: inline-block;
  width: max-content;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  margin-bottom: 22px;
}
.svc-row__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 4.5vw, 68px);
  line-height: .98;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  color: var(--ink);
}
.svc-row__title em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.svc-row__desc {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.svc-row__desc em {
  font-style: italic;
  color: var(--ink);
}
.svc-row__points {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svc-row__points li {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  color: var(--ink);
  transition: background .25s, border-color .25s;
}
.svc-row:hover .svc-row__points li {
  background: rgba(255,255,255,.75);
  border-color: color-mix(in srgb, var(--ink) 25%, transparent);
}
.svc-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  transition: background .25s, color .25s, transform .25s, gap .25s;
}
.svc-row__cta span {
  display: inline-block;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.svc-row__cta:hover {
  background: var(--ink);
  color: var(--bone);
  gap: 14px;
}
.svc-row__cta:hover span { transform: translateX(4px); }

.svc__outro {
  display: flex;
  justify-content: center;
  padding: 80px 24px 40px;
}

/* Tablet — keep alternating but tighten spacing */
@media (max-width: 1080px) {
  .svc-row { padding: 0 4vw; }
  .svc-row__viz { padding: 60px 32px; min-height: 360px; }
  .svc-row__copy { padding: 60px 32px; }
}

/* Mobile — stack number on top, copy below; flatten alternation */
@media (max-width: 760px) {
  .svc { padding: 60px 0 40px; }
  .svc__intro { margin-bottom: 40px; }
  .svc-row {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .svc-row:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .svc-row:nth-child(even) .svc-row__viz { order: 0; border-left: none; }
  .svc-row:nth-child(even) .svc-row__copy   { order: 1; }
  .svc-row__viz {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 56px 24px;
    min-height: 220px;
  }
  .svc-row__copy { padding: 40px 24px 56px; }
  .svc-row__title { font-size: clamp(32px, 8vw, 44px); }
  .svc__outro { padding: 56px 20px 20px; }
  /* Tighten the visuals so they don't dominate on phone */
  .viz--circled { height: 160px; }
  .viz-circled__stat { font-size: 56px; }
  .viz--rings { height: 200px; }
  .viz-rings__halo--3 { width: 180px; height: 180px; }
  .viz-rings__halo--2 { width: 140px; height: 140px; }
  .viz-rings__core { width: 116px; height: 116px; }
  .viz-rings__stat { font-size: 36px; }
  .viz-rings__sub { font-size: 9.5px; }
  .viz--chart, .viz--bars { max-width: 320px; }
  .viz-chart__legend strong { font-size: 18px; }
  .viz-bars__row { height: 130px; }
}
.plan-morph {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}
.plan-morph__toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 8px 24px -10px rgba(17,17,17,.18);
  margin-bottom: 32px;
}
.plan-morph__toggle-thumb {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  width: calc((100% - 12px) / 3);
  background: var(--ink);
  border-radius: 999px;
  transition: transform .55s cubic-bezier(.5,1.5,.4,1), background .35s;
  z-index: 0;
}
.plan-morph[data-tier="1"] .plan-morph__toggle-thumb { transform: translateX(100%); background: var(--accent); }
.plan-morph[data-tier="2"] .plan-morph__toggle-thumb { transform: translateX(200%); background: var(--forest, #17372C); }

.plan-morph__toggle-btn {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  padding: 14px 12px;
  cursor: pointer;
  font-family: var(--f-mono);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  color: var(--ink);
  transition: color .35s;
  border-radius: 999px;
}
.plan-morph__toggle-btn[aria-selected="true"] { color: var(--bone); }
.plan-morph__toggle-name {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.plan-morph__toggle-price {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: .8;
}

/* The morphing card itself */
.plan-morph__card {
  position: relative;
  border-radius: 28px;
  padding: 44px 44px 36px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 30px 60px -30px rgba(17,17,17,.25),
    0 60px 120px -60px rgba(17,17,17,.2);
  transition:
    background .6s cubic-bezier(.2,.7,.2,1),
    border-color .6s,
    box-shadow .6s,
    transform .6s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
  min-height: 540px;
}
.plan-morph[data-tier="0"] .plan-morph__card {
  background: linear-gradient(135deg, rgba(214,255,75,.10), rgba(255,255,255,.7));
}
.plan-morph[data-tier="1"] .plan-morph__card {
  background: linear-gradient(135deg, rgba(11,110,110,.18), rgba(255,255,255,.7));
  transform: scale(1.015);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 40px 80px -30px rgba(11,110,110,.35),
    0 60px 120px -60px rgba(17,17,17,.2);
}
.plan-morph[data-tier="2"] .plan-morph__card {
  background: linear-gradient(135deg, rgba(23,55,44,.18), rgba(255,255,255,.7));
  min-height: 580px;
}

/* Ribbon */
.plan-morph__ribbon {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bone);
  z-index: 2;
}

.plan-morph__head { margin-bottom: 24px; }
.plan-morph__tier-label {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.plan-morph__title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  margin: 0;
  color: var(--ink-2);
  max-width: 48ch;
}
.plan-morph__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.plan-morph__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.plan-morph__price-num {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(54px, 7vw, 88px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  transition: color .4s;
  display: inline-block;
}
.plan-morph[data-tier="1"] .plan-morph__price-num { color: var(--accent); }
.plan-morph__price-unit {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.plan-morph__price-note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 0;
  max-width: 28ch;
  text-align: right;
}

/* Crossfade list — JS swaps innerHTML, CSS animates */
.plan-morph__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  animation: planListIn .5s cubic-bezier(.2,.7,.2,1);
}
@keyframes planListIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.plan-morph__list li {
  font-family: var(--f-serif);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
}
.plan-morph__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: 12px;
  top: 4px;
}
.plan-morph__list li em {
  font-style: italic;
  color: var(--ink-2);
}

.plan-morph__cta { transition: background .4s, color .4s; }
.plan-morph[data-tier="2"] .plan-morph__cta {
  background: var(--ink);
  color: var(--bone);
}

.plan-morph__compare {
  font-family: var(--f-serif);
  font-style: italic;
  text-align: center;
  color: var(--ink-2);
  font-size: 14.5px;
  margin: 24px 0 0;
}

@media (max-width: 720px) {
  .plan-morph__card { padding: 32px 24px 28px; min-height: 0; }
  .plan-morph__list { grid-template-columns: 1fr; }
  .plan-morph__price-note { text-align: left; max-width: none; }
  .plan-morph__toggle-name { font-size: 11.5px; }
  .plan-morph__toggle-price { font-size: 10.5px; }
}

/* ============================================================
   PROCESS — single morphing scene (replaces 4-card grid)
   ============================================================ */
.process__scene {
  --reveal: 1;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
  opacity: var(--reveal);
  transform: translateY(calc((1 - var(--reveal)) * 24px));
  transition: opacity .25s linear, transform .25s linear;
}

.process__scene-copy {
  position: relative;
  min-height: 280px;
}
.process__scene-week {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  border-radius: 999px;
  margin-bottom: 18px;
  animation: pCopyIn .5s cubic-bezier(.2,.7,.2,1);
}
.process__scene-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  color: var(--ink);
  animation: pCopyIn .5s cubic-bezier(.2,.7,.2,1);
}
.process__scene-desc {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 22px;
  max-width: 44ch;
  animation: pCopyIn .5s cubic-bezier(.2,.7,.2,1) .05s both;
}
.process__scene-deliv {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  animation: pCopyIn .5s cubic-bezier(.2,.7,.2,1) .1s both;
}
@keyframes pCopyIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stage — stacked layers, fade-swap based on phase */
.process__scene-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(248,245,239,.5));
  border: 1px solid var(--glass-brd);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 30px 60px -30px rgba(17,17,17,.2),
    0 60px 120px -60px rgba(17,17,17,.15);
  overflow: hidden;
}
.pscene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transform: translateY(20px) scale(.96);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.pscene.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Layer 1: Strategy doc (paper) */
.pscene-doc {
  width: min(380px, 80%);
  padding: 28px 26px;
  background: #FFFDF7;
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.05) inset,
    0 20px 40px -20px rgba(0,0,0,.2),
    0 40px 80px -40px rgba(0,0,0,.15);
  transform: rotate(-3deg);
  position: relative;
  font-family: var(--f-mono);
}
.pscene-doc__tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: 18px;
}
.pscene-doc__h {
  display: block;
  width: 70%;
  height: 14px;
  background: var(--ink);
  border-radius: 3px;
  margin-bottom: 18px;
  animation: pDocDraw 1s cubic-bezier(.2,.7,.2,1);
}
.pscene-doc__line {
  display: block;
  width: 100%;
  height: 6px;
  background: rgba(17,17,17,.15);
  border-radius: 3px;
  margin-bottom: 10px;
}
.pscene-doc__line--short { width: 60%; }
.pscene-doc__sig {
  display: block;
  margin-top: 16px;
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
  font-size: 16px;
}
@keyframes pDocDraw {
  from { width: 0; }
  to   { width: 70%; }
}

/* Layer 2: Wireframe */
.pscene-wire {
  width: 90%;
  height: 90%;
  border: 2px solid rgba(17,17,17,.3);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(255,255,255,.6);
  font-family: var(--f-mono);
}
.pscene-wire__nav {
  display: flex; gap: 8px; align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(17,17,17,.2);
}
.pscene-wire__nav span {
  width: 38px; height: 8px;
  background: rgba(17,17,17,.18);
  border-radius: 2px;
}
.pscene-wire__cta {
  margin-left: auto;
  width: 60px !important;
  height: 22px !important;
  background: var(--ink) !important;
  border-radius: 999px;
}
.pscene-wire__hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border: 1px dashed rgba(17,17,17,.2);
  border-radius: 6px;
}
.pscene-wire__h { width: 70%; height: 14px; background: rgba(17,17,17,.4); border-radius: 3px; }
.pscene-wire__sub { width: 50%; height: 8px; background: rgba(17,17,17,.2); border-radius: 3px; }
.pscene-wire__btn { width: 80px; height: 24px; background: var(--accent); border-radius: 999px; margin-top: 6px; }
.pscene-wire__cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.pscene-wire__cards span {
  height: 40px;
  background: rgba(17,17,17,.08);
  border-radius: 4px;
  border: 1px dashed rgba(17,17,17,.18);
}

/* Layer 3: Code editor */
.pscene-code {
  width: 92%;
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--f-mono);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.5);
}
.pscene-code__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #2a2a2a;
}
.pscene-code__bar > span {
  width: 10px; height: 10px; border-radius: 50%;
  background: #555;
}
.pscene-code__bar > span:nth-child(1) { background: #ff5f56; }
.pscene-code__bar > span:nth-child(2) { background: #ffbd2e; }
.pscene-code__bar > span:nth-child(3) { background: #27c93f; }
.pscene-code__bar em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  color: rgba(255,255,255,.5);
}
.pscene-code__body {
  padding: 18px 18px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
}
.pscene-code__body code { display: block; }
.pscene-code__body .kw  { color: #c792ea; }
.pscene-code__body .fn  { color: #82aaff; }
.pscene-code__body .str { color: #c3e88d; }
.pscene-code__body .tag { color: #f78c6c; }
.pscene-code__cursor {
  color: var(--accent);
  animation: pCursor 1s steps(2) infinite;
}
@keyframes pCursor { 50% { opacity: 0; } }

/* Layer 4: Live site + stats */
.pscene-live {
  width: 92%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.25);
  border: 1px solid var(--rule);
  font-family: var(--f-mono);
}
.pscene-live__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #f5f3ee;
  border-bottom: 1px solid var(--rule);
}
.pscene-live__bar > span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(0,0,0,.15);
}
.pscene-live__bar em {
  font-style: normal;
  font-size: 11px;
  color: var(--ink-2);
  margin-left: 8px;
}
.pscene-live__live {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: .14em;
  color: #16a34a;
}
.pscene-live__hero {
  padding: 24px 20px 20px;
  display: flex; flex-direction: column; gap: 8px;
  border-bottom: 1px solid var(--rule);
}
.pscene-live__h { width: 70%; height: 14px; background: var(--ink); border-radius: 3px; }
.pscene-live__sub { width: 90%; height: 8px; background: rgba(17,17,17,.2); border-radius: 3px; }
.pscene-live__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 16px;
  gap: 8px;
}
.pscene-live__stats > div {
  text-align: center;
  padding: 10px 6px;
  border-right: 1px solid var(--rule);
}
.pscene-live__stats > div:last-child { border-right: 0; }
.pscene-live__stats strong {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.2vw, 32px);
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.pscene-live__stats span {
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--ink-2);
}

/* Bottom timeline */
.process__scene-timeline {
  grid-column: 1 / -1;
  position: relative;
  margin-top: 40px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}
.process__scene-timeline::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  background: rgba(17,17,17,.12);
  border-radius: 999px;
  transform: translateY(-50%);
}
.process__scene-tl-fill {
  position: absolute;
  top: 50%; left: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 999px;
  transform: translateY(-50%);
  width: calc(var(--tl-fill, 0) * 100%);
  transition: width .15s linear;
}
.process__scene-tl-tick {
  position: relative;
  z-index: 1;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-2);
  background: var(--bone);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  transition: all .35s;
}
.process__scene-tl-tick.is-active {
  background: var(--accent);
  color: var(--bone);
  border-color: var(--accent);
  transform: scale(1.1);
}
.process__scene-tl-tick.is-done {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

@media (max-width: 880px) {
  .process__scene { grid-template-columns: 1fr; gap: 32px; }
  .process__scene-copy { min-height: 0; }
  .process__scene-stage { aspect-ratio: 5 / 4; max-width: 520px; margin: 0 auto; }
  .process__scene-timeline { margin-top: 20px; }
}

/* ============================================================
   WORK CINEMA — scroll-pinned case study chapters
   ============================================================ */
.work-cinema {
  position: relative;
  padding: 120px 0 60px;
}
.work-cinema__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 0 24px;
}
.work-cinema__lede {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-2);
  margin: 12px 0 0;
}
.work-cinema__foot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-2);
  padding: 80px 24px 40px;
  text-transform: uppercase;
}

/* Each chapter = a tall scroll track with a pinned interior */
.work-chapter {
  --p: 0;                        /* progress 0..1 across this chapter */
  position: relative;
  height: 180vh;                 /* travel for parallax + counter trigger */
}
.work-chapter__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 0 6vw;
  overflow: hidden;
}
.work-chapter__link {
  position: absolute; inset: 0; z-index: 5;
  /* invisible click target — but only the visible bits should be clickable.
     We'll keep it on the whole chapter for simplicity; cursor: pointer on hover */
  text-indent: -9999px;
}

.work-chapter__media {
  position: relative;
  height: 76vh;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 30px 60px -30px rgba(17,17,17,.3),
    0 60px 120px -60px rgba(17,17,17,.25);
  border: 1px solid var(--glass-brd);
  background: rgba(255,255,255,.4);
}
.work-chapter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* parallax: image translates within frame as user scrolls the chapter */
  transform: translate3d(0, calc((var(--p) - 0.5) * 12%), 0) scale(1.1);
  transition: transform .15s linear;
  will-change: transform;
}

.work-chapter__copy {
  position: relative;
  z-index: 2;
}
.work-chapter__index {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 18px;
  opacity: .7;
}
.work-chapter__tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  margin-bottom: 22px;
}
.work-chapter__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: .95;
  letter-spacing: -0.04em;
  margin: 0 0 22px;
  color: var(--ink);
}
.work-chapter__title em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.work-chapter__desc {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 28px;
  max-width: 48ch;
}
.work-chapter__desc em { font-style: italic; color: var(--ink); }

.work-chapter__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.work-chapter__stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.work-chapter__stats strong {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.work-chapter__stats em {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-style: normal;
  color: var(--accent);
  margin-left: 4px;
  letter-spacing: .04em;
}
.work-chapter__stats span {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.3;
}

.work-chapter__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  transition: background .25s, color .25s, transform .25s;
}
.work-chapter:hover .work-chapter__cta {
  background: var(--ink);
  color: var(--bone);
  transform: translateX(4px);
}

@media (max-width: 880px) {
  .work-chapter { height: auto; }
  .work-chapter__pin {
    position: relative;
    top: auto;
    height: auto;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 60px 24px;
  }
  .work-chapter__media { height: 56vh; }
  .work-chapter__media img { transform: none; }
  .work-chapter__title { font-size: clamp(40px, 9vw, 56px); }
  .work-chapter__stats { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .work-chapter { height: auto; }
  .work-chapter__pin { position: relative; height: auto; padding: 60px 6vw; }
  .work-chapter__media img { transform: none; }
}

/* ============================================================
   CHATBOT — glassmorphism floating chat
   ============================================================ */
/* Animated glassmorphism chat bubble with gentle float + halo rings */
.chatbot-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 96;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), rgba(255,255,255,.18) 50%, rgba(255,255,255,.08) 100%),
    linear-gradient(135deg, rgba(11,110,110,.55), rgba(11,110,110,.20));
  color: var(--bone);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 12px 28px -8px rgba(11,110,110,.45),
    0 24px 48px -24px rgba(17,17,17,.35),
    0 0 32px -4px rgba(11,110,110,.35);
  animation: chatFloat 4s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s, box-shadow .35s;
}
.chatbot-fab::before {
  content: "";
  position: absolute;
  top: 6px; left: 14px; right: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  filter: blur(2px);
  pointer-events: none;
}
.chatbot-fab:hover {
  transform: translateY(-3px) scale(1.06);
  animation-play-state: paused;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 16px 36px -10px rgba(11,110,110,.55),
    0 32px 64px -28px rgba(17,17,17,.4),
    0 0 48px -4px rgba(11,110,110,.5);
}
.chatbot-fab__icon {
  position: relative;
  display: inline-flex;
  z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
}
@keyframes chatFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.02); }
}

/* Two halo rings — second is slower + offset */
.chatbot-fab__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.chatbot-fab__pulse::before,
.chatbot-fab__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(11,110,110,.55);
  opacity: 0;
  animation: chatPulse 2.6s ease-out infinite;
}
.chatbot-fab__pulse::after {
  animation-duration: 3.4s;
  animation-delay: 1.1s;
  border-color: rgba(255,255,255,.4);
}
@keyframes chatPulse {
  0%   { transform: scale(.85); opacity: .8; }
  60%  { opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.chatbot-fab.is-open {
  opacity: 0;
  pointer-events: none;
  transform: scale(.6);
  animation: none;
}

.chatbot {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 97;
  transform-origin: bottom right;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 60px));
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-brd);
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 30px 60px -20px rgba(17,17,17,.3),
    0 60px 120px -60px rgba(17,17,17,.25);
  overflow: hidden;
  transform: translateY(20px) scale(.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s, transform .45s cubic-bezier(.2,.9,.3,1.05);
}
.chatbot.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chatbot__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--glass-brd);
  background: rgba(255,255,255,.35);
}
.chatbot__head-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chatbot__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.chatbot__title {
  display: block;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.chatbot__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  letter-spacing: .04em;
  margin-top: 2px;
}
.chatbot__status-dot {
  width: 7px; height: 7px;
  background: #16a34a;
  border-radius: 50%;
  animation: chatStatusPulse 1.8s ease-in-out infinite;
}
@keyframes chatStatusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.6); }
  50%      { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
}
.chatbot__close {
  width: 30px; height: 30px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}
.chatbot__close:hover { background: rgba(0,0,0,.06); color: var(--ink); }

.chatbot__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
.chatbot__messages::-webkit-scrollbar { width: 6px; }
.chatbot__messages::-webkit-scrollbar-thumb { background: rgba(17,17,17,.15); border-radius: 999px; }

.chatbot__msg {
  display: flex;
  max-width: 86%;
  animation: chatMsgIn .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chatbot__msg--bot { align-self: flex-start; }
.chatbot__msg--user { align-self: flex-end; }
.chatbot__bubble {
  padding: 11px 14px;
  border-radius: 16px;
  font-family: var(--f-serif);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
  background: rgba(255,255,255,.7);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 4px 12px -6px rgba(17,17,17,.1);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chatbot__msg--bot .chatbot__bubble {
  border-bottom-left-radius: 6px;
}
.chatbot__msg--user .chatbot__bubble {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  border-bottom-right-radius: 6px;
}

/* Typing indicator */
.chatbot__msg--typing .chatbot__bubble {
  display: inline-flex;
  gap: 4px;
  padding: 14px 16px;
}
.chatbot__msg--typing .chatbot__bubble span {
  width: 6px; height: 6px;
  background: var(--ink-2);
  border-radius: 50%;
  animation: chatTyping 1.2s infinite ease-in-out;
}
.chatbot__msg--typing .chatbot__bubble span:nth-child(2) { animation-delay: .15s; }
.chatbot__msg--typing .chatbot__bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes chatTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.chatbot__suggestions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}
.chatbot__chip {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.chatbot__chip:hover {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  transform: translateY(-1px);
}

.chatbot__form {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--glass-brd);
  background: rgba(255,255,255,.4);
}
.chatbot__input {
  flex: 1;
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  padding: 11px 16px;
  font-family: var(--f-serif);
  font-size: 14.5px;
  background: rgba(255,255,255,.7);
  color: var(--ink);
  outline: none;
  transition: border-color .2s, background .2s;
}
.chatbot__input:focus { border-color: var(--accent); background: #fff; }
.chatbot__input::placeholder { color: var(--ink-2); }
.chatbot__send {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
}
.chatbot__send:hover { background: var(--accent); transform: scale(1.05); }

@media (max-width: 720px) {
  .chatbot-fab { bottom: 16px; right: 16px; left: auto; }
  .chatbot { bottom: 12px; left: 12px; right: 12px; width: auto; height: 78vh; }
}

/* ============================================================
   FREE TOOLS PAGE
   ============================================================ */
.tools-body { background: var(--bone); color: var(--ink); }

.tools-hero {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 24px 40px;
}
.tools-hero h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: .96;
  letter-spacing: -0.04em;
  margin: 14px 0 18px;
}
.tools-hero h1 em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.tools-hero__dek {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 auto 24px;
}
.tools-hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}
.tools-hero__meta strong { color: var(--ink); font-weight: 700; }
.tools-hero__meta .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-2); align-self: center; opacity: .5;
}

.tools-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 880px;
  margin: 40px auto 80px;
  padding: 0 24px;
}
.tool-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 22px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 20px 40px -20px rgba(17,17,17,.18);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 30px 60px -25px rgba(17,17,17,.22);
}
.tool-card--wide { grid-column: 1 / -1; }
.tool-card--accent {
  background: linear-gradient(135deg, rgba(11,110,110,.12), rgba(255,255,255,.6));
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.tool-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.tool-card__num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  padding: 5px 10px;
  border-radius: 999px;
}
.tool-card__tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tool-card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.tool-card__title em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.tool-card__desc {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 20px;
  max-width: 56ch;
}
.tool-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  align-self: flex-start;
  margin-top: auto;
  transition: background .25s, color .25s, transform .25s;
}
.tool-card__cta:hover { background: var(--ink); color: var(--bone); transform: translateX(3px); }
.tool-card__cta--ghost { background: transparent; }

/* === Hidden Revenue Calculator === */
.hrcalc {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  margin-top: 12px;
  align-items: center;
}
.hrcalc__inputs { display: flex; flex-direction: column; gap: 14px; }
.hrcalc__field {
  display: flex; flex-direction: column; gap: 6px;
}
.hrcalc__field span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hrcalc__field input,
.funnel__field input {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: rgba(255,255,255,.6);
  outline: none;
  transition: border-color .2s, background .2s;
}
.hrcalc__field input:focus,
.funnel__field input:focus { border-color: var(--accent); background: #fff; }

.hrcalc__output {
  background: rgba(255,255,255,.6);
  border: 1px solid var(--glass-brd);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hrcalc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.hrcalc__row strong {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hrcalc__row em { font-style: italic; opacity: .7; font-family: var(--f-serif-i, serif); }
.hrcalc__row--target strong { color: #16a34a; }
.hrcalc__row--gap {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin-top: 4px;
}
.hrcalc__row--gap strong {
  font-size: clamp(28px, 3vw, 40px);
  color: var(--accent);
}
.hrcalc__row--gap small {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-2);
  margin-left: 2px;
  letter-spacing: .04em;
}
.hrcalc__row--year strong { font-size: 18px; }
.hrcalc__note {
  grid-column: 1 / -1;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
}

/* === Prompt Library === */
.plib { margin-top: 12px; }
.plib__controls {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.plib__search {
  flex: 1;
  min-width: 220px;
  position: relative;
  display: flex;
  align-items: center;
}
.plib__search svg {
  position: absolute;
  left: 14px;
  color: var(--ink-2);
}
.plib__search input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  font-family: var(--f-mono);
  font-size: 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  color: var(--ink);
  outline: none;
}
.plib__search input:focus { border-color: var(--accent); }
.plib__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.plib__filter {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.plib__filter:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.plib__filter.is-active { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.plib__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-height: 560px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.plib__list::-webkit-scrollbar { width: 6px; }
.plib__list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 999px; }

.plib__item {
  background: rgba(255,255,255,.6);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .2s, transform .25s;
}
.plib__item:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.plib__item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.plib__item-cat {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.plib__item-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.plib__item-body {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
  background: rgba(0,0,0,.04);
  border-radius: 8px;
  padding: 10px 12px;
  white-space: pre-wrap;
  max-height: 6em;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.plib__item-body.is-expanded { max-height: none; }
.plib__item-body::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 24px;
  background: linear-gradient(transparent, rgba(255,255,255,.7));
  pointer-events: none;
}
.plib__item-body.is-expanded::after { display: none; }
.plib__item-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.plib__copy {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.plib__copy:hover { background: var(--ink); color: var(--bone); }
.plib__copy.is-copied { background: #16a34a; color: #fff; border-color: #16a34a; }
.plib__empty {
  text-align: center;
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--ink-2);
  padding: 32px;
}

/* === AI Scorecard === */
.aisc__stage { min-height: 240px; margin-top: 12px; }
.aisc__q {
  font-family: var(--f-display);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ink);
}
.aisc__opts {
  display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.aisc__opt {
  font-family: var(--f-mono);
  font-size: 13px;
  text-align: left;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: rgba(255,255,255,.6);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.aisc__opt:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); transform: translateX(3px); }
.aisc__progress {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .08em; color: var(--ink-2);
}
.aisc__bar {
  height: 3px;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
  overflow: hidden;
}
.aisc__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.aisc__verdict {
  text-align: center;
  padding: 18px 0 10px;
}
.aisc__verdict-score {
  font-family: var(--f-display);
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}
.aisc__verdict-score small {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: .04em;
  margin-left: 4px;
}
.aisc__verdict-tier {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bone);
  margin: 12px 0 14px;
}
.aisc__verdict-msg {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 48ch;
  margin: 0 auto 18px;
}
.aisc__restart {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: underline;
}

/* === Email Templates === */
.etpl { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.etpl__item {
  background: rgba(255,255,255,.6);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s;
}
.etpl__item:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.etpl__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.etpl__head-icon {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink-2);
  transition: transform .25s;
}
.etpl__item.is-open .etpl__head-icon { transform: rotate(45deg); }
.etpl__body {
  padding: 0 16px 14px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  display: none;
}
.etpl__item.is-open .etpl__body { display: block; }
.etpl__copy {
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.etpl__copy:hover { background: var(--ink); color: var(--bone); }
.etpl__copy.is-copied { background: #16a34a; border-color: #16a34a; color: #fff; }

/* (legacy funnel CSS removed — see "FUNNEL LEAK FINDER — clean rebuild" further down) */

/* === Newsletter === */
.newsletter-form {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.newsletter-form input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 13px;
  background: rgba(255,255,255,.7);
  outline: none;
}
.newsletter-form input:focus { border-color: var(--accent); }

/* Mobile */
@media (max-width: 880px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tool-card--wide { grid-column: 1; }
  .hrcalc { grid-template-columns: 1fr; }
  .plib__list { grid-template-columns: 1fr; }
  .tool-card { padding: 24px 22px; }
}

/* ============================================================
   PERFORMANCE — content-visibility hints
   Browsers skip rendering work for these sections until they're
   close to the viewport. Big win for paint + layout cost.
   ============================================================ */
/* Note: NOT applying content-visibility to .process or .work-cinema
   because they use position:sticky children — content-visibility's
   layout containment breaks sticky pinning. */
.svc,
.insights,
.calc,
.faq,
.foot,
.tools-grid,
.mkt-results {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ============================================================
   WORK CARDS V2 — glass pill grid (replaces pinned chapters)
   ============================================================ */
.work-grid-section {
  padding: 100px 32px 80px;
  max-width: 1280px;
  margin: 0 auto;
}
.work-grid-section .section-head {
  text-align: center;
  margin-bottom: 56px;
}
.work-grid-section__lede {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-2);
  margin: 14px auto 0;
  max-width: 56ch;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.work-card-v2 {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  /* Glass pill — generously rounded */
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 20px 40px -20px rgba(17,17,17,.18),
    0 40px 80px -40px rgba(17,17,17,.15);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .35s;
}
.work-card-v2:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 30px 60px -25px rgba(17,17,17,.25),
    0 60px 120px -60px rgba(17,17,17,.2);
}

/* Media frame — show the FULL image with letterboxing.
   No cropping, premium frosted backdrop fills the gaps. */
.work-card-v2__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 30% 20%, rgba(11,110,110,.10), transparent 60%),
    linear-gradient(135deg, rgba(248,245,239,.7), rgba(255,255,255,.4));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.work-card-v2__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* Show full image, no cropping */
  object-fit: contain;
  display: block;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
  filter: drop-shadow(0 14px 28px rgba(17,17,17,.18));
}
.work-card-v2:hover .work-card-v2__media img {
  transform: scale(1.04) rotate(-1deg);
}

.work-card-v2__body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.work-card-v2__tag {
  display: inline-block;
  width: max-content;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.work-card-v2__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 4px 0 4px;
  color: var(--ink);
}
.work-card-v2__title em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.work-card-v2__desc {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.work-card-v2__desc em { font-style: italic; color: var(--ink); }
.work-card-v2__cta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color .25s, gap .25s;
}
.work-card-v2__cta span { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.work-card-v2:hover .work-card-v2__cta { color: var(--accent); gap: 14px; }
.work-card-v2:hover .work-card-v2__cta span { transform: translateX(4px); }

.work-grid-section__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 56px 0 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 880px) {
  .work-grid { grid-template-columns: 1fr; gap: 16px; }
  .work-grid-section { padding: 60px 22px 60px; }
  .work-card-v2__media { aspect-ratio: 16 / 10; }
}

/* ============================================================
   SERVICES — bento grid (replaces editorial slabs)
   ============================================================ */
.svc-bento {
  position: relative;
  padding: 100px 32px 80px;
  max-width: 1280px;
  margin: 0 auto;
}
.svc-bento__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
.svc-bento__intro .h2 { margin-top: 12px; }
.svc-bento__lede {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-2);
  margin: 14px 0 0;
  line-height: 1.5;
}

/* The bento layout — desktop:
   wide+narrow / narrow+wide alternating.
   Desktop  : 5fr 3fr columns × 2 rows
   Tablet   : single column stack */
.bento {
  display: grid;
  grid-template-columns: 5fr 3fr;
  grid-template-rows: minmax(360px, auto) minmax(360px, auto);
  gap: 18px;
}
.bento-card--01 { grid-column: 1; grid-row: 1; }
.bento-card--02 { grid-column: 2; grid-row: 1; }
.bento-card--03 { grid-column: 1; grid-row: 2; max-width: 100%; }
.bento-card--04 { grid-column: 2; grid-row: 2; }
/* Flip diagonal — 03 narrow, 04 wide */
.bento-card--03 { grid-column: 1; }
.bento {
  grid-template-columns: 5fr 3fr;
}
@media (min-width: 901px) {
  .bento {
    grid-template-columns: 3fr 5fr;
  }
  .bento-card--01 { grid-column: 1 / 2; }
  .bento-card--02 { grid-column: 2 / 3; }
  .bento-card--03 { grid-column: 1 / 2; }
  .bento-card--04 { grid-column: 2 / 3; }
}
/* Override: actually want 01 wide, 02 narrow (top), 03 narrow, 04 wide (bottom) */
@media (min-width: 901px) {
  .bento {
    grid-template-columns: 1.6fr 1fr;
  }
  .bento-card--01 { grid-column: 1; grid-row: 1; }
  .bento-card--02 { grid-column: 2; grid-row: 1; }
  .bento-card--03 { grid-column: 1; grid-row: 2; }
  .bento-card--04 { grid-column: 1 / -1; grid-row: 3; }
  /* Better: 2x2 with diagonal sizing */
  .bento {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: minmax(380px, auto) minmax(380px, auto);
  }
  .bento-card--04 { grid-column: 2; grid-row: 2; }
  .bento-card--03 { grid-column: 1; grid-row: 2; }
}

/* Bento card — glass pill */
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 24px;
  padding: 32px 32px 28px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 20px 40px -20px rgba(17,17,17,.18);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .4s;
}
.bento-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 30px 60px -25px rgba(17,17,17,.25);
}

/* Per-card tints */
.bento-card--01 { background: linear-gradient(135deg, rgba(214,255,75,.10), rgba(255,255,255,.55)); }
.bento-card--02 { background: linear-gradient(135deg, rgba(11,110,110,.12), rgba(255,255,255,.55)); }
.bento-card--03 { background: linear-gradient(135deg, rgba(23,55,44,.10), rgba(255,255,255,.55)); }
.bento-card--04 { background: linear-gradient(160deg, rgba(11,110,110,.10), rgba(214,255,75,.14) 60%, rgba(255,255,255,.55)); }

/* Visual area — fills top portion of card */
.bento-card__visual {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin-bottom: 22px;
  pointer-events: none;
}

.bento-card__body {
  flex-shrink: 0;
}
.bento-card__tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  margin-bottom: 14px;
}
.bento-card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  color: var(--ink);
}
.bento-card__title em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.bento-card__desc {
  font-family: var(--f-serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 50ch;
}
.bento-card__cta {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .25s, gap .25s;
}
.bento-card__cta .arrow {
  display: inline-block;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.bento-card:hover .bento-card__cta { color: var(--accent); gap: 12px; }
.bento-card:hover .bento-card__cta .arrow { transform: translateX(4px); }

/* === Card 1 visual: hand-drawn ellipse + stat === */
.bento-card--01 .bento-card__visual {
  flex-direction: column;
  gap: 4px;
}
.bento-circle__ring {
  width: 72%;
  height: 60%;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  color: var(--accent);
  opacity: .85;
}
.bento-card--01 .bento-card__stat {
  position: relative;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(64px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variation-settings: "SOFT" 80, "opsz" 144;
  z-index: 1;
}
.bento-card--01 .bento-card__stat-label {
  position: relative;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 14px;
  z-index: 1;
}

/* === Card 2 visual: concentric rings === */
.bento-card--02 .bento-card__visual {
  position: relative;
  min-height: 220px;
}
.bento-rings__halo--3, .bento-rings__halo--2, .bento-rings__core {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.bento-rings__halo--3 {
  width: 200px; height: 200px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.bento-rings__halo--2 {
  width: 150px; height: 150px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.bento-rings__core {
  width: 120px; height: 120px;
  border: 1.5px solid var(--ink);
  background: rgba(255,255,255,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.bento-rings__stat {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.bento-rings__stat small {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  margin-left: 3px;
  color: var(--ink-2);
  letter-spacing: .04em;
}
.bento-rings__sub {
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* === Card 3 visual: browser sparkline === */
.bento-card--03 .bento-card__visual--chart { width: 100%; }
.bento-chart__frame {
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 24px 12px 12px;
  box-shadow: 0 12px 24px -14px rgba(17,17,17,.18);
  overflow: hidden;
}
.bento-chart__dots {
  position: absolute;
  top: 8px; left: 10px;
  display: inline-flex;
  gap: 4px;
}
.bento-chart__dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,.12);
}
.bento-chart__dots span:first-child { background: rgba(11,110,110,.6); }
.bento-chart__graph {
  width: 100%;
  height: 80px;
  display: block;
  color: var(--accent);
}
.bento-chart__legend {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-2);
}
.bento-chart__legend strong {
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-weight: 400;
}
.bento-chart__legend strong:last-of-type { color: var(--accent); }

/* === Card 4 visual: monthly bars === */
.bento-card--04 .bento-card__visual--bars {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.bento-bars {
  width: 100%;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 5px;
}
.bento-bar {
  display: block;
  width: 100%;
  height: var(--h, 20%);
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 3px 3px 0 0;
  transition: background .4s, height .8s cubic-bezier(.2,.7,.2,1);
}
.bento-card:hover .bento-bar { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.bento-bar--peak { background: var(--accent) !important; }
.bento-bars__caption {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.svc-bento__outro {
  display: flex;
  justify-content: center;
  padding: 60px 0 0;
}

@media (max-width: 900px) {
  .svc-bento { padding: 60px 22px 56px; }
  .bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .bento-card { grid-column: 1 !important; grid-row: auto !important; }
  .bento-card__visual { min-height: 200px; }
  .bento-rings__halo--3 { width: 180px; height: 180px; }
  .bento-rings__halo--2 { width: 134px; height: 134px; }
  .bento-rings__core { width: 108px; height: 108px; }
}

/* ============================================================
   WORK CINEMA V2 — full-viewport landscape glass panels
   ============================================================ */
.work-cinema-v2 {
  padding: 100px 32px 80px;
  max-width: 1440px;
  margin: 0 auto;
}
.work-cinema-v2__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.work-cinema-v2__intro .h2 { margin-top: 12px; }
.work-cinema-v2__lede {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-2);
  margin: 14px auto 0;
  max-width: 56ch;
  line-height: 1.5;
}

.work-panel {
  margin: 0 0 32px;
}
.work-panel:last-of-type { margin-bottom: 0; }

.work-panel__link {
  /* Glass pill — image on top (horizontal), copy below */
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
  border: 1px solid var(--glass-brd);
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 30px 60px -25px rgba(17,17,17,.22),
    0 60px 120px -60px rgba(17,17,17,.18);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .35s;
}
.work-panel__link:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 40px 80px -25px rgba(17,17,17,.28),
    0 80px 140px -60px rgba(17,17,17,.22);
}

/* Media — wide horizontal banner across the top of the panel.
   Browser frame + stage below, screenshot fills the width. */
.work-panel__media {
  position: relative;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--glass-brd);
  overflow: hidden;
  /* Landscape banner aspect — keeps the image area horizontal */
  aspect-ratio: 16 / 9;
  /* Per-project tinted backdrop with subtle dot grid for texture */
  background:
    radial-gradient(circle at 30% 25%, var(--panel-tint-a, rgba(11,110,110,.10)), transparent 55%),
    radial-gradient(circle at 75% 80%, var(--panel-tint-b, rgba(23,55,44,.08)), transparent 55%),
    linear-gradient(150deg, rgba(255,255,255,.55), rgba(248,245,239,.35));
}
/* Per-project tints (subtle, chosen to match each brand) */
.work-panel--01 { --panel-tint-a: rgba(89,164,140,.18); --panel-tint-b: rgba(255,255,255,.10); }
.work-panel--02 { --panel-tint-a: rgba(11,110,110,.16);  --panel-tint-b: rgba(17,17,17,.06);    }
.work-panel--03 { --panel-tint-a: rgba(214,255,75,.18); --panel-tint-b: rgba(23,55,44,.10);    }

/* Browser bar — top of the media. Intentional design framing. */
.work-panel__browser {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-brd);
}
.work-panel__browser-dots {
  display: inline-flex;
  gap: 6px;
}
.work-panel__browser-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,.16);
}
.work-panel__browser-dots span:first-child { background: rgba(11,110,110,.65); }
.work-panel__browser-dots span:nth-child(2) { background: rgba(255,189,46,.7); }
.work-panel__browser-dots span:nth-child(3) { background: rgba(39,201,63,.7); }
.work-panel__browser-url {
  flex: 1;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-2);
  padding: 4px 12px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--rule);
  border-radius: 6px;
  max-width: 240px;
  margin: 0 auto;
}
.work-panel__browser-status {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: #16a34a;
  flex-shrink: 0;
}

/* Stage — the area where the screenshot sits. Image fills generously
   and sits anchored to the bottom (grounded composition).
   Bleeds slightly off the bottom edge so it feels like part of the card. */
.work-panel__stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 5% 0;
  overflow: hidden;
}
.work-panel__stage::before {
  /* Subtle floor reflection so the image doesn't look like it's floating */
  content: "";
  position: absolute;
  bottom: 0; left: 8%; right: 8%;
  height: 36px;
  background: radial-gradient(ellipse at center top, rgba(17,17,17,.18), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.work-panel__stage img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100% + 24px);
  object-fit: contain;
  object-position: center bottom;
  display: block;
  position: relative;
  /* Lifts slightly + bleeds off the bottom edge of the stage */
  margin-bottom: -16px;
  filter: drop-shadow(0 18px 36px rgba(17,17,17,.22)) drop-shadow(0 4px 8px rgba(17,17,17,.1));
  transition: transform .8s cubic-bezier(.2,.7,.2,1), margin-bottom .8s cubic-bezier(.2,.7,.2,1);
}
.work-panel__link:hover .work-panel__stage img {
  transform: scale(1.025) translateY(-6px);
}

/* Copy area — horizontal row beneath the image */
.work-panel__copy {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 44px 56px 48px;
}
.work-panel__copy-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.work-panel__copy-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.work-panel__index {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .7;
}
.work-panel__tag {
  display: inline-block;
  width: max-content;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.work-panel__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 5.2vw, 84px);
  line-height: .95;
  letter-spacing: -0.04em;
  margin: 6px 0 8px;
  color: var(--ink);
}
.work-panel__title em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.work-panel__desc {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 48ch;
}
.work-panel__desc em { font-style: italic; color: var(--ink); }

.work-panel__stats {
  list-style: none;
  margin: 18px 0 12px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.work-panel__stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.work-panel__stats strong {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.work-panel__stats span {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.3;
}

.work-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: rgba(255,255,255,.4);
  margin-top: 8px;
  transition: background .25s, color .25s, gap .25s;
}
.work-panel__cta span { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.work-panel__link:hover .work-panel__cta {
  background: var(--ink);
  color: var(--bone);
  gap: 14px;
}
.work-panel__link:hover .work-panel__cta span { transform: translateX(4px); }

.work-cinema-v2__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 56px 0 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 980px) {
  .work-panel__link {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .work-panel__media {
    border-right: 0;
    border-bottom: 1px solid var(--glass-brd);
    padding: 0;
    aspect-ratio: 16 / 11;
  }
  .work-panel__stage { padding: 24px 24px 0; }
  .work-panel__copy {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 32px 44px;
  }
}
@media (max-width: 600px) {
  .work-cinema-v2 { padding: 60px 16px 56px; }
  .work-panel { margin-bottom: 24px; }
  .work-panel__link { border-radius: 24px; }
  .work-panel__media { padding: 0; }
  .work-panel__browser { padding: 10px 14px; }
  .work-panel__browser-url { font-size: 11px; padding: 3px 8px; max-width: 160px; }
  .work-panel__stage { padding: 18px 18px 0; }
  .work-panel__copy { padding: 32px 24px 36px; gap: 14px; }
  .work-panel__title { font-size: clamp(34px, 9vw, 48px); }
  .work-panel__stats { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
  .work-panel__stats li { flex-direction: row; align-items: baseline; gap: 12px; }
  .work-panel__stats strong { font-size: 22px; }
}

/* ============================================================
   MEET THE FOUNDER — landscape glass panel
   ============================================================ */
.founder-meet {
  padding: 100px 32px 80px;
  max-width: 1280px;
  margin: 0 auto;
}
.founder-meet__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.founder-meet__intro .h2 { margin-top: 12px; }
.founder-meet__lede {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-2);
  margin: 14px auto 0;
  max-width: 56ch;
  line-height: 1.5;
}

.founder-meet__panel {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
  border: 1px solid var(--glass-brd);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 30px 60px -25px rgba(17,17,17,.22),
    0 60px 120px -60px rgba(17,17,17,.18);
}

/* Photo */
.founder-meet__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 30% 30%, rgba(11,110,110,.4), transparent 60%),
    linear-gradient(135deg, #2a2a2a, #0d0d0d);
  overflow: hidden;
}
.founder-meet__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02) saturate(1.05);
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.founder-meet__panel:hover .founder-meet__photo img { transform: scale(1.03); }
.founder-meet__photo-initials {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 120px;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,.85);
}
.founder-meet__photo--fallback .founder-meet__photo-initials { z-index: 1; }
.founder-meet__photo-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}

/* Copy */
.founder-meet__copy {
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.founder-meet__role {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.founder-meet__name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: .95;
  letter-spacing: -0.035em;
  margin: 4px 0 12px;
  color: var(--ink);
}
.founder-meet__name em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.founder-meet__bio {
  font-family: var(--f-serif);
  font-size: clamp(15.5px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 50ch;
}
.founder-meet__bio em { font-style: italic; color: var(--ink); }

.founder-meet__facts {
  list-style: none;
  margin: 12px 0 8px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.founder-meet__facts li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.founder-meet__facts-num {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.founder-meet__facts-lbl {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.3;
}

.founder-meet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 880px) {
  .founder-meet { padding: 60px 22px 60px; }
  .founder-meet__panel { grid-template-columns: 1fr; }
  .founder-meet__photo {
    aspect-ratio: 1 / 1;
    max-height: 60vh;
  }
  .founder-meet__photo-frame { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .founder-meet__copy { padding: 36px 28px 40px; gap: 14px; }
  .founder-meet__facts { grid-template-columns: 1fr; gap: 14px; }
  .founder-meet__facts li { flex-direction: row; align-items: baseline; gap: 12px; }
}

/* ============================================================
   MOBILE — global cleanups for the new sections
   ============================================================ */
@media (max-width: 600px) {
  /* Section padding rhythm */
  .svc-bento, .work-cinema-v2, .founder-meet { padding-left: 16px; padding-right: 16px; }

  /* Bento — single col, smaller visuals */
  .bento { gap: 12px; }
  .bento-card { padding: 24px 22px 22px; border-radius: 20px; }
  .bento-card__title { font-size: clamp(28px, 8vw, 36px); }
  .bento-card__visual { min-height: 160px; margin-bottom: 18px; }
  .bento-card--01 .bento-card__stat { font-size: 64px; }
  .bento-rings__halo--3 { width: 160px; height: 160px; }
  .bento-rings__halo--2 { width: 120px; height: 120px; }
  .bento-rings__core { width: 96px; height: 96px; }
  .bento-rings__stat { font-size: 30px; }
  .bento-bars { height: 110px; }

  /* Sticky nav — tighten the pill edges so brand + burger sit balanced */
  .nav {
    padding: 6px 6px 6px 18px;
    margin-top: 8px;
    max-width: calc(100% - 16px);
  }
  .nav .brand { font-size: 18px; }
  .nav__burger { width: 40px; height: 40px; }
  .nav__burger span:nth-child(1) { top: 14px; }
  .nav__burger span:nth-child(2) { top: 19px; }
  .nav__burger span:nth-child(3) { top: 24px; }
  .nav__burger[aria-expanded="true"] span:nth-child(1),
  .nav__burger[aria-expanded="true"] span:nth-child(3) { top: 19px; }

  /* Hero CTA stack */
  .hero__cta { flex-direction: column; gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

/* Smooth font rendering across all platforms */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Better mobile scroll feel */
@media (max-width: 880px) {
  html { scroll-padding-top: 80px; }
}

/* ============================================================
   PAGE TRANSITIONS — fade-in via CSS animation, fade-out via JS
   Works even with JS disabled (CSS animation runs on load).
   ============================================================ */
/* IMPORTANT: animate ONLY opacity on <body>. Any `transform`, `filter`,
   or `will-change` on body creates a containing block / new stacking
   context that breaks `position: sticky` in descendants — that's why
   the four-weeks process section was scrolling instead of pinning. */
@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: pageEnter .45s cubic-bezier(.2,.7,.2,1) both;
  transition: opacity .26s cubic-bezier(.2,.7,.2,1);
}

html.is-leaving body {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; transition: none !important; }
  html.is-leaving body { opacity: 1 !important; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-body { background: var(--bone); }

.contact-hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 24px 40px;
  text-align: center;
}
.contact-hero h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: .96;
  letter-spacing: -0.04em;
  margin: 14px 0 18px;
}
.contact-hero h1 em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.contact-hero__dek {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1280px;
  margin: 40px auto 60px;
  padding: 0 24px;
  align-items: stretch;
}

.contact-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--glass-brd);
  border-radius: 22px;
  padding: 32px 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 20px 40px -20px rgba(17,17,17,.18);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.contact-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.contact-card--accent {
  background: linear-gradient(135deg, rgba(11,110,110,.10), rgba(255,255,255,.55));
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.contact-card__num {
  display: inline-block;
  width: max-content;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 5px 11px;
  border-radius: 999px;
}
.contact-card__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}
.contact-card__title em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.contact-card__desc {
  font-family: var(--f-serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.contact-card__points {
  list-style: none;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink);
}
.contact-card__note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 4px 0 0;
}

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.contact-form__field { display: flex; flex-direction: column; gap: 5px; }
.contact-form__field span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.contact-form__field input,
.contact-form__field textarea {
  font-family: var(--f-serif);
  font-size: 15px;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: rgba(255,255,255,.6);
  color: var(--ink);
  outline: none;
  resize: vertical;
  transition: border-color .2s, background .2s;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus { border-color: var(--accent); background: #fff; }
.contact-form__note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-2);
  margin: 4px 0 0;
}

/* Direct list */
.contact-direct { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-direct li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--f-serif);
  font-size: 15px;
}
.contact-direct li:last-child { border-bottom: 0; }
.contact-direct__lbl {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.contact-direct a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.contact-direct a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Trust band */
.contact-trust {
  background: var(--ink);
  color: var(--paper);
  padding: 56px 24px;
}
.contact-trust__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.contact-trust__inner > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-trust__num {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.contact-trust__lbl {
  font-family: var(--f-serif);
  font-size: 16px;
  color: rgba(255,255,255,.75);
  line-height: 1.4;
}

/* Mobile */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-trust__inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
}
@media (max-width: 600px) {
  .contact-hero { padding: 60px 18px 28px; }
  .contact-card { padding: 26px 22px; }
}

/* ============================================================
   ARTICLE-NAV — make sub-page nav links + burger work on mobile
   ============================================================ */
.article-nav .nav__links {
  display: flex;
  gap: 24px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.article-nav .nav__links a { position: relative; padding: 6px 2px; }
.article-nav .nav__links a[aria-current="page"] { color: var(--accent); }
.article-nav .nav__burger { display: none; }

@media (max-width: 900px) {
  .article-nav .nav__links { display: none; }
  .article-nav .nav__cta { display: none; }
  .article-nav .nav__burger { display: block; }
  .article-nav { padding: 6px 6px 6px 18px; }
}

/* ============================================================
   CONTACT BOOKING — full-width Cal.com inline embed
   ============================================================ */
.contact-booking {
  max-width: 1100px;
  margin: 24px auto 24px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.contact-booking__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  max-width: 760px;
}
.contact-booking__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}
.contact-booking__title em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.contact-booking__desc {
  font-family: var(--f-serif);
  font-size: clamp(15.5px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 56ch;
}
.contact-booking__points {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact-booking__points li {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 999px;
  color: var(--ink);
}

/* The embed container — glass pill that hosts Cal.com's iframe */
.contact-booking__embed {
  position: relative;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--glass-brd);
  border-radius: 22px;
  padding: 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 30px 60px -25px rgba(17,17,17,.18),
    0 60px 120px -60px rgba(17,17,17,.15);
  overflow: hidden;
}
#cal-inline-embed {
  width: 100%;
  min-height: 680px;
  border-radius: 14px;
  overflow: hidden;
  /* Background while Cal.com iframe loads */
  background: #fff;
}
.contact-booking__note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  margin: 4px 4px 0;
  text-align: center;
}
.contact-booking__note a { color: var(--accent); border-bottom: 1px solid currentColor; }

.contact-grid--alt {
  grid-template-columns: 1fr 1fr;
  margin-top: 24px;
}

@media (max-width: 760px) {
  .contact-grid--alt { grid-template-columns: 1fr; }
  #cal-inline-embed { min-height: 720px; }
}

/* ============================================================
   FUNNEL LEAK FINDER — clean rebuild
   ============================================================ */
.funnel { margin-top: 14px; }
.funnel__inputs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.funnel__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.funnel__field-lbl {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.funnel__field input {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: rgba(255,255,255,.6);
  outline: none;
  transition: border-color .2s, background .2s;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.funnel__field input:focus { border-color: var(--accent); background: #fff; }

/* The visualisation — alternating stage bars + step indicators */
.funnel__viz {
  background: rgba(255,255,255,.5);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}

.funnel-stage {
  display: grid;
  grid-template-columns: 1fr 140px 90px;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  position: relative;
}
.funnel-stage__bar {
  display: block;
  height: 36px;
  width: var(--w, 100%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ink) 18%, transparent), color-mix(in srgb, var(--ink) 8%, transparent));
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.funnel-stage__label {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: right;
}
.funnel-stage__count {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: right;
}

.funnel-step {
  display: grid;
  grid-template-columns: 1fr 1fr 24px;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  margin: 6px 8% 6px 0;
  border-radius: 10px;
  border: 1px dashed var(--rule);
  background: rgba(255,255,255,.4);
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  transition: background .25s, border-color .25s;
}
.funnel-step.is-good { border-color: color-mix(in srgb, #16a34a 30%, transparent); background: rgba(22,163,74,.05); }
.funnel-step.is-mid  { border-color: var(--rule); }
.funnel-step.is-bad  { border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.funnel-step.is-worst {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.funnel-step__name {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.funnel-step__rates {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: flex-end;
}
.funnel-step__rates strong {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.funnel-step.is-worst .funnel-step__rates strong { color: var(--accent); }
.funnel-step.is-good .funnel-step__rates strong  { color: #16a34a; }
.funnel-step__rates em {
  font-style: italic;
  font-size: 11px;
  color: var(--ink-2);
}
.funnel-step__arrow {
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
}

.funnel__diag-wrap {
  background: rgba(255,255,255,.55);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 16px 22px;
}
.funnel__diag-kicker {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.funnel__diag {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.funnel__diag strong { color: var(--ink); font-weight: 600; }
.funnel__diag em { font-style: italic; color: var(--ink-2); }

@media (max-width: 760px) {
  .funnel__inputs { grid-template-columns: 1fr 1fr; }
  /* Stack on mobile: label + count above the bar (bar gets full width) */
  .funnel-stage {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label count"
      "bar bar";
    gap: 4px 10px;
    padding: 10px 0;
  }
  .funnel-stage__label { grid-area: label; text-align: left; }
  .funnel-stage__count { grid-area: count; text-align: right; font-size: 18px; }
  .funnel-stage__bar { grid-area: bar; height: 24px; }
  .funnel__viz { padding: 18px 16px; }
  .funnel-step { grid-template-columns: 1fr; margin-right: 0; padding: 10px 12px; gap: 6px; }
  .funnel-step__rates { justify-content: flex-start; }
  .funnel-step__arrow { display: none; }
}
@media (max-width: 480px) {
  .funnel__inputs { grid-template-columns: 1fr; }
}

/* ============================================================
   AI STACK PICKER
   ============================================================ */
.stack { margin-top: 14px; }
.stack__type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}
.stack__type {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 9px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.stack__type:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.stack__type[data-active="true"] {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.stack__type-label {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.stack__type-label strong { color: var(--ink); font-style: normal; }
.stack__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.stack__item {
  background: rgba(255,255,255,.6);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .2s;
}
.stack__item:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.stack__item.is-skip {
  background: rgba(0,0,0,.03);
  border-style: dashed;
}
.stack__item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.stack__item-cat {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.stack__item.is-skip .stack__item-cat { color: var(--ink-2); }
.stack__item-price {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
}
.stack__item-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.stack__item-why {
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

/* ============================================================
   VBP — Value-Based Pricing Ladder
   ============================================================ */
.vbp { margin-top: 14px; }
.vbp__inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.vbp__inputs input,
.ccal__inputs input[type="text"] {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: rgba(255,255,255,.6);
  color: var(--ink);
  outline: none;
  transition: border-color .2s, background .2s;
  width: 100%;
}
.vbp__inputs input:focus,
.ccal__inputs input[type="text"]:focus { border-color: var(--accent); background: #fff; }
.vbp__inputs .hrcalc__field span,
.ccal__inputs .hrcalc__field span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.vbp__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.vbp__head-svc {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}
.vbp__head-ratio {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.vbp__head-ratio strong {
  font-family: var(--f-display);
  font-style: normal;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 4px;
}
.vbp__head-ratio.is-low strong { color: var(--accent); }
.vbp__head-ratio.is-good strong { color: #16a34a; }
.vbp__head-ratio em { font-style: italic; opacity: .8; }

.vbp__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.vbp__tier {
  position: relative;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .25s, transform .25s;
}
.vbp__tier:hover { transform: translateY(-2px); }
.vbp__tier.is-featured {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(11,110,110,.08), rgba(255,255,255,.6));
}
.vbp__tier-badge {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.vbp__tier.is-featured .vbp__tier-badge {
  background: var(--accent);
  color: var(--bone);
  padding: 4px 10px;
  border-radius: 999px;
  width: max-content;
}
.vbp__tier-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 4px 0 4px;
  color: var(--ink);
}
.vbp__tier-price {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.vbp__tier.is-featured .vbp__tier-price { color: var(--accent); }
.vbp__tier-pct {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.vbp__tier-desc {
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.vbp__tier-who {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink);
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}
.vbp__note {
  margin: 16px 0 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .vbp__inputs { grid-template-columns: 1fr; }
  .vbp__tiers { grid-template-columns: 1fr; }
}

/* ============================================================
   CCAL — 4-Week Content Calendar
   ============================================================ */
.ccal { margin-top: 14px; }
.ccal__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.ccal__inputs input[type="text"] {
  font-family: var(--f-serif);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: rgba(255,255,255,.6);
  outline: none;
}
.ccal__inputs input[type="text"]:focus { border-color: var(--accent); background: #fff; }
.hrcalc__field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
}
.hrcalc__field--checkbox input { width: auto; padding: 0; margin: 0; }
.hrcalc__field--checkbox span {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink);
  text-transform: none;
}
.ccal__gen { margin-bottom: 18px; }

.ccal__output { display: flex; flex-direction: column; gap: 24px; margin-top: 8px; }
.ccal-week {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px;
  background: rgba(255,255,255,.5);
}
.ccal-week__head {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--rule);
}
.ccal-week__head em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  text-transform: none;
  color: var(--accent);
  font-size: 16px;
  letter-spacing: 0;
}

.ccal-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.ccal-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ccal-item__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ccal-item__day {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 999px;
}
.ccal-item__type {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
}
.ccal-item__copy {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ccal-item__copy:hover { background: var(--ink); color: var(--bone); }
.ccal-item__copy.is-copied { background: #16a34a; border-color: #16a34a; color: #fff; }
.ccal-item__hook {
  font-family: var(--f-serif);
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.ccal-item__hook em { color: var(--ink); font-style: italic; }
.ccal-item__prompt {
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  background: rgba(0,0,0,.04);
  padding: 12px 14px;
  border-radius: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}

@media (max-width: 760px) {
  .ccal__inputs { grid-template-columns: 1fr; }
}

/* ============================================================
   WORK SPREAD — editorial alternating panels
   ============================================================ */
.work-spread {
  padding: 100px 24px 80px;
  max-width: 1320px;
  margin: 0 auto;
}
.work-spread__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.work-spread__intro .h2 { margin-top: 12px; }
.work-spread__lede {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-2);
  margin: 14px auto 0;
  max-width: 56ch;
  line-height: 1.5;
}

.spread { margin: 0 0 28px; }
.spread:last-of-type { margin-bottom: 0; }

.spread__link {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  align-items: stretch;
  text-decoration: none;
  color: var(--ink);
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
  border: 1px solid var(--glass-brd);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -1px 0 rgba(17,17,17,.06) inset,
    0 30px 60px -25px rgba(17,17,17,.22),
    0 60px 120px -60px rgba(17,17,17,.18);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .35s;
}
.spread__link:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Alternating: spread.is-flipped puts the image on the right */
.spread.is-flipped .spread__image { order: 2; }
.spread.is-flipped .spread__copy  { order: 1; }

/* Image side — full-bleed to the panel edges. Per-project tinted backdrop. */
.spread__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
  overflow: hidden;
  min-height: 520px;
  background:
    radial-gradient(circle at 30% 25%, var(--bg-a, rgba(11,110,110,.12)), transparent 60%),
    radial-gradient(circle at 75% 80%, var(--bg-b, rgba(23,55,44,.10)), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(248,245,239,.35));
}
/* Per-project palettes */
.spread--01 { --bg-a: rgba(89,164,140,.20); --bg-b: rgba(255,255,255,.10); }
.spread--02 { --bg-a: rgba(11,110,110,.18);  --bg-b: rgba(17,17,17,.06);    }
.spread--03 { --bg-a: rgba(214,255,75,.20); --bg-b: rgba(23,55,44,.12);    }

.spread__image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(17,17,17,.22)) drop-shadow(0 4px 8px rgba(17,17,17,.08));
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.spread__link:hover .spread__image img {
  transform: scale(1.04) rotate(-0.5deg);
}

/* Copy side */
.spread__copy {
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.spread__index {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .7;
}
.spread__tag {
  display: inline-block;
  width: max-content;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 999px;
}
.spread__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: .98;
  letter-spacing: -0.035em;
  margin: 4px 0 4px;
  color: var(--ink);
}
.spread__title em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.spread__intro {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 50ch;
}
.spread__intro em { font-style: italic; color: var(--ink); }

.spread__stats {
  list-style: none;
  margin: 12px 0 8px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.spread__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.spread__stats span {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 36px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.spread__stats em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.3;
}

.spread__chips {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.spread__chips li {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  color: var(--ink);
}

.spread__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 13px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: rgba(255,255,255,.4);
  transition: background .25s, color .25s, gap .25s;
}
.spread__cta span { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.spread__link:hover .spread__cta { background: var(--ink); color: var(--bone); gap: 14px; }
.spread__link:hover .spread__cta span { transform: translateX(4px); }

.work-spread__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 56px 0 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 980px) {
  .spread__link {
    grid-template-columns: 1fr;
  }
  .spread.is-flipped .spread__image { order: 0; }
  .spread.is-flipped .spread__copy  { order: 1; }
  .spread__image {
    min-height: 0;
    aspect-ratio: 16 / 10;
    padding: 32px;
  }
  .spread__copy { padding: 40px 32px 44px; }
}
@media (max-width: 600px) {
  .work-spread { padding: 60px 16px 56px; }
  .spread { margin-bottom: 20px; }
  .spread__link { border-radius: 22px; }
  .spread__image { padding: 24px; }
  .spread__copy { padding: 32px 24px 36px; gap: 12px; }
  .spread__title { font-size: clamp(34px, 9vw, 48px); }
  .spread__stats { grid-template-columns: 1fr; gap: 10px; padding: 14px 0; }
  .spread__stats li { flex-direction: row; align-items: baseline; gap: 12px; }
  .spread__stats span { font-size: 22px; }
}

/* ============================================================
   FCARDS — feature card grid w/ corner decorators (replaces bento)
   ============================================================ */
.fcards {
  position: relative;
  padding: 100px 24px 80px;
  max-width: 1100px;
  margin: 0 auto;
}
.fcards__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.fcards__intro .h2 { margin-top: 12px; }
.fcards__lede {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-2);
  margin: 14px 0 0;
  line-height: 1.5;
}

.fcards__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.fcard--wide { grid-column: 1 / -1; }

/* The card — sharp corners, light glass */
.fcard {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(248,245,239,.35)),
    var(--bone);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  /* Sharp corners (matches the React reference: rounded-none) */
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 14px 30px -20px rgba(17,17,17,.10),
    0 30px 60px -40px rgba(17,17,17,.10);
  overflow: hidden;
  transition: box-shadow .35s, border-color .35s;
}
.fcard:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 22px 50px -25px rgba(17,17,17,.16),
    0 40px 80px -50px rgba(17,17,17,.12);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Four little L-shaped corner brackets in accent color */
.fcard__corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 0 solid var(--accent);
  pointer-events: none;
  z-index: 2;
}
.fcard__corner--tl { top: -1px; left: -1px;  border-top-width: 2px; border-left-width: 2px; }
.fcard__corner--tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.fcard__corner--bl { bottom: -1px; left: -1px;  border-bottom-width: 2px; border-left-width: 2px; }
.fcard__corner--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* Card head */
.fcard__head { padding: 28px 28px 20px; }
.fcard__lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-2);
}
.fcard__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
}
.fcard__desc {
  margin: 22px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 28ch;
}
.fcard__desc em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}

/* Visualization area */
.fcard__viz {
  position: relative;
  margin: 0 0 0;
  padding: 8px 28px 24px;
  aspect-ratio: 76 / 59;
}
.fcard__viz--dashed {
  border-top: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.fcard__viz-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fcard__viz--solid .fcard__viz-inner {
  border: 1px solid var(--rule);
  background: rgba(255,255,255,.55);
  border-radius: 2px;
  padding: 14px;
}
/* Radial-gradient overlay matching the React reference */
.fcard__viz-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(125% 125% at 50% 0%, transparent 40%, rgba(248,245,239,.55), var(--bone) 125%);
  z-index: 1;
}
.fcard__viz-fade--side {
  background: radial-gradient(60% 60% at 75% 50%, transparent, var(--bone) 100%);
  inset: -16px;
}

/* === Viz: strategy doc (Card 1) === */
.viz-doc {
  width: min(280px, 100%);
  padding: 22px 22px;
  background: #FFFDF7;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.05) inset,
    0 14px 30px -16px rgba(0,0,0,.18);
  font-family: var(--f-mono);
  position: relative;
  z-index: 0;
}
.viz-doc__tag {
  display: block;
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: 14px;
}
.viz-doc__h {
  display: block;
  width: 65%;
  height: 11px;
  background: var(--ink);
  border-radius: 2px;
  margin-bottom: 14px;
}
.viz-doc__line {
  display: block;
  width: 100%;
  height: 5px;
  background: rgba(17,17,17,.15);
  border-radius: 2px;
  margin-bottom: 8px;
}
.viz-doc__line--short { width: 55%; }
.viz-doc__hl {
  display: inline-block;
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 2px 8px;
  border-radius: 2px;
  margin: 4px 0 8px;
}

/* === Viz: calendar (Card 2) === */
.viz-cal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  position: relative;
  z-index: 0;
}
.viz-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-2);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.viz-cal__live {
  color: #16a34a;
  letter-spacing: .14em;
}
.viz-cal__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.viz-cal__grid span {
  background: rgba(17,17,17,.05);
  border-radius: 2px;
  border: 1px solid transparent;
}
.viz-cal__grid .is-booked {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.viz-cal__foot {
  display: flex;
  gap: 6px;
}
.viz-cal__chip {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
}
.viz-cal__chip--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bone);
}

/* === Wide statement card === */
.fcard--wide { padding: 36px 24px 32px; }
.fcard__statement {
  margin: 18px auto 28px;
  max-width: 32ch;
  text-align: center;
}
.fcard__statement span {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fcard__statement em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.fcard__statement small {
  display: block;
  margin-top: 12px;
  font-family: var(--f-serif);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

/* === Circular UI row === */
.circles-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 8px 0;
}
.circle-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.circle-ui__inner {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(248,245,239,.3));
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.circle-ui__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: #fff;
  position: relative;
}
.circle-ui__dot + .circle-ui__dot { margin-left: -10px; }
.circle-ui__dot--none { background: #fff; }
.circle-ui__dot--border {
  background:
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--ink) 18%, transparent),
      color-mix(in srgb, var(--ink) 18%, transparent) 1px,
      transparent 1px, transparent 4px);
}
.circle-ui__dot--primary {
  background:
    repeating-linear-gradient(-45deg,
      var(--accent),
      var(--accent) 1px,
      transparent 1px, transparent 4px);
  background-color: rgba(11,110,110,.06);
}
.circle-ui__dot--lime {
  border-color: var(--lime, #D6FF4B);
  background:
    repeating-linear-gradient(-45deg,
      var(--lime, #D6FF4B),
      var(--lime, #D6FF4B) 1px,
      transparent 1px, transparent 4px);
  background-color: rgba(214,255,75,.10);
  z-index: 1;
}
.circle-ui__lbl {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.fcards__outro {
  display: flex;
  justify-content: center;
  padding: 56px 0 0;
}

@media (max-width: 760px) {
  .fcards { padding: 60px 16px 56px; }
  .fcards__grid { grid-template-columns: 1fr; }
  .fcard__head { padding: 22px 22px 16px; }
  .fcard__viz { padding: 8px 22px 22px; }
  .fcard--wide { padding: 28px 18px 26px; }
  .circles-row { gap: 14px; padding: 4px 0; }
  .circle-ui--hide-sm { display: none; }
  .circle-ui__inner { padding: 8px 10px; }
  .circle-ui__dot { width: 24px; height: 24px; }
  .circle-ui__dot + .circle-ui__dot { margin-left: -8px; }
}

/* ============================================================
   FOLIO — flagship featured case + 2 companion cards
   ============================================================ */
.folio {
  padding: 100px 24px 80px;
  max-width: 1320px;
  margin: 0 auto;
}
.folio__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.folio__intro .h2 { margin-top: 12px; }
.folio__lede {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-2);
  margin: 14px auto 0;
  max-width: 56ch;
  line-height: 1.5;
}

/* ----- Featured panel ----- */

/* ============================================================
   FOLIO — editorial case-study spreads (alternating L/R)
   ============================================================ */
.folio-spreads {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}
.folio-spread { margin: 0; }
.folio-spread__link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
  text-decoration: none;
  color: var(--ink);
  padding: 32px;
  border-radius: 40px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(248,245,239,.32));
  backdrop-filter: blur(22px) saturate(1.45);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
  border: 1px solid color-mix(in srgb, white 24%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 1.8px 3px 0 -2px rgba(255,255,255,.85),
    inset -2px -2px 0 -2px rgba(255,255,255,.7),
    inset 0 3px 4px -2px rgba(0,0,0,.18),
    0 30px 60px -25px rgba(17,17,17,.18),
    0 60px 120px -55px rgba(17,17,17,.14);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .35s;
}
.folio-spread__link:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
/* Alternation */
.folio-spread--imgR .folio-spread__image { order: 2; }
.folio-spread--imgR .folio-spread__copy  { order: 1; }

/* Image side — fills the pill column, top + bottom flush with copy */
/* Image side — full image visible, generous padding, refined inner border */
.folio-spread__image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  padding: 14px;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,.42)) 0%,
      rgba(255,255,255,.18) 100%);
  border: 1px solid color-mix(in srgb, white 28%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 1px 0 rgba(255,255,255,.45),
    0 18px 40px -18px rgba(17,17,17,.32);
}
.folio-spread__image::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent),
    inset 0 0 0 2px rgba(255,255,255,.5);
  z-index: 2;
}
.folio-spread__image img {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 16px;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.folio-spread__link:hover .folio-spread__image img { transform: scale(1.03); }

/* Copy side — vertically centred so visual rhythm aligns with the
   image's mid-line; the column itself stretches to match image height. */
.folio-spread__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 24px 32px;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.folio-spread--imgR .folio-spread__copy { margin: 0 auto; }

.folio-spread__index {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.folio-spread__tag {
  display: inline-flex;
  width: max-content;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,.4);
}
.folio-spread__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 5.6vw, 88px);
  line-height: .98;
  letter-spacing: -0.035em;
  margin: 8px 0 4px;
  color: var(--ink);
}
.folio-spread__title em {
  font-family: var(--f-serif-i, 'Instrument Serif', serif);
  font-style: italic;
  color: var(--accent);
}
.folio-spread__intro {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 48ch;
}
.folio-spread__intro em { font-style: italic; color: var(--ink); }

/* 3-up stats row */
.folio-spread__stats {
  list-style: none;
  margin: 16px 0 0;
  padding: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border-top: 1px solid var(--rule);
}
.folio-spread__stats li {
  display: flex; flex-direction: column; gap: 6px;
}
.folio-spread__stats strong {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.folio-spread__stats em {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-style: normal;
}

.folio-spread__cta {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-top: 8px;
  padding: 13px 22px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  gap: 10px;
  transition: background .25s, color .25s, gap .25s;
}
.folio-spread__cta span { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.folio-spread__link:hover .folio-spread__cta { background: var(--ink); color: var(--bone); gap: 14px; }
.folio-spread__link:hover .folio-spread__cta span { transform: translateX(4px); }

.folio__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 96px 0 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Responsive */
@media (max-width: 980px) {
  .folio-spreads { gap: 56px; }
  .folio-spread__link {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
    border-radius: 32px;
  }
  .folio-spread__image {
    aspect-ratio: 16 / 10;
    max-height: 520px;
  }
  .folio-spread--imgR .folio-spread__image { order: 0; }
  .folio-spread--imgR .folio-spread__copy  { order: 1; margin: 0 auto; }
  .folio-spread__copy { max-width: none; padding: 12px 12px 20px; }
}
@media (max-width: 560px) {
  .folio { padding: 80px 16px 60px; }
  .folio-spreads { gap: 40px; padding: 0 4px; }
  .folio-spread__link { padding: 14px; border-radius: 26px; }
  .folio-spread__title { font-size: clamp(40px, 11vw, 56px); }
  .folio-spread__stats { grid-template-columns: 1fr; gap: 10px; padding: 14px 0 0; }
  .folio-spread__stats li { flex-direction: row; align-items: baseline; gap: 14px; }
}


/* ============================================================
   CAL.COM POPUP — soften the backdrop transition
   Cal renders an iframe overlay; without polish it just pops in.
   This adds a gentle backdrop fade-in so the moment feels intentional.
   ============================================================ */
:root {
  --cal-overlay-bg: rgba(17,17,17,.55);
}
/* Cal.com's modal wrapper — target the standard modal element */
[data-cal-modal-box], div[id^="cal-modal-box"], cal-modal-box {
  animation: calModalIn .4s cubic-bezier(.2,.7,.2,1);
}
@keyframes calModalIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* Backdrop dim — Cal uses an overlay, give it a smooth fade */
[data-cal-modal-overlay], div[id^="cal-modal-overlay"] {
  animation: calOverlayIn .35s ease-out;
}
@keyframes calOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   macOS Tahoe-style liquid glass
   Inset shadow stack does the heavy lifting; the SVG filter
   adds subtle refraction in Chrome/Edge (degrades cleanly).
   ============================================================ */
:root {
  --lg-blur: 14px;
  --lg-sat: 1.6;
  --lg-tint: rgba(245, 240, 228, 0.32);
  --lg-tint-dark: rgba(20, 24, 28, 0.32);
  --lg-light: 1;
  --lg-dark: 1;
  --lg-shadow:
    inset 0 0 0 1px color-mix(in srgb, white calc(var(--lg-light) * 10%), transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, white calc(var(--lg-light) * 90%), transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, white calc(var(--lg-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, white calc(var(--lg-light) * 60%), transparent),
    inset -0.3px -1px 4px 0 color-mix(in srgb, black calc(var(--lg-dark) * 12%), transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb, black calc(var(--lg-dark) * 20%), transparent),
    inset 0 3px 4px -2px color-mix(in srgb, black calc(var(--lg-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, black calc(var(--lg-dark) * 10%), transparent),
    0 1px 5px 0 color-mix(in srgb, black calc(var(--lg-dark) * 10%), transparent),
    0 6px 16px 0 color-mix(in srgb, black calc(var(--lg-dark) * 8%), transparent);
}

.liquid-glass,
.nav,
.hero__tag,
.hero__proof,
.btn--ghost,
.svc-bento__card,
.bento-card,
.plan,
.svc-tier,
.faq-item,
.insight,
.founder__card,
.quiz,
.magnet,
.roi__output,
.stat,
.cal-inline-wrap {
  background-color: var(--lg-tint) !important;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) url(#liquid-glass) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  box-shadow: var(--lg-shadow) !important;
  border: 1px solid color-mix(in srgb, white calc(var(--lg-light) * 22%), transparent) !important;
}

/* Dark-section glass surfaces: invert highlight balance */
.service--accent,
.pulse,
.cta {
  --lg-tint: var(--lg-tint-dark);
  --lg-light: 0.45;
  --lg-dark: 1.4;
}

/* Buttons get a softer, less-blurred treatment */
.btn--ghost {
  --lg-blur: 10px;
}

/* Reduce motion: skip the SVG displacement filter */
@media (prefers-reduced-motion: reduce) {
  .liquid-glass,
  .nav, .hero__tag, .hero__proof, .btn--ghost,
  .svc-bento__card, .bento-card, .plan, .svc-tier,
  .faq-item, .insight, .founder__card, .quiz, .magnet,
  .roi__output, .stat, .cal-inline-wrap {
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  }
}

/* Mobile / touch perf: drop the SVG displacement filter and halve blur.
   Keeps the inset-shadow lens look + tint, drops 80% of the GPU cost. */
@media (pointer: coarse), (max-width: 768px) {
  :root { --lg-blur: 6px; --lg-sat: 1.4; }
  .liquid-glass,
  .nav, .hero__tag, .hero__proof, .btn--ghost,
  .svc-bento__card, .bento-card, .plan, .svc-tier,
  .faq-item, .insight, .founder__card, .quiz, .magnet,
  .roi__output, .stat, .cal-inline-wrap {
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) !important;
  }
}

/* ============================================================
   CADENCE — section 04 redesign
   Horizontal scroll-snap rail, four week-cards, native scroll.
   Replaces the heavy process--fog cinematic.
   ============================================================ */
.cadence {
  padding: 120px 0 140px;
  background: linear-gradient(180deg, transparent 0%, rgba(11,110,110,.04) 100%);
  position: relative;
}
.cadence__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
  padding: 0 32px;
}
.cadence__intro .h2 { margin-top: 12px; }
.cadence__lede {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 14px auto 0;
  max-width: 56ch;
}

.cadence__rail {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 12px 0 28px;
}
.cadence__rail::-webkit-scrollbar { display: none; }

.cadence__track {
  display: flex;
  gap: 24px;
  padding: 0 max(32px, calc((100vw - 1080px) / 2));
  width: max-content;
}

.cadence__week {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  flex: 0 0 min(720px, calc(100vw - 64px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 40px 32px;
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.6), rgba(248,245,239,.34));
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid color-mix(in srgb, white 26%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(17,17,17,.04),
    0 30px 60px -25px rgba(17,17,17,.18),
    0 60px 120px -55px rgba(17,17,17,.14);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .35s;
  min-height: 460px;
}
.cadence__week:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.cadence__num {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 60, "opsz" 144;
  font-weight: 400;
  font-size: clamp(56px, 7vw, 96px);
  line-height: .9;
  letter-spacing: -0.05em;
  color: var(--accent);
}
.cadence__tag {
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,.45);
}
.cadence__h {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 55, "opsz" 120;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
  color: var(--ink);
}
.cadence__h em {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--accent);
}
.cadence__p {
  font-family: var(--f-serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 56ch;
}
.cadence__bullets {
  list-style: none;
  padding: 16px 0 0;
  margin: 6px 0 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cadence__bullets li {
  position: relative;
  padding-left: 22px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
}
.cadence__bullets li::before {
  content: "→";
  position: absolute; left: 0; top: 0;
  color: var(--accent);
}
.cadence__deliv {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}

.cadence__dots {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 24px auto 0;
}
.cadence__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  transition: width .25s, background .25s;
}
.cadence__dot.is-active {
  width: 24px;
  border-radius: 999px;
  background: var(--accent);
}

@media (max-width: 720px) {
  .cadence { padding: 96px 0 112px; }
  .cadence__track { padding: 0 16px; gap: 16px; }
  .cadence__week {
    flex: 0 0 calc(100vw - 32px);
    padding: 28px 24px 24px;
    border-radius: 26px;
    min-height: 0;
  }
  .cadence__num { font-size: 64px; }
  .cadence__h { font-size: clamp(22px, 5.6vw, 28px); }
}