/* ==========================================================
   LetsGrowPro — warm editorial design system
   ========================================================== */
:root{
  --bg:#F4F1EA;
  --bg-alt:#EDE8DD;
  --card:#EFE9DC;
  --cream:#FAF8F2;
  --ink:#191611;
  --ink-2:#45403A;
  --muted:#8C8477;
  --line:#D8CFBA;
  --line-soft:#E3DCCB;
  --accent:#C25E1B;
  --accent-2:#E8833A;

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-pill:999px;

  --f-sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --f-serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --wrap:1200px;
  --pad:clamp(20px,5vw,40px);

  --shadow:0 1px 2px rgba(25,22,17,.04),0 8px 28px rgba(25,22,17,.06);
  --shadow-lg:0 2px 6px rgba(25,22,17,.05),0 24px 60px rgba(25,22,17,.10);

  --ease:cubic-bezier(.16,1,.3,1);
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--f-sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:860px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--cream);padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- TYPE ---------- */
.display{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:clamp(42px,7.2vw,86px);
  line-height:.98;
  letter-spacing:-.025em;
}
.display em{font-style:italic;color:var(--accent)}

/* ---------- RIPPLE HEADLINE ----------
   The headline is split into per-letter spans, each carrying a --ri
   index. That index staggers the animation delay, so motion travels
   across the line as a wave instead of every letter moving together.
   A slow idle wave keeps it alive; hover replays it faster. */
/* perspective is what makes the rotateX read as depth rather than a squash */
.ripple-text{perspective:900px;perspective-origin:50% 60%}
.ripple-text [data-split]{display:block;transform-style:preserve-3d}
.ripple-letter{
  display:inline-block;
  will-change:transform;
  transform-origin:50% 90%;
  animation:ripple-idle 5.6s var(--ease) infinite;
  animation-delay:calc(var(--ri,0) * 55ms);
}
/* keeps a word from ever breaking between its own letters */
.ripple-word{display:inline-block;white-space:nowrap}

@keyframes ripple-idle{
  0%,72%,100%{transform:translateY(0) rotateX(0deg)}
  80%{transform:translateY(-.1em) rotateX(14deg)}
  88%{transform:translateY(.018em) rotateX(-4deg)}
}

.ripple-text:hover .ripple-letter{
  animation:ripple-lift .7s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(var(--ri,0) * 28ms);
}

@keyframes ripple-lift{
  0%{transform:translateY(0) rotateX(0deg)}
  35%{transform:translateY(-.15em) rotateX(20deg)}
  100%{transform:translateY(0) rotateX(0deg)}
}

@media (prefers-reduced-motion:reduce){
  .ripple-letter,.ripple-text:hover .ripple-letter{animation:none}
}

.display-2{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:clamp(32px,4.6vw,56px);
  line-height:1.04;
  letter-spacing:-.02em;
}

.lede{
  font-size:clamp(16px,1.5vw,19px);
  color:var(--ink-2);
  line-height:1.62;
  max-width:60ch;
}

.tag{
  display:inline-block;
  font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.tag-light{color:rgba(244,241,234,.55)}

.sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.sec-lede{margin-top:18px;font-size:clamp(15px,1.4vw,18px);color:var(--ink-2);max-width:56ch}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:500;
  padding:14px 26px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease),background .2s ease,border-color .2s ease,color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:#000}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--card);border-color:var(--ink)}

.btn-cream{background:var(--cream);color:var(--ink)}
.btn-cream:hover{background:#fff}

.btn-outline{background:transparent;color:var(--cream);border-color:rgba(244,241,234,.35)}
.btn-outline:hover{border-color:var(--cream);background:rgba(244,241,234,.08)}

.btn-sm{padding:10px 20px;font-size:14px}

/* ==========================================================
   PRELOADER
   ========================================================== */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--ink);color:var(--cream);
  display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
.loader[data-done="true"]{opacity:0;visibility:hidden;pointer-events:none}
.loader-in{width:min(420px,78vw);text-align:center}
.loader-name{font-family:var(--f-serif);font-size:26px;display:block;margin-bottom:8px}
.loader-name sup{font-family:var(--f-sans);font-size:9px;font-weight:600;top:-1em}
.loader-word{
  display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-2);height:18px;margin-bottom:22px;
}
.loader-bar{height:2px;background:rgba(244,241,234,.16);border-radius:2px;overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--accent-2)}
.loader-pct{display:block;margin-top:12px;font-size:12px;color:rgba(244,241,234,.5);font-variant-numeric:tabular-nums}
body[data-loading="true"]{overflow:hidden}

/* ==========================================================
   CUSTOM CURSOR — pointer devices only
   ========================================================== */
.cursor{display:none}

@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block;position:fixed;top:0;left:0;z-index:9998;
    pointer-events:none;mix-blend-mode:normal;
  }
  .cursor-dot,.cursor-ring{
    position:absolute;top:0;left:0;border-radius:50%;
    transform:translate(-50%,-50%);
  }
  .cursor-dot{width:6px;height:6px;background:var(--ink)}
  .cursor-ring{
    width:34px;height:34px;
    border:1px solid rgba(25,22,17,.32);
    display:grid;place-items:center;
    transition:width .3s var(--ease),height .3s var(--ease),
               background .3s ease,border-color .3s ease;
  }
  .cursor-ring em{
    font-style:normal;font-size:10.5px;font-weight:600;
    letter-spacing:.04em;color:var(--cream);
    opacity:0;white-space:nowrap;transition:opacity .2s ease;
  }
  /* over a labelled target the ring inflates into a pill-ish badge */
  .cursor[data-active="true"] .cursor-ring{
    width:74px;height:74px;background:var(--ink);border-color:var(--ink);
  }
  .cursor[data-active="true"] .cursor-ring em{opacity:1}
  .cursor[data-active="true"] .cursor-dot{opacity:0}
  .cursor[data-hidden="true"]{opacity:0}
  /* on dark sections invert so it stays visible */
  .cursor[data-dark="true"] .cursor-dot{background:var(--cream)}
  .cursor[data-dark="true"] .cursor-ring{border-color:rgba(244,241,234,.4)}
  .cursor[data-dark="true"][data-active="true"] .cursor-ring{background:var(--cream);border-color:var(--cream)}
  .cursor[data-dark="true"][data-active="true"] .cursor-ring em{color:var(--ink)}
}

/* ==========================================================
   FULLSCREEN MENU
   ========================================================== */
