/* ═══ Inter, served from this domain ════════════════════════════════════
   This used to be a <link> to fonts.googleapis.com, which is a render-
   blocking stylesheet on a third-party origin: the browser had to resolve
   DNS, open a TLS connection and read a CSS file before it could even start
   fetching the font, and only then could it paint text. Serving the file
   ourselves removes two round trips to a host we do not control.

   Google now ships Inter as one variable font, so a single file covers every
   weight the site uses. latin-ext is a separate file and is only fetched on
   pages that actually contain a character from it — the rupee sign, mostly. */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   APASTRON — Apple type system on a warm palette
   SF Pro resolves natively on macOS/iOS via -apple-system;
   Inter is the metric-compatible fallback elsewhere.
   ============================================================ */
:root{
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
         "Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* brand */
  --accent:#E8590C; --accent-hot:#F26522; --accent-press:#C8480A;
  --accent-tint:#FDEDE2; --accent-glow:rgba(242,101,34,.16);

  /* warm neutrals */
  --text:#21160F; --text-2:#6F6157; --text-3:#9A8B80;
  --bg:#FFFDFB; --bg-alt:#FBF4ED; --bg-warm:#F7EADF;
  --sec-pad:clamp(52px,6.2vw,84px);   /* one vertical rhythm, top == bottom */
  --card:#FFFFFF; --hairline:#EDE0D4;
  --deep:#1C1410; --deep-2:#2A1F18;          /* warm near-black, both themes */
  --on-deep:#FBF4ED; --on-deep-2:#B7A79A;

  --shadow-sm:0 1px 2px rgba(88,54,26,.05);
  --shadow:0 2px 8px rgba(88,54,26,.06),0 22px 48px -20px rgba(88,54,26,.22);
  --shadow-lg:0 2px 6px rgba(88,54,26,.08),0 44px 88px -34px rgba(88,54,26,.4);

  --r-sm:12px; --r:20px; --r-lg:30px; --r-pill:980px;
  --maxw:1680px; --measure:720px;
  --ease:cubic-bezier(.28,.11,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:17px;line-height:1.47059;letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern","liga","calt";
}

/* ---------- Apple type scale ---------- */
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--text);text-wrap:balance}
.t-hero{font-size:clamp(33px,5.2vw,60px);line-height:1.08;letter-spacing:-.024em;
  /* the hero slider mixes one h1 with sibling <p>s, so weight, colour and
     wrapping are set here rather than inherited from the heading reset */
  font-weight:600;color:var(--text);text-wrap:balance;margin:0}
.t-sec {font-size:clamp(27px,3.4vw,42px);line-height:1.12;letter-spacing:-.021em}
.t-sub {font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-.018em}
.t-card{font-size:21px;line-height:1.2;letter-spacing:-.018em}
.t-sm  {font-size:18px;line-height:1.25;letter-spacing:-.014em}
.intro{font-size:clamp(16.5px,1.5vw,18px);line-height:1.5;letter-spacing:.004em;
  color:var(--text-2);margin:0}
.body-s{font-size:16px;line-height:1.5;letter-spacing:-.017em;color:var(--text-2);margin:0}
.eyebrow{font-size:13px;line-height:1.33;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;color:var(--accent);margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}

.wrap{max-width:var(--maxw);margin:0 auto;
  padding-inline:max(clamp(24px,3.4vw,56px),env(safe-area-inset-left))}
.stack-md>*+*{margin-top:15px}
.center{text-align:center}
.measure{max-width:var(--measure);margin-inline:auto}

.skip{position:absolute;left:-9999px;top:8px;background:var(--text);color:#fff;
  padding:10px 18px;border-radius:var(--r-pill);z-index:300;font-size:14px}
.skip:focus{left:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:16px;font-weight:500;letter-spacing:-.022em;
  padding:11px 22px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),
  transform .22s var(--ease),box-shadow .22s var(--ease);min-height:44px;text-align:center}
.btn:active{transform:scale(.975)}
.btn-fill{background:var(--accent);color:#fff;box-shadow:0 8px 22px -10px var(--accent-glow),
  0 2px 6px rgba(200,72,10,.25)}
.btn-fill:hover{background:var(--accent-press);transform:translateY(-1px);
  box-shadow:0 14px 30px -12px rgba(200,72,10,.5)}
.btn-line{border-color:var(--hairline);color:var(--text);background:var(--card)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.btn-light{background:#fff;color:#21160F}
.btn-light:hover{background:var(--bg-warm)}
.btn-sm{font-size:14px;padding:8px 18px;min-height:36px}
.btn-lg{font-size:16.5px;padding:13px 27px;min-height:48px}
.btn-block{width:100%}
.link{color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:3px}
.link::after{content:"\203A";font-size:1.25em;line-height:1;transition:transform .25s var(--ease)}
.link:hover{text-decoration:underline}
.link:hover::after{transform:translateX(3px)}

/* ---------- nav ---------- */
/* the bar carried 14px links at .82 opacity over a 78%-opaque ground, which
   read as faint against the page scrolling underneath — full-strength text
   on a more solid bar instead */
.nav{position:sticky;top:0;z-index:100;height:62px;background:rgba(255,253,251,.93);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline)}
.nav-in{display:flex;align-items:center;height:62px;gap:14px;flex-wrap:nowrap}
.nav-logo img{height:22px;width:auto}
.nav-links{display:flex;gap:6px;margin-inline:auto}
.nav-links{align-items:center}
.nav-links > li{display:flex}
.nav-links > li > a{display:inline-flex;align-items:center;gap:4px;
  font-size:14.8px;font-weight:500;letter-spacing:-.012em;
  white-space:nowrap;color:var(--text);opacity:1;padding:7px 11px;
  border-radius:var(--r-pill);
  transition:background .2s var(--ease),color .2s var(--ease)}
.nav-links > li > a:hover{background:var(--bg-alt);color:var(--accent)}
.nav-links > li > a[aria-current="page"],
.nav-links > li > a[aria-current="true"]{color:var(--accent);font-weight:600;
  background:var(--accent-tint)}
.mega-c{opacity:.7}
.nav-links > li > a:hover .mega-c{opacity:1}
.nav-phone{font-size:14.4px;font-weight:500;color:var(--text-2);white-space:nowrap}
.nav-phone:hover{color:var(--accent)}
.burger{display:none;width:44px;height:44px;margin-left:auto;background:none;border:0;
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:17px;height:1.5px;background:var(--text);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.nav.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.sheet{display:none;position:fixed;inset:62px 0 0;background:var(--bg);z-index:99;
  padding:26px 22px 120px;overflow-y:auto}
.nav.open+.sheet{display:block;animation:fade .3s var(--ease)}
.sheet a:not(.btn){display:block;font-size:25px;font-weight:600;letter-spacing:-.02em;
  padding:15px 0;border-bottom:1px solid var(--hairline)}
.sheet .btn{margin-top:26px;width:100%}
@keyframes fade{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.socials{display:flex;align-items:center;gap:4px}
.socials a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-2);transition:.2s var(--ease)}
.socials a svg{width:17px;height:17px;fill:currentColor}
.socials a:hover{color:var(--accent);background:var(--accent-tint)}
.foot-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.foot-social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-2);border:1px solid var(--hairline);background:var(--card);
  transition:.22s var(--ease)}
.foot-social a svg{width:18px;height:18px;fill:currentColor}
.foot-social a:hover{color:#fff;background:var(--accent);border-color:var(--accent);
  transform:translateY(-2px)}
.sheet-social{display:flex;gap:10px;margin-top:28px;padding-top:24px;
  border-top:1px solid var(--hairline)}
.sheet-social a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-2);border:1px solid var(--hairline);transition:.2s var(--ease)}
.sheet-social a svg{width:20px;height:20px;fill:currentColor}
.sheet-social a:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
@media(max-width:1280px){.nav .socials{display:none}}

/* ---------- sections ---------- */
section{padding-block:var(--sec-pad)}
.alt{background:var(--bg-alt)}
.sec-head{max-width:820px;margin-bottom:clamp(28px,3.2vw,42px)}
.sec-head.center{margin-inline:auto}

/* ---------- hero ---------- */
.hero{padding-block:var(--sec-pad);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -20% auto;height:85%;pointer-events:none;
  background:
    radial-gradient(48% 62% at 50% 0%,var(--accent-glow),transparent 72%),
    radial-gradient(38% 46% at 12% 14%,rgba(247,234,223,.9),transparent 70%),
    radial-gradient(38% 46% at 88% 10%,rgba(253,237,226,.85),transparent 70%)}
.hero-in{position:relative}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:24px}
.trust-line{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin-top:18px;
  font-size:14px;color:var(--text-3);letter-spacing:-.012em}
.trust-line span{display:inline-flex;align-items:center;gap:6px}
.trust-line svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* showcase panel */
.showcase{margin-top:clamp(30px,3.4vw,46px);background:var(--deep);border-radius:var(--r-lg);
  padding:clamp(18px,2.2vw,26px);color:var(--on-deep);box-shadow:var(--shadow-lg)}
.showcase-top{display:flex;align-items:center;gap:10px;margin-bottom:22px;padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.showcase-top b{font-size:13px;font-weight:500}
.showcase-top .pill{margin-left:auto;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-hot);background:rgba(242,101,34,.18);padding:4px 11px;border-radius:var(--r-pill)}
.dots{display:flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.dots i:first-child{background:var(--accent-hot)}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.flow-step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-sm);padding:18px}
.flow-step .n{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--accent-hot)}
.flow-step h3{font-size:16px;color:var(--on-deep);margin:8px 0 5px;letter-spacing:-.01em}
.flow-step p{font-size:14px;line-height:1.45;color:var(--on-deep-2);letter-spacing:-.01em}
.flow-step.live{background:rgba(242,101,34,.12);border-color:rgba(242,101,34,.42)}
.showcase-foot{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:var(--on-deep-2)}
.showcase-foot b{color:var(--accent-hot);font-weight:600}

/* ---------- client strip ---------- */
.strip{padding-block:32px;border-block:1px solid var(--hairline);background:var(--bg-alt)}
.strip p{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);
  text-align:center;margin-bottom:16px}
.strip ul{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px}
.strip li{font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--text-3);
  opacity:.8;transition:.25s}
.strip li:hover{opacity:1;color:var(--text)}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.tile{grid-column:span 2;background:var(--card);border-radius:var(--r);padding:25px;
  border:1px solid var(--hairline);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.tile:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--shadow)}
.tile.w3{grid-column:span 3}
.tile.feature{grid-column:span 3;background:var(--deep);border-color:transparent;color:var(--on-deep-2)}
.tile.feature h3{color:var(--on-deep)}
.tile.feature .body-s{color:var(--on-deep-2)}
.tile.feature .chip{background:rgba(255,255,255,.07);color:var(--on-deep-2);
  border-color:rgba(255,255,255,.14)}
.tile.feature .ico{background:rgba(242,101,34,.2)}
.tile.feature .ico svg{stroke:var(--accent-hot)}
.ico{width:40px;height:40px;border-radius:11px;background:var(--accent-tint);display:grid;
  place-items:center;margin-bottom:16px;flex:none}
.ico svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tile h3{margin-bottom:8px}
.tile .body-s{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.chip{font-size:13px;color:var(--text-2);background:var(--bg-alt);border:1px solid var(--hairline);
  border-radius:8px;padding:4px 10px}
.alt .chip{background:var(--bg)}
.badge{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent-hot);margin-bottom:14px}

/* ---------- inline CTA band ---------- */
.band{margin-top:clamp(30px,3.4vw,44px);background:var(--bg-warm);border:1px solid var(--hairline);
  border-radius:var(--r);padding:clamp(22px,2.6vw,30px);display:flex;flex-wrap:wrap;
  align-items:center;gap:18px 28px}
.band-txt{flex:1 1 380px}
.band h3{margin-bottom:6px}
.band .btn{flex:none}

/* ---------- solutions rail ---------- */
.rail-head{display:flex;align-items:flex-end;gap:24px;margin-bottom:32px}
.rail-nav{display:flex;gap:8px;margin-left:auto;flex:none}
.rail-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--hairline);
  background:var(--card);color:var(--text);cursor:pointer;display:grid;place-items:center;
  transition:.2s var(--ease)}
.rail-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
.rail-btn:disabled{opacity:.32;cursor:default}
.rail-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(298px,360px);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;
  margin-inline:calc(-1 * clamp(24px,3.4vw,56px));
  padding-inline:clamp(24px,3.4vw,56px);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.sol{scroll-snap-align:start;background:var(--card);border:1px solid var(--hairline);
  border-radius:var(--r);padding:25px;display:flex;flex-direction:column;min-height:340px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.sol:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.sol .flag{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:var(--accent);border-radius:7px;
  padding:4px 10px;margin-bottom:14px}
.sol .kicker{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:12px}
.sol h3{margin-bottom:10px}
.sol .body-s{flex:1}
.sol .meta{margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline);
  font-size:14px;color:var(--text-2)}
.sol .meta b{color:var(--accent);font-weight:600}
.sol .ask{margin-top:16px;font-size:15px;font-weight:500;color:var(--accent);
  display:inline-flex;align-items:center;gap:3px}
.sol .ask::after{content:"\203A";font-size:1.25em;transition:transform .25s var(--ease)}
.sol:hover .ask::after{transform:translateX(3px)}

/* ---------- process ---------- */
.dark{background:var(--deep);color:var(--on-deep-2)}
.dark h2,.dark h3{color:var(--on-deep)}
.dark .intro{color:var(--on-deep-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{padding:26px 22px 26px 0;border-top:2px solid rgba(255,255,255,.14);transition:.4s var(--ease)}
.step:hover{border-top-color:var(--accent-hot)}
.step .n{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--accent-hot)}
.step h3{font-size:19px;letter-spacing:-.016em;margin:12px 0 8px}
.step p{font-size:16px;line-height:1.5;color:var(--on-deep-2);letter-spacing:-.016em}
.dark .band{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.dark .band h3{color:var(--on-deep)}
.dark .band .body-s{color:var(--on-deep-2)}

/* ---------- stack ---------- */
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 28px}
.cols h4{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--hairline)}
.cols li{font-size:16px;letter-spacing:-.017em;padding:6px 0}

/* ---------- industries ---------- */
.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pills span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hairline);
  background:var(--card);border-radius:var(--r-pill);padding:10px 18px;font-size:15px;
  letter-spacing:-.016em;transition:.25s var(--ease)}
.pills span:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.pills i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* ============ LEAD FORM ============ */
.lead{background:
  radial-gradient(70% 90% at 8% 0%,var(--bg-warm),transparent 60%),
  radial-gradient(60% 80% at 100% 100%,var(--accent-tint),transparent 62%),
  var(--bg-alt)}
.lead-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(28px,3.6vw,52px);align-items:start}

.lead-copy h2{margin:14px 0 18px}
.checks{margin-top:22px;display:grid;gap:12px}
.checks li{display:flex;gap:11px;font-size:16px;letter-spacing:-.018em;line-height:1.5}
.checks svg{width:21px;height:21px;flex:none;margin-top:1px;stroke:#fff;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;background:var(--accent);border-radius:50%;padding:4px}
.checks b{font-weight:600}
.checks span{color:var(--text-2)}
.reassure{margin-top:30px;padding:20px 22px;background:var(--card);border:1px solid var(--hairline);
  border-radius:var(--r-sm);display:flex;gap:14px;align-items:flex-start}
.reassure svg{width:22px;height:22px;flex:none;stroke:var(--accent);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.direct{margin-top:26px;font-size:16px;color:var(--text-2)}
.direct a{color:var(--accent);font-weight:500}
.direct a:hover{text-decoration:underline}

.form-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow)}
.form-card > h3{margin-bottom:6px}
.form-card > .body-s{margin-bottom:24px}
form{display:grid;gap:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px}
.field label{font-size:14px;font-weight:600;letter-spacing:-.012em}
.field label .opt{font-weight:400;color:var(--text-3)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:16px;letter-spacing:-.016em;color:var(--text);
  background:var(--bg);border:1px solid var(--hairline);border-radius:12px;
  padding:13px 15px;width:100%;min-height:48px;transition:.18s var(--ease);appearance:none}
.field textarea{min-height:104px;resize:vertical;line-height:1.45}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6157' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:18px;
  padding-right:42px;cursor:pointer}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--card);
  box-shadow:0 0 0 4px var(--accent-glow)}
.field.bad input,.field.bad select{border-color:#C0392B;box-shadow:0 0 0 4px rgba(192,57,43,.1)}
.err{font-size:13px;color:#C0392B;display:none}
.field.bad .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;
  color:var(--text-3)}
.consent input{width:17px;height:17px;min-height:0;margin-top:2px;flex:none;accent-color:var(--accent)}
.form-foot{font-size:13px;color:var(--text-3);text-align:center}
.form-note{display:none;padding:12px 14px;border-radius:10px;font-size:14px;
  background:rgba(192,57,43,.08);color:#A5321F;border:1px solid rgba(192,57,43,.25)}
.form-note.on{display:block}

.thanks{display:none;text-align:center;padding:26px 0}
.thanks.on{display:block;animation:fade .45s var(--ease)}
.thanks .tick{width:62px;height:62px;border-radius:50%;background:var(--accent);margin:0 auto 22px;
  display:grid;place-items:center}
.thanks .tick svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.thanks h3{margin-bottom:10px}
.form-card.sent form,.form-card.sent > h3,.form-card.sent > .body-s{display:none}

/* ---------- floating + sticky CTAs ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:90;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 8px 24px -6px rgba(37,211,102,.6);
  transition:transform .25s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:28px;height:28px;fill:#fff}
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,253,251,.93);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-top:1px solid var(--hairline);transform:translateY(110%);transition:transform .35s var(--ease)}
.stickybar.up{transform:none}
.stickybar .btn{flex:1}

/* ---------- footer ---------- */
footer{background:var(--bg-alt);color:var(--text-2);padding-block:52px 34px;font-size:14.5px;
  line-height:1.5;letter-spacing:-.01em;border-top:1px solid var(--hairline)}
.foot-note{padding-bottom:22px;border-bottom:1px solid var(--hairline);color:var(--text-2);
  max-width:820px}
.foot-cols{display:grid;gap:30px 26px;padding-block:36px}
.foot-cols img{height:19px;width:auto;margin-bottom:14px}
.foot-cols h4{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text);margin-bottom:15px}
.foot-cols li{padding:5px 0}
/* links carry the primary text tone — 13px at --text-2 measured 5.5:1 and read as disabled */
.foot-cols a{color:var(--text);transition:color .2s var(--ease)}
.foot-cols a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.foot-bot{border-top:1px solid var(--hairline);padding-top:18px;display:flex;flex-wrap:wrap;
  gap:8px 24px;justify-content:space-between;color:var(--text-3)}
.foot-bot ul{display:flex;flex-wrap:wrap;gap:18px}

/* ============ ANIMATED HERO ============ */
.hero{--hue:22;--hue2:34}
.hero::before{display:none}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;transition:background 1.2s var(--ease)}
.orb-1{width:min(620px,70vw);aspect-ratio:1;top:-22%;left:4%;opacity:.5;
  background:radial-gradient(circle,hsl(var(--hue) 100% 62% / .85) 0%,hsl(var(--hue) 100% 62% / .35) 38%,transparent 72%);
  animation:drift1 22s ease-in-out infinite}
.orb-2{width:min(540px,62vw);aspect-ratio:1;top:-14%;right:2%;opacity:.42;
  background:radial-gradient(circle,hsl(var(--hue2) 100% 66%),transparent 68%);
  animation:drift2 26s ease-in-out infinite}
.orb-3{width:min(460px,55vw);aspect-ratio:1;top:34%;left:38%;opacity:.28;
  background:radial-gradient(circle,hsl(14 96% 68%),transparent 70%);
  animation:drift3 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6%,8%,0) scale(1.12)}66%{transform:translate3d(-5%,4%,0) scale(.94)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(-7%,6%,0) scale(1.08)}70%{transform:translate3d(4%,-3%,0) scale(.96)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(8%,-7%,0) scale(1.15)}}

/* faint engineering grid, faded at the edges */
.hero-mesh{position:absolute;inset:0;
  background-image:linear-gradient(rgba(122,80,48,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(122,80,48,.09) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(ellipse 72% 58% at 50% 8%,#000 25%,transparent 72%);
  mask-image:radial-gradient(ellipse 72% 58% at 50% 8%,#000 25%,transparent 72%);
  animation:meshpan 40s linear infinite}
@keyframes meshpan{to{background-position:68px 68px}}

/* gradient wordmark inside the headline */
.grad{background:linear-gradient(102deg,hsl(var(--hue) 88% 46%) 0%,hsl(var(--hue2) 96% 58%) 42%,
  hsl(var(--hue) 92% 42%) 100%);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 7s linear infinite}
@keyframes shine{to{background-position:220% center}}

/* staggered entrance for the active slide */
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.slide.on .eyebrow  {animation:riseIn .62s var(--ease) both}
.slide.on h1        {animation:riseIn .72s .07s var(--ease) both}
.slide.on .intro    {animation:riseIn .72s .15s var(--ease) both}
.slide.on .hero-cta {animation:riseIn .72s .23s var(--ease) both}

/* dots double as a dwell-progress bar */
.dot{position:relative;overflow:hidden}
.dot::after{content:"";position:absolute;inset:0;width:0;background:var(--accent);border-radius:99px}
.dot[aria-selected="true"]::after{animation:fill var(--dwell,7000ms) linear forwards}
.slider.paused .dot::after{animation-play-state:paused}
@keyframes fill{from{width:0}to{width:100%}}

/* sheen across the primary button */
.btn-fill{position:relative;overflow:hidden;isolation:isolate}
.btn-fill::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-22deg);animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%,62%{left:-130%}100%{left:150%}}

/* live-looking showcase */
.flow-step{transition:background .5s var(--ease),border-color .5s var(--ease),
  transform .5s var(--ease)}
.flow-step.live{transform:translateY(-3px)}
.showcase-top .pill::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent-hot);margin-right:6px;vertical-align:1px;animation:blink 1.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(242,101,34,.6)}
  50%{opacity:.45;box-shadow:0 0 0 5px rgba(242,101,34,0)}}

/* scroll cue */
.cue{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:26px;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.cue i{width:22px;height:34px;border:1.5px solid var(--hairline);border-radius:12px;
  position:relative}
.cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;margin-left:-1.5px;
  background:var(--accent);border-radius:2px;animation:bob 1.9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(11px);opacity:.2}}

@media(prefers-reduced-motion:reduce){
  .orb,.hero-mesh,.grad,.btn-fill::after,.cue i::after,.showcase-top .pill::before{animation:none}
  .slide.on .eyebrow,.slide.on h1,.slide.on .intro,.slide.on .hero-cta{animation:none}
  .dot[aria-selected="true"]::after{animation:none;width:100%}
  .grad{color:var(--accent);-webkit-text-fill-color:var(--accent)}
}

/* ---------- hero slider ---------- */
.slider{position:relative;display:flex;flex-direction:column;align-items:center}
.slider>.slides,.slider>.slide-ctrl,.slider>.trust-line{width:100%}
.slides{display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s .6s}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease),
  transform .6s var(--ease),visibility 0s}
.slide-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:24px}
.dots-nav{display:flex;gap:9px}
.dot{width:26px;height:4px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:var(--hairline);transition:.3s var(--ease);position:relative;overflow:hidden}
.dot[aria-selected="true"]{background:var(--hairline);width:44px}
.arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--hairline);
  background:var(--card);cursor:pointer;display:grid;place-items:center;transition:.2s var(--ease)}
.arrow:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.arrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- results bar ---------- */
.results{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding:clamp(22px,2.4vw,30px);background:var(--card);border:1px solid var(--hairline);
  border-radius:var(--r);box-shadow:var(--shadow-sm)}
.results div{text-align:center}
.results b{display:block;font-size:clamp(26px,2.8vw,34px);font-weight:600;letter-spacing:-.03em;
  line-height:1.05;color:var(--accent)}
.results span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--text-2)}

/* ---------- work / portfolio ---------- */
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.work{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.work:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.work-img{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--bg-warm)}
.work-img img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .6s var(--ease)}
.work:hover .work-img img{transform:scale(1.04)}
.work-tag{position:absolute;top:12px;left:12px;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;background:rgba(28,20,16,.88);
  padding:5px 11px;border-radius:7px}
.work-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.work-body h3{font-size:17px;letter-spacing:-.014em;margin-bottom:5px}
.work-body .body-s{flex:1;font-size:14.5px}
.work-meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:6px}
.work-cta{margin-top:clamp(28px,3.2vw,40px);text-align:center}

.work-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.fbtn{font-family:inherit;font-size:14px;letter-spacing:-.012em;color:var(--text-2);
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:9px 17px;cursor:pointer;transition:.2s var(--ease)}
.fbtn:hover{border-color:var(--accent);color:var(--accent)}
.fbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.work[hidden]{display:none}
.work-empty{text-align:center;color:var(--text-3);padding:36px 0}
.work-more{display:flex;justify-content:center;margin-top:28px}
.work-link{margin-top:14px;font-size:14px;font-weight:500;color:var(--accent);
  display:inline-flex;align-items:center;gap:3px;align-self:flex-start}
.work-link-ask::after{content:"\203A"}
.work-link::after{content:"\2197";font-size:1.05em;transition:transform .25s var(--ease)}
.work:hover .work-link::after{transform:translate(2px,-2px)}
.work-link:hover{text-decoration:underline}
.work-img-ph{display:grid;place-items:center;
  background:linear-gradient(145deg,var(--bg-warm),var(--accent-tint))}
