/* ===================== hero ===================== */
#s-hero{position:relative;}
#s-hero .hero-grid{display:grid;grid-template-columns:1.25fr 0.8fr;gap:clamp(28px,5vw,72px);align-items:center;}
#s-hero .hero-h1{font-size:clamp(38px,6.1vw,90px);line-height:0.9;}
#s-hero .hero-line{display:block;}
#s-hero .hero-plus{font-size:0.92em;}
#s-hero .hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:38px;}
#s-hero .hero-studio{position:relative;background:var(--ink-soft);border:2px solid var(--ink);min-height:clamp(440px,52vh,560px);display:flex;align-items:center;justify-content:center;overflow:hidden;}
#s-hero .hero-studio .gridlines{background-image:linear-gradient(rgba(244,240,230,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(244,240,230,0.06) 1px,transparent 1px);background-size:48px 48px;}
#s-hero .hero-studio-tag{position:absolute;top:16px;left:16px;color:var(--bone);border:2px solid rgba(244,240,230,0.4);padding:6px 10px;z-index:3;}
#s-hero .hero-phone{position:relative;width:clamp(212px,21vw,272px);aspect-ratio:9/19.5;background:#0d0d12;border:3px solid var(--ink);border-radius:38px;padding:8px;box-shadow:18px 18px 0 var(--orange);z-index:2;}
#s-hero .hero-phone img{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:30px;}
#s-hero .hero-phone-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:92px;height:22px;background:#050507;border-radius:14px;z-index:5;}
#s-hero .hero-telemetry{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(46px,8vh,86px);padding-top:20px;border-top:2px solid var(--ink);}
#s-hero .hero-tel{display:flex;flex-direction:column;gap:4px;}
#s-hero .hero-tel b{font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-0.02em;line-height:1;}
#s-hero .hero-tel span{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);}
@media (max-width:880px){
  #s-hero .hero-grid{grid-template-columns:1fr;}
  #s-hero .hero-studio{order:2;min-height:420px;}
  #s-hero .hero-telemetry{gap:18px 24px;}
  #s-hero .hero-tel{flex:1 1 40%;}
}

/* ===================== proof ===================== */
#s-proof{background:var(--bone-2);position:relative;overflow:hidden}

/* faint architectural rail in the right margin — parallax telemetry feel.
   reads --rail-shift (driven from JS) so the scrub actually moves it. */
#s-proof::before{
  content:"";position:absolute;top:-8%;bottom:-8%;right:0;width:38vw;max-width:520px;
  background-image:repeating-linear-gradient(to right,transparent 0,transparent 63px,rgba(10,10,10,.05) 63px,rgba(10,10,10,.05) 64px);
  transform:translate3d(0,var(--rail-shift,0px),0);
  will-change:transform;pointer-events:none;z-index:0;
}
#s-proof::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--orange);
  transform:scaleX(var(--edge-grow,0));transform-origin:left center;z-index:2;
}
#s-proof>.wrap{position:relative;z-index:1}

/* ---- header ---- */
#s-proof .proof-head{max-width:18ch;margin-bottom:clamp(2.4rem,5.5vw,4rem)}
#s-proof .proof-crumb{display:inline-block;color:var(--orange-deep)}
#s-proof .proof-head__title{margin:.7rem 0 .6rem;line-height:.94;max-width:14ch}
#s-proof .proof-head__before{margin-left:-.12em}
#s-proof .proof-head__sub{color:var(--ink-mute)}

/* ---- counter wall: broken 4-up ---- */
#s-proof .proof-wallwrap{position:relative}
/* the ledger sweep — a thin orange line that travels across the wall and
   visually drives the count sequence. height set in JS to the wall's box. */
#s-proof .proof-sweep{
  position:absolute;top:-1.4rem;left:0;width:2px;height:0;
  background:linear-gradient(to bottom,transparent,var(--orange) 12%,var(--orange) 88%,transparent);
  transform:translateX(-4px);opacity:0;
  pointer-events:none;z-index:3;
}
#s-proof .proof-sweep::after{
  content:"";position:absolute;top:0;left:-1px;width:4px;height:18px;
  background:var(--orange);
}

#s-proof .proof-wall{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.1rem,3vw,2.4rem);
  align-items:start;
  border-top:2px solid var(--ink);
  padding-top:clamp(2rem,4vw,3rem);
}
#s-proof .proof-cell{position:relative;display:flex;flex-direction:column;gap:.45rem;min-width:0}
/* alternating vertical offsets — break the tidy-grid rhythm */
#s-proof .proof-cell--a{transform:translateY(0)}
#s-proof .proof-cell--b{transform:translateY(2.6rem)}
#s-proof .proof-cell--c{transform:translateY(.9rem)}
#s-proof .proof-cell--d{transform:translateY(3.4rem)}

/* ledger index — small mono number leading each cell */
#s-proof .proof-idx{
  display:block;color:var(--ink-mute);font-size:.6rem;letter-spacing:.22em;
  opacity:.55;margin-bottom:.1rem;
}
#s-proof .proof-idx--inv{color:var(--ink-mute)}

#s-proof .proof-num{
  display:block;
  font-size:clamp(3.1rem,7.4vw,6.4rem);
  line-height:.8;color:var(--ink);
  font-style:italic;font-weight:400;
  letter-spacing:-.012em;
  font-variant-numeric:tabular-nums;
  -webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";
}
#s-proof .proof-label{
  display:block;color:var(--ink-mute);
  max-width:13ch;line-height:1.25;position:relative;
}
/* hover-draw underline on the label */
#s-proof .proof-label::after{
  content:"";position:absolute;left:0;bottom:-.3rem;width:100%;height:1px;
  background:var(--orange);transform:scaleX(0);transform-origin:left center;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}

/* small tick mark under the first three cells (architectural notch) */
#s-proof .proof-tick{
  position:absolute;left:0;top:-.7rem;width:26px;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left center;
}

/* "powered off" ghost state — JS lights cells as the sweep passes.
   default (no-JS / reduced) stays fully on. */
#s-proof.is-armed .proof-cell{opacity:.16}
#s-proof .proof-cell.is-lit{opacity:1}

/* hover lift — only on real cells */
#s-proof .proof-cell{transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){
  #s-proof .proof-cell--a:hover{transform:translateY(-6px)}
  #s-proof .proof-cell--b:hover{transform:translateY(calc(2.6rem - 6px))}
  #s-proof .proof-cell--c:hover{transform:translateY(calc(.9rem - 6px))}
  #s-proof .proof-cell:hover .proof-label::after{transform:scaleX(1)}
}

/* the £205K spike — carries the hard orange offset to break rhythm */
#s-proof .proof-spike{
  display:flex;flex-direction:column;gap:.5rem;
  background:var(--bone);border:2px solid var(--ink);
  padding:1.15rem 1.25rem 1.35rem;
  will-change:transform;
}
#s-proof .proof-spike .proof-num{color:var(--orange-deep)}
#s-proof .proof-spike .proof-label{max-width:14ch}
#s-proof .proof-spike .proof-label::after{background:var(--orange-deep)}
@media (hover:hover){
  #s-proof .proof-cell--d:hover .proof-label::after{transform:scaleX(1)}
}

/* ---- pull-line ---- */
#s-proof .proof-pull{
  position:relative;
  margin-top:clamp(4.8rem,9vw,7rem);
  display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(1.4rem,4vw,3.2rem);
  padding:clamp(1.8rem,4.4vw,2.8rem) clamp(1.6rem,4vw,3rem);
  flex-wrap:wrap;
}
#s-proof .proof-pull__stamp{
  position:absolute;top:.9rem;left:1.1rem;color:var(--ink-mute);
  font-size:.56rem;letter-spacing:.26em;opacity:.5;
}
#s-proof .proof-pull__face{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.75rem;
  order:1;
}
#s-proof .proof-pull__frame{
  display:block;border:2px solid var(--ink);
  box-shadow:10px 10px 0 var(--orange);
  background:var(--bone-3);
  will-change:transform;
  transition:box-shadow .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);
}
#s-proof .proof-pull__img{
  width:clamp(86px,12vw,120px);height:clamp(86px,12vw,120px);
  object-fit:cover;display:block;
}
@media (hover:hover){
  #s-proof .proof-pull__frame:hover{box-shadow:14px 14px 0 var(--orange-deep);transform:translate(-2px,-2px)}
}
#s-proof .proof-pull__cap{color:var(--ink-mute);text-align:center;font-size:.6rem;letter-spacing:.2em;max-width:16ch;line-height:1.45}

#s-proof .proof-pull__quote{margin:0;flex:1 1 360px;min-width:0;order:2}
#s-proof .proof-pull__line{
  margin:0;text-align:right;color:var(--ink);
  font-size:clamp(1.55rem,3.4vw,2.6rem);
  line-height:1.14;font-weight:500;letter-spacing:-.014em;
  text-wrap:balance;
}
#s-proof .proof-pull__pre{color:var(--ink-soft)}
#s-proof .proof-pull__big{
  font-style:italic;font-weight:400;color:var(--orange-deep);
  font-size:1.22em;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  -webkit-font-feature-settings:"tnum";font-feature-settings:"tnum";
  padding:0 .04em;display:inline-block;
}
#s-proof .proof-pull__cpl{font-size:1.06em;white-space:nowrap}

/* ---- responsive ---- */
@media (max-width:860px){
  #s-proof .proof-wall{grid-template-columns:repeat(2,1fr);gap:2.4rem 1.6rem;row-gap:2.8rem}
  #s-proof .proof-cell--a,#s-proof .proof-cell--b,#s-proof .proof-cell--c,#s-proof .proof-cell--d{transform:translateY(0)}
  #s-proof .proof-cell--b,#s-proof .proof-cell--d{transform:translateY(1.4rem)}
  #s-proof .proof-cell--b:hover,#s-proof .proof-cell--d:hover{transform:translateY(calc(1.4rem - 6px))}
  #s-proof .proof-cell--a:hover,#s-proof .proof-cell--c:hover{transform:translateY(-6px)}
  #s-proof .proof-sweep{display:none}
  #s-proof.is-armed .proof-cell{opacity:1} /* no sweep on tablet — keep lit */
}
@media (max-width:560px){
  #s-proof::before{width:64vw}
  #s-proof .proof-head{max-width:none}
  #s-proof .proof-wall{grid-template-columns:1fr;gap:0;row-gap:2.4rem;padding-top:2rem}
  #s-proof .proof-cell,#s-proof .proof-cell--b,#s-proof .proof-cell--d{transform:translateY(0)}
  #s-proof .proof-num{font-size:clamp(3.4rem,18vw,5rem)}
  #s-proof .proof-label{max-width:none}
  #s-proof .proof-spike{align-self:flex-start;width:100%}
  #s-proof .proof-pull{justify-content:center;flex-direction:column;text-align:center}
  #s-proof .proof-pull__stamp{display:none}
  #s-proof .proof-pull__face{order:1}
  #s-proof .proof-pull__quote{order:2;flex-basis:auto;width:100%}
  #s-proof .proof-pull__line{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  #s-proof .proof-cell--a,#s-proof .proof-cell--b,#s-proof .proof-cell--c,#s-proof .proof-cell--d{transform:none}
  #s-proof.is-armed .proof-cell{opacity:1}
  #s-proof .proof-tick{transform:scaleX(1)}
  #s-proof .proof-sweep{display:none}
  #s-proof::before{transform:none}
  #s-proof::after{transform:scaleX(1)}
}