.menu{
  position:fixed;inset:0;z-index:200;
  background:var(--ink);color:var(--cream);
  display:grid;place-items:center;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--ease);
}
.menu[data-open="true"]{clip-path:inset(0 0 0 0)}
.menu-in{width:min(var(--wrap),92vw);padding:0 var(--pad)}
.menu-links{display:flex;flex-direction:column;gap:2px}
.menu-links a{
  display:flex;align-items:baseline;gap:18px;
  font-family:var(--f-serif);font-size:clamp(32px,6.4vw,68px);
  line-height:1.12;letter-spacing:-.02em;
  padding:6px 0;
  opacity:0;transform:translateY(26px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .25s ease;
  transition-delay:calc(var(--d,0) * 55ms);
}
.menu[data-open="true"] .menu-links a{opacity:1;transform:none}
.menu-links a span{
  font-family:var(--f-sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;color:rgba(244,241,234,.35);
}
.menu-links a:hover{color:var(--accent-2)}
.menu-foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:44px;padding-top:22px;
  border-top:1px solid rgba(244,241,234,.16);
  font-size:13px;color:rgba(244,241,234,.55);
  opacity:0;transition:opacity .5s ease .45s;
}
.menu[data-open="true"] .menu-foot{opacity:1}
.menu-foot a:hover{color:var(--accent-2)}

body[data-menu="true"]{overflow:hidden}
/* burger must sit above the overlay so it can close it */
.nav{z-index:210}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(244,241,234,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,background .3s ease;
}
.nav.stuck{border-bottom-color:var(--line);background:rgba(244,241,234,.94)}

.nav-in{
  max-width:var(--wrap);margin-inline:auto;
  padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-text{font-family:var(--f-serif);font-size:21px;letter-spacing:-.01em}
.logo-text sup{font-family:var(--f-sans);font-size:8px;font-weight:600;top:-.9em}

.nav-links{display:flex;gap:26px}
.nav-links a{
  font-size:14px;color:var(--ink-2);position:relative;padding:4px 0;
  transition:color .2s ease;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--ink);transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}

.nav-cta{display:flex;align-items:center;gap:14px}
.nav-status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;color:var(--muted);white-space:nowrap;
}
.dot{
  width:6px;height:6px;border-radius:50%;background:#3FA46A;
  box-shadow:0 0 0 3px rgba(63,164,106,.16);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.nav-burger{
  display:none;width:38px;height:38px;border:1px solid var(--line);
  background:transparent;border-radius:var(--r-pill);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;
}
.nav-burger span{display:block;width:15px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.nav-burger[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}

.nav-drawer{
  display:none;flex-direction:column;gap:4px;
  padding:12px var(--pad) 24px;
  border-top:1px solid var(--line);
  background:var(--bg);
}
.nav-drawer a{padding:12px 0;font-size:16px;border-bottom:1px solid var(--line-soft)}
.nav-drawer .btn{margin-top:14px;border-bottom:0}

@media(max-width:960px){
  .nav-links,.nav-status{display:none}
  .nav-burger{display:flex}
  .nav-drawer[data-open="true"]{display:flex}
}

/* ---------- HERO ---------- */
.hero{position:relative;padding:clamp(64px,9vw,116px) 0 clamp(56px,7vw,88px);overflow:hidden}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(60% 50% at 82% 8%,rgba(232,131,58,.13) 0%,transparent 62%),
    radial-gradient(50% 45% at 10% 22%,rgba(194,94,27,.08) 0%,transparent 60%);
}
.hero-in{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:500;letter-spacing:.02em;
  color:var(--ink-2);
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  padding:8px 18px;border-radius:var(--r-pill);
  margin-bottom:26px;
}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

.hero .display{margin-bottom:22px;max-width:16ch}
.hero .lede{margin-bottom:34px;text-align:center}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:38px}

.hero-trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:clamp(44px,6vw,70px)}
.avatars{display:flex}
.avatars span{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  background:var(--card);color:var(--ink-2);
  border:2px solid var(--bg);
  margin-left:-9px;
}
.avatars span:first-child{margin-left:0}
.hero-trust-text{font-size:13.5px;color:var(--ink-2);text-align:left;line-height:1.45}
.hero-trust-text strong{color:var(--ink);font-weight:600}
.stars{display:block;color:var(--accent);font-size:12.5px}
.stars em{font-style:normal;color:var(--muted)}

/* hero panel */
.hero-panel{
  width:100%;text-align:left;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 22px;border-bottom:1px solid var(--line-soft);
  background:rgba(216,207,186,.16);
}
.panel-title{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600}
.live{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(194,94,27,.16);
  animation:pulse 1.8s ease-in-out infinite;
}
.panel-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