.ph-art svg{width:56px;height:56px;stroke:var(--accent);fill:none;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.ph-note{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:11px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  background:rgba(255,255,255,.82);padding:4px 10px;border-radius:6px;white-space:nowrap}

/* ---------- offer badge + qualifier (hero) ---------- */
.offer-badge{display:inline-flex;align-items:center;gap:10px;align-self:center;
  margin-bottom:26px;
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:7px 16px;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-2);box-shadow:var(--shadow-sm)}
.offer-badge i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  animation:blink 1.8s ease-in-out infinite}
.qualifier{margin-top:14px;font-size:14px;line-height:1.5;color:var(--text-3);
  max-width:620px;margin-inline:auto}
.qualifier b{color:var(--text-2);font-weight:600}

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);
  padding:28px;display:flex;flex-direction:column;position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.hero-plan{background:var(--deep);border-color:transparent;color:var(--on-deep-2)}
.plan.hero-plan h3,.plan.hero-plan .price{color:var(--on-deep)}
.plan.hero-plan .plan-sub,.plan.hero-plan li{color:var(--on-deep-2)}
.plan.hero-plan .plan-list{border-top-color:rgba(255,255,255,.14)}
.plan.hero-plan svg{stroke:var(--accent-hot)}
.plan-flag{position:absolute;top:-11px;left:28px;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--accent);
  border-radius:6px;padding:4px 11px}
.plan h3{font-size:19px;letter-spacing:-.015em;margin-bottom:5px}
.plan-sub{font-size:14px;color:var(--text-2);margin-bottom:18px}
.price{font-size:29px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.price small{display:block;font-size:13px;font-weight:400;letter-spacing:0;color:var(--text-3);
  margin-top:5px}
.plan.hero-plan .price small{color:var(--on-deep-2)}
.price-slot{color:var(--accent);border-bottom:2px dashed var(--accent);padding-bottom:1px}
.plan-list{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--hairline);
  display:grid;gap:10px;flex:1}
.plan-list li{display:flex;gap:9px;font-size:14.5px;line-height:1.45;color:var(--text-2)}
.plan-list svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--accent);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{margin-top:20px;width:100%}
.plans-foot{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
  padding:16px 22px;background:var(--bg-warm);border-radius:var(--r-sm);font-size:14px;
  color:var(--text-2)}
.plans-foot span{display:inline-flex;align-items:center;gap:7px}
.plans-foot svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- comparison ---------- */
.compare-wrap{overflow-x:auto;scrollbar-width:none;
  margin-inline:calc(-1 * clamp(24px,3.4vw,56px));padding-inline:clamp(24px,3.4vw,56px)}
.compare-wrap::-webkit-scrollbar{display:none}
.compare{width:100%;min-width:720px;border-collapse:collapse;font-size:15px}
.compare th,.compare td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--hairline);
  vertical-align:top;line-height:1.45}
.compare thead th{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);border-bottom:1px solid var(--hairline);padding-bottom:12px}
.compare thead th.us{color:var(--accent)}
.compare tbody th{font-weight:600;color:var(--text);width:26%}
.compare td{color:var(--text-2)}
.compare .us-col{background:var(--card);color:var(--text);font-weight:500;
  border-left:1px solid var(--hairline);border-right:1px solid var(--hairline)}
.compare tbody tr:last-child .us-col{border-bottom:1px solid var(--hairline);
  border-radius:0 0 var(--r-sm) var(--r-sm)}
.compare thead th.us{background:var(--card);border-left:1px solid var(--hairline);
  border-right:1px solid var(--hairline);border-top:1px solid var(--hairline);
  border-radius:var(--r-sm) var(--r-sm) 0 0;text-align:center}
@media(max-width:900px){.plans{grid-template-columns:1fr}}

/* ---------- client voices ---------- */
.voices{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:stretch}
.v-main,.v-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.v-main{background:var(--deep);color:var(--on-deep-2);padding:36px 38px 34px;overflow:hidden;
  min-height:330px}
.v-main::before{content:"\201C";position:absolute;top:-46px;right:26px;font-size:190px;
  line-height:1;color:rgba(242,101,34,.16);font-family:Georgia,serif;pointer-events:none}
.v-main:hover,.v-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.v-side{display:grid;gap:16px}
.v-card{background:var(--card);border:1px solid var(--hairline);padding:26px 28px}
.v-quote{font-size:23px;line-height:1.5;letter-spacing:-.018em;color:var(--on-deep);
  margin:0;position:relative}
.v-card blockquote{font-size:16px;line-height:1.55;letter-spacing:-.016em;color:var(--text);
  margin:0}
.v-who{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:26px}
.v-av{width:46px;height:46px;border-radius:50%;background:var(--accent-tint);color:var(--accent);
  display:grid;place-items:center;font-size:17px;font-weight:600;flex:none}
.v-main .v-av{background:rgba(242,101,34,.2);color:var(--accent-hot)}
.v-name b{display:block;font-size:15px;font-weight:600;letter-spacing:-.014em;color:var(--text)}
.v-name span{display:block;font-size:13.5px;line-height:1.35;color:var(--text-2)}
.v-main .v-name b{color:var(--on-deep)}
.v-main .v-name span{color:var(--on-deep-2)}
.v-result{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:15px;color:var(--on-deep-2)}
.v-metric{font-size:19px;font-weight:600;letter-spacing:-.016em;color:var(--accent-hot)}
.v-slot{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-tint);
  border-radius:5px;padding:3px 9px;margin-bottom:16px}
.v-main .v-slot{background:rgba(242,101,34,.2);color:var(--accent-hot)}
@media(max-width:900px){.voices{grid-template-columns:1fr}.v-main{min-height:0}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;padding:18px 44px 18px 0;position:relative;
  font-size:17px;font-weight:600;letter-spacing:-.017em;color:var(--text);
  transition:color .2s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  margin-top:-7px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .ans{padding:0 44px 20px 0;font-size:16px;line-height:1.55;letter-spacing:-.018em;
  color:var(--text-2)}
.faq .ans a{color:var(--accent);font-weight:500}
.faq .ans a:hover{text-decoration:underline}
.faq-cta{margin-top:40px;text-align:center}
.faq-cta p{font-size:16px;color:var(--text-2);margin-bottom:16px}

@media(max-width:1000px){
  .results{grid-template-columns:repeat(2,1fr);gap:26px 20px}
  .work-grid,.quotes{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:734px){
  .results{grid-template-columns:repeat(2,1fr)}
  .work-grid,.quotes{grid-template-columns:1fr}
  .slide-ctrl .arrow{display:none}
  .faq summary{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .slide{transition:none}
  .work:hover .work-img img{transform:none}
}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  background:linear-gradient(90deg,var(--accent),#FF9147);transform:scaleX(0);
  transform-origin:0 50%;will-change:transform}

/* ---------- infinite marquee ---------- */
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq var(--mq,42s) linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-group{display:flex;align-items:center;flex:none}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.mq-client{padding:0 34px;font-size:19px;font-weight:600;letter-spacing:-.015em;
  color:var(--text-3);white-space:nowrap;transition:color .25s}
.mq-client:hover{color:var(--text)}
.mq-tech{margin:0 7px;padding:9px 18px;border:1px solid var(--hairline);border-radius:var(--r-pill);
  background:var(--card);font-size:15px;letter-spacing:-.016em;color:var(--text-2);
  white-space:nowrap;transition:.25s var(--ease)}
.mq-tech:hover{border-color:var(--accent);color:var(--accent)}
.mq-label{text-align:center;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:18px}

/* ---------- commitments ---------- */
.commit{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.commit-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);
  padding:32px 30px;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.commit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.commit-n{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--accent);margin-bottom:16px}
.commit-card h3{font-size:22px;letter-spacing:-.018em;line-height:1.25;margin-bottom:10px}
.commit-card p{font-size:16px;line-height:1.5;color:var(--text-2)}
.commit-card .fine{margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline);
  font-size:14px;color:var(--text-3)}
.commit-card .fine b{color:var(--accent);font-weight:600}

/* ---------- richer reveals ---------- */
/* the 26px start offset pushed a full-width block 2px past the viewport on a
   phone, which showed up as a hairline horizontal scroll before the reveal
   fired — on narrow screens the slide comes from a distance that fits */
.reveal-l{opacity:0;transform:translateX(-26px)}
.reveal-r{opacity:0;transform:translateX(26px)}
@media(max-width:700px){
  .reveal-l{transform:translateX(-12px)}
  .reveal-r{transform:translateX(12px)}
}
.reveal-s{opacity:0;transform:scale(.965)}
.reveal-l,.reveal-r,.reveal-s{transition:opacity .4s var(--ease),transform .4s var(--ease);
  transition-delay:var(--d,0ms)}
.reveal-l.in,.reveal-r.in,.reveal-s.in{opacity:1;transform:none}
/* table rows cascade as the comparison scrolls in */
.compare tbody tr{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.compare tbody tr.in{opacity:1;transform:none}

@media(max-width:900px){.commit{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .mq-track{width:100%;flex-wrap:wrap;justify-content:center}
  .progress{display:none}
  .reveal-l,.reveal-r,.reveal-s,.compare tbody tr{opacity:1;transform:none}
}

.proof-stack{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px auto 0;
  flex-wrap:wrap;width:fit-content;padding:8px 18px 8px 10px;border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--hairline);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.proof-stack:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)}
.thumbs{display:flex}
.thumbs img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:top center;
  border:2.5px solid var(--card);margin-left:-12px;background:var(--bg-warm)}
.thumbs img:first-child{margin-left:0}
.proof-txt{font-size:14px;line-height:1.4;color:var(--text-2);text-align:left}
.proof-txt b{color:var(--text);font-weight:600}
.proof-go{display:block;font-size:13px;font-weight:600;color:var(--accent)}
@media(max-width:560px){.proof-stack{border-radius:18px}}

/* ============ HERO ORBIT (split hero) ============ */
.hero-split{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(24px,4vw,72px);align-items:center}
.hero-split .slider{align-items:flex-start}
.hero-split .slide{text-align:left;margin-inline:0;max-width:660px}
.hero-split .t-hero{font-size:clamp(32px,4.3vw,58px)}
.hero-split .hero-cta,.hero-split .slide-ctrl{justify-content:flex-start}
.hero-split .offer-badge{align-self:flex-start}
.hero-split .proof-stack{margin-left:0}
.hero-split .qualifier{margin-left:0;text-align:left}

.orbit-wrap{--S:clamp(320px,37vw,560px);--P:clamp(42px,calc(var(--S)*.105),58px);
  position:relative;width:var(--S);height:var(--S);margin-inline:auto}
.orbit-wrap::before{content:"";position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle,hsl(var(--hue,22) 100% 62% / .22),transparent 62%);
  transition:background 1.2s var(--ease)}
.ring{position:absolute;left:calc(50% - var(--r));top:calc(50% - var(--r));
  width:calc(var(--r) * 2);height:calc(var(--r) * 2);border-radius:50%;
  border:1.5px dashed rgba(194,65,12,.26);animation:spin var(--dur) linear infinite}
.ring.rev{animation-direction:reverse}
/* the ring carrying the lit planet paints above the others, so its label is never covered */
.ring:has(.planet.hot){z-index:4}
.ring.solid{border-style:solid;border-color:rgba(194,65,12,.12)}
@keyframes spin{to{transform:rotate(360deg)}}
.ring i.sat{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);
  left:calc(50% - 4px);top:-4px;box-shadow:0 0 0 4px rgba(242,101,34,.16)}

.planet{position:absolute;left:50%;top:50%;width:var(--P);height:var(--P);
  margin:calc(var(--P) / -2) 0 0 calc(var(--P) / -2);
  transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1))}
.planet-in{position:relative;width:100%;height:100%;border-radius:50%;background:var(--card);
  display:grid;place-items:center;border:1px solid var(--hairline);
  box-shadow:0 10px 24px -10px rgba(88,54,26,.4);
  animation:spin var(--dur) linear infinite reverse;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.ring.rev .planet-in{animation-direction:normal}
.planet-in svg{width:46%;height:46%;stroke:var(--pc,var(--accent));fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s var(--ease)}
.planet.hot .planet-in{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 7px rgba(242,101,34,.18),0 16px 30px -10px rgba(200,72,10,.65)}
.planet.hot .planet-in svg{stroke:#fff}
.planet-tag{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:-.005em;color:#fff;
  background:var(--deep);padding:4px 10px;border-radius:7px;opacity:0;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.planet.hot .planet-tag{opacity:1;transform:translateX(-50%) translateY(0)}

.core{position:absolute;left:50%;top:50%;width:calc(var(--S) * .22);height:calc(var(--S) * .22);
  transform:translate(-50%,-50%);z-index:3}
.core .ripple{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);
  opacity:0;animation:ripple 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.core .ripple:nth-child(2){animation-delay:1.2s}
.core .ripple:nth-child(3){animation-delay:2.4s}
@keyframes ripple{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.7);opacity:0}}
.heart{position:absolute;inset:0;border-radius:50%;background:var(--card);display:grid;place-items:center;
  box-shadow:0 0 0 10px rgba(255,255,255,.7),0 22px 44px -16px rgba(200,72,10,.55);
  border:1px solid var(--hairline)}
.heart img{width:50%;height:auto}
.orbit-wrap:hover .ring,.orbit-wrap:hover .planet-in{animation-play-state:paused}

@media(max-width:980px){
  .hero-split{grid-template-columns:1fr;gap:34px}
  .orbit-wrap{--S:min(84vw,420px)}
}
@media(prefers-reduced-motion:reduce){
  .ring,.planet-in,.core .ripple{animation:none}
}

/* ============ TECH EXPLORER ============ */
.tx{display:grid;grid-template-columns:minmax(260px,.82fr) 2fr;border:1px solid var(--hairline);
  border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow-sm)}
.tx-tabs{background:var(--bg-alt);padding:22px;display:flex;flex-direction:column;gap:4px;
  border-right:1px solid var(--hairline)}
.tx-tab{display:flex;align-items:center;gap:13px;width:100%;padding:12px 14px;border:0;border-radius:14px;
  background:transparent;font-family:inherit;font-size:15.5px;font-weight:500;letter-spacing:-.015em;
  color:var(--text-2);text-align:left;cursor:pointer;transition:.22s var(--ease)}
.tx-tab:hover{color:var(--text);background:rgba(255,255,255,.55)}
.tx-tab.on{background:var(--card);color:var(--accent);font-weight:600;
  box-shadow:0 1px 2px rgba(88,54,26,.06),0 10px 24px -14px rgba(88,54,26,.35)}
.tx-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--card);border:1px solid var(--hairline);transition:.22s var(--ease)}
.tx-tab.on .tx-ico{background:var(--accent-tint);border-color:transparent}
.tx-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.tx-chev{width:16px;height:16px;margin-left:auto;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-4px);transition:.22s var(--ease)}
.tx-tab.on .tx-chev{opacity:1;transform:none}
.tx-panels{padding:34px 36px 38px;min-height:430px}
.tx-panel.on{animation:txIn .45s var(--ease)}
@keyframes txIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tx-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.tx-blurb{margin-top:8px;font-size:17px;line-height:1.5;color:var(--text);max-width:620px}
.tx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:26px}
.tx-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:24px 12px 20px;border:1px solid var(--hairline);border-radius:16px;background:var(--bg);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.tx-card:hover{transform:translateY(-3px);border-color:transparent;box-shadow:var(--shadow)}
.tx-card img{width:34px;height:34px}
.tx-card span{font-size:14.5px;font-weight:600;letter-spacing:-.012em;color:var(--text);text-align:center}
.tx-word b{display:grid;place-items:center;height:34px;font-size:19px;font-weight:700;letter-spacing:-.02em;
  color:var(--text-2)}
.tx-word span{display:none}
@media(max-width:900px){
  .tx{grid-template-columns:1fr}
  .tx-tabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--hairline);
    padding:14px;scrollbar-width:none}
  .tx-tabs::-webkit-scrollbar{display:none}
  .tx-tab{width:auto;flex:none;white-space:nowrap;padding:9px 12px}
  .tx-chev{display:none}
  .tx-panels{padding:24px 20px 28px;min-height:0}
  .tx-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
@media(prefers-reduced-motion:reduce){.tx-panel.on{animation:none}}

/* ============ INDUSTRY PILLARS ============ */
.pls{display:flex;gap:10px;height:440px}
.pl{position:relative;flex:1;min-width:0;border-radius:44px;overflow:hidden;cursor:pointer;color:#fff;
  background:var(--deep);transition:flex .7s var(--ease),border-radius .7s var(--ease)}
.pl.on{flex:5;border-radius:30px}
.pl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transition:transform 1.1s var(--ease),filter .6s var(--ease);filter:saturate(.9)}
.pl.on .pl-img{transform:scale(1);filter:saturate(1.05)}
.pl-grad{display:block}
.pl-shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,12,8,.1) 0%,rgba(20,12,8,.25) 40%,rgba(20,12,8,.86) 100%);
  transition:background .6s var(--ease)}
.pl:not(.on) .pl-shade{background:linear-gradient(180deg,rgba(20,12,8,.35),rgba(20,12,8,.72))}
.pl-label{position:absolute;left:50%;bottom:30px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);
  white-space:nowrap;font-size:17px;font-weight:600;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.4);
  transition:opacity .3s var(--ease)}
.pl.on .pl-label{opacity:0}
.pl-body{position:absolute;left:0;right:0;bottom:0;padding:30px 32px 30px;opacity:0;transform:translateY(18px);
  pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.pl.on .pl-body{opacity:1;transform:none;transition-delay:.25s}
.pl-body h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;color:#fff;margin-bottom:8px}
.pl-body p{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.88);max-width:420px}
.pl-proof{display:inline-block;margin-top:14px;font-size:13px;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.28)}
.pl-proof b{font-weight:600}
@media(max-width:980px){
  .pls{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
  .pls::-webkit-scrollbar{display:none}
  .pl,.pl.on{flex:none;width:78vw;max-width:340px;height:420px;border-radius:26px;scroll-snap-align:start}
  .pl-label{opacity:0}
  .pl-body{opacity:1;transform:none;pointer-events:auto}
  .pl-img{transform:none}
  .pl:not(.on) .pl-shade{background:linear-gradient(180deg,rgba(20,12,8,.1) 0%,rgba(20,12,8,.86) 100%)}
}
@media(prefers-reduced-motion:reduce){.pl,.pl-img,.pl-body{transition:none}}

/* ============ PROCESS (dark, card steps) ============ */
.ps-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);align-items:end;
  margin-bottom:clamp(34px,4vw,56px)}
.ps-intro{font-size:clamp(16.5px,1.4vw,18px);line-height:1.6;color:var(--text-2);
  padding-left:22px;border-left:3px solid var(--accent-hot)}
.ps-row{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;padding-top:50px}
.ps{position:relative;z-index:1;background:var(--card);border:1px solid var(--hairline);border-radius:26px;
  padding:66px 26px 30px;text-align:center;
  transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease)}
.ps:hover{transform:translateY(-6px);border-color:color-mix(in oklab,var(--g1) 45%,var(--hairline))}
.ps-orb{position:absolute;left:50%;top:-48px;width:96px;height:96px;margin-left:-48px;border-radius:50%;
  display:grid;place-items:center;z-index:3;
  background:radial-gradient(circle at 30% 25%,var(--g1),var(--g2) 78%);
  box-shadow:0 0 0 8px var(--deep),0 22px 40px -14px var(--g1);transition:transform .5s var(--ease)}
.ps-orb::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--g1);opacity:.35}
.ps:hover .ps-orb{transform:translateY(-4px) rotate(-6deg)}
.ps-orb svg{width:38px;height:38px;stroke:var(--ink,#fff);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ps-arrow{position:absolute;top:0;left:calc(50% + 60px);width:calc(100% - 120px + 22px);height:2px;z-index:2;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 7px,transparent 7px 14px);
  background-size:14px 2px;animation:dashflow 1.1s linear infinite;
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease) .4s}
.ps-row.drawn .ps-arrow{transform:scaleX(1)}
.ps-arrow::after{content:"";position:absolute;right:-2px;top:-5px;width:0;height:0;
  border-left:9px solid rgba(255,255,255,.85);border-top:6px solid transparent;border-bottom:6px solid transparent}
@keyframes dashflow{to{background-position:14px 0}}
.ps-step{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-hot)}
.ps h3{font-size:24px;letter-spacing:-.02em;color:var(--text);margin-top:8px}
.ps-d{margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--text-2)}
/* the whole band reads as one line: who, what you get, and the button, never
   stacked into three loose rows */
.ps-cta{margin-top:clamp(28px,3.4vw,44px);display:flex;flex-wrap:nowrap;align-items:center;
  gap:18px 26px;padding:16px 20px;border-radius:22px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035)}
.ps-person{display:flex;align-items:center;gap:13px;flex:none}
.ps-av{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;
  box-shadow:0 0 0 3px rgba(242,101,34,.35)}
.ps-person b{display:block;font-size:15px;line-height:1.3;color:var(--on-deep);white-space:nowrap}
.ps-person small{display:block;font-size:12.8px;line-height:1.3;color:var(--on-deep-2);white-space:nowrap}
.ps-cta-txt{flex:1 1 auto;min-width:0;font-size:15.5px;line-height:1.45;color:var(--on-deep-2)}
.ps-cta .btn{flex:none;white-space:nowrap}
@media(max-width:860px){.ps-cta{flex-wrap:wrap}.ps-cta-txt{flex:1 1 100%}}
@media(max-width:1000px){
  .ps-head{grid-template-columns:1fr}
  .ps-row{grid-template-columns:repeat(2,1fr);row-gap:72px}
  .ps-arrow{display:none}
}
@media(max-width:600px){.ps-row{grid-template-columns:1fr}.ps-cta .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.ps-arrow{animation:none;transition:none;transform:none}}

/* ============ CUTTING-EDGE DECK ============ */
.frontier{background:radial-gradient(80% 60% at 50% 0%,#2A1C14 0%,var(--deep) 70%)}
.dk-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:26px}
.dk-tab{font-family:inherit;font-size:14px;letter-spacing:-.012em;color:var(--on-deep-2);cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill);
  padding:9px 17px;transition:.25s var(--ease)}
.dk-tab:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.dk-tab.on{background:#fff;color:var(--deep);border-color:#fff;font-weight:600}
.deck{position:relative;height:540px}
.dk-card{position:absolute;left:0;right:0;top:0;height:490px;border-radius:32px;overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;
  background:linear-gradient(135deg,#2E2219 0%,#1E1611 60%);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);transform-origin:50% 100%;
  transition:transform .75s var(--ease),opacity .75s var(--ease)}
.dk-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 85% 50%,color-mix(in srgb,var(--c1) 30%,transparent),transparent 70%),
             radial-gradient(40% 50% at 0% 100%,color-mix(in srgb,var(--c1) 16%,transparent),transparent 70%)}
.dk-card[data-pos="0"]{z-index:5;opacity:1;transform:none}
.dk-card[data-pos="1"]{z-index:4;opacity:.7;transform:translateY(24px) scale(.955)}
.dk-card[data-pos="2"]{z-index:3;opacity:.4;transform:translateY(46px) scale(.91)}
.dk-card[data-pos="hidden"]{z-index:1;opacity:0;transform:translateY(46px) scale(.9);pointer-events:none}
.dk-card[data-pos="out"]{z-index:6;opacity:0;transform:translateY(-36px) scale(1.02);pointer-events:none}
.dk-card>*{transition:opacity .45s var(--ease)}
.dk-card:not([data-pos="0"])>*{opacity:0}
.dk-copy{position:relative;padding:48px 20px 44px 52px;display:flex;flex-direction:column;justify-content:center}
.dk-count{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--c1)}
.dk-copy h3{font-size:clamp(30px,3.2vw,46px);line-height:1.05;letter-spacing:-.03em;color:#fff;margin-top:12px}
.dk-lead{margin-top:14px;font-size:19px;font-weight:500;letter-spacing:-.015em;color:var(--on-deep)}
.dk-d{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--on-deep-2);max-width:520px}
.dk-list{list-style:none;margin:18px 0 26px;padding:0;display:grid;gap:9px}
.dk-list li{display:flex;gap:10px;font-size:15px;color:var(--on-deep)}
.dk-list svg{width:18px;height:18px;flex:none;margin-top:1px;stroke:var(--c1);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.dk-copy .btn{align-self:flex-start}
.dk-visual{position:relative}
.dk-ring{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;
  border:1.5px dashed color-mix(in srgb,var(--c1) 55%,transparent);animation:spin 36s linear infinite}
.dk-ring.r2{width:210px;height:210px;margin:-105px 0 0 -105px;border-style:solid;
  border-color:color-mix(in srgb,var(--c1) 25%,transparent);animation-duration:24s;animation-direction:reverse}
.dk-ring.r3{width:390px;height:390px;margin:-195px 0 0 -195px;border-color:rgba(255,255,255,.06);animation-duration:60s}
.dk-core{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;
  display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,var(--c1),var(--c2) 80%);
  box-shadow:0 0 0 12px color-mix(in srgb,var(--c1) 14%,transparent),0 0 80px color-mix(in srgb,var(--c1) 55%,transparent)}