/* ===================== member-app ===================== */
#s-member-app{position:relative;overflow:hidden}
#s-member-app .ma-pin{position:relative}
#s-member-app .ma-head{padding-bottom:clamp(28px,5vw,56px)}
#s-member-app .ma-crumb{display:inline-block;color:var(--orange);margin-bottom:18px}
#s-member-app .ma-head__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,56px);align-items:end}
#s-member-app .ma-title{margin:0;line-height:.9}
#s-member-app .ma-head__right{display:flex;flex-direction:column;gap:18px}
#s-member-app .ma-head__right .body{margin:0}
#s-member-app .ma-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}

/* ---------- ANIMATED STAGE (hidden until JS opts desktop+motion in) ---------- */
#s-member-app .ma-stage{display:none}
#s-member-app.is-animated .ma-stage{display:block}
#s-member-app.is-animated .ma-strip{display:none}
#s-member-app .ma-stage__grid{
  display:grid;grid-template-columns:minmax(150px,200px) minmax(300px,1fr) minmax(180px,280px);
  align-items:center;min-height:100vh;gap:clamp(16px,2vw,32px)}

/* ===== LEFT RAIL — oversized scrub index + progress rail ===== */
#s-member-app .ma-rail{
  grid-column:1;justify-self:end;align-self:center;
  display:flex;align-items:stretch;gap:14px;padding-bottom:6px}
#s-member-app .ma-rail__counter{position:relative;display:flex;align-items:flex-start;line-height:.82}
#s-member-app .ma-rail__nums{position:relative;display:block;width:1.7em;height:.82em;
  font-size:clamp(64px,7vw,108px)}
#s-member-app .ma-rail__n{
  position:absolute;top:0;right:0;color:var(--ink);
  font-size:1em;line-height:.82;letter-spacing:-.02em;will-change:transform,opacity}
#s-member-app .ma-rail__total{
  font-size:clamp(22px,2.4vw,34px);color:var(--ink-mute);margin-top:.5em;margin-left:-.1em}
/* vertical progress rail */
#s-member-app .ma-rail__track{
  position:relative;width:3px;align-self:stretch;min-height:200px;background:var(--bone-3)}
#s-member-app .ma-rail__fill{
  position:absolute;left:0;top:0;width:100%;height:100%;background:var(--orange);
  transform:scaleY(0);transform-origin:top center;will-change:transform}
#s-member-app .ma-rail__tick{
  position:absolute;left:50%;width:13px;height:2px;background:var(--ink);
  transform:translate(-50%,-50%);opacity:.32;will-change:transform,opacity}
#s-member-app .ma-rail__tick[data-i="0"]{top:0}
#s-member-app .ma-rail__tick[data-i="1"]{top:25%}
#s-member-app .ma-rail__tick[data-i="2"]{top:50%}
#s-member-app .ma-rail__tick[data-i="3"]{top:75%}
#s-member-app .ma-rail__tick[data-i="4"]{top:100%}
#s-member-app .ma-rail__pct{
  writing-mode:vertical-rl;transform:rotate(180deg);color:var(--ink-mute);
  align-self:center;letter-spacing:.22em}
#s-member-app .ma-rail__pct-n{font-variant-numeric:tabular-nums}

/* ===== CENTRE — pinned phone ===== */
#s-member-app .ma-phone-col{grid-column:2;justify-self:center;position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
#s-member-app .ma-phone__sig{
  position:absolute;top:-34px;left:50%;transform:translateX(-50%);
  color:var(--ink-mute);letter-spacing:.28em;white-space:nowrap;opacity:.7}
#s-member-app .ma-phone-wobble{position:relative;will-change:transform}

/* phone frame — fixed ratio, never resized; only transform/opacity animate */
#s-member-app .ma-phone{
  position:relative;width:min(272px,66vw);aspect-ratio:.4621;
  background:var(--ink);border:2px solid var(--ink);
  padding:9px;will-change:transform,opacity}
#s-member-app .ma-phone__btn{position:absolute;background:var(--ink);width:2px}
#s-member-app .ma-phone__btn--vol{left:-4px;top:23%;height:9%;box-shadow:0 16px 0 var(--ink)}
#s-member-app .ma-phone__btn--pwr{right:-4px;top:28%;height:13%}
#s-member-app .ma-phone__notch{
  position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:32%;height:9px;background:var(--ink);border-radius:0 0 9px 9px;z-index:4}
#s-member-app .ma-phone__screens{position:relative;width:100%;height:100%;overflow:hidden;background:#000;z-index:1}
#s-member-app .ma-screen{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:opacity,transform;backface-visibility:hidden;transform:translateZ(0)}
/* moving diagonal glare — decorative, transform-only loop is allowed */
#s-member-app .ma-phone__glare{
  position:absolute;inset:9px;z-index:5;pointer-events:none;overflow:hidden;mix-blend-mode:screen;opacity:.5}
#s-member-app .ma-phone__glare::before{
  content:"";position:absolute;top:-60%;left:-30%;width:50%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transform:rotate(14deg) translateX(-60%);will-change:transform}
#s-member-app.is-animated .ma-phone__glare::before{animation:ma-glare 6.5s ease-in-out infinite}
@keyframes ma-glare{
  0%{transform:rotate(14deg) translateX(-60%)}
  55%{transform:rotate(14deg) translateX(520%)}
  100%{transform:rotate(14deg) translateX(520%)}
}

/* callout overlay */
#s-member-app .ma-callouts{position:absolute;inset:9px;pointer-events:none;z-index:6}
#s-member-app .ma-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#s-member-app .ma-line__draw{
  stroke:var(--orange);stroke-width:1.6;vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round}
/* dots default invisible so a static scrub frame can never strand a stray dot;
   GSAP autoAlpha reveals only the active group's dot. */
#s-member-app .ma-line__dot{fill:var(--orange);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;
  opacity:0;transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
#s-member-app .ma-callouts__group{position:absolute;inset:0;opacity:0}
#s-member-app.is-animated .ma-callouts__group{opacity:1}
#s-member-app .ma-tag{
  position:absolute;background:var(--orange);color:#fff;
  font-size:9px;letter-spacing:.1em;line-height:1.25;
  padding:5px 7px;border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);opacity:0;will-change:transform,opacity}
/* tags live just outside the screen in the gutter; the connector bridges the gap.
   max-width lets the longer labels wrap to 2 lines so they never reach the rail. */
#s-member-app .ma-tag--right{left:100%;margin-left:8px;transform-origin:left center;
  text-align:left;max-width:140px}
#s-member-app .ma-tag--left{right:100%;margin-right:8px;transform-origin:right center;
  text-align:right;max-width:118px}

/* fan — held collage on exit, sits over the phone column */
#s-member-app .ma-fan{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:7}
#s-member-app .ma-fan__item{
  position:absolute;width:min(190px,46vw);aspect-ratio:.4621;object-fit:cover;
  border:2px solid var(--ink);box-shadow:8px 8px 0 var(--orange);
  background:#000;will-change:transform,opacity}

/* ===== RIGHT — sticky label + supporting line ===== */
#s-member-app .ma-index{grid-column:3;justify-self:start;align-self:center;
  display:flex;flex-direction:column;gap:16px;padding-left:4px;max-width:320px}
#s-member-app .ma-labels{position:relative;min-height:2.6em}
#s-member-app .ma-label{display:block;color:var(--orange);font-size:clamp(15px,1.5vw,19px)}
#s-member-app .ma-index .ma-label{position:absolute;top:0;left:0}
#s-member-app .ma-subs{position:relative;min-height:5em;border-left:2px solid var(--ink);padding-left:16px}
#s-member-app .ma-sub{position:absolute;top:0;left:16px;right:0;display:block;color:var(--ink-soft);
  margin:0;max-width:26ch;line-height:1.45;font-size:14.5px}
#s-member-app .ma-index__hint{display:inline-flex;align-items:center;gap:6px;
  color:var(--ink-mute);margin-top:4px;letter-spacing:.2em;align-self:flex-start}

/* ---------- STATIC STRIP (default / mobile / reduced-motion) ---------- */
#s-member-app .ma-strip{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(24px,3vw,44px)}
#s-member-app .ma-strip__item{position:relative;display:flex;flex-direction:column;gap:14px}
#s-member-app .ma-strip__item:nth-child(odd){transform:rotate(-1.2deg)}
#s-member-app .ma-strip__item:nth-child(even){transform:rotate(1.2deg)}
#s-member-app .ma-strip__n{
  position:absolute;top:-.5em;left:-.1em;z-index:3;
  font-size:clamp(34px,4vw,52px);color:var(--orange);line-height:1}
#s-member-app .ma-strip__fig{margin:0;border:2px solid var(--ink);background:#000;aspect-ratio:.4621;overflow:hidden}
#s-member-app .ma-strip__img{width:100%;height:100%;object-fit:cover;display:block}
#s-member-app .ma-strip__meta{display:flex;flex-direction:column;gap:8px}
#s-member-app .ma-strip__meta .ma-label{color:var(--orange)}
#s-member-app .ma-strip__tag{align-self:flex-start;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  #s-member-app .ma-head__grid{grid-template-columns:1fr;gap:18px;align-items:start}
}
@media (max-width:767px){
  #s-member-app .ma-stage{display:none !important}
  #s-member-app .ma-strip{
    display:flex;flex-direction:column;gap:26px;
    scroll-snap-type:y proximity}
  #s-member-app .ma-strip__item{
    scroll-snap-align:start;transform:none !important;
    max-width:330px;margin:0 auto;width:100%}
  #s-member-app .ma-strip__n{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
  #s-member-app .ma-stage{display:none !important}
  #s-member-app .ma-strip{display:grid !important}
  #s-member-app .ma-strip__item{transform:none !important}
  #s-member-app .ma-phone__glare::before{animation:none !important}
}

/* ===================== replaces ===================== */
#s-replaces{position:relative;overflow:hidden;padding-bottom:0}
#s-replaces .rep-intro{padding-bottom:clamp(40px,6vw,72px)}
#s-replaces .rep-intro__head{margin-top:18px}
#s-replaces .rep-intro__price{color:var(--orange)}
#s-replaces .rep-intro__sub{margin-top:22px;color:var(--ink-mute)}

/* ---------- PINNED STAGE (desktop) ---------- */
#s-replaces .rep-stage{position:relative;height:100vh;width:100%;overflow:hidden;background:var(--bone);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}