.panel-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch}
.flow-step{padding:26px 24px 22px;position:relative}
.flow-no{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.flow-step h3{font-size:17px;font-weight:600;margin:8px 0 7px;letter-spacing:-.01em}
.flow-step p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.flow-meter{margin-top:16px;height:2px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.flow-meter i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width 1.1s var(--ease)}
.flow-step.on .flow-meter i{width:100%}
.flow-arrow{display:grid;place-items:center;color:var(--line);font-size:18px;padding-inline:4px}

@media(max-width:820px){
  .panel-flow{grid-template-columns:1fr}
  .flow-arrow{display:none}
  .flow-step+.flow-step{border-top:1px solid var(--line-soft)}
}

/* sim button */
.panel-head-right{display:flex;align-items:center;gap:14px}
.sim-btn{
  font:inherit;font-size:12px;font-weight:600;
  padding:7px 15px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--cream);border:1px solid var(--ink);
  cursor:pointer;transition:background .2s ease,transform .2s var(--ease),opacity .2s;
}
.sim-btn:hover{background:#000;transform:translateY(-1px)}
.sim-btn[data-running="true"]{background:transparent;color:var(--muted);border-color:var(--line)}

/* ---------- SIMULATION VISUALS ---------- */
.flow-step{transition:background .4s var(--ease),opacity .4s ease}
.flow-step.on{background:rgba(216,207,186,.14)}
.flow-step.done .flow-no{color:var(--accent)}

.flow-visual{
  height:96px;margin-top:16px;
  border:1px solid var(--line-soft);border-radius:var(--r-sm);
  background:var(--bg);overflow:hidden;position:relative;
  display:flex;flex-direction:column;
}

.flow-status{
  display:block;margin-top:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);
  transition:color .3s ease;
}
.flow-step.on .flow-status{color:var(--accent)}
.flow-step.done .flow-status{color:#3FA46A}

/* step 1 — traffic hits streaming in */
.hit-rows{padding:8px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.hit-row{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;color:var(--ink-2);
  opacity:0;transform:translateX(-8px);
  animation:hitIn .45s var(--ease) forwards;
}
.hit-row i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.hit-row b{font-weight:600;color:var(--ink)}
.hit-row span{color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
@keyframes hitIn{to{opacity:1;transform:none}}

/* step 2 — live chat */
.sim-chat{padding:8px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.sim-bubble{
  max-width:88%;font-size:10.5px;line-height:1.4;
  padding:6px 9px;border-radius:9px;
  opacity:0;transform:translateY(6px);
  animation:bubbleIn .4s var(--ease) forwards;
}
.sim-bubble.them{align-self:flex-start;background:var(--card);border:1px solid var(--line)}
.sim-bubble.ai{align-self:flex-end;background:var(--ink);color:var(--cream)}
.sim-bubble.typing{display:flex;gap:3px;align-items:center;padding:8px 10px}
.sim-bubble.typing i{width:4px;height:4px;border-radius:50%;background:rgba(244,241,234,.7);animation:typing 1s infinite}
.sim-bubble.typing i:nth-child(2){animation-delay:.15s}
.sim-bubble.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes bubbleIn{to{opacity:1;transform:none}}

/* step 3 — booking confirmation */
.booking{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;text-align:center;
  opacity:0;transform:scale(.94);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.booking.show{opacity:1;transform:none}
.booking-check{
  width:22px;height:22px;border-radius:50%;
  background:#3FA46A;color:#fff;font-size:12px;
  display:grid;place-items:center;margin-bottom:4px;
}
.booking b{font-size:12px}
.booking small{font-size:10px;color:var(--muted)}
.booking-sync{font-size:9.5px;color:var(--accent);margin-top:3px;opacity:0;transition:opacity .3s ease}
.booking-sync.show{opacity:1}

.flow-arrow span{display:inline-block;transition:color .35s ease,transform .35s var(--ease)}
.flow-arrow.on span{color:var(--accent);transform:translateX(4px)}

.panel-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 22px;border-top:1px solid var(--line-soft);
  background:rgba(216,207,186,.16);
  font-size:13px;color:var(--ink-2);
  animation:footIn .6s var(--ease);
}
@keyframes footIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- SERVICES RAIL ---------- */
.drag-hint{
  display:block;margin-top:16px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,241,234,.4);
}
.svc-rail{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
}
.svc-rail::-webkit-scrollbar{display:none}
.svc-rail[data-drag="true"]{cursor:grabbing;scroll-behavior:auto}
.svc-rail[data-drag="true"] .svc{pointer-events:none}

/* Below the breakpoint the rail becomes a normal vertical list again */
@media(min-width:861px){
  .svc-rail .svc-list{
    display:flex;gap:18px;width:max-content;
    border-top:0;padding-bottom:6px;
  }
  .svc-rail .svc{
    display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    width:300px;flex-shrink:0;
    padding:26px 24px;
    border:1px solid rgba(244,241,234,.16);
    border-radius:var(--r-lg);
    background:rgba(244,241,234,.03);
  }
  .svc-rail .svc:hover{background:rgba(244,241,234,.07);padding-inline:24px}
  .svc-rail .svc p{grid-column:auto;flex:1}
  .svc-rail .svc-go{justify-self:auto;align-self:flex-end;margin-top:auto}
}

.rail-progress{
  height:2px;margin-top:22px;
  background:rgba(244,241,234,.14);border-radius:2px;overflow:hidden;
}
.rail-progress i{
  display:block;height:100%;width:14%;
  background:var(--accent-2);border-radius:2px;
  transform-origin:left;
}

/* ---------- SHOWREEL ---------- */
.reel{background:var(--ink);color:var(--cream);padding:clamp(56px,7vw,96px) 0;overflow:hidden}
.reel-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.reel-head .tag{color:rgba(244,241,234,.5);margin-bottom:0}
.reel-strap{font-family:var(--f-serif);font-size:clamp(19px,2.4vw,28px);letter-spacing:-.01em}
.reel-strap em{font-style:italic;color:var(--accent-2)}

.reel-stage{position:relative}
.reel-glow{
  position:absolute;inset:-14% 6%;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 45%,rgba(232,131,58,.24) 0%,transparent 70%);
  filter:blur(38px);
}
.reel-frame{
  position:relative;overflow:hidden;
  border:1px solid rgba(244,241,234,.16);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(244,241,234,.05),rgba(244,241,234,.01));
  min-height:clamp(280px,38vw,440px);
  display:grid;place-items:center;
  padding:40px 24px;
}
.reel-grid{
  position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(244,241,234,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,241,234,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 65% at 50% 50%,#000,transparent);
  mask-image:radial-gradient(70% 65% at 50% 50%,#000,transparent);
}
.reel-scan{
  position:absolute;left:0;right:0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(232,131,58,.13),transparent);
  animation:scan 6s ease-in-out infinite;
}
@keyframes scan{0%,100%{transform:translateY(-40%)}50%{transform:translateY(240%)}}

.reel-center{position:relative;text-align:center;z-index:1}
.reel-kicker{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,234,.45)}
.reel-word{
  font-family:var(--f-serif);
  font-size:clamp(40px,8vw,96px);line-height:1;letter-spacing:-.03em;
  margin:14px 0 12px;
  background:linear-gradient(180deg,var(--cream) 30%,rgba(244,241,234,.55));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.reel-word.swap{animation:reelSwap .55s var(--ease)}
@keyframes reelSwap{
  0%{opacity:0;transform:translateY(18px) rotateX(-32deg)}
  100%{opacity:1;transform:none}
}
.reel-sub{font-size:13.5px;color:rgba(244,241,234,.5)}

.reel-corner{position:absolute;width:16px;height:16px;border:1.5px solid var(--accent-2);opacity:.65}
.reel-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.reel-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.reel-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.reel-corner.br{bottom:14px;right:14px;border-left:0;border-top:0}

/* ---------- ABOUT ---------- */
.about-body{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:760px){.about-body{grid-template-columns:1fr;gap:18px}}
.about-body p{font-size:clamp(15px,1.5vw,17.5px);line-height:1.68;color:var(--ink-2)}
.about-body strong{color:var(--ink);font-weight:600}

/* ---------- MARQUEE BAND ---------- */
.band{background:var(--ink);color:var(--cream);padding:20px 0;overflow:hidden}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:30px;width:max-content;will-change:transform}
.marquee-track span{font-family:var(--f-serif);font-size:22px;white-space:nowrap;opacity:.92}
.marquee-track i{color:var(--accent-2);font-size:9px;font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* ---------- SECTIONS ---------- */
.sec{padding:clamp(64px,8.5vw,120px) 0}
.sec-alt{background:var(--bg-alt)}
.sec-dark{background:var(--ink);color:var(--cream)}
.sec-dark .sec-lede{color:rgba(244,241,234,.6)}
.sec-dark .display-2 em{color:var(--accent-2)}

/* ---------- CARDS ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-4,.grid-2{grid-template-columns:1fr}}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 26px 24px;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#C9BEA4}

.card-kicker{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;display:block;
}
.card h3{font-family:var(--f-serif);font-weight:400;font-size:25px;letter-spacing:-.015em;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--ink-2);line-height:1.6;flex:1}

.stat{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.stat b{display:block;font-family:var(--f-serif);font-weight:400;font-size:38px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;color:var(--muted)}

/* ---------- SERVICES ---------- */
.svc-list{border-top:1px solid rgba(244,241,234,.14)}
.svc{
  display:grid;grid-template-columns:70px 1fr 1.15fr 40px;
  align-items:center;gap:20px;
  padding:26px 8px;
  border-bottom:1px solid rgba(244,241,234,.14);
  transition:background .3s ease,padding .3s var(--ease);
}
.svc:hover{background:rgba(244,241,234,.045);padding-inline:20px}
.svc-no{font-size:12px;color:rgba(244,241,234,.4);letter-spacing:.06em}
.svc h3{font-family:var(--f-serif);font-weight:400;font-size:clamp(21px,2.4vw,29px);letter-spacing:-.015em}
.svc p{font-size:14.5px;color:rgba(244,241,234,.58);line-height:1.55}
.svc-go{
  justify-self:end;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(244,241,234,.22);
  display:grid;place-items:center;font-size:14px;
  transition:transform .3s var(--ease),background .3s ease,border-color .3s ease;
}
.svc:hover .svc-go{background:var(--accent-2);border-color:var(--accent-2);color:var(--ink);transform:translateX(4px)}

@media(max-width:860px){
  .svc{grid-template-columns:52px 1fr 34px;gap:14px}
  .svc p{grid-column:2/4;font-size:14px}
}

/* ---------- AGENTS ---------- */
.agents{display:flex;flex-direction:column;gap:22px}
.agent{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
}
.agent:nth-child(even) .agent-demo{order:2}
@media(max-width:880px){.agent{grid-template-columns:1fr}.agent:nth-child(even) .agent-demo{order:0}}

.agent-demo{padding:30px;background:var(--bg-alt);border-right:1px solid var(--line)}
.agent:nth-child(even) .agent-demo{border-right:0;border-left:1px solid var(--line)}
@media(max-width:880px){.agent-demo,.agent:nth-child(even) .agent-demo{border:0;border-bottom:1px solid var(--line)}}

.agent-copy{padding:34px 32px}
.agent-copy h3{font-family:var(--f-serif);font-weight:400;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;margin-bottom:20px}

.ticks li{
  position:relative;padding-left:26px;margin-bottom:11px;
  font-size:14.5px;color:var(--ink-2);line-height:1.5;
}
.ticks li::before{
  content:'';position:absolute;left:0;top:7px;
  width:13px;height:7px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}

/* chat mock */
.chat-head{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.chat-av{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--cream);display:grid;place-items:center;font-size:12px;font-weight:600}
.chat-head b{display:block;font-size:14px;font-weight:600}
.chat-head small{font-size:11.5px;color:var(--muted)}
.chat-body{display:flex;flex-direction:column;gap:10px}
.msg{max-width:86%;opacity:0;transform:translateY(8px)}
.msg.show{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.msg p{font-size:13.5px;line-height:1.5;padding:11px 15px;border-radius:14px}
.msg time{font-size:10.5px;color:var(--muted);display:block;margin-top:4px}
.msg.in{align-self:flex-start}
.msg.in p{background:var(--cream);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;text-align:right}
.msg.out p{background:var(--ink);color:var(--cream);border-bottom-right-radius:4px;text-align:left}

/* voice mock */
.agent-demo-voice{display:grid;place-items:center}
.call-card{
  width:100%;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px;text-align:center;
}
.call-label{font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.wave{display:flex;align-items:center;justify-content:center;gap:3px;height:56px;margin:20px 0 16px}
.wave i{width:3px;background:var(--accent);border-radius:2px;height:20%;animation:wv 1.1s ease-in-out infinite}
.wave i:nth-child(2n){animation-duration:.9s}
.wave i:nth-child(3n){animation-duration:1.35s;background:var(--accent-2)}
.wave i:nth-child(4n){animation-duration:.75s}
@keyframes wv{0%,100%{height:16%}50%{height:88%}}
.call-status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500}
.call-line{margin-top:14px;font-family:var(--f-serif);font-size:17px;line-height:1.4;color:var(--ink-2)}

/* ==========================================================
   SELECTED WORK — inline SVG artwork
   Drawn rather than photographed: scales to any screen, costs no
   extra requests, and inherits the palette so the orange stays
   consistent with everything else on the page.
   ========================================================== */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.work-grid{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.work-grid{grid-template-columns:1fr}}

.work{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s ease;
}
.work:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 54px rgba(194,94,27,.18);
  border-color:var(--accent-2);
}

.work-art{
  position:relative;
  background:linear-gradient(155deg,#F7EFE4 0%,#EFE6D6 100%);
  border-bottom:1px solid var(--line);
  padding:18px;
  overflow:hidden;
}
.work-art::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(60% 70% at 78% 12%,rgba(232,131,58,.22),transparent 65%);
  pointer-events:none;
}
.work-art svg{width:100%;height:auto;display:block;position:relative;z-index:1}

/* shared SVG palette */
.w-panel{fill:var(--cream)}
.w-bar{fill:#EBE3D2}
.w-dot{fill:#CFC4AC}
.w-soft{fill:#D8CFBA}
.w-ink{fill:var(--ink)}
.w-tile{fill:#E7DECB}
.w-outline{fill:none;stroke:var(--line);stroke-width:1.4}
.w-ring{fill:none;stroke:var(--accent);stroke-width:1.6}
.w-accent{fill:var(--accent)}
.w-accent-soft{fill:rgba(232,131,58,.24)}
.w-bars rect{fill:var(--accent)}
.w-bars rect:nth-child(2n){fill:var(--accent-2)}
.w-line{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.w-num{font-family:var(--f-serif);font-size:15px;fill:var(--ink)}
.w-num-a{fill:var(--accent)}
.w-lbl{font-family:var(--f-sans);font-size:7px;fill:var(--muted)}

/* the waveform in card 2 animates on hover */
.work-art-chat .w-bars rect{transform-origin:center;transition:transform .4s var(--ease)}
.work:hover .work-art-chat .w-bars rect{animation:barPulse 1.1s ease-in-out infinite}
.work:hover .work-art-chat .w-bars rect:nth-child(2n){animation-duration:.85s}
.work:hover .work-art-chat .w-bars rect:nth-child(3n){animation-duration:1.4s}
@keyframes barPulse{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1.35)}}

/* the trend line in card 3 draws itself on hover */
.work-art-dash .w-line{stroke-dasharray:260;stroke-dashoffset:0;transition:stroke-dashoffset .1s}
.work:hover .work-art-dash .w-line{animation:drawLine 1.4s var(--ease)}
@keyframes drawLine{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}

.work-body{padding:24px 22px 22px;display:flex;flex-direction:column;flex:1}
.work-tag{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;
}
.work-body h3{font-family:var(--f-serif);font-weight:400;font-size:23px;letter-spacing:-.015em;margin-bottom:8px}
.work-body p{font-size:14px;color:var(--ink-2);line-height:1.55;flex:1}
.work-stats{display:flex;gap:22px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.work-stats span{display:flex;flex-direction:column;font-size:11.5px;color:var(--muted)}
.work-stats b{font-family:var(--f-serif);font-size:23px;font-weight:400;color:var(--accent);line-height:1.1}

/* ==========================================================
   SPLIT FEATURE — parallaxed photography
   Each photo is oversized inside a fixed frame, so it can travel
   on scroll without ever exposing an edge.
   ========================================================== */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:40px}}

.split-ticks{margin:24px 0 30px}
.split-copy .display-2{margin-bottom:16px}

.split-media{position:relative;min-height:clamp(340px,42vw,460px)}

.ph{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  margin:0;
}
.ph img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* oversized so parallax travel never reveals a gap */
  scale:1.18;
  transition:scale .8s var(--ease);
}
.ph::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(25,22,17,.22));
  pointer-events:none;
}

.ph-tall{height:clamp(330px,40vw,440px);width:82%}
.ph-float{
  position:absolute;right:0;bottom:-6%;
  width:52%;height:clamp(150px,19vw,210px);
  border:4px solid var(--bg);
}
@media(max-width:900px){
  .ph-tall{width:88%}
  .ph-float{width:48%;bottom:-4%}
}

.split-media:hover .ph img{scale:1.24}

.ph-badge{
  position:absolute;left:-10px;top:8%;
  background:var(--accent);color:var(--cream);
  border-radius:var(--r);
  padding:12px 16px;
  display:flex;flex-direction:column;line-height:1.15;
  box-shadow:0 14px 34px rgba(194,94,27,.36);
  animation:badgeBob 5.5s ease-in-out infinite;
}
.ph-badge b{font-family:var(--f-serif);font-size:26px;font-weight:400}
.ph-badge small{font-size:10.5px;opacity:.85}
@keyframes badgeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ==========================================================
   STUDIO — a single cinematic image
   One large photo reads as art direction. A wall of small ones
   reads as a stock-photo dump, so the grid was cut.
   ========================================================== */
.studio{
  background:var(--ink);color:var(--cream);
  padding:clamp(56px,7vw,92px) 0 0;
  overflow:hidden;
}
.studio-head{margin-bottom:36px}
.studio-head .display-2{color:var(--cream)}

.studio-stage{
  position:relative;margin:0;
  height:clamp(300px,46vw,560px);
  overflow:hidden;
}
.studio-stage img{
  width:100%;height:100%;object-fit:cover;display:block;
  scale:1.16;
  transition:scale 1.2s var(--ease);
}
.studio-stage::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(25,22,17,.5) 0%,transparent 32%,rgba(25,22,17,.72) 100%),
    linear-gradient(90deg,rgba(194,94,27,.16),transparent 55%);
}
.studio-stage:hover img{scale:1.21}