.dk-core svg{width:54px;height:54px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dk-chip{position:absolute;font-size:13px;font-weight:600;color:#fff;padding:8px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);white-space:nowrap;
  animation:bobchip 5s ease-in-out infinite;animation-delay:var(--dl)}
@keyframes bobchip{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.dk-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:4px}
.dk-ctrl .arrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.dk-ctrl .arrow:hover{background:var(--accent);border-color:var(--accent)}
.dk-bar{position:relative;width:180px;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.dk-bar i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.dk-bar i.run{animation:dkfill var(--dkd,6500ms) linear forwards}
@keyframes dkfill{to{transform:scaleX(1)}}
@media(max-width:900px){
  .deck{height:720px}
  .dk-card{height:670px;grid-template-columns:1fr;grid-template-rows:230px 1fr}
  .dk-visual{order:-1}
  .dk-ring{width:190px;height:190px;margin:-95px 0 0 -95px}
  .dk-ring.r2{width:130px;height:130px;margin:-65px 0 0 -65px}
  .dk-ring.r3{display:none}
  .dk-core{width:92px;height:92px;margin:-46px 0 0 -46px}
  .dk-core svg{width:40px;height:40px}
  .dk-chip{font-size:11.5px;padding:6px 10px}
  .dk-copy{padding:8px 24px 30px;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){.dk-ring,.dk-chip{animation:none}.dk-card{transition:none}}

/* ============ PROMO BAR ============ */
.annc{position:relative;z-index:101;background:linear-gradient(90deg,#1C1410,#3A2014 50%,#1C1410);
  background-size:200% 100%;animation:anncshine 12s linear infinite;color:var(--on-deep)}
@keyframes anncshine{to{background-position:-200% 0}}
.annc-in{display:flex;align-items:center;justify-content:center;gap:16px;min-height:44px;padding-block:6px}
.annc p{font-size:14px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.annc b{color:#FFB386;font-weight:600}
.annc-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-hot);flex:none;animation:blink 1.8s ease-in-out infinite}
.annc-short{display:none}
.annc-btn{font-size:13.5px;font-weight:600;color:var(--deep);background:#fff;padding:6px 15px;border-radius:var(--r-pill);
  white-space:nowrap;transition:.2s var(--ease)}
.annc-btn:hover{background:var(--accent);color:#fff}
.annc-x{position:absolute;right:max(14px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--on-deep-2);font-size:20px;
  cursor:pointer;line-height:1}
.annc-x:hover{background:rgba(255,255,255,.1);color:#fff}
@media(max-width:760px){.annc-long{display:none}.annc-short{display:inline}.annc-in{justify-content:flex-start;padding-right:40px}}

/* ============ LEAD POPUP ============ */
.lp{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}
.lp[hidden]{display:none}
.lp-backdrop{position:absolute;inset:0;background:rgba(20,12,8,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s var(--ease)}
.lp-dialog{position:relative;width:min(1000px,100%);max-height:calc(100vh - 40px);overflow:auto;
  display:grid;grid-template-columns:.92fr 1.08fr;border-radius:28px;background:var(--card);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.6);opacity:0;transform:translateY(24px) scale(.97);
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.lp.open .lp-backdrop{opacity:1}
.lp.open .lp-dialog{opacity:1;transform:none}
.lp-x{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--hairline);
  background:var(--card);font-size:22px;line-height:1;color:var(--text-2);cursor:pointer;transition:.2s var(--ease)}
.lp-x:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(90deg)}
.lp-side{background:radial-gradient(90% 70% at 0% 0%,#3A2014,transparent 60%),var(--deep);color:var(--on-deep-2);
  padding:38px 34px;display:flex;flex-direction:column}
.lp-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-hot)}
.lp-side h2{font-size:clamp(24px,2.4vw,31px);line-height:1.15;letter-spacing:-.022em;color:#fff;margin-top:10px}
.lp-sub{margin-top:12px;font-size:15px;line-height:1.5}
.lp-checks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
.lp-checks li{display:flex;gap:10px;font-size:15px;color:var(--on-deep)}
.lp-checks svg,.lp-trust svg{width:18px;height:18px;flex:none;stroke:var(--accent-hot);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.lp-proof{margin-top:auto;padding-top:26px}
.lp-proof p{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--on-deep-2);margin-bottom:10px}
.lp-logos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.lp-logos span{font-size:13.5px;font-weight:600;text-align:center;padding:10px 8px;border-radius:12px;color:var(--on-deep);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.lp-main{padding:34px 34px 28px}
.lp-main form{gap:13px}
.lp-main .field textarea{min-height:76px}
.lp-trust{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-size:13px;color:var(--text-2);
  background:var(--bg-alt);border-radius:12px;padding:10px 12px}
.lp-trust span{display:inline-flex;align-items:center;gap:6px}
.lp-trust svg{stroke:var(--accent)}
.lp-done{text-align:center;padding:60px 10px}
.lp-done .tick{width:62px;height:62px;border-radius:50%;background:var(--accent);margin:0 auto 20px;display:grid;place-items:center}
.lp-done .tick svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lp-done .btn{margin-top:22px}
@media(max-width:820px){
  .lp{padding:0;align-items:end}
  .lp-dialog{grid-template-columns:1fr;border-radius:24px 24px 0 0;max-height:92vh}
  .lp-side{padding:28px 24px 20px}
  .lp-proof{display:none}
  .lp-main{padding:22px 22px 26px}
}
@media(prefers-reduced-motion:reduce){.annc,.annc-dot{animation:none}.lp-dialog,.lp-backdrop{transition:none}}

/* ============ EXPERTISE — expanding colour gallery ============ */
.xp{display:flex;gap:10px;height:500px}
.xp-panel{position:relative;flex:1;min-width:0;border-radius:var(--r);overflow:hidden;
  cursor:pointer;color:#fff;border:0;padding:0;text-align:left;font-family:inherit;
  background:linear-gradient(165deg,var(--c1) 0%,var(--c2) 100%);
  transition:flex .65s var(--ease),box-shadow .4s var(--ease)}
.xp-panel.on{flex:4.4;box-shadow:0 30px 60px -30px var(--c2)}
.xp-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 100% 0%,rgba(255,255,255,.2),transparent 55%)}
.xp-num{position:absolute;top:18px;left:20px;font-size:13px;font-weight:700;letter-spacing:.1em;
  color:rgba(255,255,255,.7)}
.xp-ico{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.2);display:grid;place-items:center}
.xp-ico svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.xp-label{position:absolute;left:50%;bottom:26px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);
  white-space:nowrap;font-size:17px;font-weight:600;letter-spacing:-.01em;
  transition:opacity .3s var(--ease)}
.xp-panel.on .xp-label{opacity:0}
.xp-body{position:absolute;left:0;right:0;bottom:0;padding:34px 34px 32px;opacity:0;
  transform:translateY(18px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.xp-panel.on .xp-body{opacity:1;transform:none;pointer-events:auto;transition-delay:.22s}
.xp-body h3{font-size:clamp(24px,2.3vw,32px);line-height:1.12;letter-spacing:-.022em;color:#fff;
  margin-bottom:12px;max-width:520px}
.xp-body p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.86);max-width:520px}
.xp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.xp-chips span{font-size:12.5px;padding:5px 11px;border-radius:7px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff}
.xp-go{display:inline-flex;align-items:center;gap:6px;margin-top:22px;font-size:15px;font-weight:600;
  color:#fff;padding:10px 18px;border-radius:var(--r-pill);background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);transition:.25s var(--ease)}
.xp-go:hover{background:#fff;color:var(--c2)}
.xp-hint{margin-top:16px;text-align:center;font-size:13.5px;color:var(--text-3)}

/* ============ INDUSTRIES — hanging cards ============ */
.hang{position:relative;padding-top:46px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hang::before{content:"";position:absolute;top:20px;left:0;right:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--hairline) 0 10px,transparent 10px 16px)}
.hang-track{display:flex;width:max-content;padding-bottom:26px;animation:mq 90s linear infinite}
.hang:hover .hang-track,.hang:hover .hang-card{animation-play-state:paused}
.hang-card{position:relative;flex:none;width:272px;margin:0 11px;padding:24px 22px 22px;
  background:var(--card);border:1px solid var(--hairline);border-radius:18px;
  box-shadow:0 18px 30px -22px rgba(88,54,26,.45);transform-origin:50% -26px;
  animation:swing 3.6s ease-in-out infinite alternate;animation-delay:var(--sd,0s);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.hang-card:hover{border-color:var(--accent);box-shadow:0 26px 40px -22px rgba(200,72,10,.45)}
.hang-card::before{content:"";position:absolute;top:-26px;left:50%;width:1.5px;height:26px;
  margin-left:-.75px;background:linear-gradient(var(--text-3),var(--hairline))}
.hang-card::after{content:"";position:absolute;top:-31px;left:50%;width:10px;height:10px;
  margin-left:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
@keyframes swing{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
.hang-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--tint);color:var(--ink)}
.hang-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.hang-card h3{font-size:18px;letter-spacing:-.015em;margin-bottom:6px}
.hang-card p{font-size:14.5px;line-height:1.5;color:var(--text-2)}
.hang-proof{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline);
  font-size:12.5px;color:var(--text-3)}
.hang-proof b{color:var(--text);font-weight:600}
.hang-hint{text-align:center;font-size:13.5px;color:var(--text-3);margin-top:6px}

/* ============ TRUST & GOVERNANCE ============ */
.gov{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:stretch}
.gov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gov-item{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);
  padding:24px 24px 22px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.gov-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gov-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;
  background:var(--accent-tint)}
.gov-ico svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.gov-item h3{font-size:17px;letter-spacing:-.014em;margin-bottom:7px}
.gov-item p{font-size:14.5px;line-height:1.52;color:var(--text-2)}
.gov-panel{background:var(--deep);color:var(--on-deep-2);border-radius:var(--r);padding:34px 32px;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.gov-panel::before{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(242,101,34,.28),transparent 68%)}
.gov-shield{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:rgba(242,101,34,.18);position:relative}
.gov-shield svg{width:26px;height:26px;stroke:var(--accent-hot);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.gov-panel h3{font-size:22px;letter-spacing:-.02em;color:var(--on-deep);margin-bottom:18px;position:relative}
.gov-list{list-style:none;margin:0;padding:0;display:grid;gap:13px;flex:1;position:relative}
.gov-list li{display:flex;gap:11px;font-size:15px;line-height:1.5}
.gov-list svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--accent-hot);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gov-panel .btn{margin-top:26px;position:relative}
.gov-note{margin-top:12px;font-size:12.5px;color:var(--on-deep-2);opacity:.8;position:relative}

/* ============ SHARE YOUR IDEA (contact) ============ */
.idea-head{text-align:center;max-width:760px;margin:0 auto clamp(30px,3.6vw,48px)}
.idea-head h2{margin:14px 0 16px}
.idea-emoji{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:18px;
  background:var(--card);border:1px solid var(--hairline);box-shadow:var(--shadow-sm);margin-bottom:6px}
.idea-emoji svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ci{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--hairline);
  border-radius:16px;padding:18px;transition:.28s var(--ease)}
.ci:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.ci-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--accent-tint)}
.ci-ico svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ci small{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:3px}
.ci b{display:block;font-size:15px;font-weight:600;letter-spacing:-.014em;color:var(--text);
  word-break:break-word}
.next-steps{margin-top:22px;background:var(--card);border:1px solid var(--hairline);border-radius:16px;
  padding:22px}
.next-steps h3{font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:14px}
.ns{display:grid;gap:14px;list-style:none;margin:0;padding:0;counter-reset:ns}
.ns li{display:flex;gap:13px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--text-2);
  counter-increment:ns}
.ns li::before{content:counter(ns);flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:var(--accent)}
.ns li b{color:var(--text);font-weight:600}
.follow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.follow span{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.follow .foot-social{margin-top:0}

@media(max-width:1000px){
  .gov{grid-template-columns:1fr}
}
@media(max-width:860px){
  .xp{flex-direction:column;height:auto}
  .xp-panel{flex:none;min-height:74px;transition:min-height .5s var(--ease)}
  .xp-panel.on{flex:none;min-height:400px}
  .xp-label{writing-mode:horizontal-tb;transform:none;left:20px;bottom:auto;top:24px;padding-left:34px}
  .xp-num{top:26px}
  .xp-ico{top:16px}
  .xp-body{padding:26px 22px 24px}
}
@media(max-width:734px){
  .gov-grid,.cards-2{grid-template-columns:1fr}
  .hang-card{width:240px}
}
@media(prefers-reduced-motion:reduce){
  .xp-panel,.xp-body{transition:none}
  .hang-track,.hang-card{animation:none}
  .hang{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .38s var(--ease),transform .38s var(--ease);
  /* the inline --d staggers cards within a row; min() stops a row of six
     from taking most of a second to finish arriving */
  transition-delay:min(var(--d,0ms),140ms)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1360px){.work-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .tile,.tile.w3,.tile.feature{grid-column:span 2}
  .steps{grid-template-columns:repeat(2,1fr);gap:0 26px}
  .cols,.flow{grid-template-columns:repeat(2,1fr)}
  .lead-grid{grid-template-columns:1fr;gap:40px}
  }
@media(max-width:1480px){.nav-mail{display:none}}
@media(max-width:1260px){.nav-phone{display:none}}
/* Seven top-level items at 14.8px need real room. Below 1320 the bar tightens;
   below 1120 the links genuinely do not fit beside the logo and the button, so
   the burger takes over rather than letting the bar overflow the page. */
@media(max-width:1320px){
  .nav-links{gap:2px}
  .nav-links > li > a{font-size:14px;padding:6px 9px}
}
@media(max-width:1120px){
  html{scroll-padding-top:66px}
  .nav-links{display:none}
  .burger{display:flex}
}
@media(max-width:734px){
  html{scroll-padding-top:64px}
  .nav-links,.nav-phone{display:none}
  .burger{display:flex}
  .bento{grid-template-columns:1fr}
  .tile,.tile.w3,.tile.feature{grid-column:span 1}
  .steps,.cols,.flow,.row{grid-template-columns:1fr}
  .step{padding:26px 0}
  .rail-head{flex-direction:column;align-items:flex-start;gap:18px}
  .rail-nav{margin-left:0}
  .showcase{border-radius:var(--r)}
  .band .btn{width:100%}
  .stickybar{display:flex}
  .wa{bottom:82px;width:48px;height:48px}
  .wa svg{width:25px;height:25px}
  body{padding-bottom:0}
  footer{padding-bottom:90px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html,.rail{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ---------- inner-page breadcrumb ---------- */
.crumb{font-size:13.5px;color:var(--text-3);letter-spacing:-.01em}
.crumb a{color:var(--text-2)}
.crumb a:hover{color:var(--accent);text-decoration:underline}
.crumb span{margin:0 6px;opacity:.6}
.tile[href]{text-decoration:none}
.tile[href]:hover .work-link-ask{color:var(--accent-press)}

/* ---------- inner-page card grids (tiles default to span 2 of 6 on the home page) ---------- */
.bento.cols-3{grid-template-columns:repeat(3,1fr)}
.bento.cols-2{grid-template-columns:repeat(2,1fr)}
.bento.cols-3 .tile,.bento.cols-2 .tile{grid-column:span 1}
@media(max-width:1000px){.bento.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:734px){.bento.cols-3,.bento.cols-2{grid-template-columns:1fr}}

/* ---------- mega menu ---------- */
.nav-links .has-mega{position:static}
.mega-t{display:inline-flex;align-items:center;gap:4px}
.mega-c{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease);opacity:.6}
.has-mega:hover .mega-c,.has-mega:focus-within .mega-c{transform:rotate(180deg);opacity:1}
.mega{position:absolute;top:100%;left:0;right:0;z-index:120;
  background:var(--card);border-bottom:1px solid var(--hairline);
  box-shadow:var(--shadow);opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-10px);transition:opacity .22s var(--ease),transform .28s var(--ease),
  visibility 0s linear .28s}
.has-mega:hover>.mega,.has-mega:focus-within>.mega,.mega:hover{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s,0s,0s}
/* The trigger's box ends 2px above the nav's bottom edge, where the panel
   begins. Those 2px are hoverable by neither, so a pointer travelling from
   the word "Services" down into the panel passes through dead space and the
   menu shuts under it. Both panels get a transparent lip that reaches back
   up over the gap; it is part of the panel, so hovering it keeps it open. */
.mega::before,.drop::before{content:"";position:absolute;left:0;right:0;
  top:-12px;height:12px}
.nav.mega-shut .mega::before,.nav.mega-shut .drop::before{display:none}
.nav.mega-shut .mega{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.mega-in{display:grid;grid-template-columns:1fr 1fr .92fr;gap:clamp(22px,2.4vw,44px);
  max-width:1340px;padding-block:clamp(26px,2.6vw,40px)}
.mega-h{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:14px}
.mega-col>a{display:flex;gap:13px;align-items:flex-start;padding:8px 12px;margin-left:-12px;
  border-radius:var(--r-sm);opacity:1;transition:background .2s var(--ease)}
.mega-col>a:hover{background:var(--bg-alt)}
.mega-i{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent);transition:.25s var(--ease)}
.mega-i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.mega-col>a:hover .mega-i{background:var(--accent);color:#fff}
.mega-col b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.014em;color:var(--text)}
.mega-col em{display:block;font-style:normal;font-size:12.5px;line-height:1.45;
  color:var(--text-2);margin-top:2px;max-width:30ch}
.mega-all{margin-top:6px;font-size:13.5px;font-weight:600;color:var(--accent)!important;
  display:inline-flex!important;align-items:center;gap:6px}
.mega-all svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.mega-all:hover svg{transform:translateX(3px)}
.mega-side{padding-left:clamp(20px,2vw,32px);border-left:1px solid var(--hairline)}
.mega-card{display:block!important;padding:18px 20px!important;margin-left:0!important;border-radius:var(--r-sm);
  background:linear-gradient(150deg,var(--deep),var(--deep-2));color:var(--on-deep)}
.mega-card b{color:#fff;font-size:16px}
.mega-card em{color:var(--on-deep-2);max-width:34ch;margin-top:6px}
.mega-card:hover{background:linear-gradient(150deg,var(--deep-2),var(--deep))}
.mega-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:13px;font-weight:600;color:var(--accent-hot)}
.mega-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.mega-card:hover .mega-go svg{transform:translateX(3px)}
.mega-mini{display:block!important;margin-left:0!important;padding:11px 12px!important}
@media(max-width:1180px){.mega-in{grid-template-columns:1fr 1fr}.mega-side{display:none}}

/* mobile sheet disclosure */
.sheet-grp{border-bottom:1px solid var(--hairline)}
.sheet-t{display:flex;align-items:center;justify-content:space-between;width:100%;
  font:inherit;font-size:25px;font-weight:600;letter-spacing:-.02em;color:var(--text);
  background:none;border:0;padding:15px 0;cursor:pointer;text-align:left}
.sheet-t svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease);opacity:.5}
.sheet-t[aria-expanded="true"] svg{transform:rotate(180deg);opacity:1}
.sheet-sub{display:none;padding-bottom:10px}
.sheet-sub.on{display:block;animation:fade .25s var(--ease)}
.sheet-sub a{font-size:17px!important;font-weight:500!important;padding:11px 0 11px 16px!important;
  border-bottom:0!important;color:var(--text-2)}
.sheet-sub a:hover{color:var(--accent)}

/* ---------- client logo marquee ---------- */
.strip .mq-logo{flex:none;display:flex;align-items:center;justify-content:center;
  width:clamp(140px,11vw,186px);height:44px}
/* cap both dimensions so a wide wordmark and a square mark carry equal weight */
.strip .mq-logo img{max-height:30px;max-width:120px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.58;transition:filter .28s var(--ease),opacity .28s var(--ease)}
.strip .mq-logo:hover img{filter:none;opacity:1}
@media(max-width:700px){
  .strip .mq-logo{width:120px;height:38px}
  .strip .mq-logo img{max-height:24px;max-width:98px}
}

/* ---------- inner-page hero: full-bleed image + build animation ---------- */
.phero{position:relative;isolation:isolate;overflow:hidden;
  padding-block:var(--sec-pad);
  background:var(--deep)}
.phero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.phero-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* near-opaque where the copy sits, clearing towards the artwork */
.phero-scrim{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(18,12,9,.965) 0%,rgba(18,12,9,.93) 32%,
    rgba(18,12,9,.72) 52%,rgba(20,14,11,.42) 74%,rgba(20,14,11,.30) 100%),
  linear-gradient(to bottom,rgba(18,12,9,.55),rgba(18,12,9,0) 38%)}
.phero-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(120% 90% at 22% 40%,#000 25%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 22% 40%,#000 25%,transparent 78%)}
.phero-fade{position:absolute;left:0;right:0;bottom:0;height:90px;z-index:-1;
  background:linear-gradient(to bottom,transparent,var(--bg))}
.phero-in{position:relative;display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,4vw,70px);align-items:center}

.phero-copy .crumb{color:rgba(251,244,237,.62)}
.phero-copy .crumb a{color:rgba(251,244,237,.82)}
.phero-copy .crumb a:hover{color:var(--accent-hot)}
.phero-copy .eyebrow{color:var(--accent-hot)}
.phero-copy .t-hero{color:#fff;max-width:15ch;text-shadow:0 1px 30px rgba(0,0,0,.4)}
.phero-copy .intro{color:rgba(251,244,237,.84)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff}

/* --- the animation: a site assembling itself --- */
.phero-fx{position:relative;justify-self:center;width:min(100%,430px);aspect-ratio:1/.84}
.fx-glow{position:absolute;inset:8% 6%;border-radius:50%;
  background:radial-gradient(circle,rgba(242,101,34,.30),rgba(242,101,34,0) 68%);
  filter:blur(22px);animation:fxpulse 6s var(--ease) infinite}
@keyframes fxpulse{0%,100%{transform:scale(.94);opacity:.65}50%{transform:scale(1.06);opacity:1}}

.fx-net{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fx-wire{stroke:rgba(242,101,34,.55);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:6 7;animation:fxdash 2.4s linear infinite;animation-delay:var(--wd,0s)}
@keyframes fxdash{to{stroke-dashoffset:-26}}
.fx-node{fill:var(--accent-hot);animation:fxnode 2.8s var(--ease) infinite;
  animation-delay:var(--nd,0s);transform-box:fill-box;transform-origin:center}
@keyframes fxnode{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.5);opacity:1}}

.bw{position:absolute;left:12%;top:14%;width:76%;border-radius:14px;overflow:hidden;
  background:rgba(28,20,16,.88);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.85);backdrop-filter:blur(10px);
  animation:fxfloat 7s var(--ease) infinite}
@keyframes fxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.bw-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;
  background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.1)}
.bw-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
.bw-bar i:first-child{background:var(--accent-hot)}
.bw-url{flex:1;height:9px;margin-left:8px;border-radius:99px;background:rgba(255,255,255,.12)}
.bw-body{display:grid;grid-template-columns:26% 1fr;gap:12px;padding:14px 14px 18px}
.bw-body:not(:has(.bw-side)){grid-template-columns:1fr}
.bw-side b,.bw-main b{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.16)}
.bw-side b{margin-bottom:9px}
.bw-side b:first-child{background:rgba(242,101,34,.65);width:78%}
.bw-main b{margin-bottom:10px;transform-origin:left center}
.bw-fill{animation:fxfill 5s var(--ease) infinite;animation-delay:var(--bd,0s)}
@keyframes fxfill{0%{transform:scaleX(0);opacity:0}
  14%{transform:scaleX(1);opacity:1}86%{transform:scaleX(1);opacity:1}
  96%,100%{transform:scaleX(0);opacity:0}}
.w70{width:70%}.w64{width:64%}.w42{width:42%}.w30{width:30%}
.bw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:13px 0}
.bw-cards u{display:block;height:30px;border-radius:7px;text-decoration:none;
  background:linear-gradient(140deg,rgba(242,101,34,.5),rgba(242,101,34,.14));
  animation:fxcard 5s var(--ease) infinite;animation-delay:calc(.3s + var(--ud,0s))}
@keyframes fxcard{0%{transform:scale(.7);opacity:0}16%{transform:scale(1);opacity:1}
  86%{transform:scale(1);opacity:1}96%,100%{transform:scale(.7);opacity:0}}

/* --- frames --- */
.bw-phone{left:30%;top:9%;width:40%;border-radius:26px;padding:0}
.bw-phone .bw-bar{justify-content:center;padding:10px 12px 8px}
.bw-phone .bw-bar i{display:none}
.bw-phone .bw-url{flex:0 0 38%;margin:0;height:6px}
.bw-phone .bw-body{grid-template-columns:1fr;padding:14px 13px 16px}
.ph-cards{grid-template-columns:repeat(2,1fr)}
.ph-tabs{display:flex;justify-content:space-around;gap:10px;margin-top:16px;
  padding-top:11px;border-top:1px solid rgba(255,255,255,.12)}
.ph-tabs i{width:20px;height:20px;border-radius:7px;background:rgba(255,255,255,.18);
  animation:fxtab 5s var(--ease) infinite;animation-delay:calc(1s + var(--td,0s))}
@keyframes fxtab{0%,10%{opacity:.25}22%,86%{opacity:1;background:rgba(242,101,34,.72)}96%,100%{opacity:.25}}
.bw-panel .bw-bar{display:none}
.bw-panel .bw-body{grid-template-columns:1fr;padding:18px}

/* --- ai: a question, a pause, an answer --- */
.ai-log{display:block}
.ai-msg{display:block;padding:9px 11px;border-radius:12px;max-width:78%;margin-bottom:9px;
  animation:fxpop 6s var(--ease) infinite;animation-delay:var(--bd,0s)}
.ai-msg i{display:block;height:7px;border-radius:99px;background:rgba(255,255,255,.4);margin-bottom:5px}
.ai-msg i.m{width:74%}.ai-msg i.s{width:46%;margin-bottom:0}
.ai-you{margin-left:auto;background:rgba(255,255,255,.14)}
.ai-bot{background:linear-gradient(135deg,rgba(242,101,34,.55),rgba(242,101,34,.22))}
.ai-typing{display:flex;gap:5px;padding:10px 12px;width:-moz-fit-content;width:fit-content;
  border-radius:12px;background:rgba(255,255,255,.1);margin-bottom:9px;
  animation:fxflash 6s var(--ease) infinite;animation-delay:var(--bd,0s)}