/* Oversized counter + live kill-stack */
#s-replaces .rep-count{position:absolute;top:0;right:0;z-index:6;display:flex;flex-direction:column;align-items:flex-end;padding:clamp(20px,3.4vw,52px);text-align:right;pointer-events:none}
#s-replaces .rep-count__label{color:var(--ink-mute);margin-bottom:2px}
#s-replaces .rep-count__num{font-family:Inter,sans-serif;font-weight:900;font-size:clamp(150px,30vw,440px);line-height:.74;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums;mix-blend-mode:multiply;will-change:transform;transform-origin:right center}
#s-replaces .rep-count__rule{width:clamp(80px,12vw,200px);height:2px;background:var(--ink);margin:8px 0 10px;transform-origin:right center;will-change:transform}
#s-replaces .rep-count__to{color:var(--ink-mute)}
#s-replaces .rep-count__one{color:var(--orange);font-size:1.15em;line-height:1}
#s-replaces .rep-count__stack{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.18em;color:var(--ink-mute)}
#s-replaces .rep-count__stack li{display:flex;align-items:center;gap:8px;position:relative;transition:color .35s var(--ease-out,cubic-bezier(.22,1,.36,1)),opacity .35s var(--ease-out,cubic-bezier(.22,1,.36,1))}
#s-replaces .rep-count__stack li span{display:inline-block;width:18px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:right center;transition:transform .4s var(--ease-out,cubic-bezier(.22,1,.36,1)),background-color .4s}
#s-replaces .rep-count__stack li.is-killed{color:var(--orange-deep);opacity:.85}
#s-replaces .rep-count__stack li.is-killed span{transform:scaleX(1);background:var(--orange)}

#s-replaces .rep-track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;will-change:transform;padding:0 8vw}
#s-replaces .rep-panel{position:relative;flex:0 0 clamp(380px,48vw,660px);height:100%;display:flex;align-items:center;justify-content:center;padding:0 clamp(18px,2.4vw,40px);overflow:visible}
#s-replaces .rep-panel__ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;font-size:clamp(120px,17vw,260px);line-height:.8;color:var(--ink);opacity:.06;white-space:nowrap;pointer-events:none;will-change:transform}
#s-replaces .rep-panel[data-bg="2"] .rep-panel__card{background:var(--bone-2)}
#s-replaces .rep-panel[data-bg="3"] .rep-panel__card{background:var(--bone-3)}
#s-replaces .rep-panel__card{position:relative;z-index:1;width:100%;max-width:540px;border:2px solid var(--ink);padding:clamp(34px,5vw,72px);box-shadow:14px 14px 0 var(--orange);will-change:transform,opacity;transition:box-shadow .45s var(--ease-out,cubic-bezier(.22,1,.36,1)),transform .45s var(--ease-out,cubic-bezier(.22,1,.36,1))}
#s-replaces .rep-panel__card:hover{box-shadow:22px 22px 0 var(--orange);transform:translate(-3px,-3px)}
#s-replaces .rep-panel__idx{position:absolute;top:clamp(14px,2vw,24px);right:clamp(20px,2.6vw,34px);font-size:clamp(48px,5vw,86px);line-height:.8;color:var(--ink);opacity:.1;pointer-events:none}
#s-replaces .rep-panel__logo{position:relative;display:inline-flex;align-items:center;justify-content:center;width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);border:2px solid var(--ink);background:var(--bone);margin-bottom:clamp(22px,3vw,34px);transition:transform .4s var(--ease-out,cubic-bezier(.22,1,.36,1)),background-color .4s var(--ease-out,cubic-bezier(.22,1,.36,1))}
#s-replaces .rep-panel__logo img{display:block;transition:transform .4s var(--ease-out,cubic-bezier(.22,1,.36,1))}
#s-replaces .rep-panel__card:hover .rep-panel__logo{transform:rotate(-4deg) scale(1.06)}
#s-replaces .rep-panel__name{margin:0;line-height:.9}
#s-replaces .rep-panel__cap{margin-top:14px;color:var(--orange-deep)}

/* CRUSH layer */
#s-replaces .rep-crush{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0}
#s-replaces .rep-crush__cluster{position:relative;width:clamp(180px,22vw,260px);height:clamp(180px,22vw,260px);display:flex;align-items:center;justify-content:center}
#s-replaces .rep-crush__ring{position:absolute;width:100%;height:100%;border:2px solid var(--orange);border-radius:50%;transform:scale(.2);opacity:0;will-change:transform,opacity}
#s-replaces .rep-crush__slab{position:absolute;inset:0;background:var(--ink);box-shadow:18px 18px 0 var(--orange);transform-origin:center;visibility:hidden;opacity:0;will-change:transform,opacity}
#s-replaces .rep-crush__logo{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;background:var(--bone);border:2px solid var(--ink);will-change:transform,opacity}
#s-replaces .rep-crush__logo img{display:block}

/* ORANGE FLOOD end-card */
#s-replaces .rep-flood{position:absolute;inset:0;z-index:8;background:var(--orange);display:flex;align-items:center;visibility:hidden;opacity:0;clip-path:inset(0 100% 0 0)}
#s-replaces .rep-flood__inner{width:100%}
#s-replaces .rep-flood__crumb{color:var(--orange-soft)}
#s-replaces .rep-flood__head{margin:18px 0 0;color:var(--bone);line-height:.92}
#s-replaces .rep-flood__i{color:var(--ink)}
#s-replaces .rep-wordmark{margin:clamp(30px,4vw,46px) 0 clamp(22px,3vw,32px);will-change:transform,opacity}
#s-replaces .rep-wordmark__reveal{display:inline-block;clip-path:inset(0 100% 0 0);will-change:clip-path}
#s-replaces .rep-flood__cap{color:var(--bone);max-width:760px;line-height:1.9}
#s-replaces .rep-flood__price{position:relative;display:inline-block;color:var(--bone)}
#s-replaces .rep-flood__price::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left center;will-change:transform}
#s-replaces .rep-flood__rise{will-change:transform,opacity}

#s-replaces .rep-progress{position:absolute;left:0;bottom:0;width:100%;height:4px;background:transparent;z-index:9}
#s-replaces .rep-progress__fill{display:block;width:100%;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left center;will-change:transform}

/* ---------- STATIC FALLBACK (hidden on desktop motion path) ---------- */
#s-replaces .rep-static{display:none;padding-top:clamp(40px,6vw,64px);padding-bottom:clamp(56px,8vw,96px)}
#s-replaces .rep-static__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#s-replaces .rep-static__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:18px 22px}
#s-replaces .rep-static__logo{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border:2px solid var(--ink);background:var(--bone)}
#s-replaces .rep-static__name{margin:0;line-height:1}
#s-replaces .rep-static__cap{color:var(--orange-deep);text-align:right}
#s-replaces .rep-static__end{margin-top:34px;background:var(--orange);border:2px solid var(--ink);padding:clamp(28px,5vw,48px)}
#s-replaces .rep-static__end .meta{color:var(--orange-soft)}
#s-replaces .rep-static__head{color:var(--bone);margin:14px 0 0;line-height:.95}
#s-replaces .rep-static__head .serif-i{color:var(--ink)}
#s-replaces .rep-static__mark{margin:24px 0 18px}
#s-replaces .rep-static__cap2{color:var(--bone);line-height:1.8}

/* ---------- RESPONSIVE: kill the pin below 860px ---------- */
@media (max-width:860px){
  #s-replaces .rep-stage{display:none}
  #s-replaces .rep-static{display:block}
  #s-replaces .rep-static__row{grid-template-columns:auto 1fr;grid-auto-rows:auto}
  #s-replaces .rep-static__cap{grid-column:2;text-align:left;margin-top:2px}
}
@media (prefers-reduced-motion:reduce){
  #s-replaces .rep-stage{display:none}
  #s-replaces .rep-static{display:block}
  #s-replaces .rep-panel__card,#s-replaces .rep-panel__logo,#s-replaces .rep-panel__logo img{transition:none}
}

/* ===================== ai-suite ===================== */
/* ============================================================ AI SUITE (#4) */
/* Default (static / reduced-motion / mobile / no-JS) state = honest vertical
   stack of all five framed dashboards + copy. JS upgrades desktop+motion into
   a pinned film-projector gallery by adding .is-pinned to the deck. Static-first
   means a failed/interrupted/reduced-motion render is always the correct,
   honest fallback. */

#s-ai-suite { overflow: clip; background: var(--bone); }
#s-ai-suite .ai-suite__grid { opacity: .5; }

/* ---------------------------------------------------------------- header */
#s-ai-suite .ai-suite__head { position: relative; z-index: 2; }
#s-ai-suite .ai-suite__crumb {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vw, 34px);
}
#s-ai-suite .ai-suite__crumb-rule { flex: 1 1 60px; height: 2px; background: var(--ink); min-width: 40px; }
#s-ai-suite .ai-suite__crumb-tag { color: var(--ink-mute); }
#s-ai-suite .ai-suite__title { margin: 0; max-width: 17ch; }
#s-ai-suite .ai-suite__sub { margin: clamp(16px, 2vw, 24px) 0 0; color: var(--ink-soft); }

/* ---------------------------------------------------------------- pin/stage */
#s-ai-suite .ai-suite__pin { position: relative; }
#s-ai-suite .ai-suite__stage {
  position: relative;
  margin-top: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

/* ---------------------------------------------------------------- left rail */
#s-ai-suite .ai-suite__rail {
  position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: 24px;
  border-left: 2px solid var(--ink);
  padding-left: 18px;
}

/* mechanical film counter — two numerals share a clipped window */
#s-ai-suite .ai-suite__index { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
#s-ai-suite .ai-suite__counter {
  position: relative; overflow: hidden;
  width: 1.5ch; height: 0.92em;
  font-size: clamp(52px, 6.4vw, 96px);
  color: var(--orange);
}
#s-ai-suite .ai-suite__flap {
  position: absolute; inset: 0; line-height: 0.92;
  display: flex; align-items: flex-start; justify-content: flex-start;
  will-change: transform, opacity;
}
#s-ai-suite .ai-suite__index-total {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--ink-mute); align-self: flex-end; padding-bottom: 4px;
}

/* sweep-hand progress dial sits beside the counter */
#s-ai-suite .ai-suite__dial { width: 38px; height: 38px; display: block; }
#s-ai-suite .ai-suite__dial-track { fill: none; stroke: var(--rule); stroke-width: 3; }
#s-ai-suite .ai-suite__dial-arc {
  fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}

/* tick ladder with a connecting spine */
#s-ai-suite .ai-suite__ticks {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 13px;
}
#s-ai-suite .ai-suite__tick {
  display: flex; align-items: center; gap: 11px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--ink-mute);
  position: relative; padding-left: 20px;
  transition: color var(--t-fast) ease;
}
#s-ai-suite .ai-suite__tick::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 9px; height: 9px; border: 2px solid var(--ink); background: var(--bone);
  transition: background var(--t-fast) ease, transform var(--t-med) var(--ease-out);
}
#s-ai-suite .ai-suite__tick.is-active { color: var(--ink); }
#s-ai-suite .ai-suite__tick.is-active::before {
  background: var(--orange); transform: translateY(-50%) rotate(45deg) scale(1.25);
}
#s-ai-suite .ai-suite__tick:hover { color: var(--ink); }