.studio-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--pad) clamp(26px,4vw,44px);
}
.studio-loc{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:10px;
}
.studio-cap p{
  font-family:var(--f-serif);
  font-size:clamp(17px,2.2vw,26px);line-height:1.32;
  color:var(--cream);max-width:26ch;
}

/* ==========================================================
   ORANGE STATEMENT BAND
   ========================================================== */
.orange-band{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--accent-2) 0%,var(--accent) 55%,#A94E14 100%);
  color:var(--cream);
  padding:clamp(64px,8vw,110px) 0;
  text-align:center;
}
.orange-glow{
  position:absolute;inset:-30% -10%;
  background:
    radial-gradient(40% 50% at 20% 20%,rgba(255,255,255,.22),transparent 60%),
    radial-gradient(45% 55% at 82% 78%,rgba(25,22,17,.22),transparent 62%);
  pointer-events:none;
}
.orange-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.orange-band .pull{color:#FFF8EF}
.orange-band .pull em{color:var(--ink);font-style:italic}

.orange-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:28px;width:100%;max-width:620px;
  margin:40px 0 34px;padding:24px 0;
  border-top:1px solid rgba(255,248,239,.3);
  border-bottom:1px solid rgba(255,248,239,.3);
}
@media(max-width:560px){.orange-stats{grid-template-columns:1fr;gap:18px}}
.orange-stats b{
  display:block;font-family:var(--f-serif);font-weight:400;
  font-size:clamp(30px,4vw,44px);line-height:1;color:#FFF8EF;
  font-variant-numeric:tabular-nums;
}
.orange-stats span{font-size:12.5px;color:rgba(255,248,239,.75)}

