/* ═══════════════════════════════════════════════════════════════════════
   SERVIZIO PRIMO — template.servizioprimo.com
   DESIGN SYSTEM v2 · LIGHT · VARIANT C (gradient)   — chosen 5 Aug 2026

     Structure + craft   clickup.com, measured from its live DOM
     Palette             Servizio #39FF14 retained, but FILL ONLY
     Gradient            #39FF14 → #00E0A4 → #00C2FF, for hairlines and glow

   THE ONE RULE
     #39FF14 as text on white = 1.36:1 — banned.
     As a fill with --acc-ink on top = 14.08:1.
     Inside a black inset section    = 15.49:1.
     For green TEXT on light use --acc-deep (#0A7A36, 5.45:1).

   NOTE ON `background`
     Always use the background-color longhand with var(). Chrome stores
     `background: var(--x)` shorthands as pending-substitution values and
     will not reliably re-resolve them. This cost us a live bug once.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* gradient stops safe for TEXT on light — both AA */
  --gt1:#0A7A36; --gt2:#0062AD;

  /* surfaces */
  --page:#FFFFFF; --alt:#F8F9FA; --fill:#F0F0F0;
  --line:#E8E8E8; --line2:#D8DADD;
  --dark:#000000; --dark2:#141418;

  /* ink */
  --ink:#292D34; --ink2:#5A6069; --ink3:#8A8F98;
  --on-dark:#F5F5F0; --on-dark2:rgba(245,245,240,.70);

  /* accent */
  --acc:#39FF14; --acc-ink:#07120A; --acc-deep:#0A7A36;
  --acc-soft:rgba(57,255,20,.14); --acc-line:rgba(10,122,54,.30);

  /* gradient — variant C */
  --g1:#39FF14; --g2:#00E0A4; --g3:#00C2FF;

  /* geometry */
  --r-sec:32px; --r-card:18px; --r-btn:14px; --r-btn2:12px; --r-pill:999px;
  --wrap:1120px; --pad:24px; --track:-0.04em;

  --ff:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --fm:'Sometype Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --e:cubic-bezier(.22,.61,.36,1);

  /* elevation — a light theme needs shadow where a dark one used borders */
  --sh1:0 1px 2px rgba(16,20,26,.05);
  --sh2:0 4px 14px rgba(16,20,26,.07);
  --sh3:0 14px 40px rgba(16,20,26,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
.grid>*,.row>*,.split>*,.hero-in>*,.case-in>*,.step>*,.feat>*{min-width:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;background-color:var(--page)}
body{background-color:var(--page);color:var(--ink);font-family:var(--ff);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.num{font-weight:650;letter-spacing:var(--track);line-height:1.07;color:var(--ink)}
h1{font-size:clamp(38px,5.2vw,66px)}
h2{font-size:clamp(29px,3.7vw,50px)}
h3{font-size:clamp(19px,1.5vw,24px);line-height:1.2}
h4{font-size:18px}
p{color:var(--ink2)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:770px}
.center{text-align:center;margin-left:auto;margin-right:auto}
section{padding:clamp(58px,7vw,104px) 0;position:relative}
.lab{font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-deep);display:inline-block}
.lab.mute{color:var(--ink3)}
.dim{color:var(--ink3)}
.mark{background-color:var(--acc);color:var(--acc-ink);padding:0 .18em;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* the gradient hairline */
.rule{height:2px;border:0;border-radius:2px;
  background-image:linear-gradient(90deg,transparent,var(--g1) 25%,var(--g2) 50%,var(--g3) 75%,transparent)}

/* ══ BUTTONS ══ */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff);font-size:17px;font-weight:650;letter-spacing:-.01em;
  padding:14px 22px;border-radius:var(--r-btn);border:1px solid transparent;cursor:pointer;transition:all .22s var(--e);white-space:nowrap}
.btn-p{background-color:var(--acc);color:var(--acc-ink)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(57,255,20,.30)}
.btn-p:active{transform:translateY(0)}
.btn-s{background-color:var(--fill);color:var(--ink);border-radius:var(--r-btn2)}
.btn-s:hover{background-color:var(--line)}
.btn-ink{background-color:var(--ink);color:#fff}
.btn-ink:hover{transform:translateY(-2px);box-shadow:var(--sh3)}
.btn-light{background-color:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--sh3)}
.btn-ghost{background-color:rgba(255,255,255,.10);color:var(--on-dark);border-color:rgba(255,255,255,.20);border-radius:var(--r-btn2)}
.btn-ghost:hover{background-color:rgba(255,255,255,.16)}
.btn-sm{font-size:15px;padding:10px 18px;border-radius:var(--r-btn2)}
.btn:focus-visible{outline:2px solid var(--acc-deep);outline-offset:3px}

/* ══ SURFACES ══ */
.sec-card{border-radius:var(--r-sec);background-color:var(--alt);border:1px solid var(--line);
  padding:clamp(32px,4.4vw,62px) clamp(22px,3vw,50px)}
/* the dark inset — ClickUp's structural signature, and where neon runs free */
.sec-card.dark{background-color:var(--dark);border-color:transparent;color:var(--on-dark);position:relative;overflow:hidden}
.sec-card.dark h1,.sec-card.dark h2,.sec-card.dark h3,.sec-card.dark h4{color:var(--on-dark)}
.sec-card.dark p{color:var(--on-dark2)}
.sec-card.dark .lab{color:var(--acc)}
.sec-card.dark .card{background-color:var(--dark2);border-color:rgba(255,255,255,.12);box-shadow:none}
.sec-card.dark .card:hover{border-color:rgba(57,255,20,.42);box-shadow:none;transform:translateY(-3px)}
.aurora{position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:820px;height:360px;border-radius:50%;
  filter:blur(112px);opacity:.42;pointer-events:none;
  background-image:radial-gradient(circle at 30% 50%,var(--g1) 0%,transparent 60%),
                   radial-gradient(circle at 62% 50%,var(--g2) 0%,transparent 60%),
                   radial-gradient(circle at 88% 50%,var(--g3) 0%,transparent 60%)}

.card{background-color:var(--page);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;transition:all .22s var(--e)}
.card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--line2)}
a.card{display:block}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ══ NAV ══ */
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;transition:width .1s linear;
  background-image:linear-gradient(90deg,var(--g1),var(--g2),var(--g3))}
nav{position:fixed;top:0;left:0;right:0;z-index:200;background-color:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--e)}
nav.stuck{border-bottom-color:var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.logo{font-weight:800;font-size:19px;letter-spacing:-.03em;flex:none;color:var(--ink)}
.logo b{color:var(--acc-deep)}
.nlinks{display:flex;gap:28px;align-items:center}
.nlinks>a,.ndrop>button{font-family:var(--ff);font-size:14.5px;font-weight:500;color:var(--ink2);background:none;border:0;cursor:pointer;
  transition:color .2s var(--e);position:relative;display:inline-flex;align-items:center;gap:5px;padding:0}
.nlinks>a::after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:2px;border-radius:2px;
  background-image:linear-gradient(90deg,var(--g1),var(--g3));transition:right .25s var(--e)}
.nlinks>a:hover{color:var(--ink)}.nlinks>a:hover::after{right:0}
.nlinks>a.on,.ndrop.on>button{color:var(--acc-deep)}
.ndrop{position:relative}
.ndrop>button:hover{color:var(--ink)}
.ndrop .menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:292px;
  background-color:var(--page);border:1px solid var(--line);border-radius:var(--r-card);padding:10px;opacity:0;visibility:hidden;
  transition:all .22s var(--e);box-shadow:var(--sh3)}
.ndrop:hover .menu,.ndrop:focus-within .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.ndrop .menu a{display:block;padding:11px 14px;border-radius:11px;transition:background-color .18s var(--e)}
.ndrop .menu a:hover{background-color:var(--alt)}
.ndrop .menu strong{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.02em;color:var(--ink);margin-bottom:2px}
.ndrop .menu span{font-size:12.5px;color:var(--ink2);line-height:1.4}
.nav-cta{padding:10px 18px;font-size:15px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex:none}
.burger i{display:block;width:22px;height:2px;background-color:var(--ink);margin:4px 0;border-radius:2px;transition:all .25s var(--e)}
.burger.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:960px){
  .nlinks{display:none}.burger{display:block}
  .nlinks.open{display:flex;position:fixed;top:70px;left:0;right:0;bottom:0;background-color:var(--page);
    flex-direction:column;align-items:flex-start;gap:0;padding:22px var(--pad);overflow-y:auto;z-index:190}
  .nlinks.open>a,.nlinks.open .ndrop{width:100%;padding:16px 0;border-bottom:1px solid var(--line);font-size:18px}
  .nlinks.open .ndrop>button{font-size:18px;width:100%;justify-content:space-between}
  .nlinks.open .menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;background:none;padding:12px 0 0;min-width:0}
  .nlinks.open .menu a{padding:10px 0}
}

/* ══ HERO ══ */
.hero{padding-top:clamp(112px,13vh,164px);padding-bottom:clamp(36px,5vw,70px)}
.hero-in{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center}
@media(max-width:1000px){.hero-in{grid-template-columns:1fr;gap:36px}}
.hero h1{margin:18px 0 20px}
.hero .sub{font-size:clamp(17px,1.5vw,20px);color:var(--ink2);max-width:56ch;line-height:1.5}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;align-items:center}
.hero-note{font-size:13.5px;color:var(--ink2);line-height:1.4}
.hero-media{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh3);background-color:var(--page)}
.hero-media img{width:100%;height:auto}
.hero.slim{padding-bottom:0}
.hero.slim .hero-in{grid-template-columns:1fr;text-align:center}
.hero.slim .sub{margin:0 auto}
.hero.slim .hero-ctas{justify-content:center}
.glow{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.glow::before{content:'';position:absolute;top:-260px;left:50%;transform:translateX(-50%);
  width:940px;height:520px;border-radius:50%;filter:blur(130px);opacity:.20;
  background-image:radial-gradient(circle at 34% 50%,var(--g1) 0%,transparent 62%),
                   radial-gradient(circle at 68% 50%,var(--g3) 0%,transparent 62%)}

/* ══ TRUST BAR ══ */
.trust{padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background-color:var(--alt)}
.trust-row{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,60px);flex-wrap:wrap}
.trust-row .slot{font-family:var(--fm);font-size:13px;color:var(--ink2);letter-spacing:.06em}

/* ══ STAT STRIP ══ */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:0 24px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat .num{font-size:clamp(31px,3.3vw,46px);margin:10px 0 12px;font-weight:700}
.stat p{font-size:13.5px;line-height:1.5;color:var(--ink2)}
@media(max-width:880px){.stats{grid-template-columns:repeat(2,1fr);gap:30px 0}
  .stat{padding-left:20px}.stat:nth-child(3){border-left:0;padding-left:0}}