/* ---------------------------------------------------------------- deck */
#s-ai-suite .ai-suite__deck {
  position: relative; display: flex; flex-direction: column;
  gap: clamp(52px, 8vw, 132px);
}

/* one frame = framed shot + copy. Alternate density / handedness. */
#s-ai-suite .ai-suite__frame {
  display: grid;
  grid-template-columns: 1.34fr 0.92fr;
  gap: clamp(24px, 3vw, 52px);
  align-items: center;
}
#s-ai-suite .ai-suite__frame:nth-child(even) { grid-template-columns: 0.92fr 1.34fr; }
#s-ai-suite .ai-suite__frame:nth-child(even) .ai-suite__gate { order: 2; }
#s-ai-suite .ai-suite__frame:nth-child(even) .ai-suite__copy { order: 1; }

/* the film gate — wraps the shot, carries the cursor parallax + sprocket marks */
#s-ai-suite .ai-suite__gate { position: relative; }
#s-ai-suite .ai-suite__gate::before,
#s-ai-suite .ai-suite__gate::after {
  content: ''; position: absolute; top: 8px; bottom: 8px; width: 2px;
  background-image: repeating-linear-gradient(to bottom, var(--ink) 0 7px, transparent 7px 16px);
  opacity: .22; pointer-events: none;
}
#s-ai-suite .ai-suite__gate::before { left: -11px; }
#s-ai-suite .ai-suite__gate::after  { right: -11px; }

/* framed product shot — brutalist film frame on the dark UI */
#s-ai-suite .ai-suite__shot {
  border: 2px solid var(--ink); background: var(--ink);
  position: relative; overflow: hidden; will-change: transform, opacity;
}
#s-ai-suite .ai-suite__frame:nth-child(odd)  .ai-suite__shot { transform: rotate(-1deg); }
#s-ai-suite .ai-suite__frame:nth-child(even) .ai-suite__shot { transform: rotate(1deg); }
#s-ai-suite .ai-suite__shot-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; background: var(--ink); border-bottom: 1px solid rgba(244,240,230,0.16);
}
#s-ai-suite .ai-suite__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(244,240,230,0.32); }
#s-ai-suite .ai-suite__dot:nth-child(1) { background: var(--orange); }
#s-ai-suite .ai-suite__shot-label { margin-left: 8px; color: rgba(244,240,230,0.7); font-size: 10px; letter-spacing: 0.18em; }

/* aspect-correct viewport: real shots vary 0.82→2.57, so CONTAIN against the
   dark UI rather than crop. Each frame declares its true ratio inline. */
#s-ai-suite .ai-suite__shot-view { position: relative; background: var(--ink); }
#s-ai-suite .ai-suite__shot-view img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; display: block;
}

/* orange tracking line that sweeps the shot as it seats (JS-driven) */
#s-ai-suite .ai-suite__track {
  position: absolute; left: 0; right: 0; bottom: -2px; height: 4px;
  background: var(--orange); transform: scaleX(0); opacity: 0;
  pointer-events: none; z-index: 3;
}

/* Atlas Assistant placeholder briefing card (frame 05) */
#s-ai-suite .ai-suite__brief {
  border: 2px solid var(--ink); background: var(--ink); color: var(--bone);
  padding: clamp(20px, 2.4vw, 30px);
  transform: rotate(-1deg);
  display: flex; flex-direction: column; gap: 16px;
  min-height: clamp(280px, 33vw, 500px);
  justify-content: space-between; will-change: transform, opacity;
}
#s-ai-suite .ai-suite__brief-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#s-ai-suite .ai-suite__brief-live { display: inline-flex; align-items: center; gap: 9px; color: var(--bone); font-size: 12px; letter-spacing: 0.14em; }
#s-ai-suite .ai-suite__brief-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
#s-ai-suite .ai-suite__brief-date { color: rgba(244,240,230,0.55); font-size: 10px; letter-spacing: 0.16em; }
#s-ai-suite .ai-suite__brief-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
#s-ai-suite .ai-suite__brief-row {
  display: grid; grid-template-columns: 1fr; gap: 3px;
  padding: 13px 0; border-top: 1px solid rgba(244,240,230,0.16);
  position: relative; will-change: transform, opacity;
}
#s-ai-suite .ai-suite__brief-row:first-child { border-top: 0; }
#s-ai-suite .ai-suite__brief-key { color: var(--orange); font-size: 11px; letter-spacing: 0.18em; }
#s-ai-suite .ai-suite__brief-val { color: rgba(244,240,230,0.82); font-size: 14px; line-height: 1.35; }
#s-ai-suite .ai-suite__brief-spark {
  position: absolute; right: 0; top: 15px; width: 38px; height: 14px;
  background:
    linear-gradient(var(--orange), var(--orange)) 0 100% / 5px 40% no-repeat,
    linear-gradient(var(--orange), var(--orange)) 9px 100% / 5px 70% no-repeat,
    linear-gradient(var(--orange), var(--orange)) 18px 100% / 5px 50% no-repeat,
    linear-gradient(var(--orange), var(--orange)) 27px 100% / 5px 100% no-repeat;
  opacity: .85;
}
#s-ai-suite .ai-suite__brief-foot { color: rgba(244,240,230,0.5); font-size: 10px; letter-spacing: 0.16em; border-top: 1px solid rgba(244,240,230,0.16); padding-top: 13px; }

/* copy column */
#s-ai-suite .ai-suite__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
#s-ai-suite .ai-suite__copy > * { will-change: transform, opacity; }
#s-ai-suite .ai-suite__copy-kicker { letter-spacing: 0.16em; }
#s-ai-suite .ai-suite__copy-h { margin: 2px 0 0; }
#s-ai-suite .ai-suite__copy p { color: var(--ink-soft); }
#s-ai-suite .ai-suite__copy-chip { margin-top: 4px; transition: transform var(--t-med) var(--ease-out); }
#s-ai-suite .ai-suite__copy-chip:hover { transform: translate(-1px, -2px); }

/* =================================================== PINNED MODE (desktop+motion) */
#s-ai-suite .ai-suite__deck.is-pinned { display: block; }
#s-ai-suite .ai-suite__deck.is-pinned .ai-suite__frame {
  position: absolute; inset: 0; margin: 0; align-content: center;
}
#s-ai-suite .ai-suite__deck.is-pinned .ai-suite__frame:not(.is-shown) {
  visibility: hidden; pointer-events: none;
}
#s-ai-suite .ai-suite__deck.is-pinned .ai-suite__frame:nth-child(odd)  .ai-suite__shot { transform: rotate(-1deg); }
#s-ai-suite .ai-suite__deck.is-pinned .ai-suite__frame:nth-child(even) .ai-suite__shot { transform: rotate(1deg); }

/* ============================================================== RESPONSIVE */
@media (max-width: 980px) {
  #s-ai-suite .ai-suite__stage { grid-template-columns: 1fr; gap: 28px; }
  #s-ai-suite .ai-suite__rail {
    position: static; flex-direction: row; align-items: center; justify-content: flex-start;
    flex-wrap: wrap; gap: 14px 24px; border-left: 0; border-top: 2px solid var(--ink);
    padding-left: 0; padding-top: 16px;
  }
  #s-ai-suite .ai-suite__counter { font-size: clamp(42px, 11vw, 64px); }
  #s-ai-suite .ai-suite__ticks { flex-direction: row; flex-wrap: wrap; gap: 9px 16px; }
}
@media (max-width: 720px) {
  #s-ai-suite .ai-suite__frame,
  #s-ai-suite .ai-suite__frame:nth-child(even) { grid-template-columns: 1fr; }
  #s-ai-suite .ai-suite__frame:nth-child(even) .ai-suite__gate { order: 1; }
  #s-ai-suite .ai-suite__frame:nth-child(even) .ai-suite__copy { order: 2; }
  /* straighten rotation + drop sprocket marks so nothing clips the edge */
  #s-ai-suite .ai-suite__frame .ai-suite__shot,
  #s-ai-suite .ai-suite__brief { transform: none !important; }
  #s-ai-suite .ai-suite__gate::before,
  #s-ai-suite .ai-suite__gate::after { display: none; }
  #s-ai-suite .ai-suite__brief { min-height: 0; }
}

/* ---- persistent section lede inside the pinned stage ---- */
#s-ai-suite .ai-suite__lede { grid-column: 1 / -1; border-bottom: 2px solid var(--ink); padding-bottom: clamp(14px, 1.8vw, 22px); margin-bottom: clamp(18px, 2.6vw, 32px); }
#s-ai-suite .ai-suite__lede-h { margin: 0; max-width: 24ch; font-size: clamp(26px, 3.4vw, 48px); line-height: 0.98; }
#s-ai-suite .ai-suite__lede-h .serif-i { color: var(--orange); }
/* The counter lived in a 104px rail column and its 96px two-digit numeral
   overflowed it and clipped to "0.". Widen the rail column, stack the /05 total
   UNDER the numeral, and let the numeral fill the column width. */
@media (min-width: 981px) {
  #s-ai-suite .ai-suite__stage { grid-template-columns: 132px 1fr; }
  #s-ai-suite .ai-suite__index { flex-direction: column; align-items: flex-start; gap: 4px; }
  #s-ai-suite .ai-suite__counter { width: 100%; font-variant-numeric: tabular-nums; }
  #s-ai-suite .ai-suite__index-total { align-self: flex-start; padding-bottom: 0; }
}

/* ===================== content-studio ===================== */
#s-content-studio{position:relative;overflow:hidden;background:var(--bone-2);isolation:isolate;}
#s-content-studio .cs-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;}
#s-content-studio .cs-bg .gridlines{position:absolute;inset:0;}
#s-content-studio .cs-wrap{position:relative;z-index:2;}

/* oversized ghost word behind the content */
#s-content-studio .cs-ghost{
  position:absolute;z-index:1;pointer-events:none;
  right:clamp(-40px,-3vw,-10px);top:clamp(-26px,-2vw,8px);
  font-size:clamp(140px,26vw,420px);line-height:.74;
  color:var(--bone-3);opacity:.55;letter-spacing:-.04em;
  will-change:transform;user-select:none;
}

#s-content-studio .cs-crumb{color:var(--ink-mute);margin-bottom:clamp(26px,4.5vw,58px);}

#s-content-studio .cs-layout{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,5vw,76px);align-items:center;
}

/* ── COPY COLUMN ─────────────────────────────────────────── */
#s-content-studio .cs-copy{position:relative;z-index:3;will-change:transform;}

#s-content-studio .cs-kicker{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--orange-deep);margin:0 0 clamp(16px,2vw,22px);
}
#s-content-studio .cs-kicker__dot{
  width:9px;height:9px;background:var(--orange);
  border:1.6px solid var(--ink);flex:none;
}

#s-content-studio .cs-headwrap{position:relative;}
#s-content-studio .cs-index{
  position:absolute;top:-.46em;left:-.06em;z-index:0;
  font-size:clamp(72px,11vw,150px);line-height:.8;
  color:var(--orange);opacity:.16;letter-spacing:-.03em;
  pointer-events:none;user-select:none;
}
#s-content-studio .cs-head{
  position:relative;z-index:1;color:var(--ink);margin:0 0 clamp(20px,2.4vw,30px);
}
#s-content-studio .cs-head .accent-i{white-space:nowrap;}