.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{background:#000}

/* ---------- QUOTE BAND ---------- */
.quote-band{background:var(--ink);color:var(--cream);padding:clamp(56px,8vw,100px) 0;text-align:center}
.pull{font-family:var(--f-serif);font-size:clamp(28px,4.6vw,56px);line-height:1.12;letter-spacing:-.02em}
.pull em{font-style:italic;color:var(--accent-2)}

/* ---------- METRICS ---------- */
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  padding:30px 0;margin-bottom:44px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media(max-width:700px){.metrics{grid-template-columns:repeat(2,1fr);gap:26px}}
.metric b{display:block;font-family:var(--f-serif);font-weight:400;font-size:clamp(34px,4.4vw,50px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.metric span{font-size:13px;color:var(--muted)}

/* ---------- QUOTES ---------- */
.quote{
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px 28px;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.quote p{font-family:var(--f-serif);font-size:20px;line-height:1.42;letter-spacing:-.01em;flex:1;margin-bottom:20px}
.quote footer b{display:block;font-family:var(--f-sans);font-size:14px;font-weight:600}
.quote footer span{font-size:12.5px;color:var(--muted)}

/* ---------- PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{padding:30px 26px 34px;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
@media(max-width:900px){.step:nth-child(2n){border-right:0}.step{border-bottom:1px solid var(--line)}}
@media(max-width:560px){.step{border-right:0}}
.step-no{font-family:var(--f-serif);font-size:44px;line-height:1;color:var(--line);display:block;margin-bottom:14px}
.step h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:9px}
.step p{font-size:14px;color:var(--ink-2);line-height:1.6}

/* ---------- CTA ---------- */
.cta{background:var(--ink);color:var(--cream);padding:clamp(70px,9vw,124px) 0;text-align:center}
.cta-in{display:flex;flex-direction:column;align-items:center}
.cta .lede{color:rgba(244,241,234,.62);text-align:center;margin-bottom:32px}
.cta .display{margin-bottom:22px}
.cta .display em{color:var(--accent-2)}
.cta-note{margin-top:22px;font-size:12.5px;color:rgba(244,241,234,.42)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:22px 40px 22px 0;position:relative;
  font-family:var(--f-serif);font-size:clamp(18px,2vw,23px);letter-spacing:-.01em;
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:8px;top:50%;
  width:10px;height:10px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--ease),border-color .2s;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg);border-color:var(--accent)}
.faq summary:hover{color:var(--accent)}
.faq details p{padding:0 40px 24px 0;font-size:15px;color:var(--ink-2);line-height:1.68;max-width:70ch}

/* ---------- FOOTER ---------- */
.foot{background:var(--bg-alt);border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 28px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}

.foot-brand p{font-size:13.5px;color:var(--ink-2);margin-top:12px;max-width:34ch;line-height:1.6}
.foot-loc{color:var(--muted)!important;font-size:12.5px!important}
.foot-col h4{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-col a{display:block;font-size:14px;color:var(--ink-2);padding:5px 0;transition:color .2s ease}
.foot-col a:hover{color:var(--accent)}
.foot-social{display:flex;gap:14px;margin-top:12px}
.foot-social a{font-size:13px}

.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.foot-status{display:inline-flex;align-items:center;gap:7px}

/* ---------- SCROLL REVEAL ---------- */
.rv{
  opacity:0;
  transform:translateY(34px) scale(.985);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.rv.in{opacity:1;transform:none}

/* ---------- SCROLL PARALLAX ----------
   Uses the independent `translate` and `rotate` properties rather than
   `transform`. That matters: .rv already owns `transform` for its reveal,
   and a second rule writing `transform` would clobber it. translate/rotate
   compose with transform instead of replacing it, so both systems run
   without fighting. */
.px{
  translate:0 var(--py,0px);
  rotate:var(--pr,0deg);
  will-change:translate;
}

@media (prefers-reduced-motion:reduce){
  .px{translate:none;rotate:none}
}

/* ==========================================================
   ORANGE ACCENT PASS
   The palette leaned too neutral — this pushes the accent through
   the type, rules and interactive states so it reads as the brand
   colour rather than an occasional highlight.
   ========================================================== */

/* section eyebrows carry a small orange rule */
.tag{position:relative;padding-left:26px}
.tag::before{
  content:'';position:absolute;left:0;top:50%;
  width:18px;height:2px;background:var(--accent);border-radius:2px;
  transform:translateY(-50%);
}
.tag-light::before{background:var(--accent-2)}

/* big stat numbers in the accent */
.stat b,.metric b{color:var(--accent)}
.step-no{
  background:linear-gradient(180deg,var(--accent-2),rgba(232,131,58,.25));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* cards warm up on hover instead of staying grey */
.card:hover{border-color:var(--accent-2);box-shadow:0 18px 44px rgba(194,94,27,.14)}
.quote:hover{border-color:var(--accent-2);box-shadow:0 18px 44px rgba(194,94,27,.12)}
.quote p::first-letter{color:var(--accent);font-size:1.5em;line-height:0}

/* process steps get an orange top rule as they arrive */
.step{overflow:hidden}
.step::before{
  content:'';position:absolute;left:0;top:-1px;height:2px;width:0;
  background:var(--accent);transition:width .7s var(--ease) .1s;
}
.step.in::before{width:100%}

/* nav underline + drawer accents */
.nav-links a::after{background:var(--accent)}
.nav.stuck{border-bottom-color:var(--accent-2)}

/* trust + eyebrow dots */
.eyebrow{border-color:rgba(194,94,27,.34);background:rgba(232,131,58,.08)}
.avatars span{border-color:var(--bg);background:rgba(232,131,58,.16);color:var(--accent)}

/* marquee diamonds already orange — make the band border match */
.band{border-block:1px solid rgba(232,131,58,.28)}

/* FAQ */
.faq details[open] summary{color:var(--accent)}
.faq details[open]{background:linear-gradient(90deg,rgba(232,131,58,.06),transparent 60%)}

/* footer */
.foot{border-top:2px solid var(--accent)}
.foot-col h4{color:var(--accent)}

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

/* focus ring already accent — thicken it slightly for visibility */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* scrollbar */
@supports (scrollbar-color: red blue){
  html{scrollbar-color:var(--accent) var(--bg-alt);scrollbar-width:thin}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .msg{opacity:1;transform:none}
}

/* ==========================================================
   WARM PHOTO GRADE
   Stock photography skews cool and blue, which fought the cream
   and orange. This pulls every image toward the same warm,
   low-contrast register so the page reads as one art direction.
   ========================================================== */
.ph img,
.studio-stage img{
  filter:sepia(.22) saturate(1.12) hue-rotate(-12deg) brightness(1.04) contrast(.98);
}
.ph::after{
  background:
    linear-gradient(180deg,rgba(232,131,58,.10) 0%,transparent 40%),
    linear-gradient(0deg,rgba(25,22,17,.34),transparent 55%);
}


/* ==========================================================
   EYEBROW — "(02)  HOW WE HELP"
   ========================================================== */
.tag{padding-left:0}
.tag::before{display:none}
.tag-sep{display:inline-block;width:14px}
.tag{letter-spacing:.18em}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* arrow links */
.arrow-link{
  display:inline-flex;align-items:center;gap:14px;
  font-size:15px;font-weight:600;margin-top:26px;
}
.arrow-link i{
  width:38px;height:38px;border-radius:50%;
  border:1px solid currentColor;
  display:grid;place-items:center;font-style:normal;font-size:14px;
  transition:transform .35s var(--ease),background .25s ease,color .25s ease;
}
.arrow-link:hover i{transform:translate(3px,-3px);background:var(--accent);border-color:var(--accent);color:var(--cream)}
.btn i{font-style:normal;font-size:13px}

/* ==========================================================
   THE STORY — dark full-bleed split
   ========================================================== */
.story{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--ink);color:var(--cream);
  align-items:stretch;
}
@media(max-width:900px){.story{grid-template-columns:1fr}}

.story-media{position:relative;overflow:hidden;min-height:clamp(280px,40vw,560px)}
.story-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  scale:1.16;
  filter:sepia(.3) saturate(1.15) hue-rotate(-14deg) brightness(.82) contrast(1.05);
}
.story-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(25,22,17,.9));
}
@media(max-width:900px){.story-media::after{background:linear-gradient(180deg,transparent 55%,rgba(25,22,17,.9))}}

.story-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(38px,6vw,84px) clamp(24px,5vw,72px);
  max-width:660px;
}
.story-copy .display-2{color:var(--cream);margin:0 0 20px}
.story-copy .display-2 em{color:#E9C08A;font-style:italic}
.story-copy p{color:rgba(244,241,234,.72);font-size:clamp(15px,1.5vw,17.5px);line-height:1.7}
.story-copy .arrow-link{color:var(--cream)}

/* ==========================================================
   USE CASES — isometric illustration cards
   ========================================================== */
.sec-cases{background:var(--bg)}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.cases-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cases-grid{grid-template-columns:1fr}}

.case{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s ease;
}
.case:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(194,94,27,.18);border-color:var(--accent-2)}

