/* ============================================================
   HIGH10 DESIGN SYSTEM
   Tokens → Base → Layout → Components → Sections → Motion
   ============================================================ */
:root{
  /* Brand palette */
  --blue-50:#EFF5FF; --blue-100:#DCE8FF; --blue-300:#93B4FF; --blue-500:#3B6BF5; --blue-600:#2563EB; --blue-700:#1D4ED8;
  --purple-50:#F5F0FF; --purple-100:#EBE1FF; --purple-300:#C4A9FF; --purple-500:#8B5CF6; --purple-600:#7C3AED; --purple-700:#6D28D9;
  --teal-50:#ECFDF9; --teal-100:#D2F8EF; --teal-300:#7EE7D2; --teal-500:#14B8A6; --teal-600:#0D9488;
  --orange-50:#FFF4EC; --orange-100:#FFE5D2; --orange-400:#FB923C; --orange-500:#FF7A1A; --orange-600:#EA6A05;
  --navy-900:#060C22; --navy-800:#0A1330; --navy-700:#111C42; --navy-600:#1B2A5B;
  --ink:#0B1220; --ink-2:#334066; --ink-3:#5A6786; --ink-4:#65718F;
  --line:#E6EAF3; --line-2:#F0F3F9;
  --bg:#FFFFFF; --bg-soft:#F8FAFD; --bg-tint:#F3F6FC;

  /* Gradients */
  --grad-brand:linear-gradient(120deg,#2563EB 0%,#7C3AED 48%,#14B8A6 100%);
  --grad-brand-2:linear-gradient(120deg,#3B6BF5 0%,#8B5CF6 60%,#FF7A1A 120%);
  --grad-warm:linear-gradient(120deg,#7C3AED 0%,#FF7A1A 100%);
  /* Text gradients use darker end-stops so headings stay AA-legible on white */
  --grad-text-brand:linear-gradient(120deg,#1D4ED8 0%,#7C3AED 52%,#0D8A7C 100%);
  --grad-text-warm:linear-gradient(120deg,#6D28D9 0%,#D95F00 100%);
  --grad-cool:linear-gradient(120deg,#2563EB 0%,#14B8A6 100%);
  --grad-navy:linear-gradient(160deg,#0A1330 0%,#111C42 55%,#1B2A5B 100%);
  --grad-mesh:radial-gradient(60rem 40rem at 8% -10%, rgba(37,99,235,.18), transparent 60%),
              radial-gradient(50rem 36rem at 92% 0%, rgba(124,58,237,.18), transparent 62%),
              radial-gradient(46rem 34rem at 50% 110%, rgba(20,184,166,.16), transparent 60%);

  /* Glass */
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.86);
  --glass-dark:rgba(255,255,255,.06);
  --glass-border:rgba(255,255,255,.55);
  --glass-border-dark:rgba(255,255,255,.14);

  /* Shadows */
  --sh-xs:0 1px 2px rgba(11,18,32,.05);
  --sh-sm:0 2px 8px rgba(11,18,32,.06);
  --sh-md:0 10px 30px -8px rgba(11,18,32,.12), 0 2px 8px rgba(11,18,32,.05);
  --sh-lg:0 28px 60px -18px rgba(11,18,32,.22), 0 8px 20px -10px rgba(11,18,32,.10);
  --sh-xl:0 48px 100px -28px rgba(11,18,32,.32);
  --sh-glow:0 24px 60px -22px rgba(59,107,245,.55);

  /* Radii */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-2xl:44px; --r-pill:999px;

  /* Type */
  --font-display:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing / layout */
  --maxw:1240px; --maxw-wide:1400px; --gutter:clamp(20px,4vw,40px);
  --section-y:clamp(34px,3.7vw,60px);
  --nav-h:86px;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur:.5s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
main{overflow-x:clip}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);margin:0;letter-spacing:-.025em;line-height:1.08;font-weight:800;color:var(--ink)}
p{margin:0}
:focus-visible{outline:3px solid var(--blue-600);outline-offset:3px;border-radius:6px}
::selection{background:rgba(124,58,237,.2)}

/* ---------- Utility ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{width:100%;max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
.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}
.skip-link{position:absolute;left:16px;top:-80px;z-index:2000;background:var(--navy-800);color:#fff;padding:14px 22px;border-radius:var(--r-sm);font-weight:700;transition:top .2s}
.skip-link:focus{top:16px}
.center{text-align:center}
.grad-text{background:var(--grad-text-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-text-warm{background:var(--grad-text-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.on-dark .grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text}
.on-dark .grad-text-warm{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text}

/* ---------- Type scale ---------- */
.h-display{font-size:clamp(2.6rem,6.1vw,4.6rem);line-height:1.04;letter-spacing:-.036em}
.h1{font-size:clamp(2.3rem,5.2vw,4rem);letter-spacing:-.032em}
.h2{font-size:clamp(1.8rem,3.2vw,2.6rem);letter-spacing:-.028em}
.h3{font-size:clamp(1.3rem,1.9vw,1.72rem);letter-spacing:-.02em}
.h4{font-size:clamp(1.15rem,1.5vw,1.4rem);letter-spacing:-.015em;font-weight:700}
.lede{font-size:clamp(1.08rem,1.55vw,1.32rem);line-height:1.6;color:var(--ink-2);font-weight:400}
.small{font-size:.95rem;color:var(--ink-3)}
.tiny{font-size:.82rem;color:var(--ink-3)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--purple-600);background:var(--purple-50);border:1px solid var(--purple-100);
  padding:8px 16px;border-radius:var(--r-pill);
}
.eyebrow.on-dark{color:#C9D6FF;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--grad-brand);flex:none}
.section-head{max-width:740px;margin-inline:auto;text-align:center;margin-bottom:clamp(24px,2.8vw,38px)}
.section-head.left{margin-inline:0;text-align:left}
.section-head .h2{margin-top:14px}
.section-head .lede{margin-top:12px;font-size:clamp(1rem,1.25vw,1.12rem)}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--grad-brand);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:17px 30px;border-radius:var(--r-pill);min-height:56px;
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background-color .25s, color .25s, border-color .25s;
  will-change:transform;text-align:center;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-primary{background-image:var(--btn-bg);color:#fff;box-shadow:var(--sh-glow)}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-brand-2);
  opacity:0;transition:opacity .35s var(--ease);
}
.btn-primary:hover::after{opacity:1}
.btn-primary:hover{box-shadow:0 30px 70px -22px rgba(124,58,237,.6)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--sh-sm)}
.btn-ghost:hover{border-color:var(--blue-300);box-shadow:var(--sh-md);color:var(--blue-700)}
.btn-dark{background:var(--navy-800);color:#fff;box-shadow:var(--sh-md)}
.btn-dark:hover{background:var(--navy-700)}
.btn-glass{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.24);backdrop-filter:blur(12px)}
.btn-glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.btn-orange{background:linear-gradient(120deg,var(--orange-500),#FF9E4A);color:#fff;box-shadow:0 20px 50px -20px rgba(255,122,26,.7)}
.btn-sm{padding:12px 22px;min-height:46px;font-size:.93rem}
.btn-lg{padding:20px 38px;min-height:64px;font-size:1.08rem}
.btn-block{width:100%}
.btn .ico{transition:transform .32s var(--ease)}
.btn:hover .ico{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue-700);font-family:var(--font-display);transition:gap .3s var(--ease),color .2s}
.link-arrow:hover{gap:13px;color:var(--purple-600)}

/* ---------- Cards / surfaces ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s;
  position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent}
.card-pad{padding:clamp(24px,3vw,34px)}
.glass{background:var(--glass);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--glass-border)}
.glass-dark{background:var(--glass-dark);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--glass-border-dark)}
.on-dark{background:var(--grad-navy);color:#E4EAFB}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark .lede{color:#A9B7DC}
.on-dark .small,.on-dark .tiny{color:#8C9BC4}
.on-dark .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10);box-shadow:none;color:#D7DFF6}
.on-dark .card:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2)}

/* Gradient hairline that appears on hover */
.card-glow::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--grad-brand);opacity:0;transition:opacity .4s var(--ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  pointer-events:none;z-index:3;
}
.card-glow:hover::before,.card-glow:focus-within::before{opacity:1}
/* Cursor-follow spotlight */
.spot::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(24rem 24rem at var(--mx,50%) var(--my,0%), rgba(59,107,245,.13), transparent 62%);
  opacity:0;transition:opacity .4s var(--ease);
}
.spot:hover::after{opacity:1}
.on-dark .spot::after{background:radial-gradient(22rem 22rem at var(--mx,50%) var(--my,0%), rgba(124,58,237,.30), transparent 62%)}

/* Icon tiles */
.itile{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:none;
  background:var(--blue-50);color:var(--blue-600);border:1px solid var(--blue-100);
  transition:transform .45s var(--ease);
}
.card:hover .itile{transform:rotate(-6deg) scale(1.06)}
.itile.purple{background:var(--purple-50);color:var(--purple-600);border-color:var(--purple-100)}
.itile.teal{background:var(--teal-50);color:var(--teal-600);border-color:var(--teal-100)}
.itile.orange{background:var(--orange-50);color:var(--orange-600);border-color:var(--orange-100)}
.on-dark .itile{background:rgba(59,107,245,.18);border-color:rgba(255,255,255,.12);color:#9DB8FF}
.on-dark .itile.purple{background:rgba(139,92,246,.2);color:#C9B2FF}
.on-dark .itile.teal{background:rgba(20,184,166,.2);color:#7EE7D2}
.on-dark .itile.orange{background:rgba(255,122,26,.2);color:#FFB679}
.itile svg{width:26px;height:26px}

.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);font-size:.82rem;font-weight:600;background:var(--bg-tint);color:var(--ink-2);border:1px solid var(--line)}
.on-dark .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#C3CFEE}
.pill-blue{background:var(--blue-50);color:var(--blue-700);border-color:var(--blue-100)}
.pill-purple{background:var(--purple-50);color:var(--purple-700);border-color:var(--purple-100)}
.pill-teal{background:var(--teal-50);color:var(--teal-600);border-color:var(--teal-100)}
.pill-orange{background:var(--orange-50);color:var(--orange-600);border-color:var(--orange-100)}

.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------- Background decor ---------- */
.mesh{position:absolute;inset:0;background:var(--grad-mesh);pointer-events:none;z-index:0}
.grid-lines{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 20%,#000,transparent 78%);
  mask-image:radial-gradient(80% 60% at 50% 20%,#000,transparent 78%);
}
.on-dark .grid-lines{opacity:.14;background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px)}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42;pointer-events:none;z-index:0;animation:drift 20s var(--ease-soft) infinite alternate}
.blob.b1{width:36rem;height:36rem;background:radial-gradient(circle,#3B6BF5,transparent 70%);top:-14rem;left:-10rem}
.blob.b2{width:32rem;height:32rem;background:radial-gradient(circle,#8B5CF6,transparent 70%);top:-8rem;right:-9rem;animation-delay:-6s}
.blob.b3{width:28rem;height:28rem;background:radial-gradient(circle,#14B8A6,transparent 70%);bottom:-12rem;left:38%;animation-delay:-12s}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(40px,-30px,0) scale(1.12)}}

.section-soft{background:var(--bg-soft)}
.section-tint{background:linear-gradient(180deg,#fff 0%,var(--bg-tint) 40%,#fff 100%)}
.rule-top{border-top:1px solid var(--line)}

/* ---------- Motion primitives ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-r{opacity:0;transform:translateX(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-s{opacity:0;transform:scale(.94);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-l.in,.reveal-r.in,.reveal-s.in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.07s}[data-delay="2"]{transition-delay:.14s}[data-delay="3"]{transition-delay:.21s}
[data-delay="4"]{transition-delay:.28s}[data-delay="5"]{transition-delay:.35s}[data-delay="6"]{transition-delay:.42s}
[data-delay="7"]{transition-delay:.49s}[data-delay="8"]{transition-delay:.56s}

@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes float-y2{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes pulse-ring{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@keyframes shimmer{100%{background-position:200% 0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes gradient-pan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes rise-bar{from{transform:scaleY(.05)}to{transform:scaleY(1)}}

.anim-gradient{background-size:200% 200%;animation:gradient-pan 9s ease infinite}
.float{animation:float-y 6s var(--ease-soft) infinite}
.float-2{animation:float-y2 7.5s var(--ease-soft) infinite}

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

/* ---------- Responsive base ---------- */
@media (max-width:1080px){ .g5{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:860px){ .g3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .g2,.g3,.g4,.g5{grid-template-columns:1fr} body{font-size:16px} }


/* ============================================================
   NAVIGATION
   ============================================================ */
.topbar{
  background:var(--navy-800);color:#C9D6FF;font-size:.84rem;
  display:flex;align-items:center;justify-content:center;gap:22px;
  padding:9px 20px;text-align:center;position:relative;z-index:1100;
}
.topbar strong{color:#fff}
.topbar a{color:#8FB4FF;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.topbar .tb-hide{display:inline}
.topbar a{white-space:nowrap}
@media(max-width:720px){.topbar .tb-hide{display:none}.topbar{gap:12px;font-size:.78rem;padding:8px 14px}}

.nav{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.78);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid transparent;transition:box-shadow .35s var(--ease),border-color .35s,background-color .35s;
}
.nav.stuck{box-shadow:0 10px 30px -18px rgba(11,18,32,.28);border-bottom-color:var(--line);background:rgba(255,255,255,.92)}
.nav-inner{display:flex;align-items:center;gap:16px;height:var(--nav-h);max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center;flex:none;line-height:0}
.brand img{display:block;width:auto}
.logo-nav{height:58px}
.logo-mobile{height:50px}
.logo-footer{height:64px}
.brand-mark{flex:none;object-fit:contain;display:block}

.nav-links{display:flex;align-items:center;gap:2px;margin-left:14px}
.nav-item{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:var(--r-pill);
  font-weight:600;font-size:.96rem;color:var(--ink-2);transition:color .2s,background-color .2s;
}
.nav-link:hover,.nav-item.open>.nav-link,.nav-link[aria-current="page"]{color:var(--ink);background:var(--bg-tint)}
.nav-link .chev{width:14px;height:14px;transition:transform .3s var(--ease)}
.nav-item.open .chev{transform:rotate(180deg)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.93rem;color:var(--ink-2);padding:10px 12px;border-radius:var(--r-pill)}
.nav-tel:hover{color:var(--blue-700);background:var(--bg-tint)}

/* Mega menu */
.mega{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(94vw,var(--mw,980px));background:var(--glass-strong);backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-xl);
  padding:26px;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  z-index:1001;
}
.nav-item.open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;gap:22px}
.mega-col h5{font-family:var(--font-display);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:12px;font-weight:700}
.mega-link{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-sm);transition:background-color .2s,transform .25s var(--ease)}
.mega-link:hover{background:var(--blue-50);transform:translateX(3px)}
.mega-link .mi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--grad-cool);color:#fff;flex:none}
.mega-link .mi svg{width:18px;height:18px}
.mega-link.p .mi{background:var(--grad-warm)}
.mega-link.t .mi{background:linear-gradient(120deg,#14B8A6,#3B6BF5)}
.mega-link strong{display:block;font-family:var(--font-display);font-size:.96rem;font-weight:700;line-height:1.3}
.mega-link em{font-style:normal;font-size:.83rem;color:var(--ink-3);line-height:1.45}
.mega-feature{background:var(--grad-navy);border-radius:var(--r-lg);padding:22px;color:#DCE4FA;position:relative;overflow:hidden}
.mega-feature h4{color:#fff;font-size:1.1rem;margin-bottom:8px}
.mega-feature p{font-size:.88rem;color:#A9B7DC;margin-bottom:16px}
.mega-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}

.burger{display:none;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:#fff;place-items:center;flex:none}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;top:0;z-index:1500;background:#fff;overflow-y:auto;
  transform:translateX(100%);transition:transform .42s var(--ease);padding:20px var(--gutter) 60px;
}
.mobile-nav.open{transform:none}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.macc{border-bottom:1px solid var(--line)}
.macc>button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 4px;font-family:var(--font-display);font-weight:700;font-size:1.12rem;text-align:left}
.macc>button .chev{transition:transform .3s var(--ease)}
.macc.open>button .chev{transform:rotate(180deg)}
.macc-body{display:none;padding:0 4px 18px}
.macc.open .macc-body{display:block}
.macc-body a{display:block;padding:11px 12px;border-radius:10px;color:var(--ink-2);font-weight:500}
.macc-body a:hover{background:var(--bg-tint);color:var(--ink)}

@media(max-width:1140px){
  .nav-links,.nav-tel{display:none}
  .burger{display:grid}
  .nav-actions .btn.nav-cta{display:none}
}
@media(max-width:520px){ .nav-actions .btn{padding:12px 18px;min-height:46px;font-size:.9rem} .logo-nav{height:46px} }

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:clip;padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(44px,5vw,78px)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,4vw,60px);align-items:center}
.hero h1{margin-top:22px}
.hero .lede{margin-top:24px;max-width:56ch}
.hero .btn-row{margin-top:34px}
.hero-proof{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.avatars{display:flex}
.avatars span{width:38px;height:38px;border-radius:50%;border:2.5px solid #fff;margin-left:-11px;background:var(--grad-brand);display:grid;place-items:center;color:#fff;font-size:.78rem;font-weight:700;font-family:var(--font-display);box-shadow:var(--sh-sm)}
.avatars span:first-child{margin-left:0}
.avatars span:nth-child(2){background:var(--grad-warm)}
.avatars span:nth-child(3){background:var(--grad-cool)}
.avatars span:nth-child(4){background:linear-gradient(120deg,#FF7A1A,#7C3AED)}
.stars{color:#FFAA2B;letter-spacing:2px;font-size:1rem}

.hero-stats{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border-top:1px solid var(--line);padding-top:20px}
.hero-stats .n{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.03em;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats .l{font-size:.8rem;color:var(--ink-3);line-height:1.35;margin-top:2px}

/* Hero visual: angular brand banner */
.hero-visual{position:relative;min-height:0}
.hb{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r-2xl);overflow:hidden;
  background:var(--grad-navy);box-shadow:var(--sh-xl);isolation:isolate;
}
/* Drop a real photo in by setting --hero-photo on .hb, e.g. style="--hero-photo:url(team.webp)" */
.hb-media{
  position:absolute;inset:0;z-index:1;
  background:var(--hero-photo, none) center/cover no-repeat, linear-gradient(150deg,#0E1738,#1B2A5B 60%,#241C52);
}
.hb[style*="--hero-photo"] .canvas{display:none}

/* brand shards, echoing the logo palette */
.hb-shard{position:absolute;z-index:2;pointer-events:none}
.sh-ink{inset:0;background:#141426;opacity:.94;clip-path:polygon(0 0, 30% 0, 0 44%)}
.sh-lime{inset:0;background:#C3F000;opacity:.9;clip-path:polygon(0 16%, 22% 0, 30% 30%, 11% 88%, 0 74%)}
.sh-violet{inset:0;background:#9B1FE8;opacity:.85;clip-path:polygon(0 72%, 24% 72%, 38% 100%, 0 100%)}
.sh-rose{inset:0;background:#D6215F;opacity:.6;clip-path:polygon(0 84%, 13% 84%, 21% 100%, 0 100%)}

/* ============ ANIMATED SERVICE SHOWREEL ============ */
.reel{position:absolute;top:6%;left:30%;right:3.5%;bottom:15%;z-index:3}
.scene{position:absolute;inset:0;opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.scene.on{opacity:1;transform:none}

.reel .win{position:absolute;inset:0;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);display:flex;flex-direction:column}
.reel .win.dark{background:#0E1738}
.reel .win-bar{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--bg-soft);
  border-bottom:1px solid var(--line);flex:none}
.reel .win-bar.dark{background:#131E48;border-bottom-color:rgba(255,255,255,.1)}
.reel .win-bar i{width:6px;height:6px;border-radius:50%;background:#FF5F57;display:block;flex:none}
.reel .win-bar i:nth-child(2){background:#FEBC2E}.reel .win-bar i:nth-child(3){background:#28C840}
.reel .win-bar u{flex:1;height:16px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);
  text-decoration:none;font-size:.54rem;color:var(--ink-4);display:flex;align-items:center;padding:0 8px;
  overflow:hidden;white-space:nowrap}
.reel .win-bar.dark u{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#B7C5EA;
  font-weight:600;letter-spacing:.01em}
.reel .win-body{flex:1;padding:10px;display:flex;flex-direction:column;gap:7px;position:relative;min-height:0}

/* ---- 1. Website design and build ---- */
.sc-web .bp{display:flex;gap:3px;flex:none}
.sc-web .bp b{font-size:.46rem;font-weight:700;padding:3px 6px;border-radius:5px;background:var(--line-2);
  color:var(--ink-4);font-family:var(--font-display)}
.sc-web .bp b.on{background:var(--grad-brand);color:#fff}
.sc-web .wblk{position:relative;flex:1;min-height:0;border-radius:9px;padding:12px 13px;opacity:0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  background:linear-gradient(120deg,#EDF7C9,#E7DAFB 55%,#FBD9E6)}
.sc-web .wt{display:block;font-family:var(--font-display);font-weight:800;font-size:.78rem;
  color:#12131F;line-height:1.2;letter-spacing:-.02em}
.sc-web .ws{display:block;font-size:.56rem;color:#4A4560;margin-top:3px}
.sc-web .wbtn{display:inline-block;margin-top:8px;background:#12131F;color:#fff;font-size:.52rem;
  font-weight:700;font-family:var(--font-display);padding:5px 11px;border-radius:var(--r-pill)}
.sc-web .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:1.15;min-height:0}
.sc-web .cols .c{border-radius:8px;background:var(--bg-tint);border:1px solid var(--line-2);opacity:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 6px;
  text-align:center}
.sc-web .cols .c b{font-size:.56rem;font-weight:700;font-family:var(--font-display);color:var(--ink-2)}
.sc-web .cols .c em{font-style:normal;font-size:.46rem;line-height:1.3;color:var(--ink-4);font-weight:600}
.sc-web .cols .c i{width:22px;height:22px;border-radius:7px;display:block;flex:none}
.sc-web .cols .c:nth-child(1) i{background:linear-gradient(135deg,#C3F000,#8fbf00)}
.sc-web .cols .c:nth-child(2) i{background:linear-gradient(135deg,#9B1FE8,#6D28D9)}
.sc-web .cols .c:nth-child(3) i{background:linear-gradient(135deg,#D6215F,#F5A623)}
.scene.on.sc-web .wblk{animation:popIn .45s var(--ease) .1s forwards}
.scene.on.sc-web .cols .c{animation:popIn .4s var(--ease) forwards}
.scene.on.sc-web .cols .c:nth-child(1){animation-delay:.5s}
.scene.on.sc-web .cols .c:nth-child(2){animation-delay:.64s}
.scene.on.sc-web .cols .c:nth-child(3){animation-delay:.78s}
.sc-web .marquee-sel{position:absolute;inset:0;border:1.5px solid #C3F000;border-radius:9px;opacity:0}
.sc-web .marquee-sel em{position:absolute;top:-13px;left:-1px;background:#C3F000;color:#12131F;font-style:normal;
  font-size:.48rem;font-weight:800;padding:2px 6px;border-radius:4px;font-family:var(--font-display)}
.scene.on.sc-web .marquee-sel{animation:popIn .35s var(--ease) 1s forwards}
@keyframes popIn{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}

/* ---- 2. eCommerce and marketplace ---- */
.sc-shop .cart{margin-left:auto;background:#12131F;color:#fff;font-size:.48rem;font-weight:700;
  padding:4px 8px;border-radius:var(--r-pill);flex:none;font-family:var(--font-display);opacity:0;white-space:nowrap}
.scene.on.sc-shop .cart{animation:popIn .4s var(--ease) 1s forwards}
.sc-shop .prods{display:grid;grid-template-columns:1fr 1fr;gap:7px;flex:1;min-height:0}
.sc-shop .pd{border-radius:9px;opacity:0;background:#fff;border:1px solid var(--line);padding:7px;
  display:flex;flex-direction:column;gap:4px}
.sc-shop .pd .sw{flex:1;min-height:32px;border-radius:6px;display:block}
.sc-shop .sw.a{background:linear-gradient(140deg,#DCE8FF,#93B4FF)}
.sc-shop .sw.b{background:linear-gradient(140deg,#EBE1FF,#C4A9FF)}
.sc-shop .sw.c{background:linear-gradient(140deg,#D2F8EF,#7EE7D2)}
.sc-shop .sw.d{background:linear-gradient(140deg,#FFE5D2,#FFB679)}
.sc-shop .pd b{font-family:var(--font-display);font-size:.55rem;font-weight:700;color:var(--ink);line-height:1.2}
.sc-shop .pd em{font-style:normal;font-size:.55rem;font-weight:800;color:var(--ink-2);font-family:var(--font-display)}
.scene.on.sc-shop .pd{animation:popIn .4s var(--ease) forwards}
.scene.on.sc-shop .pd:nth-child(1){animation-delay:.1s}
.scene.on.sc-shop .pd:nth-child(2){animation-delay:.22s}
.scene.on.sc-shop .pd:nth-child(3){animation-delay:.34s}
.scene.on.sc-shop .pd:nth-child(4){animation-delay:.46s}
.sc-shop .checkout{height:27px;border-radius:var(--r-pill);background:var(--grad-brand);color:#fff;
  display:grid;place-items:center;font-size:.6rem;font-weight:800;font-family:var(--font-display);
  flex:none;opacity:0}
.scene.on.sc-shop .checkout{animation:popIn .4s var(--ease) .85s forwards, pulseGlow 1.5s var(--ease-soft) 1.4s infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(155,31,232,0)}50%{box-shadow:0 0 0 6px rgba(155,31,232,.18)}}

/* ---- 3. Custom software and portals ---- */
.sc-app .app{flex:1;display:flex;min-height:0}
.sc-app .side{width:24px;flex:none;border-right:1px solid var(--line);padding:8px 0;display:flex;
  flex-direction:column;align-items:center;gap:6px;background:#FCFDFF}
.sc-app .side span{width:12px;height:12px;border-radius:4px;background:var(--line-2);display:block}
.sc-app .side span.on{background:var(--grad-brand)}
.sc-app .apbody{flex:1;padding:9px;display:flex;flex-direction:column;gap:7px;min-width:0}
.sc-app .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:none}
.sc-app .k{background:var(--bg-soft);border:1px solid var(--line-2);border-radius:8px;padding:6px 8px;
  font-size:.46rem;color:var(--ink-4);font-weight:600;display:flex;flex-direction:column;opacity:0}
.sc-app .k b{font-family:var(--font-display);font-size:.82rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.scene.on.sc-app .k{animation:popIn .4s var(--ease) forwards}
.scene.on.sc-app .k:nth-child(1){animation-delay:.1s}
.scene.on.sc-app .k:nth-child(2){animation-delay:.2s}
.scene.on.sc-app .k:nth-child(3){animation-delay:.3s}
.sc-app .thead{display:grid;grid-template-columns:1.25fr 1fr 62px;gap:6px;padding:0 7px;flex:none;
  font-size:.44rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  font-family:var(--font-display)}
.sc-app .rows{flex:1;display:flex;flex-direction:column;gap:4px;min-height:0}
.sc-app .r{display:grid;grid-template-columns:1.25fr 1fr 62px;gap:6px;align-items:center;opacity:0;
  flex:1;min-height:0;padding:0 7px;border-radius:7px;background:var(--bg-soft);font-size:.54rem;color:var(--ink-2)}
.sc-app .r span:first-child{font-weight:700;color:var(--ink);font-family:var(--font-display);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-app .r span:nth-child(2){color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-app .pill{font-size:.44rem;font-weight:800;padding:3px 6px;border-radius:var(--r-pill);
  font-family:var(--font-display);text-align:center;white-space:nowrap}
.sc-app .pill.ok{background:#D2F8EF;color:#0D8A7C}
.sc-app .pill.wait{background:#FFE5D2;color:#B44E00}
.sc-app .pill.new{background:#EBE1FF;color:#6D28D9}
.scene.on.sc-app .r{animation:slideIn .4s var(--ease) forwards}
.scene.on.sc-app .r:nth-child(1){animation-delay:.42s}
.scene.on.sc-app .r:nth-child(2){animation-delay:.54s}
.scene.on.sc-app .r:nth-child(3){animation-delay:.66s}
.scene.on.sc-app .r:nth-child(4){animation-delay:.78s}
.scene.on.sc-app .r:nth-child(5){animation-delay:.9s}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ---- 4. AI assistants and agents ---- */
.sc-ai .av{width:18px;height:18px;border-radius:6px;background:var(--grad-brand);color:#fff;
  display:grid;place-items:center;font-size:.42rem;font-weight:800;font-family:var(--font-display);flex:none}
.sc-ai .live{width:7px;height:7px;border-radius:50%;background:#C3F000;flex:none;animation:blink 1.4s infinite}
.sc-ai .chat{flex:1;padding:11px;display:flex;flex-direction:column;gap:7px;justify-content:flex-end;min-height:0}
.sc-ai .bub{max-width:88%;padding:8px 11px;border-radius:13px;font-size:.6rem;line-height:1.45;opacity:0}
.sc-ai .bub.u{align-self:flex-end;background:linear-gradient(120deg,#9B1FE8,#D6215F);color:#fff;border-bottom-right-radius:4px}
.sc-ai .bub.a{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);color:#DCE4FA;border-bottom-left-radius:4px}
.sc-ai .bub.typing{display:flex;gap:3px;align-items:center;padding:9px 11px;max-width:44px}
.sc-ai .bub.typing i{width:4px;height:4px;border-radius:50%;background:#8FA0CC;display:block;animation:blink 1.1s infinite}
.sc-ai .bub.typing i:nth-child(2){animation-delay:.18s}.sc-ai .bub.typing i:nth-child(3){animation-delay:.36s}
.scene.on.sc-ai .bub{animation:bubUp .4s var(--ease) forwards}
.scene.on.sc-ai .bub:nth-child(1){animation-delay:.08s}
.scene.on.sc-ai .bub:nth-child(2){animation-delay:.4s}
.scene.on.sc-ai .bub:nth-child(3){animation-delay:.75s}
.scene.on.sc-ai .bub:nth-child(4){animation-delay:1.1s}
.scene.on.sc-ai .bub:nth-child(5){animation-delay:1.45s}
.scene.on.sc-ai .bub:nth-child(6){animation-delay:1.8s}
.scene.on.sc-ai .bub:nth-child(7){animation-delay:2.15s}
.scene.on.sc-ai .bub:nth-child(8){animation-delay:2.5s}
@keyframes bubUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- 5. Workflow automation ---- */
.sc-auto .flowmap{flex:1;position:relative;min-height:0;padding:12px 12px 12px 32px;
  display:flex;flex-direction:column;gap:8px}
.sc-auto .rail{position:absolute;left:20px;top:26px;bottom:26px;width:2px;border-radius:2px;
  background:rgba(255,255,255,.13);overflow:hidden}
.sc-auto .rail::after{content:"";position:absolute;inset:0;transform:scaleY(0);transform-origin:top;
  background:linear-gradient(180deg,#C3F000,#9B1FE8)}
.scene.on.sc-auto .rail::after{animation:railGrow 1.9s var(--ease) .2s forwards}
@keyframes railGrow{to{transform:scaleY(1)}}
.sc-auto .step{position:relative;flex:1;min-height:0;opacity:0;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:10px;padding:0 12px}
.sc-auto .step>i{position:absolute;left:-17px;width:11px;height:11px;border-radius:50%;flex:none;
  background:#0E1738;border:2px solid #9B1FE8;box-shadow:0 0 0 3px rgba(14,23,56,1)}
.sc-auto .step b{display:block;font-family:var(--font-display);font-size:.6rem;font-weight:700;
  color:#fff;line-height:1.2}
.sc-auto .step em{display:block;font-style:normal;font-size:.5rem;color:#9FB0DC;margin-top:2px}
.sc-auto .step u{margin-left:auto;flex:none;text-decoration:none;width:16px;height:16px;border-radius:50%;
  background:#C3F000;position:relative;opacity:0}
.sc-auto .step u::after{content:"";position:absolute;left:5.5px;top:3px;width:4px;height:7.5px;
  border:solid #12131F;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.scene.on.sc-auto .step{animation:slideIn .4s var(--ease) forwards}
.scene.on.sc-auto .s1{animation-delay:.15s}.scene.on.sc-auto .s2{animation-delay:.5s}
.scene.on.sc-auto .s3{animation-delay:.85s}.scene.on.sc-auto .s4{animation-delay:1.2s}
.scene.on.sc-auto .step u{animation:popIn .3s var(--ease) forwards}
.scene.on.sc-auto .s1 u{animation-delay:.75s}.scene.on.sc-auto .s2 u{animation-delay:1.1s}
.scene.on.sc-auto .s3 u{animation-delay:1.45s}.scene.on.sc-auto .s4 u{animation-delay:1.8s}

/* ---- 6. SEO and growth ---- */
.sc-seo .win-body{gap:7px}
.sc-seo .q{display:flex;align-items:center;gap:6px;font-size:.58rem;color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 10px;flex:none}
.sc-seo .list{position:relative;height:146px;flex:none}
.sc-seo .res{position:absolute;left:0;right:0;height:32px;display:flex;flex-direction:column;
  justify-content:center;gap:1px;padding:0 8px;border-radius:7px;opacity:0}
.sc-seo .res b{font-family:var(--font-display);font-size:.58rem;font-weight:700;color:#1D4ED8;line-height:1.2}
.sc-seo .res em{font-style:normal;font-size:.5rem;color:var(--ink-4)}
.sc-seo .r1{top:0}.sc-seo .r2{top:38px}.sc-seo .r3{top:76px}.sc-seo .mine{top:114px}
.sc-seo .mine{background:linear-gradient(90deg,rgba(195,240,0,.28),transparent);border:1px solid rgba(195,240,0,.6)}
.sc-seo .mine b{background:var(--grad-text-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-seo .mine u{position:absolute;right:8px;top:50%;transform:translateY(-50%);text-decoration:none;font-size:.5rem;
  font-weight:800;background:#C3F000;color:#12131F;padding:2px 7px;border-radius:4px;font-family:var(--font-display)}
.scene.on.sc-seo .r1{animation:popIn .35s var(--ease) .15s forwards, shiftDown .6s var(--ease) 1.15s forwards}
.scene.on.sc-seo .r2{animation:popIn .35s var(--ease) .28s forwards, shiftDown .6s var(--ease) 1.15s forwards}
.scene.on.sc-seo .r3{animation:popIn .35s var(--ease) .41s forwards, shiftDown .6s var(--ease) 1.15s forwards}
.scene.on.sc-seo .mine{animation:popIn .35s var(--ease) .54s forwards, climbTop .6s var(--ease) 1.15s forwards}
@keyframes shiftDown{from{transform:translateY(0)}to{transform:translateY(38px)}}
@keyframes climbTop{from{transform:translateY(0)}to{transform:translateY(-114px)}}
.sc-seo .growth{margin-top:auto;flex:none}
.sc-seo .glab{display:block;font-size:.46rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);font-family:var(--font-display);margin-bottom:6px}
.sc-seo .months{display:flex;gap:4px;margin-top:4px}
.sc-seo .months span{flex:1;text-align:center;font-size:.42rem;font-weight:700;color:var(--ink-4);
  font-family:var(--font-display)}
.sc-seo .bars{display:flex;align-items:flex-end;gap:4px;height:76px}
.sc-seo .bars i{flex:1;border-radius:3px 3px 2px 2px;background:var(--grad-cool);transform:scaleY(.06);
  transform-origin:bottom;display:block}
.scene.on.sc-seo .bars i{animation:grow .5s var(--ease) forwards}
.scene.on.sc-seo .bars i:nth-child(1){height:26%;animation-delay:.7s}
.scene.on.sc-seo .bars i:nth-child(2){height:40%;animation-delay:.8s}
.scene.on.sc-seo .bars i:nth-child(3){height:34%;animation-delay:.9s}
.scene.on.sc-seo .bars i:nth-child(4){height:58%;animation-delay:1s}
.scene.on.sc-seo .bars i:nth-child(5){height:76%;animation-delay:1.1s}
.scene.on.sc-seo .bars i:nth-child(6){height:100%;animation-delay:1.2s;background:linear-gradient(180deg,#C3F000,#9B1FE8)}
@keyframes grow{to{transform:scaleY(1)}}

/* HUD: service name + progress dots */
.reel-hud{position:absolute;left:34%;right:30%;bottom:4.5%;z-index:4;display:flex;flex-direction:column;
  align-items:flex-start;gap:7px}
.reel-name{display:block;max-width:100%;font-family:var(--font-display);font-weight:800;font-size:.74rem;
  color:#fff;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel-dots{display:flex;gap:5px;flex:none}
.reel-dots i{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);display:block;
  transition:background .4s,width .4s}
.reel-dots i.on{background:#C3F000;width:26px}

@media (prefers-reduced-motion:reduce){
  .scene{transition:none}
  .scene .wblk,.scene .cols .c,.scene .r,.scene .k,.scene .bub,.scene .pd,.scene .step,.scene .step u,
  .scene .res,.scene .bars i,.scene .cart,.scene .checkout,.scene .marquee-sel{opacity:1 !important;transform:none !important}
  .sc-auto .rail::after{transform:scaleY(1) !important}
}

.hfloat{position:absolute;z-index:5;border-radius:var(--r-lg);padding:13px 15px;box-shadow:var(--sh-lg);background:var(--glass-strong);backdrop-filter:blur(18px);border:1px solid var(--glass-border);display:flex;align-items:center;gap:12px}
.hfloat>span:last-child{display:block;min-width:0}
.hfloat .t{display:block;font-family:var(--font-display);font-weight:700;font-size:.88rem;line-height:1.25}
.hfloat .s{display:block;font-size:.75rem;color:var(--ink-3);line-height:1.35}
.hf-ai{top:-22px;left:-54px;max-width:232px;animation:float-y 6.5s var(--ease-soft) infinite}
.hf-speed{bottom:82px;left:-66px;max-width:222px;animation:float-y2 7.5s var(--ease-soft) infinite}
.hf-leads{bottom:-20px;right:-44px;max-width:226px;animation:float-y 8s var(--ease-soft) infinite;animation-delay:-2s}
.hfloat .ring{position:relative;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--grad-brand);color:#fff;flex:none}
.hfloat.orange .ring{background:linear-gradient(120deg,#D6215F,#F5A623)}
.hfloat.teal .ring{background:linear-gradient(120deg,#9B1FE8,#C3F000)}

@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{margin-top:34px}
  .hb{aspect-ratio:16/9}
  .hf-ai{top:-18px;left:-8px}
  .hf-speed{bottom:auto;top:38%;left:-14px}
  .hf-leads{bottom:-18px;right:-8px}
}
@media(max-width:760px){
  /* Give the reel real width back: pull the shards in and shrink the float cards. */
  .hb{aspect-ratio:5/4}
  .sh-ink{clip-path:polygon(0 0, 19% 0, 0 30%)}
  .sh-lime{clip-path:polygon(0 10%, 14% 0, 19% 24%, 7% 78%, 0 66%)}
  .sh-violet{clip-path:polygon(0 76%, 15% 76%, 25% 100%, 0 100%)}
  .sh-rose{clip-path:polygon(0 88%, 8% 88%, 15% 100%, 0 100%)}
  .reel{left:19%;right:3.5%;top:5%;bottom:12%}
  .reel-name{display:none}
  .reel-hud{left:21%;right:auto;bottom:3.5%}
  .hfloat{padding:10px 12px;gap:9px}
  .hfloat .ring{width:32px;height:32px;border-radius:10px}
  .hfloat .t{font-size:.8rem}
  .hfloat .s{font-size:.68rem}
  .hf-ai{max-width:196px}
  .hf-leads{max-width:190px;bottom:-14px;right:-4px}
  .sc-web .cols .c em{display:none}
  .sc-web .cols .c{gap:7px}
  .sc-auto .step em,.sc-app .k,.sc-seo .months{font-size:.44rem}
  .sc-auto .flowmap{padding:10px 10px 10px 28px}
}
@media(max-width:620px){
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:18px 10px}
  .reel{top:9%;left:19%;right:4%;bottom:13%}
  .hb{aspect-ratio:5/4}
  .canvas{left:30%;right:4%}
  /* Only one float card at this width, or it sits on top of the reel. */
  .hf-speed,.hf-ai{display:none}
  .hf-leads{bottom:-46px;right:-4px;max-width:206px}
  .hero-visual{margin-bottom:40px}
  .sc-app .apbody{padding:8px 7px}
  .sc-app .thead,.sc-app .r{grid-template-columns:1.15fr .85fr 56px;gap:4px;padding-inline:5px}
  .reel-hud{top:2%;bottom:auto;left:auto;right:4%}
  .hfloat{padding:9px 11px}
  .hfloat .t{font-size:.82rem}
  .hfloat .s{font-size:.7rem}
  .hfloat .ring{width:32px;height:32px;border-radius:10px}
}

/* ============================================================
   MARQUEE / LOGOS
   ============================================================ */
.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)}
.marquee-track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track.rev{animation-direction:reverse;animation-duration:52s}
.logo-chip{
  display:flex;align-items:center;gap:10px;padding:14px 24px;margin-right:14px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink-2);
  white-space:nowrap;transition:border-color .3s,color .3s,box-shadow .3s,transform .3s var(--ease);
}
.logo-chip:hover{color:var(--ink);border-color:var(--blue-300);box-shadow:var(--sh-md);transform:translateY(-2px)}
.logo-chip .lg{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:.7rem;color:#fff;font-weight:800;flex:none}
.on-dark .logo-chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#C3CFEE}
.on-dark .logo-chip:hover{color:#fff;border-color:rgba(255,255,255,.3)}


/* ============================================================
   SERVICES
   ============================================================ */
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:36px}
.tab{
  padding:11px 20px;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:700;font-size:.92rem;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);transition:all .3s var(--ease);
}
.tab:hover{border-color:var(--blue-300);color:var(--blue-700);transform:translateY(-2px)}
.tab[aria-selected="true"]{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:var(--sh-glow)}
.tabpanel[hidden]{display:none}
.svc-card{display:flex;flex-direction:column;gap:14px;padding:26px;height:100%}
.svc-card h3{font-size:1.16rem}
.svc-card p{font-size:.93rem;color:var(--ink-3);line-height:1.55;flex:1}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px}
.svc-tags .pill{font-size:.74rem;padding:5px 11px}
.svc-more{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.88rem;color:var(--blue-700);font-family:var(--font-display);transition:gap .3s var(--ease)}
.svc-card:hover .svc-more{gap:12px}
.svc-count{position:absolute;top:18px;right:20px;font-family:var(--font-display);font-size:.72rem;font-weight:700;color:var(--ink-4);z-index:2}

.chipgrid{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);font-weight:600;font-size:.9rem;color:var(--ink-2);
  transition:all .28s var(--ease);
}
.chip:hover{transform:translateY(-3px);border-color:transparent;background:var(--grad-brand);color:#fff;box-shadow:var(--sh-glow)}
.chip .cd{width:6px;height:6px;border-radius:50%;background:var(--grad-brand);flex:none;transition:background .28s}
.chip:hover .cd{background:#fff}
.on-dark .chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#C3CFEE}

/* ============================================================
   INDUSTRIES
   ============================================================ */
.ind-card{padding:22px;display:flex;flex-direction:column;gap:12px;min-height:172px}
.ind-card h3{font-size:1.02rem}
.ind-card p{font-size:.85rem;color:var(--ink-3);line-height:1.5;flex:1}
.ind-card .link-arrow{font-size:.84rem}

/* ============================================================
   COMPARISON
   ============================================================ */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,28px);align-items:stretch}
.cmp{border-radius:var(--r-xl);padding:clamp(20px,2.4vw,30px);position:relative;overflow:hidden}
.cmp-bad{background:var(--bg-soft);border:1px solid var(--line)}
.cmp-good{background:var(--grad-navy);color:#DCE4FA;box-shadow:var(--sh-xl);border:1px solid rgba(255,255,255,.1)}
.cmp-good::before{content:"";position:absolute;inset:0;background:var(--grad-mesh);opacity:.5;pointer-events:none}
.cmp h3{font-size:1.32rem;margin-bottom:6px}
.cmp-good h3{color:#fff}
.cmp .sub{font-size:.88rem;color:var(--ink-4);margin-bottom:16px}
.cmp-good .sub{color:#8FA0CC}
.cmp li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);font-size:.97rem;position:relative;z-index:1}
.cmp-good li{border-top-color:rgba(255,255,255,.1)}
.cmp li:first-child{border-top:0}
.mk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px}
.mk.x{background:#FEE9E9;color:#D64545}
.mk.v{background:linear-gradient(120deg,rgba(20,184,166,.3),rgba(59,107,245,.3));color:#7EE7D2;border:1px solid rgba(126,231,210,.3)}
.mk svg{width:13px;height:13px}
.cmp-bad li{color:var(--ink-3)}
@media(max-width:820px){.compare{grid-template-columns:1fr}}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.pf-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.pf-shot{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--grad-navy)}
.pf-shot .mesh-mini{position:absolute;inset:0;background:var(--grad-mesh);opacity:.85}
.pf-mock{position:absolute;inset:16% 10% -6% 10%;border-radius:14px 14px 0 0;background:#fff;box-shadow:0 -20px 50px -18px rgba(0,0,0,.5);overflow:hidden;transition:transform .6s var(--ease)}
.pf-card:hover .pf-mock{transform:translateY(-10px) scale(1.02)}
.pf-mock .mb{height:22px;background:var(--bg-soft);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 9px;gap:4px}
.pf-mock .mb i{width:6px;height:6px;border-radius:50%;background:#D9DEE9}
.pf-mock .mc{padding:11px}
.pf-mock .ml{height:8px;border-radius:4px;background:var(--line);margin-bottom:7px}
.pf-mock .ml.w1{width:52%;background:var(--grad-brand);height:11px}
.pf-mock .ml.w2{width:80%}
.pf-mock .ml.w3{width:66%}
.pf-mock .mg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px}
.pf-mock .mg i{height:30px;border-radius:7px;background:var(--bg-tint);display:block}
.pf-mock .mg i:nth-child(1){background:var(--blue-50)}
.pf-mock .mg i:nth-child(2){background:var(--purple-50)}
.pf-mock .mg i:nth-child(3){background:var(--teal-50)}
.pf-badge{position:absolute;top:14px;left:14px;z-index:3}
.pf-live{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:linear-gradient(180deg,rgba(6,12,34,.25),rgba(6,12,34,.75));opacity:0;transition:opacity .4s var(--ease)}
.pf-card:hover .pf-live,.pf-card:focus-within .pf-live{opacity:1}
.pf-live b{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--navy-800);font-family:var(--font-display);font-size:.92rem;padding:12px 22px;border-radius:var(--r-pill);box-shadow:var(--sh-lg);transform:translateY(8px);transition:transform .4s var(--ease)}
.pf-card:hover .pf-live b{transform:none}
.pf-body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.pf-body h3{font-size:1.18rem}
.pf-metrics{display:flex;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.pf-metrics div .m{font-family:var(--font-display);font-weight:800;font-size:1.22rem;letter-spacing:-.03em;background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-metrics div .ml2{font-size:.74rem;color:var(--ink-4)}

/* Case study accordion */
.cs{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;transition:box-shadow .4s var(--ease),border-color .3s}
.cs+.cs{margin-top:14px}
.cs.open{box-shadow:var(--sh-lg);border-color:transparent}
.cs-head{width:100%;display:flex;align-items:center;gap:16px;padding:17px 22px;text-align:left}
.cs-num{font-family:var(--font-display);font-weight:800;font-size:.86rem;color:#fff;width:38px;height:38px;border-radius:12px;background:var(--grad-brand);display:grid;place-items:center;flex:none}
.cs-head h3{font-size:1.14rem}
.cs-head .cs-meta{font-size:.84rem;color:var(--ink-4);margin-top:3px}
.cs-toggle{margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:transform .35s var(--ease),background-color .3s,color .3s}
.cs.open .cs-toggle{transform:rotate(45deg);background:var(--grad-brand);color:#fff;border-color:transparent}
.cs-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.cs.open .cs-body{grid-template-rows:1fr}
.cs-body>div{overflow:hidden}
.cs-inner{padding:0 26px 26px;display:grid;grid-template-columns:1.25fr 1fr;gap:26px}
.cs-block h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-bottom:7px}
.cs-block p{font-size:.95rem;color:var(--ink-2);line-height:1.6}
.cs-block+.cs-block{margin-top:18px}
.cs-results{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
.cs-results .row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.cs-results .row:last-child{border-bottom:0}
.cs-results .row b{font-family:var(--font-display);font-size:1.12rem;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-quote{margin-top:16px;font-size:.92rem;font-style:italic;color:var(--ink-2);border-left:3px solid var(--purple-300);padding-left:14px}
@media(max-width:820px){.cs-inner{grid-template-columns:1fr}.cs-head{padding:20px}}

/* ============================================================
   TECH STACK / AI / WORKFLOW
   ============================================================ */
.orbit{position:relative;width:min(100%,330px);aspect-ratio:1;margin-inline:auto}
.orbit-ring{position:absolute;inset:0;border:1px dashed rgba(255,255,255,.16);border-radius:50%}
.orbit-ring.r2{inset:14%}.orbit-ring.r3{inset:28%}
.orbit-core{position:absolute;inset:40%;border-radius:50%;background:var(--grad-brand);display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:800;font-size:.9rem;text-align:center;box-shadow:0 0 70px -10px rgba(124,58,237,.8);line-height:1.2}
.orbit-core::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(124,58,237,.5);animation:pulse-ring 3s var(--ease-soft) infinite}
.orbit-item{position:absolute;inset:0;pointer-events:none}
.orbit-item>span{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:auto;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);
  padding:6px 11px;border-radius:var(--r-pill);font-size:.74rem;font-weight:600;color:#DCE4FA;
  transition:all .3s var(--ease);
}
.orbit-item>span:hover{background:var(--grad-brand);border-color:transparent;color:#fff;transform:translate(-50%,-50%) scale(1.08)}

.ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.ai-card{padding:22px;display:flex;flex-direction:column;gap:11px}
.ai-card h3{font-size:1.02rem}
.ai-card p{font-size:.86rem;line-height:1.5}
.chatsim{border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);backdrop-filter:blur(20px)}
.chatsim-head{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.chatsim-head .av{width:34px;height:34px;border-radius:11px;background:var(--grad-brand);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.82rem}
.chatsim-head .live{margin-left:auto;font-size:.72rem;color:#7EE7D2;display:flex;align-items:center;gap:6px}
.chatsim-head .live i{width:7px;height:7px;border-radius:50%;background:#2DD4BF;animation:blink 1.6s infinite}
.chatsim-body{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:212px}
.bub{max-width:82%;padding:12px 16px;border-radius:16px;font-size:.9rem;line-height:1.5;opacity:0;transform:translateY(10px);animation:bubIn .5s var(--ease) forwards}
@keyframes bubIn{to{opacity:1;transform:none}}
.bub.u{align-self:flex-end;background:var(--grad-brand);color:#fff;border-bottom-right-radius:5px}
.bub.a{align-self:flex-start;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);color:#D7DFF6;border-bottom-left-radius:5px}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:#8FA0CC;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}

.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative}
@media(max-width:900px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.flow{grid-template-columns:1fr}}
.flow-step{
  display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);position:relative;
  transition:all .4s var(--ease);
}
.flow-step:hover,.flow-step.active{background:rgba(255,255,255,.1);border-color:rgba(126,231,210,.4);transform:translateY(-3px)}
.flow-step .fn{width:34px;height:34px;border-radius:11px;background:var(--grad-brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem;font-family:var(--font-display);flex:none}
.flow-step.active .fn{box-shadow:0 0 0 6px rgba(59,107,245,.22)}
.flow-step b{display:block;font-family:var(--font-display);font-size:1rem;color:#fff}
.flow-step em{font-style:normal;font-size:.84rem;color:#9AA9D2}
.flow-step .ft{margin-left:auto;font-size:.7rem;color:#7EE7D2;font-weight:700;white-space:nowrap}
.flow-step{align-items:flex-start}
.flow-step em{display:block;margin-top:2px}
.flow-conn{height:16px;margin-left:38px;border-left:2px dashed rgba(255,255,255,.2)}

/* ============================================================
   PROCESS
   ============================================================ */
.process{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:7px 16px}
.pstep{display:flex;gap:11px;align-items:flex-start;padding:10px 13px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.pstep:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--blue-300)}
.pstep .pn{font-family:var(--font-display);font-size:.76rem;font-weight:800;width:26px;height:26px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--bg-tint);color:var(--ink-3);transition:background .3s,color .3s}
.pstep:hover .pn{background:var(--grad-brand);color:#fff}
.pstep h3{font-size:.94rem;margin-bottom:2px}
.pstep p{font-size:.8rem;color:var(--ink-3);line-height:1.45}
.pstep .pt{font-size:.72rem;font-weight:700;color:var(--purple-600);margin-top:3px}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.process{grid-template-columns:1fr}}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tcard{padding:28px;display:flex;flex-direction:column;gap:16px;height:100%}
.tcard .quote{font-size:1.02rem;line-height:1.6;color:var(--ink);flex:1}
.tcard .who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.tcard .who .ava{width:44px;height:44px;border-radius:14px;background:var(--grad-brand);display:grid;place-items:center;color:#fff;font-weight:800;font-family:var(--font-display);flex:none}
.tcard .who b{display:block;font-family:var(--font-display);font-size:.95rem}
.tcard .who span{font-size:.82rem;color:var(--ink-3)}
.vplay{position:relative;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;background:var(--grad-navy);display:grid;place-items:center;margin-bottom:4px}
.vplay .pbtn{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--navy-800);box-shadow:var(--sh-lg);transition:transform .35s var(--ease)}
.vplay:hover .pbtn{transform:scale(1.1)}
.vplay .pbtn::after{content:"";position:absolute;width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:pulse-ring 2.4s var(--ease-soft) infinite}
.gstrip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;padding:20px 26px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm)}

/* ============================================================
   FAQ
   ============================================================ */
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);align-items:start}
.faq{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:flex-start;gap:16px;padding:20px 4px;text-align:left;font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.4;transition:color .25s}
.faq-q:hover{color:var(--blue-700)}
.faq-q .fi{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--bg-tint);display:grid;place-items:center;flex:none;transition:transform .35s var(--ease),background .3s,color .3s;margin-top:2px}
.faq.open .fi{transform:rotate(45deg);background:var(--grad-brand);color:#fff}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 4px 22px;font-size:.95rem;color:var(--ink-3);line-height:1.65;max-width:62ch}
@media(max-width:820px){.faq-cols{grid-template-columns:1fr}}

/* ============================================================
   TOOLS: estimator / ROI / quiz
   ============================================================ */
.tool{border-radius:var(--r-2xl);padding:clamp(24px,3.2vw,44px);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.tool-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,44px)}
@media(max-width:900px){.tool-grid{grid-template-columns:1fr}}
.field{margin-bottom:20px}
.field>label,.field>.flabel{display:block;font-family:var(--font-display);font-weight:700;font-size:.92rem;margin-bottom:10px}
.field .hint{font-size:.8rem;color:var(--ink-4);font-weight:500;margin-left:6px}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;left:0;top:0;margin:0}
.opt span{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:.9rem;color:var(--ink-2);
  transition:all .25s var(--ease);
}
.opt input:hover+span{border-color:var(--blue-300)}
.opt input:focus-visible+span{outline:3px solid var(--blue-600);outline-offset:3px}
.opt input:checked+span{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:var(--sh-glow)}
input[type=range]{width:100%;accent-color:var(--blue-600);height:6px}
.inp{
  width:100%;padding:15px 18px;border-radius:var(--r-md);border:1.5px solid var(--line);background:#fff;
  font-size:1rem;transition:border-color .25s,box-shadow .25s;
}
.inp:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
textarea.inp{min-height:130px;resize:vertical}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6786' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px;padding-right:46px}
.result-panel{background:var(--grad-navy);border-radius:var(--r-xl);padding:clamp(22px,2.6vw,32px);color:#DCE4FA;position:relative;overflow:hidden;align-self:start;position:sticky;top:calc(var(--nav-h) + 20px)}
.result-panel::before{content:"";position:absolute;inset:0;background:var(--grad-mesh);opacity:.6;pointer-events:none}
.result-panel>*{position:relative;z-index:1}
.big-num{font-family:var(--font-display);font-size:clamp(2.2rem,4.6vw,3.1rem);font-weight:800;letter-spacing:-.035em;color:#fff;line-height:1.05}
.rp-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.9rem}
.rp-row:last-of-type{border-bottom:0}
.rp-row span{color:#9AA9D2}
.rp-row b{color:#fff;font-family:var(--font-display)}
.quiz-step[hidden]{display:none}
.progress{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;margin-bottom:26px}
.progress i{display:block;height:100%;border-radius:inherit;background:var(--grad-brand);transition:width .5s var(--ease);width:20%}

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3vw,44px);align-items:stretch}
.contact-grid>.reveal-r{display:flex;flex-direction:column}
.contact-grid>.reveal-r>.card{flex:1}
#contact-form{display:flex;flex-direction:column}
#contact-form .field:has(textarea){flex:1;display:flex;flex-direction:column}
#contact-form textarea{flex:1}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.cinfo-item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.cinfo-item:last-child{border-bottom:0}
.cinfo-item b{display:block;font-family:var(--font-display);color:#fff;font-size:.95rem}
.cinfo-item a,.cinfo-item span{font-size:.92rem;color:#A9B7DC}
.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.12);height:210px;position:relative;background:#0E1738}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .pinlbl{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px}
.map .pin{width:20px;height:20px;border-radius:50%;background:var(--orange-500);border:3px solid #fff;box-shadow:0 0 0 6px rgba(255,122,26,.25)}
.map .pinlbl b{background:#fff;color:var(--navy-800);font-size:.76rem;padding:4px 10px;border-radius:var(--r-pill);font-family:var(--font-display)}

.footer{background:var(--navy-900);color:#9AA9D2;padding-top:clamp(48px,5vw,74px);position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.09)}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-brand);opacity:.9}
.f-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:clamp(24px,3vw,40px)}
@media(max-width:1000px){.f-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:620px){.f-grid{grid-template-columns:1fr 1fr}}
.f-grid h2{font-family:var(--font-display);color:#fff;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px;font-weight:700}
.f-grid a{display:block;padding:6px 0;font-size:.92rem;transition:color .2s,transform .25s var(--ease)}
.f-grid a:hover{color:#fff;transform:translateX(3px)}
.f-bottom{margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(255,255,255,.1);padding:24px 0;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;font-size:.86rem}
.f-social{display:flex;gap:9px}
.f-social a{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;transition:all .3s var(--ease);padding:0}
.f-social a:hover{background:var(--grad-brand);border-color:transparent;color:#fff;transform:translateY(-3px)}
.f-social svg{width:18px;height:18px}
.newsletter{display:flex;gap:8px;margin-top:14px}
.newsletter input{flex:1;padding:13px 16px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font-size:.9rem}
.newsletter input::placeholder{color:#7A88B0}
.newsletter input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(59,107,245,.2)}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.badge{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:.78rem;font-weight:600;color:#C3CFEE}

/* ============================================================
   OVERLAYS: sticky CTA, chat, modal, exit intent, toast
   ============================================================ */
.stickycta{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:900;
  display:flex;align-items:center;gap:16px;padding:12px 12px 12px 24px;border-radius:var(--r-pill);
  background:rgba(10,19,48,.93);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--sh-xl);color:#fff;transition:transform .5s var(--ease);max-width:calc(100vw - 32px);
}
.stickycta.show{transform:translate(-50%,0)}
.stickycta .sc-t{font-family:var(--font-display);font-weight:700;font-size:.95rem;line-height:1.25}
.stickycta .sc-s{font-size:.78rem;color:#9AA9D2}
.stickycta .close{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#9AA9D2;flex:none}
.stickycta .close:hover{background:rgba(255,255,255,.1);color:#fff}
@media(max-width:640px){.stickycta{left:12px;right:12px;bottom:14px;transform:translateY(160%);width:auto;max-width:none;padding:10px 10px 10px 18px}.stickycta.show{transform:none}.stickycta .sc-s{display:none}.chatfab{bottom:98px;width:54px;height:54px}.chatpanel{bottom:160px}}

.chatfab{
  position:fixed;right:22px;bottom:22px;z-index:940;width:60px;height:60px;border-radius:50%;
  background:var(--grad-brand);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-glow);
  transition:transform .35s var(--ease);
}
.chatfab:hover{transform:scale(1.08) translateY(-2px)}
.chatfab .ping{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:var(--orange-500);border:2.5px solid #fff}
.chatpanel{
  position:fixed;right:22px;bottom:94px;z-index:941;width:min(360px,calc(100vw - 32px));border-radius:var(--r-xl);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-xl);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transition:all .35s var(--ease);
}
.chatpanel.open{opacity:1;visibility:visible;transform:none}
.chatpanel-head{padding:16px 18px;background:var(--grad-navy);color:#fff;display:flex;align-items:center;gap:11px}
.chatpanel-body{padding:16px;display:flex;flex-direction:column;gap:10px;max-height:320px;overflow-y:auto;background:var(--bg-soft)}
.cb{max-width:86%;padding:11px 14px;border-radius:15px;font-size:.9rem;line-height:1.5}
.cb.a{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px}
.cb.u{background:var(--grad-brand);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.chatpanel-foot{padding:12px;border-top:1px solid var(--line);display:flex;gap:8px}
.chatpanel-foot input{flex:1;padding:11px 14px;border-radius:var(--r-pill);border:1px solid var(--line);font-size:.9rem}
.chatpanel-foot input:focus{outline:none;border-color:var(--blue-600)}
.quickreplies{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 14px;background:var(--bg-soft)}
.quickreplies button{font-size:.78rem;padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;font-weight:600;transition:all .25s}
.quickreplies button:hover{background:var(--blue-50);border-color:var(--blue-300);color:var(--blue-700)}

.modal{
  position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:20px;
  background:rgba(6,12,34,.6);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.modal.open{opacity:1;visibility:visible}
.modal-card{
  width:min(560px,100%);max-height:88vh;overflow-y:auto;overflow-x:hidden;background:#fff;border-radius:var(--r-2xl);
  padding:clamp(26px,3.4vw,42px);box-shadow:var(--sh-xl);transform:translateY(18px) scale(.97);transition:transform .35s var(--ease);position:relative;
}
.modal.open .modal-card{transform:none}
.modal-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:var(--bg-tint);display:grid;place-items:center;transition:background .25s}
.modal-close:hover{background:var(--line)}
.modal-wide .modal-card{width:min(880px,100%)}
.modal-book .modal-card{width:min(720px,100%);padding:clamp(24px,3vw,34px)}
.mb-head{display:flex;gap:14px;align-items:center;margin-bottom:20px;padding-right:44px}
.mb-head .itile{width:46px;height:46px;border-radius:14px;flex:none}
.mb-head h2{font-size:1.35rem}
.mb-head .tiny{margin-top:3px}
.mb-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mb-grid .field{margin-bottom:14px}
.mb-grid .inp{padding:12px 15px;font-size:.94rem}
.mb-slots{border-left:1px solid var(--line);padding-left:22px}
.mb-label{font-family:var(--font-display);font-weight:700;font-size:.82rem;margin-bottom:9px}
.mb-label span{font-weight:500;color:var(--ink-4)}
.mb-slots .opt span{padding:8px 13px;font-size:.83rem}
.mb-slots .opts{gap:7px}
@media(max-width:620px){.mb-grid{grid-template-columns:1fr;gap:16px}.mb-slots{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:16px}}
.modal-tools .modal-card{width:min(1080px,100%);max-height:92vh}
.modal-tools .tool{box-shadow:none;border:0;padding:0;background:transparent}
.modal-tools .result-panel{position:static}
.tool-teaser{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;width:100%;cursor:pointer}

.toast{
  position:fixed;left:50%;bottom:calc(22px + 76px);transform:translate(-50%,20px);z-index:1700;
  background:var(--navy-800);color:#fff;padding:14px 22px;border-radius:var(--r-pill);box-shadow:var(--sh-xl);
  font-weight:600;font-size:.92rem;opacity:0;visibility:hidden;transition:all .35s var(--ease);display:flex;align-items:center;gap:10px;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* Scroll progress */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad-brand);z-index:1200;transition:width .1s linear}

/* Sub pages (router views) */
.view[hidden]{display:none}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem;color:var(--ink-3)}
.crumbs a:hover{color:var(--blue-700)}
.crumbs .sep{color:var(--ink-4)}
.subhero{position:relative;overflow:hidden;padding-block:clamp(46px,5.4vw,80px)}
.subhero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,3vw,50px);align-items:center}
@media(max-width:900px){.subhero-inner{grid-template-columns:1fr}}
.toc{position:sticky;top:calc(var(--nav-h) + 20px);align-self:start}
.toc a{display:block;padding:9px 14px;border-radius:10px;font-size:.9rem;color:var(--ink-3);border-left:2px solid var(--line)}
.toc a:hover{color:var(--ink);background:var(--bg-tint);border-left-color:var(--blue-600)}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-top:38px;margin-bottom:14px}
.prose h3{font-size:1.16rem;margin-top:26px;margin-bottom:10px}
.prose p{margin-bottom:16px;color:var(--ink-2);line-height:1.75}
.prose ul{margin-bottom:18px;display:grid;gap:9px}
.prose ul li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-2)}
.prose ul li::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;margin-top:3px;background:var(--teal-50);border:1px solid var(--teal-100);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D9488' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}

/* ============================================================
   CONDENSED HOME COMPONENTS
   ============================================================ */
.prac-card{padding:22px;display:flex;flex-direction:column;gap:10px;height:100%}
.prac-card h3{font-size:1.02rem;line-height:1.25}
.prac-card p{font-size:.82rem;color:var(--ink-3);line-height:1.5;flex:1}
.prac-foot{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:.8rem;color:var(--blue-700);transition:gap .3s var(--ease)}
.prac-card:hover .prac-foot{gap:11px}

.ind-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:10px}
.ind-tile{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line);font-family:var(--font-display);font-weight:700;font-size:.92rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s,color .2s;
}
.ind-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--blue-300);color:var(--blue-700)}
.ind-tile .itile{transition:transform .35s var(--ease)}
.ind-tile:hover .itile{transform:rotate(-6deg) scale(1.06)}

.minilist{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.mini{display:flex;gap:7px;align-items:flex-start;font-size:.83rem;color:var(--ink-2);line-height:1.4}
.mini i{flex:none;margin-top:2px;color:var(--teal-600)}
.mini i.t{color:var(--teal-600)}
.mini i.o{color:var(--orange-600)}
.mini i.b{color:var(--blue-600)}
@media(max-width:520px){.minilist{grid-template-columns:1fr}}

/* Tighter automation flow */
.flow-step{padding:11px 16px}
.flow-conn{height:9px}
.flow-step .fn{width:30px;height:30px;border-radius:10px;font-size:.75rem}
.flow-step em{font-size:.8rem}

.ai-card{padding:18px;gap:8px}
.ai-card h3{font-size:.98rem}
.ai-card p{font-size:.82rem}
.ai-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}

.tcard .vplay{aspect-ratio:16/9}
.tcard{padding:22px;gap:12px}
.tcard .quote{font-size:.96rem}

/* Compact blog list */
.bloglist{display:grid;gap:8px}
.blogrow{
  display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.blogrow:hover{transform:translateX(4px);box-shadow:var(--sh-md);border-color:var(--blue-300)}
.blogrow .bt{font-family:var(--font-display);font-weight:700;font-size:.98rem;flex:1;line-height:1.35}
.blogrow .bm{white-space:nowrap}
.blogrow .ba{color:var(--blue-700);flex:none;transition:transform .3s var(--ease)}
.blogrow:hover .ba{transform:translateX(4px)}
@media(max-width:640px){.blogrow{flex-wrap:wrap;gap:8px}.blogrow .bt{flex:1 1 100%;order:3}.blogrow .ba{order:2;margin-left:auto}}
.pstep{padding:22px}
.pstep .pn{font-size:2.6rem;top:12px;right:18px}
.pstep h3{font-size:1rem}
.pstep p{font-size:.85rem}

@media(max-width:1180px){.g5{grid-template-columns:repeat(4,1fr)}}
@media(max-width:960px){.g5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.g5{grid-template-columns:repeat(2,1fr)}.ind-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.g5{grid-template-columns:1fr}.ind-tiles{grid-template-columns:1fr}}

/* ============================================================
   OUTCOME ROUTER
   ============================================================ */
.outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.outcome{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-xs);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.outcome:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--blue-300)}
.outcome .ot{font-family:var(--font-display);font-weight:700;font-size:.9rem;line-height:1.3;flex:1}
.outcome .oa{color:var(--blue-700);flex:none;transition:transform .3s var(--ease)}
.outcome:hover .oa{transform:translateX(4px)}
@media(max-width:1080px){.outcomes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.outcomes{grid-template-columns:1fr}}

/* ============================================================
   PRICING TIERS + GUARANTEES
   ============================================================ */
.tier{padding:24px 22px;display:flex;flex-direction:column;gap:9px;height:100%}
.tier-flag{border-color:transparent;box-shadow:var(--sh-lg)}
.tier-flag::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad-brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;z-index:3;
}
.tier-badge{
  position:absolute;top:-1px;right:18px;z-index:4;background:var(--grad-brand);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 12px;border-radius:0 0 10px 10px;
}
.tier-best{min-height:2.6em;line-height:1.35}
.tier-focal{
  margin-top:8px;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.35rem,1.9vw,1.7rem);line-height:1.1;
  background:var(--grad-text-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.tier-time{color:var(--ink-4)}
.tier-list{display:grid;gap:7px;margin:12px 0 16px;padding-top:14px;border-top:1px solid var(--line);flex:1}
.tier-list li{display:flex;gap:9px;align-items:flex-start;font-size:.85rem;color:var(--ink-2);line-height:1.4}
.tier-list .tick{flex:none;margin-top:2px;color:var(--teal-600)}

.guarantees{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px;padding-top:22px;border-top:1px solid var(--line)}
.grt{display:flex;gap:12px;align-items:flex-start}
.grt b{display:block;font-family:var(--font-display);font-size:.92rem;line-height:1.3;margin-bottom:4px}
.grt .tiny{line-height:1.45}
@media(max-width:1080px){.guarantees{grid-template-columns:repeat(2,1fr);gap:18px 14px}}
@media(max-width:560px){.guarantees{grid-template-columns:1fr}}

/* ============================================================
   AI / AUTOMATION / TECH, single combined panel
   ============================================================ */
.onepanel{
  position:relative;border-radius:var(--r-2xl);padding:clamp(22px,2.6vw,34px);
  background:
    radial-gradient(60rem 30rem at 10% -10%, rgba(124,58,237,.20), transparent 60%),
    radial-gradient(50rem 26rem at 95% 110%, rgba(20,184,166,.16), transparent 62%),
    rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  overflow:hidden;
}
.onepanel::before{
  content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(147,197,253,.7),rgba(196,169,255,.7),transparent);
}
.op-top{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(20px,2.6vw,34px)}
.opcol{min-width:0;position:relative}
.opcol-flow{padding-left:clamp(20px,2.6vw,34px);border-left:1px solid rgba(255,255,255,.1)}
.oph{display:flex;align-items:center;gap:11px;margin-bottom:8px;flex-wrap:wrap}
.oph .itile{width:36px;height:36px;border-radius:11px;flex:none}
.oph .itile svg{width:18px;height:18px}
.oph h3{font-size:1.04rem;line-height:1.25}
.opcol>.tiny,.op-inline{line-height:1.55;color:#93A2C9}
.opcol>.tiny{margin-bottom:14px}
.op-inline{flex:1;min-width:260px;margin:0}

/* AI capability chips, two columns of small cards */
.opgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.opitem{
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  font-size:.82rem;font-weight:600;color:#D3DCF3;line-height:1.25;
  transition:transform .3s var(--ease),background .3s,border-color .3s;
}
.opitem:hover{transform:translateY(-2px);background:rgba(255,255,255,.09);border-color:rgba(157,184,255,.4)}
.opitem i{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:rgba(124,58,237,.28);color:#C9B2FF}
.opitem i svg{width:12px;height:12px}

/* Automation pipeline, vertical timeline with connector */
.optime{position:relative;display:grid;gap:2px;padding-left:2px}
.optime::before{
  content:"";position:absolute;left:14px;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(59,107,245,.6),rgba(124,58,237,.5),rgba(20,184,166,.5));
}
.optime .ost{
  position:relative;display:flex;align-items:center;gap:11px;padding:5px 8px 5px 0;border-radius:9px;
  transition:background .3s;
}
.optime .ost:hover{background:rgba(255,255,255,.05)}
.optime .ost b{
  position:relative;z-index:1;flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:#16204a;border:1px solid rgba(255,255,255,.16);color:#9DB8FF;
  font-family:var(--font-display);font-size:.68rem;font-weight:800;
  transition:background .35s,color .35s,box-shadow .35s,border-color .35s;
}
.optime .ost .osn{font-size:.85rem;font-weight:600;color:#D3DCF3;transition:color .3s}
.optime .ost .osm{margin-left:auto;font-size:.72rem;color:#7E8DB6;white-space:nowrap;transition:color .3s}
.optime .ost.active b{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:0 0 0 5px rgba(59,107,245,.16)}
.optime .ost.active .osn{color:#fff}
.optime .ost.active .osm{color:#7EE7D2}

/* AI search row */
.op-mid{margin-top:clamp(20px,2.2vw,28px);padding-top:clamp(18px,2vw,24px);border-top:1px solid rgba(255,255,255,.1)}
.op-mid .oph{margin-bottom:14px}
.op-mid .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}

/* Tech stack footer */
.op-foot{margin-top:clamp(18px,2vw,26px);padding-top:clamp(16px,1.8vw,22px);border-top:1px solid rgba(255,255,255,.1)}
.op-foot-label{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:#fff;margin-bottom:12px}
.op-foot .chipgrid{justify-content:flex-start;gap:6px}
.op-foot .chip{padding:6px 12px;font-size:.78rem}

@media(max-width:960px){
  .op-top{grid-template-columns:1fr;gap:20px}
  .opcol-flow{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.1);padding-top:20px}
}
@media(max-width:520px){ .opgrid{grid-template-columns:1fr} }

#about .grid[style*="1fr 1fr"]{align-items:stretch}
#values-grid{align-content:stretch}
.valuecard{display:flex;flex-direction:column;height:100%}

.print-note{display:none}
@media print{
  .nav,.topbar,.stickycta,.chatfab,.chatpanel,.scrollbar,.modal{display:none !important}
  .print-note{display:block}
  body{font-size:12pt}
}

/* ================= STATIC MULTI-PAGE ADDITIONS ================= */

/* Breadcrumbs -------------------------------------------------- */
/* The nav is position:sticky, not fixed, so it already occupies its 86px in
   the flow. Reserving --nav-h here as well counted it twice and left a band
   of white between the navigation and the breadcrumb on every page that has
   one, which is every page except the home page. */
.crumbs{display:block;padding-top:20px;padding-bottom:4px;font-size:.85rem;color:var(--ink-3)}
.crumbs .wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--blue-700)}
.crumb-sep{color:var(--line-2)}
.crumbs [aria-current]{color:var(--ink-2);font-weight:600}

/* Page hero ----------------------------------------------------- */
.phero{padding-block:clamp(22px,2.6vw,40px) clamp(30px,3.4vw,52px);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(680px 320px at 12% -10%,rgba(124,58,237,.10),transparent 62%),
             radial-gradient(620px 300px at 92% 0%,rgba(13,138,124,.09),transparent 62%)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(26px,3.4vw,52px);align-items:start}
@media(max-width:960px){.phero-grid{grid-template-columns:1fr}}
.phero h1{font-size:clamp(2.05rem,4.1vw,3.15rem);letter-spacing:-.033em;line-height:1.08}
.phero .lede{margin-top:16px;max-width:62ch}
.phero .btn-row{margin-top:26px}
.kwline{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.kwline span{font-size:.78rem;font-weight:600;color:var(--ink-3);background:var(--bg-soft);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:5px 11px}

/* Direct answer block (AEO) -------------------------------------- */
.answer{border:1px solid var(--line);border-left:4px solid transparent;
  border-radius:var(--r-lg);padding:20px 22px;background:#fff;box-shadow:var(--sh-sm);
  background-image:linear-gradient(#fff,#fff),var(--grad-brand);
  background-origin:border-box;background-clip:padding-box,border-box}
.answer h2,.answer h3{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);font-family:var(--font-display);font-weight:800;margin-bottom:9px}
.answer p{font-size:1.03rem;line-height:1.66;color:var(--ink);margin:0}
.answer p+p{margin-top:11px}

/* Key facts panel ------------------------------------------------ */
.facts{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg-soft);padding:20px 22px}
.facts dl{display:grid;gap:0;margin:0}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.facts div:last-child{border-bottom:0}
.facts dt{font-size:.86rem;color:var(--ink-3);font-weight:500;margin:0}
.facts dd{font-size:.9rem;color:var(--ink);font-weight:700;font-family:var(--font-display);margin:0;text-align:right}

/* Content body --------------------------------------------------- */
.body-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,3.6vw,56px);align-items:start}
@media(max-width:1000px){.body-grid{grid-template-columns:1fr}}
.aside-stick{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:16px}
@media(max-width:1000px){.aside-stick{position:static}}
.prose h2:first-child{margin-top:0}
.prose h4{font-size:1rem;margin-top:20px;margin-bottom:8px;font-family:var(--font-display);font-weight:700}
.prose>p:last-child{margin-bottom:0}
.prose a{color:var(--blue-700);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--purple-700)}
.prose ol{margin:0 0 18px;padding-left:0;counter-reset:pn;display:grid;gap:10px;list-style:none}
.prose ol li{counter-increment:pn;display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.prose ol li::before{content:counter(pn);width:22px;height:22px;border-radius:7px;flex:none;margin-top:2px;
  background:var(--grad-brand);color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center;
  font-family:var(--font-display)}
.prose table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:.93rem}
.prose th,.prose td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line-2);vertical-align:top}
.prose th{font-family:var(--font-display);font-weight:700;color:var(--ink);background:var(--bg-soft);font-size:.86rem}
.prose td{color:var(--ink-2)}
.prose blockquote{margin:0 0 20px;padding:16px 20px;border-left:3px solid var(--purple-500);
  background:var(--bg-tint);border-radius:0 var(--r-lg) var(--r-lg) 0;color:var(--ink-2)}

/* Deliverables / checklist grid ---------------------------------- */
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:20px}
@media(max-width:620px){.checks{grid-template-columns:1fr}}
.checks span{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:var(--r-md);padding:11px 13px;background:#fff}
.checks span svg{color:var(--teal-600);flex:none;margin-top:2px}

/* FAQ (static, no JS needed) ------------------------------------- */
.faqlist{display:grid;gap:10px}
.faqlist details{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.faqlist summary{cursor:pointer;list-style:none;padding:16px 46px 16px 18px;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink)}
/* The question is an h3 so it lands in the document outline, but it must not
   inherit h3 sizing or the accordion turns into a wall of headings. */
.faqlist summary h3{font:inherit;color:inherit;margin:0;padding:0;display:inline;
  letter-spacing:inherit;line-height:1.45}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{content:"";position:absolute;right:18px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.faqlist details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faqlist summary:focus-visible{outline:2px solid var(--blue-600);outline-offset:-2px}
.faqlist .fa{padding:0 18px 18px;color:var(--ink-2);line-height:1.7}
.faqlist .fa p{margin:0 0 10px}
.faqlist .fa p:last-child{margin:0}

/* Related links --------------------------------------------------- */
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:820px){.rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.rel-grid{grid-template-columns:1fr}}
.rel-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 16px;background:#fff;
  display:block;transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.rel-card:hover{border-color:var(--purple-200);transform:translateY(-2px);box-shadow:var(--sh-md)}
.rel-card strong{display:block;font-family:var(--font-display);font-size:.99rem;color:var(--ink)}
.rel-card em{display:block;font-style:normal;font-size:.85rem;color:var(--ink-3);margin-top:4px;line-height:1.5}

/* Index / hub listing --------------------------------------------- */
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hub-grid{grid-template-columns:1fr}}
.hub-card{border:1px solid var(--line);border-radius:var(--r-xl);padding:19px 20px;background:#fff;
  display:flex;flex-direction:column;gap:9px;transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.hub-card:hover{border-color:var(--purple-200);transform:translateY(-3px);box-shadow:var(--sh-lg)}
.hub-card h3{font-family:var(--font-display);font-size:1.06rem;letter-spacing:-.015em;color:var(--ink)}
.hub-card p{font-size:.9rem;color:var(--ink-3);line-height:1.55;flex:1}
.hub-card .go{font-size:.84rem;font-weight:700;color:var(--purple-700);display:flex;align-items:center;gap:6px;
  font-family:var(--font-display)}

/* =============== BLOG: EDITORIAL INDEX =============== */
.sr-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.blog-hero{padding-bottom:clamp(20px,2.4vw,34px)}
.cat-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.cat-bar a{font-size:.84rem;font-weight:600;padding:7px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--ink-3);background:#fff;transition:all .2s}
.cat-bar a:hover{border-color:var(--purple-200);color:var(--ink)}
.cat-bar a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* lead article ---------------------------------------------------- */
.post-lead{display:block;border-top:2px solid var(--ink);padding:26px 0 30px;
  border-bottom:1px solid var(--line);position:relative}
.post-lead:hover .pl-title{color:var(--purple-700)}
.post-lead:hover .pl-go{gap:11px;color:var(--purple-700)}
.pl-meta{display:block;font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.14em;color:var(--ink-4)}
.pl-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.032em;
  font-size:clamp(1.75rem,3.4vw,2.7rem);line-height:1.1;color:var(--ink);margin:14px 0 0;
  max-width:20ch;transition:color .2s}
.pl-ex{font-size:1.03rem;line-height:1.62;color:var(--ink-3);margin:14px 0 0;max-width:62ch}
.pl-go{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--font-display);
  font-weight:700;font-size:.92rem;color:var(--ink);transition:gap .22s var(--ease),color .2s}
@media(min-width:900px){
  .post-lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    column-gap:clamp(28px,4vw,64px);row-gap:0;align-items:start}
  .pl-meta{grid-column:1/-1}
  .pl-title{margin-top:16px}
  .pl-ex{margin-top:16px}
  .pl-go{grid-column:2;margin-top:14px}
}

/* the rest, as rows ----------------------------------------------- */
.post-list{list-style:none;margin:0;padding:0;counter-reset:none}
.post-list li{border-bottom:1px solid var(--line)}
.post-row{display:grid;grid-template-columns:170px minmax(0,1fr) 28px;gap:clamp(18px,3vw,42px);
  align-items:start;padding:24px 0;transition:background-color .2s}
.post-row:hover{background:linear-gradient(90deg,var(--bg-tint),transparent 70%)}
.post-row:hover .pr-title{color:var(--purple-700)}
.post-row:hover .pr-go{transform:translateX(4px);color:var(--purple-700)}
.pr-meta{display:flex;flex-direction:column;gap:3px;padding-top:3px}
.pr-cat{font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--purple-700)}
.pr-date,.pr-read{font-size:.8rem;color:var(--ink-4)}
.pr-body{min-width:0}
.pr-title{display:block;font-family:var(--font-display);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(1.12rem,1.7vw,1.42rem);line-height:1.25;color:var(--ink);transition:color .2s}
.pr-ex{display:block;font-size:.95rem;line-height:1.6;color:var(--ink-3);margin-top:7px;max-width:66ch}
.pr-go{color:var(--ink-4);padding-top:6px;transition:transform .22s var(--ease),color .2s}
@media(max-width:760px){
  .post-row{grid-template-columns:minmax(0,1fr) 24px;gap:14px;padding:20px 0}
  .pr-meta{grid-column:1/-1;flex-direction:row;gap:12px;align-items:baseline;padding-top:0}
  .pr-go{padding-top:2px}
}

/* =============== BLOG: ARTICLE =============== */
.readbar{position:fixed;top:var(--nav-h);left:0;right:0;height:2px;z-index:999;background:transparent}
.readbar i{display:block;height:100%;width:0;background:var(--grad-brand);transition:width .1s linear}
.article-head{padding-block:clamp(18px,2.4vw,34px) clamp(22px,2.6vw,36px)}
.article-head h1{font-size:clamp(2rem,3.9vw,3.05rem);letter-spacing:-.034em;line-height:1.08;
  max-width:20ch}
.article-head .lede{margin-top:18px;max-width:62ch;font-size:clamp(1.05rem,1.5vw,1.24rem)}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 18px;
  font-size:.86rem;color:var(--ink-4)}
.art-cat{font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--purple-700);background:var(--purple-50);
  border-radius:var(--r-pill);padding:5px 11px}
.art-cat:hover{background:var(--grad-brand);color:#fff}

.art-grid{display:grid;grid-template-columns:212px minmax(0,1fr);gap:clamp(30px,4vw,68px);
  align-items:start;padding-bottom:clamp(20px,3vw,40px)}
@media(max-width:1000px){.art-grid{grid-template-columns:1fr;gap:26px}}
.art-side{position:sticky;top:calc(var(--nav-h) + 26px);display:grid;gap:22px}
@media(max-width:1000px){
  .art-side{position:static;border:1px solid var(--line);border-radius:var(--r-lg);
    padding:16px 18px;background:var(--bg-soft)}
  .art-share{display:none}
  /* collapsible on small screens so nine headings do not fill the viewport.
     The label is 11px type, so it needs padding to reach the 24px minimum
     target height that WCAG 2.5.8 asks for on a standalone control. */
  .art-toc-h{cursor:pointer;margin:0;position:relative;padding:7px 28px 7px 0;
    min-height:24px;display:flex;align-items:center}
  .art-toc[open] .art-toc-h{margin-bottom:12px}
  .art-toc-h::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;
    border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);
    transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease)}
  .art-toc[open] .art-toc-h::after{transform:translateY(-30%) rotate(-135deg)}
}
.art-toc-h{font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);margin:0 0 12px;list-style:none;cursor:default}
.art-toc-h::-webkit-details-marker{display:none}
.art-toc[open] .art-toc-h{margin-bottom:12px}
.art-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:1px;counter-reset:none}
.art-toc li{margin:0}
.art-toc li::before{display:none}
.art-toc a{display:block;font-size:.855rem;line-height:1.4;color:var(--ink-3);padding:7px 0 7px 13px;
  border-left:2px solid var(--line-2);transition:color .2s,border-color .2s}
.art-toc a:hover{color:var(--ink)}
.art-toc a.on{color:var(--ink);font-weight:600;border-left-color:var(--purple-500)}
.sh-row{display:flex;gap:8px}
.sh{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);display:grid;
  place-items:center;color:var(--ink-3);background:#fff;transition:all .22s var(--ease)}
.sh:hover{background:var(--grad-brand);color:#fff;border-color:transparent;transform:translateY(-2px)}
.art-body{min-width:0;max-width:74ch}
.art-body .answer{margin-bottom:32px}
.article h2{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* Nav scrim + mobile foot ------------------------------------------ */
.nav-scrim{position:fixed;inset:0;background:rgba(11,18,32,.5);backdrop-filter:blur(2px);z-index:88}
.mobile-nav-foot{margin-top:22px;display:grid;gap:10px}
.f-contact{margin-top:16px;display:grid;gap:7px}
.f-contact a{display:flex;align-items:center;gap:9px;font-size:.93rem;padding:0}
.f-legal{display:flex;flex-wrap:wrap;gap:18px;font-size:.86rem}
.footer .f-grid h2{font-family:var(--font-display);color:#fff;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:16px;font-weight:700}

/* CTA band ---------------------------------------------------------- */
.ctaband{background:var(--grad-navy);border-radius:var(--r-2xl);padding:clamp(28px,3.4vw,46px);
  position:relative;overflow:hidden;text-align:center}
.ctaband::before{content:"";position:absolute;inset:0;
  background:radial-gradient(520px 240px at 18% 0%,rgba(124,58,237,.42),transparent 62%),
             radial-gradient(480px 220px at 86% 100%,rgba(13,138,124,.36),transparent 62%)}
.ctaband>*{position:relative;z-index:2}
.ctaband h2{color:#fff;font-size:clamp(1.5rem,2.5vw,2.1rem);letter-spacing:-.028em}
.ctaband p{color:#B7C5EA;margin:12px auto 0;max-width:56ch}
.ctaband .btn-row{margin-top:22px;justify-content:center}

/* Nav menu labels are not document headings ---------------------- */
.mega-h{font-family:var(--font-display);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);margin:0 0 12px;font-weight:700}
.mega-h a{color:inherit}
.mega-h a:hover{color:var(--purple-700)}
.mega-h.light{color:#fff;font-size:1.1rem;letter-spacing:-.01em;text-transform:none;margin-bottom:8px;
  font-weight:700}

/* Facts panel: keep label and value on sensible columns ---------- */
.facts dt{flex:0 0 38%;line-height:1.4}
.facts dd{flex:1 1 auto;line-height:1.4}

/* Article lede spacing ------------------------------------------- */
.article-head .lede{margin-top:16px;max-width:66ch}

/* List items: marker and content are the only flex children, so an inline
   link inside the text does not become its own column. ---------------- */
.prose ul li>span,.prose ol li>span{flex:1 1 auto;min-width:0}

/* =============== MEGA MENU: CATEGORY RAIL ===============
   Overrides the prototype's transparent 8-column panel. Solid surface,
   fixed height, one rail of practices swapping one panel of services. */
.nav-links .mega{
  /* fixed, not absolute: the trigger is near the left edge, so centring on it
     would push the rail off screen. */
  position:fixed;top:calc(var(--nav-h) + 8px);left:50%;
  transform:translateX(-50%) translateY(-6px) scale(.995);
  width:min(96vw,var(--mw,1000px));max-height:calc(100vh - var(--nav-h) - 28px);overflow:auto;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--line);border-radius:20px;padding:0;overflow:hidden;
  box-shadow:0 2px 6px rgba(11,18,32,.04),0 24px 60px -22px rgba(11,18,32,.30);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease-soft),transform .24s var(--ease),visibility .24s}
.nav-item.open .mega{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1)}
/* invisible bridge so the pointer can travel from the trigger to the panel */
.nav-item[data-mega]::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}

.mega-body{display:grid;grid-template-columns:298px minmax(0,1fr)}

/* --- left rail --- */
.rail{background:var(--bg-soft);border-right:1px solid var(--line);padding:12px;display:grid;
  grid-template-columns:minmax(0,1fr);gap:2px;align-content:start}
.rail-btn{display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:9px 10px;border-radius:11px;
  text-align:left;font-family:var(--font-display);font-weight:600;font-size:.845rem;color:var(--ink-2);
  background:transparent;transition:background-color .16s,color .16s;position:relative}
.rail-btn:hover{background:rgba(255,255,255,.85);color:var(--ink)}
.rail-btn.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(11,18,32,.05),
  0 6px 16px -10px rgba(11,18,32,.22)}
.rail-ico{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--line-2);color:var(--ink-3);transition:background .2s,color .2s}
.rail-btn.on .rail-ico{background:var(--grad-brand);color:#fff}
.rail-t{flex:1;min-width:0;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-n{font-size:.72rem;font-weight:700;color:var(--ink-4);background:var(--line-2);
  border-radius:var(--r-pill);padding:1px 7px;flex:none}
.rail-btn.on .rail-n{background:var(--purple-50);color:var(--purple-700)}
.rail-btn.on::after{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--grad-brand)}

/* --- right panel --- */
.mpanels{padding:18px 20px 20px;display:flex;flex-direction:column;min-height:326px}
.mpanel{display:none;flex:1;min-height:0}
.mpanel.on{display:block;animation:mfade .22s var(--ease)}
@keyframes mfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.mpanel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line-2)}
.mpanel-h{font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--ink);
  letter-spacing:-.015em;margin:0}
.mpanel-s{font-size:.82rem;color:var(--ink-3);margin:3px 0 0;line-height:1.45}
.mpanel-all{font-size:.8rem;font-weight:700;color:var(--purple-700);font-family:var(--font-display);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:none;padding-top:2px}
.mpanel-all:hover{color:var(--blue-700)}

.mlinks{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mlink{display:block;padding:8px 11px;border-radius:10px;transition:background-color .16s}
.mlink:hover{background:var(--bg-tint)}
.mlink-t{display:block;font-family:var(--font-display);font-weight:600;font-size:.885rem;
  color:var(--ink);line-height:1.3}
.mlink:hover .mlink-t{color:var(--purple-700)}
.mlink-s{display:block;font-size:.775rem;color:var(--ink-4);line-height:1.4;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- panel CTA --- */
.mega-cta{margin-top:14px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;
  background:linear-gradient(120deg,var(--purple-50),var(--blue-50) 60%,var(--teal-50));
  border:1px solid var(--purple-100);transition:transform .22s var(--ease),box-shadow .22s}
.mega-cta:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}
.mega-cta-i{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff}
.mega-cta strong{display:block;font-family:var(--font-display);font-size:.885rem;color:var(--ink)}
.mega-cta em{display:block;font-style:normal;font-size:.785rem;color:var(--ink-3);margin-top:1px}
.mega-cta>svg:last-child{margin-left:auto;color:var(--purple-700);flex:none}

/* --- footer strip --- */
.nav-links .mega-foot{margin:0;padding:12px 20px;border-top:1px solid var(--line);
  background:var(--bg-soft);display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between}
.nav-links .mega-foot .small{font-size:.82rem;color:var(--ink-4)}

/* --- industries panel --- */
.nav-links .mega-ind{--mw:960px}
.icols{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:22px;padding:20px 22px}
.icol-h{font-family:var(--font-display);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);font-weight:800;margin:0 0 8px}
.ilink{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:9px;font-size:.865rem;
  font-weight:500;color:var(--ink-2);transition:background-color .16s,color .16s}
.ilink:hover{background:var(--bg-tint);color:var(--purple-700)}
.ilink-i{width:24px;height:24px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--line-2);color:var(--ink-3)}
.ilink:hover .ilink-i{background:var(--grad-brand);color:#fff}
.ifeature{background:var(--grad-navy);border-radius:14px;padding:18px;color:#DCE4FA;
  display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.ifeature-h{font-family:var(--font-display);font-weight:700;font-size:1rem;color:#fff;margin:0}
.ifeature-p{font-size:.82rem;color:#A9B7DC;line-height:1.55;margin:0;flex:1}

/* --- how we work panel --- */
.nav-links .mega-work{--mw:680px}
.mlinks-2{grid-template-columns:1fr 1fr;padding:16px;gap:4px}
.mlink-wide{display:flex;align-items:flex-start;gap:11px;padding:11px 12px}
.mlink-i{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--line-2);color:var(--ink-3);transition:background .2s,color .2s}
.mlink-wide:hover .mlink-i{background:var(--grad-brand);color:#fff}
.mlink-wide .mlink-s{white-space:normal}

/* narrower viewports: rail above the panel */
@media(max-width:1260px){
  .nav-links .mega{--mw:940px}
  .nav-links .mega-ind{--mw:920px}
  .mega-body{grid-template-columns:288px minmax(0,1fr)}
  .rail-btn{font-size:.825rem;gap:9px}
  .icols{grid-template-columns:1fr 1fr 1fr;gap:18px}
  .ifeature{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px}
  .ifeature-p{flex:1}
}
@media(prefers-reduced-motion:reduce){
  .nav-links .mega{transition:opacity .01s}
  .mpanel.on{animation:none}
}

/* =============== MOBILE DRAWER =============== */
.mobile-nav{display:flex;flex-direction:column;padding-inline:var(--gutter)}
.mobile-acc{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.macc>button{gap:12px}
.macc-i{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--bg-tint);color:var(--ink-3);transition:background .2s,color .2s}
.macc.open .macc-i{background:var(--grad-brand);color:#fff}
.macc-l{flex:1;text-align:left}
.macc-body a{display:flex;align-items:center;gap:10px}
.macc-body a svg{color:var(--ink-4);flex:none}
.macc-body a:hover svg{color:var(--purple-700)}
.burger-x{position:relative}
.burger-x span{position:absolute;top:50%;left:50%;margin:0;width:19px;height:2px;
  transform-origin:center}
.burger-x span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger-x span:nth-child(2){opacity:0}
.burger-x span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}
.mobile-nav-foot{flex:none;padding-top:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);display:grid;gap:10px;background:#fff}
.mnav-mail{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem;
  color:var(--ink-3);font-weight:500;padding:2px}
.mnav-note{font-size:.78rem;color:var(--ink-4);text-align:center;margin:0;line-height:1.5}

/* =============== DIAGRAMS =============== */
.dgm-band{padding-top:0}
.dgm-band .wrap>div{max-width:940px;margin-inline:auto}
.dgm{margin:0;border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;
  padding:clamp(14px,1.8vw,22px);box-shadow:var(--sh-sm)}
.dgm svg{display:block;width:100%;height:auto}
.dgm figcaption{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);
  font-size:.845rem;color:var(--ink-3);line-height:1.55}
.dgm.tint{background:linear-gradient(150deg,#fff,var(--bg-tint))}

/* =============== DECISION LAYER: one panel, split as a spec sheet =========
   A single border around both halves. The answer cannot leave a gap beneath
   itself because there is no separate card to be short. */
.decide{padding-top:0;padding-bottom:clamp(24px,3vw,40px)}
.vb{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  background:#fff;box-shadow:var(--sh-sm)}
@media(max-width:900px){.vb{grid-template-columns:1fr}}
.vb-l{padding:clamp(20px,2.2vw,28px);border-right:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:14px;justify-content:center;min-width:0;
  background:linear-gradient(150deg,#fff,var(--bg-tint))}
@media(max-width:900px){.vb-l{border-right:0;border-bottom:1px solid var(--line-2)}}
.vb-eyebrow{font-family:var(--font-display);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);font-weight:800;margin:0;line-height:1.4}
.vb-a{font-size:1.04rem;line-height:1.66;color:var(--ink);margin:0}
.vb-l .link-arrow{align-self:flex-start;font-size:.92rem}
.vb-r{margin:0;display:grid;align-content:start;min-width:0}
.vb-row{display:grid;grid-template-columns:158px minmax(0,1fr);gap:16px;
  padding:13px clamp(18px,2vw,24px);border-bottom:1px solid var(--line-2)}
.vb-row:last-child{border-bottom:0}
.vb-row dt{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);
  font-family:var(--font-display);font-weight:800;margin:0;padding-top:2px}
.vb-row dd{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink);font-weight:600;min-width:0}
/* The label sits beside the value only where the value still has room. Between
   901 and 1149 the panel is two columns inside a narrow viewport, so the value
   column is squeezed; below 561 nothing fits beside anything. */
@media(max-width:1149px) and (min-width:901px){
  .vb-row{grid-template-columns:1fr;gap:4px}
  .vb-row dt{padding-top:0}
}
@media(max-width:560px){
  .vb-row{grid-template-columns:1fr;gap:4px}
  .vb-row dt{padding-top:0}
}

/* =============== FOOTER: four short columns =============== */
.footer .f-grid{grid-template-columns:1.35fr repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px);align-items:start}
@media(max-width:1080px){.footer .f-grid{grid-template-columns:1.3fr repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.footer .f-grid{grid-template-columns:1fr 1fr}
  .footer .f-brand{grid-column:1/-1}}
.f-brand .small{margin-top:14px;max-width:32ch}
.footer .f-grid ul{margin:0;padding:0;list-style:none}
.footer .f-grid li{margin:0}
.footer .f-grid a{padding:5px 0;font-size:.9rem;white-space:nowrap}
.footer .f-grid h2{margin-bottom:12px}
.f-bottom{margin-top:clamp(28px,3.4vw,44px);padding:20px 0 0}
.f-bottom .tiny{color:#8C9AC4}

/* =============== PROCESS FLOW =============== */
.pf-band{padding-top:0}
.pf{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0;counter-reset:none;
  border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;overflow:hidden}
.pf-step{display:grid;grid-template-columns:38px minmax(0,1fr);gap:15px;padding:18px 20px;
  align-items:start;position:relative;border-top:1px solid var(--line-2)}
.pf-step:first-child{border-top:0}
.pf-n{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;font-family:var(--font-display);font-weight:800;
  font-size:1rem;position:relative;z-index:2}
.pf-step:not(:last-child) .pf-n::after{content:"";position:absolute;left:50%;top:100%;
  width:2px;height:calc(100% + 22px);transform:translateX(-50%);
  background:linear-gradient(180deg,var(--purple-200),var(--line-2));z-index:-1}
.pf-body{min-width:0}
.pf-t{display:block;font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:var(--ink);line-height:1.3}
.pf-d{display:block;font-size:.93rem;line-height:1.65;color:var(--ink-3);margin-top:4px}
@media(min-width:900px){
  .pf{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* An odd number of steps would leave a bordered empty cell, so the last
     one takes the whole row instead of sitting beside a hole. */
  .pf-step:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
  .pf-step{border-top:1px solid var(--line-2)}
  .pf-step:nth-child(2){border-top:0}
  .pf-step:nth-child(odd){border-right:1px solid var(--line-2)}
  .pf-step:not(:last-child) .pf-n::after{display:none}
}

/* =============== SECTION TABS =============== */
/* The strip ships hidden and site.js reveals it, so a reader without
   JavaScript keeps every panel open instead of losing two thirds of the page. */
.tabbar[hidden]{display:none}
.tabbar{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line);
  padding-bottom:12px;margin-bottom:24px}
.tabbtn{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink-3);
  padding:9px 16px;border-radius:var(--r-pill);background:transparent;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s}
.tabbtn:hover{background:var(--bg-tint);color:var(--ink)}
.tabbtn:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
.tabbtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tabpane{max-width:74ch}
.tabpane:focus{outline:none}
.tabpane:focus-visible{outline:2px solid var(--blue-600);outline-offset:6px;border-radius:var(--r-md)}
.tabpane>.prose>h2:first-child{margin-top:0}
/* Without JS every panel is open, so they need separating from one another.
   Once site.js takes over only one panel is on screen and the rule would draw
   a rule above nothing, so it is scoped to the unenhanced state. */
.sectabs:not([data-enhanced]) .tabpane+.tabpane{margin-top:34px;padding-top:30px;
  border-top:1px solid var(--line-2)}
.sectabs~.checks{margin-top:8px}
@media(max-width:560px){
  .tabbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--pad,16px)*-1);padding-inline:var(--pad,16px)}
  .tabbar::-webkit-scrollbar{display:none}
}
@media print{
  .tabbar{display:none}
  .tabpane{display:block!important}
}

/* =============== FOOTER TEXT AND NAP =============== */
/* .on-dark paints a navy gradient, which is correct for a section wrapper and
   wrong for a paragraph inside one. The footer is already dark. */
.footer .on-dark{background:none}
.f-nap{font-style:normal;margin-top:14px;line-height:1.6}
.f-nap,.footer .f-contact a{color:#8C9BC4}
.footer .f-social{margin-top:16px}

/* The home headline names five things, so it needs a slightly tighter scale
   than a three word hero or it eats the whole first screen. */
.hero-inner h1.h-display{font-size:clamp(2.15rem,4.35vw,3.35rem)}

/* =============== NAV: SEVEN ITEMS =============== */
/* Home and Blog take the primary nav from five items to seven, which is fine
   at full width and tight between the burger breakpoint and about 1280. These
   rules stop anything wrapping mid label rather than letting the bar grow. */
.nav-link,.nav-tel,.nav-cta{white-space:nowrap}
@media(max-width:1280px){
  .nav-links{margin-left:6px;gap:0}
  .nav-link{padding:10px 10px;font-size:.92rem}
  .nav-inner{gap:10px}
}
@media(max-width:1180px){
  /* The phone is the first thing to go: the call button next to it does the
     same job and the number is in the footer of every page. */
  .nav-tel{display:none}
}


/* ================================================================
   SECTION BLOCK KIT
   Every service and industry page is composed from these. They are
   driven by content that already exists, so a page renders only the
   blocks its own material can fill.
   ================================================================ */

/* --- shared section head: eyebrow, headline, supporting line ------ */
.sec-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,3vw,56px);align-items:start;margin-bottom:clamp(22px,2.6vw,34px)}
@media(max-width:900px){.sec-head{grid-template-columns:1fr;gap:14px;align-items:start}}
.sec-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-600);
  font-weight:800;margin:0 0 12px}
.sec-eyebrow::before{content:"";width:22px;height:2px;background:var(--grad-brand);flex:none}
.sec-h{font-family:var(--font-display);font-size:clamp(1.6rem,2.7vw,2.3rem);
  line-height:1.14;letter-spacing:-.028em;color:var(--ink);margin:0;max-width:20ch}
.sec-lead{color:var(--ink-3);font-size:1rem;line-height:1.7;max-width:52ch}
.sec-lead p{margin:0}
/* --- rail layout: the unfolded variant used by About and Our work -----
   A half width headline over a short section leaves a column of air down the
   left of the page, which is what made those two pages look unfinished. A
   narrow heading rail beside one wide reading column removes it, and the
   heading stays put while its own section scrolls. */
.secrail{padding-block:clamp(30px,4vw,52px)}
.railgrid{display:grid;grid-template-columns:270px minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start}
.rail-head{position:sticky;top:96px}
.rail-head .sec-h{font-size:clamp(1.35rem,2vw,1.7rem);max-width:14ch}
.rail-head .sec-eyebrow{margin-bottom:10px}
.rail-head>div::before{content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--grad-brand);margin-bottom:16px}
.rail-body{max-width:74ch}
.rail-body .prose+.prose{margin-top:16px}
.rail-body>.prose:first-child>p:first-child{font-size:1.06rem;color:var(--ink-2)}
@media(max-width:900px){
  .railgrid{grid-template-columns:1fr;gap:14px}
  .rail-head{position:static}
  .rail-head .sec-h{max-width:22ch}
}

/* --- per section disclosure -------------------------------------- */
.sfold{margin-top:clamp(18px,2vw,26px);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.sfold summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;
  justify-content:space-between;padding:16px 2px;font-family:var(--font-display);
  font-weight:700;font-size:.97rem;color:var(--ink-2)}
.sfold summary::-webkit-details-marker{display:none}
.sfold summary:hover{color:var(--ink)}
.sfold summary:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px}
.sfold-x{width:28px;height:28px;border-radius:9px;border:1px solid var(--line);flex:none;
  display:grid;place-items:center;color:var(--ink-4);transition:all .22s var(--ease)}
.sfold[open] .sfold-x{background:var(--grad-brand);color:#fff;border-color:transparent;
  transform:rotate(45deg)}
.sfold-body{padding:4px 0 22px;max-width:74ch}
.sfold-body>*:last-child{margin-bottom:0}

/* --- dark statement band ------------------------------------------ */
.band{background:var(--grad-navy);color:#fff;padding-block:clamp(44px,5vw,76px);
  position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(620px 300px at 82% 10%,rgba(124,58,237,.30),transparent 62%),
             radial-gradient(520px 260px at 8% 92%,rgba(13,138,124,.22),transparent 60%)}
.band .wrap{position:relative;z-index:2}
.band-h{font-family:var(--font-display);font-size:clamp(1.7rem,3.3vw,2.75rem);
  line-height:1.14;letter-spacing:-.03em;color:#fff;margin:0;max-width:24ch}
.band-hi{background:linear-gradient(100deg,#9FB4FF,#C8A6FF 55%,#7BE3D3);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.band-p{margin:14px 0 0;color:#A9B7DC;font-size:1rem;line-height:1.7;max-width:60ch}

/* --- handover cards ------------------------------------------------ */
.hgrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff}
@media(max-width:980px){.hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.hgrid{grid-template-columns:1fr}}
.hcard{padding:clamp(18px,2vw,26px);border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:10px;
  min-width:0;transition:background .25s}
.hcard:hover{background:var(--bg-tint)}
.hgrid .hcard:nth-child(3n){border-right:0}
.hgrid .hcard:nth-last-child(-n+3){border-bottom:0}
@media(max-width:980px){
  .hgrid .hcard{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
  .hgrid .hcard:nth-child(2n){border-right:0}
}
@media(max-width:600px){.hgrid .hcard{border-right:0}
  .hgrid .hcard:last-child{border-bottom:0}}
.hcard-top{display:flex;align-items:center;justify-content:space-between}
.hcard-i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--purple-50),var(--blue-50));color:var(--purple-600);
  border:1px solid var(--purple-100)}
.hcard-n{font-family:var(--font-display);font-size:.78rem;font-weight:800;color:var(--ink-4);
  letter-spacing:.08em}
.hcard-h{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink);
  line-height:1.35}
.hcard-d{font-size:.9rem;line-height:1.6;color:var(--ink-3)}
.hextra{list-style:none;margin:14px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 20px}
.hextra li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;color:var(--ink-2)}
.hextra svg{color:var(--teal-600);flex:none;margin-top:3px}

/* --- process rail --------------------------------------------------- */
/* Every process on the site is 7 or 8 stages. Seven across is 184px a column,
   which is too narrow to read; four across over two rows is comfortable, and
   an odd last stage widens to close the gap. */
.prail{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff}
.pr-step{padding:clamp(16px,1.8vw,22px);border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:8px;min-width:0}
.prail .pr-step:nth-child(4n){border-right:0}
.prail .pr-step:last-child{border-right:0}
.pr-step:last-child:nth-child(4n+3){grid-column:span 2}
@media(max-width:1100px){
  .prail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prail .pr-step:nth-child(2n){border-right:0}
  .pr-step:last-child:nth-child(4n+3){grid-column:auto}
}
@media(max-width:640px){
  .prail{grid-template-columns:1fr}
  .pr-step{border-right:0}
  .prail .pr-step:last-child{border-bottom:0}
}
.pr-top{display:flex;align-items:center;justify-content:space-between}
.pr-i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff}
.pr-n{font-family:var(--font-display);font-size:.72rem;font-weight:800;color:var(--ink-4);
  letter-spacing:.1em}
.pr-h{font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--ink);
  line-height:1.3}
.pr-d{font-size:.875rem;line-height:1.6;color:var(--ink-3)}
.prtrack{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding:0 4px;position:relative}
.prtrack::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,var(--purple-200),var(--blue-300),var(--teal-300))}
.prtrack span{position:relative;background:var(--bg);padding:0 10px;
  font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4)}
@media(max-width:700px){.prtrack{display:none}}

/* --- option cards --------------------------------------------------- */
.ogrid-axis{font-family:var(--font-display);font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin:0 0 12px}
.ogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px}
.ogrid[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.ogrid,.ogrid[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ogrid,.ogrid[data-n="4"]{grid-template-columns:1fr}}
.ocard{border:1px solid var(--line);border-radius:var(--r-xl);padding:20px;background:#fff;
  position:relative;display:flex;flex-direction:column;gap:4px;
  transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.ocard:hover{border-color:var(--purple-200);transform:translateY(-3px);box-shadow:var(--sh-lg)}
.ocard.on{border-color:var(--purple-300);box-shadow:var(--sh-md);
  background:linear-gradient(160deg,#fff,var(--bg-tint))}
.oc-badge{position:absolute;top:-10px;left:20px;background:var(--grad-brand);color:#fff;
  font-family:var(--font-display);font-size:.64rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}
.oc-n{font-family:var(--font-display);font-size:.72rem;font-weight:800;color:var(--ink-4);
  letter-spacing:.1em;margin:0}
.oc-h{font-family:var(--font-display);font-size:1.05rem;line-height:1.3;color:var(--ink);
  margin:2px 0 12px}
.oc-lab{font-family:var(--font-display);font-size:.63rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;margin:10px 0 3px}
.oc-lab.good{color:var(--teal-600)}
.oc-lab.bad{color:#B4325A}
.oc-v{font-size:.885rem;line-height:1.55;color:var(--ink-2);margin:0}

/* --- two column compare ---------------------------------------------- */
.vsgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;background:#fff}
@media(max-width:760px){.vsgrid{grid-template-columns:1fr}}
.vs-col{padding:clamp(18px,2vw,26px);border-right:1px solid var(--line-2)}
.vs-col:last-child{border-right:0;background:linear-gradient(160deg,#fff,var(--bg-tint))}
@media(max-width:760px){.vs-col{border-right:0;border-bottom:1px solid var(--line-2)}}
.vs-h{font-family:var(--font-display);font-size:1.05rem;color:var(--ink);margin:0 0 14px;
  padding-bottom:12px;border-bottom:2px solid var(--purple-100)}
.vs-list{margin:0;display:grid;gap:0}
.vs-row{padding:11px 0;border-bottom:1px solid var(--line-2)}
.vs-row:last-child{border-bottom:0}
.vs-row dt{font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);margin:0 0 3px}
.vs-row dd{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-2)}

/* --- checklist -------------------------------------------------------- */
.clband{background:var(--bg-soft)}
.clist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,48px)}
@media(max-width:760px){.clist{grid-template-columns:1fr}}
.clist li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink-2)}
.clist svg{color:var(--teal-600);flex:none;margin-top:3px}
.clcta{margin-top:26px;border:1px solid var(--purple-100);border-radius:var(--r-xl);
  padding:20px 24px;background:linear-gradient(130deg,var(--purple-50),var(--blue-50) 62%,var(--teal-50));
  display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.clcta-h{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--ink);margin:0}
.clcta-p{font-size:.9rem;color:var(--ink-3);line-height:1.6;margin:4px 0 0;max-width:56ch}

/* --- grouped FAQ ------------------------------------------------------ */
.faqgrid{display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:clamp(22px,3vw,52px);align-items:start;margin-top:26px}
@media(max-width:900px){.faqgrid{grid-template-columns:1fr}.faq-nav{display:none}}
.faqmain{min-width:0}
/* No sidebar: one column, but capped. A 1290px wide accordion row is a long
   way for the eye to travel from the question to the plus sign. */
.faqgrid.solo{grid-template-columns:minmax(0,1fr)}
.faqgrid.solo .faqmain{max-width:900px}
.faq-nav{position:sticky;top:calc(var(--nav-h) + 22px);display:grid;gap:2px;
  border-left:2px solid var(--line)}
.faq-nav a{padding:8px 0 8px 16px;font-size:.9rem;color:var(--ink-3);margin-left:-2px;
  border-left:2px solid transparent}
.faq-nav a:hover{color:var(--ink);border-left-color:var(--purple-400)}
.faq-glabel{font-family:var(--font-display);font-size:.7rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);
  margin:30px 0 12px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.faqmain>.faq-glabel:first-child{margin-top:0}
.faqband .faqlist summary{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 18px}
.faqband .faqlist summary::after{display:none}
.faq-x{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);flex:none;
  display:grid;place-items:center;color:var(--ink-4);transition:all .22s var(--ease)}
.faqband details[open] .faq-x{background:var(--grad-brand);color:#fff;border-color:transparent;
  transform:rotate(45deg)}

/* Sections alternate tint so the page reads as chapters. */
.hband{background:var(--bg-soft)}
.ocband{background:var(--bg-soft)}
.prband{background:#fff}

/* =============== ENQUIRY FORM =============== */
/* The markup previously carried no design system classes, so every field
   rendered as a bare browser control. These pick up .field, .flabel and .inp
   from the base sheet and add only what the enquiry card needs. */
.enq-sub{color:var(--ink-3);margin-top:6px}
.enq-form{margin-top:20px}
.enq-form .field:last-of-type{margin-bottom:18px}
.enq-form .frow{gap:14px}
.flabel{display:flex;align-items:center;gap:8px}
.req{color:var(--purple-600);font-weight:800}
.opt-tag{font-family:var(--font-body);font-size:.72rem;font-weight:600;color:var(--ink-4);
  background:var(--bg-soft);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:2px 8px;letter-spacing:.02em}
.inp::placeholder{color:var(--ink-4);opacity:.72}
/* Only flag a field the visitor has actually filled in and got wrong. */
.enq-form .inp:user-invalid{border-color:#B4325A;box-shadow:0 0 0 4px rgba(180,50,90,.12)}
.enq-note{display:flex;align-items:flex-start;gap:8px;margin-top:14px;color:var(--ink-4);
  line-height:1.6}
.enq-note svg{flex:none;margin-top:3px}
/* The base sheet replaces the focus outline with a ring, which Windows High
   Contrast Mode strips along with every other box-shadow. This puts a real
   outline back for those users only. */
@media (forced-colors: active){
  .inp:focus{outline:2px solid Highlight;outline-offset:2px}
}

/* --- direct contact card ---------------------------------------- */
.cdirect{margin-top:16px}
.cdirect-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid var(--line-2)}
.cdirect-row:last-child{border-bottom:0;padding-bottom:0}
.cdirect h2+.cdirect-row{padding-top:16px}
.cdirect-i{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--purple-50),var(--blue-50));color:var(--purple-600);
  border:1px solid var(--purple-100)}
.cdirect-row b{display:block;font-family:var(--font-display);font-size:.98rem;color:var(--ink);
  line-height:1.35}
.cdirect-row em{display:block;font-style:normal;font-size:.85rem;color:var(--ink-3);margin-top:2px;
  line-height:1.5}
a.cdirect-row:hover b{color:var(--blue-700)}

/* --- portfolio: one card, three placements ---------------------------
   Home page, Our work, and every service page a project is tagged
   against. Nothing renders until a project in content/projects.json is
   marked ready, so the component is inert until there is real work. */
.pjband{background:var(--bg-tint,#F8FAFF)}
.pj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px)}
@media(max-width:1080px){.pj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:660px){.pj-grid{grid-template-columns:1fr}}

.pj-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg,18px);
  overflow:hidden;display:flex;flex-direction:column;min-width:0;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.pj-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:transparent}

/* 16:10. Reserving the ratio in CSS as well as on the img stops the card
   jumping while a screenshot loads, which is a Core Web Vitals cost. */
.pj-shot{aspect-ratio:8/5;background:var(--line-2);overflow:hidden}
.pj-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pj-shot-blank{display:grid;place-content:center;justify-items:center;gap:10px;
  background:linear-gradient(140deg,var(--purple-50),var(--blue-50,#EEF4FF))}
.pj-blank-i{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:#fff;color:var(--purple-600);border:1px solid var(--purple-100)}
.pj-blank-t{font-family:var(--font-display);font-size:.76rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}

.pj-body{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;gap:9px;flex:1}
.pj-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pj-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--purple-600)}
.pj-year{font-size:.76rem;font-weight:700;color:var(--ink-4)}
.pj-h{font-family:var(--font-display);font-size:1.06rem;line-height:1.3;
  letter-spacing:-.015em;color:var(--ink);margin:0}
.pj-who{margin:0;font-size:.84rem;color:var(--ink-4)}
.pj-sum{margin:0;font-size:.93rem;line-height:1.62;color:var(--ink-3)}
.pj-stack{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0}
.pj-stack li{font-size:.72rem;font-weight:700;color:var(--ink-3);background:var(--line-2);
  border-radius:999px;padding:3px 9px}
.pj-live{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:7px;
  font-weight:700;font-size:.88rem;color:var(--purple-600);text-decoration:none;
  min-height:24px}
.pj-live:hover{gap:11px}
.pj-more{margin-top:clamp(20px,2.4vw,30px);display:flex;justify-content:center}

/* Long form, Our work only: the card beside the three things a buyer
   actually wants, which is what happened before, what was made, and what
   changed after. */
.pj-detail{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:start;padding:clamp(24px,3vw,38px) 0;
  border-top:1px solid var(--line)}
.pj-detail:first-child{border-top:0;padding-top:0}
@media(max-width:900px){.pj-detail{grid-template-columns:1fr}}
.pjd-grid{display:grid;gap:clamp(14px,1.8vw,22px)}
.pjd-col p{margin:0;font-size:.95rem;line-height:1.7;color:var(--ink-3)}
.pjd-lab{font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--purple-600);
  margin:0 0 6px !important}

/* --- blog index: cards, category chips, in page search ---------------
   The cards are in the HTML. The search filters what is already there,
   so with scripting off the page is still a complete list of every
   article and every category link is still a real, crawlable URL. */
.blog-hero{padding-bottom:clamp(18px,2vw,26px)}
.btoolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding-bottom:clamp(18px,2.2vw,26px);margin-bottom:clamp(20px,2.6vw,30px);
  border-bottom:1px solid var(--line)}
.bchips{display:flex;flex-wrap:wrap;gap:8px}
.bchip-l{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;min-height:36px;
  border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-2);
  font-family:var(--font-display);font-weight:700;font-size:.86rem;text-decoration:none;
  transition:border-color .2s,color .2s,background .2s}
.bchip-l:hover{border-color:var(--purple-300);color:var(--purple-700)}
.bchip-l[aria-current],.bchip-l.on{background:var(--ink);border-color:var(--ink);color:#fff}
.bchip-n{font-size:.72rem;font-weight:800;opacity:.6}
.bchip-l[aria-current] .bchip-n,.bchip-l.on .bchip-n{opacity:.75}

.bsearch{position:relative;display:flex;align-items:center;min-width:250px;flex:0 1 320px}
.bsearch-i{position:absolute;left:14px;display:grid;place-items:center;color:var(--ink-4);
  pointer-events:none}
.bsearch input{width:100%;height:42px;padding:0 40px 0 41px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:.92rem;
  transition:border-color .2s,box-shadow .2s}
.bsearch input::placeholder{color:var(--ink-4)}
.bsearch input:focus{outline:none;border-color:var(--purple-300);
  box-shadow:0 0 0 4px rgba(124,58,237,.12)}
.bsearch input::-webkit-search-cancel-button{display:none}
.bsearch-x{position:absolute;right:8px;width:28px;height:28px;border-radius:50%;border:0;
  background:var(--line-2);color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.bsearch-x:hover{background:var(--line);color:var(--ink)}
.bcount{margin:-10px 0 20px;font-size:.88rem;color:var(--ink-3)}

.bfeat{margin-bottom:clamp(16px,1.8vw,24px)}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
@media(max-width:1040px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.bgrid{grid-template-columns:1fr}}

.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.bcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:transparent}
.bcard-l{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.bt{overflow:hidden;background:var(--line-2)}
.bt img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.bcard:hover .bt img{transform:scale(1.035)}
.bt-blank{display:grid;place-content:center;justify-items:center;gap:9px}
.bt-i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#fff;
  color:var(--purple-600);border:1px solid var(--purple-100)}
.bt-t{font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-4)}
.bcard-b{padding:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;gap:9px;flex:1}
.bcard-m{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.76rem;
  color:var(--ink-4);font-weight:600}
.bchip{font-family:var(--font-display);font-size:.68rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--purple-700);background:var(--purple-50);
  border:1px solid var(--purple-100);border-radius:999px;padding:3px 9px}
.bdot{opacity:.5}
.bcard-h{font-family:var(--font-display);font-size:1.08rem;line-height:1.3;
  letter-spacing:-.018em;color:var(--ink);margin:0}
.bcard-x{margin:0;font-size:.91rem;line-height:1.62;color:var(--ink-3)}
.bcard-go{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:7px;
  font-weight:700;font-size:.87rem;color:var(--purple-600);min-height:24px}
.bcard:hover .bcard-go{gap:11px}

/* The newest article, given the width it earns. */
.bcard-lead .bcard-l{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:stretch}
.bcard-lead .bt{height:100%}
.bcard-lead .bcard-b{padding:clamp(22px,2.8vw,38px);justify-content:center;gap:12px}
.bcard-lead .bcard-h{font-size:clamp(1.3rem,2.2vw,1.85rem);letter-spacing:-.026em}
.bcard-lead .bcard-x{font-size:1rem}
@media(max-width:820px){.bcard-lead .bcard-l{grid-template-columns:1fr}
  .bcard-lead .bt{aspect-ratio:16/9 !important}}

.bempty{text-align:center;padding:clamp(40px,6vw,72px) 20px;border:1px dashed var(--line);
  border-radius:var(--r-lg);background:var(--bg-soft);color:var(--ink-3)}
.bempty p{margin:0}
.bempty-h{font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--ink);
  margin-bottom:8px !important}
/* [hidden] is a display:none rule of the lowest specificity, so any class
   here that sets its own display would otherwise ignore it and the search
   would filter nothing. */
.bsearch-x[hidden],.bgrid[hidden],.bfeat[hidden],.bcard[hidden],.bempty[hidden],
.bcount[hidden]{display:none !important}
/* Article lead image. The ratio is reserved in CSS as well as on the img so
   the headline above it does not jump while the photograph loads. */
.art-hero{margin:clamp(24px,3vw,38px) 0 0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--line-2);aspect-ratio:16/9;max-width:900px}
.art-hero img{width:100%;height:100%;object-fit:cover;display:block}

/* --- pagination (blog archives and the WordPress kit) ---------------- */
.bpag{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-top:clamp(28px,3.4vw,44px)}
.bpg{min-width:42px;min-height:42px;padding:0 14px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:12px;border:1px solid var(--line);background:#fff;
  color:var(--ink-2);font-family:var(--font-display);font-weight:700;font-size:.9rem;
  text-decoration:none;transition:border-color .2s,color .2s}
.bpg:hover{border-color:var(--purple-300);color:var(--purple-700)}
.bpg.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* The honeypot. Off screen rather than display:none, because the scrapers
   worth defending against skip fields that are not rendered at all. */
.hp-wrap{position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;left:-9999px;top:auto}

/* --- per service engagement packages ---------------------------------
   The home page tier band, reused on a service page. Same card, same
   rules, so a buyer who saw it on the home page recognises it here. */
.pkgband{background:var(--bg-tint)}
.pkg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.5vw,20px);align-items:stretch}
@media(max-width:1140px){.pkg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.pkg-grid{grid-template-columns:1fr}}
.pkg-grid .tier{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,26px);position:relative}
.pkg-grid .tier-list{flex:1}
.pkg-grid .tier .btn{margin-top:auto}
.pkg-note{margin:clamp(20px,2.4vw,30px) 0 0;text-align:center;font-size:.92rem;
  color:var(--ink-3)}

/* --- quote modal extras ---------------------------------------------
   The dialog, the close button and the card are already styled in
   base.css. This is only the line that tells someone the service field
   was filled in for them. */
.mq-ctx{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding:10px 13px;
  border-radius:var(--r-md);background:var(--purple-50);border:1px solid var(--purple-100);
  font-size:.86rem;color:var(--ink-2)}
.mq-ctx svg{color:var(--purple-600);flex:none;margin-top:2px}
.mq-ctx strong{color:var(--ink)}
#modal-quote .enq-form{margin-top:16px}

/* --- call back card --------------------------------------------------
   Deliberately not a modal. It sits in the corner and never covers the
   page, because an overlay that obscures content on a phone is the
   pattern Google names in its intrusive interstitial guidance, and the
   rankings are worth more than the extra conversion. */
.cbcard{position:fixed;right:22px;bottom:22px;z-index:880;width:330px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-xl);padding:20px 20px 16px;
  opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cbcard.show{opacity:1;transform:none;pointer-events:auto}
.cbcard[hidden]{display:none !important}
.cbcard-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
  border:0;background:var(--bg-tint);color:var(--ink-3);display:grid;place-items:center;
  cursor:pointer}
.cbcard-x:hover{background:var(--line);color:var(--ink)}
.cbcard-h{display:flex;align-items:center;gap:8px;margin:0 0 6px;
  font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--ink)}
.cbcard-h svg{color:var(--purple-600)}
.cbcard-s{margin:0 0 14px;font-size:.85rem;line-height:1.55;color:var(--ink-3)}
.cbcard-form .field{margin-bottom:10px}
.cbcard-form .inp{height:40px;font-size:.92rem}
.cbcard-n{margin:10px 0 0;font-size:.74rem;line-height:1.5;color:var(--ink-4)}
/* The collapsed state, used on phones so the card is a bar until tapped. */
.cbcard-peek{display:none}

@media(max-width:640px){
  .cbcard{left:10px;right:10px;bottom:10px;width:auto;padding:0;border-radius:var(--r-lg)}
  .cbcard-peek{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;
    padding:14px 44px 14px 16px;font-family:var(--font-display);font-weight:700;
    font-size:.95rem;color:var(--ink);cursor:pointer;min-height:52px;text-align:left}
  .cbcard-i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
    background:var(--purple-50);color:var(--purple-600);border:1px solid var(--purple-100)}
  .cbcard-body{display:none;padding:0 16px 16px}
  .cbcard.open .cbcard-peek{display:none}
  .cbcard.open .cbcard-body{display:block;padding-top:18px}
  .cbcard-h{font-size:.95rem}
}
@media(prefers-reduced-motion:reduce){
  .cbcard{transition:opacity .01s}
}
/* A phone number split across two lines is unreadable and untappable. */
.enq-note a[href^="tel:"],.cbcard-n a[href^="tel:"]{white-space:nowrap}

/* --- quote modal: fit the viewport, and never hide the button --------
   Two separate problems. The card was 707px tall on desktop and 967px on
   a phone, so on a 1366x768 laptop (about 625px of usable height once the
   browser chrome is gone) the Send button sat below the fold: the form
   looked complete and the action was invisible.

   First, compact the modal specifically. The contact page form is on a
   full page with room to breathe and keeps its original spacing.

   Second, accept that a five field form cannot fit every viewport. On a
   phone in landscape there are 390 usable pixels and no honest layout
   fits. So the card becomes a flex column: heading pinned at the top,
   fields scrolling in the middle, and the Send button pinned to the
   bottom where it is always reachable. */
#modal-quote .modal-card{
  padding:clamp(18px,2.2vw,26px);
  /* 94vh rather than 92: the extra two percent is the difference between
     an iPad in landscape fitting exactly and scrolling by seven pixels. */
  max-height:min(94vh,100dvh - 20px);
  display:flex;flex-direction:column;overflow:hidden}
#modal-quote .modal-card>h2{padding-right:42px;font-size:1.22rem;line-height:1.25}
#modal-quote .enq-sub{margin-top:5px;font-size:.86rem;line-height:1.45}
#modal-quote .mq-ctx{margin-top:10px;padding:8px 11px;font-size:.82rem}
#modal-quote .enq-form{margin-top:12px;min-height:0;display:flex;flex-direction:column}
/* Only the fields scroll. Negative margin plus matching padding keeps the
   focus ring from being clipped by the scroll container. */
#modal-quote .mq-fields{overflow-y:auto;min-height:0;flex:1;
  margin:0 -4px;padding:0 4px 2px}
#modal-quote .field{margin-bottom:11px}
#modal-quote .field>.flabel{font-size:.85rem;margin-bottom:5px}
#modal-quote .enq-form .frow{gap:11px}
#modal-quote .inp{padding:10px 14px;font-size:.95rem}
#modal-quote select.inp{padding-right:40px;background-position:right 13px center}
#modal-quote textarea.inp{min-height:74px}
/* Pinned. The border only appears when there is something scrolled under
   it, which is what the shadow is for. */
#modal-quote .mq-foot{flex:none;padding-top:12px;margin-top:2px;
  border-top:1px solid var(--line-2);background:#fff}
#modal-quote .mq-foot .btn{padding-block:13px}
#modal-quote .enq-note{margin-top:9px;font-size:.72rem;line-height:1.45}
#modal-quote .modal-close{top:12px;right:12px;width:34px;height:34px}

@media(max-width:560px){
  #modal-quote .modal-card{padding:16px 14px}
  #modal-quote .modal-card>h2{font-size:1.12rem}
  /* Two short fields still fit side by side at 360px, and stacking them
     is what pushed the phone layout to 967px. */
  #modal-quote .enq-form .frow{grid-template-columns:1fr 1fr;gap:9px}
  #modal-quote .inp{padding:9px 11px;font-size:.9rem}
  #modal-quote select.inp{padding-right:32px;background-position:right 9px center;
    background-size:15px}
  #modal-quote textarea.inp{min-height:64px}
}
/* Short viewports shed explanation before they shed fields. The standfirst
   goes first: it is reassurance, and the form is self explanatory without
   it. The prefilled service banner goes next. The fields never go. */
/* The last squeeze, for viewports short enough that the fields would still
   scroll: iPad landscape, a small Android, a phone held sideways. */

@media(max-height:800px){
  #modal-quote .enq-sub{display:none}
  #modal-quote .modal-card>h2{margin-bottom:2px}
}
@media(max-height:700px){
  #modal-quote .field{margin-bottom:8px}
  #modal-quote .field>.flabel{margin-bottom:3px}
  #modal-quote .inp{padding:8px 12px}
  #modal-quote textarea.inp{min-height:58px}
  #modal-quote .enq-form .frow{gap:8px}
  #modal-quote .mq-foot{padding-top:9px}
  #modal-quote .mq-foot .btn{padding-block:11px}
}
@media(max-height:680px){
  #modal-quote .mq-ctx{display:none}
}
@media(max-height:560px){
  #modal-quote textarea.inp{min-height:46px}
  #modal-quote .field{margin-bottom:6px}
  /* The privacy line is the last thing to go before the fields start
     scrolling. Dropping it here is what makes an iPad in landscape fit. */
  #modal-quote .enq-note{display:none}
  #modal-quote .mq-foot{padding-top:8px}
}
@media(max-height:460px){
  #modal-quote .enq-note{display:none}
  #modal-quote .modal-card{padding:12px 14px}
  #modal-quote .modal-card>h2{font-size:1.05rem}
  #modal-quote textarea.inp{min-height:56px}
}

/* At 360px "What do you need?" wraps to two lines and the row stops lining
   up. Stacking the pair was the obvious fix and the wrong one: it turns three
   rows into five and adds more height than the wrap ever cost. Shrinking the
   label keeps the pairs side by side. */
@media(max-width:400px){
  #modal-quote .field>.flabel{font-size:.78rem;gap:5px}
  #modal-quote .field>.flabel .opt-tag{font-size:.62rem;padding:1px 5px}
}
@media(max-width:339px){
  #modal-quote .enq-form .frow{grid-template-columns:1fr}
}