/* "MINUTES" gets a hand-feel orange underline that wipes in */
#s-content-studio .cs-min{position:relative;white-space:nowrap;}
#s-content-studio .cs-min::after{
  content:"";position:absolute;left:-.02em;right:-.02em;bottom:.06em;height:.1em;
  background:var(--orange);transform:scaleX(0);transform-origin:left center;
  will-change:transform;
}
#s-content-studio.cs-min-in .cs-min::after{
  transform:scaleX(1);
  transition:transform .9s cubic-bezier(.22,1,.36,1) .15s;
}

#s-content-studio .cs-body{color:var(--ink-soft);margin:0 0 clamp(24px,3vw,36px);}

#s-content-studio .cs-chips{
  list-style:none;margin:0 0 clamp(26px,3.4vw,40px);padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}

/* stat pair — asymmetric, mono labels, big display numerals */
#s-content-studio .cs-stats{
  display:flex;align-items:flex-end;gap:clamp(22px,4vw,52px);margin:0;
}
#s-content-studio .cs-stat{display:flex;flex-direction:column;gap:6px;}
#s-content-studio .cs-stat--rule{position:relative;padding-left:clamp(22px,4vw,52px);}
#s-content-studio .cs-stat--rule::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--ink);opacity:.18;
}
#s-content-studio .cs-stat dt{color:var(--ink-mute);}
#s-content-studio .cs-stat dd{margin:0;color:var(--ink);line-height:1;}
#s-content-studio .cs-stat:first-child dd{color:var(--orange);}

/* ── SCREENSHOT COLUMN ───────────────────────────────────── */
#s-content-studio .cs-shot{position:relative;z-index:2;}
#s-content-studio .cs-stage{
  position:relative;margin:0;
  margin-right:clamp(-72px,-4vw,-16px); /* bleed off the right edge */
}
#s-content-studio .cs-frame{
  position:relative;display:block;
  border:2px solid var(--ink);background:#0A0A0A;
  transform:rotate(2deg);transform-style:preserve-3d;
  will-change:transform;
}
#s-content-studio .cs-frame__inner{
  position:relative;display:block;overflow:hidden;transform-style:preserve-3d;
}
#s-content-studio .cs-img{
  display:block;width:100%;height:auto;
  aspect-ratio:3600 / 2472;object-fit:cover; /* real asset is landscape 1.46:1 */
  backface-visibility:hidden;
}

/* diagonal glint that sweeps across the shot on hover */
#s-content-studio .cs-glint{
  position:absolute;top:-60%;bottom:-60%;left:-30%;width:34%;z-index:2;
  pointer-events:none;transform:translateX(-260%) rotate(8deg);
  background:linear-gradient(100deg,
    rgba(244,240,230,0) 0%,
    rgba(244,240,230,.14) 46%,
    rgba(255,228,209,.30) 50%,
    rgba(244,240,230,.14) 54%,
    rgba(244,240,230,0) 100%);
  mix-blend-mode:screen;will-change:transform;
}

/* corner stamp */
#s-content-studio .cs-stamp{
  position:absolute;top:-13px;left:clamp(-6px,-1vw,18px);z-index:5;
  background:var(--ink);color:var(--bone);
  padding:6px 12px;letter-spacing:.18em;
  border:2px solid var(--ink);
}

/* mono callout tags — pinned to the bleeding frame, ride the tilt */
#s-content-studio .cs-mtags{
  list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:4;
  pointer-events:none;transform-style:preserve-3d;
}
#s-content-studio .cs-mtag{
  position:absolute;display:inline-flex;align-items:center;gap:9px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:var(--bone);
  border:2px solid var(--ink);padding:7px 11px;
  box-shadow:5px 5px 0 var(--orange);visibility:hidden;
  will-change:transform;
}
#s-content-studio .cs-mtag__dot{
  width:8px;height:8px;background:var(--orange);
  border:1.6px solid var(--ink);flex:none;
}
#s-content-studio .cs-mtag{left:clamp(-22px,-2vw,-30px);top:13%;}
#s-content-studio .cs-mtag--two{left:auto;right:clamp(-18px,-1.5vw,-24px);top:45%;}
#s-content-studio .cs-mtag--three{left:clamp(-14px,-1vw,-18px);right:auto;top:auto;bottom:10%;
  background:var(--orange);color:var(--bone);box-shadow:5px 5px 0 var(--ink);}
#s-content-studio .cs-mtag--three .cs-mtag__dot{background:var(--bone);}

/* ── WEEKLY CADENCE RAIL ─────────────────────────────────── */
#s-content-studio .cs-rail{
  position:relative;z-index:2;
  margin-top:clamp(44px,6vw,84px);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:clamp(12px,1.6vw,18px) 0;overflow:hidden;
  background:var(--bone-2);
}
#s-content-studio .cs-rail__track{
  display:flex;align-items:center;gap:clamp(14px,2vw,30px);
  white-space:nowrap;will-change:transform;
  padding-left:6vw;
}
#s-content-studio .cs-day{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:clamp(15px,2.1vw,24px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);font-weight:600;
}
#s-content-studio .cs-day--on{
  color:var(--bone);background:var(--orange);
  border:2px solid var(--ink);padding:3px 10px;box-shadow:4px 4px 0 var(--ink);
}
#s-content-studio .cs-dot{color:var(--ink-mute);font-size:clamp(15px,2.1vw,24px);}

/* ── RESPONSIVE: stack below 880px ───────────────────────── */
@media (max-width:880px){
  #s-content-studio .cs-layout{grid-template-columns:1fr;gap:clamp(34px,8vw,50px);}
  #s-content-studio .cs-copy{will-change:auto;}
  #s-content-studio .cs-ghost{font-size:clamp(110px,40vw,260px);top:-12px;right:-18px;opacity:.4;}
  #s-content-studio .cs-stage{margin-right:0;}
  #s-content-studio .cs-frame{transform:rotate(0deg);}
  #s-content-studio .cs-glint{display:none;}
  #s-content-studio .cs-mtag,
  #s-content-studio .cs-mtag--two,
  #s-content-studio .cs-mtag--three{
    position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;display:none;
  }
}
@media (max-width:430px){
  #s-content-studio .cs-stats{gap:18px;}
  #s-content-studio .cs-stat--rule{padding-left:18px;}
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  #s-content-studio .cs-frame{will-change:auto;transform:rotate(2deg);}
  #s-content-studio .cs-copy,
  #s-content-studio .cs-ghost,
  #s-content-studio .cs-img,
  #s-content-studio .cs-rail__track{will-change:auto;transform:none;}
  #s-content-studio .cs-min::after{transform:scaleX(1);transition:none;}
  #s-content-studio .cs-glint{display:none;}
}

/* ===================== why-ravini ===================== */
#s-why-ravini{position:relative;overflow:hidden}

/* header row */
#s-why-ravini .wr-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
#s-why-ravini .wr-head-note{color:var(--ink-mute);position:relative;padding-left:1.1rem}
#s-why-ravini .wr-head-note::before{content:"";position:absolute;left:0;top:50%;width:0.6rem;height:2px;background:var(--orange);transform:translateY(-50%)}

#s-why-ravini .wr-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.25rem,5vw,4rem);margin-top:clamp(1.75rem,3vw,2.75rem)}
@media (min-width:1024px){
  #s-why-ravini .wr-split{grid-template-columns:60fr 40fr;align-items:start;gap:clamp(2.5rem,4vw,4.5rem)}
}

/* LEFT statement — oversized, top-aligned, gridlines patch sits behind */
#s-why-ravini .wr-statement{position:relative;padding:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,2.5vw,2rem);border-left:2px solid var(--ink)}
#s-why-ravini .wr-statement-grid{position:absolute;inset:-12% -6% -12% -2%;opacity:0.55;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(120deg,#000 0%,#000 45%,transparent 92%);mask-image:linear-gradient(120deg,#000 0%,#000 45%,transparent 92%)}
#s-why-ravini .wr-statement-inner{position:relative;z-index:1}

#s-why-ravini .wr-claim{margin:0;line-height:0.9;font-size:clamp(2.6rem,7vw,5.25rem)}
#s-why-ravini .wr-line{display:block;overflow:hidden;padding-bottom:0.04em}
#s-why-ravini .wr-line-in{display:block;will-change:transform}
#s-why-ravini .wr-line--word{overflow:visible}
#s-why-ravini .wr-line--word .wr-line-in{overflow:visible;display:inline-block}
#s-why-ravini .wr-word{position:relative;display:inline-block}
#s-why-ravini .wr-word .accent-i{position:relative;z-index:1}
#s-why-ravini .wr-dot{color:var(--orange);font-weight:900}
/* the orange underline that draws in last as the signature finish */
#s-why-ravini .wr-underline{position:absolute;left:-0.02em;right:-0.05em;bottom:0.04em;height:0.085em;background:var(--orange);transform:scaleX(0);transform-origin:left center;z-index:0;pointer-events:none}

#s-why-ravini .wr-sub{margin-top:clamp(1.5rem,3vw,2rem);color:var(--ink-soft)}

#s-why-ravini .wr-versus{margin-top:clamp(1.5rem,3vw,2rem);display:flex;align-items:baseline;gap:0.85rem;flex-wrap:wrap;border-top:2px solid var(--ink);padding-top:1rem}
#s-why-ravini .wr-versus-label{color:var(--orange-deep);font-size:0.95rem}
#s-why-ravini .wr-versus-names{display:inline-flex;align-items:baseline;gap:0.55rem;flex-wrap:wrap}
#s-why-ravini .wr-vs-name{color:var(--ink-mute);transition:color 0.3s var(--ease-out)}
#s-why-ravini .wr-vs-name:hover{color:var(--ink)}
#s-why-ravini .wr-vs-sep{color:var(--orange);font-weight:700;opacity:0.7;transform:translateY(-0.02em)}

/* RIGHT bento — asymmetric, denser than the statement */
#s-why-ravini .wr-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(0.75rem,1.4vw,1.1rem);grid-auto-flow:dense}
#s-why-ravini .wr-card{position:relative;display:flex;flex-direction:column;padding:clamp(1.1rem,2vw,1.6rem);min-width:0;overflow:hidden}
#s-why-ravini .wr-card--wide{grid-column:span 2}
#s-why-ravini .wr-card--tilt{transform:rotate(1deg)}
#s-why-ravini .wr-card--tilt:hover{transform:rotate(0deg)}

/* cursor-tracked warm sheen on every card — sits under content, transform-free */
#s-why-ravini .wr-card::before{content:"";position:absolute;width:60%;aspect-ratio:1;left:0;top:0;border-radius:50%;background:radial-gradient(circle,var(--orange-soft) 0%,transparent 70%);opacity:0;transition:opacity 0.4s var(--ease-out);transform:translate3d(var(--mx,0),var(--my,0),0) translate(-50%,-50%);pointer-events:none;z-index:0}
#s-why-ravini .wr-card:hover::before{opacity:0.85}
#s-why-ravini .wr-card > *{position:relative;z-index:1}