.case-art{
  position:relative;
  background:linear-gradient(160deg,#F6EDE0 0%,#EFE4D2 100%);
  padding:12px 10px 0;
  overflow:hidden;
}
.case-art::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(112deg,rgba(255,255,255,.55) 0 26px,transparent 26px 74px);
  opacity:.5;
}
.case-art svg{width:100%;height:auto;display:block;position:relative;z-index:1}

.c-shadow{fill:rgba(25,22,17,.10)}
.c-dark{fill:#2A231C}
.c-dark2{fill:#171310}
.c-lit{fill:#E9C08A}
.c-accent{fill:var(--accent-2)}
.c-seam{stroke:rgba(233,192,138,.5);stroke-width:1.4;fill:none}
.c-tick{stroke:var(--accent-2);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.c-wire{stroke:#2A231C;stroke-width:2.4;fill:none;stroke-linecap:round}
.c-paper rect{fill:#E9C08A}
.c-leaf{fill:#3A4A32}
.c-wave path{
  fill:none;stroke:var(--accent-2);stroke-width:2.6;stroke-linecap:round;
  opacity:.9;
}
.case:hover .c-wave path{animation:waveGo 1.1s ease-in-out infinite}
.case:hover .c-wave path:nth-child(2){animation-delay:.18s}
@keyframes waveGo{0%,100%{opacity:.35;transform:translateX(0)}50%{opacity:1;transform:translateX(5px)}}

.case-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;border-top:1px solid var(--line)}
.case-cat{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:9px;
}
.case-body h3{font-family:var(--f-serif);font-weight:400;font-size:23px;letter-spacing:-.015em;margin-bottom:14px;flex:1}
.case-go{font-size:13.5px;font-weight:600;color:var(--accent);display:inline-flex;gap:7px;align-items:center}
.case-go i{font-style:normal;transition:transform .3s var(--ease)}
.case:hover .case-go i{transform:translate(3px,-3px)}

/* ==========================================================
   PRICING — interactive slider
   ========================================================== */
.sec-pricing{background:var(--bg-alt)}
.price-card{
  background:var(--ink);color:var(--cream);
  border-radius:var(--r-lg);
  padding:clamp(28px,4vw,46px);
  box-shadow:var(--shadow-lg);
}
.price-card h3{font-family:var(--f-serif);font-weight:400;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin-bottom:10px}
.price-sub{font-size:14.5px;color:rgba(244,241,234,.62);line-height:1.6;max-width:60ch}

.price-headline{display:flex;align-items:baseline;gap:12px;margin-top:26px;flex-wrap:wrap}
.price-big{
  font-family:var(--f-serif);font-size:clamp(46px,7vw,76px);line-height:1;
  letter-spacing:-.03em;color:#E9C08A;font-variant-numeric:tabular-nums;
}
.price-unit{font-size:15px;color:rgba(244,241,234,.7)}
.price-save{margin-top:8px;font-size:14px;font-weight:600;color:var(--accent-2)}

.price-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0 30px}
@media(max-width:760px){.price-tiles{grid-template-columns:repeat(2,1fr)}}
.price-tile{
  background:rgba(244,241,234,.055);
  border:1px solid rgba(244,241,234,.13);
  border-radius:var(--r);padding:16px 18px;
}
.price-tile span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.5);margin-bottom:8px}
.price-tile b{font-family:var(--f-serif);font-weight:400;font-size:26px;font-variant-numeric:tabular-nums}
.price-tile-a{border-color:rgba(232,131,58,.5);background:rgba(232,131,58,.10)}
.price-tile-a b{color:var(--accent-2)}

.price-slider-wrap{display:block}
.price-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--accent-2) 0%,var(--accent-2) var(--fill,0%),rgba(244,241,234,.18) var(--fill,0%));
  outline:none;cursor:pointer;
}
.price-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:var(--accent-2);border:3px solid var(--ink);
  box-shadow:0 0 0 1px var(--accent-2);
  cursor:grab;transition:transform .2s var(--ease);
}
.price-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.18)}
.price-slider::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--accent-2);border:3px solid var(--ink);cursor:grab;
}
.price-slider:focus-visible{outline:2px solid var(--accent-2);outline-offset:6px}

.price-scale{display:flex;justify-content:space-between;margin-top:12px;font-size:11px;color:rgba(244,241,234,.42)}
.price-foot{margin-top:22px;font-size:13.5px;color:var(--muted)}

/* ==========================================================
   LEARN
   ========================================================== */
.learn-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,68px);align-items:center}
@media(max-width:900px){.learn-grid{grid-template-columns:1fr}}

.learn-list{margin:26px 0 8px}
.learn-list li{
  display:flex;align-items:center;gap:14px;
  padding:9px 0;font-size:15px;color:var(--ink-2);
}
.learn-list i{
  font-style:normal;font-size:12px;color:var(--accent);
  width:30px;height:30px;flex-shrink:0;border-radius:50%;
  background:rgba(232,131,58,.14);
  display:grid;place-items:center;
}

.learn-card{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--cream);
  border-radius:var(--r-lg);
  padding:clamp(28px,3.6vw,42px);
  box-shadow:var(--shadow-lg);
}
.learn-badge{
  width:52px;height:52px;border-radius:50%;
  background:#E9C08A;color:var(--ink);
  display:grid;place-items:center;font-size:22px;
  margin-bottom:22px;position:relative;z-index:1;
}
.learn-card h3{font-family:var(--f-serif);font-weight:400;font-size:clamp(26px,3vw,34px);margin-bottom:12px;position:relative;z-index:1}
.learn-card p{font-size:14.5px;line-height:1.65;color:rgba(244,241,234,.7);margin-bottom:26px;max-width:42ch;position:relative;z-index:1}
.btn-tan{background:#E9C08A;color:var(--ink);position:relative;z-index:1}
.btn-tan:hover{background:#F0CE9F}

.learn-blob{
  position:absolute;right:-40px;top:18%;
  width:190px;height:230px;
  background:radial-gradient(circle at 40% 30%,#5A3A1E,#2E1D0F 70%);
  border-radius:56% 44% 38% 62% / 48% 38% 62% 52%;
  filter:blur(2px);opacity:.85;
  animation:blobMove 14s ease-in-out infinite;
}
@keyframes blobMove{
  0%,100%{border-radius:56% 44% 38% 62% / 48% 38% 62% 52%;transform:translateY(0) rotate(0deg)}
  50%{border-radius:42% 58% 60% 40% / 56% 52% 48% 44%;transform:translateY(-16px) rotate(8deg)}
}

/* ==========================================================
   NEXT STEP
   ========================================================== */
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,68px);align-items:center}
@media(max-width:900px){.next-grid{grid-template-columns:1fr}}
.next-copy .btn{margin-top:8px}
.next-media{
  margin:0;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);
  height:clamp(260px,32vw,400px);
  box-shadow:var(--shadow-lg);
}
.next-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  scale:1.16;
  filter:sepia(.22) saturate(1.12) hue-rotate(-12deg) brightness(1.04) contrast(.98);
  transition:scale 1s var(--ease);
}
.next-media:hover img{scale:1.22}

@media (prefers-reduced-motion:reduce){
  .learn-blob{animation:none}
  .case:hover .c-wave path{animation:none}
}


/* ==========================================================
   WORDMARK
   No icon — the name is the mark. Roman "Lets…Pro" with the
   verb set in italic accent, so "Grow" carries the emphasis.
   ========================================================== */
.logo{gap:0}

.logo-text{
  font-family:var(--f-serif);
  font-size:26px;
  line-height:1;
  letter-spacing:-.015em;
  color:var(--ink);
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
}

.logo-text em{
  font-style:italic;
  color:var(--accent);
  /* italics of this face sit a touch tight against the roman */
  padding:0 .045em;
  transition:color .3s ease;
}

.logo-text sup{
  font-family:var(--f-sans);
  font-size:8px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--muted);
  align-self:flex-start;
  margin-left:.14em;
  margin-top:.16em;
}

/* a quiet rule that draws itself under the mark on hover */
.logo{position:relative}
.logo::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-5px;
  height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.logo:hover::after{transform:scaleX(1)}
.logo:hover .logo-text em{color:var(--accent-2)}

