/* ============================================================
   Custom Solutions AI — v9
   "monopo saigon" — cinematic darkroom with floating white type
   Monochrome editorial canvas interrupted by full-bleed dark frames.
   ============================================================ */

:root{
  /* Colors */
  --paper:#ffffff;
  --ink:#181818;
  --black:#000000;
  --carbon:#181818;
  --ash:#6d6d6d;
  --smoke:#9a9a9a;
  --pewter:#808080;
  --graphite:#636363;
  --hair:rgba(24,24,24,.14);          /* hairline on light */
  --hair-d:rgba(255,255,255,.16);     /* hairline on dark  */
  --mercury:linear-gradient(90deg,rgb(160,224,171),rgb(255,172,46) 50%,rgb(165,45,37));

  /* Type */
  --f-display:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-alt:'Raleway',ui-sans-serif,system-ui,sans-serif;
  --f-sys:system-ui,ui-sans-serif,-apple-system,sans-serif;

  /* Scale */
  --t-body:16px;   --lh-body:1.58;
  --t-lg:18px;     --lh-lg:1.5;
  --t-sub:30px;    --lh-sub:1.25;
  --t-h-sm:45px;   --lh-h-sm:1.15;
  --t-h:54px;      --lh-h:1.12;
  --t-h-lg:78px;   --lh-h-lg:1.06;
  --t-disp:94px;   --lh-disp:1.0;
  --t-hero:clamp(64px,14vw,225px); --lh-hero:0.78;

  /* Weights */
  --w-light:300; --w-reg:400; --w-med:500; --w-semi:600;

  /* Space */
  --maxw:1440px;
  --gut:clamp(20px,5vw,68px);
  --sec:clamp(72px,11vw,152px);

  --r-pill:75px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-display);
  font-weight:var(--w-reg);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  letter-spacing:-.005em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}

.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
main{position:relative}
.section{padding-block:var(--sec)}
.section.tight{padding-block:clamp(48px,7vw,96px)}

/* ---------- Typography helpers ---------- */
h1,h2,h3,h4{font-weight:var(--w-light);letter-spacing:-.02em;line-height:1.06;color:var(--ink)}
h2{font-size:var(--t-h-lg)}
h3{font-size:var(--t-sub);line-height:var(--lh-sub)}
h4{font-size:21px;line-height:1.25;font-weight:var(--w-reg)}
p{font-size:var(--t-lg);line-height:var(--lh-lg);color:var(--ink)}

.grad{font-style:italic;font-weight:var(--w-light)}              /* editorial emphasis, monochrome */
.section-lead{font-size:var(--t-lg);line-height:1.6;color:var(--ash);max-width:64ch;margin-top:22px}
.muted{color:var(--ash)}
.small{font-size:13px;line-height:1.5}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:var(--w-reg);letter-spacing:.32em;text-transform:uppercase;
  color:var(--ash);margin-bottom:26px;
}
.kicker .dot,.k-ico{width:7px;height:7px;border-radius:50%;background:var(--ink);display:inline-block}
.k-ico{width:auto;height:auto;border-radius:0;background:none;font-size:12px}

/* ---------- Buttons (pills) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-size:12px;font-weight:var(--w-med);letter-spacing:.04em;
  border-radius:var(--r-pill);padding:13px 24px;cursor:pointer;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);
  transition:background .35s ease,color .35s ease,border-color .35s ease,opacity .35s ease;
  text-transform:uppercase;line-height:1;white-space:nowrap;
}
.btn svg{width:15px;height:15px}
.btn i{font-style:normal}
.btn:hover{background:transparent;color:var(--ink)}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-lg{padding:16px 30px;font-size:12px}
.btn.full{width:100%;justify-content:center}

/* on dark surfaces */
.on-dark .btn-primary,.dark-frame .btn-primary,.svc-hero .btn-primary,.callflow .btn-primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.on-dark .btn-primary:hover,.dark-frame .btn-primary:hover,.svc-hero .btn-primary:hover,.callflow .btn-primary:hover{background:transparent;color:var(--paper)}
.on-dark .btn-ghost,.dark-frame .btn-ghost,.svc-hero .btn-ghost,.callflow .btn-ghost{color:var(--paper);border-color:rgba(255,255,255,.4)}
.on-dark .btn-ghost:hover,.dark-frame .btn-ghost:hover,.svc-hero .btn-ghost:hover,.callflow .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ---------- Header / Nav ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:1000}
.skip-link:focus{left:12px;top:12px}

.site-header{position:fixed;top:0;left:0;right:0;z-index:200;background:transparent;transition:background .4s ease,border-color .4s ease;border-bottom:1px solid transparent}
.site-header.scrolled{background:var(--paper);border-bottom:1px solid var(--hair)}
/* when hero is dark, header text is white until scrolled */
.site-header.over-dark:not(.scrolled){color:var(--paper)}
.site-header.over-dark:not(.scrolled) .tb-link,.site-header.over-dark:not(.scrolled) .brand{color:var(--paper)}