@media(max-width:520px){.stats{grid-template-columns:1fr;gap:24px}
  .stat{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
  .stat:first-child{border-top:0;padding-top:0}}
/* ── the proof strip read as an equation: three components, one total ── */
.stats.math{grid-template-columns:1fr auto 1fr auto 1fr auto 1.18fr}
.stats.math .stat{padding:0 14px}
.stats.math .num{font-size:clamp(21px,2.15vw,31px)}
.stats.math .stat.total .num{font-size:clamp(25px,2.7vw,39px);color:var(--acc-deep)}
.stats.math .op{align-self:center;font-size:clamp(20px,2vw,30px);font-weight:400;color:var(--ink3);
  padding:0 2px;line-height:1;user-select:none}
@media(max-width:1100px){
  .stats.math{grid-template-columns:repeat(2,1fr);gap:var(--s-6) 0}
  .stats.math .op{display:none}
  .stats.math .s3{border-left:0;padding-left:0}
  .stats.math .num,.stats.math .stat.total .num{font-size:clamp(31px,3.3vw,46px)}
}
@media(max-width:520px){
  .stats.math{grid-template-columns:1fr;gap:24px}
  .stats.math .stat{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
  .stats.math .s1{border-top:0;padding-top:0}
}
.src{font-size:12.5px;color:var(--ink2);margin-top:30px;font-family:var(--fm);line-height:1.6}

/* ══ PROBLEM ══ */
.prob .card{display:flex;flex-direction:column;min-height:224px}
.prob .card h3{margin:0 0 10px}.prob .card p{font-size:15px}
.ico{width:38px;height:38px;border-radius:11px;background-color:var(--acc-soft);border:1px solid var(--acc-line);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--acc-deep);
  font-family:var(--fm);font-size:13px;font-weight:700;flex:none}
.prob-close{text-align:center;margin-top:40px;font-size:clamp(19px,2vw,26px);font-weight:650;letter-spacing:var(--track);color:var(--ink)}

/* ══ PROCESS ══ */
.steps{margin-top:50px}
.step{position:sticky;top:98px;margin-bottom:24px;border-radius:var(--r-sec);background-color:var(--page);
  border:1px solid var(--line);box-shadow:var(--sh2);
  padding:clamp(28px,3.4vw,50px);display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;min-height:326px}
@media(max-width:900px){.step{grid-template-columns:1fr;position:static;min-height:0}}
.step-n{font-family:var(--fm);font-size:13px;letter-spacing:.12em;margin-bottom:16px;display:block;
  background-image:linear-gradient(92deg,var(--gt1),var(--gt2));-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:clamp(23px,2.5vw,33px);margin-bottom:14px}
.step p{font-size:15.5px;max-width:46ch}
.step-media{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background-color:var(--alt);aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center}
.step-media video{width:100%;height:100%;object-fit:cover}

/* ══ DASHBOARDS ══ */
.shots{margin-top:44px;display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.shots{grid-template-columns:1fr}}
.shot{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background-color:var(--page);transition:all .22s var(--e)}
.shot:hover{box-shadow:var(--sh2)}
.shot img{width:100%;height:auto}
.shot figcaption{padding:16px 20px;font-size:13.5px;color:var(--ink2);border-top:1px solid var(--line);font-family:var(--fm);line-height:1.5}
/* inside a dark inset the shots invert */
.sec-card.dark .shot{background-color:#0B0B0E;border-color:rgba(255,255,255,.12)}
.sec-card.dark .shot figcaption{color:var(--on-dark2);border-top-color:rgba(255,255,255,.10)}
.sec-card.dark .shot:hover{border-color:rgba(57,255,20,.4);box-shadow:none}

/* ══ CASES ══ */
.tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:38px 0 32px}
.tab{font-family:var(--ff);font-size:15px;font-weight:600;padding:10px 20px;border-radius:var(--r-btn2);
  background-color:var(--page);border:1px solid var(--line2);color:var(--ink2);cursor:pointer;transition:all .22s var(--e)}
.tab:hover{color:var(--ink);box-shadow:var(--sh1)}
.tab.on{background-color:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.tab:focus-visible{outline:2px solid var(--acc-deep);outline-offset:3px}
.case{display:none}.case.on{display:block;animation:fade .38s var(--e)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.case-in{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media(max-width:900px){.case-in{grid-template-columns:1fr;gap:28px}}
.case h3{font-size:clamp(23px,2.4vw,31px);margin:12px 0 16px}
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:26px}
.cs{padding-right:18px;border-right:1px solid var(--line)}.cs:last-child{border-right:0}
.cs .k{font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:var(--ink2);text-transform:uppercase;display:block;margin-bottom:8px}
.cs .v{font-size:clamp(21px,2.3vw,31px);font-weight:700;letter-spacing:var(--track);color:var(--acc-deep)}
.case-media{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background-color:var(--alt);aspect-ratio:4/5}
.case-media img,.case-media video{width:100%;height:100%;object-fit:cover}

/* ══ TESTIMONIALS ══ */
/* dark base is required: the scrim is a gradient, and white text over a light
   card lands at 1.14:1 whenever the photo fails to load. */
.tcard{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);
  background-color:#1B1E23;aspect-ratio:3/4;display:flex;align-items:flex-end;box-shadow:var(--sh1)}
.tcard video,.tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tcard .scrim{position:relative;z-index:2;width:100%;padding:26px 22px 22px;
  background-image:linear-gradient(to top,rgba(6,6,8,.96) 12%,rgba(6,6,8,.72) 55%,transparent)}
.tcard .q{font-size:16.5px;font-weight:650;letter-spacing:-.02em;line-height:1.3;color:#fff;margin-bottom:12px}
.tcard .who{font-size:13px;color:rgba(255,255,255,.74);line-height:1.4}
.tcard .who b{display:block;color:#fff;font-weight:600}

/* ══ TEAM ══ */
.person{text-align:center}
.person .ph{aspect-ratio:1;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background-color:var(--fill);margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;color:var(--ink2);font-family:var(--fm);font-size:12px}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person h4{font-size:17px;margin-bottom:4px}
.person span{font-size:13.5px;color:var(--ink2)}

/* ══ FAQ ══ */
.faq{margin:40px auto 0;max-width:860px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa .qrow{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 0;
  font-size:clamp(16px,1.4vw,19px);font-weight:650;letter-spacing:-.02em;color:var(--ink);transition:color .2s var(--e)}
.qa summary:hover .qrow{color:var(--acc-deep)}
.qa .pm{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);position:relative;transition:all .25s var(--e)}
.qa .pm::before,.qa .pm::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--acc-deep)}
.qa .pm::before{width:11px;height:1.5px}.qa .pm::after{width:1.5px;height:11px;transition:height .25s var(--e)}
.qa[open] .pm{border-color:var(--acc-line);transform:rotate(90deg)}
.qa[open] .pm::after{height:0}
.qa .ans{padding:0 0 26px;font-size:16px;color:var(--ink2);max-width:70ch;line-height:1.6}

/* ══ BOOKING — a dark block with the gradient glow, ClickUp's closing beat ══ */
.book{background-color:var(--dark);border-radius:var(--r-sec);padding:clamp(44px,5.4vw,84px) clamp(24px,4vw,60px);
  text-align:center;color:var(--on-dark);position:relative;overflow:hidden}
.book h2{color:#fff;margin-bottom:18px;position:relative}
.book p{color:var(--on-dark2);font-size:18px;max-width:58ch;margin:0 auto 30px;position:relative}
.book .btn{position:relative}
.host{margin-top:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;font-size:14.5px;color:var(--on-dark2);position:relative}
.host .av{width:88px;height:88px;border-radius:50%;background-color:rgba(255,255,255,.12);overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:10px;color:var(--on-dark2)}
.host .av img{width:100%;height:100%;object-fit:cover}
.host .avs{display:flex;justify-content:center;gap:clamp(20px,3.4vw,44px);flex:none}
.host .avs .av{border:2px solid rgba(255,255,255,.26);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.host .hc{display:flex;flex-direction:column;align-items:center;gap:11px;
  will-change:transform;transform:translate3d(0,0,0);
  animation:host-bob var(--d,3.6s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.host .hn{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark2)}
.host-t{max-width:52ch;text-align:center;line-height:1.55}
@keyframes host-bob{from{transform:translate3d(0,-7px,0)}to{transform:translate3d(0,7px,0)}}
@media(max-width:620px){
  .host{gap:20px}
  .host .av{width:68px;height:68px}
  .host .avs{gap:18px}
}
@media(prefers-reduced-motion:reduce){.host .hc{animation:none}}

/* ══ FOOTER ══ */
footer{border-top:1px solid rgba(255,255,255,.08);padding:58px 0 0;margin-top:clamp(58px,7vw,102px);
  background-color:var(--dark);color:var(--on-dark2);position:relative;overflow:hidden;container-type:inline-size}

/* the last ask */
footer .ask{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding-bottom:38px;margin-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
footer .ask strong{display:block;margin-top:7px;color:var(--on-dark);
  font-size:clamp(18px,1.9vw,23px);font-weight:700;letter-spacing:-.02em}

/* the two offices and the way in */
footer .offs{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
footer .off > .lab{display:block}
footer .off h4{font-size:19px;letter-spacing:var(--track);margin:10px 0 6px;color:var(--on-dark)}
footer .off p{font-size:14px;color:var(--on-dark2);line-height:1.55;max-width:34ch}
footer .clock{display:inline-block;min-width:132px;text-align:center;margin-top:12px;font-family:var(--fm);font-size:12.5px;letter-spacing:.06em;
  color:var(--on-dark2);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:5px 10px}
footer .clock::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background-color:var(--acc);margin-right:8px;vertical-align:1px;animation:tick 2s var(--e) infinite}
footer .mail{display:inline-block;margin:12px 0 8px;font-size:17px;font-weight:650;letter-spacing:-.01em;
  color:var(--acc);border-bottom:1px solid rgba(57,255,20,.4);padding-bottom:2px}
footer .mail:hover{border-bottom-color:var(--acc)}
@keyframes tick{0%,100%{opacity:1}50%{opacity:.28}}
@media(max-width:820px){footer .offs{grid-template-columns:1fr;gap:26px}}

/* the sitemap */
.f-in{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:34px}
@media(max-width:1040px){.f-in{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}
@media(max-width:520px){.f-in{gap:22px 18px}footer{padding-top:44px}
  footer .ask,footer .offs{padding-bottom:30px;margin-bottom:32px}}
.fbrand .logo{margin-bottom:14px;color:var(--on-dark)}
.f-in h5{font-family:var(--fm);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark2);margin-bottom:16px;font-weight:500}
.f-in a{display:block;font-size:14.5px;color:var(--on-dark2);padding:5px 0;transition:color .2s var(--e)}
.f-in a:hover{color:var(--acc)}
.f-bot{margin-top:46px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--on-dark2);font-family:var(--fm)}

/* the wordmark, bleeding off the base */
.wordmark{font-weight:800;letter-spacing:-.045em;line-height:.78;text-align:center;white-space:nowrap;
  font-size:18cqw;margin-top:52px;margin-bottom:-.16em;user-select:none;pointer-events:none;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16)}
.wordmark i{display:inline-block;width:.115em;height:.115em;border-radius:50%;
  background-color:var(--acc);margin-left:.035em;vertical-align:.22em}
@media(prefers-reduced-motion:reduce){footer .clock::before{animation:none}}

/* ══ SERVICE-PAGE BITS ══ */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:clamp(44px,6vw,86px)}
.feat:nth-child(even) .feat-txt{order:2}
@media(max-width:900px){.feat{grid-template-columns:1fr;gap:26px}.feat:nth-child(even) .feat-txt{order:0}}
.feat-media{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background-color:var(--alt);aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;color:var(--ink2);font-family:var(--fm);font-size:12px}
.feat-media img,.feat-media video{width:100%;height:100%;object-fit:cover}
.ticks{margin-top:22px;display:grid;gap:12px}
.ticks li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink2)}
.ticks li::before{content:'';flex:none;width:19px;height:19px;margin-top:3px;border-radius:50%;
  background-image:linear-gradient(135deg,var(--g1),var(--g3));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Cpath d='M4.5 10l3.3 3.3L14.5 6.5' stroke='%23000' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Cpath d='M4.5 10l3.3 3.3L14.5 6.5' stroke='%23000' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.tiers{display:grid;gap:14px;margin-top:40px}
.tier{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding:26px;border:1px solid var(--line);
  border-radius:var(--r-card);background-color:var(--page);transition:all .22s var(--e)}
.tier:hover{box-shadow:var(--sh2);border-color:var(--line2)}
.tier .tn{font-family:var(--fm);font-size:12px;color:var(--acc-deep);letter-spacing:.1em;padding-top:4px;white-space:nowrap}
.tier h4{font-size:19px;margin-bottom:8px}
.tier p{font-size:15px}
@media(max-width:620px){.tier{grid-template-columns:1fr;gap:10px}}

/* ══ PAGE HEADER ══ */
.phead{padding-top:clamp(112px,13vh,160px);padding-bottom:clamp(30px,4vw,52px)}
.phead h1{margin:16px 0 18px}
.phead p{font-size:clamp(17px,1.5vw,20px);max-width:62ch}
.crumb{font-family:var(--fm);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.crumb a{color:var(--ink2);display:inline-block;padding-block:13px;margin-block:-13px}
.crumb a:hover{color:var(--acc-deep)}

/* ══ CONTACT ══ */
.cbox{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.cbox{grid-template-columns:1fr}}
.cbox .card{display:flex;flex-direction:column;gap:10px}
.cbox .card h3{margin-bottom:4px}
.cbox .card a.lnk{color:var(--acc-deep);font-size:15.5px;word-break:break-word;font-weight:600}

/* ══ SCAFFOLD MODE (?build) ══ */
body.build [data-fill]{outline:2px dashed rgba(10,122,54,.55);outline-offset:4px;position:relative}
body.build [data-fill]::after{content:attr(data-fill);position:absolute;top:-11px;left:6px;z-index:60;
  background-color:var(--acc);color:var(--acc-ink);font-family:var(--fm);font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.04em}
body.build .todo{outline:2px dashed #E0A800;outline-offset:4px}
#buildBar{display:none;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:400;
  background-color:var(--ink);border-radius:var(--r-pill);padding:11px 20px;
  font-family:var(--fm);font-size:12.5px;color:#fff;box-shadow:var(--sh3)}
body.build #buildBar{display:block}
#buildBar b{color:var(--acc)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.step{position:static}}

/* ═══════════ LONG-FORM SALES COMPONENTS ═══════════ */

/* ── the wound ── */
.wound{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background-color:var(--page)}
@media(max-width:820px){.wound{grid-template-columns:1fr}}
.wound>div{padding:30px 26px;border-left:1px solid var(--line)}
.wound>div:first-child{border-left:0}
@media(max-width:820px){.wound>div{border-left:0;border-top:1px solid var(--line)}.wound>div:first-child{border-top:0}}
.wound .n{font-size:clamp(30px,3.2vw,42px);font-weight:700;letter-spacing:var(--track);color:var(--ink);display:block;margin-bottom:12px;line-height:1.04;text-wrap:balance}
.wound p{font-size:14.5px;line-height:1.55}
.wound cite{display:block;margin-top:12px;font-family:var(--fm);font-size:11px;color:var(--ink2);font-style:normal;letter-spacing:.04em}
.verdict{margin-top:36px;text-align:center;font-size:clamp(20px,2.2vw,29px);font-weight:650;letter-spacing:var(--track);color:var(--ink);max-width:34ch;margin-left:auto;margin-right:auto;line-height:1.28}

/* ── the evidence ladder ── */
.ladder{margin-top:46px;display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.rung{display:grid;grid-template-columns:96px 1fr auto;gap:26px;align-items:center;padding:26px 28px;
  background-color:var(--page);border-top:1px solid var(--line);transition:background-color .2s var(--e)}
.rung:first-child{border-top:0}
.rung:hover{background-color:var(--alt)}
@media(max-width:760px){.rung{grid-template-columns:64px 1fr;gap:18px;padding:22px}.rung .gate{display:none}}
.rung .r{font-family:var(--fm);font-size:12px;letter-spacing:.12em;color:var(--ink2)}
.rung .r b{display:block;font-size:30px;font-weight:700;letter-spacing:-.03em;margin-top:4px;
  background-image:linear-gradient(135deg,var(--gt1),var(--gt2));-webkit-background-clip:text;background-clip:text;color:transparent}
.rung h4{font-size:19px;margin-bottom:5px}
.rung p{font-size:14.5px;max-width:56ch}
.rung .gate{font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--acc-deep);
  border:1px solid var(--acc-line);background-color:var(--acc-soft);padding:6px 12px;border-radius:var(--r-pill);white-space:nowrap}
.ladder-line{margin-top:32px;text-align:center;font-size:clamp(19px,2.1vw,27px);font-weight:650;letter-spacing:var(--track);
  color:var(--ink);max-width:40ch;margin-left:auto;margin-right:auto;line-height:1.3}

/* ── guarantees ── */
.gtees{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:900px){.gtees{grid-template-columns:1fr}}
.gtee{border:1px solid var(--line);border-radius:var(--r-card);padding:28px;background-color:var(--page);
  display:flex;flex-direction:column;gap:12px;transition:all .22s var(--e);position:relative;overflow:hidden}
.gtee::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background-image:linear-gradient(90deg,var(--g1),var(--g2),var(--g3))}
.gtee:hover{box-shadow:var(--sh2);transform:translateY(-3px)}
.gtee .gn{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-deep)}
.gtee h3{font-size:20px;line-height:1.25}
.gtee p{font-size:15px;line-height:1.55}
.gtee .fine{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--ink2);font-family:var(--fm);line-height:1.5;border-top:1px solid var(--line)}

/* ── who this is not for ── */
.notfor{max-width:820px;margin:40px auto 0;border:1px solid var(--line2);border-radius:var(--r-card);
  padding:clamp(28px,3.4vw,42px);background-color:var(--alt)}
.notfor li{list-style:none;display:flex;gap:14px;align-items:flex-start;padding:11px 0;font-size:16px;color:var(--ink2);line-height:1.5}
.notfor li+li{border-top:1px solid var(--line)}
.notfor li::before{content:'✕';flex:none;color:#B3261E;font-weight:700;font-size:14px;margin-top:3px}
.notfor .after{margin-top:24px;padding-top:20px;border-top:1px solid var(--line2);font-size:16.5px;color:var(--ink);font-weight:600}

/* ── named references ── */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
@media(max-width:820px){.refs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.refs{grid-template-columns:1fr}}
.ref{border:1px solid var(--line);border-radius:14px;padding:20px;background-color:var(--page);transition:all .2s var(--e)}
.ref:hover{border-color:var(--acc-line);box-shadow:var(--sh1)}
.ref b{display:block;font-size:16px;font-weight:650;letter-spacing:-.02em;margin-bottom:4px}
.ref span{font-size:13.5px;color:var(--ink2);line-height:1.45;display:block}

/* ── inline pull-quote / big statement ── */
.statement{max-width:24ch;margin:0 auto;text-align:center;font-size:clamp(26px,3.4vw,44px);
  font-weight:650;letter-spacing:var(--track);line-height:1.18;color:var(--ink)}
.statement .mark{white-space:nowrap}

/* ── cost of inaction ── */
.cost{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:900px){.cost{grid-template-columns:1fr;gap:26px}}
.cost-list li{list-style:none;display:flex;gap:13px;align-items:flex-start;padding:13px 0;font-size:16px;color:var(--ink2);line-height:1.5}
.cost-list li+li{border-top:1px solid var(--line)}
.cost-list li::before{content:'→';flex:none;color:var(--acc-deep);font-weight:700;margin-top:1px}

/* ── capacity block ── */
.capacity{max-width:860px;margin:44px auto 0;border:1px solid var(--line2);border-radius:var(--r-card);
  background-color:var(--page);padding:clamp(30px,3.6vw,46px);text-align:center;box-shadow:var(--sh1)}
.capacity .cnum{font-size:clamp(46px,6vw,84px);font-weight:700;letter-spacing:var(--track);line-height:1;
  color:var(--ink);display:block;margin:14px 0 6px}
.capacity .cof{font-family:var(--fm);font-size:13px;letter-spacing:.08em;color:var(--ink2);text-transform:uppercase}
.capacity p{font-size:16px;max-width:56ch;margin:18px auto 0}
.capacity .rules{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:9px;text-align:left;max-width:62ch;margin-left:auto;margin-right:auto}
.capacity .rules li{list-style:none;font-size:14px;color:var(--ink2);display:flex;gap:11px;line-height:1.5}
.capacity .rules li::before{content:'—';flex:none;color:var(--acc-deep);font-weight:700}

/* ═══════════════════ MOTION ═══════════════════ */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --d-fast:.3s; --d-base:.5s; --d-slow:.68s;
}

/* anything on screen at load is simply present — never animate the hero in */
[data-rv][data-now]{opacity:1!important;transform:none!important;clip-path:none!important;
  transition:none!important;transition-delay:0s!important}

/* headings wipe up behind a clip — works on any number of lines, no splitting */
[data-rv="head"]{clip-path:inset(0 0 105% 0);transform:translateY(14px);
  transition:clip-path var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
[data-rv="head"].in{clip-path:inset(-20% -20% -20% -20%);transform:none}

/* everything else: rise + fade, small distance, short duration */
[data-rv="up"]{opacity:0;transform:translateY(18px);
  transition:opacity var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out)}
[data-rv="up"].in{opacity:1;transform:none}

/* media: settle in from a fraction larger, with the frame clipping it */
[data-rv="media"]{opacity:0;transform:scale(1.04);
  transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
[data-rv="media"].in{opacity:1;transform:none}

/* the gradient hairline draws out from the centre */
[data-rv="rule"]{transform:scaleX(0);transition:transform var(--d-slow) var(--ease-out)}
[data-rv="rule"].in{transform:scaleX(1)}

/* big numbers get a touch of spring */
[data-rv="num"]{opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity var(--d-base) var(--ease-spring),transform var(--d-base) var(--ease-spring)}
[data-rv="num"].in{opacity:1;transform:none}

/* ── living aurora — slow drift, never loops visibly ── */
.aurora{animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-46%) translateY(14px) scale(1.06)}
  100%{transform:translateX(-54%) translateY(-8px) scale(1.02)}
}
.glow::before{animation:drift2 32s ease-in-out infinite alternate}
@keyframes drift2{
  0%{transform:translateX(-50%) scale(1);opacity:.20}
  100%{transform:translateX(-44%) scale(1.12);opacity:.28}
}

/* ── logo marquee ── */
.trust{overflow:hidden}

/* the hero chip labels are position:absolute, nowrap and opacity:0 until hover,
   but they still occupy layout — three of them reached 379px inside a 360px
   phone and gave the whole document a sideways scroll */
.field{overflow:hidden}
@media(hover:none){.chip .lb{display:none}}
.trust-row.marquee{display:flex;flex-wrap:nowrap;justify-content:flex-start;width:max-content;
  animation:slide 42s linear infinite;gap:clamp(28px,5vw,64px)}
.trust:hover .trust-row.marquee{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trust-row.marquee .slot{white-space:nowrap;flex:none}

/* ── button micro-interaction: the arrow moves, not the label ── */
.btn .arw{display:inline-block;transition:transform var(--d-fast) var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}
.btn-p,.btn-ink,.btn-light{transition:transform var(--d-fast) var(--ease-out),box-shadow var(--d-fast) var(--ease-out),background-color var(--d-fast) var(--ease-out)}

/* ── card hover refined: shadow leads, lift follows ── */
.card,.gtee,.tier,.ref,.shot{will-change:transform}
.rung{transition:background-color var(--d-fast) var(--ease-out)}
.rung > *{transition:transform var(--d-fast) var(--ease-out)}
.rung:hover > *{transform:translateX(6px)}
@media(max-width:760px){.rung:hover > *{transform:translateX(3px)}}

/* ── nav shrinks slightly once you commit to scrolling ── */
nav{transition:border-color var(--d-base) var(--ease-soft),height var(--d-base) var(--ease-soft)}
nav .wrap{transition:height var(--d-base) var(--ease-soft)}
nav.stuck .wrap{height:62px}

@media(prefers-reduced-motion:reduce){
  [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .aurora,.glow::before,.trust-row.marquee{animation:none!important}
  .trust-row.marquee{width:auto;justify-content:center;flex-wrap:wrap}
  .rung:hover{padding-left:28px}
}

/* ═══════════════════════════════════════════════════════════════════════
   REFINEMENT PASS
   Audit found: 21 distinct type sizes, 34 spacing values (20 off-grid),
   7 radii, line lengths from 32 to 172 characters, and identical 104/104
   padding on all 16 sections. This replaces those with systems.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* ── fluid type scale · 1.20 at 360px → 1.28 at 1440px, 8 steps ── */
  --t--1: clamp(0.75rem, 0.72rem + 0.13vw, 0.813rem);   /* 12 → 13  labels    */
  --t-0 : clamp(0.875rem, 0.85rem + 0.13vw, 0.938rem);  /* 14 → 15  small     */
  --t-1 : clamp(1rem, 0.97rem + 0.16vw, 1.063rem);      /* 16 → 17  body      */
  --t-2 : clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);   /* 18 → 20  lead      */
  --t-3 : clamp(1.375rem, 1.26rem + 0.55vw, 1.625rem);  /* 22 → 26  h4/h3-sm  */
  --t-4 : clamp(1.75rem, 1.53rem + 1.05vw, 2.25rem);    /* 28 → 36  h3        */
  --t-5 : clamp(2.25rem, 1.77rem + 2.3vw, 3.25rem);     /* 36 → 52  h2        */
  --t-6 : clamp(2.75rem, 1.9rem + 4.1vw, 4.5rem);       /* 44 → 72  h1        */

  /* ── space scale · strict 4pt grid ── */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* ── measure · the audit's worst finding was a 172-character line ── */
  --measure:48ch; --measure-narrow:38ch; --measure-wide:56ch;

  /* ── radius · was 7 values, now 4 ── */
  --r-sec:32px; --r-card:18px; --r-btn:14px; --r-btn2:12px; --r-pill:999px;
}

/* ── type: one size per role, and let the browser break lines well ── */
h1{font-size:var(--t-6);line-height:1.02;text-wrap:balance}
h2{font-size:var(--t-5);line-height:1.06;text-wrap:balance}
h3{font-size:var(--t-4);line-height:1.14;text-wrap:balance}
h4{font-size:var(--t-3);line-height:1.2;text-wrap:balance}
.step h3,.case h3{font-size:var(--t-4)}
.tier h4,.gtee h3,.rung h4,.cell h4{font-size:var(--t-3)}
body{font-size:var(--t-1)}
p{text-wrap:pretty}
.lab,.crumb,.cs .k,.f-in h5,.gtee .gn,.rung .r,.gate{font-size:var(--t--1)}
.src,.fine,.tcard .who,.shot figcaption,.wound cite{font-size:var(--t-0)}

/* ── measure: constrain every run of prose ── */
.hero .sub,.narrow>p,.center>p{max-width:var(--measure);margin-left:auto;margin-right:auto}
.hero .sub{margin-left:0}
.card p,.gtee p,.tier p,.rung p,.wound p,.cell p{max-width:var(--measure-narrow)}
.ans,.cost-list li,.notfor li,.ticks li{max-width:var(--measure)}
.verdict,.ladder-line,.prob-close,.statement{max-width:26ch}
.capacity p{max-width:var(--measure-narrow)}

/* ── section rhythm · was 104/104 on all sixteen ── */
section{padding-block:var(--s-9)}
section.tight{padding-block:var(--s-7)}
section.airy{padding-block:var(--s-10)}
@media(max-width:820px){
  section{padding-block:var(--s-8)}
  section.tight{padding-block:var(--s-6)}
  section.airy{padding-block:var(--s-9)}
}

/* ── the stat strip was still four columns at 1024, which is cramped ── */
@media(max-width:1100px){
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--s-6) 0}
  .stat{padding-left:var(--s-5)}
  .stat:nth-child(3){border-left:0;padding-left:0}
}