/* dark grounds */
.foot .logo-text,
.loader-name{color:var(--ink)}
.foot .logo-text{color:var(--ink)}
.loader-name{color:var(--cream)}
.loader-name em{font-style:italic;color:var(--accent-2)}
.loader-name sup{color:rgba(244,241,234,.5)}

@media(max-width:520px){
  .logo-text{font-size:22px}
}


/* ==========================================================
   TYPE SCALE — everything up a step
   The page read as thin and empty because the body copy sat at
   16px against very large headings. Raising the base and the
   supporting sizes closes that gap and fills the columns.
   ========================================================== */
body{font-size:17.5px;line-height:1.62}

.display{
  font-size:clamp(50px,9vw,116px);
  line-height:.94;
  letter-spacing:-.03em;
}
.display-2{font-size:clamp(36px,5.4vw,68px);line-height:1.02}

.lede{font-size:clamp(17px,1.7vw,21px);line-height:1.6}
.sec-lede{font-size:clamp(16px,1.6vw,19.5px)}
.tag{font-size:12px;letter-spacing:.2em}

.card p,.work-body p,.quote footer b{font-size:15.5px}
.card h3{font-size:28px}
.work-body h3,.case-body h3{font-size:26px}
.quote p{font-size:22px}
.step p,.visual-card-body p{font-size:15.5px}
.step h3{font-size:20px}
.ticks li,.learn-list li{font-size:16px}
.svc h3{font-size:clamp(23px,2.6vw,32px)}
.svc p{font-size:15.5px}
.faq summary{font-size:clamp(19px,2.1vw,26px)}
.faq details p{font-size:16.5px}
.foot-col a{font-size:15px}
.metric span,.stat span{font-size:13.5px}
.btn{font-size:15.5px}
.nav-links a{font-size:14.5px}
.price-sub{font-size:15.5px}
.price-tile b{font-size:29px}
.story-copy p{font-size:clamp(16px,1.6vw,19px)}

/* ==========================================================
   HERO — left-aligned editorial layout
   ========================================================== */
.hero{padding:clamp(64px,8vw,116px) 0 clamp(48px,6vw,76px)}
.hero-in{text-align:left;align-items:stretch}

.hero-eyebrow{
  display:block;
  font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:clamp(22px,3vw,34px);
}
.hero-eyebrow em{font-style:normal;color:var(--accent)}

.hero .display{
  margin:0 0 clamp(26px,3.4vw,40px);
  max-width:none;
}
.hero .display em{display:block}

/* trust badges row */
.hero-badges{
  display:flex;align-items:center;gap:20px;
  flex-wrap:wrap;
  font-size:15px;color:var(--ink-2);
  margin-bottom:clamp(24px,3vw,34px);
}
.badge-item{display:inline-flex;align-items:center;gap:9px}
.badge-item b{font-weight:600;color:var(--ink)}
.badge-div{width:1px;height:20px;background:var(--line)}
.stars-box{
  background:#2FA84F;color:#fff;
  padding:3px 8px;border-radius:4px;
  font-size:12px;letter-spacing:.12em;line-height:1.35;
}
.badge-star{color:var(--accent);font-style:normal;font-size:15px}
.badge-check{color:#2FA84F;font-style:normal;font-weight:700}

.hero-rule{
  border:0;border-top:1px solid var(--line);
  margin:0 0 clamp(26px,3.4vw,38px);
}

/* paragraph left, buttons right */
.hero-lower{
  display:grid;grid-template-columns:1fr auto;
  gap:28px;align-items:center;
  margin-bottom:clamp(34px,4.4vw,52px);
}
@media(max-width:860px){
  .hero-lower{grid-template-columns:1fr;align-items:start}
}
.hero-blurb{
  font-size:clamp(16.5px,1.7vw,20px);
  line-height:1.6;color:var(--ink-2);
  max-width:46ch;margin:0;
}
.hero-actions{justify-content:flex-start;margin:0;gap:12px}

/* little equaliser glyph on the secondary button */
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px;margin-right:9px}
.eq b{width:3px;background:var(--accent);border-radius:1px;animation:eqBar .9s ease-in-out infinite}
.eq b:nth-child(1){height:60%}
.eq b:nth-child(2){height:100%;animation-delay:.15s}
.eq b:nth-child(3){height:45%;animation-delay:.3s}
@keyframes eqBar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}

/* stats bar */
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.42);
  overflow:hidden;
}
@media(max-width:900px){.hero-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.hero-stats{grid-template-columns:1fr}}

.hstat{
  padding:clamp(20px,2.4vw,30px) clamp(18px,2vw,28px);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;
}
.hstat:last-child{border-right:0}
@media(max-width:900px){
  .hstat:nth-child(2n){border-right:0}
  .hstat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:480px){
  .hstat{border-right:0;border-bottom:1px solid var(--line)}
  .hstat:last-child{border-bottom:0}
}
.hstat span{
  font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);line-height:1.45;
}
.hstat b{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(38px,4.6vw,60px);line-height:1;
  letter-spacing:-.025em;color:var(--ink);
  font-variant-numeric:tabular-nums;
  margin-top:auto;
}

.hero-disclaimer{
  margin-top:16px;
  font-size:12.5px;color:var(--muted);
}

/* the sim panel now sits under the stats bar */
.hero-panel{margin-top:clamp(34px,4.4vw,54px);text-align:left}

@media (prefers-reduced-motion:reduce){
  .eq b{animation:none}
}


/* ==========================================================
   FILLING THE TEXT-ONLY SECTIONS
   ========================================================== */