#s-why-ravini .wr-tag{color:var(--ink-mute);margin-bottom:0.85rem;display:block}
#s-why-ravini .wr-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
#s-why-ravini .wr-icon{color:var(--orange);flex:0 0 auto;line-height:0;margin-top:-2px;transition:transform 0.45s var(--ease-out)}
#s-why-ravini .wr-card--wide:hover .wr-icon{transform:rotate(-90deg)}
#s-why-ravini .wr-card-title{margin:0 0 0.55rem;line-height:0.98;font-size:clamp(1.35rem,2.4vw,1.85rem)}
#s-why-ravini .wr-card--wide .wr-card-title{font-size:clamp(1.7rem,3vw,2.6rem);margin-top:0.4rem}
#s-why-ravini .wr-six{color:var(--orange-deep)}
#s-why-ravini .wr-card-body{color:var(--ink-soft);font-size:0.975rem;line-height:1.5}
#s-why-ravini .wr-card--wide .wr-card-body{max-width:42ch}

/* stat cards */
#s-why-ravini .wr-card--stat{justify-content:flex-start}
#s-why-ravini .wr-stat{margin:0.1rem 0 0.65rem;line-height:0.85}
#s-why-ravini .wr-stat-num{font-family:Inter,sans-serif;font-weight:900;letter-spacing:-0.03em;font-size:clamp(2.6rem,5vw,3.9rem);color:var(--ink);display:inline-block;font-variant-numeric:tabular-nums}
#s-why-ravini .wr-stat-num--serif{font-weight:400;letter-spacing:0;font-size:clamp(3rem,5.6vw,4.6rem);color:var(--orange-deep);font-variant-numeric:normal}
#s-why-ravini .wr-card--ad{background:var(--bone-3)}

/* a faint baseline rule under each stat so the number feels "set" on a ledger */
#s-why-ravini .wr-card--stat .wr-stat::after{content:"";display:block;height:2px;width:2.4rem;background:var(--orange);margin-top:0.45rem;transform:scaleX(0.55);transform-origin:left;transition:transform 0.5s var(--ease-out)}
#s-why-ravini .wr-card--stat:hover .wr-stat::after{transform:scaleX(1)}

@media (max-width:1023px){
  /* statement stacks above a single-column card list; rotations drop */
  #s-why-ravini .wr-bento{grid-template-columns:minmax(0,1fr)}
  #s-why-ravini .wr-card--wide{grid-column:auto}
  #s-why-ravini .wr-card--tilt{transform:rotate(1deg)}
  #s-why-ravini .wr-statement-grid{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
}
@media (max-width:600px){
  #s-why-ravini .wr-card--tilt{transform:none}
  #s-why-ravini .wr-claim{font-size:clamp(2.4rem,11vw,3.4rem)}
}

/* reduced motion: everything present, no draw/sheen */
@media (prefers-reduced-motion:reduce){
  #s-why-ravini .wr-underline{transform:scaleX(1)}
  #s-why-ravini .wr-line-in{transform:none !important}
  #s-why-ravini .wr-card::before{display:none}
}
/* QA fix: number fit (stop bento clipping) */
#s-why-ravini [data-num],#s-why-ravini [data-count]{font-size:clamp(26px,3.3vw,40px) !important;white-space:nowrap;letter-spacing:-0.025em;line-height:1;}

/* ===================== founder ===================== */
#s-founder{
  --fnd-line: rgba(10,10,10,.14);
  position: relative;
  padding-top: clamp(4.75rem, 9vw, 8.5rem);
  padding-bottom: clamp(4.75rem, 9vw, 8.5rem);
  isolation: isolate;
}

/* ---- oversized brutalist density breaks (ghost numeral + ghost word) ---- */
#s-founder .fnd-bignum{
  position: absolute;
  z-index: 0;
  top: clamp(-1.5rem, -2vw, -0.5rem);
  right: clamp(-0.5rem, 1.5vw, 2.5rem);
  font-size: clamp(8rem, 24vw, 22rem);
  line-height: .8;
  color: var(--bone-3);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}
#s-founder .fnd-ghost-word{
  position: absolute;
  z-index: 0;
  left: clamp(-2rem, -3vw, 1rem);
  bottom: clamp(1rem, 5vw, 5rem);
  font-size: clamp(7rem, 22vw, 20rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px var(--bone-3);
  text-stroke: 2px var(--bone-3);
  pointer-events: none;
  user-select: none;
}

/* ---- header crumb ---- */
#s-founder .fnd-head{
  position: relative;
  z-index: 2;
  margin-bottom: clamp(2rem, 4.5vw, 3.75rem);
}

/* ---- editorial grid: portrait left, oversized quote right ---- */
#s-founder .fnd-grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}

/* ============ LEFT — founder-file portrait ============ */
#s-founder .fnd-portrait{
  position: relative;
  align-self: start;
  padding-top: clamp(0.5rem, 1.5vw, 1.75rem);
}
#s-founder .fnd-portrait__grid{
  position: absolute;
  top: clamp(2.25rem, 5vw, 4.25rem);
  left: clamp(-0.75rem, -1.5vw, -1.75rem);
  width: clamp(150px, 42%, 230px);
  height: clamp(150px, 42%, 230px);
  z-index: 0;
  opacity: .85;
  pointer-events: none;
}
#s-founder .fnd-shot{
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  width: min(100%, 460px);
  border: 2px solid var(--ink);
  background: var(--bone-2);
  transform: rotate(-2deg);
  transform-origin: 50% 60%;
  will-change: transform;
}
#s-founder .fnd-shot__file{
  display: block;
  padding: .55rem .9rem;
  color: var(--ink-mute);
  border-bottom: 2px solid var(--ink);
  background: var(--bone-2);
}
#s-founder .fnd-shot__media{
  position: relative;
  overflow: hidden;
}
#s-founder .fnd-shot__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: contrast(1.05) saturate(.95);
  will-change: transform;
}
/* developing scan-line that sweeps the orange on reveal */
#s-founder .fnd-shot__scan{
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  opacity: 0;             /* resting state stays clean if JS never runs */
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(244,90,31,0) 0%,
      rgba(244,90,31,.16) 78%,
      rgba(244,90,31,.42) 96%,
      var(--orange) 100%);
  mix-blend-mode: multiply;
  transform-origin: 50% 0%;
}
/* dossier corner brackets — driven by --b on hover (0 → 1) */
#s-founder .fnd-shot__frame{
  position: absolute;
  inset: -10px;
  z-index: 3;
  pointer-events: none;
}
#s-founder .fnd-bracket{
  --b: 0;
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--orange);
  opacity: var(--b);
  transform: scale(calc(0.4 + 0.6 * var(--b)));
}
#s-founder .fnd-bracket--tl{ top:0; left:0; border-top-width:3px; border-left-width:3px; transform-origin: top left; }
#s-founder .fnd-bracket--tr{ top:0; right:0; border-top-width:3px; border-right-width:3px; transform-origin: top right; }
#s-founder .fnd-bracket--bl{ bottom:0; left:0; border-bottom-width:3px; border-left-width:3px; transform-origin: bottom left; }
#s-founder .fnd-bracket--br{ bottom:0; right:0; border-bottom-width:3px; border-right-width:3px; transform-origin: bottom right; }

#s-founder .fnd-shot__tag{
  position: absolute;
  left: -2px;
  bottom: clamp(0.9rem, 3vw, 1.6rem);
  z-index: 2;
  background: var(--ink);
  color: var(--bone);
  padding: .5rem .9rem;
  border: 2px solid var(--ink);
}
#s-founder .fnd-shot__tag .meta{ color: var(--bone); }

#s-founder .fnd-mark{
  position: absolute;
  z-index: 4;
  right: clamp(-0.25rem, 1vw, 0.75rem);
  top: clamp(-0.5rem, -1vw, -0.25rem);
  background: var(--bone);
  border: 2px solid var(--ink);
  padding: .35rem .65rem .15rem;
  line-height: 0;
  transform: rotate(2deg);
}
#s-founder .fnd-stamp{
  position: relative;
  z-index: 1;
  display: block;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-left: 1.1rem;
  color: var(--ink-mute);
  border-left: 2px solid var(--orange);
  max-width: 22ch;
}

/* ============ RIGHT — quote / attribution / testimonial ============ */
#s-founder .fnd-body{ position: relative; min-width: 0; }

#s-founder .fnd-quote{
  position: relative;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding-left: clamp(0px, 2.4vw, 2.5rem);
}
#s-founder .fnd-quote__mark{
  position: absolute;
  left: clamp(-0.4rem, -0.4vw, 0px);
  top: clamp(-1.6rem, -3vw, -2.6rem);
  font-size: clamp(4.5rem, 12vw, 9rem);
  line-height: 1;
  color: var(--orange);
  pointer-events: none;
  user-select: none;
}
#s-founder .fnd-quote__text{
  margin: 0;
  font-size: clamp(2.6rem, 6.8vw, 5.8rem);
  line-height: .92;
  max-width: 14ch;
}
/* per-line clip masks so each line slides up from behind a hard edge */
#s-founder .fnd-line{
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}
#s-founder .fnd-line__inner{
  display: block;
  will-change: transform;
}
#s-founder .fnd-quote__text .accent-i{ white-space: nowrap; }

#s-founder .fnd-lede{
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  color: var(--ink-soft);
}
#s-founder .fnd-attr{
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 clamp(2.25rem, 4.5vw, 3.5rem);
  color: var(--ink);
  flex-wrap: wrap;
}
#s-founder .fnd-attr__rule{
  display: inline-block;
  width: clamp(28px, 5vw, 56px);
  height: 2px;
  background: var(--orange);
  flex: 0 0 auto;
  transform-origin: left center;
}