.topbar{border-bottom:1px solid var(--hair-d);font-size:11px}
.site-header.scrolled .topbar{border-bottom:1px solid var(--hair)}
.topbar-in{max-width:var(--maxw);margin:0 auto;padding:9px var(--gut);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.tb-item{font-size:11px;letter-spacing:.04em;color:inherit;opacity:.9}
.tb-item b{font-weight:var(--w-semi)}
.tb-status{display:inline-flex;align-items:center;gap:8px}
.tb-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.tb-spacer{flex:1}
.tb-link:hover{text-decoration:underline}

.nav{max-width:var(--maxw);margin:0 auto;padding:18px var(--gut);display:flex;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:var(--w-med);letter-spacing:-.01em;color:inherit}
.brand .mk{width:30px;height:30px;flex:none;display:block}
.brand small{display:block;font-size:9px;letter-spacing:.14em;white-space:nowrap;text-transform:uppercase;color:var(--ash);font-weight:var(--w-reg);margin-top:3px}
.site-header.over-dark:not(.scrolled) .brand small{color:rgba(255,255,255,.6)}

.navpill{display:flex;align-items:center;gap:4px;margin:0 auto}
.navpill a{font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:8px 14px;color:inherit;opacity:.78;border-radius:var(--r-pill);transition:opacity .3s}
.navpill a:hover,.navpill a.on{opacity:1}
.navpill a.on{font-weight:var(--w-med)}

.nav-right{display:flex;align-items:center;gap:16px}
.nav-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.btn-tog{padding:11px 18px}
@media(max-width:1080px){.nav-tag{display:none}}

.hamburger{display:none;flex-direction:column;gap:5px;width:34px;height:34px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer}
.hamburger span{width:22px;height:1.5px;background:currentColor;transition:.3s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;z-index:190;background:var(--black);color:var(--paper);transform:translateY(-100%);transition:transform .55s cubic-bezier(.76,0,.24,1);display:flex;align-items:center;visibility:hidden}
.mobile-menu.open{transform:translateY(0);visibility:visible}
.mobile-menu-inner{width:100%;padding:90px var(--gut) 40px;display:flex;flex-direction:column;gap:6px}
.mobile-menu-inner a{font-size:34px;font-weight:var(--w-light);letter-spacing:-.02em;padding:14px 0;border-bottom:1px solid var(--hair-d);display:flex;align-items:baseline;gap:18px;color:var(--paper)}
.mobile-menu-inner a.btn{border:1px solid var(--paper);justify-content:center;font-size:13px;margin-top:24px}
.mm-n{font-size:12px;color:var(--smoke);letter-spacing:.1em}

@media(max-width:960px){
  .navpill{display:none}
  .hamburger{display:flex}
  .btn-tog{display:none}
}

/* ---------- Mobile sticky CTA ---------- */
.mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:120;background:var(--ink);color:var(--paper);text-align:center;padding:15px;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:720px){.mobile-cta{display:block}}

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* HERO — dark immersive frame */
.hero{position:relative;min-height:100vh;background:var(--black);color:var(--paper);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;padding:160px var(--gut) 120px}
.hero-orb{position:absolute;top:50%;left:50%;width:min(120vw,1100px);height:min(120vw,1100px);transform:translate(-50%,-50%);border-radius:50%;background:var(--mercury);filter:blur(70px) saturate(1.1);opacity:.5;animation:orbDrift 22s ease-in-out infinite;z-index:0}
.hero-orb.b{width:min(70vw,620px);height:min(70vw,620px);opacity:.42;animation:orbDrift2 18s ease-in-out infinite;mix-blend-mode:screen}
@keyframes orbDrift{0%,100%{transform:translate(-52%,-50%) scale(1) rotate(0deg);border-radius:50% 46% 54% 48%}50%{transform:translate(-48%,-54%) scale(1.12) rotate(28deg);border-radius:46% 54% 48% 52%}}
@keyframes orbDrift2{0%,100%{transform:translate(-42%,-44%) scale(1)}50%{transform:translate(-58%,-58%) scale(1.18)}}
.hero-liquid{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.hero-liquid.on{opacity:1}
.hero.has-liquid .hero-orb{opacity:.24}
.hero.has-liquid .hero-orb.b{opacity:.2}
.hero-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;background:radial-gradient(circle at 50% 50%,transparent 30%,rgba(0,0,0,.65) 100%)}
.hero-inner{position:relative;z-index:3;max-width:1200px}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:40px}
.hero-kicker .hk-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 2.4s infinite}
.hero h1{font-size:var(--t-hero);line-height:var(--lh-hero);font-weight:var(--w-light);letter-spacing:-.03em;color:var(--paper);margin:0}
.hero h1 em{font-style:italic;font-weight:var(--w-light)}
.hero-sub{margin:42px auto 0;max-width:62ch;font-size:var(--t-lg);line-height:1.62;color:rgba(255,255,255,.74)}
.hero-sub b{color:#fff;font-weight:var(--w-med)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:48px}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--f-sys)}
.scroll-cue::after{content:"";width:1px;height:46px;background:linear-gradient(rgba(255,255,255,.6),transparent);animation:cueDrop 2s ease-in-out infinite}
@keyframes cueDrop{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}
@media(max-width:640px){.hero{min-height:90vh;padding-top:140px}.hero-sub{font-size:16px}}

/* ===== HERO · light "Creation" — human & AI hands converge on the audit CTA ===== */
.hero.adam.light{background:var(--paper);color:var(--ink);padding:150px var(--gut) 120px}
.hero.adam.light .scroll-cue{display:none}

/* soft 3D blob behind the headline */
.adam-blob{position:absolute;left:50%;top:50%;width:min(64vw,780px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none;
  background:
    radial-gradient(closest-side at 42% 36%, rgba(255,255,255,1), rgba(238,237,243,.85) 58%, rgba(222,221,230,.55) 78%, transparent 92%),
    radial-gradient(40% 40% at 56% 52%, rgba(199,187,235,.20), transparent 70%),
    radial-gradient(34% 34% at 44% 62%, rgba(255,214,170,.16), transparent 70%);
  filter:blur(6px);
  box-shadow:0 60px 120px rgba(24,24,24,.08)}

/* hands — JS anchors the fingertips onto the CTA; static pos is just a starting canvas */
.adam-hand{position:absolute;z-index:2;pointer-events:none;will-change:transform}
.adam-hand .adam-photo{width:100%;height:auto;display:block}
/* widths are pure vw (no px cap): the forearm must always span from the CTA back past the
   viewport edge, so its cut end can never appear on screen at any window size */
.adam-hand.human{left:-3vw;top:40%;width:max(340px,55vw)}
.adam-hand.human .adam-photo{filter:drop-shadow(0 18px 34px rgba(24,24,24,.22))}
.adam-hand.robot{right:-3vw;top:22%;width:max(360px,57vw)}
.adam-hand.robot .adam-photo{filter:drop-shadow(0 18px 34px rgba(24,24,24,.18))}
.adam-hand.fallback{display:none}

/* center */
.adam-core{max-width:820px;z-index:3}
.hero.adam.light h1{display:flex;flex-direction:column;gap:4px;
  font-size:clamp(36px,5vw,72px);line-height:1.06;letter-spacing:-.025em;margin:0}
.hero.adam.light h1 .l1{font-weight:var(--w-semi);color:var(--ink)}
.hero.adam.light h1 .l2{font-weight:var(--w-semi);color:var(--ink);font-size:clamp(22px,2.9vw,42px);letter-spacing:-.015em;margin-top:8px}
.hero.adam.light h1 .l2 em{font-style:normal;font-weight:var(--w-semi);color:#c9c9c9}
.hero.adam.light .hero-cta{margin-top:36px}

/* corner meta — kicker + description (left), deploy chips (right) */
.adam-corner{position:absolute;bottom:46px;z-index:3}
.adam-corner.left{left:var(--gut);max-width:340px;text-align:left}
.adam-kicker{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--smoke);margin:0 0 10px}
.adam-desc{font-size:13px;line-height:1.6;color:var(--graphite);margin:0}
.adam-corner.right{right:var(--gut);display:flex;gap:8px}
.adam-chip{font-size:11px;font-weight:var(--w-med);letter-spacing:.02em;padding:9px 16px;
  border:1px solid var(--hair);border-radius:var(--r-pill);color:var(--ink);background:rgba(255,255,255,.7)}
.adam-rule{position:absolute;left:50%;bottom:44px;width:1px;height:48px;background:rgba(24,24,24,.22);z-index:3}

@media(max-width:900px){
  .adam-corner.left{max-width:270px}
  .adam-corner.right{display:none}
  .adam-rule{display:none}
}
@media(max-width:640px){
  .hero.adam.light{padding-top:130px;padding-bottom:150px}
  .adam-hand.human,.adam-hand.robot{opacity:.9}
  .adam-corner.left{left:var(--gut);right:var(--gut);max-width:none;bottom:36px}
}

/* MARQUEE */
.trust{border-block:1px solid var(--hair);padding:26px 0;overflow:hidden;background:var(--paper)}
.trust-track{display:flex;gap:40px;align-items:center;white-space:nowrap;width:max-content;animation:marq 38s linear infinite;font-size:18px;font-weight:var(--w-light);color:var(--ink)}
.trust-track b{color:var(--smoke)}
.trust-track span{opacity:.85}
@keyframes marq{to{transform:translateX(-50%)}}

/* MANIFESTO */
.manifesto{background:var(--paper)}
.manifesto-line{font-size:clamp(34px,5.4vw,78px);line-height:1.08;font-weight:var(--w-light);letter-spacing:-.025em;max-width:20ch}
.manifesto .section-lead{margin-top:40px;font-size:21px;max-width:60ch}

/* PHASES — dark immersive frame */
.phases{background:var(--black);color:var(--paper)}
.phases h2,.phases .manifesto-line{color:var(--paper)}
.phases .kicker{color:rgba(255,255,255,.66)}
.phases .kicker .dot{background:#fff}
.phases .section-lead{color:rgba(255,255,255,.6)}
.phase-spine{max-width:var(--maxw);margin:64px auto 0;padding-inline:var(--gut);position:relative}
.spine-rail{position:absolute;left:calc(var(--gut) + 7px);top:0;bottom:0;width:1px;background:var(--hair-d)}
.spine-fill{position:absolute;top:0;left:0;width:100%;height:0;background:#fff;transition:height .2s linear}
.phase-list{list-style:none;display:flex;flex-direction:column;gap:30px}
.phase{position:relative;padding-left:46px}
.phase-node{position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%;border:1px solid var(--hair-d);background:var(--black);display:grid;place-items:center}
.phase-node span{width:5px;height:5px;border-radius:50%;background:var(--smoke);transition:background .3s}
.phase.in .phase-node span{background:#fff}
.phase-card{border-bottom:1px solid var(--hair-d);padding-bottom:30px}
.phase-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.phase-num{font-size:13px;letter-spacing:.2em;color:var(--smoke)}
.phase-tag{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);border:1px solid var(--hair-d);border-radius:var(--r-pill);padding:4px 12px}
.phase-card h3{color:var(--paper);font-size:clamp(30px,4vw,54px);font-weight:var(--w-light);margin-bottom:14px}
.phase-card p{color:rgba(255,255,255,.7);font-size:18px;max-width:70ch}
.phase-points{list-style:none;margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 26px}
.phase-points li{font-size:14px;color:rgba(255,255,255,.78);position:relative;padding-left:18px}
.phase-points li::before{content:"—";position:absolute;left:0;color:var(--smoke)}
.readiness-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.phase-pill{font-size:12px;letter-spacing:.04em;border:1px solid var(--hair-d);border-radius:var(--r-pill);padding:6px 14px;color:rgba(255,255,255,.85)}
.phase-link{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--hair-d);padding-bottom:4px}
.phase-link svg{width:16px;height:16px}
.phase-link:hover{border-color:#fff}

/* CAPABILITIES */
.capabilities{background:var(--paper)}
.cap-head{max-width:760px}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:56px;background:var(--hair);border:1px solid var(--hair)}
.cap-card{background:var(--paper);padding:36px 30px}
.cap-stage{height:120px;display:grid;place-items:center;margin-bottom:26px;border:1px solid var(--hair)}
.cap-card h3{font-size:22px;margin-bottom:10px;font-weight:var(--w-reg)}
.cap-card p{font-size:15px;color:var(--ash);line-height:1.55}
.mock-chart{display:flex;align-items:flex-end;gap:7px;height:54px}
.mock-chart i{width:10px;background:var(--ink);animation:bar 2.4s ease-in-out infinite}
.mock-chart i:nth-child(1){height:40%;animation-delay:0s}.mock-chart i:nth-child(2){height:70%;animation-delay:.2s}.mock-chart i:nth-child(3){height:50%;animation-delay:.4s}.mock-chart i:nth-child(4){height:90%;animation-delay:.6s}.mock-chart i:nth-child(5){height:60%;animation-delay:.8s}.mock-chart i:nth-child(6){height:80%;animation-delay:1s}
@keyframes bar{0%,100%{transform:scaleY(.7);transform-origin:bottom}50%{transform:scaleY(1)}}
.mock-flow{display:flex;flex-direction:column;gap:5px;width:100%;padding-inline:8px}
.mock-flow .fnode{font-size:10px;letter-spacing:.02em;color:var(--ash);border:1px solid var(--hair);padding:4px 8px;display:flex;gap:7px;align-items:center}
.mock-flow .fnode b{font-size:9px;background:var(--ink);color:#fff;width:14px;height:14px;display:grid;place-items:center;border-radius:50%;font-weight:var(--w-reg)}
.mock-doc{display:flex;flex-direction:column;gap:7px;width:70px}
.mock-doc i{height:6px;background:var(--smoke)}
.mock-doc i:nth-child(1){width:100%}.mock-doc i:nth-child(2){width:80%}.mock-doc i:nth-child(3){width:90%;background:var(--ink)}.mock-doc i:nth-child(4){width:60%}
.mock-spark svg{width:42px;height:42px;stroke:var(--ink);fill:none}

/* SERVICES grid (homepage) */
.services{background:var(--paper)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:56px;background:var(--hair);border:1px solid var(--hair)}
.service-card{background:var(--paper);padding:40px 34px;display:flex;flex-direction:column;gap:14px;min-height:280px;transition:background .4s ease,color .4s ease}
.service-card .sc-ico{width:46px;height:46px;border:1px solid var(--hair);display:grid;place-items:center;transition:border-color .4s}
.service-card .sc-ico svg{width:22px;height:22px;stroke:currentColor;fill:none}
.service-card h3{font-size:26px;font-weight:var(--w-reg)}
.service-card p{font-size:15px;color:var(--ash);line-height:1.55;flex:1}
.service-card em{font-style:italic}
.sc-go{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.sc-go svg{width:15px;height:15px;transition:transform .3s}
.service-card:hover{background:var(--black);color:var(--paper)}
.service-card:hover h3,.service-card:hover .sc-go{color:var(--paper)}
.service-card:hover p{color:rgba(255,255,255,.7)}
.service-card:hover .sc-ico{border-color:var(--hair-d)}
.service-card:hover .sc-go svg{transform:translateX(5px)}

/* VERTICALS */
.verticals{background:var(--paper)}
.vertical-grid{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:56px;background:var(--hair);border:1px solid var(--hair)}
.vertical{background:var(--paper);padding:32px 24px}
.vertical .v-ico{width:40px;height:40px;display:grid;place-items:center;margin-bottom:22px;border:1px solid var(--hair)}
.vertical .v-ico svg{width:20px;height:20px;stroke:var(--ink);fill:none}
.vertical h3{font-size:19px;font-weight:var(--w-reg);margin-bottom:8px}
.vertical p{font-size:14px;color:var(--ash);line-height:1.5}
.vertical em{font-style:italic}
@media(max-width:1080px){.vertical-grid{grid-template-columns:repeat(2,1fr)}}

/* DIFFERENT — comparison table */
.different{background:var(--black);color:var(--paper)}
.different h2{color:var(--paper)}
.different .kicker{color:rgba(255,255,255,.66)}.different .kicker .dot{background:#fff}
.different .section-lead{color:rgba(255,255,255,.62)}
.table-wrap{overflow-x:auto;margin-top:48px;border:1px solid var(--hair-d)}
.uvp{width:100%;border-collapse:collapse;min-width:760px}
.uvp th,.uvp td{text-align:left;padding:18px 22px;font-size:14px;border-bottom:1px solid var(--hair-d);color:rgba(255,255,255,.72);font-weight:var(--w-reg)}
.uvp thead th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.uvp tbody th{color:#fff;font-weight:var(--w-med)}
.uvp .us{color:#fff;background:rgba(255,255,255,.06);font-weight:var(--w-med)}
.uvp thead .us{color:#fff}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:48px;background:var(--hair-d);border:1px solid var(--hair-d)}
.pillar{background:var(--black);padding:34px 30px}
.pillar .p-ico{width:42px;height:42px;border:1px solid var(--hair-d);display:grid;place-items:center;margin-bottom:22px}
.pillar .p-ico svg{width:20px;height:20px;stroke:#fff;fill:none}
.pillar h3{color:#fff;font-size:24px;font-weight:var(--w-light);margin-bottom:10px}
.pillar p{color:rgba(255,255,255,.68);font-size:15px;line-height:1.55}

/* RESULTS */
.results{background:var(--paper)}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:56px;background:var(--hair);border:1px solid var(--hair)}
.result-card{background:var(--paper);padding:40px 34px}
.r-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);display:inline-block;margin-bottom:24px}
.r-stat{font-size:78px;line-height:.9;font-weight:var(--w-light);letter-spacing:-.03em;margin-bottom:16px}
.r-stat .grad{font-style:normal}
.r-label{font-size:15px;color:var(--ash);line-height:1.55}
.testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:1px;background:var(--hair);border:1px solid var(--hair);border-top:none}
.testimonial{background:var(--paper);padding:40px 34px}
.testimonial blockquote{font-size:24px;font-weight:var(--w-light);line-height:1.4;letter-spacing:-.01em}
.testimonial.is-placeholder blockquote{color:var(--smoke)}
.testimonial figcaption{display:flex;align-items:center;gap:14px;margin-top:26px}
.t-avatar{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px}
.testimonial figcaption b{display:block;font-size:15px;font-weight:var(--w-med)}
.testimonial figcaption small{color:var(--ash);font-size:12px}

/* CTA band */
.cta-band{background:var(--black);color:var(--paper);padding:clamp(48px,7vw,100px) clamp(28px,5vw,80px);text-align:center;position:relative;overflow:hidden}
.cta-band .kicker{color:rgba(255,255,255,.66);justify-content:center}.cta-band .kicker .dot{background:#fff}
.cta-band h2{color:#fff;font-size:clamp(32px,5vw,72px);font-weight:var(--w-light);max-width:18ch;margin:0 auto 22px}
.cta-band p{color:rgba(255,255,255,.7);max-width:60ch;margin:0 auto 36px}
.cta-band .hero-cta{justify-content:center}
.cta-band .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.cta-band .btn-primary:hover{background:transparent;color:#fff}

/* CONTACT */
.contact{background:var(--paper)}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.contact-copy h2{font-size:clamp(40px,5.5vw,78px)}
.contact-points{list-style:none;margin:30px 0;display:flex;flex-direction:column;gap:14px}
.contact-points li{display:flex;align-items:center;gap:14px;font-size:16px;color:var(--ink)}
.contact-points svg{width:20px;height:20px;stroke:var(--ink);fill:none;flex:none}
.contact-meta{font-size:14px;color:var(--ash);margin-top:24px}
.contact-meta a{color:var(--ink);border-bottom:1px solid var(--hair)}
.contact-form{border:1px solid var(--hair);padding:clamp(28px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:20px;background:var(--paper)}
.contact-form .field{display:flex;flex-direction:column;gap:8px}
.contact-form .field.full{grid-column:1/-1}
.contact-form label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.contact-form input,.contact-form select,.contact-form textarea{
  font-family:var(--f-display);font-size:15px;color:var(--ink);background:var(--paper);
  border:none;border-bottom:1px solid var(--hair);border-radius:0;padding:10px 0;width:100%;transition:border-color .3s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--ink)}
.contact-form textarea{resize:vertical}
.contact-form .btn{grid-column:1/-1}
.form-note{grid-column:1/-1;font-size:13px;color:var(--ash);min-height:18px}

/* ============================================================
   SERVICE PAGES
   ============================================================ */
.svc-hero{background:var(--black);color:var(--paper);padding:160px var(--gut) clamp(60px,8vw,110px);position:relative;overflow:hidden}
.svc-hero .hero-orb{opacity:.34}
.svc-hero-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:center;position:relative;z-index:2}
.breadcrumb{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:30px}
.breadcrumb a{color:rgba(255,255,255,.85)}.breadcrumb a:hover{color:#fff}
.breadcrumb svg{width:13px;height:13px;stroke:currentColor;fill:none}
.svc-hero h1{font-size:clamp(40px,6vw,94px);line-height:1.02;font-weight:var(--w-light);letter-spacing:-.03em;color:#fff;max-width:18ch}
.svc-hero .sub{font-size:var(--t-lg);line-height:1.6;color:rgba(255,255,255,.72);margin-top:28px;max-width:60ch}
.svc-hero .sub em{font-style:italic;color:#fff}
.svc-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.svc-chip{font-size:12px;letter-spacing:.03em;border:1px solid var(--hair-d);border-radius:var(--r-pill);padding:7px 15px;color:rgba(255,255,255,.85)}
.svc-hero .hero-cta{justify-content:flex-start;margin-top:38px}
.svc-hero-art{display:grid;place-items:center}
.svc-hero-art svg{width:100%;max-width:360px;height:auto;opacity:.9}
.svc-hero-art svg [stroke]{stroke:rgba(255,255,255,.5)!important}
.svc-hero-art svg [fill]:not([fill="none"]){fill:rgba(255,255,255,.85)!important}
@media(max-width:880px){.svc-hero-grid{grid-template-columns:1fr}.svc-hero-art{display:none}}

/* split (feature list) */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px);align-items:start}
.feature-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.feature-list li{background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.fl-ico{width:40px;height:40px;border:1px solid var(--hair);display:grid;place-items:center}
.fl-ico svg{width:20px;height:20px;stroke:var(--ink);fill:none}
.feature-list h4{font-size:17px;font-weight:var(--w-med);margin-bottom:4px}
.feature-list p{font-size:14px;color:var(--ash);line-height:1.5}
@media(max-width:880px){.split{grid-template-columns:1fr}.feature-list{grid-template-columns:1fr}}

/* timeline */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:50px;background:var(--hair);border:1px solid var(--hair)}
.timeline-step{background:var(--paper);padding:32px 26px}
.ts-n{font-size:13px;letter-spacing:.2em;color:var(--smoke);display:block;margin-bottom:18px}
.timeline-step h4{font-size:19px;font-weight:var(--w-reg);margin-bottom:10px}
.timeline-step p{font-size:14px;color:var(--ash);line-height:1.55}
@media(max-width:880px){.timeline{grid-template-columns:1fr 1fr}}

/* metrics */
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.metric{background:var(--paper);padding:40px 30px;text-align:center}
.metric b{display:block;font-size:64px;font-weight:var(--w-light);letter-spacing:-.03em;line-height:1;margin-bottom:14px}
.metric span{font-size:14px;color:var(--ash);line-height:1.5}

/* FAQ */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{font-size:20px;font-weight:var(--w-reg);padding:24px 40px 24px 0;cursor:pointer;list-style:none;position:relative;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:22px;font-size:24px;font-weight:var(--w-light);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 40px 26px 0;font-size:16px;color:var(--ash);line-height:1.6;max-width:70ch}

/* svc-nav */
.svc-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.svc-nav a{background:var(--paper);padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;transition:background .35s,color .35s}
.svc-nav a b{font-size:19px;font-weight:var(--w-reg);display:block}
.svc-nav a span span{font-size:13px;color:var(--ash)}
.svc-nav a svg{width:20px;height:20px;stroke:currentColor;fill:none;flex:none;transition:transform .3s}
.svc-nav a:hover{background:var(--black);color:#fff}
.svc-nav a:hover span span{color:rgba(255,255,255,.7)}
.svc-nav a:hover svg{transform:translateX(6px)}

/* ============================================================
   BLOG / AI NEWS
   ============================================================ */
.blog-hero{background:var(--black);color:var(--paper);padding:170px var(--gut) clamp(56px,7vw,96px);text-align:center;position:relative;overflow:hidden}
.blog-hero .hero-orb{opacity:.3}
.blog-hero .container{position:relative;z-index:2}
.blog-hero .kicker{color:rgba(255,255,255,.66);justify-content:center}.blog-hero .kicker .dot{background:#fff}
.blog-hero h1{font-size:clamp(44px,7vw,110px);line-height:1.0;font-weight:var(--w-light);letter-spacing:-.03em;color:#fff}
.blog-hero .sub{font-size:var(--t-lg);color:rgba(255,255,255,.72);max-width:60ch;margin:26px auto 0}
.subscribe{display:flex;gap:10px;max-width:460px;margin:36px auto 0;justify-content:center;flex-wrap:wrap}
.subscribe input{flex:1;min-width:220px;font-family:var(--f-display);font-size:14px;background:transparent;color:#fff;border:none;border-bottom:1px solid var(--hair-d);padding:12px 4px}
.subscribe input::placeholder{color:rgba(255,255,255,.5)}
.subscribe input:focus{outline:none;border-color:#fff}
.subscribe .btn{background:#fff;color:var(--ink);border-color:#fff}
.subscribe .btn:hover{background:transparent;color:#fff}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.post-grid.featured{margin-top:10px}
.post-card{background:var(--paper);transition:background .4s,color .4s}
.post-card>a{display:flex;flex-direction:column;height:100%}
.post-thumb{aspect-ratio:16/10;background:var(--black);display:grid;place-items:center}
.post-thumb svg{width:46px;height:46px;stroke:rgba(255,255,255,.8);fill:none}
.post-body{padding:26px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.post-meta{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.tag{border:1px solid var(--hair);border-radius:var(--r-pill);padding:4px 11px;color:var(--ink);font-size:10px}
.post-card h3{font-size:21px;font-weight:var(--w-reg);line-height:1.25;color:var(--ink)!important}
.post-card p{font-size:14px;color:var(--ash);line-height:1.55;flex:1}
.post-more{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:6px}
.post-more svg{width:15px;height:15px;stroke:currentColor;fill:none;transition:transform .3s}
.post-card:hover{background:var(--black)}
.post-card:hover h3{color:#fff!important}
.post-card:hover p,.post-card:hover .post-meta{color:rgba(255,255,255,.7)}
.post-card:hover .tag{color:#fff;border-color:var(--hair-d)}
.post-card:hover .post-more{color:#fff}
.post-card:hover .post-more svg{transform:translateX(5px)}
@media(max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.post-grid{grid-template-columns:1fr}}

/* article */
.article-hero{padding:160px var(--gut) 20px;background:var(--paper)}
.article-hero .container{max-width:820px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);margin-bottom:28px}
.article-meta a{color:var(--ink)}
.article-hero h1{font-size:clamp(34px,5.2vw,68px);line-height:1.08;font-weight:var(--w-light);letter-spacing:-.025em}
.lede{font-size:22px;line-height:1.5;color:var(--ash);margin-top:26px}
.article{max-width:760px;margin:0 auto}
.article p{font-size:18px;line-height:1.75;color:var(--ink);margin-bottom:24px}
.article h2{font-size:clamp(28px,3.6vw,42px);font-weight:var(--w-light);margin:48px 0 18px;letter-spacing:-.02em}
.article h3{font-size:24px;font-weight:var(--w-reg);margin:36px 0 14px}
.article ul,.article ol{margin:0 0 24px 22px}
.article li{font-size:18px;line-height:1.7;color:var(--ink);margin-bottom:12px}
.article a{color:var(--ink);border-bottom:1px solid var(--ink)}
.article a:hover{color:var(--ash);border-color:var(--ash)}
.article strong{font-weight:var(--w-semi)}
.stat-callout{display:flex;align-items:center;gap:24px;border-block:1px solid var(--hair);padding:28px 0;margin:34px 0}
.stat-callout b{font-size:64px;font-weight:var(--w-light);letter-spacing:-.03em;line-height:1;flex:none}
.stat-callout span{font-size:15px;color:var(--ash);line-height:1.5}
.stat-callout cite{display:block;font-style:normal;font-size:11px;color:var(--smoke);margin-top:8px}
.article-cta{background:var(--black);color:#fff;padding:40px;margin:44px 0;text-align:center}
.article-cta h3{color:#fff;font-size:28px;font-weight:var(--w-light);margin-bottom:12px}
.article-cta p{color:rgba(255,255,255,.7);margin-bottom:26px}
.article-cta .btn{background:#fff;color:var(--ink);border-color:#fff}
.article-cta .btn:hover{background:transparent;color:#fff}
.article-share{display:flex;align-items:center;gap:16px;border-top:1px solid var(--hair);padding-top:24px;margin-top:40px;font-size:13px;color:var(--ash)}
.article-share a{color:var(--ink);border-bottom:1px solid var(--hair)}
.related{background:var(--paper)}
.related h2{font-size:36px;margin-bottom:30px;font-weight:var(--w-light)}

/* ai news feed */
.feed-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.feed-head h2{font-size:40px;font-weight:var(--w-light)}
.feed-src{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.news-sources{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:30px}
.news-sources li{background:var(--paper);padding:20px 22px;font-size:15px;color:var(--ink)}
.news-sources li span{display:block;font-size:13px;color:var(--ash);margin-top:4px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--black);color:var(--paper);padding-top:clamp(60px,8vw,110px)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid var(--hair-d)}
.site-footer .brand{color:#fff}
.site-footer .brand small{color:var(--smoke)}
.site-footer h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);margin-bottom:20px;font-weight:var(--w-reg)}
.site-footer nav{display:flex;flex-direction:column;gap:12px}
.site-footer nav a{font-size:14px;color:rgba(255,255,255,.74)}
.site-footer nav a:hover{color:#fff}
.site-footer .muted{color:rgba(255,255,255,.5)}
.footer-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:28px;color:var(--smoke)}
.footer-base .small{color:var(--smoke)}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}}

/* ============================================================
   RESPONSIVE GRID COLLAPSES
   ============================================================ */
@media(max-width:1080px){
  .cap-grid,.service-grid,.results-grid{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:1fr}
  .metric-row{grid-template-columns:1fr}
}
@media(max-width:760px){
  .cap-grid,.service-grid,.results-grid,.testimonials,.svc-nav{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
  .vertical-grid{grid-template-columns:1fr 1fr}
  h2{font-size:clamp(34px,9vw,54px)}
  /* Keep the topbar a single slim row (status only) so it can't wrap and overlap the hero */
  .topbar-in{flex-wrap:nowrap;gap:12px;overflow:hidden}
  .topbar .tb-item:not(.tb-status),.topbar .tb-spacer{display:none}
  .svc-hero,.blog-hero{padding-top:124px}
}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-orb,.tb-dot,.hk-dot,.mock-chart i,.scroll-cue::after,.trust-track{animation:none}
}

/* ============================================================
   PHOTOGRAPHY — full-bleed, desaturated, high-contrast (darkroom)
   Color stays reserved for the homepage hero orb; all photos are
   rendered monochrome so the achromatic discipline holds.
   ============================================================ */

/* Inner-page heroes: moody photo behind the black frame */
.svc-hero::before,.blog-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.06) brightness(.85);
  opacity:.5;
}
.svc-hero::after,.blog-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.78) 60%,rgba(0,0,0,.94) 100%);
}
.svc-hero::before{background-image:var(--svc-photo,url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1600&q=60&sat=-100'))}
.blog-hero::before{background-image:url('https://images.unsplash.com/photo-1639322537228-f710d846310a?auto=format&fit=crop&w=1600&q=60&sat=-100')}
.svc-hero .hero-orb,.blog-hero .hero-orb{display:none}
.svc-hero>*,.blog-hero>*{position:relative;z-index:2}

/* Full-bleed cinematic photo interlude (gallery wall) */
.photo-band{position:relative;min-height:78vh;display:flex;align-items:flex-end;background:var(--black);color:var(--paper);overflow:hidden}
.photo-band::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&w=1900&q=62&sat=-100') center/cover no-repeat;
  filter:grayscale(1) contrast(1.08) brightness(.78);
}
.photo-band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.85) 100%)}
.photo-band .container{position:relative;z-index:2;padding-block:clamp(48px,8vw,110px);width:100%}
.photo-band .kicker{color:rgba(255,255,255,.72)}.photo-band .kicker .dot{background:#fff}
.photo-band h2{color:#fff;font-size:clamp(40px,7vw,110px);font-weight:var(--w-light);letter-spacing:-.03em;line-height:.98;max-width:16ch}
.photo-band h2 .grad{font-style:italic}
.photo-band p{color:rgba(255,255,255,.78);max-width:54ch;margin-top:26px}

/* Industry cards with photo */
.vertical{padding:0;overflow:hidden}
.v-photo{aspect-ratio:5/4;width:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05) brightness(.96);transition:filter .5s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.vertical:hover .v-photo{filter:grayscale(1) contrast(1.12) brightness(1.02);transform:scale(1.04)}
.v-body{padding:26px 24px}
.vertical .v-ico{margin-bottom:16px}

/* Photographic CTA band (covers homepage + service-page CTAs) */
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url('https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=1700&q=60&sat=-100') center/cover no-repeat;
  filter:grayscale(1) contrast(1.05) brightness(.7);opacity:.4;
}
.cta-band>*{position:relative;z-index:1}

/* ============================================================
   MOTION SYSTEM v2 — scroll progress, directional reveals,
   parallax, magnetic buttons, sticky "journey" scrollytelling.
   Reusable across all service pages.
   ============================================================ */

/* Scroll progress bar — the only place the mercury gradient is used as a line */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:300;background:var(--mercury);pointer-events:none;will-change:transform}

/* Directional / character reveals (extends .reveal) */
.reveal[data-dir="left"]{transform:translateX(-44px)}
.reveal[data-dir="right"]{transform:translateX(44px)}
.reveal[data-dir="scale"]{transform:scale(.92)}
.reveal[data-dir="blur"]{filter:blur(14px);transform:translateY(20px)}
.reveal[data-dir="left"].in,.reveal[data-dir="right"].in,.reveal[data-dir="scale"].in{transform:none}
.reveal[data-dir="blur"].in{filter:blur(0);transform:none}
.reveal[data-dir="blur"]{transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1),filter 1s cubic-bezier(.22,1,.36,1)}
/* Keep pre-reveal offsets inside the 20px gutter on small screens so they can't widen the page */
@media(max-width:760px){
  .reveal[data-dir="left"]{transform:translateX(-18px)}
  .reveal[data-dir="right"]{transform:translateX(18px)}
}

/* Line-by-line headline rise */
.rise-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.rise-line>span{display:block;transform:translateY(105%);transition:transform 1s cubic-bezier(.22,1,.36,1)}
.rise.in .rise-line>span{transform:none}
.rise.in .rise-line:nth-child(2)>span{transition-delay:.09s}
.rise.in .rise-line:nth-child(3)>span{transition-delay:.18s}
.rise.in .rise-line:nth-child(4)>span{transition-delay:.27s}

/* Parallax — JS sets --py */
[data-parallax]{will-change:transform}

/* Magnetic buttons — JS sets --mx/--my */
[data-magnetic]{transition:transform .25s cubic-bezier(.22,1,.36,1)}
[data-magnetic].mag{transform:translate(var(--mx,0),var(--my,0))}

/* Animated stat figure (count-up shares [data-count]) */
.metric b,.r-stat,.stat-callout b{font-variant-numeric:tabular-nums}

/* ---------- "WHY" JOURNEY — sticky scrollytelling ---------- */
.journey{background:var(--black);color:var(--paper);position:relative;padding-block:0}
.journey>.container{position:relative;z-index:2}
.journey-intro{padding-top:var(--sec);max-width:30ch}
.journey-intro .kicker{color:rgba(255,255,255,.66)}.journey-intro .kicker .dot{background:#fff}
.journey-intro h2{color:#fff;font-size:clamp(34px,5.2vw,72px);font-weight:var(--w-light);letter-spacing:-.03em;line-height:1.04}
.journey-intro .grad{font-style:italic}
.journey-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start;padding-bottom:var(--sec)}
.journey-media{position:sticky;top:14vh;height:72vh;border:1px solid var(--hair-d);overflow:hidden;background:#0a0a0a}
.jm-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);filter:grayscale(1) contrast(1.08) brightness(.82);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.4s cubic-bezier(.22,1,.36,1)}
.jm-img.active{opacity:1;transform:scale(1)}
.jm-veil{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.6));pointer-events:none}
.jm-step-no{position:absolute;left:0;bottom:0;z-index:3;padding:24px 28px;display:flex;align-items:baseline;gap:14px}
.jm-step-no b{font-size:clamp(54px,8vw,104px);font-weight:var(--w-light);line-height:.8;letter-spacing:-.04em;color:#fff}
.jm-step-no span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.journey-steps{display:flex;flex-direction:column}
.j-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;border-bottom:1px solid var(--hair-d);opacity:.32;transition:opacity .6s ease}
.j-step:last-child{border-bottom:none}
.j-step.active{opacity:1}
.j-step .j-eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--smoke);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.j-step .j-eyebrow::before{content:"";width:26px;height:1px;background:var(--smoke);transition:width .6s ease,background .6s ease}
.j-step.active .j-eyebrow::before{width:54px;background:#fff}
.j-step h3{color:#fff;font-size:clamp(26px,3.4vw,42px);font-weight:var(--w-light);letter-spacing:-.02em;line-height:1.08;margin-bottom:16px}
.j-step p{color:rgba(255,255,255,.72);font-size:17px;line-height:1.62;max-width:46ch}
.j-step .j-figure{font-size:clamp(40px,6vw,76px);font-weight:var(--w-light);letter-spacing:-.03em;line-height:1;margin-bottom:6px;color:#fff}
.j-step .j-figure .grad{font-style:italic}
@media(max-width:880px){
  .journey-grid{grid-template-columns:1fr;gap:0}
  .journey-media{position:relative;top:0;height:56vh;margin-bottom:30px;order:-1}
  .j-step{min-height:auto;padding:34px 0}
  .j-step{opacity:1}
}

/* ---------- Photo split (text + framed photo) ---------- */
.photo-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.photo-split.flip .ps-media{order:2}
.ps-media{position:relative;overflow:hidden;border:1px solid var(--hair);aspect-ratio:4/5}
.ps-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.97);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.ps-media:hover img{transform:scale(1.05)}
.ps-tag{position:absolute;left:18px;bottom:18px;z-index:2;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);padding:8px 14px;border:1px solid var(--hair-d)}
@media(max-width:880px){.photo-split{grid-template-columns:1fr}.photo-split.flip .ps-media{order:0}.ps-media{aspect-ratio:16/10}}

/* Photo-band parallax inner layer */
.photo-band[data-parallax-bg]::before{will-change:transform;transform:scale(1.12) translateY(var(--py,0))}

/* ---------- Hero proof mockups (SEO · AEO · GEO) ----------
   Literal proof of the promise: #1 on Google + recommended inside ChatGPT. */
.search-stack{display:flex;flex-direction:column;gap:18px;width:100%;max-width:380px;margin-left:auto;font-family:var(--f-sys)}
.mock{position:relative;border:1px solid var(--hair-d);background:rgba(255,255,255,.05);backdrop-filter:blur(4px);border-radius:14px;padding:18px 16px}
.mock-cap{position:absolute;top:-8px;left:16px;background:var(--black);padding:0 8px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
/* Google mock */
.mg-bar{display:flex;align-items:center;gap:10px;border:1px solid var(--hair-d);border-radius:var(--r-pill);padding:9px 14px;font-size:13px;color:rgba(255,255,255,.78)}
.mg-bar svg{width:14px;height:14px;stroke:rgba(255,255,255,.6);fill:none;flex:none}
.mg-q{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-caret{width:1px;height:14px;background:#fff;flex:none;animation:caretBlink 1.1s steps(1) infinite}
.mg-results{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.mg-result{display:flex;gap:12px;align-items:flex-start;position:relative}
.mg-result.top{padding:12px;border:1px solid rgba(255,255,255,.3);border-radius:10px;background:rgba(255,255,255,.07)}
.mg-fav{width:26px;height:26px;border-radius:50%;border:1px solid var(--hair-d);display:grid;place-items:center;font-size:11px;color:#fff;flex:none}
.mg-url{font-size:11px;color:rgba(255,255,255,.5)}
.mg-title{font-size:15px;color:#fff;margin-top:3px;line-height:1.2}
.mg-stars{font-size:11px;color:#fff;letter-spacing:1.5px;margin-top:5px}
.mg-stars span{color:rgba(255,255,255,.5);letter-spacing:0;margin-left:4px}
.mg-rank{position:absolute;top:10px;right:10px;font-size:10px;letter-spacing:.1em;border:1px solid var(--hair-d);border-radius:var(--r-pill);padding:3px 9px;color:#fff}
.mg-result.dim{opacity:.4;padding-left:2px}
.mg-lines{flex:1;display:flex;flex-direction:column;gap:7px;padding-top:3px}
.mg-lines i{height:7px;background:rgba(255,255,255,.2);border-radius:3px}
.mg-lines i:first-child{width:52%;height:9px;background:rgba(255,255,255,.32)}
.mg-lines i:last-child{width:82%}
/* ChatGPT mock */
.mock-gpt{display:flex;flex-direction:column}
.gpt-head{display:flex;align-items:center;gap:9px;font-size:12px;color:rgba(255,255,255,.85);padding-bottom:13px;border-bottom:1px solid var(--hair-d);margin-bottom:14px}
.gpt-logo{width:20px;height:20px;border-radius:50%;border:1px solid var(--hair-d);display:grid;place-items:center;flex:none}
.gpt-logo::after{content:"";width:9px;height:9px;border-radius:50%;border:2px solid #fff}
.gpt-live{margin-left:auto;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:7px}
.gpt-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 2s infinite}
.gpt-msg{font-size:13px;line-height:1.55;padding:11px 14px;border-radius:13px;margin-bottom:11px;max-width:92%}
.gpt-msg.user{align-self:flex-end;background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);border-bottom-right-radius:3px}
.gpt-msg.ai{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--hair-d);color:rgba(255,255,255,.82);border-bottom-left-radius:3px;margin-bottom:0}
.gpt-msg.ai b{color:#fff;font-weight:var(--w-semi)}
.gpt-msg.ai .caret{display:inline-block;width:1px;height:13px;background:#fff;vertical-align:-2px;margin-left:2px;animation:caretBlink 1.1s steps(1) infinite}
.gpt-cta{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#fff;border:1px solid var(--hair-d);border-radius:var(--r-pill);padding:8px 14px;transition:background .3s,color .3s}
.gpt-cta:hover{background:#fff;color:var(--ink)}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(max-width:880px){.search-stack{margin:0 auto}}
@media(prefers-reduced-motion:reduce){.mg-caret,.gpt-msg.ai .caret,.gpt-live::before{animation:none}}

/* ---------- Recognizable brand logos + product mockups ---------- */
.gg-b{fill:#4285F4}.gg-r{fill:#EA4335}.gg-y{fill:#FBBC05}.gg-g{fill:#34A853}
.oai{fill:#fff}
.ico-g,.ico-oai,.ico-gem,.ico-perp{display:block;flex:none}
.mg-bar .ico-g{width:17px;height:17px}
.gpt-head .gpt-mark{width:20px;height:20px;flex:none}

/* Panel 1 — Google PageSpeed / Lighthouse score */
.ps-card{width:100%}
.ps-head{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.72);margin-bottom:28px}
.ps-head .ico-g{width:16px;height:16px}
.ps-gauges{display:flex;gap:22px}
.ps-gauge{position:relative;width:90px;text-align:center}
.ps-gauge svg{width:90px;height:90px;transform:rotate(-90deg)}
.ps-ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:5}
.ps-ring{fill:none;stroke:#0CCE6B;stroke-width:5;stroke-linecap:round}
.ps-num{position:absolute;left:0;right:0;top:32px;font-size:23px;color:#0CCE6B;font-weight:var(--w-light)}
.ps-name{font-size:11px;color:rgba(255,255,255,.6);margin-top:8px}

/* Panel 2 — Google reviews (authentic white card) */
.greview{background:#fff;color:#202124;border-radius:14px;padding:22px;font-family:var(--f-sys);box-shadow:0 24px 60px rgba(0,0,0,.45);max-width:340px;margin-left:auto}
.greview-head{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.greview-head .ico-g{width:20px;height:20px}
.greview-head b{font-size:15px;font-weight:500;color:#202124}
.greview-head .gr-biz{margin-left:auto;font-size:12px;color:#5f6368}
.greview-score{display:flex;align-items:flex-end;gap:16px}
.greview-num{font-size:48px;font-weight:400;line-height:.85;color:#202124}
.gstars{color:#FBBC04;font-size:18px;letter-spacing:2px;line-height:1}
.greview-count{font-size:13px;color:#5f6368;margin-top:7px}
.greview-bars{margin-top:18px;display:flex;flex-direction:column;gap:6px}
.gbar{display:flex;align-items:center;gap:10px;font-size:12px;color:#5f6368}
.gbar-track{flex:1;height:9px;background:#e8eaed;border-radius:5px;overflow:hidden}
.gbar-track i{display:block;height:100%;background:#FBBC04;border-radius:5px}

/* Panel 3 — ChatGPT chat */
.aeo-chat{width:100%;max-width:350px;border:1px solid var(--hair-d);border-radius:16px;background:rgba(255,255,255,.04);padding:18px;display:flex;flex-direction:column}

/* Panel 4 — engines that cite you */
.geo-list{width:100%;max-width:380px;display:flex;flex-direction:column;gap:1px;background:var(--hair-d);border:1px solid var(--hair-d);border-radius:14px;overflow:hidden}
.geo-row{display:flex;align-items:center;gap:14px;padding:17px 18px;background:#0b0b0b}
.geo-ico{width:28px;height:28px;display:grid;place-items:center;flex:none}
.geo-ico svg{width:25px;height:25px}
.geo-name{font-size:15px;color:#fff}
.geo-cited{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.geo-cited svg{width:15px;height:15px;stroke:#fff;fill:none}

/* ---------- PAID ADVERTISING — ad dashboard + funnel ---------- */
.fb-1877{fill:#1877F2}.yt-red{fill:#FF0000}.yt-w{fill:#fff}.ico-ig,.ico-yt,.ico-fb,.ico-tt{display:block;flex:none}

/* Hero: live ads dashboard */
.ad-dash{width:100%;max-width:380px;margin-left:auto;border:1px solid var(--hair-d);border-radius:16px;background:rgba(255,255,255,.05);backdrop-filter:blur(4px);padding:18px;font-family:var(--f-sys)}
.ad-head{display:flex;align-items:center;gap:9px;font-size:13px;color:#fff;padding-bottom:14px;border-bottom:1px solid var(--hair-d);margin-bottom:16px}
.ad-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ad-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 2s infinite}
.ad-platforms{display:flex;gap:9px;margin-bottom:16px}
.ad-plat{width:34px;height:34px;border-radius:9px;border:1px solid var(--hair-d);display:grid;place-items:center;background:rgba(255,255,255,.04)}
.ad-plat svg{width:19px;height:19px}
.ad-chart{margin-bottom:18px}
.ad-chart svg{width:100%;height:72px;display:block;overflow:visible}
.ad-spark{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600;animation:adDraw 2s ease forwards .3s}
.ad-area{fill:url(#adFill);opacity:0;animation:adFade 1s ease forwards 1.4s}
@keyframes adDraw{to{stroke-dashoffset:0}}
@keyframes adFade{to{opacity:1}}
.ad-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.ad-metric{border:1px solid var(--hair-d);border-radius:10px;padding:13px 8px;text-align:center}
.ad-metric b{display:block;font-size:22px;font-weight:var(--w-light);color:#fff;line-height:1}
.ad-metric span{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px;display:block}

/* Signature: funnel scrollytelling */
.funnel{background:var(--black);color:var(--paper);position:relative}
.funnel>.container{position:relative;z-index:2}
.funnel-intro{padding-top:var(--sec);max-width:32ch}
.funnel-intro .kicker{color:rgba(255,255,255,.66)}.funnel-intro .kicker .dot{background:#fff}
.funnel-intro h2{color:#fff;font-size:clamp(34px,5.2vw,72px);font-weight:var(--w-light);letter-spacing:-.03em;line-height:1.04}
.funnel-intro .grad{font-style:italic}
.funnel-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start;padding-bottom:var(--sec)}
.funnel-media{position:sticky;top:13vh;height:74vh;display:flex;flex-direction:column;justify-content:center;gap:12px}
.fb-band{position:relative;margin:0 auto;width:100%;border:1px solid var(--hair-d);border-radius:10px;background:rgba(255,255,255,.03);padding:14px 18px;display:flex;flex-direction:column;gap:11px;opacity:.3;transition:opacity .55s ease,background .55s ease,border-color .55s ease,transform .55s ease;transform:translateY(8px)}
.fb-band:nth-child(2){width:84%}.fb-band:nth-child(3){width:68%}.fb-band:nth-child(4){width:54%}
.fb-band.active{opacity:1;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.42);transform:none}
.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fb-stage{font-size:14px;color:#fff;font-weight:var(--w-med);white-space:nowrap}
.fb-num{font-size:18px;color:#fff;font-weight:var(--w-light);white-space:nowrap}
.fb-logos{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.fb-logos svg{width:17px;height:17px;display:block;flex:none}
.funnel-steps{display:flex;flex-direction:column}
.funnel-step{min-height:60vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;border-bottom:1px solid var(--hair-d);opacity:.32;transition:opacity .6s ease}
.funnel-step:last-child{border-bottom:none}
.funnel-step.active{opacity:1}
.funnel-step .fs-eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--smoke);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.funnel-step .fs-eyebrow::before{content:"";width:26px;height:1px;background:var(--smoke);transition:width .6s,background .6s}
.funnel-step.active .fs-eyebrow::before{width:54px;background:#fff}
.funnel-step h3{color:#fff;font-size:clamp(26px,3.4vw,42px);font-weight:var(--w-light);letter-spacing:-.02em;line-height:1.08;margin-bottom:16px}
.funnel-step p{color:rgba(255,255,255,.72);font-size:17px;line-height:1.62;max-width:46ch}
@media(max-width:880px){
  .funnel-grid{grid-template-columns:1fr;gap:0}
  .funnel-media{position:relative;top:0;height:auto;margin-bottom:30px;order:-1;gap:8px}
  .fb-band,.fb-band:nth-child(2),.fb-band:nth-child(3),.fb-band:nth-child(4){width:100%;opacity:1;transform:none}
  .funnel-step{min-height:auto;padding:32px 0;opacity:1}
}
@media(prefers-reduced-motion:reduce){.ad-spark,.ad-area{animation:none;stroke-dashoffset:0;opacity:1}.fb-band{opacity:1;transform:none}.funnel-step{opacity:1}}

/* ---------- AI RECEPTIONIST — phone device + call flow ---------- */
.phone{width:288px;max-width:100%;margin:0 auto;background:#0c0c0c;border:1px solid rgba(255,255,255,.18);border-radius:42px;padding:11px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:88px;height:20px;background:#000;border-radius:12px;z-index:4}
.phone-screen{background:#000;border-radius:32px;overflow:hidden;display:flex;flex-direction:column;height:560px}
.phone-status{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 8px;font-size:12px;color:#fff;font-weight:500;font-family:var(--f-sys)}
.sms-head{display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.sms-avatar{width:46px;height:46px;border-radius:50%;background:#1c1c1e;display:grid;place-items:center}
.sms-avatar svg{width:24px;height:24px;stroke:#fff;fill:none}
.sms-name{font-size:13px;color:#fff;font-weight:500;font-family:var(--f-sys)}
.sms-sub{font-size:10px;color:rgba(255,255,255,.5)}
.sms-body{flex:1;padding:16px 13px;display:flex;flex-direction:column;gap:9px;overflow:hidden;font-family:var(--f-sys)}
.pm-banner{align-self:center;display:flex;align-items:center;gap:8px;font-size:11px;color:rgba(255,255,255,.6);background:rgba(255,255,255,.06);border-radius:20px;padding:6px 13px}
.pm-banner svg{width:13px;height:13px;stroke:#ff453a;fill:none}
.pm-msg{max-width:82%;font-size:12.5px;line-height:1.4;padding:9px 13px;border-radius:17px}
.pm-msg.in{align-self:flex-start;background:#2a2a2d;color:#fff;border-bottom-left-radius:5px}
.pm-msg.out{align-self:flex-end;background:#0a84ff;color:#fff;border-bottom-right-radius:5px}
.pm-tag{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:6px}
.pm-event{align-self:flex-start;width:90%;background:#fff;color:#202124;border-radius:12px;padding:11px 12px;display:flex;gap:11px;align-items:center}
.pm-event .ico-gc{width:30px;height:30px;flex:none}
.pm-event b{font-size:12.5px;display:block;line-height:1.3}
.pm-event span{font-size:10.5px;color:#5f6368}
.pm-typing{align-self:flex-start;display:flex;gap:4px;background:#2a2a2d;border-radius:16px;padding:12px 14px}
.pm-typing i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);animation:typBlink 1.3s infinite}
.pm-typing i:nth-child(2){animation-delay:.2s}.pm-typing i:nth-child(3){animation-delay:.4s}
@keyframes typBlink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.callflow{background:var(--black);color:var(--paper);position:relative}
.callflow>.container{position:relative;z-index:2}
.callflow-intro{padding-top:var(--sec);max-width:30ch}
.callflow-intro .kicker{color:rgba(255,255,255,.66)}.callflow-intro .kicker .dot{background:#fff}
.callflow-intro h2{color:#fff;font-size:clamp(34px,5.2vw,72px);font-weight:var(--w-light);letter-spacing:-.03em;line-height:1.04}
.callflow-intro .grad{font-style:italic}
.callflow-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,6vw,90px);align-items:start;padding-bottom:var(--sec)}
.callflow-phone{position:sticky;top:10vh;display:flex;justify-content:center}
.callflow-steps{display:flex;flex-direction:column}
.call-step{min-height:60vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;border-bottom:1px solid var(--hair-d);opacity:.32;transition:opacity .6s ease}
.call-step:last-child{border-bottom:none}
.call-step.active{opacity:1}
.call-step .cs-eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--smoke);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.call-step .cs-eyebrow::before{content:"";width:26px;height:1px;background:var(--smoke);transition:width .6s,background .6s}
.call-step.active .cs-eyebrow::before{width:54px;background:#fff}
.call-step h3{color:#fff;font-size:clamp(26px,3.4vw,42px);font-weight:var(--w-light);letter-spacing:-.02em;line-height:1.08;margin-bottom:16px}
.call-step p{color:rgba(255,255,255,.72);font-size:17px;line-height:1.62;max-width:46ch}
.callflow .pm-msg,.callflow .pm-banner,.callflow .pm-event,.callflow .pm-typing{opacity:1;transform:none}
@media(max-width:880px){
  .callflow-grid{grid-template-columns:1fr;gap:0}
  .callflow-phone{position:relative;top:0;margin-bottom:30px;order:-1}
  .call-step{min-height:auto;padding:32px 0;opacity:1}
  .callflow .pm-msg,.callflow .pm-banner,.callflow .pm-event,.callflow .pm-typing{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.pm-typing i{animation:none}.call-step{opacity:1}.callflow .pm-msg,.callflow .pm-banner,.callflow .pm-event,.callflow .pm-typing{opacity:1;transform:none}}

/* ---------- EMAIL & SMS — channel preview + drip timeline ---------- */
.es-stack{display:flex;flex-direction:column;gap:16px;width:100%;max-width:380px;margin-left:auto;font-family:var(--f-sys)}
.es-email{background:#fff;color:#202124;border-radius:14px;padding:16px 18px;box-shadow:0 22px 55px rgba(0,0,0,.4)}
.es-email-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.es-email-head .ico-gm{width:22px;height:22px;flex:none}
.es-email-head b{font-size:13px;font-weight:500}
.es-email-head span{margin-left:auto;font-size:11px;color:#5f6368}
.es-subject{font-size:15px;font-weight:500;color:#202124;margin-bottom:5px}
.es-preview{font-size:13px;color:#5f6368;line-height:1.45}
.es-sms{border:1px solid var(--hair-d);border-radius:14px;background:rgba(255,255,255,.05);backdrop-filter:blur(4px);padding:16px 18px}
.es-sms-head{display:flex;align-items:center;gap:9px;font-size:12px;color:rgba(255,255,255,.82);margin-bottom:13px}
.es-sms-head svg{width:18px;height:18px;stroke:#fff;fill:none}
.es-bubble{font-size:13px;line-height:1.45;background:#2a2a2d;color:#fff;border-radius:16px;border-bottom-left-radius:5px;padding:10px 13px;max-width:92%}

.drip{background:var(--black);color:var(--paper);position:relative}
.drip>.container{position:relative;z-index:2}
.drip-intro{max-width:34ch;padding-top:var(--sec)}
.drip-intro .kicker{color:rgba(255,255,255,.66)}.drip-intro .kicker .dot{background:#fff}
.drip-intro h2{color:#fff;font-size:clamp(34px,5.2vw,72px);font-weight:var(--w-light);letter-spacing:-.03em;line-height:1.04}
.drip-intro .grad{font-style:italic}
.drip-line{position:relative;max-width:680px;margin:56px auto 0;padding-bottom:var(--sec)}
.drip-rail{position:absolute;left:85px;top:26px;height:calc(100% - var(--sec) - 52px);width:2px;background:rgba(255,255,255,.12);z-index:0}
.drip-fill{position:absolute;left:85px;top:26px;width:2px;background:#fff;height:0;z-index:1;transition:height .15s linear}
.drip-item{position:relative;z-index:2;display:grid;grid-template-columns:70px 32px 1fr;align-items:start;padding-bottom:32px}
.drip-day{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);padding-top:15px;text-align:right;padding-right:14px;white-space:nowrap}
.drip-railcol{display:flex;justify-content:center}
.drip-node{width:15px;height:15px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:#0a0a0a;margin-top:15px;display:grid;place-items:center}
.drip-node::after{content:"";width:5px;height:5px;border-radius:50%;background:#fff}
.drip-card{border:1px solid var(--hair-d);border-radius:12px;background:rgba(255,255,255,.04);padding:15px 17px;margin-left:14px;font-family:var(--f-sys)}
.drip-card-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.dc-ico{width:22px;height:22px;flex:none;display:grid;place-items:center}
.dc-ico svg{width:20px;height:20px}
.dc-ico .smsbub{width:18px;height:18px;stroke:#fff;fill:none}
.dc-type{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.dc-status{margin-left:auto;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#fff;border:1px solid var(--hair-d);border-radius:20px;padding:3px 10px}
.drip-card h4{font-size:16px;color:#fff;font-weight:var(--w-med);margin-bottom:5px;line-height:1.25}
.drip-card p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.5}
@media(max-width:680px){
  .drip-item{grid-template-columns:46px 26px 1fr}
  .drip-day{font-size:10px;padding-right:8px}
  .drip-rail,.drip-fill{left:58px}
}
@media(prefers-reduced-motion:reduce){.drip-fill{transition:none}}

/* full campaign showcase — Gmail inbox + iMessage thread */
.inbox-showcase{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,5vw,64px);align-items:start;margin-top:60px;padding-bottom:var(--sec)}
.inbox-showcase>*{min-width:0}
.ish-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.ish-label svg{width:16px;height:16px;flex:none}
.gmail{background:#fff;color:#202124;border-radius:14px;overflow:hidden;box-shadow:0 26px 64px rgba(0,0,0,.5);font-family:var(--f-sys)}
.gmail-bar{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid #e8eaed}
.gmail-bar .ico-gm{width:22px;height:22px;flex:none}
.gmail-bar b{font-size:14px;font-weight:500;color:#202124}
.gmail-search{margin-left:auto;height:28px;flex:1;max-width:190px;background:#f1f3f4;border-radius:8px}
.gmail-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid #f5f6f7;font-size:13px;color:#5f6368}
.gmail-row:last-child{border-bottom:none}
.gmail-row .gr-star{width:16px;height:16px;flex:none;stroke:#dadce0;fill:none;stroke-width:1.5}
.gmail-row.star .gr-star{fill:#fbbc04;stroke:#fbbc04}
.gr-sender{width:96px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3c4043}
.gmail-row.unread .gr-sender{color:#202124;font-weight:700}
.gr-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-text b{color:#3c4043;font-weight:500}
.gmail-row.unread .gr-text b{color:#202124;font-weight:700}
.gr-time{flex:none;font-size:11px;color:#5f6368}
.gmail-row.unread .gr-time{color:#1a73e8;font-weight:600}
.phone-thread .phone-screen{height:600px}
.phone-thread .sms-body{justify-content:flex-end;-webkit-mask-image:linear-gradient(transparent,#000 11%);mask-image:linear-gradient(transparent,#000 11%)}
/* texts pop in one-by-one when the thread scrolls into view */
.phone-thread .pm-msg{opacity:1;transform:none}
.phone-thread.play .pm-msg{animation:threadPop .5s cubic-bezier(.34,1.4,.5,1) both;animation-delay:calc(var(--i,0) * .18s)}
@keyframes threadPop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.phone-thread.play .pm-msg{animation:none}}
@media(max-width:900px){.inbox-showcase{grid-template-columns:minmax(0,1fr)}.inbox-showcase .gmail{width:100%;max-width:520px;margin-inline:auto}}

/* ---------- WEB & SOCIAL — browser mockup + bento grid ---------- */
.browser{width:100%;border:1px solid var(--hair-d);border-radius:12px;overflow:hidden;background:#0e0e0e;box-shadow:0 26px 64px rgba(0,0,0,.5)}
.browser-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--hair-d)}
.browser-dots{display:flex;gap:6px;flex:none}
.browser-dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.22)}
.browser-url{flex:1;background:rgba(255,255,255,.07);border-radius:20px;padding:6px 14px;font-size:12px;color:rgba(255,255,255,.62);font-family:var(--f-sys);display:flex;align-items:center;gap:8px}
.browser-url svg{width:12px;height:12px;stroke:rgba(255,255,255,.55);fill:none;flex:none}
.site{background:#fff;color:#111}
.site-block{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.svc-hero-art.in .site-block,.bento-tile.in .site-block,.site.show .site-block{opacity:1;transform:none}
.site-block.d1{transition-delay:.12s}.site-block.d2{transition-delay:.24s}
.site-nav{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid #eee}
.site-logo{width:26px;height:26px;border-radius:7px;background:#111;flex:none}
.site-links{display:flex;gap:9px;margin-left:4px}
.site-links i{width:32px;height:7px;border-radius:4px;background:#e3e3e3}
.site-cta{margin-left:auto;width:72px;height:26px;border-radius:20px;background:#111}
.site-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;padding:24px 18px;align-items:center}
.sh-text{display:flex;flex-direction:column;gap:9px}
.sh-text .h{height:17px;border-radius:5px;background:#1a1a1a;width:92%}
.sh-text .h.two{width:66%}
.sh-text .p{height:8px;border-radius:4px;background:#dcdcdc}
.sh-text .p.sm{width:58%}
.sh-text .bt{margin-top:7px;width:96px;height:30px;border-radius:20px;background:#111}
.sh-img{height:118px;border-radius:10px;background:linear-gradient(135deg,#d6d6d6,#f3f3f3)}
.site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 18px 22px}
.site-cards span{height:62px;border-radius:8px;background:#f1f1f1;border:1px solid #ebebeb}

/* bento */
.websocial{background:var(--black);color:var(--paper);position:relative}
.websocial>.container{position:relative;z-index:2}
.bento-intro{max-width:34ch;padding-top:var(--sec)}
.bento-intro .kicker{color:rgba(255,255,255,.66)}.bento-intro .kicker .dot{background:#fff}
.bento-intro h2{color:#fff;font-size:clamp(34px,5.2vw,72px);font-weight:var(--w-light);letter-spacing:-.03em;line-height:1.04}
.bento-intro .grad{font-style:italic}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:152px;gap:14px;margin-top:50px;padding-bottom:var(--sec)}
.bento-tile{border:1px solid var(--hair-d);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.03);position:relative;transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .45s}
.bento-tile:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.34)}
.tile-web{grid-column:span 2;grid-row:span 2}
.tile-phone{grid-row:span 2}
.tile-li,.tile-tt{grid-column:span 2}
.tile-stat{grid-column:span 4}
.tile-web .browser{height:100%;border:none;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
.tile-web .site{flex:1}
.tile-pad{padding:15px 17px;height:100%;display:flex;flex-direction:column}
.tile-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.tile-head svg{width:20px;height:20px;flex:none}
.tile-head b{font-size:13px;color:#fff;font-weight:500}
.tile-head .t-when{margin-left:auto;font-size:11px;color:rgba(255,255,255,.42)}
.tile-img{flex:1;border-radius:9px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.02));min-height:46px}
.tile-cap{font-size:12px;color:rgba(255,255,255,.62);margin-top:9px;line-height:1.45}
.tile-meta{display:flex;gap:16px;margin-top:9px;font-size:11px;color:rgba(255,255,255,.5)}
.tile-meta span{display:flex;align-items:center;gap:5px}
.tile-meta svg{width:13px;height:13px;stroke:currentColor;fill:none}
/* mobile site tile */
.mob{height:100%;background:#0e0e0e;border-radius:14px;border:8px solid #161616;overflow:hidden;margin:0 auto;max-width:150px}
.mob .site{height:100%}
.mob .site-nav{padding:10px 12px}.mob .site-logo{width:20px;height:20px}
.mob .site-links{display:none}.mob .site-cta{width:46px;height:18px}
.mob-stack{padding:12px;display:flex;flex-direction:column;gap:10px}
.mob-stack .mh{height:60px;border-radius:8px;background:linear-gradient(135deg,#d6d6d6,#f3f3f3)}
.mob-stack .ml{height:9px;border-radius:4px;background:#1a1a1a;width:80%}
.mob-stack .mp{height:7px;border-radius:4px;background:#dcdcdc}
.mob-stack .mb{width:70px;height:22px;border-radius:20px;background:#111;margin-top:2px}
/* stat tile */
.tile-stat{display:flex;align-items:center;gap:clamp(18px,4vw,48px);padding:24px 28px;flex-wrap:wrap}
.tile-stat h3{font-size:clamp(20px,2.6vw,32px);font-weight:var(--w-light);color:#fff;letter-spacing:-.02em;line-height:1.1;flex:1;min-width:240px}
.tile-stat h3 .grad{font-style:italic}
.tile-stat .ts-fig{font-size:clamp(36px,5vw,60px);font-weight:var(--w-light);color:#fff;letter-spacing:-.03em;line-height:1}
.tile-stat .ts-fig small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:6px;font-weight:var(--w-reg)}
@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile-web{grid-column:span 2}
  .tile-phone{grid-column:span 1}
  .tile-li,.tile-tt,.tile-stat{grid-column:span 2}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .tile-web,.tile-phone,.tile-li,.tile-tt,.tile-stat{grid-column:span 1;grid-row:auto}
  .bento-tile{min-height:160px}
  .tile-web .browser{min-height:280px}
  .tile-phone .mob{min-height:300px}
}
@media(prefers-reduced-motion:reduce){.site-block{opacity:1;transform:none}.bento-tile:hover{transform:none}}

/* ---------- AI LEAD FOLLOW-UP — "same lead, two outcomes" race ---------- */
.race{background:var(--black);color:var(--paper);position:relative}
.race>.container{position:relative;z-index:2}
.race-intro{max-width:40ch;padding-top:var(--sec)}
.race-intro .kicker{color:rgba(255,255,255,.66)}.race-intro .kicker .dot{background:#fff}
.race-intro h2{color:#fff;font-size:clamp(34px,5.2vw,72px);font-weight:var(--w-light);letter-spacing:-.03em;line-height:1.04}
.race-intro .grad{font-style:italic}
.race-intro p{color:rgba(255,255,255,.62);font-size:17px;line-height:1.6;margin-top:22px;max-width:54ch}
.race-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.6vw,26px);margin-top:48px;padding-bottom:var(--sec)}
.race-col{border:1px solid var(--hair-d);border-radius:18px;padding:clamp(22px,3vw,34px);position:relative}
.race-col.win{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}
.rc-tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.race-col.win .rc-tag{color:#fff}
.rc-sub{font-size:13px;color:rgba(255,255,255,.48);margin-top:4px}
.rc-odds{margin:22px 0 26px}
.rc-odds-label{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:9px}
.rc-odds-num{font-size:20px;letter-spacing:-.02em;color:#fff;font-weight:var(--w-light)}
.rc-meter{height:6px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.rc-meter i{display:block;height:100%;border-radius:4px;background:#fff;width:80%;transition:width 2s cubic-bezier(.4,0,.2,1) .2s}
.race.play .lose .rc-meter i{width:7%}
.race.play .win .rc-meter i{width:94%}
.race-events{list-style:none;display:flex;flex-direction:column}
.race-events li{display:flex;gap:13px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--hair-d);font-size:14.5px;color:rgba(255,255,255,.8)}
.race.play .race-events li{animation:revealUp .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * .5s)}
.race-events li:last-child{border-bottom:none}
.re-time{flex:none;font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.5);width:40px;padding-top:2px}
.race-col.win .re-time{color:#fff}
.re-dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--smoke)}
.race-col.win .re-dot{background:#fff}
.re-txt b{color:#fff;font-weight:var(--w-med)}
.race-result{margin-top:24px;display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:11px 18px;border-radius:var(--r-pill);border:1px solid var(--hair-d)}
.race.play .race-result{animation:raceBadge .5s cubic-bezier(.34,1.5,.5,1) both 2.7s}
@keyframes raceBadge{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.race-result.lost{color:rgba(255,255,255,.65)}
.race-result.won{background:#fff;color:#000;border-color:#fff;font-weight:var(--w-med)}
.race-result svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
@media(max-width:760px){.race-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.race.play .race-events li,.race.play .race-result{animation:none}.rc-meter i{transition:none}.race.play .lose .rc-meter i{width:7%}.race.play .win .rc-meter i{width:94%}}

/* ---------- BLOG / AI NEWS — editorial photo layout ---------- */
.blogfeed{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(210px,1fr);gap:16px;grid-auto-flow:dense}
.bpost{border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--paper);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .45s}
.bpost:hover{transform:translateY(-5px);box-shadow:0 24px 56px rgba(0,0,0,.12);border-color:rgba(24,24,24,.22)}
.bpost a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.bpost-img{aspect-ratio:16/10;overflow:hidden;background:#0a0a0a;flex:none}
.bpost-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.92);transition:transform .9s cubic-bezier(.22,1,.36,1),filter .5s}
.bpost:hover .bpost-img img{transform:scale(1.05);filter:grayscale(1) contrast(1.12) brightness(1.02)}
.bpost-body{padding:20px 22px;display:flex;flex-direction:column;gap:11px;flex:1}
.bpost-meta{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.bpost-meta .tag{border:1px solid var(--hair);border-radius:var(--r-pill);padding:4px 11px;color:var(--ink);font-size:10px}
.bpost h3{font-size:19px;font-weight:var(--w-reg);line-height:1.26;letter-spacing:-.01em;color:var(--ink)}
.bpost p{font-size:14px;color:var(--ash);line-height:1.55;flex:1}
.bpost-more{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:2px}
.bpost-more svg{width:15px;height:15px;stroke:currentColor;fill:none;transition:transform .3s}
.bpost:hover .bpost-more svg{transform:translateX(5px)}
.bpost.feat{grid-column:span 2;grid-row:span 2}
.bpost.feat .bpost-img{flex:1;aspect-ratio:auto;min-height:240px}
.bpost.feat h3{font-size:clamp(24px,2.3vw,33px);font-weight:var(--w-light);line-height:1.14}
.bpost.feat .bpost-body{padding:26px 30px;gap:14px}
.bpost.feat p{font-size:15px}
.bpost.wide{grid-column:span 2}
.bpost.wide a{flex-direction:row}
.bpost.wide .bpost-img{aspect-ratio:auto;width:44%;flex:none}
.bpost.wide .bpost-body{flex:1;justify-content:center}
@media(max-width:980px){
  .blogfeed{grid-template-columns:repeat(2,1fr)}
  .bpost.feat,.bpost.wide{grid-column:span 2;grid-row:auto}
  .bpost.feat .bpost-img{aspect-ratio:16/10;min-height:0}
  .bpost.wide a{flex-direction:column}
  .bpost.wide .bpost-img{aspect-ratio:16/10;width:auto}
}
@media(max-width:560px){.blogfeed{grid-template-columns:1fr}.bpost.feat,.bpost.wide{grid-column:span 1}}

/* ---------- AI LEAD FOLLOW-UP — hero live capture card ---------- */
.lead-cap{width:100%;max-width:382px;margin-left:auto;border:1px solid var(--hair-d);border-radius:18px;background:rgba(255,255,255,.05);backdrop-filter:blur(4px);padding:20px;font-family:var(--f-sys)}
.lc-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--hair-d);margin-bottom:16px}
.lc-head .lc-title{font-size:13px;color:#fff;font-weight:var(--w-med)}
.lc-live{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.lc-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 2s infinite}
.lc-avg{margin-left:auto;font-size:11px;color:rgba(255,255,255,.5)}
.lc-avg b{color:#fff;font-weight:var(--w-med)}
.lc-incoming{position:relative;border:1px solid rgba(255,255,255,.3);border-radius:13px;padding:15px;background:rgba(255,255,255,.07);overflow:hidden;animation:lcCard 6s ease-in-out infinite}
.lc-incoming::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:#fff;transform-origin:left;transform:scaleX(0);animation:lcBar 6s ease-in-out infinite}
.lc-row{display:flex;align-items:center;gap:12px}
.lc-avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--hair-d);display:grid;place-items:center;color:#fff;font-size:12px;letter-spacing:.04em;flex:none;background:rgba(255,255,255,.06)}
.lc-name{font-size:14px;color:#fff;font-weight:var(--w-med)}
.lc-src{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px;display:flex;align-items:center;gap:6px}
.lc-src svg{width:11px;height:11px;stroke:rgba(255,255,255,.6);fill:none;flex:none}
.lc-pills{position:relative;margin-left:auto;height:26px;width:96px;flex:none}
.lc-pill{position:absolute;right:0;top:0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:20px;border:1px solid var(--hair-d);color:#fff;white-space:nowrap;opacity:0}
.lc-pill.s1{animation:lcP1 6s ease-in-out infinite}
.lc-pill.s2{animation:lcP2 6s ease-in-out infinite}
.lc-pill.s3{background:#fff;color:#000;border-color:#fff;animation:lcP3 6s ease-in-out infinite}
.lc-toast{display:flex;align-items:center;gap:9px;margin-top:13px;padding:11px 13px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--hair-d);font-size:12.5px;color:rgba(255,255,255,.85);opacity:0;animation:lcToast 6s ease-in-out infinite}
.lc-toast svg{width:15px;height:15px;stroke:#fff;fill:none;flex:none}
.lc-toast b{color:#fff;font-weight:var(--w-med)}
.lc-rows{margin-top:16px;display:flex;flex-direction:column}
.lc-mini{display:flex;align-items:center;gap:11px;padding:11px 0;font-size:12.5px;color:rgba(255,255,255,.72);border-top:1px solid var(--hair-d)}
.lc-mini .lc-ava{width:28px;height:28px;border-radius:50%;border:1px solid var(--hair-d);flex:none;display:grid;place-items:center;font-size:10px;color:rgba(255,255,255,.8)}
.lc-mini b{color:#fff;font-weight:var(--w-reg)}
.lc-mini .lc-tag{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.lc-mini .lc-tag svg{width:13px;height:13px;stroke:#fff;fill:none}
@keyframes lcCard{0%,7%{opacity:0;transform:translateY(-12px) scale(.98)}13%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes lcBar{0%,13%{transform:scaleX(0);opacity:.9}40%{transform:scaleX(1);opacity:.9}46%,100%{transform:scaleX(1);opacity:0}}
@keyframes lcP1{0%,13%{opacity:0}17%,26%{opacity:1}31%,100%{opacity:0}}
@keyframes lcP2{0%,29%{opacity:0}33%,42%{opacity:1}47%,100%{opacity:0}}
@keyframes lcP3{0%,44%{opacity:0;transform:scale(.85)}49%{opacity:1;transform:scale(1)}90%{opacity:1}97%,100%{opacity:0}}
@keyframes lcToast{0%,43%{opacity:0;transform:translateY(8px)}49%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .lc-incoming,.lc-incoming::before,.lc-pill,.lc-toast{animation:none}
  .lc-incoming::before{transform:scaleX(1);opacity:0}
  .lc-pill.s1,.lc-pill.s2{display:none}
  .lc-pill.s3{opacity:1;transform:none}
  .lc-toast{opacity:1;transform:none}
}

/* ---------- WITHOUT / WITH comparison (v8-port, monochrome) ---------- */
.vs{background:var(--black);color:var(--paper);position:relative}
.vs>.container{position:relative;z-index:2}
.vs-intro{max-width:40ch;padding-top:var(--sec)}
.vs-intro .kicker{color:rgba(255,255,255,.66)}.vs-intro .kicker .dot{background:#fff}
.vs-intro h2{color:#fff;font-size:clamp(34px,5.2vw,72px);font-weight:var(--w-light);letter-spacing:-.03em;line-height:1.04}
.vs-intro .grad{font-style:italic}
.vs-intro p{color:rgba(255,255,255,.62);font-size:17px;line-height:1.6;margin-top:22px;max-width:56ch}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.6vw,26px);margin-top:48px;padding-bottom:var(--sec)}
.vs-col{border:1px solid var(--hair-d);border-radius:18px;padding:clamp(22px,3vw,32px)}
.vs-col.good{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}
.vs-col-head{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:18px}
.vs-col.good .vs-col-head{color:#fff}
.vh-ic{width:32px;height:32px;border-radius:9px;border:1px solid var(--hair-d);display:grid;place-items:center;flex:none}
.vs-col.good .vh-ic{background:#fff;border-color:#fff}
.vh-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.vs-col.good .vh-ic svg{stroke:#000}
.vs-row{display:flex;align-items:flex-start;gap:13px;padding:13px 0;border-bottom:1px solid var(--hair-d);font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.78)}
.vs.play .vs-row{animation:revealUp .55s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * .1s)}
@keyframes revealUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.vs-row:last-child{border-bottom:none}
.vs-mk{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.vs-col.bad .vs-mk{border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.5)}
.vs-col.good .vs-mk{background:#fff;color:#000}
.vs-mk svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6}
.vs-row b{color:#fff;font-weight:var(--w-med)}
.vs-col.bad .vs-row{color:rgba(255,255,255,.6)}
@media(max-width:760px){.vs-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.vs.play .vs-row{animation:none}}

/* ---------- CALL FLOW diagram (v8-port, monochrome) ---------- */
.cflow-sec{background:var(--black);color:var(--paper);position:relative;padding-block:var(--sec)}
.cflow-sec>.container{position:relative;z-index:2}
.cflow-head{max-width:44ch}
.cflow-head .kicker{color:rgba(255,255,255,.66)}.cflow-head .kicker .dot{background:#fff}
.cflow-head h2{color:#fff;font-size:clamp(30px,4.4vw,58px);font-weight:var(--w-light);letter-spacing:-.03em;line-height:1.06}
.cflow-head .grad{font-style:italic}
.cflow-head p{color:rgba(255,255,255,.64);font-size:17px;line-height:1.6;margin-top:20px;max-width:60ch}
.cflow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:54px;position:relative}
.cflow-rail{position:absolute;top:46px;left:12%;right:12%;height:2px;background:var(--hair-d);z-index:1;border-radius:2px;overflow:hidden}
.cflow-rail i{position:absolute;top:0;left:0;height:100%;width:30%;background:linear-gradient(90deg,transparent,#fff,transparent);animation:pktflow 3.4s linear infinite}
@keyframes pktflow{0%{transform:translateX(-120%)}100%{transform:translateX(440%)}}
.cnode{position:relative;z-index:2;text-align:center;padding:0 8px}
.cstage{width:94px;height:94px;border-radius:24px;margin:0 auto 18px;background:rgba(255,255,255,.05);border:1px solid var(--hair-d);display:grid;place-items:center;color:#fff;position:relative}
.cstage .pn{position:absolute;top:-8px;right:-8px;font-size:12px;color:#000;background:#fff;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:600;z-index:3}
.cnode h4{font-size:15.5px;color:#fff;margin-bottom:7px;font-weight:var(--w-med)}
.cnode p{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.5}
.cstage.ring svg{width:36px;height:36px;stroke:#fff;fill:none}
.cstage.ring::before{content:"";position:absolute;inset:0;border-radius:24px;border:2px solid rgba(255,255,255,.45);animation:ringPing 1.8s ease-out infinite}
@keyframes ringPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.32);opacity:0}}
.ceq{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:42px}
.ceq i{width:5px;border-radius:3px;background:#fff;transform-origin:bottom;animation:eqp 1s ease-in-out infinite}
.ceq i:nth-child(1){height:40%}.ceq i:nth-child(2){height:80%;animation-delay:.18s}.ceq i:nth-child(3){height:100%;animation-delay:.36s}.ceq i:nth-child(4){height:70%;animation-delay:.1s}.ceq i:nth-child(5){height:50%;animation-delay:.46s}
@keyframes eqp{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.cchecks{display:flex;flex-direction:column;gap:7px;width:100%;max-width:74px}
.cchecks i{display:flex;align-items:center;gap:6px}
.cchecks i b{width:15px;height:15px;border-radius:4px;border:1.5px solid rgba(255,255,255,.4);display:grid;place-items:center;flex:none}
.cchecks i b svg{width:9px;height:9px;opacity:0;stroke:#000;fill:none;stroke-width:3}
.cchecks i .bar{height:5px;flex:1;border-radius:3px;background:rgba(255,255,255,.2)}
.cstage.qual .cchecks i:nth-child(1) b{animation:qbox 4.2s ease .2s infinite}
.cstage.qual .cchecks i:nth-child(2) b{animation:qbox 4.2s ease 1.3s infinite}
.cstage.qual .cchecks i:nth-child(3) b{animation:qbox 4.2s ease 2.4s infinite}
@keyframes qbox{0%,8%{background:transparent}18%,100%{background:#fff}}
.cstage.qual .cchecks i:nth-child(1) b svg{animation:qtick 4.2s ease .2s infinite}
.cstage.qual .cchecks i:nth-child(2) b svg{animation:qtick 4.2s ease 1.3s infinite}
.cstage.qual .cchecks i:nth-child(3) b svg{animation:qtick 4.2s ease 2.4s infinite}
@keyframes qtick{0%,8%{opacity:0}18%,100%{opacity:1}}
.ccal{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:62px}
.ccal span{aspect-ratio:1;border-radius:4px;background:rgba(255,255,255,.16)}
.ccal span.slot{background:#fff;animation:slotLight 3s ease infinite}
@keyframes slotLight{0%,30%{background:rgba(255,255,255,.16);box-shadow:none}55%,100%{background:#fff;box-shadow:0 0 14px 1px rgba(255,255,255,.5)}}
.cflow-out{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.outc{border:1px solid var(--hair-d);border-radius:14px;padding:20px;display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.03)}
.outc .oc{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--hair-d);display:grid;place-items:center;flex:none}
.outc .oc svg{width:24px;height:24px;stroke:#fff;fill:none}
.outc .oc .ico-gc,.outc .oc .ico-gm{stroke:none}
.outc h5{font-size:15px;color:#fff;font-weight:var(--w-med);margin-bottom:5px}
.outc p{font-size:13px;color:rgba(255,255,255,.62);line-height:1.5}
.cover7{display:grid;grid-template-columns:280px 1fr;gap:clamp(24px,4vw,44px);align-items:center;margin-top:18px;border:1px solid var(--hair-d);border-radius:18px;padding:clamp(24px,3vw,36px);background:rgba(255,255,255,.03)}
.dial7{position:relative;width:240px;height:240px;margin:0 auto;max-width:100%}
.dial7 svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial7 .d-track{stroke:rgba(255,255,255,.1);fill:none;stroke-width:10}
.dial7 .d-prog{stroke:#fff;fill:none;stroke-width:10;stroke-linecap:round;stroke-dasharray:691;stroke-dashoffset:691;transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1)}
.cover7.play .dial7 .d-prog{stroke-dashoffset:0}
.dial7 .d-sweep{transform-box:view-box;transform-origin:50% 50%;animation:sweep7 6s linear infinite}
@keyframes sweep7{to{transform:rotate(360deg)}}
.dial7-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.dial7-center b{font-size:42px;color:#fff;font-weight:var(--w-light);line-height:1}
.dial7-center span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);display:block;margin-top:4px}
.cover7 h3{font-size:clamp(22px,2.8vw,30px);color:#fff;font-weight:var(--w-light);letter-spacing:-.02em;margin-bottom:12px}
.cover7 p{font-size:14.5px;color:rgba(255,255,255,.7);line-height:1.6;max-width:48ch}
.pills7{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.pills7 span{font-size:11.5px;color:#fff;border:1px solid var(--hair-d);border-radius:999px;padding:6px 13px;background:rgba(255,255,255,.05)}
@media(max-width:760px){.cflow{grid-template-columns:1fr 1fr;gap:24px 10px}.cflow-rail{display:none}.cflow-out{grid-template-columns:1fr}.cover7{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cflow-rail i,.cstage.ring::before,.ceq i,.cstage.qual .cchecks i b,.cstage.qual .cchecks i b svg,.ccal span.slot,.dial7 .d-sweep{animation:none}.cstage.qual .cchecks i b{background:#fff}.cstage.qual .cchecks i b svg{opacity:1}.ccal span.slot{background:#fff}.cover7 .dial7 .d-prog{stroke-dashoffset:0;transition:none}}

/* ---------- HORIZONTAL PINNED SCROLL (SEO "climb") ---------- */
.hscroll{position:relative;background:var(--black);color:var(--paper);height:calc(var(--panels,4) * 100vh)}
.hscroll-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.hscroll-track{display:flex;height:100%;will-change:transform}
.hpanel{flex:0 0 100vw;height:100%;display:flex;align-items:center;padding:120px var(--gut) 90px;position:relative;overflow:hidden}
.hpanel::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--hpbg);background-size:cover;background-position:center;filter:grayscale(1) contrast(1.08) brightness(.5);opacity:.45}
.hpanel::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 45%,rgba(0,0,0,.4) 100%)}
.hpanel-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center}
.hp-index{font-size:clamp(90px,15vw,210px);line-height:.8;font-weight:var(--w-light);letter-spacing:-.05em;color:#fff;opacity:.14;position:absolute;top:6vh;left:var(--gut);z-index:1;pointer-events:none}
.hp-tag{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.hp-tag::before{content:"";width:32px;height:1px;background:#fff}
.hpanel h3{color:#fff;font-size:clamp(34px,5vw,72px);font-weight:var(--w-light);letter-spacing:-.03em;line-height:1.02;margin-bottom:20px}
.hpanel h3 .grad{font-style:italic}
.hpanel p{color:rgba(255,255,255,.74);font-size:18px;line-height:1.6;max-width:46ch}
.hp-points{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px}
.hp-points li{font-size:15px;color:rgba(255,255,255,.82);padding-left:22px;position:relative}
.hp-points li::before{content:"→";position:absolute;left:0;color:var(--smoke)}
/* mock visual card on the right of each panel */
.hp-visual{border:1px solid var(--hair-d);background:rgba(255,255,255,.03);backdrop-filter:blur(2px);padding:30px;min-height:300px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.hp-bar{height:10px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.hp-bar i{position:absolute;left:0;top:0;bottom:0;background:#fff;width:0;transition:width 1s cubic-bezier(.22,1,.36,1)}
.hpanel.live .hp-bar i{width:var(--w,70%)}
.hp-bar-label{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.6);margin-bottom:-4px}
.hp-chat{display:flex;flex-direction:column;gap:12px}
.hp-msg{font-size:14px;line-height:1.5;padding:12px 16px;border:1px solid var(--hair-d);max-width:90%}
.hp-msg.q{align-self:flex-start;color:rgba(255,255,255,.7)}
.hp-msg.a{align-self:stretch;color:#fff;background:rgba(255,255,255,.06)}
.hp-msg.a b{font-weight:var(--w-med)}
.hp-cite{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke);margin-top:4px}
.hp-pin{display:flex;align-items:center;gap:14px;font-size:15px;color:#fff}
.hp-pin svg{width:26px;height:26px;stroke:#fff;fill:none}
.hp-stars{letter-spacing:3px;color:#fff;font-size:15px}
/* horizontal progress dots */
.hscroll-rail{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:10px}
.hscroll-rail span{width:30px;height:2px;background:rgba(255,255,255,.25);transition:background .4s}
.hscroll-rail span.on{background:#fff}
.hscroll-cue{position:absolute;bottom:38px;right:var(--gut);z-index:5;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:10px}
.hscroll-cue svg{width:30px;height:10px;stroke:currentColor;fill:none}
@media(max-width:880px){
  .hscroll{height:auto!important}
  .hscroll-pin{position:static;height:auto;display:block}
  .hscroll-track{flex-direction:column;transform:none!important;height:auto}
  .hpanel{flex:none;height:auto;min-height:90vh;padding:90px var(--gut)}
  .hpanel-inner{grid-template-columns:1fr;gap:30px}
  .hp-index{position:static;opacity:.14;margin-bottom:10px}
  .hscroll-rail,.hscroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hscroll{height:auto!important}
  .hscroll-pin{position:static;height:auto}
  .hscroll-track{flex-direction:column;transform:none!important;height:auto}
  .hpanel{flex:none;height:auto;min-height:80vh}
}

@media(prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .rise-line>span{transform:none}
  .jm-img{transition:opacity .4s}
  .j-step{opacity:1}
  [data-magnetic].mag{transform:none}
}

/* ===== Pull-up layer transition (service pages): the stats section before the FAQ pins (dark),
   and the FAQ + CTA + Explore scroll up over it as a white sheet ===== */
.flip-pin{position:sticky;top:0;z-index:0;background:#000;min-height:100svh;display:grid;align-content:start;padding-top:108px}
.flip-pin>*{width:100%}
.flip-pin .section.tight{padding-block:16px}
.flip-sheet{position:relative;z-index:1;background:var(--paper);border-radius:30px 30px 0 0;box-shadow:0 -26px 64px rgba(0,0,0,.55)}
.flip-sheet::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:46px;height:4px;border-radius:999px;background:rgba(24,24,24,.18);z-index:2}
.flip-pin .metric-row{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.flip-pin .metric{background:#000}
.flip-pin .metric b{color:#fff}
.flip-pin .metric span{color:rgba(255,255,255,.62)}
.flip-pin .muted{color:rgba(255,255,255,.55)}
@media(prefers-reduced-motion:reduce){.flip-pin{position:static;min-height:0;display:block;padding-top:0}}
@media(max-width:880px){.flip-pin{position:static;min-height:auto;display:block;padding-top:0}}

/* NEXT STEP — Business AI Automation feature band (homepage) */
.next-step{padding-top:0}
.next-card{display:grid;grid-template-columns:1.55fr .85fr;gap:0;background:var(--black);color:var(--paper);border-radius:4px;overflow:hidden;text-decoration:none;border:1px solid var(--black);transition:transform .4s ease}
.next-card:hover{transform:translateY(-4px)}
.next-body{padding:52px 48px}
.next-body .kicker{color:rgba(255,255,255,.6)}
.next-body .kicker .dot{background:#fff}
.next-card h2{color:var(--paper);font-size:clamp(26px,3.4vw,38px);margin:8px 0 16px;font-weight:var(--w-reg)}
.next-card .section-lead{color:rgba(255,255,255,.72);margin-bottom:26px;max-width:60ch}
.next-card .section-lead strong{color:#fff;font-weight:var(--w-med)}
.next-card .sc-go{color:var(--paper)}
.next-card:hover .sc-go svg{transform:translateX(5px)}
.next-card .sc-go svg{stroke:currentColor;fill:none;transition:transform .3s}
.next-tags{list-style:none;margin:0;padding:40px;display:flex;flex-direction:column;justify-content:center;gap:0;border-left:1px solid var(--hair-d);background:rgba(255,255,255,.02)}
.next-tags li{padding:15px 6px;font-size:15px;color:rgba(255,255,255,.82);border-bottom:1px solid var(--hair-d);display:flex;align-items:center;gap:12px}
.next-tags li:last-child{border-bottom:0}
.next-tags li::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(90deg,#a0e0ab,#ffac2e,#a52d25);flex:none}
@media(max-width:880px){.next-card{grid-template-columns:1fr}.next-body{padding:38px 26px}.next-tags{border-left:0;border-top:1px solid var(--hair-d);padding:20px 26px}}


/* seed-of-life brand mark — perpetual slow spin */
.mk{animation:mkSpin 16s linear infinite}
.brand .mk{width:42px;height:42px}
@keyframes mkSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mk{animation:none}}