.ai-typing em{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.75);
  animation:fxdot .9s ease-in-out infinite}
.ai-typing em:nth-child(2){animation-delay:.15s}.ai-typing em:nth-child(3){animation-delay:.3s}
@keyframes fxdot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
@keyframes fxflash{0%,12%{opacity:0}16%,24%{opacity:1}28%,100%{opacity:0}}
.ai-tools{display:flex;gap:6px;animation:fxpop 6s var(--ease) infinite;animation-delay:var(--bd,0s)}
.ai-tools u{font-size:10px;font-weight:600;text-decoration:none;color:#fff;padding:4px 9px;
  border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
@keyframes fxpop{0%{transform:translateY(8px);opacity:0}10%{transform:none;opacity:1}
  88%{transform:none;opacity:1}96%,100%{transform:translateY(8px);opacity:0}}

/* --- data: the numbers agreeing --- */
.dv-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.dv-kpi u{display:block;height:34px;border-radius:8px;text-decoration:none;
  background:rgba(255,255,255,.12);animation:fxcard 5s var(--ease) infinite;
  animation-delay:calc(.2s + var(--ud,0s))}
.dv-chart{display:flex;align-items:flex-end;gap:7px;height:86px}
.dv-chart i{flex:1;border-radius:4px 4px 2px 2px;height:var(--h);
  background:linear-gradient(to top,rgba(242,101,34,.9),rgba(242,101,34,.35));
  transform-origin:bottom;animation:fxgrow 5s var(--ease) infinite;
  animation-delay:calc(.5s + var(--cd,0s))}
@keyframes fxgrow{0%{transform:scaleY(0);opacity:0}16%{transform:scaleY(1);opacity:1}
  86%{transform:scaleY(1);opacity:1}96%,100%{transform:scaleY(0);opacity:0}}

/* --- cloud: a deploy going up --- */
.cl{display:grid;justify-items:center;gap:8px;position:relative}
.cl-cloud svg{width:52px;height:52px;fill:none;stroke:var(--accent-hot);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.cl-beam{position:absolute;top:50px;width:2px;height:34px;border-radius:2px;
  background:linear-gradient(to top,rgba(242,101,34,0),var(--accent-hot));
  animation:fxbeam 2.4s var(--ease) infinite}
@keyframes fxbeam{0%{transform:translateY(34px) scaleY(.2);opacity:0}
  40%{opacity:1}100%{transform:translateY(0) scaleY(1);opacity:0}}
.cl-racks{display:grid;gap:7px;width:80%;margin-top:34px}
.cl-racks u{display:block;height:22px;border-radius:6px;text-decoration:none;
  background:rgba(255,255,255,.14);border-left:3px solid rgba(242,101,34,.8);
  animation:fxcard 5s var(--ease) infinite;animation-delay:calc(.3s + var(--ud,0s))}

/* --- shop: the store filling and the cart counting --- */
.sh{position:relative}
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sh-grid u{display:block;height:44px;border-radius:8px;text-decoration:none;
  background:linear-gradient(140deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
  animation:fxcard 5s var(--ease) infinite;animation-delay:calc(.15s + var(--ud,0s))}
.sh-cart{position:absolute;right:-6px;bottom:-14px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);box-shadow:0 8px 20px -6px rgba(0,0,0,.7);
  animation:fxbump 5s var(--ease) infinite}
.sh-cart svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.sh-cart em{position:absolute;top:-4px;right:-4px;width:15px;height:15px;border-radius:50%;
  background:#fff}
@keyframes fxbump{0%,55%{transform:scale(1)}62%{transform:scale(1.18)}70%,100%{transform:scale(1)}}

/* --- security: a scan, then clean findings --- */
.se{display:grid;justify-items:center;gap:16px}
.se-shield{position:relative;width:74px;height:74px;display:grid;place-items:center;overflow:hidden}
.se-shield svg{width:62px;height:62px;fill:none;stroke:var(--accent-hot);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.se-scan{position:absolute;left:0;right:0;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent-hot),transparent);
  animation:fxscan 2.6s var(--ease) infinite}
@keyframes fxscan{0%{transform:translateY(2px);opacity:0}12%,88%{opacity:1}
  100%{transform:translateY(70px);opacity:0}}
.se-rows{display:grid;gap:8px;width:88%}
.se-rows u{display:block;height:20px;border-radius:6px;text-decoration:none;
  background:rgba(255,255,255,.13);position:relative;
  animation:fxcard 5s var(--ease) infinite;animation-delay:calc(.4s + var(--ud,0s))}
.se-rows u::after{content:"";position:absolute;right:8px;top:6px;width:8px;height:8px;
  border-radius:50%;background:var(--accent-hot)}

/* --- design: components snapping into place --- */
.dz{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:26px;gap:7px}
.dz-art{display:contents}
.dz-art u{display:block;border-radius:7px;text-decoration:none;
  background:rgba(255,255,255,.16);animation:fxsnap 5s var(--ease) infinite;
  animation-delay:calc(.15s + var(--ud,0s))}
.dz-art u.a{grid-column:span 4;background:linear-gradient(120deg,rgba(242,101,34,.5),rgba(242,101,34,.16))}
.dz-art u.b{grid-column:span 2;grid-row:span 2}
.dz-art u.c{grid-column:span 2}
.dz-art u.d{grid-column:span 2}
@keyframes fxsnap{0%{transform:scale(.82) translateY(6px);opacity:0}
  14%{transform:none;opacity:1}86%{transform:none;opacity:1}
  96%,100%{transform:scale(.82) translateY(6px);opacity:0}}
.dz-cursor{position:absolute;right:14%;bottom:4%;width:13px;height:13px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
  animation:fxcursor 5s var(--ease) infinite}
@keyframes fxcursor{0%,10%{transform:rotate(-45deg) translate(14px,14px);opacity:0}
  22%{transform:rotate(-45deg);opacity:1}70%{opacity:1}82%,100%{opacity:0}}

/* --- marketing: rankings climbing --- */
.mk-rank{display:grid;gap:8px;margin-bottom:16px}
.mk-rank u{display:block;height:20px;border-radius:6px;text-decoration:none;position:relative;
  background:rgba(255,255,255,.12);animation:fxcard 5s var(--ease) infinite;
  animation-delay:calc(.2s + var(--ud,0s))}
.mk-rank u i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;
  background:linear-gradient(90deg,rgba(242,101,34,.85),rgba(242,101,34,.35));
  transform-origin:left;animation:fxrank 5s var(--ease) infinite;
  animation-delay:calc(.45s + var(--ud,0s))}
.mk-rank .r1 i{width:88%}.mk-rank .r2 i{width:62%}.mk-rank .r3 i{width:40%}
@keyframes fxrank{0%{transform:scaleX(0)}22%{transform:scaleX(1)}
  86%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
.mk-chart{display:flex;align-items:flex-end;gap:9px;height:70px}
.mk-chart i{flex:1;border-radius:4px 4px 2px 2px;height:var(--h);transform-origin:bottom;
  background:linear-gradient(to top,rgba(242,101,34,.9),rgba(242,101,34,.3));
  animation:fxgrow 5s var(--ease) infinite;animation-delay:calc(.55s + var(--cd,0s))}

.fx-chip{position:absolute;padding:6px 11px;border-radius:99px;font-size:11.5px;
  font-weight:600;letter-spacing:.04em;color:#fff;white-space:nowrap;
  background:rgba(28,20,16,.82);border:1px solid rgba(242,101,34,.45);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.8);backdrop-filter:blur(8px);
  animation:fxdrift 6.5s var(--ease) infinite}
.fx-1{left:0;top:33%}
.fx-2{right:0;top:20%;animation-delay:.9s}
.fx-3{right:4%;bottom:14%;animation-delay:1.8s}
.fx-chip{max-width:44%;overflow:hidden;text-overflow:ellipsis}
@keyframes fxdrift{0%,100%{transform:translateY(0);opacity:.82}50%{transform:translateY(-10px);opacity:1}}

@media(max-width:960px){
  .phero-in{grid-template-columns:1fr;gap:38px}
  .phero-copy .t-hero{max-width:18ch}
  .phero-fx{width:min(100%,360px);margin-inline:auto}
  .phero-scrim{background:linear-gradient(to bottom,rgba(18,12,9,.94),rgba(18,12,9,.86) 55%,rgba(18,12,9,.72))}
}
@media(max-width:620px){.phero-fx{display:none}}
@media(prefers-reduced-motion:reduce){
  .phero-fx *{animation:none!important}
  .bw-fill,.bw-cards u,.ai-msg,.ai-tools,.dv-kpi u,.dv-chart i,.cl-racks u,.sh-grid u,
  .se-rows u,.dz-art u,.mk-rank u,.mk-rank u i,.mk-chart i,.ph-tabs i{
    transform:none;opacity:1}
  .ai-typing,.cl-beam,.se-scan,.dz-cursor{display:none}
}

/* ---------- split section: copy + image ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4vw,76px);align-items:center}
.split.flip .split-art{order:-1}
.split-art{margin:0;border-radius:var(--r);overflow:hidden;background:var(--bg-alt);
  box-shadow:var(--shadow-sm);aspect-ratio:4/3}
.split-art img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.split{grid-template-columns:1fr}.split.flip .split-art{order:0}}

/* ---------- line-icon cards ---------- */
.tile .ico-img{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:var(--accent-tint);margin-bottom:18px;transition:.3s var(--ease)}
.tile .ico-img img{width:32px;height:32px;display:block}
.tile:hover .ico-img{background:var(--accent);transform:translateY(-2px)}
.tile:hover .ico-img img{filter:brightness(0) invert(1)}

/* ---------- logo wall ---------- */
.logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.logowall figure{margin:0;height:96px;display:grid;place-items:center;padding:16px;
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-sm);
  transition:.25s var(--ease)}
.logowall figure:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.logowall img{max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain}

/* the sheet carries its own CTA — the bar one has no room to sit straight */
@media(max-width:560px){
  .nav-in>.btn-sm{display:none}
  .nav-logo{margin-right:auto}
}

.split .body+.body{margin-top:14px}
.split .body b{color:var(--text);font-weight:600}

/* ---------- capability blocks ---------- */
.blk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
@media(min-width:1080px){.blk-grid{grid-template-columns:repeat(4,1fr)}}
.blk{position:relative;display:block;padding:24px 22px 22px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--hairline);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.blk:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.blk-n{position:absolute;top:16px;right:18px;font-size:13px;font-weight:700;
  letter-spacing:.06em;color:var(--accent);opacity:.5}
.blk-i{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--accent-tint);margin-bottom:15px;transition:.3s var(--ease)}
.blk-i img{width:26px;height:26px;display:block}
.blk:hover .blk-i{background:var(--accent)}
.blk:hover .blk-i img{filter:brightness(0) invert(1)}
.blk h3{margin-bottom:7px}
.blk-note{margin-top:22px;font-size:14.5px;color:var(--text-2);max-width:78ch}

/* ---------- pipeline diagram ---------- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;list-style:none;counter-reset:fl;position:relative}
.fl-node{position:relative;padding:22px 18px 20px;border-radius:var(--r-sm);
  background:var(--card);border:1px solid var(--hairline)}
.fl-node::after{content:"";position:absolute;right:-13px;top:50%;width:14px;height:14px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);
  transform:translateY(-50%) rotate(45deg);opacity:.45;z-index:2}
.fl-node:last-child::after{display:none}
.fl-dot{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-tint);margin-bottom:13px}
.fl-dot img{width:22px;height:22px;display:block}
.fl-node b{display:block;font-size:15px;font-weight:600;letter-spacing:-.014em;
  color:var(--text);margin-bottom:5px}
.fl-node em{display:block;font-style:normal;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.fl-foot{margin-top:20px;font-size:14.5px;color:var(--text-2);max-width:74ch}
@media(max-width:820px){.fl-node::after{right:50%;top:auto;bottom:-13px;
  transform:translateX(50%) rotate(135deg)}}

/* ---------- compact dropdown (Services, Company, Contact) ---------- */
.nav-links .has-drop{position:relative}
.drop{position:absolute;top:100%;left:50%;transform:translate(-50%,-8px);z-index:120;
  min-width:286px;padding-top:10px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease),transform .26s var(--ease),visibility 0s linear .26s}
.drop-r{left:auto;right:0;transform:translate(0,-8px)}
.has-drop:hover>.drop,.has-drop:focus-within>.drop,.drop:hover{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition-delay:0s,0s,0s}
.drop-r:hover,.has-drop:hover>.drop-r,.has-drop:focus-within>.drop-r{transform:translate(0,0)}
.nav.mega-shut .drop{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.drop-in{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);
  box-shadow:var(--shadow);padding:10px}
.drop-in>a{display:block;padding:10px 12px;border-radius:var(--r-sm);opacity:1;
  transition:background .2s var(--ease)}
.drop-in>a:hover{background:var(--bg-alt)}
.drop-in b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.014em;color:var(--text)}
.drop-in em{display:block;font-style:normal;font-size:12.5px;line-height:1.45;
  color:var(--text-2);margin-top:2px}
.drop-in .mega-all{margin:6px 0 4px 12px}
.has-drop:hover .mega-c,.has-drop:focus-within .mega-c{transform:rotate(180deg);opacity:1}
/* solutions panel rows carry no icon, so keep them aligned */
#mega-solutions .mega-col>a{padding-left:12px}
@media(max-width:1240px){.nav-links{gap:18px}}

/* NDA lives on the Product Engineering page for now. Delete this one rule to
   bring the mentions back everywhere else — the markup is all still in place.
   !important because these sit inside list and strip components that set their
   own display, which would otherwise out-specify a single class. */
.nda-opt{display:none!important}

/* ---------- tabbed panel ---------- */
.tb-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tb-t{font:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.012em;color:var(--text-2);
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:10px 20px;cursor:pointer;transition:.25s var(--ease)}
.tb-t:hover{color:var(--text);border-color:var(--accent)}
.tb-t.on{background:var(--deep);border-color:var(--deep);color:#fff}
.tb-p{display:none;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tb-p.on{display:grid;animation:fade .32s var(--ease)}
.tb-item{position:relative;padding:26px 24px 24px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--hairline)}
.tb-n{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  color:var(--accent);opacity:.65;margin-bottom:10px}
.tb-item h3{margin-bottom:8px}
.tb-art{margin:26px 0 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.tb-art img{width:100%;height:auto;display:block}
/* with scripting off, show every pane stacked rather than hiding two thirds
   of the content (all three are in the DOM either way, so crawlers see them) */
@media (scripting: none){.tb-p{display:grid;margin-bottom:14px}.tb-bar{display:none}}

/* AI is promoted out of the services list — mark it as a shortcut, not a sibling */
.nav-ai{display:inline-flex;align-items:center;gap:7px;color:var(--accent)!important;
  font-weight:500;opacity:1!important}
.nav-ai i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px var(--accent-tint)}
.nav-ai:hover{color:var(--accent-press)!important}

/* ══ AI page: the queue that empties itself ══════════════════════════ */
.fx-agentq .bw{left:8%;width:84%;top:7%}
.aq{display:grid;justify-items:center;gap:7px;width:100%}
.aq-cap,.aq-chip em{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-style:normal;line-height:1.35}
.aq-in{width:100%;display:grid;justify-items:center;gap:8px}
.aq-rows{display:grid;gap:5px;width:78%}
.aq-rows u{display:block;height:9px;border-radius:2px;text-decoration:none;
  background:rgba(255,255,255,.22);transform-origin:left;
  animation:aqin 3.6s var(--ease) infinite;animation-delay:var(--ad,0s)}
@keyframes aqin{0%{transform:translateX(-14px) scaleX(.2);opacity:0}
  14%{transform:none;opacity:1}62%{transform:none;opacity:1}
  78%,100%{transform:translateX(10px) scaleX(.2);opacity:0}}
.aq-n{font-size:12.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.aq-n i{font-style:normal;font-weight:400;color:rgba(255,255,255,.5);font-size:11px}
.aq-pipe{position:relative;width:2px;height:34px;border-radius:2px;
  background:linear-gradient(rgba(242,101,34,.5),rgba(242,101,34,.14))}
.aq-pipe s{position:absolute;left:-2px;width:6px;height:6px;border-radius:50%;
  background:var(--accent-hot);text-decoration:none;
  animation:aqdrop 2.4s linear infinite;animation-delay:var(--ad,0s)}
@keyframes aqdrop{0%{transform:translateY(-2px);opacity:0}
  15%{opacity:1}85%{opacity:1}100%{transform:translateY(32px);opacity:0}}
.aq-core{position:relative;width:64px;height:64px;border-radius:50%;display:grid;
  place-items:center;background:linear-gradient(145deg,var(--accent),var(--accent-press));
  box-shadow:0 10px 30px -8px rgba(242,101,34,.55)}
.aq-core svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:2}
.aq-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--accent-hot);
  animation:aqring 2.2s var(--ease) infinite;animation-delay:var(--ad,0s)}
@keyframes aqring{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.9);opacity:0}}
.aq-pipe-2{height:28px}
.aq-out{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.aq-chip{display:grid;justify-items:center;gap:3px;padding:11px 8px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);text-align:center}
.aq-chip b{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1}
.aq-chip.ok{background:rgba(76,224,200,.10);border-color:rgba(76,224,200,.32)}
.aq-chip.ok b{color:#6BE3CC}
.aq-chip.hu{background:rgba(242,101,34,.12);border-color:rgba(242,101,34,.36)}
.aq-chip.hu b{color:var(--accent-hot)}
.aq-chip.ok{animation:aqpop 3.6s var(--ease) infinite}
.aq-chip.hu{animation:aqpop 3.6s var(--ease) infinite;animation-delay:.3s}
@keyframes aqpop{0%,40%{transform:scale(1)}48%{transform:scale(1.05)}56%,100%{transform:scale(1)}}

/* ══ capability cards that demonstrate themselves ════════════════════ */
.ac .ca{position:relative;display:block;width:64px;height:46px;margin-bottom:18px}
.ac .ca i{position:absolute;display:block;border-radius:3px;background:var(--accent);
  padding:0;margin:0;border:0;box-sizing:border-box;
  animation-duration:5.4s;animation-timing-function:var(--ease);animation-iteration-count:infinite}
.ac:hover .ca i{animation-duration:2.4s}

.ac .ca-desk i{height:11px;border-radius:6px}
.ac .ca-desk .b1{left:0;top:2px;width:38px;background:var(--accent-tint);animation-name:cfade}
.ac .ca-desk .b2{right:0;top:17px;width:30px;background:var(--accent);animation-name:cfade;animation-delay:.5s}
.ac .ca-desk .b3{left:0;top:32px;width:44px;background:var(--accent-tint);animation-name:cfade;animation-delay:1s}
@keyframes cfade{0%{opacity:0;transform:translateY(5px)}12%{opacity:1;transform:none}
  74%{opacity:1;transform:none}88%,100%{opacity:0;transform:translateY(-4px)}}

.ac .ca-doc .pg{left:0;top:0;width:36px;height:46px;background:var(--accent-tint);
  border-radius:4px;animation:none;padding:7px 6px;box-sizing:border-box}
.ac .ca-doc .pg s{display:block;height:3px;border-radius:2px;background:var(--accent);
  opacity:.45;margin-bottom:5px;text-decoration:none}
.ac .ca-doc .pg s:nth-child(2){width:70%}.ca-doc .pg s:nth-child(3){width:50%}
.ac .ca-doc .scan{left:-2px;top:0;width:40px;height:2px;background:var(--accent);
  border-radius:2px;animation-name:cscan}
@keyframes cscan{0%{transform:translateY(0);opacity:0}8%{opacity:1}
  46%{transform:translateY(44px);opacity:1}54%,100%{transform:translateY(44px);opacity:0}}
.ac .ca-doc .f1{right:0;top:8px;width:22px;height:9px;animation-name:cslide}
.ac .ca-doc .f2{right:0;top:25px;width:16px;height:9px;animation-name:cslide;animation-delay:.35s}
@keyframes cslide{0%{opacity:0;transform:translateX(-10px)}
  46%{opacity:0;transform:translateX(-10px)}58%{opacity:1;transform:none}
  86%{opacity:1;transform:none}100%{opacity:0}}

.ac .ca-copilot .q{left:0;top:2px;width:64px;height:12px;border-radius:7px;
  background:var(--accent-tint);animation-name:cfade}
.ac .ca-copilot .a1{left:0;top:21px;width:52px;height:8px;animation-name:cwipe;animation-delay:.5s}
.ac .ca-copilot .a2{left:0;top:34px;width:34px;height:8px;animation-name:cwipe;animation-delay:.75s}
.ac .ca-copilot .cite{left:40px;top:34px;width:8px;height:8px;border-radius:50%;
  background:var(--accent-hot);animation-name:cfade;animation-delay:1.1s}
@keyframes cwipe{0%{transform:scaleX(0);opacity:0}14%{transform:none;opacity:1}
  80%{transform:none;opacity:1}94%,100%{transform:scaleX(0);opacity:0}}
.ac .ca-copilot .a1,.ac .ca-copilot .a2{transform-origin:left}

.ac .ca-flow i{width:14px;height:14px;border-radius:50%}
.ac .ca-flow .ln{left:7px;top:22px;width:50px;height:2px;border-radius:2px;
  background:var(--accent-tint);animation:none}
.ac .ca-flow .n1{left:0;top:16px;animation-name:cping}
.ac .ca-flow .n2{left:25px;top:16px;animation-name:cping;animation-delay:.45s}
.ac .ca-flow .n3{left:50px;top:16px;animation-name:cping;animation-delay:.9s}
@keyframes cping{0%,8%{transform:scale(.7);opacity:.3}
  16%{transform:scale(1.15);opacity:1}30%{transform:scale(1);opacity:1}
  86%{opacity:1}100%{transform:scale(.7);opacity:.3}}

.ac .ca-voice{display:flex!important;align-items:center;gap:4px}
.ac .ca-voice i{position:static!important;width:5px;border-radius:3px;
  animation-name:cwave;animation-duration:1.5s!important}
.ac .ca-voice i:nth-child(1){height:14px;animation-delay:0s}
.ac .ca-voice i:nth-child(2){height:26px;animation-delay:.1s}
.ac .ca-voice i:nth-child(3){height:38px;animation-delay:.2s}
.ac .ca-voice i:nth-child(4){height:46px;animation-delay:.3s}
.ac .ca-voice i:nth-child(5){height:32px;animation-delay:.4s}
.ac .ca-voice i:nth-child(6){height:20px;animation-delay:.5s}
.ac .ca-voice i:nth-child(7){height:11px;animation-delay:.6s}
@keyframes cwave{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}

.ac .ca-ready i{height:8px;border-radius:4px;transform-origin:left}
.ac .ca-ready .c1{left:0;top:2px;width:44px;animation-name:cwipe}
.ac .ca-ready .c2{left:0;top:16px;width:32px;animation-name:cwipe;animation-delay:.3s}
.ac .ca-ready .c3{left:0;top:30px;width:38px;animation-name:cwipe;animation-delay:.6s}
.ac .ca-ready .store{right:0;top:2px;width:12px;height:36px;border-radius:3px;
  background:var(--accent-tint);animation-name:cfade;animation-delay:1s}

/* ══ proof-of-concept close ═══════════════════════════════════════════ */
.poc{padding-block:var(--sec-pad)}
.poc-box{position:relative;background:var(--card);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:clamp(26px,3.4vw,52px);overflow:hidden;
  box-shadow:var(--shadow)}
/* one accent edge instead of a black slab */
.poc-box::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-hot) 55%,transparent)}
.poc-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,262px);
  gap:clamp(20px,3vw,52px);align-items:start;
  padding-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--hairline)}
.poc-hd .intro{max-width:54ch}
.poc-fee{background:var(--bg-alt);border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:18px 20px}
.poc-fee span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3)}
.poc-fee b{display:block;margin-top:6px;font-size:17px;font-weight:600;
  letter-spacing:-.018em;color:var(--text)}
.poc-fee i{display:block;margin-top:8px;font-style:normal;font-size:13px;
  line-height:1.45;color:var(--text-2)}

.poc-weeks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px);
  margin:clamp(26px,3vw,38px) 0 0;list-style:none;padding:0;counter-reset:pw}
.pw{position:relative;padding:22px 20px 20px;border-radius:var(--r);
  background:var(--bg-alt);border:1px solid var(--hairline)}
/* the arrow between weeks reads as a sequence without numbering the obvious */
.pw::after{content:"";position:absolute;right:-13px;top:50%;width:13px;height:13px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);
  transform:translateY(-50%) rotate(45deg);opacity:.5;z-index:2}
.pw:last-child::after{display:none}
.pw-n{position:absolute;top:18px;right:20px;font-size:34px;font-weight:700;
  letter-spacing:-.04em;color:var(--accent);opacity:.16;line-height:1}
.pw-w{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.pw b{display:block;margin:10px 0 7px;font-size:19px;font-weight:600;
  letter-spacing:-.024em;color:var(--text)}
.pw em{display:block;font-style:normal;font-size:14px;line-height:1.55;color:var(--text-2)}

.poc-gets{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:10px 30px;margin:clamp(24px,3vw,34px) 0 0;padding:0;list-style:none}
.poc-gets li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:14.6px;line-height:1.5;color:var(--text-2)}
.poc-gets svg{width:19px;height:19px;margin-top:2px;fill:none;stroke:var(--accent);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.poc-act{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,44px);
  align-items:center;margin-top:clamp(26px,3vw,36px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--hairline)}