/* ── mobile read: 36 characters per line was choppy ── */
@media(max-width:520px){
  :root{--pad:20px}
  .card,.gtee,.tier{padding:var(--s-5)}
  .card p,.gtee p,.tier p,.rung p,.wound p{max-width:none}
}

/* ── asymmetry: centred everything reads as a template ── */
.hero-in{align-items:start}
.hero h1{margin-block:var(--s-4) var(--s-5)}

/* ── the gutter needs to grow with the viewport, not sit at 24px ── */
.wrap{padding-inline:clamp(20px,4vw,40px)}

/* ── type utilities · replaces 25 inline font-size declarations ── */
.lead{font-size:var(--t-2);margin-top:var(--s-4)}
.sm{font-size:var(--t-0)}
.xs{font-size:var(--t--1)}
.mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)} .mt-6{margin-top:var(--s-6)}
.mb-5{margin-bottom:var(--s-5)} .mb-7{margin-bottom:var(--s-7)}
/* hero headline sits in a ~560px column; full --t-6 runs six lines there */
.hero h1{font-size:clamp(2.5rem,1.4rem+3.4vw,3.75rem);line-height:1.02;text-wrap:pretty;max-width:14ch}
/* last stray radius */
.ndrop .menu a{border-radius:var(--r-btn2)}

/* ── display numbers onto the same scale · was 84/52/46/42/31/29/27/26 ── */
.stat .num          {font-size:var(--t-5)}
.capacity .cnum     {font-size:clamp(3rem,2rem+5vw,4.5rem)}
.wound .n           {font-size:var(--t-4)}
.cs .v,.tier .price {font-size:var(--t-4)}
.rung .r b          {font-size:var(--t-3)}
.verdict,.ladder-line,.prob-close,.statement,.notfor .after{font-size:var(--t-4);line-height:1.22}

/* ── client logos ── */
.clogo{height:32px;width:auto;flex:none;opacity:.55;filter:grayscale(1);
  transition:opacity .25s var(--ease-out),filter .25s var(--ease-out)}
.clogo:hover{opacity:1;filter:grayscale(0)}
.trust:hover .clogo{opacity:.75}
.trust:hover .clogo:hover{opacity:1}
@media(max-width:640px){.clogo{height:26px}}

/* ── plans ── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:var(--s-7)}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}
.plan{background-color:var(--page);border:1px solid var(--line);border-radius:var(--r-card);
  padding:30px 26px;display:flex;flex-direction:column;gap:14px;transition:all .22s var(--ease-out)}
.plan:hover{box-shadow:var(--sh2);transform:translateY(-3px)}
.plan.feat{background-color:var(--ink);border-color:var(--ink);box-shadow:var(--sh3)}
.plan.feat .pl,.plan.feat .pp,.plan.feat li{color:#fff}
.plan.feat p,.plan.feat .pp span{color:rgba(255,255,255,.72)}
.plan.feat li::before{background-image:linear-gradient(135deg,var(--g1),var(--g3))}
.plan .pl{font-family:var(--fm);font-size:var(--t--1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);display:flex;align-items:center;gap:10px}
.plan .pl b{background-color:var(--acc);color:var(--acc-ink);font-family:var(--ff);font-size:10.5px;
  letter-spacing:.04em;padding:3px 9px;border-radius:var(--r-pill);text-transform:none;font-weight:700}
.plan .pp{font-size:clamp(2.25rem,1.6rem+2.2vw,3rem);font-weight:700;letter-spacing:var(--track);line-height:1;color:var(--ink)}
.plan .pp span{font-size:var(--t-1);font-weight:500;color:var(--ink2);letter-spacing:0}
.plan ul{display:grid;gap:9px;margin:6px 0 4px}
.plan li{list-style:none;display:flex;gap:10px;font-size:var(--t-0);color:var(--ink2);line-height:1.45}
.plan li::before{content:'';flex:none;width:15px;height:15px;margin-top:3px;border-radius:50%;
  background-image:linear-gradient(135deg,var(--gt1),var(--gt2));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M3.5 8l2.6 2.6L11.5 5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M3.5 8l2.6 2.6L11.5 5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.plan .btn{margin-top:auto;justify-content:center}

/* ── pricing calculator ── */
.calc{display:grid;grid-template-columns:1.15fr .85fr;gap:0;margin-top:var(--s-7);
  border:1px solid var(--line);border-radius:var(--r-sec);overflow:hidden;background-color:var(--page);box-shadow:var(--sh2)}