/* ---- honest testimonial card ---- */
#s-founder .fnd-testimonial{
  position: relative;
  max-width: 640px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-left-width: 6px;
  border-left-color: var(--orange);
}
#s-founder .fnd-testimonial__label{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink-mute);
  margin-bottom: 1.1rem;
}
#s-founder .fnd-testimonial__dot{
  width: 8px; height: 8px;
  border: 2px solid var(--orange);
  background: var(--orange-soft);
  flex: 0 0 auto;
}
#s-founder .fnd-testimonial__quote{
  margin: 0 0 .9rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(.92rem, 1.5vw, 1.05rem);
  letter-spacing: .04em;
  line-height: 1.45;
  color: var(--ink-soft);
  border: 1px dashed var(--fnd-line);
  padding: .9rem 1rem;
  background: var(--bone-2);
}
#s-founder .fnd-testimonial__by{
  margin: 0 0 1.4rem;
  color: var(--ink-mute);
}
#s-founder .fnd-testimonial__proof{
  margin: 0;
  padding-top: 1.1rem;
  border-top: 2px solid var(--ink);
  color: var(--ink-mute);
  line-height: 1.7;
}
#s-founder .fnd-testimonial__proof strong{
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============ responsive ============ */
@media (max-width: 860px){
  #s-founder .fnd-grid{
    grid-template-columns: 1fr;
    gap: clamp(2.25rem, 8vw, 3rem);
  }
  #s-founder .fnd-portrait{ padding-top: 0; }
  #s-founder .fnd-portrait__grid{
    top: clamp(1.25rem, 5vw, 2rem);
    left: clamp(-0.5rem, -3vw, -1rem);
    width: clamp(120px, 38%, 180px);
    height: clamp(120px, 38%, 180px);
  }
  #s-founder .fnd-shot{
    width: min(100%, 380px);
    transform: rotate(0deg);
  }
  #s-founder .fnd-stamp{ max-width: none; }
  #s-founder .fnd-quote__text{ max-width: 18ch; }
  #s-founder .fnd-bignum{ font-size: clamp(7rem, 32vw, 12rem); opacity: .85; }
  #s-founder .fnd-ghost-word{ display: none; }
  #s-founder .fnd-mark{
    right: clamp(-0.5rem, 1vw, 0.25rem);
    top: clamp(-0.75rem, -2vw, -0.5rem);
    transform: rotate(3deg) scale(.86);
  }
}

@media (prefers-reduced-motion: reduce){
  #s-founder .fnd-shot{ transform: rotate(-2deg); }
  #s-founder .fnd-shot__media img{ transform: none; }
  #s-founder .fnd-shot__scan{ display: none; }
  #s-founder .fnd-line__inner{ transform: none; }
}

/* ===================== replaces-marquee ===================== */
#s-replaces-marquee{position:relative;overflow:hidden}
#s-replaces-marquee .rm-head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:clamp(1.4rem,3.4vw,2.2rem)}
#s-replaces-marquee .rm-crumb{color:var(--ink-mute)}
#s-replaces-marquee .rm-headrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(1rem,3vw,2.4rem)}
#s-replaces-marquee .rm-title{margin:0;color:var(--ink);font-size:clamp(2.4rem,7vw,5rem);line-height:.92;flex:1 1 auto}
#s-replaces-marquee .rm-title-accent{display:inline-block}
#s-replaces-marquee .rm-sub{flex:0 1 360px;margin:0 0 .35rem;color:var(--ink-soft);font-family:Inter,sans-serif;font-weight:500;font-size:clamp(.95rem,1.5vw,1.12rem);line-height:1.4}

/* Live tally — mono crumb that ticks down as slabs land */
#s-replaces-marquee .rm-tally{display:inline-flex;align-items:baseline;gap:.55rem;margin-top:clamp(.4rem,1.6vw,1rem);
  padding:.5rem .9rem;border:2px solid var(--ink);background:var(--bone-2);box-shadow:5px 5px 0 var(--orange)}
#s-replaces-marquee .rm-tally__label,#s-replaces-marquee .rm-tally__unit{font-size:.66rem;letter-spacing:.18em;color:var(--ink-mute);text-transform:uppercase}
#s-replaces-marquee .rm-tally__count{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:clamp(1.4rem,3.2vw,2rem);
  line-height:1;color:var(--orange-deep);min-width:1.1ch;text-align:center;display:inline-block;will-change:transform}

/* Stage */
#s-replaces-marquee .rm-stage{position:relative;margin-top:clamp(1.4rem,4vw,2.6rem)}
#s-replaces-marquee .rm-rail{position:relative;min-height:120px;display:flex;align-items:center}

/* Marquee transport + edge fade so tiles enter/exit cleanly */
#s-replaces-marquee .rm-marquee{width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
#s-replaces-marquee .rm-track{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);padding-block:8px;margin:0;list-style:none}

/* Tiles — bordered pill tiles on bone, brutalist hard edges + offset */
#s-replaces-marquee .rm-tile{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:86px;padding:0 clamp(18px,2.4vw,30px);min-width:clamp(180px,22vw,236px);
  background:var(--bone-2);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--orange);
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .35s var(--ease-out)}
#s-replaces-marquee .rm-tile__inner{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
#s-replaces-marquee .rm-logo{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 auto}
#s-replaces-marquee .rm-logo svg{display:block;color:var(--ink)}
#s-replaces-marquee .rm-tile__label{font-family:Inter,sans-serif;font-weight:700;font-size:clamp(15px,1.5vw,18px);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}

/* GoHighLevel + Canva text marks */
#s-replaces-marquee .rm-logo--ghl{color:var(--ink)}
#s-replaces-marquee .rm-logo--canva{font-family:Inter,sans-serif;font-weight:900;font-size:18px;line-height:1;
  width:24px;height:24px;color:#fff;background:linear-gradient(135deg,#00C4CC 0%,#7D2AE8 100%);border-radius:50%}

/* Hover life on the live (non-clone) tiles */
@media (hover:hover){
  #s-replaces-marquee .rm-tile:not([data-clone]):hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--orange-deep);background:var(--bone-3)}
}

/* Orange cover slab — slams from the left, stamps a brutalist plate (never a strikethrough) */
#s-replaces-marquee .rm-cover{position:absolute;inset:0;z-index:2;background:var(--orange);
  display:flex;align-items:center;justify-content:space-between;padding:0 14px;
  border:2px solid var(--ink);box-sizing:border-box;
  transform:scaleX(0);transform-origin:left center;will-change:transform;pointer-events:none}
#s-replaces-marquee .rm-cover__idx{font-size:.7rem;letter-spacing:.16em;color:var(--ink);opacity:.55;will-change:opacity}
#s-replaces-marquee .rm-cover__mark{display:flex;align-items:center;justify-content:center;color:var(--bone);
  will-change:transform,opacity;transform:scale(.4) rotate(-12deg);opacity:0}
#s-replaces-marquee .rm-cover__mark svg{display:block}

/* Resolve overlay — single wordmark plate + line, centred over the rail */
#s-replaces-marquee .rm-resolve{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(10px,2vw,16px);text-align:center;pointer-events:none}
#s-replaces-marquee .rm-resolve[hidden]{display:none}
#s-replaces-marquee .rm-resolve__plate{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--bone-2);border:2px solid var(--ink);padding:clamp(14px,2.4vw,20px) clamp(22px,3.4vw,38px)}
#s-replaces-marquee .rm-resolve__tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--bone);font-size:.6rem;letter-spacing:.2em;padding:3px 10px;white-space:nowrap}
#s-replaces-marquee .rm-resolve__mark{display:block}
#s-replaces-marquee .rm-resolve__mark svg{display:block}
#s-replaces-marquee .rm-resolve__line{margin:0;color:var(--ink);font-size:clamp(1.5rem,4.4vw,2.6rem);line-height:1}
#s-replaces-marquee .rm-price{display:inline-flex;align-items:baseline;color:var(--orange)}
#s-replaces-marquee .rm-price__cur{font-size:.7em}
#s-replaces-marquee .rm-price__num{display:inline-block;will-change:transform}
#s-replaces-marquee .rm-permo{color:var(--ink-mute)}
#s-replaces-marquee .rm-resolve__crumb{color:var(--ink-mute);font-size:.68rem}

/* Static fallback (reduced motion / no engine): row of logos + wordmark, no slam, no transport */
#s-replaces-marquee.rm-static .rm-marquee{-webkit-mask-image:none;mask-image:none}
#s-replaces-marquee.rm-static .rm-track{flex-wrap:wrap;justify-content:center;gap:14px}
#s-replaces-marquee.rm-static .rm-tile[data-clone]{display:none}
#s-replaces-marquee.rm-static .rm-cover{display:none}
#s-replaces-marquee.rm-static .rm-rail{flex-direction:column;gap:clamp(20px,4vw,34px);min-height:0}
#s-replaces-marquee.rm-static .rm-resolve{position:static;display:flex}
#s-replaces-marquee.rm-static .rm-resolve[hidden]{display:flex}

@media (max-width:600px){
  #s-replaces-marquee .rm-headrow{flex-direction:column;align-items:flex-start;gap:.9rem}
  #s-replaces-marquee .rm-sub{flex-basis:auto}
  #s-replaces-marquee .rm-tile{height:74px;min-width:160px;padding:0 18px;box-shadow:5px 5px 0 var(--orange)}
  #s-replaces-marquee .rm-rail{min-height:100px}
  #s-replaces-marquee .rm-cover{padding:0 10px}
  #s-replaces-marquee .rm-cover__idx{font-size:.6rem}
}

/* ===================== pricing ===================== */
#s-pricing { position: relative; overflow: hidden; padding-bottom: 0; }

/* ---- Lead-in ---- */
#s-pricing .s-pricing__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 1.4rem;
  padding-bottom: 2.2rem;
  border-bottom: 2px solid var(--ink);
}
#s-pricing .s-pricing__kicker { max-width: 18ch; line-height: 0.94; }
#s-pricing .s-pricing__kickline { color: var(--ink-mute); padding-bottom: 0.35rem; }
#s-pricing .s-pricing__kickline-arrow {
  display: inline-block;
  color: var(--orange);
  margin-right: 0.2em;
  transform: translateY(0.06em);
}

/* ---- Stage: asymmetric price + terms ---- */
#s-pricing .s-pricing__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.6rem, 3vw, 3.4rem);
  align-items: center;
  margin-top: clamp(2.4rem, 5vw, 4.4rem);
  padding: clamp(1.4rem, 3vw, 2.6rem) 0;
}
/* faint architectural backdrop that drifts under the stage */
#s-pricing .s-pricing__stage-grid {
  position: absolute;
  inset: -10% -4%;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

/* ---- The magnetic pricing seal ---- */
#s-pricing .s-pricing__seal {
  position: relative;
  background: var(--bone);
  border: 2px solid var(--ink);
  padding: clamp(1.8rem, 3.4vw, 3rem) clamp(1.6rem, 3vw, 2.8rem) clamp(1.8rem, 3.4vw, 2.6rem);
  transform: rotate(-1.5deg);
  transform-origin: center;
  z-index: 3;
  --offset-x: 14px;
  --offset-y: 14px;
  transition: box-shadow 0.5s var(--ease-out, cubic-bezier(.2,.7,.2,1)),
              background-color 0.5s var(--ease-out, cubic-bezier(.2,.7,.2,1)),
              border-color 0.5s var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
#s-pricing .s-pricing__seal:hover {
  background: var(--bone-2);
  box-shadow: 28px 28px 0 0 var(--orange);
}

/* hairline registration corners — engineering-drawing detail */
#s-pricing .s-pricing__seal-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--orange);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.5s var(--ease-out, cubic-bezier(.2,.7,.2,1)),
              transform 0.5s var(--ease-out, cubic-bezier(.2,.7,.2,1));
  pointer-events: none;
}
#s-pricing .s-pricing__seal-corner--tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
#s-pricing .s-pricing__seal-corner--br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
#s-pricing .s-pricing__seal:hover .s-pricing__seal-corner { opacity: 1; transform: scale(1); }

#s-pricing .s-pricing__lock {
  margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}