.poc-act-txt b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.018em;
  color:var(--text)}
.poc-act-txt span{display:block;margin-top:5px;font-size:14.4px;line-height:1.55;
  color:var(--text-2);max-width:60ch}
.poc-btns{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:900px){
  .poc-hd{grid-template-columns:1fr}
  .poc-weeks{grid-template-columns:1fr}
  .pw::after{right:50%;top:auto;bottom:-13px;transform:translateX(50%) rotate(135deg)}
  .poc-act{grid-template-columns:1fr}
  .poc-btns .btn{flex:1 1 200px;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  .aq-rows u,.aq-pipe s,.aq-ring,.aq-chip,.ac .ca i{animation:none!important}
  .aq-rows u,.ac .ca i{opacity:1!important;transform:none!important}
  .aq-pipe s,.aq-ring{display:none}
}

/* the shared .checks list is built for a light ground — lift it on the dark PoC panel */
.poc .checks span{color:var(--on-deep)}
.poc .checks li{border-color:rgba(255,255,255,.1)}


/* "How we work" now sits on the warm ground rather than a black slab — the
   coloured orbs carry the sequence, so the section no longer needs to go dark */
section.dark.ps-light{background:var(--bg-alt);color:var(--text-2)}
section.dark.ps-light h2,section.dark.ps-light h3{color:var(--text)}
section.dark.ps-light .intro,section.dark.ps-light .eyebrow{color:var(--text-2)}
section.dark.ps-light .eyebrow{color:var(--accent)}
.ps-light .ps{box-shadow:var(--shadow-sm)}
.ps-light .ps:hover{box-shadow:var(--shadow)}
.ps-light .ps-arrow{opacity:.55}

/* the orb's 8px ring existed to separate it from the dark slab — on the light
   ground it must be the ground's own colour, not near-black */
.ps-light .ps-orb{box-shadow:0 0 0 8px var(--bg-alt),0 18px 34px -14px var(--g1)}
.ps-light .ps-orb::after{opacity:.28}

/* the CTA band was still wearing the dark slab's colours on the light ground */
.ps-light .ps-cta{background:var(--card);border-color:var(--hairline);box-shadow:var(--shadow-sm)}
.ps-light .ps-person b{color:var(--text)}
.ps-light .ps-person small{color:var(--text-2)}
.ps-light .ps-cta-txt{color:var(--text-2)}
.ps-light .ps-av{background:var(--bg-alt);box-shadow:0 0 0 3px var(--accent-tint)}

/* ══ "what you get" — full width, no dead column ══════════════════════ */
.gt-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44ch);
  gap:clamp(20px,3vw,56px);align-items:end;padding-bottom:28px;
  border-bottom:1px solid var(--hairline)}
.gt-aside .intro{margin:0}
.gt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:12px;margin:26px 0 0;padding:0;list-style:none}
/* six promises read as two rows of three, never four and a gap */
@media(min-width:1040px){.gt-grid{grid-template-columns:repeat(3,1fr)}}
.gt{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:20px 22px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--hairline);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.gt:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--accent)}
.gt-i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-tint);transition:background .3s var(--ease)}
.gt:hover .gt-i{background:var(--accent)}
.gt-i svg{width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;transition:stroke .3s var(--ease)}
.gt:hover .gt-i svg{stroke:#fff}
.gt.in .gt-i svg,.gt-grid .gt .gt-i svg{animation:tick-draw .7s var(--ease) forwards;
  animation-delay:calc(.15s + var(--d,0ms))}
@keyframes tick-draw{to{stroke-dashoffset:0}}
.gt-t{font-size:15.6px;line-height:1.5;letter-spacing:-.012em;color:var(--text);padding-top:4px}
@media(max-width:820px){.gt-head{grid-template-columns:1fr;align-items:start}}

/* ══ pipeline nodes: the sequence lights up as it is read ═════════════ */
.fl-node{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.fl-node:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--accent)}
.fl-dot{position:relative;overflow:hidden;transition:background .3s var(--ease)}
.fl-dot::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--accent);opacity:0;animation:fl-lit 6s var(--ease) infinite;
  animation-delay:calc(var(--i,0) * .55s)}
@keyframes fl-lit{0%,4%{opacity:0}9%{opacity:1}26%{opacity:0}100%{opacity:0}}
.fl-dot img{position:relative;z-index:2;transition:filter .3s var(--ease)}
.fl-node:hover .fl-dot{background:var(--accent)}
.fl-node:hover .fl-dot img{filter:brightness(0) invert(1)}
.fl-node::after{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.fl-node:hover::after{opacity:1}

/* ══ process cards: each one does something on hover ══════════════════ */
/* no overflow clipping here — the number orb deliberately sits above the card,
   so the hover bar is inset instead of being clipped to the rounded corners */
.ps::before{content:"";position:absolute;left:24px;right:24px;bottom:0;height:3px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--g1),var(--g2));transform:scaleX(0);
  transform-origin:left;transition:transform .45s var(--ease)}
.ps:hover::before{transform:scaleX(1)}
.ps-orb{overflow:visible}
.ps-orb::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--g1);opacity:0}
.ps:hover .ps-orb::before{animation:orb-ping 1.1s var(--ease)}
@keyframes orb-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}

/* ══ PoC week cards ═══════════════════════════════════════════════════ */
.pw{overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),
  border-color .3s var(--ease),background .3s var(--ease)}
.pw:hover{transform:translateY(-3px);background:var(--card);
  box-shadow:var(--shadow-sm);border-color:var(--accent)}
.pw-n{transition:opacity .3s var(--ease),transform .4s var(--ease)}
.pw:hover .pw-n{opacity:.3;transform:scale(1.1)}
.pw::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease)}
.pw:hover::before{transform:scaleY(1)}

/* ══ light hero (AI page) — the home page's warm ground, with the agent's
      working loop drawn behind the copy ═══════════════════════════════════ */
.phero.bg-light{background:var(--bg)}
.bg-light .phero-bg{z-index:0}
.bg-light .phero-in{z-index:2}
.bg-light #agentLoop{position:absolute;inset:0;width:100%;height:100%;
  opacity:.9;pointer-events:none}
/* copy returns to the light-ground palette */
.bg-light .phero-copy .crumb{color:var(--text-3)}
.bg-light .phero-copy .crumb a{color:var(--text-2)}
.bg-light .phero-copy .crumb a:hover{color:var(--accent)}
.bg-light .phero-copy .eyebrow{color:var(--accent)}
.bg-light .phero-copy .t-hero{color:var(--text);text-shadow:none}
.bg-light .phero-copy .intro{color:var(--text-2)}
.bg-light .btn-ghost{background:var(--card);color:var(--text);
  border-color:var(--hairline);backdrop-filter:none}
.bg-light .btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--card)}
.bg-light .phero-fade{display:none}
/* the agent card keeps its dark surface so it still reads as a device */


/* ══ adjacent services — tells the visitor which page they actually want ══ */
.sib-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;margin-top:30px}
.sib{display:block;padding:24px 24px 22px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--hairline);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.sib:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--accent)}
.sib b{display:block;font-size:18.5px;font-weight:600;letter-spacing:-.024em;color:var(--text)}
.sib em{display:block;font-style:normal;margin-top:8px;font-size:14.4px;line-height:1.55;
  color:var(--text-2)}
.sib-go{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--accent)}
.sib:hover .sib-go{color:var(--accent-press)}


/* ── footer legibility ───────────────────────────────────────────────
   The note and the bottom bar measured 3.0:1 at 13px, under the 4.5
   minimum for body text. Both now take the secondary tone at 14px. */
footer .foot-bot{color:var(--text-2);font-size:14px;padding-top:22px}
footer .foot-bot a{color:var(--text)}
footer .foot-bot a:hover{color:var(--accent)}
.foot-cols>div>p{color:var(--text-2);line-height:1.6}

/* contact sits with the address rather than in a seventh column */
.foot-contact{margin-top:16px;display:grid;gap:7px}
.foot-contact a{color:var(--text);font-weight:500}
.foot-contact a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.foot-contact li:last-child{color:var(--text-2)}
/* keep the bottom bar clear of the floating WhatsApp button */
.foot-bot{padding-right:76px}
@media(max-width:700px){.foot-bot{padding-right:0}}

/* a set price reads as a figure, not as a blank waiting to be filled */
.price-set{color:var(--text);font-weight:600;letter-spacing:-.02em}

/* ══ engagement table ═════════════════════════════════════════════════ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wy-wrap{margin-top:30px;overflow-x:auto;border:1px solid var(--hairline);
  border-radius:var(--r);background:var(--card)}
.wy{width:100%;min-width:660px;border-collapse:collapse;text-align:left}
.wy thead th{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);padding:16px 22px;border-bottom:1px solid var(--hairline);white-space:nowrap}
.wy tbody tr{border-bottom:1px solid var(--hairline);transition:background .2s var(--ease)}
.wy tbody tr:last-child{border-bottom:0}
.wy tbody tr:hover{background:var(--bg-alt)}
.wy th[scope="row"]{padding:18px 22px;font-weight:400}
.wy th b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.wy th em{display:block;font-style:normal;margin-top:4px;font-size:13.5px;color:var(--text-2)}
.wy td{padding:18px 22px;vertical-align:top;font-size:14.4px;color:var(--text-2)}
.wy-price{color:var(--text)!important;font-weight:600;white-space:nowrap}
.wy-go a{font-size:13.8px;font-weight:600;color:var(--accent);white-space:nowrap}
.wy-go a:hover{color:var(--accent-press);text-decoration:underline;text-underline-offset:3px}
.wy-note{margin-top:18px;font-size:14px;color:var(--text-2);max-width:78ch}

/* ══ principles — five commitments, equal weight ══════════════════════ */
.pr-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));
  gap:1px;margin:30px 0 0;padding:0;list-style:none;
  background:var(--hairline);border:1px solid var(--hairline);
  border-radius:var(--r);overflow:hidden}
.pr{background:var(--card);padding:26px 22px 24px;
  transition:background .25s var(--ease)}
.pr:hover{background:var(--bg-alt)}
.pr-i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-tint);margin-bottom:16px;transition:background .25s var(--ease)}
.pr-i img{width:26px;height:26px;display:block;transition:filter .25s var(--ease)}
.pr:hover .pr-i{background:var(--accent)}
.pr:hover .pr-i img{filter:brightness(0) invert(1)}
.pr b{display:block;font-size:17px;font-weight:600;letter-spacing:-.022em;color:var(--text)}
.pr em{display:block;font-style:normal;margin-top:8px;font-size:14.2px;line-height:1.55;
  color:var(--text-2)}
.pr-note{margin-top:20px;font-size:14.5px;color:var(--text-2);max-width:76ch}

/* ══ two offices ══════════════════════════════════════════════════════ */
.offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:12px;margin-bottom:20px}
.office{padding:20px 22px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--hairline)}
.office-k{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px}
.office-a{font-size:14.4px;line-height:1.6;color:var(--text-2)}
.office-t{margin-top:12px;font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.office-t a{color:var(--text)}
.office-t a:hover{color:var(--accent)}
.foot-tag{margin-top:8px;font-size:13.5px;color:var(--text-2);max-width:34ch}
.foot-flag{font-size:12px;color:var(--text-3);margin-left:4px}

/* ══ contact card above the footer ════════════════════════════════════ */
.cband{padding-block:var(--sec-pad)}
.cband-box{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,3.6vw,60px);align-items:center;
  padding:clamp(26px,3.4vw,46px);border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--hairline);box-shadow:var(--shadow)}
.cband-copy .t-sub{margin:12px 0 12px;max-width:18ch}
.cband-copy .body-s{max-width:44ch}
.cband-copy .btn{margin-top:24px}
.cband-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:0;list-style:none;
  background:var(--hairline);border:1px solid var(--hairline);
  border-radius:var(--r);overflow:hidden}
.cband-list li{background:var(--bg);padding:20px 22px;transition:background .25s var(--ease)}
.cband-list li:hover{background:var(--bg-alt)}
.cband-k{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}
.cband-v{display:block;margin-top:8px;font-size:17px;font-weight:600;letter-spacing:-.022em;
  color:var(--text)}
.cband-v:hover{color:var(--accent)}
.cband-s{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--text-2)}
@media(max-width:900px){
  .cband-box{grid-template-columns:1fr}
  .cband-list{grid-template-columns:1fr}
}

/* Sections kept in the source for other pages to lift, but not shown on the
   home page. Delete this rule to bring all three back. */
.home-off{display:none}

/* ══ what clients say — three across, rotating ════════════════════════ */
.tst{display:flex;gap:clamp(14px,1.6vw,22px);margin:30px 0 0;padding:4px 4px 10px;
  list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.tst::-webkit-scrollbar{display:none}
.tst:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r)}
.tst-card{position:relative;flex:0 0 calc((100% - 2 * clamp(14px,1.6vw,22px)) / 3);
  scroll-snap-align:start;display:flex;flex-direction:column;
  padding:30px 28px 26px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--hairline);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.tst-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent)}
.tst-mark{width:34px;height:34px;fill:var(--accent);opacity:.24;margin-bottom:16px;flex:none}
.tst-q{margin:0;font-size:16.5px;line-height:1.6;letter-spacing:-.012em;color:var(--text)}
.tst-res{margin:16px 0 0;display:inline-block;align-self:flex-start;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--accent);
  background:var(--accent-tint);padding:7px 12px;border-radius:var(--r-pill)}
.tst-who{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:22px}
.tst-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--bg-alt);border:1px solid var(--hairline);color:var(--text-3);font-size:15px}
.tst-who b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--text)}
.tst-who em{display:block;font-style:normal;margin-top:2px;font-size:13.2px;color:var(--text-2)}
/* the placeholder badge disappears with the tag, so a filled card needs no cleanup */
.tst-todo{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
  background:var(--accent-tint);padding:4px 9px;border-radius:var(--r-pill)}
.tst-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.tst-dots button{width:26px;height:4px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:var(--hairline);transition:background .25s var(--ease),width .25s var(--ease)}
.tst-dots button[aria-selected="true"]{background:var(--accent);width:40px}
@media(max-width:1000px){.tst-card{flex-basis:calc((100% - clamp(14px,1.6vw,22px)) / 2)}}
@media(max-width:680px){.tst-card{flex-basis:88%}}


/* ══ technology: width instead of height ══════════════════════════════
   Was 961px tall with a centred header over vertical tabs. The header is
   now a left column and the tabs run across the top, which fits the whole
   section inside 500px without dropping a single technology. */
#stack{padding-block:var(--sec-pad)}
.tx-wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr);
  gap:clamp(24px,3.4vw,56px);align-items:center}
.tx-side .t-sec{font-size:clamp(25px,2.7vw,34px)}
.tx-side .body-s{max-width:36ch}
#stack .tx{grid-template-columns:1fr;box-shadow:var(--shadow)}
#stack .tx-tabs{flex-direction:row;flex-wrap:wrap;gap:6px;padding:16px 18px;
  border-right:0;border-bottom:1px solid var(--hairline)}
#stack .tx-tab{width:auto;padding:8px 14px;border-radius:var(--r-pill);
  font-size:13.5px;gap:8px}
#stack .tx-ico{width:22px;height:22px;border-radius:7px}
#stack .tx-ico svg{width:13px;height:13px}
#stack .tx-chev{display:none}
#stack .tx-panels{padding:22px 22px 24px;min-height:0}
#stack .tx-panel > p{font-size:14px;line-height:1.5;margin:0}
/* Every technology in the category is on screen at once — a five-across grid
   that wraps to a second row, never a scroller that hides the last few. The
   rows are a fixed height, so a category of four is as tall as one of ten and
   switching tabs does not make the section jump. */
#stack .tx-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;margin-top:14px;grid-auto-rows:78px;min-height:165px;align-content:start}
#stack .tx-card{min-width:0;padding:12px 7px 10px;gap:6px;border-radius:12px}
#stack .tx-card img{width:25px;height:25px}
#stack .tx-card b{font-size:14.5px}
#stack .tx-card span{font-size:11.6px;line-height:1.22;text-align:center;
  overflow-wrap:anywhere;hyphens:auto}
@media(max-width:1000px){
  .tx-wrap{grid-template-columns:1fr;gap:26px}
  #stack .tx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:560px){
  #stack .tx-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:74px;min-height:0}
}

/* Ten panels make the collapsed strips ~93px, where the corner number and the
   icon badge overlap. The number is only meaningful on the panel you are
   reading, so collapsed strips show the icon alone, centred. */
.xp-panel:not(.on) .xp-num{opacity:0;transition:opacity .25s var(--ease)}
.xp-panel:not(.on) .xp-ico{left:50%;right:auto;transform:translateX(-50%)}

/* ── a capability card that leads somewhere ─────────────────────────── */
.ac-linked{position:relative;display:flex;flex-direction:column}
.ac-go{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--accent);transition:gap .25s var(--ease)}
.ac-linked::after{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid transparent;transition:border-color .3s var(--ease);pointer-events:none}
.ac-linked:hover::after{border-color:var(--accent)}
.ac-linked:hover .ac-go{gap:11px}
.ac-go:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ═══ pipeline nodes that demonstrate themselves on hover ═══════════════
   Each scene sits still inside its node and starts moving when the node is
   hovered or focused, so pointing at "Retrieve" shows a retrieval. The
   resting frame is the finished state, so nothing is hidden from someone
   who never hovers — or who has animation turned off. */
.fl-live{cursor:default}
.fl-live:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fl-anim{position:relative;display:block;height:46px;margin-top:14px;border-radius:10px;
  background:var(--bg-alt);border:1px solid var(--hairline);overflow:hidden;
  transition:background .3s var(--ease),border-color .3s var(--ease)}.fl-node:hover .fl-anim,.fl-node:focus-within .fl-anim,.fl-auto .fl-node.in .fl-anim{background:var(--card);
  border-color:color-mix(in oklab,var(--accent) 38%,var(--hairline))}
.fl-anim i,.fl-anim b,.fl-anim s,.fl-anim u{position:absolute;display:block;
  padding:0;margin:0;box-sizing:border-box;
  text-decoration:none;font-style:normal;font-weight:400}

/* ── ground it: documents cut into permissioned chunks ──────────────── */
.fl-a-ground i{width:13px;height:17px;border-radius:2px;background:var(--hairline);left:12px}
.fl-a-ground .d1{top:7px}
.fl-a-ground .d2{top:14px;left:16px;opacity:.7}
.fl-a-ground .d3{top:21px;left:20px;opacity:.45}
.fl-a-ground u{width:9px;height:9px;border-radius:2px;background:var(--hairline);
  top:calc(12px + var(--r) * 13px);left:calc(52px + var(--c) * 13px);
  transition:background .3s var(--ease)}.fl-node:hover .fl-a-ground u,.fl-node:focus-within .fl-a-ground u,.fl-auto .fl-node.in .fl-a-ground u{
  animation:fl-chunk 2.2s var(--ease) infinite;animation-delay:calc(var(--i) * .1s)}
@keyframes fl-chunk{0%,10%{background:var(--hairline)}
  30%,55%{background:var(--accent)}80%,100%{background:var(--hairline)}}
.fl-a-ground .lock{right:11px;top:15px;width:14px;height:15px;border-radius:3px;
  border:1.6px solid var(--text-3)}
.fl-a-ground .lock::before{content:"";position:absolute;left:3px;top:-5px;width:6px;height:6px;
  border:1.6px solid var(--text-3);border-bottom:0;border-radius:4px 4px 0 0}

/* ── retrieve: a sweep that finds the two passages that answer ──────── */
.fl-a-retrieve .ln{left:12px;height:5px;border-radius:3px;background:var(--hairline);
  transition:background .3s var(--ease),width .3s var(--ease)}
.fl-a-retrieve .l1{top:9px;width:64%}
.fl-a-retrieve .l2{top:19px;width:78%}
.fl-a-retrieve .l3{top:29px;width:52%}
.fl-a-retrieve .l4{top:39px;width:70%}.fl-node:hover .fl-a-retrieve .l2,.fl-node:focus-within .fl-a-retrieve .l2,.fl-node:hover .fl-a-retrieve .l4,.fl-node:focus-within .fl-a-retrieve .l4,.fl-auto .fl-node.in .fl-a-retrieve .l2,.fl-auto .fl-node.in .fl-a-retrieve .l4{
  animation:fl-hit 2.2s var(--ease) infinite}.fl-node:hover .fl-a-retrieve .l4,.fl-node:focus-within .fl-a-retrieve .l4,.fl-auto .fl-node.in .fl-a-retrieve .l4{animation-delay:.35s}
@keyframes fl-hit{0%,28%{background:var(--hairline)}45%,72%{background:var(--accent)}
  92%,100%{background:var(--hairline)}}
.fl-a-retrieve .sweep{left:6px;right:6px;top:4px;height:12px;border-radius:6px;
  background:color-mix(in oklab,var(--accent) 16%,transparent);opacity:0}.fl-node:hover .fl-a-retrieve .sweep,.fl-node:focus-within .fl-a-retrieve .sweep,.fl-auto .fl-node.in .fl-a-retrieve .sweep{
  animation:fl-sweep 2.2s var(--ease) infinite}
@keyframes fl-sweep{0%{transform:translateY(0);opacity:0}
  12%{opacity:1}55%{transform:translateY(31px);opacity:1}70%,100%{opacity:0;transform:translateY(31px)}}
.fl-a-retrieve .cite{right:11px;top:17px;width:11px;height:11px;border-radius:50%;
  border:1.8px solid var(--accent);opacity:0}.fl-node:hover .fl-a-retrieve .cite,.fl-node:focus-within .fl-a-retrieve .cite,.fl-auto .fl-node.in .fl-a-retrieve .cite{
  animation:fl-pop 2.2s var(--ease) infinite}
@keyframes fl-pop{0%,55%{opacity:0;transform:scale(.6)}70%,88%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}}

/* ── decide: the rule is tried first, the model second ──────────────── */
.fl-a-decide .in{left:10px;top:21px;width:26px;height:3px;border-radius:3px;background:var(--hairline)}
.fl-a-decide .gate{left:40px;top:14px;width:16px;height:16px;background:var(--hairline);
  transform:rotate(45deg);border-radius:3px;transition:background .3s var(--ease)}.fl-node:hover .fl-a-decide .gate,.fl-node:focus-within .fl-a-decide .gate,.fl-auto .fl-node.in .fl-a-decide .gate{
  animation:fl-gate 2.4s var(--ease) infinite}
@keyframes fl-gate{0%,18%{background:var(--hairline)}30%,62%{background:var(--accent)}
  80%,100%{background:var(--hairline)}}
.fl-a-decide .lane{left:62px;right:34px;height:3px;border-radius:3px;background:var(--hairline)}
.fl-a-decide .up{top:13px}
.fl-a-decide .dn{top:30px}
.fl-a-decide .tok{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:0;
  left:60px}
.fl-a-decide .rule{top:10px}
.fl-a-decide .model{top:27px}.fl-node:hover .fl-a-decide .rule,.fl-node:focus-within .fl-a-decide .rule,.fl-auto .fl-node.in .fl-a-decide .rule{
  animation:fl-run 2.4s var(--ease) infinite}.fl-node:hover .fl-a-decide .model,.fl-node:focus-within .fl-a-decide .model,.fl-auto .fl-node.in .fl-a-decide .model{
  animation:fl-run 2.4s var(--ease) infinite;animation-delay:.5s;opacity:0}
@keyframes fl-run{0%,22%{opacity:0;transform:translateX(0)}
  32%{opacity:1}72%{opacity:1;transform:translateX(52px)}85%,100%{opacity:0;transform:translateX(52px)}}
.fl-a-decide::after{content:"";position:absolute;right:14px;top:8px;width:14px;height:30px;
  border-radius:4px;border:1.6px dashed var(--hairline)}

/* ── act: a write lands in the system of record ─────────────────────── */
.fl-a-act .src{left:12px;top:15px;width:16px;height:17px;border-radius:3px;
  border:1.6px solid var(--text-3)}
.fl-a-act .wire{left:32px;right:44px;top:22px;height:2px;border-radius:2px;background:var(--hairline)}
.fl-a-act .sys{right:12px;top:12px;width:28px;height:23px;border-radius:5px;
  border:1.8px solid var(--hairline);transition:border-color .3s var(--ease)}.fl-node:hover .fl-a-act .sys,.fl-node:focus-within .fl-a-act .sys,.fl-auto .fl-node.in .fl-a-act .sys{
  animation:fl-sys 2.2s var(--ease) infinite}
@keyframes fl-sys{0%,42%{border-color:var(--hairline)}56%,86%{border-color:var(--accent)}
  100%{border-color:var(--hairline)}}
.fl-a-act .pkt{left:32px;top:18px;width:9px;height:9px;border-radius:2px;background:var(--accent);
  opacity:0}.fl-node:hover .fl-a-act .pkt,.fl-node:focus-within .fl-a-act .pkt,.fl-auto .fl-node.in .fl-a-act .pkt{
  animation:fl-pkt 2.2s var(--ease) infinite}
@keyframes fl-pkt{0%{opacity:0;transform:translateX(0)}12%{opacity:1}
  46%{opacity:1;transform:translateX(var(--fl-run,58px))}
  56%,100%{opacity:0;transform:translateX(var(--fl-run,58px))}}
.fl-a-act .tick{right:22px;top:19px;width:10px;height:6px;border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);transform:rotate(-45deg);opacity:0}.fl-node:hover .fl-a-act .tick,.fl-node:focus-within .fl-a-act .tick,.fl-auto .fl-node.in .fl-a-act .tick{
  animation:fl-tick 2.2s var(--ease) infinite}