@media(max-width:860px){.calc{grid-template-columns:1fr}}
.calc-side{padding:clamp(28px,3.4vw,44px)}
.calc-out{padding:clamp(28px,3.4vw,44px);background-color:var(--ink);color:#fff;display:flex;flex-direction:column}
.cl{font-family:var(--fm);font-size:var(--t--1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);display:block;margin-bottom:var(--s-4)}
.calc-out .cl{color:rgba(255,255,255,.6)}
.plat{display:grid;gap:10px}
.pt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line2);border-radius:var(--r-card);
  cursor:pointer;transition:all .2s var(--ease-out);user-select:none}
.pt:hover{border-color:var(--acc-deep);background-color:var(--alt)}
.pt input{appearance:none;width:20px;height:20px;border:1.5px solid var(--line2);border-radius:6px;flex:none;position:relative;cursor:pointer;transition:all .2s var(--ease-out)}
.pt input:checked{background-color:var(--acc);border-color:var(--acc)}
.pt input:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--acc-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pt.on,.pt:has(input:checked){border-color:var(--acc-deep);background-color:var(--acc-soft)}
.pt.locked{cursor:default;opacity:.92}
.pt.locked:hover{background-color:var(--acc-soft)}
.pn{font-weight:650;letter-spacing:-.02em;flex:1}
.px{font-family:var(--fm);font-size:var(--t-0);color:var(--ink2);text-align:right}
.px i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
#gmv{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;margin:6px 0 12px;
  background-image:linear-gradient(90deg,var(--gt1),var(--gt2));background-color:var(--line)}
#gmv::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background-color:var(--page);
  border:2px solid var(--acc-deep);cursor:grab;box-shadow:var(--sh2)}
#gmv::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.08)}
#gmv::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--page);border:2px solid var(--acc-deep);cursor:grab}
.crow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.crow span:first-child{font-size:var(--t-3);font-weight:650;letter-spacing:var(--track);color:var(--ink)}
.ctotal{font-size:clamp(2.75rem,2rem+3vw,4rem);font-weight:700;letter-spacing:var(--track);line-height:1;margin:4px 0 var(--s-4)}
.cbreak{display:grid;gap:7px;font-size:var(--t-0);color:rgba(255,255,255,.72)}
.cbreak div{display:flex;justify-content:space-between;gap:12px;font-family:var(--fm)}
.cbreak .tot{border-top:1px solid rgba(255,255,255,.18);padding-top:9px;margin-top:4px;color:#fff}

/* ═══════════════════════ FUNNEL ═══════════════════════ */
.fn{min-height:100svh;display:flex;flex-direction:column}
.fn-bar{position:fixed;top:0;left:0;right:0;height:3px;background-color:var(--line);z-index:300}
.fn-bar i{display:block;height:100%;width:0;transition:width .45s var(--ease-out);
  background-image:linear-gradient(90deg,var(--g1),var(--g2),var(--g3))}
.fn-top{padding:22px 0;border-bottom:1px solid var(--line)}
.fn-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.fn-step{font-family:var(--fm);font-size:var(--t--1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.fn-body{flex:1;display:flex;align-items:center;padding:clamp(32px,6vw,72px) 0}
.q{display:none;max-width:720px}
.q.on{display:block;animation:qin .45s var(--ease-out)}
@keyframes qin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.q .qn{font-family:var(--fm);font-size:var(--t--1);letter-spacing:.1em;color:var(--acc-deep);display:block;margin-bottom:var(--s-3)}
.q h2{font-size:clamp(1.75rem,1.2rem+2.4vw,2.75rem);margin-bottom:var(--s-3)}
.q .qh{color:var(--ink2);font-size:var(--t-2);margin-bottom:var(--s-6);max-width:46ch}
.opts{display:grid;gap:10px;max-width:560px}
.opt{display:flex;align-items:center;gap:14px;padding:17px 20px;border:1px solid var(--line2);border-radius:var(--r-card);
  cursor:pointer;transition:all .18s var(--ease-out);background-color:var(--page);font-size:var(--t-1);font-weight:600;letter-spacing:-.01em}
.opt:hover{border-color:var(--acc-deep);background-color:var(--alt);transform:translateX(3px)}
.opt.sel{border-color:var(--acc-deep);background-color:var(--acc-soft)}
.opt .k{font-family:var(--fm);font-size:12px;width:24px;height:24px;border-radius:6px;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink2);transition:all .18s var(--ease-out)}
.opt.sel .k{background-color:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.fld{display:grid;gap:14px;max-width:520px}
.fld input,.fld textarea{font-family:var(--ff);font-size:var(--t-1);padding:15px 18px;border:1px solid var(--line2);
  border-radius:var(--r-card);background-color:var(--page);color:var(--ink);width:100%;transition:border-color .18s var(--ease-out)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--acc-deep);box-shadow:0 0 0 3px var(--acc-soft)}
.fld label{font-family:var(--fm);font-size:var(--t--1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:-8px}
.fn-nav{display:flex;align-items:center;gap:14px;margin-top:var(--s-6);flex-wrap:wrap}
.fn-hint{font-size:var(--t-0);color:var(--ink2)}
.fn-hint kbd{font-family:var(--fm);font-size:11px;background-color:var(--fill);border:1px solid var(--line2);
  border-radius:5px;padding:2px 6px;margin:0 2px}
.fn-back{background:none;border:0;color:var(--ink2);font-family:var(--ff);font-size:var(--t-0);cursor:pointer;padding:8px 0}
.fn-back:hover{color:var(--ink)}
.sumbox{background-color:var(--alt);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;margin-bottom:var(--s-5);max-width:520px}
.sumbox div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:var(--t-0);font-family:var(--fm);color:var(--ink2)}
.sumbox div b{color:var(--ink);font-weight:600;text-align:right}
.calbox{border:1px solid var(--line);border-radius:var(--r-sec);overflow:hidden;background-color:var(--page);
  min-height:620px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh2)}
.calbox .ph{text-align:center;padding:48px;max-width:44ch}

/* ── lean hero: wider copy column, headline sized to sit on two lines ── */
.hero-in.hero-lean{grid-template-columns:1.28fr .82fr}
.hero-in.hero-lean h1{font-size:clamp(38px,1.4rem+2.4vw,54px);line-height:1.04;text-wrap:pretty;max-width:15ch}
@media(max-width:1000px){.hero-in.hero-lean{grid-template-columns:1fr}}

/* ── funnel on small screens: the empty calendar slot must not eat a whole screen ── */
@media(max-width:760px){
  .calbox{min-height:360px}
  .calbox .ph{padding:28px}
  .sumbox,.opts,.fld{max-width:none}
}

/* ── narrow screens: label/value pairs read better stacked than wrapped ── */
@media(max-width:480px){
  .sumbox div{flex-direction:column;align-items:flex-start;gap:2px}
  .sumbox div b{text-align:left}
}

/* ══ hero icon field ══════════════════════════════════════════════════
   Shared by the homepage hero and /hero-lab/. Renderer: assets/herofield.js */
.field{position:relative;height:clamp(440px,50vw,660px);
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 62%,transparent 100%)}
.field.nomask{-webkit-mask-image:none;mask-image:none}

.chip{position:absolute;display:grid;place-items:center;background-color:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh2);
  will-change:transform;transform:translate3d(0,0,0)}
.chip svg{width:52%;height:52%;display:block}
.chip .lb{position:absolute;bottom:-21px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--fm);font-size:10px;letter-spacing:.06em;color:var(--ink2);opacity:0;
  transition:opacity .18s var(--e);pointer-events:none}
.chip:hover{z-index:60}
.chip:hover .lb{opacity:1}
.chip.t1{box-shadow:var(--sh3)}

/* drift */
@keyframes hf-bob{from{transform:translate3d(0,-8px,0)}to{transform:translate3d(0,8px,0)}}
.v-drift .chip{animation:hf-bob var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
.v-drift .par{position:absolute;inset:0;transition:transform .5s cubic-bezier(.16,1,.3,1)}

/* cage */
.v-cage .cell{position:absolute}
.v-cage .cell .w{position:absolute;background-color:var(--line);display:block}
.v-cage .cell .wt,.v-cage .cell .wb{left:0;right:0;height:1px}
.v-cage .cell .wl,.v-cage .cell .wr{top:0;bottom:0;width:1px}
.v-cage .cell .wt{top:0} .v-cage .cell .wb{bottom:0}
.v-cage .cell .wl{left:0} .v-cage .cell .wr{right:0}
.v-cage .cell .w.on{animation:hf-bang .5s cubic-bezier(.16,1,.3,1)}
@keyframes hf-bang{
  0%  {background-color:var(--acc-deep);box-shadow:0 0 0 0 var(--acc-soft),0 0 10px 1px var(--acc)}
  55% {background-color:var(--acc);box-shadow:0 0 0 3px transparent,0 0 6px 0 var(--acc)}
  100%{background-color:var(--line);box-shadow:none}
}
.v-cage .cell.shake{animation:hf-shake .22s var(--e)}
@keyframes hf-shake{0%,100%{transform:translate(0,0)}35%{transform:translate(.8px,-.6px)}70%{transform:translate(-.6px,.5px)}}
.v-cage .chip{border-color:var(--line2);box-shadow:var(--sh1)}

/* orbit */
@keyframes hf-spin{to{transform:rotate(360deg)}}
@keyframes hf-unspin{to{transform:rotate(-360deg)}}
.orbit{position:absolute;top:50%;left:50%;width:0;height:0}
.ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px dashed var(--line2);opacity:.55;
  transform:translate(-50%,-50%)}
.spinner{position:absolute;top:0;left:0;width:0;height:0;animation:hf-spin var(--o) linear infinite}
.spinner.rev{animation-name:hf-unspin}
.sat{position:absolute;animation:hf-unspin var(--o) linear infinite}
.spinner.rev .sat{animation-name:hf-spin}
.hub{position:absolute;transform:translate(-50%,-50%)}
.link{position:absolute;inset:0;pointer-events:none;overflow:visible}
.link path{stroke:var(--line2);stroke-width:1.5;fill:none;stroke-dasharray:5 7;animation:hf-flow 2.4s linear infinite}
@keyframes hf-flow{to{stroke-dashoffset:-24}}

/* magnetic + static */
.v-mag .chip{transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s var(--e)}
.v-static .chip{transition:transform .22s var(--e),box-shadow .22s var(--e)}
.v-static .chip:hover{transform:translateY(-6px) scale(1.06);box-shadow:var(--sh3)}

@media(prefers-reduced-motion:reduce){
  .v-drift .chip,.spinner,.sat,.link path,.v-cage .cell .w.on,.v-cage .cell.shake{animation:none!important}
}
@media(max-width:1000px){
  .field{height:clamp(340px,64vw,440px);margin-top:var(--s-6)}
}

/* label above the client logo strip */
.trust-lab{font-family:var(--fm);font-size:var(--t--1);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);text-align:center;margin:0 0 20px}

/* four cards on one row — sized for reading, not for fitting.
   Horizontal padding is deliberately tighter than vertical so the larger
   body size still gets a sensible line length in a ~248px column. */
.grid.tight-cards .card{padding:30px 20px 28px;min-height:352px;
  display:flex;flex-direction:column}
.grid.tight-cards .card h3{font-size:clamp(18px,1.5vw,23px);line-height:1.22;margin-bottom:12px}
.grid.tight-cards .card .sm{font-size:15px;line-height:1.62;color:var(--ink2)}
.grid.tight-cards .card .lab{font-size:11px;letter-spacing:.08em}
@media(max-width:1100px){
  .grid.tight-cards .card{padding:26px 18px;min-height:0}
  .grid.tight-cards .card .sm{font-size:14.5px}
}
@media(max-width:900px){
  .grid.tight-cards .card{padding:var(--s-5);min-height:0}
  .grid.tight-cards .card h3{font-size:clamp(18px,2vw,22px)}
  .grid.tight-cards .card .sm{font-size:15px}
}

/* ── the problem row lights one item at a time as it enters view ──
   The verdict is held back until all three are lit, so it lands as a
   conclusion rather than a caption. */
.wound[data-march]>div{opacity:.26;transition:opacity .55s var(--e),background-color .55s var(--e)}
.wound[data-march]>div.lit{opacity:1;background-color:var(--alt)}
.wound[data-march]~.verdict{opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.wound[data-march].done~.verdict{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .wound[data-march]>div{opacity:1;transition:none}
  .wound[data-march]~.verdict{opacity:1;transform:none;transition:none}
}

/* figures in a column must not change width. Without this the proof numbers
   swing 57.9px while the counter runs, and wobble digit to digit. */
.stat .num,.capacity .cnum,.figs .f,.terms .v{font-variant-numeric:tabular-nums}

/* ══ the Evidence Ladder unlocks a rung at a time ══════════════════════
   Every rung starts locked. Each one opens only once the one below it has,
   which is the argument the copy is already making. */
.ladder[data-lock] .rung{opacity:.32;filter:grayscale(1);
  transition:opacity .5s var(--ease-out),filter .5s var(--ease-out)}
.ladder[data-lock] .gate{display:inline-flex;align-items:center;gap:7px;
  background-color:transparent;border:1px solid var(--line2);color:var(--ink3);
  transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out),color .4s var(--ease-out)}
.ladder[data-lock] .gate svg{width:12px;height:12px;flex:none}
.ladder[data-lock] .gate .tk{display:none}
.ladder[data-lock] .rung.open{opacity:1;filter:none;animation:lad-unlock .5s var(--ease-out)}
.ladder[data-lock] .rung.open .gate{background-color:var(--acc-soft);border-color:transparent;color:var(--acc-deep);
  transition-delay:.12s}