/* shared line-icon treatment */
.card-ico svg,.step-ico svg,.faq-aside-ico svg{
  width:100%;height:100%;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

.card-ico,.step-ico{
  width:46px;height:46px;border-radius:13px;
  display:grid;place-items:center;
  padding:11px;margin-bottom:18px;
  background:rgba(232,131,58,.13);
  color:var(--accent);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.card:hover .card-ico,.step:hover .step-ico{
  background:var(--accent);color:var(--cream);transform:translateY(-3px) rotate(-4deg);
}

/* ---------- ABOUT ---------- */
.about-split{display:grid;grid-template-columns:1fr .92fr;gap:clamp(30px,4.5vw,64px);align-items:center}
@media(max-width:900px){.about-split{grid-template-columns:1fr;gap:36px}}
.about-body{display:block}
.about-body p+p{margin-top:16px}

.about-creds{
  display:flex;gap:30px;flex-wrap:wrap;
  margin-top:30px;padding-top:24px;
  border-top:1px solid var(--line);
}
.about-creds li{display:flex;flex-direction:column;gap:3px}
.about-creds b{
  font-family:var(--f-serif);font-weight:400;
  font-size:38px;line-height:1;color:var(--accent);
}
.about-creds span{font-size:12.5px;color:var(--muted)}

.about-chart{
  margin:0;position:relative;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 22px 12px;
  box-shadow:var(--shadow);
}
.about-chart figcaption{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin-bottom:10px;
}
.chart-lab{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chart-val{font-family:var(--f-serif);font-weight:400;font-size:34px;line-height:1;color:var(--accent)}
.about-chart svg{width:100%;height:auto;display:block;overflow:visible}

.ch-grid line{stroke:var(--line-soft);stroke-width:1}
.ch-line{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:420;stroke-dashoffset:420;}
.about-chart.in .ch-line{animation:chDraw 1.6s var(--ease) .15s forwards}
@keyframes chDraw{to{stroke-dashoffset:0}}
.ch-area{opacity:0}
.about-chart.in .ch-area{animation:chFade .8s ease 1.1s forwards}
@keyframes chFade{to{opacity:1}}
.ch-dots circle{fill:var(--accent);opacity:0}
.about-chart.in .ch-dots circle{animation:chFade .4s ease 1.3s forwards}
.ch-dot-live{fill:var(--accent-2)!important}
.about-chart.in .ch-dot-live{animation:chFade .4s ease 1.4s forwards,chPulse 2.2s ease-in-out 1.8s infinite}
@keyframes chPulse{0%,100%{r:4.6}50%{r:6.4}}
.ch-mark{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.ch-note{font-family:var(--f-sans);font-size:9.5px;fill:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* ---------- PROCESS ---------- */
.step{display:flex;flex-direction:column}
.step-no{font-size:30px;margin-bottom:10px;order:-1}
.step-ico{margin-bottom:14px}

/* ---------- TESTIMONIALS ---------- */
.q-stars{display:block;color:var(--accent);font-size:14px;letter-spacing:.14em;margin-bottom:14px}
.quote footer{display:flex;align-items:center;gap:13px}
.q-av{
  width:44px;height:44px;flex-shrink:0;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(232,131,58,.16);color:var(--accent);
  font-size:13px;font-weight:700;letter-spacing:.04em;
  border:1px solid rgba(232,131,58,.32);
}
.q-who{display:flex;flex-direction:column}

/* ---------- FAQ ---------- */
.faq-wrap{
  display:grid;grid-template-columns:1fr 330px;
  gap:clamp(30px,4vw,58px);
  align-items:start;
  max-width:var(--wrap);
}
.faq-wrap .sec-head{grid-column:1/-1}
@media(max-width:900px){
  .faq-wrap{grid-template-columns:1fr}
}

.faq-aside{
  position:sticky;top:96px;
  background:var(--ink);color:var(--cream);
  border-radius:var(--r-lg);
  padding:30px 28px;
  box-shadow:var(--shadow-lg);
}
@media(max-width:900px){.faq-aside{position:static}}
.faq-aside-ico{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;padding:11px;
  background:rgba(232,131,58,.18);color:var(--accent-2);
  margin-bottom:18px;
}
.faq-aside h3{font-family:var(--f-serif);font-weight:400;font-size:27px;margin-bottom:10px}
.faq-aside p{font-size:15px;line-height:1.6;color:rgba(244,241,234,.68);margin-bottom:22px}
.faq-aside .btn{width:100%}
.faq-aside-mail{display:block;margin-top:14px;font-size:13px;color:rgba(244,241,234,.5);text-align:center}
.faq-aside-mail a{color:var(--accent-2)}
.faq-aside-mail a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .about-chart.in .ch-line,.about-chart.in .ch-area,
  .about-chart.in .ch-dots circle{animation:none;stroke-dashoffset:0;opacity:1}
}


/* ---------- SERVICE ICONS ---------- */
.svc-ico{
  width:42px;height:42px;flex-shrink:0;
  border-radius:12px;padding:10px;
  display:grid;place-items:center;
  background:rgba(244,241,234,.07);
  border:1px solid rgba(244,241,234,.14);
  color:var(--accent-2);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.svc-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.svc:hover .svc-ico{background:var(--accent-2);color:var(--ink);transform:rotate(-5deg) scale(1.06)}

/* the rail cards stack icon -> number -> title */
@media(min-width:861px){
  .svc-rail .svc{gap:12px}
  .svc-rail .svc-ico{margin-bottom:2px}
}
@media(max-width:860px){
  .svc{grid-template-columns:42px 1fr 34px;gap:14px}
  .svc-no{display:none}
}

/* ---------- CTA VISUALS ---------- */
.cta{position:relative;overflow:hidden}
.cta-rings{
  position:absolute;left:50%;bottom:-42%;
  width:min(1100px,140%);transform:translateX(-50%);
  pointer-events:none;opacity:.5;
}
.cta-rings svg{width:100%;height:auto;display:block;overflow:visible}
.cta-arc circle{
  fill:none;stroke:var(--accent-2);stroke-width:1;opacity:.28;
  transform-origin:300px 300px;
  animation:ctaPulse 6s ease-in-out infinite;
}
.cta-arc circle:nth-child(2){animation-delay:.7s}
.cta-arc circle:nth-child(3){animation-delay:1.4s}
.cta-arc circle:nth-child(4){animation-delay:2.1s}
@keyframes ctaPulse{
  0%,100%{transform:scale(1);opacity:.14}
  50%{transform:scale(1.06);opacity:.42}
}
.cta-in{position:relative;z-index:1}

.cta-strip{
  display:flex;gap:34px;flex-wrap:wrap;justify-content:center;
  margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(244,241,234,.18);
  width:100%;max-width:720px;
}
.cta-strip span{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:rgba(244,241,234,.55)}
.cta-strip b{font-family:var(--f-serif);font-weight:400;font-size:32px;line-height:1;color:var(--accent-2)}

@media (prefers-reduced-motion:reduce){.cta-arc circle{animation:none}}

/* ==========================================================
   HERO EYEBROW
   Plain text, no container. Grey index, grey lead-in, accent
   on the phrase that carries the promise.
   ========================================================== */
.hero-eyebrow{
  /* NOT flex: flex would make the text node and the <em> separate items
     and collapse the whitespace between them (CAPTUREEVERY). */
  display:block;
  font-family:var(--f-sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:clamp(26px,3.4vw,40px);
  align-self:flex-start;
}
.eb-no{color:var(--muted)}
.eb-sep{display:inline-block;width:18px}
.hero-eyebrow em{
  font-style:normal;
  color:var(--accent);
  margin-left:.96em;
}

/* The line is long, and wide tracking makes it longer. Below this width
   it would wrap at an arbitrary word, so break it deliberately instead:
   the accent phrase drops onto its own line. */
@media(max-width:760px){
  .hero-eyebrow em{
    display:block;
    margin-left:0;
    margin-top:7px;
  }
}

@media(max-width:600px){
  .hero-eyebrow{font-size:11px;letter-spacing:.18em}
  .eb-sep{width:10px}
}


/* content sits above any decorative layer */
.sec,.hero{position:relative}
.sec > .wrap,.hero > .wrap{position:relative;z-index:1}


/* ==========================================================
   SCROLL VELOCITY SKEW
   Cards lean into the direction of travel and settle when you
   stop. --sk is written every frame from scroll velocity.
   ========================================================== */
.skew{
  transform:skewY(var(--sk,0deg));
  transform-origin:center center;
  will-change:transform;
}

/* ==========================================================
   MAGNETIC BUTTONS
   ========================================================== */
.mag{
  will-change:transform;
  /* JS writes --mx/--my; the translate property composes with any
     transform the element already carries. */
  translate:var(--mx,0px) var(--my,0px);
}
.mag > *{
  display:inline-block;
  translate:calc(var(--mx,0px) * .35) calc(var(--my,0px) * .35);
}

/* ==========================================================
   SPINNING CORNER BADGE
   ========================================================== */
.spin-badge{
  position:fixed;
  right:clamp(16px,2.4vw,32px);
  bottom:clamp(16px,2.4vw,32px);
  width:clamp(88px,9vw,116px);
  aspect-ratio:1;
  z-index:90;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 14px 40px rgba(25,22,17,.32);
  opacity:0;transform:scale(.6);
  transition:opacity .5s var(--ease),transform .5s var(--ease),background .3s ease;
  pointer-events:none;
}
.spin-badge[data-show="true"]{opacity:1;transform:scale(1);pointer-events:auto}
.spin-badge:hover{background:var(--accent)}

.spin-badge svg{
  position:absolute;inset:0;width:100%;height:100%;
  /* --spin is driven by scroll position, so the ring winds with you */
  rotate:var(--spin,0deg);
}
.spin-text{
  font-family:var(--f-sans);
  font-size:11.5px;font-weight:600;
  letter-spacing:.14em;
  fill:var(--cream);
}
.spin-core{
  position:relative;
  font-size:19px;color:var(--accent-2);
  transition:transform .35s var(--ease),color .3s ease;
}
.spin-badge:hover .spin-core{transform:translate(3px,-3px);color:var(--cream)}

@media(max-width:640px){
  .spin-badge{width:74px;right:12px;bottom:12px}
  .spin-text{font-size:9.5px;letter-spacing:.1em}
}

@media (prefers-reduced-motion:reduce){
  .skew{transform:none}
  .mag,.mag > *{translate:none}
  .spin-badge svg{rotate:0deg}
}

/* If the frame loop never runs, fall back to a plain CSS drift so the
   band is not a frozen wall of text. JS adds .js-marquee to take over. */
.marquee-track:not(.js-marquee){animation:slide 38s linear infinite}
@media (prefers-reduced-motion:reduce){
  .marquee-track:not(.js-marquee){animation:none}
}