@keyframes fl-tick{0%,54%{opacity:0}66%,88%{opacity:1}100%{opacity:0}}

/* ── hand off: confidence against the line you set ──────────────────── */
.fl-a-handoff .meter{left:12px;right:46px;top:20px;height:8px;border-radius:5px;
  background:var(--hairline);overflow:hidden}
.fl-a-handoff .meter u{position:absolute;inset:0;width:64%;border-radius:5px;
  background:linear-gradient(90deg,var(--accent-hot),var(--accent));transform-origin:left}.fl-node:hover .fl-a-handoff .meter u,.fl-node:focus-within .fl-a-handoff .meter u,.fl-auto .fl-node.in .fl-a-handoff .meter u{
  animation:fl-fill 2.4s var(--ease) infinite}
@keyframes fl-fill{0%{transform:scaleX(.08)}45%,62%{transform:scaleX(1)}100%{transform:scaleX(.08)}}
.fl-a-handoff .thr{left:calc(64% - 4px);top:13px;width:2px;height:22px;border-radius:2px;
  background:var(--text-3);opacity:.55}
.fl-a-handoff .person{right:14px;top:14px;width:18px;height:18px;border-radius:50%;
  border:1.8px solid var(--text-3);opacity:.35;transition:none}
.fl-a-handoff .person::after{content:"";position:absolute;left:2px;bottom:-1px;width:10px;
  height:6px;border-radius:5px 5px 0 0;border:1.8px solid currentColor;border-bottom:0}.fl-node:hover .fl-a-handoff .person,.fl-node:focus-within .fl-a-handoff .person,.fl-auto .fl-node.in .fl-a-handoff .person{
  animation:fl-person 2.4s var(--ease) infinite}
@keyframes fl-person{0%,48%{opacity:.35;border-color:var(--text-3);color:var(--text-3)}
  62%,88%{opacity:1;border-color:var(--accent);color:var(--accent)}
  100%{opacity:.35;border-color:var(--text-3);color:var(--text-3)}}

@media(prefers-reduced-motion:reduce){
  .fl-anim *{animation:none!important}
  .fl-a-ground u{background:var(--accent)}
  .fl-a-retrieve .l2,.fl-a-retrieve .l4{background:var(--accent)}
  .fl-a-retrieve .cite,.fl-a-decide .tok,.fl-a-act .pkt,.fl-a-act .tick{opacity:1}
  .fl-a-decide .gate{background:var(--accent)}
  .fl-a-handoff .person{opacity:1;border-color:var(--accent);color:var(--accent)}
}
@media(max-width:700px){.fl-anim{height:42px}}

/* ═══ the overnight pipeline: one scene per step ════════════════════════
   Same machinery as the scenes above — still at rest, running on hover or,
   where the row carries `fl-auto`, as soon as it scrolls into view. */

/* ── arrive: a copy is taken, the original is left alone ────────────── */
.fl-a-arrive .from{left:12px;top:14px;width:17px;height:19px;border-radius:3px;
  border:1.6px solid var(--text-3)}
.fl-a-arrive .trail{left:33px;right:46px;top:23px;height:2px;border-radius:2px;
  background:var(--hairline)}
.fl-a-arrive .raw{right:12px;top:12px;width:30px;height:23px;border-radius:5px;
  border:1.6px dashed var(--hairline);transition:border-color .3s var(--ease)}
.fl-a-arrive .pkt{left:33px;top:19px;width:9px;height:9px;border-radius:2px;
  background:var(--accent);opacity:0}
.fl-node:hover .fl-a-arrive .pkt,.fl-node:focus-within .fl-a-arrive .pkt,
.fl-auto .fl-node.in .fl-a-arrive .pkt{animation:fl-arrive 2.4s var(--ease) infinite}
@keyframes fl-arrive{0%{opacity:0;transform:translateX(0)}10%{opacity:1}
  52%{opacity:1;transform:translateX(56px)}64%,100%{opacity:0;transform:translateX(56px)}}
.fl-node:hover .fl-a-arrive .raw,.fl-node:focus-within .fl-a-arrive .raw,
.fl-auto .fl-node.in .fl-a-arrive .raw{animation:fl-raw 2.4s var(--ease) infinite}
@keyframes fl-raw{0%,50%{border-color:var(--hairline)}62%,88%{border-color:var(--accent)}
  100%{border-color:var(--hairline)}}

/* ── tidy: three misaligned fields snap to one edge ─────────────────── */
.fl-a-tidy .r{height:6px;border-radius:3px;background:var(--hairline)}
.fl-a-tidy .r1{top:11px;left:26px;width:52%;--fl-dx:-12px}
.fl-a-tidy .r2{top:21px;left:38px;width:38%;--fl-dx:-24px}
.fl-a-tidy .r3{top:31px;left:20px;width:60%;--fl-dx:-6px}
.fl-node:hover .fl-a-tidy .r,.fl-node:focus-within .fl-a-tidy .r,
.fl-auto .fl-node.in .fl-a-tidy .r{animation:fl-tidy 2.6s var(--ease) infinite}
.fl-a-tidy .r2{animation-delay:.12s}
.fl-a-tidy .r3{animation-delay:.24s}
@keyframes fl-tidy{0%,18%{transform:translateX(0);background:var(--hairline)}
  46%,72%{transform:translateX(var(--fl-dx,0));background:var(--accent)}
  100%{transform:translateX(0);background:var(--hairline)}}
.fl-a-tidy .edge{left:14px;top:8px;width:2px;height:30px;border-radius:2px;
  background:var(--accent);opacity:0}
.fl-node:hover .fl-a-tidy .edge,.fl-node:focus-within .fl-a-tidy .edge,
.fl-auto .fl-node.in .fl-a-tidy .edge{animation:fl-edge 2.6s var(--ease) infinite}
@keyframes fl-edge{0%,30%{opacity:0}48%,74%{opacity:.7}100%{opacity:0}}

/* ── check: four checks run, one fails and stops the load ───────────── */
.fl-a-check .c{top:19px;width:9px;height:9px;border-radius:2px;background:var(--hairline)}
.fl-a-check .c1{left:16px}
.fl-a-check .c2{left:31px}
.fl-a-check .c3{left:46px}
.fl-a-check .c4{left:61px}
.fl-node:hover .fl-a-check .c,.fl-node:focus-within .fl-a-check .c,
.fl-auto .fl-node.in .fl-a-check .c{animation:fl-pass 2.6s var(--ease) infinite}
.fl-a-check .c2{animation-delay:.18s}
.fl-a-check .c3{animation-delay:.36s}
.fl-a-check .c4{animation-delay:.54s;animation-name:fl-fail}
@keyframes fl-pass{0%,12%{background:var(--hairline)}26%,70%{background:#2E9E6B}
  86%,100%{background:var(--hairline)}}
@keyframes fl-fail{0%,12%{background:var(--hairline)}26%,70%{background:var(--accent)}
  86%,100%{background:var(--hairline)}}
.fl-a-check .bar{left:74px;top:12px;width:3px;height:23px;border-radius:2px;
  background:var(--accent);opacity:0}
.fl-node:hover .fl-a-check .bar,.fl-node:focus-within .fl-a-check .bar,
.fl-auto .fl-node.in .fl-a-check .bar{animation:fl-stop 2.6s var(--ease) infinite}
@keyframes fl-stop{0%,58%{opacity:0;transform:scaleY(.3)}
  72%,88%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(.3)}}

/* ── share: one row, three places it has to reach ───────────────────── */
.fl-a-share .hub{left:14px;top:18px;width:11px;height:11px;border-radius:50%;
  background:var(--accent)}
.fl-a-share .ray{left:28px;height:2px;border-radius:2px;background:var(--hairline);
  transform-origin:left;transform:scaleX(0)}
.fl-a-share .y1{top:11px;width:44px}
.fl-a-share .y2{top:23px;width:44px}
.fl-a-share .y3{top:35px;width:44px}
.fl-node:hover .fl-a-share .ray,.fl-node:focus-within .fl-a-share .ray,
.fl-auto .fl-node.in .fl-a-share .ray{animation:fl-ray 2.5s var(--ease) infinite}
.fl-a-share .y2{animation-delay:.16s}
.fl-a-share .y3{animation-delay:.32s}
@keyframes fl-ray{0%,10%{transform:scaleX(0);background:var(--hairline)}
  34%,72%{transform:scaleX(1);background:var(--accent)}
  92%,100%{transform:scaleX(0);background:var(--hairline)}}
.fl-a-share .dest{right:12px;width:13px;height:13px;border-radius:3px;
  border:1.6px solid var(--hairline);opacity:.4}
.fl-a-share .d1{top:5px}
.fl-a-share .d2{top:17px}
.fl-a-share .d3{top:29px}
.fl-node:hover .fl-a-share .dest,.fl-node:focus-within .fl-a-share .dest,
.fl-auto .fl-node.in .fl-a-share .dest{animation:fl-dest 2.5s var(--ease) infinite}
.fl-a-share .d2{animation-delay:.16s}
.fl-a-share .d3{animation-delay:.32s}
@keyframes fl-dest{0%,28%{opacity:.4;border-color:var(--hairline)}
  44%,76%{opacity:1;border-color:var(--accent)}100%{opacity:.4;border-color:var(--hairline)}}

/* ── remember: the trail walked back to where it started ────────────── */
.fl-a-trace .step{top:21px;width:7px;height:7px;border-radius:50%;background:var(--hairline)}
.fl-a-trace .s1{left:14px}
.fl-a-trace .s2{left:32px}
.fl-a-trace .s3{left:50px}
.fl-a-trace .s4{left:68px}
.fl-a-trace .s5{left:86px}
.fl-a-trace::after{content:"";position:absolute;left:17px;width:72px;top:24px;height:1px;
  background:var(--hairline)}
.fl-a-trace .walk{left:84px;top:17px;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--accent);opacity:0}
.fl-node:hover .fl-a-trace .walk,.fl-node:focus-within .fl-a-trace .walk,
.fl-auto .fl-node.in .fl-a-trace .walk{animation:fl-walk 2.8s var(--ease) infinite}
@keyframes fl-walk{0%{opacity:0;transform:translateX(0)}10%{opacity:1}
  70%{opacity:1;transform:translateX(-72px)}86%,100%{opacity:0;transform:translateX(-72px)}}
.fl-node:hover .fl-a-trace .step,.fl-node:focus-within .fl-a-trace .step,
.fl-auto .fl-node.in .fl-a-trace .step{animation:fl-lit2 2.8s var(--ease) infinite}
.fl-a-trace .s5{animation-delay:.1s}
.fl-a-trace .s4{animation-delay:.28s}
.fl-a-trace .s3{animation-delay:.46s}
.fl-a-trace .s2{animation-delay:.64s}
.fl-a-trace .s1{animation-delay:.82s}
@keyframes fl-lit2{0%,6%{background:var(--hairline)}18%,56%{background:var(--accent)}
  74%,100%{background:var(--hairline)}}

@media(prefers-reduced-motion:reduce){
  .fl-a-arrive .pkt,.fl-a-check .bar,.fl-a-tidy .edge{opacity:1}
  .fl-a-share .ray{transform:scaleX(1);background:var(--accent)}
  .fl-a-share .dest{opacity:1;border-color:var(--accent)}
  .fl-a-trace .step{background:var(--accent)}
  .fl-a-check .c{background:#2E9E6B}
  .fl-a-check .c4{background:var(--accent)}
}

/* ═══ business intelligence: one figure per capability ══════════════════ */

/* a dashboard assembling itself */
.ac .ca-dash .tile{left:0;top:0;width:64px;height:14px;border-radius:4px;
  background:var(--accent-tint);animation-name:cfade}
.ac .ca-dash .b{bottom:0;width:15px;border-radius:3px 3px 2px 2px;transform-origin:bottom;
  transform:scaleY(.1);animation-name:cgrow}
.ac .ca-dash .b1{left:2px;height:18px;animation-delay:.25s}
.ac .ca-dash .b2{left:24px;height:26px;animation-delay:.45s}
.ac .ca-dash .b3{left:46px;height:22px;animation-delay:.65s}
@keyframes cgrow{0%,6%{transform:scaleY(.1)}26%,76%{transform:scaleY(1)}
  92%,100%{transform:scaleY(.1)}}

/* three rival definitions collapsing into one */
.ac .ca-metric i{height:7px;border-radius:4px}
.ac .ca-metric .d1{left:0;top:2px;width:40px;background:var(--accent-tint);animation-name:cmerge}
.ac .ca-metric .d2{left:10px;top:14px;width:30px;background:var(--accent-tint);
  animation-name:cmerge;animation-delay:.1s}
.ac .ca-metric .d3{left:4px;top:26px;width:46px;background:var(--accent-tint);
  animation-name:cmerge;animation-delay:.2s}
@keyframes cmerge{0%,20%{opacity:1;transform:none}
  52%,100%{opacity:0;transform:translateY(14px) scaleX(.5)}}
.ac .ca-metric .one{left:0;top:34px;width:56px;height:10px;border-radius:5px;
  animation-name:cone}
@keyframes cone{0%,38%{opacity:0;transform:scaleX(.4)}
  56%,86%{opacity:1;transform:none}100%{opacity:0;transform:scaleX(.4)}}

/* a filter is dragged and the chart answers */
.ac .ca-selfserve .track{left:0;top:4px;width:64px;height:5px;border-radius:3px;
  background:var(--accent-tint);animation:none}
.ac .ca-selfserve .knob{left:0;top:0;width:13px;height:13px;border-radius:50%;
  animation-name:cknob}
@keyframes cknob{0%,8%{transform:translateX(0)}44%,66%{transform:translateX(51px)}
  96%,100%{transform:translateX(0)}}
.ac .ca-selfserve .r1{left:0;bottom:4px;width:34px;height:9px;border-radius:5px;
  background:var(--accent-tint);transform-origin:left;animation-name:cresp}
.ac .ca-selfserve .r2{left:0;bottom:18px;width:52px;height:9px;border-radius:5px;
  transform-origin:left;animation-name:cresp;animation-delay:.12s}
@keyframes cresp{0%,30%{transform:scaleX(.45)}52%,78%{transform:scaleX(1)}
  96%,100%{transform:scaleX(.45)}}

/* the same report, with the rows this viewer may not open withheld */
.ac .ca-governed .g{left:0;height:9px;border-radius:5px;background:var(--accent-tint)}
.ac .ca-governed .g1{top:2px;width:58px;animation-name:cfade}
.ac .ca-governed .g2{top:18px;width:46px;animation-name:chide;animation-delay:.3s}
.ac .ca-governed .g3{top:34px;width:52px;animation-name:cfade;animation-delay:.6s}
@keyframes chide{0%,18%{opacity:1;width:46px;background:var(--accent-tint)}
  40%,78%{opacity:.35;width:16px;background:var(--hairline)}
  96%,100%{opacity:1;width:46px;background:var(--accent-tint)}}
.ac .ca-governed .lock{right:0;top:15px;width:11px;height:12px;border-radius:2px;
  background:none;border:2px solid var(--accent);animation-name:clock}
@keyframes clock{0%,30%{opacity:0;transform:scale(.5)}48%,80%{opacity:1;transform:none}
  100%{opacity:0;transform:scale(.5)}}

/* reporting living inside your own product */
.ac .ca-embed .frame{left:0;top:0;width:64px;height:46px;border-radius:5px;background:none;
  border:2px solid var(--accent-tint);animation:none}
.ac .ca-embed .in1{left:8px;bottom:9px;width:16px;height:16px;border-radius:3px;
  transform-origin:bottom;animation-name:cgrow;animation-delay:.2s}
.ac .ca-embed .in2{left:30px;bottom:9px;width:26px;height:26px;border-radius:3px;
  background:var(--accent-tint);transform-origin:bottom;animation-name:cgrow;
  animation-delay:.4s}

/* more people, the same licence cost */
.ac .ca-oss .cost{left:0;bottom:0;width:64px;height:5px;border-radius:3px;
  background:var(--accent-tint);animation:none}
.ac .ca-oss .p{top:8px;width:11px;height:11px;border-radius:50%;animation-name:cpop}
.ac .ca-oss .p1{left:2px}
.ac .ca-oss .p2{left:19px;animation-delay:.25s}
.ac .ca-oss .p3{left:36px;animation-delay:.5s}
.ac .ca-oss .p4{left:53px;animation-delay:.75s}
@keyframes cpop{0%,6%{opacity:0;transform:scale(.3)}22%,78%{opacity:1;transform:none}
  94%,100%{opacity:0;transform:scale(.3)}}

/* ═══ product engineering: one figure per capability ════════════════════ */

/* one platform, several customers kept apart */
.ac .ca-tenant .core{left:0;top:17px;width:16px;height:12px;border-radius:3px}
.ac .ca-tenant .t{right:0;width:24px;height:10px;border-radius:5px;background:var(--accent-tint);
  animation-name:cfade}
.ac .ca-tenant .t1{top:2px}
.ac .ca-tenant .t2{top:18px;animation-delay:.3s}
.ac .ca-tenant .t3{top:34px;animation-delay:.6s}

/* one documented contract, several things consuming it */
.ac .ca-apifirst .spec{left:0;top:0;width:22px;height:46px;border-radius:4px;
  background:var(--accent-tint);animation:none}
.ac .ca-apifirst .c{right:0;width:28px;height:9px;border-radius:5px;transform-origin:left;
  animation-name:cresp}
.ac .ca-apifirst .c1{top:5px}
.ac .ca-apifirst .c2{top:19px;animation-delay:.18s}
.ac .ca-apifirst .c3{top:33px;animation-delay:.36s}

/* the smallest honest version, then widened */
.ac .ca-mvp .seed{left:26px;top:17px;width:12px;height:12px;border-radius:50%;animation-name:cpop}
.ac .ca-mvp .ring{left:18px;top:9px;width:28px;height:28px;border-radius:50%;background:none;
  border:2px solid var(--accent);opacity:0;animation-name:cring}
.ac .ca-mvp .r2{animation-delay:.9s}
@keyframes cring{0%{opacity:.8;transform:scale(.5)}70%,100%{opacity:0;transform:scale(1.5)}}

/* the old system replaced one piece at a time */
.ac .ca-strangle .old{left:0;top:0;width:64px;height:46px;border-radius:5px;
  background:var(--accent-tint);animation:none}
.ac .ca-strangle .n{left:4px;width:56px;height:12px;border-radius:3px;animation-name:creplace}
.ac .ca-strangle .n1{top:3px}
.ac .ca-strangle .n2{top:17px;animation-delay:.5s}
.ac .ca-strangle .n3{top:31px;animation-delay:1s}
@keyframes creplace{0%,8%{opacity:0;transform:translateX(-12px)}
  24%,76%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateX(-12px)}}

/* work handed to a queue instead of waiting on a call */
.ac .ca-events .pub{left:0;top:17px;width:12px;height:12px;border-radius:3px}
.ac .ca-events .q{left:18px;top:19px;width:46px;height:8px;border-radius:4px;
  background:var(--accent-tint);animation:none}
.ac .ca-events .ev{left:18px;top:20px;width:6px;height:6px;border-radius:2px;animation-name:cqueue}
.ac .ca-events .e2{animation-delay:.4s}
.ac .ca-events .e3{animation-delay:.8s}
@keyframes cqueue{0%{opacity:0;transform:translateX(0)}12%{opacity:1}
  70%{opacity:1;transform:translateX(38px)}82%,100%{opacity:0;transform:translateX(38px)}}

/* a locked boundary with a trail of who did what */
.ac .ca-audit .wall{left:0;top:0;width:5px;height:46px;border-radius:3px;animation:none}
.ac .ca-audit .a{left:13px;height:8px;border-radius:4px;background:var(--accent-tint);
  animation-name:cstamp}
.ac .ca-audit .a1{top:3px;width:44px}
.ac .ca-audit .a2{top:19px;width:34px;animation-delay:.3s}
.ac .ca-audit .a3{top:35px;width:50px;animation-delay:.6s}
@keyframes cstamp{0%,10%{opacity:.3;transform:translateX(-6px)}
  26%,76%{opacity:1;transform:none;background:var(--accent)}
  92%,100%{opacity:.3;transform:translateX(-6px)}}

/* ═══ the product pipeline: one scene per step ══════════════════════════ */

/* shape: the idea tested from three directions before anything is built */
.fl-a-shape .idea{left:14px;top:17px;width:13px;height:13px;border-radius:50%;
  background:var(--accent)}
.fl-a-shape .probe{left:32px;height:3px;border-radius:2px;background:var(--hairline);
  transform-origin:left;transform:scaleX(0)}
.fl-a-shape .p1{top:12px;width:32px}
.fl-a-shape .p2{top:22px;width:40px}
.fl-a-shape .p3{top:32px;width:26px}
.fl-node:hover .fl-a-shape .probe,.fl-node:focus-within .fl-a-shape .probe,
.fl-auto .fl-node.in .fl-a-shape .probe{animation:fl-probe 2.6s var(--ease) infinite}
.fl-a-shape .p2{animation-delay:.14s}
.fl-a-shape .p3{animation-delay:.28s}
@keyframes fl-probe{0%,10%{transform:scaleX(0);background:var(--hairline)}
  36%,64%{transform:scaleX(1);background:var(--accent)}
  88%,100%{transform:scaleX(0);background:var(--hairline)}}
.fl-a-shape .keep{right:12px;top:16px;width:14px;height:14px;border-radius:4px;
  border:2px solid var(--accent);opacity:0}
.fl-node:hover .fl-a-shape .keep,.fl-node:focus-within .fl-a-shape .keep,
.fl-auto .fl-node.in .fl-a-shape .keep{animation:fl-pop 2.6s var(--ease) infinite}

/* slice: one narrow path taken all the way to production */
.fl-a-slice .stack{left:12px;top:8px;width:34px;height:30px;border-radius:4px;
  background:var(--hairline);opacity:.5}
.fl-a-slice .lane{left:12px;top:19px;width:34px;height:8px;border-radius:3px;
  background:var(--accent);opacity:0}
.fl-node:hover .fl-a-slice .lane,.fl-node:focus-within .fl-a-slice .lane,
.fl-auto .fl-node.in .fl-a-slice .lane{animation:fl-lane 2.5s var(--ease) infinite}
@keyframes fl-lane{0%,12%{opacity:0}30%,72%{opacity:1}92%,100%{opacity:0}}
.fl-a-slice .cut{left:50px;top:21px;width:22px;height:3px;border-radius:2px;
  background:var(--hairline);transform-origin:left;transform:scaleX(0)}
.fl-node:hover .fl-a-slice .cut,.fl-node:focus-within .fl-a-slice .cut,
.fl-auto .fl-node.in .fl-a-slice .cut{animation:fl-probe 2.5s var(--ease) .25s infinite}
.fl-a-slice .prod{right:12px;top:14px;width:16px;height:18px;border-radius:4px;
  border:1.8px solid var(--hairline)}
.fl-node:hover .fl-a-slice .prod,.fl-node:focus-within .fl-a-slice .prod,
.fl-auto .fl-node.in .fl-a-slice .prod{animation:fl-sys 2.5s var(--ease) infinite}

/* tenancy: several customers on one platform, kept apart */
.fl-a-tenancy .plat{left:12px;right:34px;bottom:10px;height:5px;border-radius:3px;
  background:var(--hairline)}
.fl-a-tenancy .cell{bottom:17px;width:17px;border-radius:3px 3px 0 0;
  background:var(--accent-tint);border:1px solid var(--hairline);transform-origin:bottom;
  transform:scaleY(.4)}
.fl-a-tenancy .c1{left:13px;height:14px}
.fl-a-tenancy .c2{left:33px;height:20px}
.fl-a-tenancy .c3{left:53px;height:17px}
.fl-node:hover .fl-a-tenancy .cell,.fl-node:focus-within .fl-a-tenancy .cell,
.fl-auto .fl-node.in .fl-a-tenancy .cell{animation:fl-cell 2.6s var(--ease) infinite}
.fl-a-tenancy .c2{animation-delay:.16s}
.fl-a-tenancy .c3{animation-delay:.32s}
@keyframes fl-cell{0%,10%{transform:scaleY(.4);background:var(--accent-tint)}
  34%,72%{transform:scaleY(1);background:var(--accent)}
  92%,100%{transform:scaleY(.4);background:var(--accent-tint)}}
.fl-a-tenancy .key{right:12px;top:16px;width:13px;height:14px;border-radius:3px;
  border:1.8px solid var(--text-3)}
.fl-a-tenancy .key::before{content:"";position:absolute;left:2.5px;top:-5px;width:6px;height:6px;
  border:1.8px solid var(--text-3);border-bottom:0;border-radius:4px 4px 0 0}

/* scale: capacity added where the load turned out to be */
.fl-a-scale .load{left:12px;right:12px;top:10px;height:3px;border-radius:2px;
  background:var(--hairline)}
.fl-a-scale .node{bottom:11px;width:11px;height:11px;border-radius:3px;
  background:var(--hairline)}
.fl-a-scale .n1{left:14px}
.fl-a-scale .n2{left:31px}
.fl-a-scale .n3{left:48px}
.fl-a-scale .n4{left:65px}
.fl-node:hover .fl-a-scale .node,.fl-node:focus-within .fl-a-scale .node,
.fl-auto .fl-node.in .fl-a-scale .node{animation:fl-add 2.6s var(--ease) infinite}
.fl-a-scale .n2{animation-delay:.2s}
.fl-a-scale .n3{animation-delay:.4s}
.fl-a-scale .n4{animation-delay:.6s}
@keyframes fl-add{0%,8%{opacity:.5;transform:scale(.72);background:var(--hairline)}
  28%,74%{opacity:1;transform:none;background:var(--accent)}
  92%,100%{opacity:.5;transform:scale(.72);background:var(--hairline)}}