.ladder[data-lock] .rung.open .gate .lk{display:none}
.ladder[data-lock] .rung.open .gate .tk{display:block}
@keyframes lad-unlock{0%{transform:translateX(-7px)}58%{transform:translateX(2px)}100%{transform:none}}
.ladder[data-lock] ~ .ladder-line{opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.ladder[data-lock].done ~ .ladder-line{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .ladder[data-lock] .rung{opacity:1;filter:none;animation:none}
  .ladder[data-lock] .gate{background-color:var(--acc-soft);border-color:transparent;color:var(--acc-deep)}
  .ladder[data-lock] .gate .lk{display:none} .ladder[data-lock] .gate .tk{display:block}
  .ladder[data-lock] ~ .ladder-line{opacity:1;transform:none}
}

/* ══ evidence rings on the proof screenshots ═══════════════════════════
   Named .evm, not .mark — .mark is already the inline text highlighter. */
.shot .shot-img{position:relative;display:block;overflow:hidden;container-type:inline-size}
.shot .shot-img img{display:block;width:100%;height:auto}
.evm{position:absolute;background:transparent;border:2px solid var(--acc);border-radius:7px;
  box-shadow:0 0 0 3px rgba(57,255,20,.16),0 0 22px rgba(57,255,20,.28);
  opacity:0;transform:scale(1.45);pointer-events:none}
#shots.marked .evm{opacity:1;transform:none;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:var(--md)}
/* The label rides the width of the image it sits on, not the viewport — the
   same screenshot appears full width on the homepage and two-up on /work/,
   and a fixed 10.5px label collided with the figure underneath at half size. */
.evm-t{position:absolute;left:50%;bottom:calc(100% + .7cqw);transform:translateX(-50%);white-space:nowrap;
  font-family:var(--fm);font-size:clamp(13px,3cqw,17px);letter-spacing:.02em;font-weight:700;line-height:1.25;
  background-color:var(--acc);color:var(--acc-ink);
  padding:clamp(3px,.36cqw,5px) clamp(7px,.85cqw,11px);border-radius:clamp(4px,.45cqw,6px)}
.evm-t.below{bottom:auto;top:calc(100% + .7cqw)}
.evm-t.anchL{left:0;transform:none}
.evm-t.anchR{left:auto;right:0;transform:none}
.evm{border-width:clamp(1px,.17cqw,2px);border-radius:clamp(4px,.6cqw,7px)}
@media(prefers-reduced-motion:reduce){.evm{opacity:1;transform:none;transition:none}}

/* ══ the 48-hours section runs the two timelines side by side ══════════
   Card one's meter takes 4.2s to cross fourteen days. Card two's crosses
   three in 0.9s and is done before card one is a fifth of the way. The
   gap between the two bars is the whole argument, so both have to sit on
   the same line — hence the flex column and margin-top:auto. */
[data-clock] .card{display:flex;flex-direction:column}
[data-clock] .card .sm{margin-bottom:26px}
.mtr{margin-top:auto;padding-top:22px;border-top:1px solid var(--line)}
.mtr-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.mtr-l{font-family:var(--fm);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.mtr-d{font-family:var(--fm);font-size:14px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.mtr-track{height:8px;border-radius:99px;background-color:var(--line2);overflow:hidden}
.mtr-fill{display:block;height:100%;width:0;border-radius:99px;background-color:var(--ink3)}
.mtr-end{margin-top:9px;font-family:var(--fm);font-size:11.5px;letter-spacing:.05em;color:var(--ink3);opacity:0;
  transition:opacity .4s var(--ease-out)}
.mtr-bars{display:flex;align-items:flex-end;gap:10px;height:52px}
.mtr-bars i{flex:1;height:0;border-radius:6px 6px 0 0;background-color:var(--acc-soft);border-bottom:2px solid var(--acc)}
[data-clock].go .mtr-slow .mtr-fill{width:100%;transition:width 4.2s linear}
[data-clock].go .mtr-fast .mtr-fill{width:100%;background-color:var(--acc);
  transition:width .9s cubic-bezier(.2,.8,.2,1) .25s}
[data-clock].go .mtr-fast .mtr-d{color:var(--acc-deep)}
[data-clock].go .mtr-slow .mtr-end{opacity:1;transition-delay:4.2s}
[data-clock].go .mtr-fast .mtr-end{opacity:1;color:var(--acc-deep);transition-delay:1.15s}
[data-clock].go .mtr-slow .mtr-track{opacity:.55;transition:opacity .5s var(--ease-out) 4.2s}
[data-clock].go .mtr-bars i{height:var(--h);transition:height .7s cubic-bezier(.2,.8,.2,1)}
[data-clock].go .mtr-bars i:nth-child(1){transition-delay:1.4s}
[data-clock].go .mtr-bars i:nth-child(2){transition-delay:1.75s}
[data-clock].go .mtr-bars i:nth-child(3){transition-delay:2.1s}
[data-clock].go .mtr-mult .mtr-end{opacity:1;transition-delay:2.6s}
@media(prefers-reduced-motion:reduce){
  .mtr-fill{width:100%!important;transition:none!important}
  .mtr-fast .mtr-fill{background-color:var(--acc)!important}
  .mtr-bars i{height:var(--h)!important;transition:none!important}
  .mtr-end{opacity:1!important;transition:none!important}
  .mtr-fast .mtr-end{color:var(--acc-deep)!important}
}

/* ══ the Scope stack — counter above, compression behind ═══════════════
   The rail sits between the nav (63px) and the first card's sticky offset
   (100px). Cards slide under it, which is what gives the stack its depth. */
.srail{position:sticky;top:74px;z-index:30;margin-top:34px}
.srail-in{display:flex;align-items:center;gap:18px;background-color:var(--page);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:11px 20px;box-shadow:var(--sh1)}
.srail-n{font-family:var(--fm);font-size:13px;letter-spacing:.06em;white-space:nowrap;font-variant-numeric:tabular-nums}
.srail-n b{color:var(--acc-deep);font-weight:700}
.srail-n i{color:var(--ink3);font-style:normal;margin-left:3px}
.srail-bar{display:flex;gap:5px;flex:1;min-width:60px}
.srail-bar i{flex:1;height:4px;border-radius:99px;background-color:var(--line2);
  transition:background-color .4s var(--ease-out)}
.srail-bar i.on{background-color:var(--acc)}
.srail-t{font-family:var(--fm);font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:34ch}
@media(max-width:760px){.srail-t{display:none}}
.step-media img{width:100%;height:100%;object-fit:cover;display:block}
[data-scope] .step{transform-origin:50% 0;
  transition:opacity .4s var(--ease-out),transform .5s var(--ease-out),
             filter .5s var(--ease-out),box-shadow .5s var(--ease-out)}
[data-scope] .step.past{opacity:.55}
[data-scope] .step.c1{transform:scale(.972);filter:grayscale(.55) brightness(.975);box-shadow:0 22px 44px rgba(10,10,10,.11)}
[data-scope] .step.c2{transform:scale(.948);filter:grayscale(.85) brightness(.955);box-shadow:0 26px 52px rgba(10,10,10,.13)}
[data-scope] .step.c3{transform:scale(.928);filter:grayscale(1) brightness(.94);box-shadow:0 30px 58px rgba(10,10,10,.14)}
@media(max-width:900px){
  .srail{display:none}
  [data-scope] .step{opacity:1!important;transform:none!important;filter:none!important}
}
@media(prefers-reduced-motion:reduce){
  [data-scope] .step{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}

/* ══ the creative engine — a wall of vertical reels ═══════════════════
   Muted, looping, playsinline. They only start once the section is on
   screen, so six videos do not fight the page for bandwidth on load. */
.reelwall{margin-top:44px;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.reelwall video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
  border-radius:var(--r-card);border:1px solid var(--line);background-color:var(--alt)}
@media(max-width:900px){.reelwall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.reelwall{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(prefers-reduced-motion:reduce){.reelwall video{display:none}
  .reelwall::after{content:"Twenty-four AI-generated examples are on servizioprimo.com";
    font-family:var(--fm);font-size:13px;color:var(--ink3)}}

/* ══ case-study cards — they leave the site, so they look like links ═══ */
.grid.g4{grid-template-columns:repeat(4,1fr)}
.ccard{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:border-color .22s var(--e),transform .22s var(--e),box-shadow .22s var(--e)}
.ccard:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:var(--sh2)}
.ccard .num{font-size:clamp(26px,2.4vw,34px);font-weight:700;letter-spacing:var(--track);
  font-variant-numeric:tabular-nums;margin-bottom:10px}
.ccard .sm{flex:1;margin-bottom:16px}
.clink{font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;color:var(--acc-deep)}
@media(max-width:1024px){.grid.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid.g4{grid-template-columns:1fr}}

/* ══ paid media — spend is released, not spent ═════════════════════════
   The first two cards mark evidence in. Only then does the third card
   come out of dim and let its counter run. The order is the argument. */
.gflag{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.05em;color:var(--acc-deep);opacity:0;
  transition:opacity .45s var(--ease-out)}
.gtick{width:15px;height:15px;border-radius:50%;background-color:var(--acc);flex:none;position:relative}
.gtick::after{content:"";position:absolute;left:4px;top:4px;width:6px;height:3px;border-left:2px solid var(--acc-ink);
  border-bottom:2px solid var(--acc-ink);transform:rotate(-45deg)}
.gspend{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.gtrack{height:8px;border-radius:99px;background-color:var(--line2);overflow:hidden}
.gfill{display:block;height:100%;width:0;border-radius:99px;background-color:var(--acc)}
.grow{display:flex;justify-content:space-between;align-items:baseline;margin-top:9px;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.05em;color:var(--ink3)}
.gnum{font-size:16px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.gnote{margin-top:9px;font-family:var(--fm);font-size:10.5px;letter-spacing:.04em;color:var(--ink3);opacity:0;
  transition:opacity .4s var(--ease-out)}
[data-gate] .card:nth-child(3){opacity:.4;transition:opacity .5s var(--ease-out)}
[data-gate].go .card:nth-child(1) .gflag{opacity:1;transition-delay:.35s}
[data-gate].go .card:nth-child(2) .gflag{opacity:1;transition-delay:1.05s}
[data-gate].go .card:nth-child(3){opacity:1;transition-delay:1.7s}
[data-gate].go .gfill{width:100%;transition:width 1.1s cubic-bezier(.2,.8,.2,1) 1.75s}
[data-gate].go .gnum{color:var(--acc-deep)}
[data-gate].go .gnote{opacity:1;transition-delay:2.9s}
@media(prefers-reduced-motion:reduce){
  .gflag,.gnote{opacity:1!important;transition:none!important}
  .gfill{width:100%!important;transition:none!important}
  [data-gate] .card:nth-child(3){opacity:1!important}
}

/* ══ receipts — every figure names the screenshot it came from ═════════ */
.trace{display:flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.05em;color:var(--ink3);opacity:0;transform:translateY(-5px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.trace i{width:1px;height:16px;background-color:var(--acc);flex:none;transform:scaleY(0);transform-origin:top;
  transition:transform .35s var(--ease-out)}
.trace b{font-weight:500;color:var(--acc-deep)}
.traced .trace{opacity:1;transform:none}
.traced .trace i{transform:none}
.traced .stat:nth-child(1) .trace{transition-delay:1.15s}
.traced .stat:nth-child(1) .trace i{transition-delay:1.00s}
.traced .stat:nth-child(2) .trace{transition-delay:1.30s}
.traced .stat:nth-child(2) .trace i{transition-delay:1.15s}
.traced .stat:nth-child(3) .trace{transition-delay:1.45s}
.traced .stat:nth-child(3) .trace i{transition-delay:1.30s}
.traced .stat:nth-child(4) .trace{transition-delay:1.60s}
.traced .stat:nth-child(4) .trace i{transition-delay:1.45s}

/* ══ case cards — revenue per month, derived from the stated duration ══
   Total ÷ months. The duration sits beside it so a short engagement
   cannot look like a better one just for being short. */
.rate{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.rbar{height:40px;display:flex;align-items:flex-end}
.rbar span{display:block;width:100%;height:0;border-radius:5px 5px 0 0;background-color:var(--acc-soft);
  border-bottom:2px solid var(--acc)}
.ccard.in .rbar span,.traced .rbar span{height:var(--h);transition:height .8s cubic-bezier(.2,.8,.2,1)}
.rlab{margin-top:9px;font-family:var(--fm);font-size:10.5px;letter-spacing:.04em;color:var(--ink3)}
.rlab b{color:var(--acc-deep);font-weight:700}
@media(prefers-reduced-motion:reduce){
  .trace{opacity:1!important;transform:none!important}
  .trace i{transform:none!important}
  .rbar span{height:var(--h)!important;transition:none!important}
}

/* ══ capacity — six slots you can count, three of them taken ═══════════ */
.pips{display:flex;gap:12px;justify-content:center;margin:18px 0 14px}
.pips i{width:38px;height:38px;border-radius:10px;border:2px solid var(--line2);background-color:transparent;
  transition:background-color .45s var(--ease-out),border-color .45s var(--ease-out),transform .45s var(--ease-spring)}
[data-pips].go .pips i[data-k="0"],[data-pips].go .pips i[data-k="1"],[data-pips].go .pips i[data-k="2"]{
  background-color:var(--acc);border-color:var(--acc);transform:scale(1.06)}
[data-pips].go .pips i[data-k="0"]{transition-delay:.30s}
[data-pips].go .pips i[data-k="1"]{transition-delay:.48s}
[data-pips].go .pips i[data-k="2"]{transition-delay:.66s}
.pip-read{opacity:0;transition:opacity .4s var(--ease-out)}
.pip-read b{color:var(--acc-deep)}
[data-pips].go .pip-read{opacity:1;transition-delay:1s}
@media(max-width:520px){.pips i{width:30px;height:30px}}

/* ══ references — the lines come up one at a time ══════════════════════ */
.ref{position:relative}
.ref b{padding-right:22px;display:inline-block}
.rdot{position:absolute;top:20px;right:20px;width:9px;height:9px;border-radius:50%;
  background-color:var(--line2);transition:background-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
[data-board].go .rdot{background-color:var(--acc);box-shadow:0 0 0 4px rgba(57,255,20,.18)}
[data-board].go .ref:nth-child(1) .rdot{transition-delay:.30s}
[data-board].go .ref:nth-child(2) .rdot{transition-delay:.50s}
[data-board].go .ref:nth-child(3) .rdot{transition-delay:.70s}
[data-board].go .ref:nth-child(4) .rdot{transition-delay:.90s}
[data-board].go .ref:nth-child(5) .rdot{transition-delay:1.10s}
[data-board].go .ref:nth-child(6) .rdot{transition-delay:1.30s}

@media(prefers-reduced-motion:reduce){
  .pip-read{opacity:1!important}
  [data-pips] .pips i[data-k="0"],[data-pips] .pips i[data-k="1"],[data-pips] .pips i[data-k="2"]{
    background-color:var(--acc)!important;border-color:var(--acc)!important}
  .rdot{background-color:var(--acc)!important}
}


/* ══ GUARANTEE CONDITIONS — the fine print arrives last and is pointed at ══ */
[data-gtee] .fine{opacity:0;transform:translateY(10px);border-left:2px solid transparent;padding-left:0;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),
             border-color .45s var(--ease-out),padding-left .45s var(--ease-out),color .45s var(--ease-out)}
[data-gtee].go .fine{opacity:1;transform:none}
[data-gtee].go .gtee:nth-child(1) .fine{transition-delay:.45s}
[data-gtee].go .gtee:nth-child(2) .fine{transition-delay:.65s}
[data-gtee].go .gtee:nth-child(3) .fine{transition-delay:.85s}
[data-gtee].hold .fine{border-left-color:var(--acc);padding-left:12px;color:var(--ink2)}

/* ══ FAQ — one row open at a time, with a real height transition ══ */
.faq{interpolate-size:allow-keywords}
.qa::details-content{block-size:0;overflow:hidden;
  transition:block-size .34s cubic-bezier(.25,.9,.3,1),content-visibility .34s allow-discrete}
.qa[open]::details-content{block-size:auto}
.qa{position:relative;transition:padding-left .24s var(--e)}
.qa::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background-color:var(--acc);transform:scaleY(0);transition:transform .24s var(--e)}
.qa:hover::before,.qa[open]::before{transform:none}
.qa:hover,.qa[open]{padding-left:14px}

@media(prefers-reduced-motion:reduce){
  [data-gtee] .fine{opacity:1!important;transform:none!important}
  .qa::details-content{transition:none!important}
  .qa,.qa::before{transition:none!important}
}


/* ═══════════════════════ MOBILE PASS ═══════════════════════
   Measured at 360, 390 and 430. Everything below is a fix for
   something that was actually wrong, not a precaution. */

/* the logo marquee ran 3,701px wide and was never clipped, which widened the
   containing block for the fixed nav and gave the whole page a 15px sideways
   scroll on any phone narrower than 430 */
.trust{overflow:hidden}

/* touch targets — the burger was 38x38 and the header logo 29 tall */
.burger{padding:11px;margin-right:-11px}
#nav .logo,.fn-top .logo{padding-block:7px}
footer .mail{padding-block:6px}

/* the revenue slider was a 6px-tall hit area */
#gmv{height:26px;background-color:transparent;background-image:none}
#gmv::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background-image:linear-gradient(90deg,var(--gt1),var(--gt2));background-color:var(--line)}
#gmv::-moz-range-track{height:6px;border-radius:3px;
  background-image:linear-gradient(90deg,var(--gt1),var(--gt2));background-color:var(--line)}
#gmv::-webkit-slider-thumb{margin-top:-10px}

/* tap-to-play reels — six autoplaying 720p files cost 60MB on a phone */
.reel{position:relative;display:block}
.reel .rp{display:none}
.reelwall.tapwall .reel{cursor:pointer;background-color:var(--ink);border-radius:var(--r-card);overflow:hidden}
.reelwall.tapwall .reel::before{content:'';display:block;aspect-ratio:9/16}
.reelwall.tapwall .reel video{position:absolute;inset:0;height:100%}
.reelwall.tapwall .reel .rp{display:grid;position:absolute;inset:0;place-items:center;pointer-events:none;
  background-image:radial-gradient(circle at 50% 45%,rgba(57,255,20,.16),transparent 62%)}
.reelwall.tapwall .reel .rp::after{content:'';width:0;height:0;margin-left:5px;
  border-left:17px solid rgba(255,255,255,.92);border-top:11px solid transparent;border-bottom:11px solid transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));transition:transform .2s var(--e)}
.reelwall.tapwall .reel:active .rp::after{transform:scale(.9)}
.reelwall.tapwall .reel.on .rp{display:none}

/* the calculator column resolved to 373px inside a 350px grid on a 360 phone */
@media(max-width:860px){
  .calc{grid-template-columns:minmax(0,1fr)}
  .calc-side,.calc-out{min-width:0}
  .crow{flex-wrap:wrap}
}

/* footer links were 32px tall */
@media(max-width:820px){
  .f-in a{padding-block:9px}
  footer .mail{padding-block:8px}
}

@media(max-width:600px){
  /* the evidence ladder kept a 64px first column, squeezing the rung copy */
  .rung{grid-template-columns:1fr;gap:10px;padding:20px}
  .rung .r b{font-size:26px}

  /* text people actually read, not labels — nothing under 13.5 */
  .gtee .fine{font-size:13px}
  .hero-note{font-size:14px}
  .gnote{font-size:11.5px}
  .shot figcaption,figure.shot figcaption{font-size:14px}

  /* 27,500px of page is thirty-three screens; the rhythm can carry less air */
  section{padding-block:var(--s-7)}
  section.tight{padding-block:var(--s-6)}
  section.airy{padding-block:var(--s-8)}
}


/* JS renders the logo strip, the stat strip and the proof shots after parse;
   without a reserved box everything below them jumped on arrival */
#trustRow{min-height:32px}
.shot .shot-img img{display:block;width:100%;height:auto}


/* The stat strip carried a max-width:520 rule that drops it to one column and
   a later max-width:1100 rule that sets two. Source order gave the 1100 rule
   the win at every phone width, so four stats sat in two 165px columns and
   pushed the document 38px wider than a 360 screen. */
@media(max-width:520px){
  .stats{grid-template-columns:1fr;gap:var(--s-6) 0}
  .stat{padding-left:0;border-left:0}
  .stat:nth-child(3){padding-left:0}
}


/* a headline scrolling under a 0.86-opaque bar ghosts through it wherever the
   blur is not composited — WebKit screenshots show this plainly */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  nav{background-color:var(--page)}
}

/* the contact-card email link was a 24px tap target */
@media(max-width:820px){.card .lnk{display:inline-block;padding-block:9px}}


/* ═══════════ INTERIOR PAGES ═══════════
   A feature with no image is a single column, not a column plus an empty box. */
.feat.solo{grid-template-columns:1fr;max-width:var(--measure);margin-inline:auto}
.feat.solo .feat-txt{order:0}
.case-in:not(:has(.case-media)){grid-template-columns:1fr}

/* the tier cards pick up the same ink line the guarantees use, so the interior
   pages move the way the homepage does rather than sitting still */
.tier{position:relative;overflow:hidden}
.tier::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background-image:linear-gradient(90deg,var(--gt1),var(--gt2));
  transform:scaleX(0);transform-origin:left}
.tiers.go .tier::after{transform:none;transition:transform .7s cubic-bezier(.25,.9,.3,1)}
.tiers.go .tier:nth-child(2)::after{transition-delay:.16s}
.tiers.go .tier:nth-child(3)::after{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.tier::after{transform:none!important}}


/* ═══════════ CASE LEDGER · /work/ ═══════════
   Four rows, nothing hidden, the figures aligned in a single column so the
   four read as one track record rather than four separate stories. */
.ledger{margin-top:44px;border-top:1px solid var(--line);interpolate-size:allow-keywords}
.lrow{border-bottom:1px solid var(--line);position:relative;transition:padding-left .25s var(--e)}
.lrow summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:1.05fr .75fr 1.5fr auto;gap:26px;align-items:center;padding:26px 6px}
.lrow summary::-webkit-details-marker{display:none}
.lrow::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background-color:var(--acc);transform:scaleY(0);transition:transform .24s var(--e)}
.lrow:hover::before,.lrow[open]::before{transform:none}
.lrow:hover,.lrow[open]{padding-left:16px}
.lcat b{display:block;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.lcat > span{font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.lhero{display:flex;flex-direction:column}
.lhero .v{font-size:30px;font-weight:700;letter-spacing:-.03em;color:var(--acc-deep);font-variant-numeric:tabular-nums;line-height:1.1}
.lhero .k{font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.lh{font-size:17px;line-height:1.4;color:var(--ink)}
.lpm{width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);position:relative;flex:none;
  transition:all .25s var(--e)}
.lpm::before,.lpm::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background-color:var(--acc-deep)}
.lpm::before{width:11px;height:1.5px}
.lpm::after{width:1.5px;height:11px;transition:height .25s var(--e)}
.lrow[open] .lpm{border-color:var(--acc-line);transform:rotate(90deg)}
.lrow[open] .lpm::after{height:0}
.lrow::details-content{block-size:0;overflow:hidden;
  transition:block-size .34s cubic-bezier(.25,.9,.3,1),content-visibility .34s allow-discrete}
.lrow[open]::details-content{block-size:auto}
.lbody{padding:0 6px 30px;max-width:var(--measure)}
.lbody .case-stats{margin-bottom:18px}
.lbody p{color:var(--ink2)}
.lstart{margin-top:14px;color:var(--ink3);font-family:var(--fm);letter-spacing:.02em}
.lbody .case-media{margin-top:22px;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line)}
.lbody .case-media img{width:100%;height:auto;display:block}

/* arrival */
.ledger .lrow{opacity:0;transform:translateY(14px)}
.ledger.go .lrow{opacity:1;transform:none;
  transition:opacity .5s var(--e),transform .5s var(--e),padding-left .25s var(--e)}
.ledger.go .lrow:nth-child(2){transition-delay:.09s}
.ledger.go .lrow:nth-child(3){transition-delay:.18s}
.ledger.go .lrow:nth-child(4){transition-delay:.27s}

@media(max-width:860px){
  .lrow summary{grid-template-columns:1fr auto;gap:12px 16px;padding:22px 4px}
  .lhero{grid-column:1;grid-row:2}
  .lh{grid-column:1/-1;grid-row:3}
  .lpm{grid-column:2;grid-row:1}
}
@media(prefers-reduced-motion:reduce){
  .ledger .lrow{opacity:1!important;transform:none!important}
  .lrow::details-content{transition:none!important}
}


/* ═══════════ INTERIOR HERO · optional right-hand slot ═══════════
   Every interior page shared one hero with an empty right half. It now takes
   an optional element; /work/ fills it with the dashboards the headline
   promises, drifting on the same cycle as the homepage icon field. */
.ph-in{display:grid;grid-template-columns:1fr .92fr;gap:48px;align-items:center}
.ph-in.solo{grid-template-columns:1fr}
.ph-txt h1{margin:16px 0 18px}
.ph-in:not(.solo) .ph-txt p{max-width:46ch}
.ph-right{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center}
.frags{position:relative;width:100%;max-width:430px;height:300px}
.frag{position:absolute;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh3);background-color:#fff;will-change:transform;display:block;
  animation:ph-bob var(--d,4s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.frag img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.frag.f1{width:270px;height:150px;left:0;top:16px;transform:rotate(-4deg)}
.frag.f2{width:250px;height:140px;right:0;top:96px;transform:rotate(3deg)}
.frag.f3{width:230px;height:120px;left:44px;bottom:0;transform:rotate(-1.5deg)}
@keyframes ph-bob{from{transform:translate3d(0,-8px,0)}to{transform:translate3d(0,8px,0)}}

@media(max-width:960px){
  .ph-in{grid-template-columns:1fr;gap:30px}
  .ph-in:not(.solo) .ph-txt p{max-width:62ch}
  .ph-right{min-height:250px}
  .frags{max-width:360px;height:250px}
  .frag.f1{width:220px;height:124px}
  .frag.f2{width:205px;height:116px;top:80px}
  .frag.f3{width:190px;height:100px;left:34px}
}
@media(max-width:560px){
  .ph-right{min-height:210px}
  .frags{max-width:300px;height:210px}
  .frag.f1{width:186px;height:104px;top:8px}
  .frag.f2{width:172px;height:96px;top:66px}
  .frag.f3{width:160px;height:86px;left:26px}
}
@media(prefers-reduced-motion:reduce){.frag{animation:none!important}}


/* ═══════════ TIKTOK SHOP HERO · the LIVE screen and the GMV panel ═══════════
   T-I. Two objects docked into one: a TikTok Shop LIVE tucked behind the panel
   holding the figure that LIVE produced. The assembly bobs as a single unit —
   animating the two halves separately pulls them apart at the seam. */
.mg{position:relative;width:100%;max-width:500px;
  animation:tt-bob 5.6s ease-in-out infinite alternate}
.mg-dock{display:flex;align-items:center}
.mcards.tuck{position:relative;width:152px;height:270px;flex:none;z-index:2}
.mcards.tuck .mcard{position:absolute;left:0;top:0;width:152px;aspect-ratio:9/16;display:block;
  animation:tt-drift 4.2s ease-in-out infinite alternate}

@keyframes tt-bob{from{transform:translate3d(0,-8px,0)}to{transform:translate3d(0,8px,0)}}
@keyframes tt-drift{from{transform:translate3d(0,-3px,0)}to{transform:translate3d(0,3px,0)}}

.mcard .cframe{position:absolute;inset:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh3);transform:rotate(-5deg);
  background-image:
    radial-gradient(58% 34% at 52% 62%,rgba(120,140,160,.42),transparent 70%),
    radial-gradient(26% 15% at 52% 34%,rgba(120,140,160,.38),transparent 72%),
    linear-gradient(163deg,#CFE9D6,#E9EDF0 46%,#DDE2E7)}
.mcard .cframe::before{content:'';position:absolute;left:0;right:0;bottom:0;height:52%;
  background-image:linear-gradient(transparent,rgba(14,18,24,.68))}
.mcard .cframe::after{content:'';position:absolute;left:0;right:0;top:0;height:26%;
  background-image:linear-gradient(rgba(16,20,26,.4),transparent)}

.lbar{position:absolute;left:7px;right:7px;top:7px;display:flex;align-items:center;gap:6px;z-index:2}
.lhost{display:flex;align-items:center;gap:5px;background-color:rgba(16,20,26,.42);
  border-radius:20px;padding:2px 8px 2px 2px;min-width:0}
.lav{width:17px;height:17px;border-radius:50%;flex:none;
  background-image:linear-gradient(140deg,#fff,#C9D2DA)}
.lnm{display:flex;flex-direction:column;min-width:0}
.lnm b{font-size:8.5px;font-weight:700;color:#fff;line-height:1.15;white-space:nowrap}
.lnm em{font-family:var(--fm);font-size:6.5px;font-style:normal;color:rgba(255,255,255,.72);
  line-height:1.2;white-space:nowrap}
.lviewers{display:flex;align-items:center;gap:3px;margin-left:auto;flex:none;
  background-color:rgba(16,20,26,.42);border-radius:20px;padding:3px 6px;
  font-family:var(--fm);font-size:7px;font-weight:700;color:#fff}
.lviewers i{width:5px;height:5px;border-radius:50%;background-color:#fff;opacity:.85}
.llive{position:absolute;top:31px;left:7px;z-index:2;font-family:var(--fm);font-size:7.5px;
  font-weight:700;letter-spacing:.09em;background-color:#FF3B5C;color:#fff;padding:2px 5px;border-radius:3px}

.lchat{position:absolute;left:7px;right:30px;bottom:42px;height:40px;overflow:hidden;z-index:2;
  -webkit-mask-image:linear-gradient(transparent,#000 46%);mask-image:linear-gradient(transparent,#000 46%)}
.lroll{display:block;animation:tt-chat 16s linear infinite}
.lchat s{display:block;text-decoration:none;font-size:7.5px;line-height:1.5;color:rgba(255,255,255,.94);
  text-shadow:0 1px 3px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes tt-chat{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.lhearts{position:absolute;right:9px;bottom:44px;width:16px;height:70px;z-index:2}
.lhearts b{position:absolute;bottom:0;left:2px;width:9px;height:9px;background-color:#FF3B5C;
  transform:rotate(-45deg);animation:tt-heart 4.6s ease-out infinite;animation-delay:var(--hd,0s);opacity:0}
.lhearts b::before,.lhearts b::after{content:'';position:absolute;width:9px;height:9px;border-radius:50%;
  background-color:#FF3B5C}
.lhearts b::before{top:-4.5px;left:0}
.lhearts b::after{top:0;right:-4.5px}
@keyframes tt-heart{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(-45deg) scale(.6)}
  14%{opacity:.9}
  70%{opacity:.55}
  100%{opacity:0;transform:translate3d(-7px,-68px,0) rotate(-45deg) scale(1)}}

.lprod{position:absolute;left:7px;right:7px;bottom:7px;height:30px;z-index:2;border-radius:7px;
  background-color:rgba(255,255,255,.95);display:flex;align-items:center;gap:6px;padding:0 6px;
  box-shadow:0 2px 8px rgba(0,0,0,.16)}
.lpin{width:17px;height:17px;border-radius:4px;flex:none;background-color:var(--ink);color:#fff;
  font-family:var(--fm);font-size:8px;font-weight:700;font-style:normal;
  display:flex;align-items:center;justify-content:center}
.lpn{font-size:8px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1;min-width:0}
.lprod em{font-family:var(--fm);font-size:7px;font-weight:700;font-style:normal;letter-spacing:.04em;
  background-color:var(--acc);color:var(--acc-ink);border-radius:20px;padding:3px 7px;flex:none}

.feed{display:block;position:relative;width:100%;max-width:400px;border-radius:18px;
  background-color:#fff;border:1px solid var(--line);box-shadow:var(--sh3);overflow:hidden}
.feed.compact{flex:1;min-width:0;padding:16px 16px 6px}
.mg-dock .feed.compact{margin-left:-28px;padding-left:56px}
.fhd{display:flex;align-items:center;gap:7px;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.fdot{width:7px;height:7px;border-radius:50%;background-color:var(--acc);flex:none;
  animation:tt-pulse 2.2s ease-in-out infinite}
.ftot{display:block;margin:12px 0 14px}
.ftot b{display:block;font-size:31px;font-weight:800;letter-spacing:-.04em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.05}
.ftot i{display:block;margin-top:5px;font-family:var(--fm);font-size:10.5px;letter-spacing:.03em;
  color:var(--ink3);font-style:normal}
.ftrack{display:block;height:100px;overflow:hidden;position:relative;border-top:1px solid var(--line);
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 68%,transparent);
  mask-image:linear-gradient(transparent,#000 14%,#000 68%,transparent)}
.fscroll{display:block;animation:tt-roll 22s linear infinite}
.frow{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}
.frow i{width:6px;height:6px;border-radius:50%;background-color:var(--acc);flex:none}
.frow span{font-size:12.5px;color:var(--ink2);flex:1}
.frow b{font-family:var(--fm);font-size:12px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
@keyframes tt-roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes tt-pulse{0%,100%{opacity:1}50%{opacity:.28}}

@media(max-width:960px){
  .mg{max-width:420px}
  .mcards.tuck{width:134px;height:238px}
  .mcards.tuck .mcard{width:134px}
}
@media(max-width:560px){
  /* the phone stacks: panel first, then the LIVE screen underneath it */
  .mg{max-width:340px}
  .mg-dock{flex-direction:column;align-items:center}
  .mg-dock .feed.compact{order:1;width:100%;max-width:100%;margin-left:0;padding-left:15px;margin-bottom:14px}
  .mg-dock .mcards.tuck{order:2;width:auto;height:auto;display:block}
  .mg-dock .mcards.tuck .mcard{position:relative;left:auto;top:auto;width:150px}
  .feed.compact{padding:15px 15px 6px}
  .ftot b{font-size:29px}
}
@media(prefers-reduced-motion:reduce){
  .mg,.mcards.tuck .mcard,.lroll,.fscroll,.fdot,.lhearts b{animation:none!important}
  .lhearts{display:none}
}


/* ═══════════ SERVICE FEATURES · S-D ═══════════
   Each claim alternates against a small object built from the design system,
   so the right-hand column carries something rather than sitting empty. */
.falt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center;
  margin-bottom:clamp(44px,6vw,80px)}
.falt:last-child{margin-bottom:0}
.falt:nth-child(even) .fa-txt{order:2}
.fa-txt h3{margin:12px 0 14px}
.fa-txt p{color:var(--ink2)}
.fobj{display:flex;align-items:center;justify-content:center}

/* the recruitment queue */
.ro-hd{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.ro,.bstrip{width:100%;max-width:400px;border:1px solid var(--line);border-radius:var(--r-card);
  background-color:#fff;box-shadow:var(--sh3);padding:22px 22px 20px}
.ro-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.ro-av{width:24px;height:24px;border-radius:50%;flex:none;border:2px solid var(--line2);
  background-image:linear-gradient(150deg,#E6E9ED,#CFD5DC)}
.ro-row b{flex:1;font-family:var(--fm);font-size:12px;font-weight:500;color:var(--ink2)}
.ro-row em{font-family:var(--fm);font-size:9.5px;font-style:normal;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3);border:1px solid var(--line2);border-radius:20px;padding:3px 8px}
.ro-row.signed .ro-av{border-color:var(--acc)}
.ro-row.signed em{color:var(--acc-ink);background-color:var(--acc);border-color:var(--acc)}
.ro.go .ro-row.signed .ro-av,.ro.go .ro-row.signed em{animation:ro-pop .5s var(--e) backwards;
  animation-delay:var(--rd)}
@keyframes ro-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.ro-foot{display:block;margin-top:16px;font-size:13px;color:var(--ink2)}
.ro-foot b{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.ro-foot b::after{content:'+';color:var(--acc-deep)}

/* the brief anatomy */
.bs-track{display:grid;gap:10px}
.bs{display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:12px;padding:11px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateX(-10px)}
.bstrip.go .bs{opacity:1;transform:none;
  transition:opacity .5s var(--e),transform .5s var(--e);transition-delay:var(--bd)}
.bs i{grid-row:1/3;width:26px;height:26px;border-radius:7px;background-color:var(--ink);color:#fff;
  font-family:var(--fm);font-size:11px;font-weight:700;font-style:normal;
  display:flex;align-items:center;justify-content:center}
.bs b{font-size:14.5px;letter-spacing:-.01em;color:var(--ink)}
.bs em{font-size:12.5px;font-style:normal;color:var(--ink3);line-height:1.35}

/* the 82.38% ring — named gvring because .ring is already the homepage donut */
.gvring-wrap{position:relative;width:100%;max-width:300px;display:flex;flex-direction:column;
  align-items:center;text-align:center}
.gvring-box{position:relative;width:190px;height:190px;display:block}
.gvring{width:190px;height:190px;display:block;position:static}
.rarc{stroke-dasharray:327;stroke-dashoffset:327}
.gvring-wrap.go .rarc{animation:gvring-fill 1.5s cubic-bezier(.25,.9,.3,1) forwards}
@keyframes gvring-fill{to{stroke-dashoffset:57.3}}
.gvring-c{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;
  flex-direction:column;gap:2px}
.gvring-c b{font-size:29px;font-weight:800;letter-spacing:-.035em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.gvring-c i{font-family:var(--fm);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);font-style:normal}
.gvring-k{margin-top:16px;font-family:var(--fm);font-size:11px;letter-spacing:.02em;color:var(--ink3);
  max-width:30ch;line-height:1.5}

@media(max-width:900px){
  .falt{grid-template-columns:1fr;gap:28px}
  .falt:nth-child(even) .fa-txt{order:0}
  .gvring,.gvring-box{width:160px;height:160px}
  .gvring-c b{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
  .ro .ro-row.signed .ro-av,.ro .ro-row.signed em,.bs{animation:none!important;
    opacity:1!important;transform:none!important}
  .rarc{animation:none!important;stroke-dashoffset:57.3}
}


/* ═══════════ TIER SCALE · P-B ═══════════
   The section asks the visitor to find the row that describes them, so the
   ranges are placed on a rail rather than only typed into the headings. */
.pscale{margin-top:52px}
.pc-n{display:block;font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;color:var(--acc-deep)}
.ps-axis{position:relative;height:96px;margin-bottom:14px}
.ps-rail{position:absolute;left:0;right:0;bottom:26px;height:3px;border-radius:3px;
  background-color:var(--line2);display:block;overflow:hidden}
.ps-rail i{position:absolute;inset:0;background-image:linear-gradient(90deg,var(--gt1),var(--gt2));
  transform:scaleX(0);transform-origin:left}
.pscale.go .ps-rail i{transform:none;transition:transform 1.1s cubic-bezier(.25,.9,.3,1)}
.ps-pin{position:absolute;left:var(--x);bottom:26px;transform:translateX(-50%);display:flex;
  flex-direction:column;align-items:center;gap:5px;opacity:0}
.pscale.go .ps-pin{opacity:1;transition:opacity .5s var(--e);transition-delay:var(--pd)}
.ps-pin i{order:3;width:13px;height:13px;border-radius:50%;background-color:var(--acc);
  border:3px solid #fff;box-shadow:0 0 0 1px var(--acc);margin-bottom:-8px}
.ps-pin b{order:1;font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ps-pin em{order:2;font-family:var(--fm);font-size:10.5px;font-style:normal;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);white-space:nowrap;margin-bottom:6px}
.ps-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ps-card{border:1px solid var(--line);border-radius:var(--r-card);background-color:#fff;
  padding:24px 22px;opacity:0;transform:translateY(12px)}
.pscale.go .ps-card{opacity:1;transform:none;
  transition:opacity .55s var(--e),transform .55s var(--e);transition-delay:var(--pd)}
.ps-card h4{font-size:17px;line-height:1.3;margin:10px 0 10px}
.ps-card p{color:var(--ink2);font-size:14.5px}

@media(max-width:900px){
  .ps-cards{grid-template-columns:1fr}
  .ps-axis{height:auto;margin-bottom:26px}
  /* the rail must keep its containing block — its fill is inset:0 and will
     size against the section card if the rail goes static */
  .ps-pin{position:static;transform:none;flex-direction:row;align-items:baseline;gap:10px;
    justify-content:flex-start;padding:7px 0;border-bottom:1px solid var(--line)}
  .ps-rail{position:relative;left:auto;right:auto;bottom:auto;width:100%;margin-bottom:16px}
  .ps-pin i{display:none}
  .ps-pin em{margin-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .ps-rail i{transform:none!important}
  .ps-pin,.ps-card{opacity:1!important;transform:none!important}
}


/* ═══════════ SERVICE-PAGE OBJECTS · Amazon, Shopify, Fulfillment ═══════════
   Every object restates a line already printed on its own page. */
.objcard{width:100%;max-width:400px;border:1px solid var(--line);border-radius:var(--r-card);
  background-color:#fff;box-shadow:var(--sh3);padding:22px 22px 20px}
.objhd{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:16px}
.az-note{display:block;margin-top:16px;font-size:12.5px;line-height:1.45;color:var(--ink3)}
.ob-steps{display:grid;gap:2px}
.ob-step{display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:12px;padding:11px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateX(-10px)}
.objcard.go .ob-step{opacity:1;transform:none;
  transition:opacity .5s var(--e),transform .5s var(--e);transition-delay:var(--bd)}
.ob-step i{grid-row:1/3;width:26px;height:26px;border-radius:7px;background-color:var(--ink);color:#fff;
  font-family:var(--fm);font-size:11px;font-weight:700;font-style:normal;
  display:flex;align-items:center;justify-content:center}
.ob-step b{font-size:14.5px;letter-spacing:-.01em;color:var(--ink)}
.ob-step em{font-size:12.5px;font-style:normal;color:var(--ink3);line-height:1.35}
.az-play{width:0;height:0;border-left:9px solid var(--ink);border-top:6px solid transparent;
  border-bottom:6px solid transparent;flex:none;margin-left:2px}

.az-flow{display:flex;align-items:center;gap:10px}
.az-tt{flex:none;width:62px;height:96px;border-radius:10px;border:1px solid var(--line);
  background-image:linear-gradient(165deg,#E4EAF0,#D6DDE5);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px}
.az-tt em{font-family:var(--fm);font-size:7.5px;font-style:normal;color:var(--ink3);text-align:center;
  line-height:1.2;padding:0 4px}
.az-arrow{width:52px;height:24px;flex:none}
.az-arrow path{stroke-dasharray:70;stroke-dashoffset:70}
.objcard.go .az-arrow path{animation:ob-draw 1.6s ease-in-out .35s forwards}
@keyframes ob-draw{to{stroke-dashoffset:0}}
.az-search{flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:42px;padding:0 12px;
  border:1px solid var(--line2);border-radius:22px;background-color:var(--alt)}
.az-mag{width:13px;height:13px;border-radius:50%;border:2px solid var(--ink3);flex:none;position:relative}
.az-mag::after{content:'';position:absolute;right:-4px;bottom:-3px;width:6px;height:2px;
  background-color:var(--ink3);transform:rotate(45deg)}
.az-type{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden}
.az-type::after{content:'your brand name'}
.objcard.go .az-type{animation:az-typing 1.5s steps(16) .9s backwards}
@keyframes az-typing{from{max-width:0}to{max-width:14ch}}
.az-search s{width:1.5px;height:16px;background-color:var(--acc);text-decoration:none;flex:none;
  animation:az-caret 1s steps(1) infinite}
@keyframes az-caret{0%,50%{opacity:1}51%,100%{opacity:0}}
.az-slots{display:grid;gap:8px}
.az-slot{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:10px;
  border:1px solid var(--line);background-color:var(--alt);opacity:0;transform:translateY(8px)}
.objcard.go .az-slot{opacity:1;transform:none;transition:opacity .45s var(--e),transform .45s var(--e)}
.objcard.go .az-slot:nth-child(2){transition-delay:.2s}
.objcard.go .az-slot:nth-child(3){transition-delay:.4s}
.az-slot i{width:22px;height:22px;border-radius:6px;background-color:var(--line2);color:var(--ink2);
  font-family:var(--fm);font-size:11px;font-weight:700;font-style:normal;flex:none;
  display:flex;align-items:center;justify-content:center}
.az-slot b{flex:1;font-size:14px;color:var(--ink2)}
.az-slot em{font-family:var(--fm);font-size:9.5px;font-style:normal;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3)}
.az-slot.own{background-color:#fff;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-wash)}
.az-slot.own i{background-color:var(--acc);color:var(--acc-ink)}
.az-slot.own b{color:var(--ink);font-weight:700}
.az-slot.own em{color:var(--acc-deep)}

.sh-fan,.fu-hub{position:relative;width:100%;max-width:340px;display:flex;flex-direction:column;
  align-items:center}
.sh-src,.fu-box{display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;
  border:1px solid var(--line);background-color:#fff;box-shadow:var(--sh3);font-size:13.5px;
  font-weight:600;color:var(--ink)}
.sh-src em{font-family:var(--fm);font-size:11px;font-style:normal;color:var(--ink2);font-weight:400}
.sh-web{width:220px;height:110px;margin:-4px 0 -6px;overflow:visible}
.sh-web path{stroke-dasharray:160;stroke-dashoffset:160}
.go .sh-web path,.objcard.go .sh-web path{animation:ob-draw 1.1s ease-in-out forwards;
  animation-delay:var(--td,0s)}
.sh-outs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sh-outs b{font-family:var(--fm);font-size:10.5px;font-weight:700;letter-spacing:.04em;
  border:1px solid var(--line2);border-radius:20px;padding:7px 12px;background-color:#fff;color:var(--ink2)}
.sh-page{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background-color:var(--alt);padding:14px}
.sh-hd{display:block;height:74px;border-radius:8px;
  background-image:linear-gradient(150deg,#DCE6EC,#CBD5DE);margin-bottom:12px}
.sh-q{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.sh-a{display:inline-block;font-family:var(--fm);font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;background-color:var(--acc);color:var(--acc-ink);border-radius:5px;
  padding:4px 8px;opacity:0;transform:translateY(-4px)}
.objcard.go .sh-a{opacity:1;transform:none;transition:opacity .5s var(--e) .5s,transform .5s var(--e) .5s}
.sh-lines{display:grid;gap:6px;margin:12px 0 14px}
.sh-lines s{height:6px;border-radius:3px;background-color:var(--line2);text-decoration:none}
.sh-lines s:nth-child(2){width:78%}.sh-lines s:nth-child(3){width:52%}
.sh-cta{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--acc-ink);
  background-color:var(--acc);border-radius:9px;padding:11px}
.sh-fmts{display:flex;gap:12px;align-items:flex-end;justify-content:center;min-height:150px}
.sh-fmt{border:1px solid var(--line);border-radius:10px;background-color:var(--alt);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:3px;opacity:0;transform:translateY(10px)}
.objcard.go .sh-fmt{opacity:1;transform:none;
  transition:opacity .5s var(--e),transform .5s var(--e);transition-delay:var(--bd)}
.sh-fmt.v{width:78px;height:139px}.sh-fmt.s{width:104px;height:104px}.sh-fmt.h{width:132px;height:74px}
.sh-fmt b{font-family:var(--fm);font-size:12px;font-weight:700;color:var(--ink)}
.sh-fmt em{font-family:var(--fm);font-size:9px;font-style:normal;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3)}
.sh-loop{display:flex;flex-direction:column}
.sh-node{display:flex;align-items:center;gap:11px;padding:13px;border-radius:10px;
  border:1px solid var(--line);background-color:var(--alt);opacity:0;transform:translateY(8px)}
.objcard.go .sh-node,.objcard.go .sh-link{opacity:1;transform:none;
  transition:opacity .45s var(--e),transform .45s var(--e);transition-delay:var(--bd)}
.sh-node i{width:24px;height:24px;border-radius:50%;background-color:var(--line2);color:var(--ink2);
  font-family:var(--fm);font-size:11px;font-weight:700;font-style:normal;flex:none;
  display:flex;align-items:center;justify-content:center}
.sh-node b{font-size:14px;color:var(--ink2)}
.sh-node.on{background-color:#fff;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-wash)}
.sh-node.on i{background-color:var(--acc);color:var(--acc-ink)}
.sh-node.on b{color:var(--ink);font-weight:700}
.sh-link{display:block;width:2px;height:18px;margin-left:25px;background-color:var(--acc);opacity:0}

.fu-time{position:relative;width:100%;max-width:430px;padding-top:8px}
.fu-rail{position:absolute;left:0;right:0;top:20px;height:3px;border-radius:3px;
  background-color:var(--line2);display:block;overflow:hidden}
.fu-rail i{position:absolute;inset:0;background-image:linear-gradient(90deg,var(--gt1),var(--gt2));
  transform:scaleX(0);transform-origin:left;display:block}
.fu-time.go .fu-rail i{transform:none;transition:transform 1.2s cubic-bezier(.25,.9,.3,1)}
.fu-stop{position:absolute;left:var(--x);top:14px;transform:translateX(-50%);display:flex;
  flex-direction:column;align-items:center;gap:4px;width:110px;opacity:0}
.fu-time.go .fu-stop{opacity:1;transition:opacity .5s var(--e);transition-delay:var(--pd)}
.fu-stop i{width:13px;height:13px;border-radius:50%;background-color:var(--acc);border:3px solid #fff;
  box-shadow:0 0 0 1px var(--acc)}
.fu-stop b{font-size:13px;font-weight:700;color:var(--ink);text-align:center;line-height:1.25;margin-top:6px}
.fu-stop em{font-family:var(--fm);font-size:10px;font-style:normal;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3);text-align:center}
.fu-board{display:grid;gap:2px}
.fu-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateX(-8px)}
.objcard.go .fu-row{opacity:1;transform:none;
  transition:opacity .45s var(--e),transform .45s var(--e);transition-delay:var(--bd)}
.fu-row .ro-av{width:24px;height:24px;border-radius:50%;flex:none;border:2px solid var(--line2);
  background-image:linear-gradient(150deg,#E6E9ED,#CFD5DC)}
.fu-row b{flex:1;font-family:var(--fm);font-size:12px;font-weight:500;color:var(--ink2)}
.fu-row em{font-family:var(--fm);font-size:9.5px;font-style:normal;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3);border:1px solid var(--line2);border-radius:20px;padding:3px 8px}
.fu-row em.ok{background-color:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.fu-box{font-family:var(--fm);font-size:12px;letter-spacing:.05em;text-transform:uppercase}

/* a sequence rail is stages, not money — the pin label reads as a label */
.pscale.seq .ps-pin b{font-family:var(--fm);font-size:13px;font-weight:700;letter-spacing:.08em}
.pscale.seq .ps-pin em{font-size:14px;letter-spacing:0;text-transform:none;font-family:inherit}

@media(max-width:900px){
  .fu-time{padding-top:0}
  .fu-rail{position:relative;top:auto;margin-bottom:16px}
  .fu-stop{position:static;transform:none;width:auto;flex-direction:row;align-items:baseline;gap:10px;
    justify-content:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
  .fu-stop i{display:none}
  .fu-stop b{margin-top:0}
  .sh-fmts{min-height:0;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  .fu-rail i{transform:none!important}
  .fu-stop,.ob-step,.az-slot,.sh-fmt,.sh-node,.sh-link,.fu-row,.sh-a{
    opacity:1!important;transform:none!important}
  .sh-web path,.az-arrow path{animation:none!important;stroke-dashoffset:0}
  .az-type,.az-search s{animation:none!important}
}


/* ═══════════ ABOUT ═══════════
   The hero object: the arrangement at most agencies, then this one, then both
   offices in their real local time. */
.ax{width:100%;max-width:490px;display:grid;gap:16px}
.ax-lane{display:flex;align-items:center;gap:8px 6px;flex-wrap:wrap;padding:18px 18px 16px;
  border-radius:14px;border:1px solid var(--line);background-color:var(--alt);position:relative}
.ax-lane em{position:absolute;top:-9px;left:16px;font-family:var(--fm);font-size:9.5px;font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;background-color:#fff;border:1px solid var(--line);
  border-radius:20px;padding:2px 9px;color:var(--ink3)}
.ax-lane.usual{opacity:0;transform:translateY(8px)}
.ax.go .ax-lane.usual{opacity:1;transform:none;transition:opacity .5s var(--e),transform .5s var(--e)}
.ax-lane.ours{background-color:#fff;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-wash);
  opacity:0;transform:translateY(8px)}
.ax.go .ax-lane.ours{opacity:1;transform:none;
  transition:opacity .5s var(--e) .22s,transform .5s var(--e) .22s}
.ax-lane.ours em{border-color:var(--acc);color:var(--acc-deep)}
.ax-chip{font-size:12.5px;font-weight:600;color:var(--ink2);background-color:#fff;
  border:1px solid var(--line2);border-radius:20px;padding:7px 12px;white-space:nowrap}
.ax-chip.ghost{color:var(--ink3);border-style:dashed}
.ax-chip.arw::before{content:'\2192';margin-right:7px;color:var(--ink3);font-weight:400}
.ax-chip.solid{background-color:var(--ink);border-color:var(--ink);color:#fff}
.ax-lane i{width:16px;height:1.5px;background-color:var(--line2);flex:none}
.ax-lane i.run{background-color:var(--acc);transform:scaleX(0);transform-origin:left}
.ax.go .ax-lane i.run{transform:none;transition:transform .45s var(--e) .5s}
.ax-faces{display:flex;gap:12px;align-items:flex-start}
.ax-face{display:flex;flex-direction:column;align-items:center;gap:5px;width:56px;
  opacity:0;transform:translateY(6px) scale(.9)}
.ax.go .ax-face{opacity:1;transform:none;
  transition:opacity .45s var(--e),transform .45s var(--e);transition-delay:var(--bd)}
.ax-face img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid #fff;box-shadow:0 2px 8px rgba(20,24,30,.16)}
.ax-face b{font-size:11px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.ax-clocks{display:flex;gap:20px;padding-left:4px;opacity:0}
.ax.go .ax-clocks{opacity:1;transition:opacity .5s var(--e) .95s}
.ax-clocks span{display:flex;align-items:center;gap:7px;font-family:var(--fm);font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.ax-clocks i{width:6px;height:6px;border-radius:50%;background-color:var(--acc);flex:none}
.ax-clocks s{text-decoration:none;font-size:13px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:0}

/* the two feature objects */
.ab-rows{display:grid;gap:2px}
.ab-row{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:14px 0;
  border-bottom:1px solid var(--line);opacity:0;transform:translateY(8px)}
.objcard.go .ab-row{opacity:1;transform:none;
  transition:opacity .5s var(--e),transform .5s var(--e);transition-delay:var(--bd)}
.ab-row b{font-size:15px;letter-spacing:-.015em;color:var(--ink)}
.ab-row s{grid-row:1/3;grid-column:2;align-self:center;font-family:var(--fm);font-size:22px;
  font-weight:700;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
.ab-row em{grid-column:1;font-size:12.5px;font-style:normal;color:var(--ink3);line-height:1.35}
.ab-cap{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.ab-cap i{width:44px;height:44px;border-radius:11px;border:2px dashed var(--line2);flex:none;
  opacity:0;transform:scale(.8)}
.objcard.go .ab-cap i{opacity:1;transform:none;border-color:var(--acc);border-style:solid;
  background-color:var(--acc-wash);
  transition:opacity .4s var(--e),transform .4s var(--e);transition-delay:var(--bd)}
.ab-capk{display:block;font-size:14px;color:var(--ink2)}
.ab-capk b{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-right:4px}

/* the team — one card per person, so three no longer leaves a gap */
.ab-team3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.ab-card{border:1px solid var(--line);border-radius:var(--r-card);background-color:#fff;
  padding:28px 24px 30px;text-align:center;opacity:0;transform:translateY(12px)}
.ab-team3.go .ab-card{opacity:1;transform:none;
  transition:opacity .55s var(--e),transform .55s var(--e);transition-delay:var(--bd)}
.ab-ph{display:block;width:132px;height:132px;margin:0 auto 18px;border-radius:50%;overflow:hidden;
  border:3px solid #fff;box-shadow:var(--sh2);background-color:var(--fill)}
.ab-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ab-card h4{font-size:20px;letter-spacing:-.02em;margin-bottom:4px}
.ab-role{display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acc-deep);margin-bottom:10px}
.ab-card p{font-size:14px;color:var(--ink2);line-height:1.45}

@media(max-width:900px){
  .ab-team3{grid-template-columns:1fr;gap:16px}
}
@media(max-width:560px){
  .ax-lane{padding:16px 14px 14px;gap:7px}
  .ax-chip{font-size:11.5px;padding:6px 10px}
  .ax-faces{gap:8px}
  .ax-face{width:50px}
  .ax-face img{width:40px;height:40px}
  .ax-clocks{gap:14px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  .ax-lane,.ax-face,.ax-clocks,.ab-row,.ab-cap i,.ab-card{opacity:1!important;transform:none!important}
  .ax-lane i.run{transform:none!important}
}


/* ═══════════ LOGO MARQUEE · edge fade ═══════════
   A marquee always cuts whatever is entering and leaving. Masking the wrap
   rather than .trust keeps the strip's background and rules intact while the
   logos themselves dissolve at both ends. */
.trust .mq-clip{max-width:none;padding-inline:0;overflow:hidden;
  -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%)}
@media(max-width:640px){
  .trust .mq-clip{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
}
@media(prefers-reduced-motion:reduce){
  /* no movement, so nothing is mid-transit and nothing needs fading */
  .trust .mq-clip{-webkit-mask-image:none;mask-image:none;padding-inline:var(--wrap-pad,24px)}
}


/* ═══════════ BUTTON WRAP ON NARROW PHONES ═══════════
   .btn is white-space:nowrap, so a long label cannot break. "See the
   dashboards while you wait" measured 343px inside a 320px column on a 360px
   phone and pushed the document 3px sideways. Let the label wrap instead of
   letting the button decide the page width. */
@media(max-width:480px){
  .btn{white-space:normal;max-width:100%;text-align:center;justify-content:center}
}