#s-pricing .s-pricing__pricewrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1em 0.1em;
  margin: 0;
  line-height: 0.82;
}
#s-pricing .s-pricing__currency {
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  color: var(--orange);
  line-height: 0.8;
  font-weight: 400;
  margin-right: 0.02em;
  align-self: flex-start;
  padding-top: 0.18em;
}
#s-pricing .s-pricing__num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(5.6rem, 17vw, 11.5rem);
  color: var(--ink);
  line-height: 0.78;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}
#s-pricing .s-pricing__per {
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  align-self: flex-end;
  padding-bottom: 0.32em;
}
#s-pricing .s-pricing__then {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  color: var(--ink-mute);
  line-height: 1.3;
}
#s-pricing .s-pricing__then-strike { color: var(--ink-mute); }
#s-pricing .s-pricing__then-save {
  color: var(--ink-soft);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
}
#s-pricing .s-pricing__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  overflow: hidden;
}
#s-pricing .s-pricing__cta-label,
#s-pricing .s-pricing__cta-arrow { position: relative; z-index: 1; }
#s-pricing .s-pricing__cta-arrow {
  display: inline-block;
  transition: transform 0.45s var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
#s-pricing .s-pricing__cta:hover .s-pricing__cta-arrow { transform: translateX(0.45em); }

/* corner stamp on the seal */
#s-pricing .s-pricing__seal-stamp {
  position: absolute;
  top: 0.95rem;
  right: -0.45rem;
  color: var(--ink-mute);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.3em;
  font-size: 0.6rem;
  opacity: 0.7;
}

/* ---- Three honest terms — deliberately broken alignment ---- */
#s-pricing .s-pricing__terms {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
#s-pricing .s-pricing__term {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "no head" ". body";
  column-gap: 0.9rem;
  row-gap: 0.35rem;
  background: var(--bone);
  border: 2px solid var(--ink);
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.5rem);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out, cubic-bezier(.2,.7,.2,1)),
              background-color 0.45s var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
/* orange spine that slides in from the left edge on hover */
#s-pricing .s-pricing__term::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
#s-pricing .s-pricing__term:hover { background: var(--bone-2); transform: translateX(5px); }
#s-pricing .s-pricing__term:hover::before { transform: scaleY(1); }
#s-pricing .s-pricing__term--a { margin-right: clamp(0px, 3vw, 2.4rem); }
#s-pricing .s-pricing__term--b { margin-left: clamp(0px, 4vw, 3rem); }
#s-pricing .s-pricing__term--c { margin-right: clamp(0px, 6vw, 4.4rem); }
#s-pricing .s-pricing__term-no {
  grid-area: no;
  color: var(--orange);
  font-size: 0.78rem;
  padding-top: 0.32em;
}
#s-pricing .s-pricing__term-h {
  grid-area: head;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  line-height: 1;
}
#s-pricing .s-pricing__term-sm {
  font-size: 0.5em;
  letter-spacing: 0;
  color: var(--ink-mute);
}
#s-pricing .s-pricing__term-b {
  grid-area: body;
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  color: var(--ink-soft);
  max-width: 34ch;
}

/* ============ DRENCHED-ORANGE CLOSING FRAME ============ */
#s-pricing .s-pricing__flood {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5.5rem);
  background: var(--orange);
  color: var(--bone);
  border-top: 2px solid var(--ink);
  overflow: hidden;
  isolation: isolate;
}
/* clip-path curtain that wipes orange in on enter, drains at the TOP edge */
#s-pricing .s-pricing__flood-curtain {
  position: absolute;
  inset: 0;
  background: var(--orange);
  z-index: 0;
  clip-path: inset(0 0 100% 0); /* hidden: collapsed to top edge */
  will-change: clip-path;
}
#s-pricing .s-pricing__flood-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
#s-pricing .s-pricing__flood-inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(3.4rem, 8vw, 7rem);
  padding-bottom: clamp(3.4rem, 8vw, 7rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#s-pricing .s-pricing__flood-crumb {
  color: var(--bone);
  opacity: 0.82;
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
#s-pricing .s-pricing__flood-title {
  color: var(--bone);
  margin: 0;
  line-height: 0.9;
  max-width: 16ch;
}
#s-pricing .s-pricing__flood-line { display: block; }
#s-pricing .s-pricing__flood-accent {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
/* ink-slab-on-orange CTA */
#s-pricing .s-pricing__flood-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-top: clamp(1.8rem, 4vw, 3rem);
  background: var(--ink);
  color: var(--bone);
  border: 2px solid var(--ink);
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.8rem, 3.6vw, 2.8rem);
  overflow: hidden;
  box-shadow: 12px 12px 0 0 var(--ink);
  transition: box-shadow 0.45s var(--ease-out, cubic-bezier(.2,.7,.2,1)),
              color 0.45s var(--ease-out, cubic-bezier(.2,.7,.2,1)),
              transform 0.45s var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
#s-pricing .s-pricing__flood-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bone);
  transform: translateX(-101%);
  transition: transform 0.55s var(--ease-out, cubic-bezier(.2,.7,.2,1));
  z-index: 0;
}
#s-pricing .s-pricing__flood-cta:hover { color: var(--ink); box-shadow: 0 0 0 0 var(--ink); transform: translate(6px, 6px); }
#s-pricing .s-pricing__flood-cta:hover::before { transform: translateX(0); }
#s-pricing .s-pricing__flood-cta-label,
#s-pricing .s-pricing__flood-cta-arrow {
  position: relative;
  z-index: 1;
  display: inline-block;
}
#s-pricing .s-pricing__flood-cta-label {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.95rem, 2.2vw, 1.25rem);
}
#s-pricing .s-pricing__flood-cta-arrow {
  font-size: 1.2em;
  transition: transform 0.45s var(--ease-out, cubic-bezier(.2,.7,.2,1));
}
#s-pricing .s-pricing__flood-cta:hover .s-pricing__flood-cta-arrow { transform: translateX(0.5em); }
#s-pricing .s-pricing__flood-sub {
  color: var(--bone);
  opacity: 0.9;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 52ch;
  line-height: 1.7;
}
#s-pricing .s-pricing__sign {
  position: absolute;
  left: clamp(1rem, 4vw, 2rem);
  bottom: clamp(0.9rem, 2.5vw, 1.6rem);
  background: var(--bone);
  border: 2px solid var(--ink);
  padding: 0.35rem 0.6rem 0.15rem;
  line-height: 0;
  z-index: 3;
}

/* ---- Reduced motion: kill the curtain, show flood static ---- */
@media (prefers-reduced-motion: reduce) {
  #s-pricing .s-pricing__flood-curtain { display: none; }
  #s-pricing .s-pricing__seal { transform: rotate(-1.5deg); }
  #s-pricing .s-pricing__stage-grid { display: none; }
}

/* ---- Coarse pointer: no magnet/tilt artefacts, seal centred & flat ---- */
@media (pointer: coarse) {
  #s-pricing .s-pricing__seal { transform: none; }
  #s-pricing .s-pricing__seal:hover { box-shadow: 14px 14px 0 0 var(--orange); background: var(--bone); }
  #s-pricing .s-pricing__seal-corner { display: none; }
  #s-pricing .s-pricing__sign { position: static; display: inline-block; margin-top: 2rem; }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  #s-pricing .s-pricing__stage {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3rem);
  }
  #s-pricing .s-pricing__seal { transform: rotate(-1deg); }
  #s-pricing .s-pricing__term--a,
  #s-pricing .s-pricing__term--b,
  #s-pricing .s-pricing__term--c { margin-left: 0; margin-right: 0; }
}

/* ---- Mobile: stack, rotation -> 0, no overflow at 390px ---- */
@media (max-width: 560px) {
  #s-pricing .s-pricing__head { flex-direction: column; align-items: flex-start; }
  #s-pricing .s-pricing__seal { transform: none; --offset-x: 10px; --offset-y: 10px; }
  #s-pricing .s-pricing__pricewrap { gap: 0 0.06em; }
  #s-pricing .s-pricing__currency { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  #s-pricing .s-pricing__per { padding-bottom: 0.24em; }
  #s-pricing .s-pricing__seal-stamp { display: none; }
  #s-pricing .s-pricing__cta { width: 100%; justify-content: center; }
  #s-pricing .s-pricing__flood-cta { width: 100%; justify-content: center; box-shadow: 8px 8px 0 0 var(--ink); }
  #s-pricing .s-pricing__flood-cta:hover { transform: translate(4px, 4px); }
  #s-pricing .s-pricing__sign { position: static; display: inline-block; margin: 2.2rem auto 0; }
  #s-pricing .s-pricing__flood-inner { align-items: center; }
}

/* ---------------------------------------------------------------- CTA FORM */
#s-cta {
  position: relative;
  overflow: hidden;
  background: var(--bone);
  border-top: 2px solid var(--ink);
}
#s-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.8;
}
#s-cta .ravini-optin__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1fr);
  gap: clamp(34px, 6vw, 86px);
  align-items: start;
}
#s-cta .ravini-optin__title {
  margin-top: clamp(18px, 3vw, 30px);
  max-width: 9ch;
}
#s-cta .ravini-optin__title .serif-i {
  color: var(--orange);
}
#s-cta .ravini-optin__sub {
  max-width: 32ch;
  margin-top: 22px;
}
#s-cta .ravini-optin__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 34px);
}
#s-cta .ravini-optin__panel {
  background: var(--bone-2);
  border: 2px solid var(--ink);
  box-shadow: 16px 16px 0 var(--orange);
  padding: clamp(22px, 3vw, 38px);
}
#s-cta .ravini-optin__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
#s-cta .ravini-optin__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#s-cta .ravini-optin__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
#s-cta input {
  width: 100%;
  min-height: 54px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 16px;
  outline: none;
  transition: background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
#s-cta input:focus {
  background: #fff;
  box-shadow: 5px 5px 0 var(--orange);
}
#s-cta input:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
#s-cta .ravini-optin__error {
  margin: 18px 0 0;
  border: 2px solid var(--ink);
  background: var(--orange-soft);
  color: var(--ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  padding: 12px 14px;
  text-transform: uppercase;
}
#s-cta .ravini-optin__submit {
  width: 100%;
  justify-content: center;
  margin-top: 22px;
  box-shadow: 8px 8px 0 var(--ink);
}
#s-cta .ravini-optin__submit:disabled {
  cursor: wait;
  opacity: 0.76;
}
#s-cta .ravini-optin__success {
  background: var(--orange);
  color: var(--bone);
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#s-cta .ravini-optin__success .meta {
  color: var(--orange-soft);
}
#s-cta .ravini-optin__success-message {
  margin-top: 18px;
  color: var(--bone);
}

@media (max-width: 900px) {
  #s-cta .ravini-optin__grid {
    grid-template-columns: 1fr;
  }
  #s-cta .ravini-optin__title {
    max-width: 12ch;
  }
}

@media (max-width: 560px) {
  #s-cta .ravini-optin__fields {
    grid-template-columns: 1fr;
  }
  #s-cta .ravini-optin__panel {
    box-shadow: 10px 10px 0 var(--orange);
  }
}