/* hand over: the reasoning written down and passed on */
.fl-a-handover .doc{left:13px;top:8px;width:26px;height:31px;border-radius:4px;
  background:var(--bg);border:1.6px solid var(--hairline)}
.fl-a-handover .ln{left:18px;height:3px;border-radius:2px;background:var(--hairline);
  transform-origin:left;transform:scaleX(0)}
.fl-a-handover .l1{top:14px;width:16px}
.fl-a-handover .l2{top:21px;width:12px}
.fl-a-handover .l3{top:28px;width:15px}
.fl-node:hover .fl-a-handover .ln,.fl-node:focus-within .fl-a-handover .ln,
.fl-auto .fl-node.in .fl-a-handover .ln{animation:fl-probe 2.7s var(--ease) infinite}
.fl-a-handover .l2{animation-delay:.16s}
.fl-a-handover .l3{animation-delay:.32s}
.fl-a-handover .hand{right:14px;top:16px;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--text-3);opacity:.3}
.fl-node:hover .fl-a-handover .hand,.fl-node:focus-within .fl-a-handover .hand,
.fl-auto .fl-node.in .fl-a-handover .hand{animation:fl-person 2.7s var(--ease) infinite}

@media(prefers-reduced-motion:reduce){
  .fl-a-shape .probe,.fl-a-slice .cut,.fl-a-handover .ln{transform:scaleX(1);background:var(--accent)}
  .fl-a-shape .keep,.fl-a-slice .lane{opacity:1}
  .fl-a-tenancy .cell{transform:scaleY(1)}
  .fl-a-scale .node{opacity:1;background:var(--accent)}
  .fl-a-handover .hand{opacity:1;border-color:var(--accent)}
}

/* ═══ data engineering: one figure per capability ═══════════════════════ */

/* three systems emptied into one tray */
.ac .ca-pull .s{left:0;width:14px;height:11px;border-radius:3px;background:var(--accent-tint);
  animation-name:cfade}
.ac .ca-pull .s1{top:1px}
.ac .ca-pull .s2{top:17px;animation-delay:.2s}
.ac .ca-pull .s3{top:33px;animation-delay:.4s}
.ac .ca-pull .tray{right:0;top:8px;width:16px;height:30px;border-radius:4px;background:none;
  border:2px solid var(--accent-tint);animation-name:ctray}
@keyframes ctray{0%,44%{border-color:var(--accent-tint)}60%,86%{border-color:var(--accent)}
  100%{border-color:var(--accent-tint)}}
.ac .ca-pull .pk{left:18px;width:7px;height:7px;border-radius:2px;animation-name:cfly}
.ac .ca-pull .p1{top:8px}
.ac .ca-pull .p2{top:30px;animation-delay:.45s}
@keyframes cfly{0%{opacity:0;transform:translate(0,0)}14%{opacity:1}
  54%{opacity:1;transform:translate(24px,8px)}66%,100%{opacity:0;transform:translate(24px,8px)}}

/* scattered extracts gathered into one store */
.ac .ca-store .bit{width:11px;height:9px;border-radius:2px;background:var(--accent-tint);
  animation-name:cgather}
.ac .ca-store .b1{left:0;top:2px}
.ac .ca-store .b2{left:4px;top:33px;animation-delay:.14s}
.ac .ca-store .b3{left:16px;top:18px;animation-delay:.28s}
@keyframes cgather{0%,16%{opacity:1;transform:none}
  50%,100%{opacity:0;transform:translateX(34px)}}
.ac .ca-store .silo{right:6px;top:4px;width:22px;height:38px;border-radius:5px;
  animation-name:csilo}
@keyframes csilo{0%,24%{opacity:.3;transform:scaleY(.6)}
  54%,84%{opacity:1;transform:none}100%{opacity:.3;transform:scaleY(.6)}}

/* three spellings snapping to one edge */
.ac .ca-agree .v{height:8px;border-radius:4px;background:var(--accent-tint);animation-name:calign}
.ac .ca-agree .v1{left:16px;top:3px;width:44px;--ca-dx:-16px}
.ac .ca-agree .v2{left:26px;top:19px;width:34px;--ca-dx:-26px}
.ac .ca-agree .v3{left:8px;top:35px;width:50px;--ca-dx:-8px}
.ac .ca-agree .v2{animation-delay:.12s}
.ac .ca-agree .v3{animation-delay:.24s}
@keyframes calign{0%,18%{transform:none;background:var(--accent-tint)}
  46%,76%{transform:translateX(var(--ca-dx,0));background:var(--accent)}
  96%,100%{transform:none;background:var(--accent-tint)}}
.ac .ca-agree .edge{left:0;top:0;width:3px;height:46px;border-radius:2px;animation-name:cfade;
  animation-delay:.3s}

/* a gate that holds one row back */
.ac .ca-gate .bar{left:34px;top:0;width:3px;height:46px;border-radius:2px;
  background:var(--accent-tint);animation:none}
.ac .ca-gate .ok{left:0;width:10px;height:10px;border-radius:2px;animation-name:cthru}
.ac .ca-gate .o1{top:4px}
.ac .ca-gate .o2{top:18px;animation-delay:.3s}
@keyframes cthru{0%{opacity:0;transform:translateX(0)}14%{opacity:1}
  62%{opacity:1;transform:translateX(50px)}76%,100%{opacity:0;transform:translateX(50px)}}
.ac .ca-gate .bad{left:0;top:32px;width:10px;height:10px;border-radius:2px;
  background:var(--accent-tint);animation-name:cbounce}
@keyframes cbounce{0%{opacity:0;transform:translateX(0)}14%{opacity:1}
  46%{transform:translateX(22px);background:var(--accent-tint)}
  64%,86%{transform:translateX(6px);background:var(--accent)}
  100%{opacity:0;transform:translateX(0)}}

/* it runs, it retries, and it says so when it cannot */
.ac .ca-cron .track{left:0;top:19px;width:64px;height:8px;border-radius:4px;
  background:var(--accent-tint);animation:none}
.ac .ca-cron .fill{left:0;top:19px;width:64px;height:8px;border-radius:4px;
  transform-origin:left;animation-name:crun}
@keyframes crun{0%{transform:scaleX(0)}42%{transform:scaleX(1)}
  50%{transform:scaleX(0)}92%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.ac .ca-cron .alert{left:28px;top:2px;width:9px;height:9px;border-radius:50%;
  animation-name:cpop;animation-delay:.9s}

/* a figure walked back to where it started */
.ac .ca-trail .d{top:19px;width:8px;height:8px;border-radius:50%;background:var(--accent-tint);
  animation-name:cback}
.ac .ca-trail .d1{left:0;animation-delay:.75s}
.ac .ca-trail .d2{left:14px;animation-delay:.5s}
.ac .ca-trail .d3{left:28px;animation-delay:.25s}
.ac .ca-trail .d4{left:42px}
@keyframes cback{0%,6%{background:var(--accent-tint);transform:none}
  22%,62%{background:var(--accent);transform:scale(1.3)}
  80%,100%{background:var(--accent-tint);transform:none}}
.ac .ca-trail .num{right:0;top:14px;width:18px;height:18px;border-radius:4px;animation-name:cfade}

/* ═══ data analytics: one figure per capability ═════════════════════════ */

/* a cohort thinning out month by month */
.ac .ca-cohort .col{bottom:0;width:9px;border-radius:3px 3px 2px 2px;background:var(--accent);
  transform-origin:bottom;transform:scaleY(.1);animation-name:cgrow}
.ac .ca-cohort .c1{left:0;height:44px}
.ac .ca-cohort .c2{left:14px;height:34px;animation-delay:.12s}
.ac .ca-cohort .c3{left:28px;height:25px;animation-delay:.24s;background:var(--accent-tint)}
.ac .ca-cohort .c4{left:42px;height:18px;animation-delay:.36s;background:var(--accent-tint)}
.ac .ca-cohort .c5{left:56px;height:12px;animation-delay:.48s;background:var(--accent-tint)}

/* what is known, and the part that is a projection */
.ac .ca-forecast .k{bottom:6px;width:9px;border-radius:2px;background:var(--accent);
  transform-origin:bottom;transform:scaleY(.1);animation-name:cgrow}
.ac .ca-forecast .k1{left:0;height:16px}
.ac .ca-forecast .k2{left:13px;height:24px;animation-delay:.12s}
.ac .ca-forecast .k3{left:26px;height:20px;animation-delay:.24s}
.ac .ca-forecast .fan{left:38px;bottom:4px;width:26px;height:30px;border-radius:3px;
  background:var(--accent-tint);transform-origin:left;transform:scaleX(.1);
  animation-name:cfan}
@keyframes cfan{0%,28%{opacity:0;transform:scaleX(.1)}
  52%,80%{opacity:1;transform:none}98%,100%{opacity:0;transform:scaleX(.1)}}
.ac .ca-forecast .proj{left:38px;bottom:16px;width:26px;height:3px;border-radius:2px;
  transform-origin:left;transform:scaleX(0);animation-name:cline}
@keyframes cline{0%,30%{transform:scaleX(0)}54%,82%{transform:scaleX(1)}
  100%{transform:scaleX(0)}}

/* two variants run, one wins */
.ac .ca-abtest .va,.ac .ca-abtest .vb{bottom:0;width:22px;border-radius:4px 4px 2px 2px;
  transform-origin:bottom;transform:scaleY(.15)}
.ac .ca-abtest .va{left:4px;height:26px;background:var(--accent-tint);animation-name:cgrow}
.ac .ca-abtest .vb{left:36px;height:40px;animation-name:cgrow;animation-delay:.25s}
.ac .ca-abtest .win{left:38px;top:0;width:18px;height:9px;border-radius:5px;animation-name:cpop;
  animation-delay:.8s}

/* what is left after cost to serve */
.ac .ca-margin .gross{left:0;top:6px;width:64px;height:13px;border-radius:5px;
  background:var(--accent-tint);animation:none}
.ac .ca-margin .cost{left:0;top:27px;width:40px;height:13px;border-radius:5px;
  background:var(--hairline);transform-origin:left;transform:scaleX(0);animation-name:cline}
.ac .ca-margin .net{right:0;top:27px;width:22px;height:13px;border-radius:5px;
  animation-name:cnet}
@keyframes cnet{0%,34%{opacity:0;transform:scaleX(.3)}56%,84%{opacity:1;transform:none}
  100%{opacity:0;transform:scaleX(.3)}}

/* a definition committed once, then reused */
.ac .ca-anereng .def{left:0;top:2px;width:50px;height:12px;border-radius:4px;
  background:var(--accent-tint);animation-name:cfade}
.ac .ca-anereng .ver{left:6px;height:9px;border-radius:4px;background:var(--accent);
  transform-origin:left;transform:scaleX(0);animation-name:cline}
.ac .ca-anereng .v1{top:20px;width:44px;animation-delay:.3s}
.ac .ca-anereng .v2{top:34px;width:34px;animation-delay:.5s}
.ac .ca-anereng .stamp{right:0;top:0;width:12px;height:12px;border-radius:3px;
  animation-name:cpop;animation-delay:.15s}

/* one question, one answer */
.ac .ca-adhoc .lens{left:2px;top:14px;width:17px;height:17px;border-radius:50%;background:none;
  border:2.5px solid var(--accent);animation-name:clook}
@keyframes clook{0%,10%{transform:translate(0,0)}42%,58%{transform:translate(26px,-6px)}
  90%,100%{transform:translate(0,0)}}
.ac .ca-adhoc .sweep{left:0;top:0;width:64px;height:46px;border-radius:5px;background:none;
  border:1.5px dashed var(--accent-tint);animation:none}
.ac .ca-adhoc .ans{right:2px;bottom:4px;width:26px;height:11px;border-radius:5px;
  animation-name:cpop;animation-delay:.75s}

/* A band that sits between two full sections — half the rhythm, still equal
   top and bottom. */
.sec-tight{padding-block:calc(var(--sec-pad) * .5)}

/* ═══ scrolling cost ════════════════════════════════════════════════════
   This used to carry `content-visibility:auto` on every section, which tells
   the browser not to render anything off screen. It measured well and read
   badly: on a fast scroll the browser cannot rasterise a section in the time
   it takes to reach the viewport, so you scroll into a white band and watch
   the section appear. A page that is honest about its height and paints what
   you are looking at beats a page that is cheap to scroll and blank.

   What is kept is the part that cost nothing to look at: `contain` on the
   figures, so a looping animation inside a card cannot force layout on
   anything outside it, and the .vis observer in site.js, which stops the
   looping decorations while their section is off screen. */
.ac .ca,.fl-anim,.split-scene,.dm-screen{contain:layout paint style}

/* the marquee and the testimonial rail only need to move while on screen */
@media(prefers-reduced-motion:no-preference){
  .mq-track,.tst{will-change:auto}
}

/* Paused until the section is near the viewport — see the observer in
   site.js. `.anim-all` is the no-IntersectionObserver fallback: everything
   runs, exactly as it did before. */
main > section:not(.vis) .ca i,
main > section:not(.vis) .fl-anim *,
main > section:not(.vis) .orb,
main > section:not(.vis) .hero-mesh,
main > section:not(.vis) .dk-chip,
main > section:not(.vis) .dk-ring,
main > section:not(.vis) .dm-live::before,
main > section:not(.vis) .fl-dot::after,
main > section:not(.vis) .pp-wire i,
main > section:not(.vis) .ch-typing i,
main > section:not(.vis) .an-caret,
footer:not(.vis) .mq-track{animation-play-state:paused}

/* Images are not draggable and do not raise the long-press save sheet.
   Text stays selectable — a visitor copying your phone number is a customer,
   not a thief. See assets/js/protect.js for what this does and does not do. */
img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}

/* ═══ web development: one figure per capability ════════════════════════ */

/* a page assembled from parts */
.ac .ca-webapp .bar{left:0;top:0;width:64px;height:10px;border-radius:4px;
  background:var(--accent-tint);animation-name:cfade}
.ac .ca-webapp .col{top:15px;height:22px;border-radius:4px;animation-name:cgrowy}
.ac .ca-webapp .l{left:0;width:26px;background:var(--accent-tint);animation-delay:.2s}
.ac .ca-webapp .r{left:31px;width:33px;animation-delay:.38s}
@keyframes cgrowy{0%,8%{opacity:0;transform:translateY(6px)}
  26%,76%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(6px)}}
.ac .ca-webapp .foot{left:0;bottom:0;width:64px;height:7px;border-radius:4px;
  background:var(--accent-tint);animation-name:cfade;animation-delay:.56s}

/* two systems agreeing on one contract */
.ac .ca-apilink .a{left:0;top:15px;width:16px;height:16px;border-radius:4px}
.ac .ca-apilink .b{right:0;top:15px;width:16px;height:16px;border-radius:4px;
  background:var(--accent-tint)}
.ac .ca-apilink .wire{left:18px;right:18px;top:22px;height:2px;border-radius:2px;
  background:var(--accent-tint);animation:none}
.ac .ca-apilink .pk{left:18px;top:18px;width:9px;height:9px;border-radius:2px;
  animation-name:cshuttle}
@keyframes cshuttle{0%{opacity:0;transform:translateX(0)}12%{opacity:1}
  46%{opacity:1;transform:translateX(28px)}52%{opacity:1;transform:translateX(28px)}
  86%{opacity:1;transform:translateX(0)}100%{opacity:0}}

/* a payment authorised */
.ac .ca-pay .card{left:0;top:8px;width:44px;height:29px;border-radius:5px;
  background:var(--accent-tint);animation:none}
.ac .ca-pay .mag{left:0;top:16px;width:44px;height:6px;border-radius:0;
  animation-name:cfade}
.ac .ca-pay .ok{right:0;top:14px;width:16px;height:16px;border-radius:50%;
  animation-name:cpop;animation-delay:.5s}

/* separate systems joined into one */
.ac .ca-unify .s{left:0;width:14px;height:11px;border-radius:3px;
  background:var(--accent-tint);animation-name:cjoin}
.ac .ca-unify .s1{top:1px}
.ac .ca-unify .s2{top:18px;animation-delay:.14s}
.ac .ca-unify .s3{top:35px;animation-delay:.28s}
@keyframes cjoin{0%,14%{opacity:1;transform:none}
  48%,100%{opacity:0;transform:translate(34px,0)}}
.ac .ca-unify .hub{right:2px;top:12px;width:22px;height:22px;border-radius:6px;
  animation-name:csilo}

/* one platform, many tenants */
.ac .ca-saas .cloud{left:16px;top:2px;width:32px;height:15px;border-radius:8px;
  background:var(--accent-tint);animation-name:cfade}
.ac .ca-saas .u{bottom:2px;width:13px;height:13px;border-radius:50%;animation-name:cpop}
.ac .ca-saas .u1{left:6px}
.ac .ca-saas .u2{left:26px;animation-delay:.22s}
.ac .ca-saas .u3{left:46px;animation-delay:.44s}

/* an existing build measured and lifted */
.ac .ca-uplift .base{left:0;bottom:0;width:26px;height:16px;border-radius:4px 4px 2px 2px;
  background:var(--accent-tint);animation:none}
.ac .ca-uplift .gain{left:32px;bottom:0;width:26px;height:40px;border-radius:4px 4px 2px 2px;
  transform-origin:bottom;transform:scaleY(.15);animation-name:cgrow;animation-delay:.2s}
.ac .ca-uplift .probe{left:0;top:2px;width:58px;height:3px;border-radius:2px;
  transform-origin:left;transform:scaleX(0);animation-name:cline}

/* content written once, read by several front ends */
.ac .ca-headless .store{left:0;top:13px;width:18px;height:20px;border-radius:4px}
.ac .ca-headless .out{right:0;width:26px;height:10px;border-radius:5px;
  background:var(--accent-tint);transform-origin:left;animation-name:cresp}
.ac .ca-headless .o1{top:3px}
.ac .ca-headless .o2{top:18px;animation-delay:.16s}
.ac .ca-headless .o3{top:33px;animation-delay:.32s}

/* ═══ the web pipeline: one scene per step ══════════════════════════════ */

/* content model: fields and relationships agreed first */
.fl-a-model .t{left:14px;height:7px;border-radius:4px;background:var(--hairline)}
.fl-a-model .t1{top:9px;width:38%}
.fl-a-model .t2{top:20px;width:52%}
.fl-a-model .t3{top:31px;width:44%}
.fl-node:hover .fl-a-model .t,.fl-node:focus-within .fl-a-model .t,
.fl-auto .fl-node.in .fl-a-model .t{animation:fl-hit 2.5s var(--ease) infinite}
.fl-a-model .t2{animation-delay:.14s}
.fl-a-model .t3{animation-delay:.28s}
.fl-a-model .rel{right:14px;top:13px;width:2px;height:20px;border-radius:2px;
  background:var(--accent);opacity:0}
.fl-node:hover .fl-a-model .rel,.fl-node:focus-within .fl-a-model .rel,
.fl-auto .fl-node.in .fl-a-model .rel{animation:fl-pop 2.5s var(--ease) infinite}

/* cms: somebody edits, with a preview beside it */
.fl-a-cms .pane{left:12px;top:8px;width:40px;height:30px;border-radius:4px;
  background:var(--bg);border:1.4px solid var(--hairline)}
.fl-a-cms .ln{left:17px;height:3px;border-radius:2px;background:var(--hairline);
  transform-origin:left;transform:scaleX(0)}
.fl-a-cms .e1{top:16px;width:26px}
.fl-a-cms .e2{top:24px;width:18px}
.fl-node:hover .fl-a-cms .ln,.fl-node:focus-within .fl-a-cms .ln,
.fl-auto .fl-node.in .fl-a-cms .ln{animation:fl-probe 2.6s var(--ease) infinite}
.fl-a-cms .e2{animation-delay:.2s}
.fl-a-cms .cursor{left:44px;top:15px;width:2px;height:10px;background:var(--accent);opacity:0}
.fl-node:hover .fl-a-cms .cursor,.fl-node:focus-within .fl-a-cms .cursor,
.fl-auto .fl-node.in .fl-a-cms .cursor{animation:fl-pop 2.6s var(--ease) infinite}
.fl-a-cms .prev{right:12px;top:10px;width:22px;height:26px;border-radius:4px;
  border:1.6px solid var(--hairline)}
.fl-node:hover .fl-a-cms .prev,.fl-node:focus-within .fl-a-cms .prev,
.fl-auto .fl-node.in .fl-a-cms .prev{animation:fl-sys 2.6s var(--ease) infinite}

/* api: one surface, three consumers */
.fl-a-api .spec{left:14px;top:9px;width:14px;height:28px;border-radius:4px;
  background:var(--hairline)}
.fl-a-api .ray{left:32px;right:16px;height:3px;border-radius:2px;background:var(--hairline);
  transform-origin:left;transform:scaleX(0)}
.fl-a-api .y1{top:11px}
.fl-a-api .y2{top:22px}
.fl-a-api .y3{top:33px}
.fl-node:hover .fl-a-api .ray,.fl-node:focus-within .fl-a-api .ray,
.fl-auto .fl-node.in .fl-a-api .ray{animation:fl-probe 2.5s var(--ease) infinite}
.fl-a-api .y2{animation-delay:.14s}
.fl-a-api .y3{animation-delay:.28s}

/* render: the page paints, and the gauge says how fast */
.fl-a-render .shell{left:12px;top:8px;width:38px;height:30px;border-radius:4px;
  border:1.4px solid var(--hairline)}
.fl-a-render .blk{left:17px;border-radius:3px;background:var(--hairline);opacity:0}
.fl-a-render .b1{top:13px;width:28px;height:8px}
.fl-a-render .b2{top:25px;width:20px;height:6px}
.fl-node:hover .fl-a-render .blk,.fl-node:focus-within .fl-a-render .blk,
.fl-auto .fl-node.in .fl-a-render .blk{animation:fl-pop 2.4s var(--ease) infinite}
.fl-a-render .b2{animation-delay:.16s}
.fl-a-render .gauge{right:13px;top:15px;width:16px;height:16px;border-radius:50%;
  border:2.5px solid var(--hairline);border-top-color:var(--accent)}
.fl-node:hover .fl-a-render .gauge,.fl-node:focus-within .fl-a-render .gauge,
.fl-auto .fl-node.in .fl-a-render .gauge{animation:fl-spin 2.4s var(--ease) infinite}
@keyframes fl-spin{0%{transform:rotate(0)}60%,100%{transform:rotate(300deg)}}

/* measure: the numbers that say what to fix next */
.fl-a-measure .col{bottom:10px;width:9px;border-radius:3px 3px 2px 2px;
  background:var(--hairline);transform-origin:bottom;transform:scaleY(.2)}
.fl-a-measure .c1{left:16px;height:14px}
.fl-a-measure .c2{left:30px;height:22px}
.fl-a-measure .c3{left:44px;height:17px}
.fl-a-measure .c4{left:58px;height:26px}
.fl-node:hover .fl-a-measure .col,.fl-node:focus-within .fl-a-measure .col,
.fl-auto .fl-node.in .fl-a-measure .col{animation:fl-cell 2.6s var(--ease) infinite}
.fl-a-measure .c2{animation-delay:.12s}
.fl-a-measure .c3{animation-delay:.24s}
.fl-a-measure .c4{animation-delay:.36s}
.fl-a-measure .mark{left:14px;right:14px;top:9px;height:2px;border-radius:2px;
  background:var(--accent);opacity:0}
.fl-node:hover .fl-a-measure .mark,.fl-node:focus-within .fl-a-measure .mark,
.fl-auto .fl-node.in .fl-a-measure .mark{animation:fl-pop 2.6s var(--ease) infinite}

@media(prefers-reduced-motion:reduce){
  .fl-a-model .rel,.fl-a-cms .cursor,.fl-a-render .blk,.fl-a-measure .mark{opacity:1}
  .fl-a-cms .ln,.fl-a-api .ray{transform:scaleX(1);background:var(--accent)}
  .fl-a-measure .col{transform:scaleY(1)}
}

/* ═══ split scenes — a drawing where a photograph used to be ════════════
   Each one shows what the paragraph beside it is describing. They loop, and
   the observer in site.js stops them when the section is off screen. Every
   child is absolutely placed inside the box, so nothing can escape it. */
.split-scene{position:relative;display:block;margin:0;aspect-ratio:4/3;
  border-radius:var(--r);background:var(--bg-alt);border:1px solid var(--hairline);
  overflow:hidden}
.split-scene i,.split-scene b,.split-scene s,.split-scene u,.split-scene em{
  position:absolute;display:block;padding:0;margin:0;border:0;box-sizing:border-box;
  text-decoration:none;font-style:normal;font-weight:400}
.split-scene u{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap;line-height:1}

/* shared beats, so the seven scenes stay one family */
@keyframes sp-lightup{0%,20%{border-color:var(--hairline);background:var(--card)}
  40%,72%{border-color:var(--accent);background:var(--accent-tint)}
  92%,100%{border-color:var(--hairline);background:var(--card)}}
@keyframes sp-node{0%,10%{border-color:var(--hairline);background:var(--card)}
  26%,74%{border-color:var(--accent);background:var(--accent)}
  92%,100%{border-color:var(--hairline);background:var(--card)}}
@keyframes sp-ink{0%,16%{background:var(--hairline)}34%,74%{background:var(--accent)}
  92%,100%{background:var(--hairline)}}
@keyframes sp-rise{0%{opacity:0;transform:translateY(8px)}
  20%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes sp-grow{0%,12%{transform:scaleX(.18);opacity:.4}
  30%,78%{transform:scaleX(1);opacity:1}94%,100%{transform:scaleX(.18);opacity:.4}}

/* ── one codebase, two stores ───────────────────────────────────────── */
.sp-crossplat .src{left:6%;top:29%;width:21%;height:40%;border-radius:12px;
  background:var(--accent);box-shadow:0 16px 34px -20px var(--accent)}
.sp-crossplat .cl{left:14%;height:5px;border-radius:3px;background:rgba(255,255,255,.62);
  transform-origin:left}
.sp-crossplat .c1{top:16%;width:64%}
.sp-crossplat .c2{top:34%;width:44%}
.sp-crossplat .c3{top:52%;width:72%}
.sp-crossplat .c4{top:70%;width:36%}
.vis .sp-crossplat .cl{animation:sp-grow 3.2s var(--ease) infinite}
.vis .sp-crossplat .c2{animation-delay:.08s}
.vis .sp-crossplat .c3{animation-delay:.16s}
.vis .sp-crossplat .c4{animation-delay:.24s}
.sp-crossplat .srcl{left:6%;top:75%}
.sp-crossplat .beam{left:28%;width:30%;height:3px;border-radius:2px;background:var(--hairline);
  transform-origin:left;transform:scaleX(0)}
.sp-crossplat .b1{top:27%}
.sp-crossplat .b2{top:73%}
.vis .sp-crossplat .beam{animation:sp-beam 3.2s var(--ease) infinite}
.vis .sp-crossplat .b2{animation-delay:.5s}
@keyframes sp-beam{0%,8%{transform:scaleX(0);background:var(--hairline)}
  28%,70%{transform:scaleX(1);background:var(--accent)}
  90%,100%{transform:scaleX(0);background:var(--hairline)}}
.sp-crossplat .ph{left:59%;width:16%;aspect-ratio:9/16;border-radius:13px;
  background:var(--card);border:2px solid var(--hairline)}
.sp-crossplat .ios{top:8%}
.sp-crossplat .and{top:54%}
.vis .sp-crossplat .ph{animation:sp-lightup 3.2s var(--ease) infinite}
.vis .sp-crossplat .and{animation-delay:.5s}
.sp-crossplat .nub{left:32%;top:5%;width:36%;height:4px;border-radius:2px;background:var(--hairline)}
.sp-crossplat .ln{left:12%;height:5px;border-radius:3px;background:var(--hairline)}
.sp-crossplat .n1{top:22%;width:64%}
.sp-crossplat .n2{top:36%;width:76%}
.sp-crossplat .n3{top:50%;width:50%}
.sp-crossplat .cta{left:12%;bottom:11%;width:52%;height:9px;border-radius:5px;
  background:var(--hairline)}
.vis .sp-crossplat .cta{animation:sp-ink 3.2s var(--ease) infinite}
.vis .sp-crossplat .and .cta{animation-delay:.5s}
.sp-crossplat .tag{left:78%;transform:translateY(-50%)}
.sp-crossplat .t1{top:27%}
.sp-crossplat .t2{top:73%}
.vis .sp-crossplat .tag{animation:sp-hot 3.2s var(--ease) infinite}
.vis .sp-crossplat .t2{animation-delay:.5s}
@keyframes sp-hot{0%,20%{color:var(--text-3)}40%,72%{color:var(--accent)}
  92%,100%{color:var(--text-3)}}

/* ── certificates, listing, review, live ────────────────────────────── */
.sp-release .pane{left:7%;top:14%;width:45%;height:72%;border-radius:14px;
  background:var(--card);border:1px solid var(--hairline)}
.sp-release .hd{left:9%;top:9%;width:46%;height:6px;border-radius:3px;background:var(--hairline)}
.sp-release .panel{left:7%;top:6%}
.sp-release .ck{left:12%;width:15px;height:15px;border-radius:5px;
  background:var(--card);border:2px solid var(--hairline)}
.sp-release .ck::after{content:"";position:absolute;left:2px;top:3px;width:7px;height:3.5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);opacity:0}
.sp-release .k1{top:calc(33% - 7.5px)}
.sp-release .k2{top:calc(47% - 7.5px)}
.sp-release .k3{top:calc(61% - 7.5px)}
.sp-release .k4{top:calc(75% - 7.5px)}
.sp-release .ckl{left:21%;height:7px;border-radius:4px;background:var(--bg-alt)}
.sp-release .j1{top:calc(33% - 3.5px);width:24%}
.sp-release .j2{top:calc(47% - 3.5px);width:19%}
.sp-release .j3{top:calc(61% - 3.5px);width:26%}
.sp-release .j4{top:calc(75% - 3.5px);width:16%}
.vis .sp-release .ck{animation:sp-node 4s var(--ease) infinite}
.vis .sp-release .ck::after{animation:sp-tick 4s var(--ease) infinite}
.vis .sp-release .ckl{animation:sp-ink 4s var(--ease) infinite}
.vis .sp-release .k2,.vis .sp-release .k2::after,.vis .sp-release .j2{animation-delay:.34s}
.vis .sp-release .k3,.vis .sp-release .k3::after,.vis .sp-release .j3{animation-delay:.68s}
.vis .sp-release .k4,.vis .sp-release .k4::after,.vis .sp-release .j4{animation-delay:1.02s}
@keyframes sp-tick{0%,22%{opacity:0}30%,74%{opacity:1}92%,100%{opacity:0}}
.sp-release .tile{right:6%;top:24%;width:33%;height:40%;border-radius:14px;
  background:var(--card);border:1px solid var(--hairline);
  box-shadow:0 18px 38px -28px rgba(33,22,15,.5)}
.sp-release .ic{left:10%;top:14%;width:30px;height:30px;border-radius:9px;background:var(--accent)}
.sp-release .tl{left:10%;height:6px;border-radius:3px;background:var(--hairline)}
.sp-release .m1{top:62%;width:68%}
.sp-release .m2{top:79%;width:44%}
.sp-release .badge{right:10%;top:16%;width:32px;height:14px;border-radius:7px;
  background:var(--bg-alt)}
.vis .sp-release .badge{animation:sp-ink 4s var(--ease) 1.5s infinite}
.sp-release .ver{right:6%;top:70%;width:33%;text-align:center;color:var(--accent);opacity:0}
.vis .sp-release .ver{animation:sp-rise 4s var(--ease) 1.5s infinite}

/* ── it keeps working where the signal does not ─────────────────────── */
.sp-field .ph{left:8%;top:12%;width:24%;height:76%;border-radius:16px;
  background:var(--card);border:2px solid var(--hairline)}
.sp-field .bar{left:12%;top:6%;width:44%;height:6px;border-radius:3px;background:var(--hairline)}
.sp-field .ln{left:12%;width:76%;height:8px;border-radius:4px;background:#F3E3D6}
.sp-field .n1{top:20%}
.sp-field .n2{top:32%}
.sp-field .n3{top:44%}
.sp-field .ok{left:12%;bottom:9%;width:54%;height:10px;border-radius:5px;background:var(--accent)}
.sp-field .sig{left:37%;width:9px;border-radius:2px;background:var(--accent)}
.sp-field .g1{top:19%;height:14px}
.sp-field .g2{top:16%;height:22px;left:calc(37% + 13px)}
.sp-field .g3{top:13%;height:30px;left:calc(37% + 26px)}
.vis .sp-field .sig{animation:sp-signal 4.4s var(--ease) infinite}
.vis .sp-field .g2{animation-delay:.1s}
.vis .sp-field .g3{animation-delay:.2s}
@keyframes sp-signal{0%,20%{background:var(--accent);opacity:1}
  32%,60%{background:var(--hairline);opacity:.6}
  76%,100%{background:var(--accent);opacity:1}}
.sp-field .offl{left:37%;top:33%}
.sp-field .q{left:36%;width:26%;height:14px;border-radius:7px;background:var(--card);
  border:1.5px solid var(--hairline);opacity:0}
.sp-field .q1{top:46%}
.sp-field .q2{top:60%}
.sp-field .q3{top:74%}
.vis .sp-field .q{animation:sp-queue 4.4s var(--ease) infinite}
.vis .sp-field .q2{animation-delay:.2s}
.vis .sp-field .q3{animation-delay:.4s}
@keyframes sp-queue{0%,24%{opacity:0;transform:translateX(-10px)}
  38%,62%{opacity:1;transform:none;border-color:var(--hairline);background:var(--card)}
  80%{opacity:1;transform:translateX(64px);border-color:var(--accent);background:var(--accent-tint)}
  90%,100%{opacity:0;transform:translateX(64px)}}
.sp-field .srv{right:8%;top:22%;width:24%;height:46%;border-radius:12px;
  background:var(--card);border:2px solid var(--hairline)}
.sp-field .sl{left:12%;width:76%;height:7px;border-radius:4px;background:var(--hairline)}
.sp-field .a{top:18%}
.sp-field .b{top:44%}
.sp-field .c{top:70%}
.vis .sp-field .sl{animation:sp-ink 4.4s var(--ease) 2.2s infinite}
.vis .sp-field .b{animation-delay:2.35s}
.vis .sp-field .c{animation-delay:2.5s}
.sp-field .sync{right:8%;top:74%;width:24%;text-align:center;color:var(--accent);opacity:0}
.vis .sp-field .sync{animation:sp-rise 4.4s var(--ease) 2.6s infinite}

/* ── somebody answers after launch ──────────────────────────────────── */
.sp-aftercare .pane{left:7%;top:12%;width:54%;height:72%;border-radius:14px;
  background:var(--card);border:1px solid var(--hairline)}
.sp-aftercare .panel{left:7%;top:5%}
.sp-aftercare .row{left:11%;width:46%;height:18px;border-radius:9px;
  background:var(--bg-alt);border:1px solid var(--hairline)}
.sp-aftercare .r1{top:23%}
.sp-aftercare .r2{top:40%}
.sp-aftercare .r3{top:57%}
.sp-aftercare .dot{left:7px;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;
  background:var(--text-3)}
.sp-aftercare .bar{left:23px;top:calc(50% - 3px);width:56%;height:6px;border-radius:3px;
  background:var(--hairline)}
.vis .sp-aftercare .row{animation:sp-ticket 4s var(--ease) infinite}
.vis .sp-aftercare .dot{animation:sp-dot 4s var(--ease) infinite}
.vis .sp-aftercare .r2,.vis .sp-aftercare .r2 .dot{animation-delay:.34s}
.vis .sp-aftercare .r3,.vis .sp-aftercare .r3 .dot{animation-delay:.68s}
@keyframes sp-ticket{0%,8%{border-color:var(--hairline);background:var(--bg-alt)}
  24%,52%{border-color:var(--accent);background:var(--accent-tint)}
  68%,100%{border-color:#C8E8D6;background:#E9F6EF}}
@keyframes sp-dot{0%,8%{background:var(--text-3)}24%,52%{background:var(--accent)}
  68%,100%{background:#3F9D6B}}
.sp-aftercare .mtr{left:11%;top:72%;width:46%;height:9px;border-radius:5px;
  background:var(--hairline);overflow:hidden}
.sp-aftercare .fill{left:0;top:0;bottom:0;width:100%;border-radius:5px;transform-origin:left;
  transform:scaleX(.18);background:linear-gradient(90deg,var(--accent-hot),var(--accent))}
.vis .sp-aftercare .fill{animation:sp-fill 4s var(--ease) infinite}
@keyframes sp-fill{0%{transform:scaleX(.18)}56%,82%{transform:scaleX(1)}100%{transform:scaleX(.18)}}
.sp-aftercare .mlbl{left:11%;top:89%}
.sp-aftercare .ship{right:9%;top:calc(50% - 30px);width:54px;height:54px;border-radius:50%;
  border:3px solid var(--hairline);background:var(--card)}
.sp-aftercare .tick{left:14px;top:18px;width:20px;height:10px;
  border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);
  transform:rotate(-45deg);opacity:0}
.vis .sp-aftercare .ship{animation:sp-ring 4s var(--ease) 1.5s infinite}
.vis .sp-aftercare .tick{animation:sp-tick 4s var(--ease) 1.5s infinite}
@keyframes sp-ring{0%,16%{border-color:var(--hairline);transform:scale(.94)}
  34%,76%{border-color:var(--accent);transform:scale(1)}
  94%,100%{border-color:var(--hairline);transform:scale(.94)}}
.sp-aftercare .slbl{right:9%;top:74%;width:54px;text-align:center;color:var(--accent);opacity:0}
.vis .sp-aftercare .slbl{animation:sp-rise 4s var(--ease) 1.7s infinite}

/* ── a vague problem turned into a defined build ────────────────────── */
.sp-discover .fog{border-radius:8px;background:var(--hairline);opacity:.6}
.sp-discover .f1{left:9%;top:21%;width:22%;height:12%}
.sp-discover .f2{left:34%;top:31%;width:15%;height:10%}
.sp-discover .f3{left:12%;top:45%;width:26%;height:11%}
.sp-discover .f4{left:37%;top:57%;width:17%;height:10%}
.sp-discover .f5{left:9%;top:69%;width:19%;height:10%}
.vis .sp-discover .fog{animation:sp-settle 4.2s var(--ease) infinite}
.vis .sp-discover .f2{animation-delay:.1s}
.vis .sp-discover .f3{animation-delay:.2s}
.vis .sp-discover .f4{animation-delay:.3s}
.vis .sp-discover .f5{animation-delay:.4s}
@keyframes sp-settle{0%,16%{opacity:.6;transform:none}
  50%,100%{opacity:0;transform:translate(26%,3%) scale(.55)}}
.sp-discover .lens{left:7%;top:19%;width:54px;height:54px;border-radius:50%;
  border:3px solid var(--accent);background:rgba(232,89,12,.05)}
.sp-discover .lens::after{content:"";position:absolute;right:-12px;bottom:-6px;width:16px;height:3px;
  border-radius:2px;background:var(--accent);transform:rotate(40deg)}
.vis .sp-discover .lens{animation:sp-scan 4.2s var(--ease) infinite}
@keyframes sp-scan{0%{transform:translate(0,0)}44%{transform:translate(150%,105%)}
  100%{transform:translate(0,0)}}
.sp-discover .spec{right:7%;top:19%;width:32%;height:60%;border-radius:12px;
  background:var(--card);border:1px solid var(--hairline);opacity:0;
  box-shadow:0 18px 38px -28px rgba(33,22,15,.5)}
.vis .sp-discover .spec{animation:sp-solid 4.2s var(--ease) infinite}
@keyframes sp-solid{0%,40%{opacity:0;transform:scale(.88)}
  58%,88%{opacity:1;transform:none}100%{opacity:0;transform:scale(.88)}}
.sp-discover .sh{left:10%;top:10%;width:48%;height:7px;border-radius:4px;background:var(--accent)}
.sp-discover .sl{left:10%;width:76%;height:6px;border-radius:3px;background:var(--hairline)}
.sp-discover .a{top:30%}
.sp-discover .b{top:44%}
.sp-discover .c{top:58%}
.sp-discover .d{top:72%;width:52%}
.sp-discover .sb{left:10%;bottom:8%;width:44%;height:10px;border-radius:5px;
  background:var(--accent-tint)}
.sp-discover .lin{left:9%;top:85%}
.sp-discover .lout{right:7%;top:85%;color:var(--accent)}

/* ── front and back built as one thing ──────────────────────────────── */
.sp-fullstack .fe{left:7%;top:16%;width:36%;height:60%;border-radius:12px;
  background:var(--card);border:2px solid var(--hairline)}
.sp-fullstack .hd{left:8%;top:8%;width:50%;height:6px;border-radius:3px;background:var(--hairline)}
.sp-fullstack .tl{width:38%;height:22%;border-radius:6px;background:var(--accent-tint)}
.sp-fullstack .t1{left:8%;top:26%}
.sp-fullstack .t2{left:54%;top:26%}
.sp-fullstack .t3{left:8%;top:56%}
.sp-fullstack .t4{left:54%;top:56%}
.vis .sp-fullstack .tl{animation:sp-tile 3.4s var(--ease) infinite}
.vis .sp-fullstack .t2{animation-delay:.1s}
.vis .sp-fullstack .t3{animation-delay:.2s}
.vis .sp-fullstack .t4{animation-delay:.3s}
@keyframes sp-tile{0%,18%{background:var(--accent-tint)}38%,70%{background:var(--accent)}
  90%,100%{background:var(--accent-tint)}}
.sp-fullstack .seam{left:calc(50% - 2px);top:16%;width:4px;height:60%;border-radius:3px;
  background:var(--hairline)}
.vis .sp-fullstack .seam{animation:sp-ink 3.4s var(--ease) infinite}
.sp-fullstack .be{right:7%;top:16%;width:36%;height:60%;border-radius:12px;
  background:var(--accent-tint);border:2px solid var(--hairline)}
.sp-fullstack .sv{left:10%;width:80%;height:13%;border-radius:6px;background:var(--card)}
.sp-fullstack .v1{top:10%}
.sp-fullstack .v2{top:28%}
.sp-fullstack .v3{top:46%}
.sp-fullstack .db{left:10%;bottom:9%;width:80%;height:20%;border-radius:8px;
  background:var(--accent);opacity:.9}
.sp-fullstack .pk{top:calc(46% - 7px);width:14px;height:14px;border-radius:4px;
  background:var(--accent);opacity:0}
.sp-fullstack .p1{left:41%}
.sp-fullstack .p2{left:54%}
.vis .sp-fullstack .p1{animation:sp-cross 3.4s var(--ease) infinite}
.vis .sp-fullstack .p2{animation:sp-crossback 3.4s var(--ease) .5s infinite}
@keyframes sp-cross{0%{opacity:0;transform:translateX(0)}14%{opacity:1}
  54%{opacity:1;transform:translateX(64px)}68%,100%{opacity:0;transform:translateX(64px)}}
@keyframes sp-crossback{0%{opacity:0;transform:translateX(0)}14%{opacity:1}
  54%{opacity:1;transform:translateX(-64px)}68%,100%{opacity:0;transform:translateX(-64px)}}
.sp-fullstack .lf{left:7%;top:82%}
.sp-fullstack .lb{right:7%;top:82%}

/* ── the whole shop, browse to dispatch ─────────────────────────────── */
.sp-ecom .shop{left:7%;right:7%;top:9%;height:46%;border-radius:14px;
  background:var(--card);border:1px solid var(--hairline)}
.sp-ecom .hd{left:4%;top:10%;width:24%;height:6px;border-radius:3px;background:var(--hairline)}
.sp-ecom .cart{right:4%;top:8%;width:32px;height:14px;border-radius:7px;background:var(--bg-alt)}
.vis .sp-ecom .cart{animation:sp-ink 4.8s var(--ease) .42s infinite}
.sp-ecom .pd{width:26%;height:42%;top:32%;border-radius:8px;background:var(--bg-alt);
  border:1px solid var(--hairline)}
.sp-ecom .d1{left:4%}
.sp-ecom .d2{left:37%}
.sp-ecom .d3{left:70%}
.vis .sp-ecom .pd{animation:sp-lightup 4.8s var(--ease) infinite}
.vis .sp-ecom .d2{animation-delay:.14s}
.vis .sp-ecom .d3{animation-delay:.28s}
.sp-ecom .tot{left:4%;bottom:8%;width:48%;height:7px;border-radius:4px;
  background:var(--hairline);overflow:hidden}
.sp-ecom .totf{left:0;top:0;bottom:0;width:100%;border-radius:4px;transform-origin:left;
  transform:scaleX(0);background:linear-gradient(90deg,var(--accent-hot),var(--accent))}
.vis .sp-ecom .totf{animation:sp-total 4.8s var(--ease) infinite}
@keyframes sp-total{0%,14%{transform:scaleX(0)}56%,84%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.sp-ecom .rail{left:9%;right:9%;top:71%;height:3px;border-radius:2px;background:var(--hairline)}
.sp-ecom .st{top:calc(71% - 11px);width:22px;height:22px;border-radius:7px;
  background:var(--card);border:2px solid var(--hairline)}
.sp-ecom .s1{left:calc(9% - 11px)}
.sp-ecom .s2{left:calc(25.4% - 11px)}
.sp-ecom .s3{left:calc(41.8% - 11px)}
.sp-ecom .s4{left:calc(58.2% - 11px)}
.sp-ecom .s5{left:calc(74.6% - 11px)}
.sp-ecom .s6{left:calc(91% - 11px)}
.vis .sp-ecom .st{animation:sp-node 4.8s var(--ease) infinite}
.vis .sp-ecom .s2{animation-delay:.42s}
.vis .sp-ecom .s3{animation-delay:.84s}
.vis .sp-ecom .s4{animation-delay:1.26s}
.vis .sp-ecom .s5{animation-delay:1.68s}
.vis .sp-ecom .s6{animation-delay:2.1s}
.sp-ecom .tok{left:calc(9% - 6px);top:calc(71% - 6px);width:12px;height:12px;border-radius:50%;
  background:var(--accent-hot);opacity:0}
.vis .sp-ecom .tok{animation:sp-shop 4.8s var(--ease) infinite}
@keyframes sp-shop{0%{opacity:0;left:calc(9% - 6px)}8%{opacity:1}
  60%{opacity:1;left:calc(91% - 6px)}74%,100%{opacity:0;left:calc(91% - 6px)}}
.sp-ecom .lbl{top:82%;font-size:9.5px;letter-spacing:.05em;transform:translateX(-50%)}
.sp-ecom .l1{left:9%}
.sp-ecom .l2{left:25.4%}
.sp-ecom .l3{left:41.8%}
.sp-ecom .l4{left:58.2%}
.sp-ecom .l5{left:74.6%}
.sp-ecom .l6{left:91%}
.vis .sp-ecom .lbl{animation:sp-hot 4.8s var(--ease) infinite}
.vis .sp-ecom .l2{animation-delay:.42s}
.vis .sp-ecom .l3{animation-delay:.84s}
.vis .sp-ecom .l4{animation-delay:1.26s}
.vis .sp-ecom .l5{animation-delay:1.68s}
.vis .sp-ecom .l6{animation-delay:2.1s}

@media(max-width:820px){
  .split-scene u{font-size:9.5px;letter-spacing:.05em}
  .sp-ecom .lbl{font-size:8px;letter-spacing:0}
}
@media(max-width:560px){
  .split-scene{aspect-ratio:3/2}
  .sp-ecom .lbl{font-size:7.5px}
}
@media(prefers-reduced-motion:reduce){
  .split-scene *{animation:none!important}
  .sp-crossplat .beam{transform:scaleX(1);background:var(--accent)}
  .sp-crossplat .cl{transform:none;opacity:1}
  .sp-discover .spec,.sp-field .q,.sp-ecom .tok,.sp-release .ver,
  .sp-field .sync,.sp-aftercare .slbl,.sp-aftercare .tick{opacity:1}
  .sp-release .ck::after{opacity:1}
  .sp-aftercare .fill,.sp-ecom .totf{transform:scaleX(1)}
}

/* ═══ touch targets ═════════════════════════════════════════════════════
   Measured on a 390px viewport: the slider dots were 44x4, the contact-band
   phone and email links 242x25, the FAQ questions 246x28 and the tab pills a
   pixel under 38. All of them are things people tap with a thumb, so each one
   is brought up to at least 40px without changing how any of it looks — the
   dots grow an invisible strip above and below rather than getting fatter. */
@media(max-width:760px){
  .ask{padding-block:7px}
  .cband-v{padding-block:8px}
  .dk-tab,.fbtn,.dm-replay{min-height:40px}
  .annc-x{min-width:40px;min-height:40px;display:inline-flex;
    align-items:center;justify-content:center}
  .dot::after{content:"";position:absolute;left:0;right:0;top:50%;
    height:42px;transform:translateY(-50%)}
  /* the consent box is the one control a lead cannot submit without */
  .lp-consent input[type=checkbox],.f-consent input[type=checkbox],
  form input[type=checkbox]{width:20px;height:20px;flex:0 0 20px}
  /* the case-study labels sat at 10.6px, which is below comfortable reading */
  .dm-case small,.dm-note{font-size:11.5px}
}

/* ═══ footer columns ════════════════════════════════════════════════════
   Five children: the brand block, then AI & Data, Build & Run, How you buy
   and About us. The grid used to declare six tracks against five columns —
   the leftover track was the empty band on the right — and the second
   service column wore a hidden &nbsp; heading to keep the old count. Both
   are gone. Every step below divides five children with nothing left over:
   the brand block takes the full width as soon as the link columns would
   have to wrap, so no breakpoint ever leaves a hole. */
.foot-cols{grid-template-columns:1.5fr repeat(4,1fr)}
@media(max-width:1380px){
  .foot-cols{grid-template-columns:1.4fr repeat(4,1fr);column-gap:20px;row-gap:34px}
}
@media(max-width:1180px){
  .foot-cols{grid-template-columns:repeat(4,1fr)}
  .foot-cols>div:first-child{grid-column:1/-1}
}
@media(max-width:820px){
  .foot-cols{grid-template-columns:repeat(2,1fr);row-gap:30px}
}
@media(max-width:560px){
  .foot-cols{grid-template-columns:1fr;gap:26px}
}

/* Between 561 and 1180 the brand block takes the full row so the four link
   columns can stay whole. On its own it only fills the left third and the
   rest of that row reads as a hole, so its three lines of copy run across
   instead — logo and socials keep the full width. */
@media(max-width:1180px) and (min-width:561px){
  .foot-cols>div:first-child{display:grid;grid-template-columns:repeat(3,1fr);
    column-gap:26px;row-gap:16px;align-items:start}
  .foot-cols>div:first-child>img,
  .foot-cols>div:first-child>.foot-social{grid-column:1/-1}
  .foot-cols>div:first-child>p{margin:0}
}