:root{
  /* brand constants, identical in both themes */
  --blue-rgb:49,101,245;
  --sun-rgb:255,200,82;
  --blue:rgb(var(--blue-rgb));
  --sun:rgb(var(--sun-rgb));

  /* service verticals: Build = Core Blue, Grow = Yellow, Support = Light Blue */
  --v-build-rgb:49,101,245;
  --v-grow-rgb:255,200,82;
  --v-support-rgb:128,223,242;
  --v-impact-rgb:126,108,232;   /* fourth value card */

  /* ---- accent hierarchy ----------------------------------------------
     1st  Teal, every accent word, link, number, kicker and icon.
     2nd  Yellow, highlights, gradients, glows, carets, small signals.
     3rd  Core Blue: RARE, and only as a solid ground: the CTA panel, the
                      hire bar, filled buttons, the logo. Never as accent type.
     The canvas is a dark navy, so Core Blue type sits on a near-relative of
     itself and fights its own background. Teal is the secondary brand colour
     and separates cleanly from that ground. --hl (headline accent) is white
     on dark and deep teal on light. Blue as a solid FILL is fine, it brings
     its own ground with it, which is why buttons and the CTA panel keep it. */
  /* themed channels: every rgba() below resolves through these.
     --ice-rgb is the PRIMARY ACCENT channel (blue). Every scope that flips
     tone must restate all three accents, or an accent lands on the wrong
     surface, that was the old light-mode bug class.                     */
  --canvas-rgb:5,13,24;
  --panel-rgb:11,27,48;
  --ink-rgb:244,247,251;
  --pure-rgb:255,255,255;   /* max contrast against the canvas */
  --ice-rgb:128,223,242;    /* 1st: Light Blue #80DFF2 */
  --hl-rgb:255,255,255;     /* headline + eyebrow accent: white on dark */
  --sun-ink-rgb:255,200,82; /* 3rd: small signals only, where legible */
  --sh-rgb:0,0,0;           /* shadow colour */

  --canvas:rgb(var(--canvas-rgb));
  --panel:rgb(var(--panel-rgb));
  --ink:rgb(var(--ink-rgb));
  --pure:rgb(var(--pure-rgb));
  --ice:rgb(var(--ice-rgb));
  --hl:rgb(var(--hl-rgb));
  --sun-ink:rgb(var(--sun-ink-rgb));
  --on-pure:#0B1626;        /* text sitting on a --pure surface */
  --dim:#7E8AA0;

  /* inverted tone band (the "how it works" / logos block) */
  --light:#F6F8FB;
  --light-ink:#0B1626;

  /* pillar card gradient stops */
  --pillar-b:#0A1626;
  --tint-blue:#12306B;
  --tint-deep:#1D1849;

  --r:22px;
  --w:1240px;
}

html[data-theme="light"]{
  --canvas-rgb:255,255,255;
  --panel-rgb:242,246,252;
  --ink-rgb:14,25,42;
  --pure-rgb:11,22,38;
  --ice-rgb:10,112,138;     /* Light Blue is unreadable on white; deepen it */
  --hl-rgb:49,101,245;      /* Core Blue: headline accents on a WHITE ground */
  --sun-ink-rgb:150,98,0;   /* yellow is unreadable on white; drop to an ochre */
  --sh-rgb:24,40,68;
  --on-pure:#FFFFFF;
  --dim:#57627A;
  /* yellow and light blue are unreadable as text on white */
  --v-build-rgb:49,101,245;
  --v-grow-rgb:150,98,0;
  --v-support-rgb:10,112,138;
  --v-impact-rgb:88,66,196;     /* darkened so it reads on white */
  --light:#EEF2F8;
  --light-ink:#0B1626;
  --pillar-b:#E6EDF8;
  --tint-blue:#DBE6FA;
  --tint-deep:#E7E3F7;
}

/* Blocks that keep a dark tone in both themes: photo heroes sit on dark
   imagery, the final CTA is a solid blue panel, the hire bar is blue.
   .geo paints its own hardcoded navy gradient, so it belongs here too, without it, light mode put near-black text on a dark panel. */
.hero:has(.scrim),.final,.hirebar,.term,.cs-tile,.mediacard,.pillar__media,.shot-b,.vst .shot,.vshot,
.bcard,.agentic,.chatmock,.chat,.geo{
  --canvas-rgb:5,13,24;
  --panel-rgb:11,27,48;
  --ink-rgb:244,247,251;
  --pure-rgb:255,255,255;
  --ice-rgb:128,223,242;
  --hl-rgb:255,255,255;
  --sun-ink-rgb:255,200,82;
  --sh-rgb:0,0,0;
  --on-pure:#0B1626;
  --dim:#A7B1C4;
  /* Derived aliases must be restated wherever a -rgb channel changes: a custom
     property is substituted where it is DECLARED, so a :root-level
     --pure:rgb(var(--pure-rgb)) keeps the root value inside this scope. */
  --canvas:rgb(var(--canvas-rgb));
  --panel:rgb(var(--panel-rgb));
  --ink:rgb(var(--ink-rgb));
  --pure:rgb(var(--pure-rgb));
  --ice:rgb(var(--ice-rgb));
  --hl:rgb(var(--hl-rgb));
  --sun-ink:rgb(var(--sun-ink-rgb));
  color:var(--ink);
}

/* The light band keeps its light tone in both themes. */
.band{
  --canvas-rgb:246,248,251;
  --panel-rgb:255,255,255;
  --ink-rgb:11,22,38;
  --pure-rgb:11,22,38;
  --ice-rgb:10,112,138;
  --hl-rgb:49,101,245;      /* Core Blue: headline accents on a WHITE ground */
  --sun-ink-rgb:150,98,0;
  --sh-rgb:24,40,68;
  --on-pure:#FFFFFF;
  --dim:#5A6474;
  --v-build-rgb:49,101,245;
  /* Derived aliases must be restated wherever a -rgb channel changes: a custom
     property is substituted where it is DECLARED, so a :root-level
     --pure:rgb(var(--pure-rgb)) keeps the root value inside this scope. */
  --canvas:rgb(var(--canvas-rgb));
  --panel:rgb(var(--panel-rgb));
  --ink:rgb(var(--ink-rgb));
  --pure:rgb(var(--pure-rgb));
  --ice:rgb(var(--ice-rgb));
  --hl:rgb(var(--hl-rgb));
  --sun-ink:rgb(var(--sun-ink-rgb));
}

/* In light mode the nav floats over dark hero photography until it gains a
   background on scroll, so it has to stay light-on-dark up there. */
html[data-theme="light"] body:has(.hero .scrim) .nav:not(.scrolled){
  --ink-rgb:244,247,251;
  --pure-rgb:255,255,255;
  --ice-rgb:128,223,242;
  --hl-rgb:255,255,255;
  --sun-ink-rgb:255,200,82;
  --on-pure:#0B1626;
  /* Derived aliases must be restated wherever a -rgb channel changes: a custom
     property is substituted where it is DECLARED, so a :root-level
     --pure:rgb(var(--pure-rgb)) keeps the root value inside this scope. */
  --canvas:rgb(var(--canvas-rgb));
  --panel:rgb(var(--panel-rgb));
  --ink:rgb(var(--ink-rgb));
  --pure:rgb(var(--pure-rgb));
  --ice:rgb(var(--ice-rgb));
  --hl:rgb(var(--hl-rgb));
  --sun-ink:rgb(var(--sun-ink-rgb));
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  background:var(--canvas);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:34px;
  padding:16px 30px;
  transition:background .3s,backdrop-filter .3s;
}
.nav.scrolled{background:rgba(var(--canvas-rgb),.82);backdrop-filter:blur(14px)}
.nav .mark{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
.nav .mark img{width:30px;height:30px;border-radius:8px}
.nav .mark b{color:var(--ice);font-weight:700}
.nav ul{display:flex;gap:26px;list-style:none;margin-left:8px}
.nav ul a{font-size:14.5px;font-weight:500;color:rgba(var(--ink-rgb),.85)}
.nav ul a:hover{color:var(--pure)}
.nav .cta-pill{
  margin-left:auto;background:var(--pure);color:var(--on-pure);
  font-weight:700;font-size:14.5px;padding:11px 22px;border-radius:100px;
  transition:transform .2s;
}
.nav .cta-pill:hover{transform:scale(1.04)}
.navburger{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:38px;height:38px;padding:0;margin-left:2px;
  border:none;background:none;cursor:pointer;flex:none;
}
.navburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.nav.nav-open .navburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.nav-open .navburger span:nth-child(2){opacity:0}
.nav.nav-open .navburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:820px){
  .navburger{display:flex}
  .nav ul{
    display:flex;flex-direction:column;gap:0;list-style:none;
    position:absolute;top:100%;left:0;right:0;margin:0;
    padding:8px 20px 20px;
    background:rgb(var(--canvas-rgb));
    border-bottom:1px solid rgba(var(--ink-rgb),.08);
    max-height:calc(100vh - 100%);overflow-y:auto;
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;
  }
  .nav.nav-open ul{opacity:1;transform:none;pointer-events:auto}
  .nav ul li{width:100%}
  .nav ul li > a{display:block;padding:14px 2px;font-size:16px;border-bottom:1px solid rgba(var(--ink-rgb),.07)}
  .nav li.has-dd > a::after{display:none}
}
@media(max-width:480px){
  .nav{gap:10px;padding:14px 16px}
  .nav .cta-pill{padding:9px 16px;font-size:13px;white-space:nowrap}
  .navburger{width:34px;height:34px;margin-left:0}
}
body.nav-locked{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.hero .scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(var(--canvas-rgb),.94) 0%,rgba(var(--canvas-rgb),.45) 42%,rgba(6,21,40,.25) 100%),
    linear-gradient(100deg,rgba(6,21,40,.55) 0%,transparent 60%);
}
.hero .inner{position:relative;z-index:2;padding:0 0 56px;width:100%}
.hero h1{
  font-size:clamp(32px,5.2vw,72px);
  font-weight:800;letter-spacing:-.035em;line-height:1.02;
  max-width:17ch;
}
.hero h1 .rot{color:var(--hl);display:inline-block;min-width:1ch;white-space:nowrap}
.hero .sub{
  margin-top:22px;font-size:clamp(16px,1.6vw,20px);font-weight:400;
  color:rgba(var(--ink-rgb),.92);max-width:44ch;
}
.hero .sub b{font-weight:700}
.hero .ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:15.5px;
  padding:15px 28px;border-radius:100px;
  transition:transform .2s,background .2s,border-color .2s;
}
.pill.solid{background:var(--pure);color:var(--on-pure)}
.pill.solid:hover{transform:scale(1.04)}
.pill.ghost{border:1.5px solid rgba(var(--pure-rgb),.55);color:var(--pure)}
.pill.ghost:hover{border-color:var(--pure);transform:scale(1.03)}
@media(max-width:480px){
  .hero .ctas{gap:10px;flex-wrap:nowrap}
  .pill{padding:10px 16px;font-size:13px;gap:6px;white-space:nowrap}
}
.pill.blue{background:var(--blue);color:#fff}
.pill.blue:hover{transform:scale(1.04)}
/* shared button additions (used by src/components/Button.astro) */
.pill.sm{padding:11px 22px;font-size:14.5px}
.pill.sun{background:#FFC83D;color:#0A1220}
.pill.sun:hover{transform:scale(1.04)}
.pill.nw{white-space:nowrap}
.pill .arr{display:inline-block;transition:transform .2s}
.pill:hover .arr{transform:translateX(4px)}
.pill:focus-visible{outline:2px solid var(--ice);outline-offset:3px}


/* ---------- statement sections ---------- */
.sec{padding:clamp(70px,9vw,130px) 0}
.statement{
  font-size:clamp(30px,4.6vw,58px);
  font-weight:700;letter-spacing:-.03em;line-height:1.08;
  max-width:24ch;
}
.statement .cont{color:var(--dim)}
.statement .hl{color:var(--hl)}

/* card row */
.cardrow{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px;margin-top:56px}
.mediacard{position:relative;border-radius:var(--r);overflow:hidden;background:var(--panel);aspect-ratio:4/3.4;display:block}
.mediacard img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mediacard:hover img{transform:scale(1.04)}
.mediacard .tag{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(var(--canvas-rgb),.78);backdrop-filter:blur(8px);
  font-size:13px;font-weight:600;padding:8px 14px;border-radius:100px;
}
@media(max-width:820px){.cardrow{grid-template-columns:1fr;gap:14px}.mediacard{aspect-ratio:16/10}}

/* ---------- GEO chat feature ---------- */
.geo{
  border-radius:calc(var(--r) + 8px);
  background:
    radial-gradient(120% 160% at 85% -20%,rgba(var(--blue-rgb),.55) 0%,rgba(var(--blue-rgb),.12) 45%,transparent 70%),
    linear-gradient(135deg,#0A1C36 0%,#071426 70%);
  border:1px solid rgba(var(--ice-rgb),.14);
  padding:clamp(36px,5vw,72px);
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;
  overflow:hidden;position:relative;
}
.geo h2{font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.04;max-width:13ch}
.geo p{margin-top:18px;color:rgba(var(--ink-rgb),.8);font-size:16.5px;max-width:42ch}
.geo p a{color:var(--ice);border-bottom:1px solid rgba(var(--ice-rgb),.4)}
.geo .engines{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.geo .engines span{
  font-size:12.5px;font-weight:700;letter-spacing:.04em;
  border:1px solid rgba(var(--ink-rgb),.22);border-radius:100px;padding:7px 14px;color:rgba(var(--ink-rgb),.85);
}
.chat{
  background:rgba(var(--canvas-rgb),.72);border:1px solid rgba(var(--ink-rgb),.1);
  border-radius:18px;padding:22px;backdrop-filter:blur(6px);
  font-size:14.5px;box-shadow:0 30px 80px rgba(var(--sh-rgb),.4);
}
.chat .q,.chat .a{padding:13px 16px;border-radius:14px;max-width:92%}
.chat .q{background:rgba(var(--ink-rgb),.09);margin-left:auto;margin-bottom:14px}
.chat .a{background:rgba(var(--blue-rgb),.16);border:1px solid rgba(var(--blue-rgb),.3)}
.chat .a b{color:var(--ice)}
.chat .a .caret{display:inline-block;width:8px;height:16px;background:var(--sun-ink);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chat .src{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px dashed rgba(var(--ink-rgb),.14);font-size:12px;color:var(--dim)}
.chat .src .sq{width:20px;height:20px;border-radius:6px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:9.5px;font-weight:700}
@media(max-width:900px){.geo{grid-template-columns:1fr}}

/* ---------- fronts (build/grow/support) ---------- */
.rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:44px;flex-wrap:wrap}
.rowhead h2{font-size:clamp(30px,4vw,50px);font-weight:800;letter-spacing:-.03em}
.rowhead .side{font-size:15.5px;color:var(--dim);max-width:44ch}
.rowhead .side a{color:var(--ice);border-bottom:1px solid rgba(var(--ice-rgb),.35)}
.fronts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.front{
  border-radius:var(--r);background:var(--panel);
  border:1px solid rgba(var(--ink-rgb),.07);
  padding:30px 28px 0;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s,border-color .3s;
}
.front:hover{transform:translateY(-4px);border-color:rgba(var(--ice-rgb),.3)}
.front .k{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--ice)}
.front h3{font-size:23px;font-weight:800;letter-spacing:-.02em;margin-top:10px}
.front p{color:var(--dim);font-size:15px;margin-top:10px;flex:1}
.front .shot{margin-top:24px;border-radius:12px 12px 0 0;overflow:hidden}
.front .shot img{width:100%;aspect-ratio:16/9.5;object-fit:cover;object-position:top}
@media(max-width:900px){.fronts{grid-template-columns:1fr}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{border-top:1px solid rgba(var(--ink-rgb),.14);padding-top:22px}
.stat b{font-size:clamp(38px,4.6vw,60px);font-weight:800;letter-spacing:-.03em;display:block;line-height:1}
.stat b i{font-style:normal;color:var(--ice)}
.stat span{display:block;margin-top:10px;color:var(--dim);font-size:14.5px;max-width:22ch}
.stat span a{color:rgba(var(--ink-rgb),.75);border-bottom:1px solid rgba(var(--ink-rgb),.2)}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr;gap:28px 18px}}

/* ---------- light band: how + logos ---------- */
.band{background:var(--light);color:var(--light-ink)}
.band-flat{border-radius:0}
.band .statement .cont{color:#6B7686}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
/* four steps should read as one row, not three-plus-one. :has() keeps this in
   CSS rather than an inline override on every page that happens to have four. */
.steps:has(.step:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.steps:has(.step:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}
/* Themed through the tokens, so it also inverts correctly inside .band.
   It used to hardcode a white ground while the h3 inherited page ink, which
   painted white headings on a white card everywhere outside .band. */
.step{background:var(--panel);border-radius:var(--r);padding:30px 28px;border:1px solid rgba(var(--ink-rgb),.12)}
.step .n{font-size:13px;font-weight:800;color:var(--ice);letter-spacing:.08em}
.step h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-top:12px;color:var(--ink)}
.step p{color:rgba(var(--ink-rgb),.68);font-size:15px;margin-top:10px}
@media(max-width:820px){.steps,.steps:has(.step:nth-child(4)){grid-template-columns:1fr}}
.logos{margin-top:clamp(70px,9vw,110px);overflow:hidden;position:relative}
.logos .lab{text-align:center;font-size:13.5px;font-weight:600;color:var(--dim);margin-bottom:30px}
.logos .track{display:flex;gap:64px;align-items:center;width:max-content;animation:marq 44s linear infinite}
.logos .track img{height:42px;width:auto;opacity:.8;filter:brightness(0) invert(1);transition:opacity .3s}
/* same white-silhouette problem as the hero strip: re-ink for light grounds */
html[data-theme="light"] .logos .track img,
.band .logos .track img{filter:brightness(0);opacity:.62}
html[data-theme="light"] .logos .track img:hover,
.band .logos .track img:hover{opacity:.95}
.logos .track img:hover{opacity:1}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- final cta ---------- */
.final{position:relative;overflow:hidden;background:var(--blue);color:#fff;text-align:left}
.final .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.final h2{font-size:clamp(38px,5.6vw,72px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.final h2 em{font-style:normal;color:var(--sun)}
.final p{margin-top:18px;font-size:17px;color:rgba(var(--pure-rgb),.85);max-width:40ch}
.final .side{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.final .pill.solid:hover{transform:scale(1.05)}
.final .mail{font-size:15px;color:rgba(var(--pure-rgb),.8)}
.final .mail a{border-bottom:1px solid rgba(var(--pure-rgb),.4)}
@media(max-width:820px){.final .wrap{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{padding:34px 0;background:var(--canvas)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--dim)}
footer a:hover{color:var(--ink)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .logos .track{animation:none}
  .chat .a .caret{animation:none}
}

/* ============ interior page primitives ============ */
.phead-b{padding:clamp(150px,18vw,230px) 0 clamp(50px,6vw,80px)}
.phead-b .kick{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hl);margin-bottom:22px}
.phead-b .kick a{color:inherit}
.phead-b h1{font-size:clamp(40px,6.4vw,84px);font-weight:800;letter-spacing:-.035em;line-height:1.0;max-width:15ch}
.phead-b h1 .cont{color:var(--dim)}
.phead-b h1 .hl{color:var(--hl)}
.lede{margin-top:24px;font-size:clamp(16px,1.6vw,19px);color:rgba(var(--ink-rgb),.82);max-width:52ch}
.lede b{color:var(--pure)}
.phead-b .ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

/* numbered offer rows (services) */
.rows-b{display:flex;flex-direction:column;gap:14px}
.row-b{display:grid;grid-template-columns:70px 1fr 1.4fr auto;gap:26px;align-items:baseline;padding:26px 28px;border:1px solid rgba(var(--ink-rgb),.1);border-radius:12px}
.row-b .n{font-size:13px;font-weight:800;color:var(--ice)}
.row-b h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
.row-b p{color:var(--dim);font-size:15px}
.row-b .tail{font-size:13px;font-style:italic;color:var(--ice)}
a.row-b{transition:background .25s,border-color .25s}
a.row-b:hover{background:rgba(var(--ink-rgb),.04);border-color:rgba(var(--ink-rgb),.22)}
@media(max-width:820px){.row-b{grid-template-columns:44px 1fr;gap:10px 16px}.row-b p{grid-column:2}.row-b .tail{display:none}}

/* two-col definition rows */
.defs-b{display:grid;gap:0;border-top:1px solid rgba(var(--ink-rgb),.1)}
.def-b{display:grid;grid-template-columns:220px 1fr;gap:26px;padding:24px 0;border-bottom:1px solid rgba(var(--ink-rgb),.1)}
.def-b dt{font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ice)}
.def-b dd{color:rgba(var(--ink-rgb),.82);font-size:15.5px;max-width:70ch}
.def-b dd b{color:var(--pure)}
.def-b dd a{color:var(--ice);border-bottom:1px solid rgba(var(--ice-rgb),.35)}
@media(max-width:700px){.def-b{grid-template-columns:1fr;gap:8px}}

/* prose */
.prose-b{max-width:70ch}
.svcgrid + .prose-b{margin-top:32px}
.prose-b p{color:rgba(var(--ink-rgb),.82);font-size:16.5px;margin-bottom:18px}
.prose-b p b{color:var(--pure)}
.prose-b .lead{font-size:clamp(20px,2.4vw,27px);font-weight:600;letter-spacing:-.015em;color:var(--pure);line-height:1.3}
.prose-b a{color:var(--ice);border-bottom:1px solid rgba(var(--ice-rgb),.35)}
.prose-b h4{color:var(--pure);font-size:15px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin:26px 0 10px}
.prose-b ul{padding-left:20px;margin-bottom:18px}
.prose-b li{color:rgba(var(--ink-rgb),.8);font-size:15.5px;margin-bottom:8px}

/* faq */
.faq-b{border-top:1px solid rgba(var(--ink-rgb),.1)}
.faq-b details{border-bottom:1px solid rgba(var(--ink-rgb),.1)}
.faq-b summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:17px;font-weight:700}
.faq-b summary::-webkit-details-marker{display:none}
.faq-b summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ice);transition:transform .3s}
.faq-b details[open] summary::after{transform:rotate(45deg)}
.faq-b .fa{padding:0 0 22px;color:var(--dim);font-size:15.5px;max-width:70ch}
.faq-b .fa a{color:var(--ice)}

/* trust strip (hero) */
.trust-strip{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(var(--ink-rgb),.1);list-style:none}
.trust-strip li{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--dim)}

/* proof bar: 4-card variant of the proven .chartrow/.chart-card pattern */
.chartrow-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1020px){.chartrow-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.chartrow-4{grid-template-columns:1fr}}

/* comparison table (why offshore) — same visual language as .post-prose table */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.1)}
.compare-b{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px;border-radius:var(--r);overflow:hidden}
.compare-b th,.compare-b td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(var(--ink-rgb),.1)}
.compare-b thead th{background:var(--panel);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--dim);text-transform:uppercase;border-bottom:1px solid rgba(var(--ice-rgb),.25)}
.compare-b tbody th{font-weight:700;color:var(--pure);white-space:nowrap;background:var(--panel)}
.compare-b tbody td{color:rgba(var(--ink-rgb),.82)}
.compare-b tbody tr:last-child td,.compare-b tbody tr:last-child th{border-bottom:none}
.compare-b tbody td:nth-child(4){background:rgba(var(--ice-rgb),.06);font-weight:600;color:var(--pure)}

/* how engagements are shaped (bulleted) */
.defs-shaped{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;border-top:1px solid rgba(var(--ink-rgb),.1);padding-top:28px}
.def-shaped h3{font-size:19px;font-weight:800;letter-spacing:-.015em;margin-bottom:8px}
.def-shaped>p{color:var(--dim);font-size:14.5px;margin-bottom:14px}
.def-shaped ul{padding-left:20px}
.def-shaped li{color:rgba(var(--ink-rgb),.82);font-size:14.5px;margin-bottom:8px}
@media(max-width:820px){.defs-shaped{grid-template-columns:1fr}}

/* pillar-detail grids: small eyebrow label above a reused .bento/.svcgrid/.defs-b */
.pillar-detail-label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}

/* image blocks */
.shot-b{border-radius:var(--r);overflow:hidden;margin:8px 0}
.shot-b img{width:100%;object-fit:cover}
.shotrow-b{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:820px){.shotrow-b{grid-template-columns:1fr}}

/* light band variants */
.band .prose-b p{color:#4A5568}
.band .prose-b p b,.band .prose-b .lead{color:var(--light-ink)}
.band .defs-b,.band .def-b{border-color:#E2E8F0}
.band .def-b dt{color:var(--blue)}
.band .def-b dd{color:#4A5568}
.band .def-b dd b{color:var(--light-ink)}

/* forms (contact) */
.hswrap-b{background:var(--panel);border:1px solid rgba(var(--ink-rgb),.08);border-radius:var(--r);padding:clamp(24px,3vw,40px)}
.hswrap-b .hs-form-frame{background:#fff;border-radius:12px;padding:8px}
.hswrap-b iframe{border-radius:12px}

/* stat inline chips */
.chips-b{display:flex;gap:10px;flex-wrap:wrap}
.chips-b span{font-size:12.5px;font-weight:700;letter-spacing:.04em;border:1px solid rgba(var(--ink-rgb),.22);border-radius:100px;padding:7px 14px;color:rgba(var(--ink-rgb),.85)}

/* breadcrumb-ish next link */
.next-b{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;border-top:1px solid rgba(var(--ink-rgb),.12);font-weight:700;font-size:clamp(18px,2.4vw,26px);letter-spacing:-.015em}
.next-b .small{display:block;font-size:13px;font-weight:600;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.next-b:hover .arr{transform:translateX(6px)}
.next-b .arr{transition:transform .3s;color:var(--ice)}

/* case-study b-style */
.hero.short{min-height:66vh}
.chap-b{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center;padding:clamp(30px,4vw,54px) 0;border-top:1px solid rgba(var(--ink-rgb),.1)}
.chap-b:first-of-type{border-top:none}
.chap-b.flip .txt{order:2}
.chap-b .num{font-size:13px;font-weight:800;color:var(--ice);letter-spacing:.08em}
.chap-b h3{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;margin:10px 0 14px}
.chap-b h3 em{font-style:normal;color:var(--hl)}
.chap-b p{color:rgba(var(--ink-rgb),.78);font-size:15.5px;margin-bottom:12px}
.chap-b p b{color:var(--pure)}
.chap-b .media{border-radius:var(--r);overflow:hidden;background:var(--panel)}
.chap-b .media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.chap-b h4{color:var(--pure);font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin:16px 0 8px}
.chap-b ul{padding-left:18px;margin-bottom:12px}
.chap-b li{color:rgba(var(--ink-rgb),.75);font-size:15px;margin-bottom:6px}
@media(max-width:820px){.chap-b{grid-template-columns:1fr}.chap-b.flip .txt{order:0}}

/* ================= v2 - the visibility instrument ================= */
/* serif italic accent - the brand's voice inside the grotesk system */
.acc{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
h1 .acc,h2 .acc,.statement .acc{font-size:1.04em}

/* mono utility face for labels & data */
.mono,.eyebrow,.chip-m,.term,.tick-item,.chart-card .meta,.axis{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--hl);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--hl);display:inline-block}
.eyebrow .idx{color:var(--dim)}

/* nav: floating pill on scroll */
.nav{transition:background .3s,backdrop-filter .3s,margin .3s,border-radius .3s,padding .3s}
.nav.scrolled{background:rgba(var(--canvas-rgb),.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(var(--ink-rgb),.06)}

/* query ticker marquee */
.ticker{overflow:hidden;border-top:1px solid rgba(var(--ink-rgb),.1);border-bottom:1px solid rgba(var(--ink-rgb),.1);padding:16px 0;position:relative}
.ticker .track{display:flex;gap:0;width:max-content;animation:tickmove 60s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.tick-item{display:inline-flex;align-items:center;gap:12px;padding:0 28px;font-size:13px;color:var(--dim);white-space:nowrap}
.tick-item b{color:var(--ink);font-weight:500}
.tick-item .ok{color:#5BE49B}
.tick-item .eng{color:var(--ice)}
.tick-item::after{content:"/";margin-left:28px;color:rgba(var(--ink-rgb),.18)}
@keyframes tickmove{to{transform:translateX(-50%)}}

/* terminal panel */
.term{background:#040A13;border:1px solid rgba(var(--ice-rgb),.16);border-radius:14px;font-size:13.5px;line-height:1.7;overflow:hidden;box-shadow:0 30px 90px rgba(var(--sh-rgb),.5)}
.term .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(var(--ink-rgb),.08);color:var(--dim);font-size:11.5px;letter-spacing:.06em}
.term .bar i{width:9px;height:9px;border-radius:50%;background:rgba(var(--ink-rgb),.14);font-style:normal}
.term .bar i:first-child{background:rgba(255,97,90,.7)}
.term .bar i:nth-child(2){background:rgba(255,200,82,.7)}
.term .bar i:nth-child(3){background:rgba(91,228,155,.7)}
.term .body{padding:18px 20px;min-height:170px}
.term .ln{display:block;margin-bottom:8px;color:rgba(var(--ink-rgb),.82)}
.term .ln .p{color:var(--ice)}
.term .ln .brand{color:var(--pure);font-weight:600;background:rgba(var(--blue-rgb),.25);padding:1px 6px;border-radius:4px}
.term .ln .dimm{color:var(--dim)}
.term .caret{display:inline-block;width:7px;height:14px;background:var(--sun-ink);vertical-align:-2px;animation:blink 1s steps(1) infinite}

/* chart proof cards */
.chartrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.chart-card{background:var(--panel);border:1px solid rgba(var(--ink-rgb),.08);border-radius:var(--r);padding:24px;position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.chart-card:hover{border-color:rgba(var(--ice-rgb),.35);transform:translateY(-3px)}
.chart-card .meta{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.chart-card .val{font-size:clamp(30px,3vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1}
.chart-card .val i{font-style:normal;color:var(--ice)}
.chart-card .lbl{color:var(--dim);font-size:13.5px;margin-top:8px}
.chart-card .lbl a{color:rgba(var(--ink-rgb),.75);border-bottom:1px solid rgba(var(--ink-rgb),.2)}
.chart-card svg{display:block;width:100%;height:64px;margin-top:18px}
.chart-card svg path.line{fill:none;stroke:var(--ice);stroke-width:2;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.8s cubic-bezier(.3,.6,.2,1)}
.chart-card svg path.fill{fill:url(#gfill);opacity:0;transition:opacity 1.4s .5s}
.chart-card.in svg path.line{stroke-dashoffset:0}
.chart-card.in svg path.fill{opacity:.25}
.chart-card .bars{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:18px}
.chart-card .bars i{flex:1;background:linear-gradient(to top,rgba(var(--blue-rgb),.9),rgba(var(--sun-ink-rgb),.9));border-radius:3px 3px 0 0;transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.3,.6,.2,1)}
.chart-card.in .bars i{transform:scaleY(1)}
@media(max-width:900px){.chartrow{grid-template-columns:1fr}}

/* bento grid */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bento .cell{background:var(--panel);border:1px solid rgba(var(--ink-rgb),.07);border-radius:var(--r);padding:26px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;transition:border-color .3s}
.bento .cell:hover{border-color:rgba(var(--ice-rgb),.3)}
.bento .cell h3{font-size:19px;font-weight:800;letter-spacing:-.015em}
.bento .cell p{color:var(--dim);font-size:14px;flex:1}
.bento .c-4{grid-column:span 4}.bento .c-3{grid-column:span 3}.bento .c-2{grid-column:span 2}.bento .c-6{grid-column:span 6}
@media(max-width:860px){.bento .c-4,.bento .c-3,.bento .c-2,.bento .c-6{grid-column:span 6}}

/* cursor-tracked glow card */
.glow{position:relative}
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(var(--ice-rgb),.10),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}
.glow:hover::before{opacity:1}

/* varied service row treatment: index cards */
.svcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.svc-card{background:var(--panel);border:1px solid rgba(var(--ink-rgb),.07);border-radius:var(--r);padding:26px 26px 22px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,transform .3s;position:relative;overflow:hidden}
.svc-card:hover{border-color:rgba(var(--ice-rgb),.32);transform:translateY(-3px)}
.svc-card .n{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ice);letter-spacing:.1em}
.svc-card h3{font-size:19px;font-weight:800;letter-spacing:-.015em}
.svc-card p{color:var(--dim);font-size:14.5px;flex:1}
.svc-card .go{font-size:13px;color:var(--ice);transition:transform .3s}
.svc-card:hover .go{transform:translateX(4px)}
@media(max-width:820px){.svcgrid{grid-template-columns:1fr}}

/* SEO-only "Explore SEO" 3-col card grid — scoped classes, does not touch .svcgrid/.svc-card used elsewhere */
.svcgrid-explore-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 0 14px;border-bottom:1px solid rgba(var(--ink-rgb),.1);margin-bottom:22px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.svcgrid-explore{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc-card-explore{background:var(--panel);border:1px solid rgba(var(--ink-rgb),.09);border-radius:var(--r);padding:20px 18px 18px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,background .3s,transform .3s;color:var(--ink)}
.svc-card-explore:hover{border-color:rgba(var(--ice-rgb),.4);transform:translateY(-3px)}
.svc-card-explore .n{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;color:var(--ice)}
.svc-card-explore h3{font-size:16.5px;font-weight:700;letter-spacing:-.015em;margin:0}
.svc-card-explore p{color:var(--dim);font-size:12.5px;line-height:1.6;flex:1;margin:0}
.svc-card-explore .go{font-size:12px;font-weight:600;color:var(--ice);transition:transform .3s}
.svc-card-explore:hover .go{transform:translateX(4px)}
@media(max-width:820px){.svcgrid-explore{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svcgrid-explore{grid-template-columns:1fr}.svcgrid-explore-meta{flex-direction:column;align-items:flex-start;gap:6px}}

/* pull quote */
.pull{border-left:2px solid var(--ice);padding:6px 0 6px 28px;margin:10px 0}
.pull p{font-size:clamp(20px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.pull p .acc{color:var(--ice)}
.pull cite{display:block;margin-top:14px;font-style:normal;font-size:13.5px;color:var(--dim)}

/* count-up trigger handled by b.js via [data-count] */

/* footer upgrade */
footer{border-top:1px solid rgba(var(--ink-rgb),.07)}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .ticker .track{animation:none}
  .chart-card svg path.line{stroke-dashoffset:0;transition:none}
  .chart-card .bars i{transform:none;transition:none}
  .glow::before{display:none}
}

/* ================= contact page (appended, scoped) - split layout + dark HubSpot theme ================= */
.contact-split{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(26px,4vw,60px);align-items:start}
.contact-aside{display:flex;flex-direction:column;gap:22px}
.contact-aside .term .body{min-height:0}
.contact-aside .defs-b{border-top:none}
.contact-aside .def-b{grid-template-columns:1fr;gap:6px;padding:16px 0}
.contact-aside .def-b:first-child{border-top:1px solid rgba(var(--ink-rgb),.1)}
@media(max-width:960px){.contact-split{grid-template-columns:1fr}}
.hswrap-b .hs-form fieldset{max-width:100%!important;margin-bottom:0}
.hswrap-b .hs-form .hs-form-field{margin-bottom:18px}
.hswrap-b .hs-form .input{margin-right:0!important}
.hswrap-b .hs-form label{display:block;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--ink-rgb),.8);margin-bottom:8px}
.hswrap-b .hs-form label .hs-form-required{color:var(--ice);margin-left:2px}
.hswrap-b .hs-form input[type=text],.hswrap-b .hs-form input[type=email],.hswrap-b .hs-form input[type=tel],.hswrap-b .hs-form input[type=number],.hswrap-b .hs-form input[type=date],.hswrap-b .hs-form select,.hswrap-b .hs-form textarea{width:100%;background:rgba(var(--canvas-rgb),.72);border:1px solid rgba(var(--ink-rgb),.16);border-radius:12px;color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:15px;padding:13px 16px;transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.hswrap-b .hs-form select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2380DFF2' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.hswrap-b .hs-form select option{background:var(--panel);color:var(--ink)}
.hswrap-b .hs-form input:focus,.hswrap-b .hs-form select:focus,.hswrap-b .hs-form textarea:focus{outline:none;border-color:var(--ice);box-shadow:0 0 0 3px rgba(var(--ice-rgb),.16)}
.hswrap-b .hs-form input::placeholder,.hswrap-b .hs-form textarea::placeholder{color:var(--dim)}
.hswrap-b .hs-form textarea{min-height:140px;resize:vertical}
.hswrap-b .hs-form ul.inputs-list{list-style:none;padding:0;margin:0}
.hswrap-b .hs-form ul.inputs-list li{margin:6px 0}
.hswrap-b .hs-form ul.inputs-list label{display:flex;align-items:center;gap:9px;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:14.5px;font-weight:500;letter-spacing:0;text-transform:none;margin-bottom:0}
.hswrap-b .hs-form input[type=checkbox],.hswrap-b .hs-form input[type=radio]{width:auto;accent-color:var(--blue)}
.hswrap-b .hs-form .hs-error-msgs{list-style:none;padding:0;margin:6px 0 0}
.hswrap-b .hs-form .hs-error-msgs label{color:#FF938E;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;margin:0}
.hswrap-b .hs-form .hs_error_rollup .hs-error-msgs label{color:#FF938E}
.hswrap-b .hs-form input.hs-input.invalid,.hswrap-b .hs-form textarea.hs-input.invalid,.hswrap-b .hs-form select.hs-input.invalid{border-color:rgba(255,97,90,.65)}
.hswrap-b .hs-form .legal-consent-container,.hswrap-b .hs-form .hs-richtext{color:var(--dim);font-size:12.5px;line-height:1.55}
.hswrap-b .hs-form .legal-consent-container a,.hswrap-b .hs-form .hs-richtext a{color:var(--ice);border-bottom:1px solid rgba(var(--ice-rgb),.35)}
.hswrap-b .hs-form .hs-button,.hswrap-b .hs-form input[type=submit]{display:inline-flex;align-items:center;width:auto;background:var(--blue);color:#fff;border:0;border-radius:100px;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:700;font-size:15.5px;padding:15px 30px;margin-top:6px;cursor:pointer;transition:transform .2s,background .2s;-webkit-appearance:none;appearance:none}
.hswrap-b .hs-form .hs-button:hover,.hswrap-b .hs-form input[type=submit]:hover{transform:scale(1.04);background:#2554D6}
.hswrap-b .hs-form .hs-button:focus-visible,.hswrap-b .hs-form input[type=submit]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--ice-rgb),.35)}
.hswrap-b .submitted-message{color:var(--ink);font-size:16.5px}
.hswrap-b .submitted-message a{color:var(--ice);border-bottom:1px solid rgba(var(--ice-rgb),.35)}

/* legacy mini stat trio (ski/valo chapters) + h1x reset */
.mini{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap}
.mini div b{font-size:26px;font-weight:800;letter-spacing:-.02em;display:block;color:var(--ice)}
.mini div span{font-size:12.5px;color:var(--dim)}
.h1x{margin:0}

/* ================= v3 de-AI reset - one typeface, zero ornament ================= */
/* serif accents become plain grotesk (markup unchanged) */
.acc{font-family:inherit !important;font-style:normal !important;font-weight:inherit;letter-spacing:inherit}
h1 .acc,h2 .acc,.statement .acc{font-size:inherit}

/* eyebrows: plain uppercase grotesk label - no dash, no index, no mono */
.eyebrow{font-family:"Hanken Grotesk",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hl)}
.eyebrow::before{display:none}
.eyebrow .idx{display:none}

/* mono utility: back to grotesk everywhere */
.mono,.chip-m,.tick-item,.chart-card .meta,.axis{font-family:"Hanken Grotesk",sans-serif}
.svc-card .n,.chap-b .num{font-family:"Hanken Grotesk",sans-serif;font-weight:800}

/* terminal chrome -> clean chat card (Shopify 'entered the chat' style) */
.term{font-family:"Hanken Grotesk",sans-serif;font-size:14.5px;background:rgba(var(--canvas-rgb),.72);border:1px solid rgba(var(--ink-rgb),.1);border-radius:18px}
.term .bar{font-family:"Hanken Grotesk",sans-serif;letter-spacing:.02em;text-transform:none}
.term .bar i{display:none}
.term .ln .p{color:var(--ice);font-weight:600}
.term .ln .dimm{color:var(--dim)}

/* ticker: grotesk, editorial not terminal */
.tick-item{font-size:13.5px}
.tick-item b{font-weight:650}

/* kill cursor glow */
.glow::before{display:none !important}

/* hero switcher gone (markup removed on homepage; belt & braces) */
#hero-sw{display:none}

/* ================= agentic card (Shopify-style) ================= */
.agentic{
  position:relative;overflow:hidden;border-radius:calc(var(--r) + 6px);
  background:linear-gradient(290.7deg,#07142A 58.79%,#132F68 100%);
  display:grid;grid-template-columns:1fr 1fr;
}
.agentic::after{content:"";pointer-events:none;position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 0 rgba(120,140,170,.35)}
.agentic__copy{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(26px,4vw,44px)}
.agentic__copy h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.agentic__copy p{margin-top:14px;color:rgba(var(--ink-rgb),.75);font-size:15.5px;max-width:46ch}
.agentic__copy p a{text-decoration:underline;text-underline-offset:3px}
.agentic__copy p a:hover{color:var(--pure);text-decoration:none}
.badges{display:flex;align-items:center}
.badge{
  position:relative;display:grid;place-items:center;
  width:54px;height:54px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(var(--pure-rgb),.08),0 1px 3px rgba(var(--sh-rgb),.3),0 5px 10px rgba(var(--sh-rgb),.2);
}
.badge + .badge{margin-left:-14px}
.badge img{width:26px;height:26px}
.agentic__media{display:flex;align-items:center;justify-content:center;padding:clamp(24px,3.4vw,40px)}
.chatmock{
  width:100%;max-width:460px;background:rgba(4,10,19,.66);border:1px solid rgba(var(--ink-rgb),.1);
  border-radius:18px;padding:22px;font-size:14.5px;box-shadow:0 30px 80px rgba(var(--sh-rgb),.4);
}
.chatmock .cm-q{background:rgba(var(--ink-rgb),.1);border-radius:14px 14px 4px 14px;padding:13px 16px;max-width:88%;margin-left:auto;margin-bottom:14px}
.chatmock .cm-a{background:rgba(var(--blue-rgb),.18);border:1px solid rgba(var(--blue-rgb),.32);border-radius:14px 14px 14px 4px;padding:13px 16px;max-width:92%;min-height:88px}
.chatmock .cm-a b{color:var(--ice)}
.chatmock .cm-caret{display:inline-block;width:8px;height:15px;background:var(--sun-ink);vertical-align:-2px;animation:blink 1s steps(1) infinite}
.chatmock .cm-src{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px dashed rgba(var(--ink-rgb),.14);font-size:12px;color:var(--dim)}
.chatmock .cm-src .sq{width:20px;height:20px;border-radius:6px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:9.5px;font-weight:700;flex:none}
@media(max-width:900px){.agentic{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.chatmock .cm-caret{animation:none}}

/* scroll-driven word highlight on statements */
.statement .w{color:rgba(var(--ink-rgb),.34);transition:color .3s cubic-bezier(.2,.6,.2,1)}
.statement .w.lit{color:var(--pure)}
html[data-theme="light"] .statement .w{color:rgba(var(--ink-rgb),.44)}
.band .statement .w{color:#B7BFCC}
.band .statement .w.lit{color:var(--light-ink)}
@media(prefers-reduced-motion:reduce){.statement .w{color:inherit}.band .statement .w{color:inherit}}

/* ================= POP layer - same style, more energy ================= */
.pop{color:var(--hl)}
.statement .w.lit.popw{color:var(--hl)}
.statement .pop .w.lit{color:var(--hl)}
.mediacard{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.mediacard:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(var(--sh-rgb),.45)}
.mediacard .tag{background:rgba(var(--blue-rgb),.85);backdrop-filter:blur(8px)}
.chart-card .val{color:var(--ice)}
.stat b{color:var(--ice)}
.final{background:linear-gradient(120deg,var(--blue) 0%,#1E3FBF 70%,#1E0F48 130%)}
.step{transition:transform .4s,box-shadow .4s}
.step:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,22,38,.10)}
.svc-card:hover,.bento .cell:hover{box-shadow:0 22px 55px rgba(var(--sh-rgb),.35)}
.next-b .arr{color:var(--ice);font-size:18px}

/* chapters without media: full-width text, comfortable measure */
.chap-b:not(:has(.media)){grid-template-columns:1fr}
.chap-b:not(:has(.media)) .txt{max-width:76ch}

/* ================= nav v2: dropdown + more items ================= */
.nav ul{align-items:center}
.nav li{position:relative;list-style:none}
.nav li.has-dd > a{display:inline-flex;align-items:center;gap:6px}
.nav li.has-dd > a::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.nav li.has-dd:hover > a::after,.nav li.has-dd:focus-within > a::after{transform:rotate(225deg) translateY(-1px)}
.dd{
  position:absolute;top:100%;left:-18px;padding-top:16px;
  opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity .22s,transform .22s;z-index:70;
}
.nav li.has-dd:hover .dd,.nav li.has-dd:focus-within .dd{opacity:1;pointer-events:auto;transform:none}
.dd__panel{
  display:grid;grid-template-columns:repeat(3,220px);gap:8px 28px;
  background:rgba(var(--panel-rgb),.97);backdrop-filter:blur(18px);
  border:1px solid rgba(var(--ink-rgb),.1);border-radius:18px;
  padding:22px 24px;box-shadow:0 30px 80px rgba(var(--sh-rgb),.5);
}
.dd-h{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ice);margin-bottom:4px;display:block}
.dd-col{display:flex;flex-direction:column;gap:2px}
.dd-col a{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(var(--ink-rgb),.85);padding:7px 8px;border-radius:9px;transition:background .2s,color .2s}
.dd-col a:hover{background:rgba(var(--blue-rgb),.18);color:var(--pure)}
.dd-col a .ico{color:var(--ice)}

/* ---------- nav badges ---------- */
/* A small pill that draws the eye to a nav item, bouncing gently. The pill
   always sits on --sun, which is defined once at :root and is the same yellow
   in dark, light and .band, so its text colour is the brand indigo rather than
   a token: the ground never changes, so there is nothing for a theme to
   invert. Same precedent as .bf-cols .new. This is the exception, not licence
   to hardcode elsewhere.

   The animation deliberately lives on the positioning rules below, not here.
   contrast-audit.py strips @media wrappers, so a second rule with this exact
   selector would be read as text inheriting page ink on the badge's own
   yellow, and reported as a failure that does not exist. */
.nav .navbadge{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;background:var(--sun);color:#1E0F48;border-radius:100px;padding:2px 6px;line-height:1.5;white-space:nowrap}
/* Direct child only. The services dropdown lives inside this same <li>, so a
   descendant selector here also absolutely positions the badge on the AI row
   and flings it to the corner of the nav. */
.nav ul li{position:relative}
.nav ul li > a > .navbadge{position:absolute;top:-13px;right:-12px;pointer-events:none;animation:navbounce 1.7s ease-in-out infinite}
/* dropdown rows are tight, so the pill sits inline at the end of the row */
.dd-col a .navbadge{position:static;margin-left:auto;animation:navbounce 1.7s ease-in-out infinite}
@keyframes navbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}
@media(prefers-reduced-motion:reduce){.nav ul li > a > .navbadge,.dd-col a .navbadge{animation:none}}
/* mobile drawer: full-width rows, so the corner offset lands on the row above */
@media(max-width:820px){.nav ul li > a > .navbadge{position:static;display:inline-block;margin-left:10px;vertical-align:middle}}
.dd-all{margin-top:6px;color:var(--ice) !important;font-weight:600}
@media(max-width:960px){.dd{display:none}}

/* ================= iconography ================= */
.ico{width:20px;height:20px;flex:none;display:inline-flex}
.ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bento .cell .ico,.svc-card .ico{width:26px;height:26px;color:var(--ice);margin-bottom:6px}
.step .ico{width:24px;height:24px;color:var(--blue);margin-bottom:10px}
.row-b .ico{color:var(--ice);align-self:center}
.def-b dt .ico{width:17px;height:17px;vertical-align:-3px;margin-right:8px;color:var(--ice)}

/* ================= composed case-study thumbnails ================= */
.cs-tile{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10.5;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.cs-tile:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(var(--sh-rgb),.45)}
.cs-tile .brandmark{position:absolute;top:20px;left:22px;z-index:3;display:flex;align-items:center;gap:10px}
.cs-tile .brandmark span{font-size:38px;font-weight:800;letter-spacing:-.01em;color:#fff}
.cs-tile .shotcard{
  position:absolute;left:9%;right:-6%;bottom:-14%;top:34%;z-index:2;
  border-radius:12px 0 0 0;overflow:hidden;background:var(--panel);
  box-shadow:0 -14px 50px rgba(var(--sh-rgb),.42), 0 0 0 1px rgba(var(--pure-rgb),.09);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.cs-tile:hover .shotcard{transform:translateY(-8px)}
.cs-tile .shotcard img{width:100%;height:100%;object-fit:cover;object-position:top left}
.cs-tile .tag{
  position:absolute;left:16px;bottom:14px;z-index:4;
  background:rgba(var(--canvas-rgb),.82);backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:100px;color:var(--pure);
}
.cs-tile.g-blue{background:linear-gradient(135deg,#1E3FBF 0%,var(--panel) 90%)}
.cs-tile.g-indigo{background:linear-gradient(135deg,#2A1B66 0%,var(--panel) 90%)}
.cs-tile.g-teal{background:linear-gradient(135deg,#0B4F5C 0%,var(--panel) 90%)}
.cs-tile.g-royal{background:linear-gradient(135deg,#3165F5 0%,#101A3C 88%)}
.cs-tile.g-slate{background:linear-gradient(135deg,#2B3A55 0%,var(--panel) 90%)}

/* ================= big stats - Shopify style: number + sentence, no chrome ================= */
.bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
.bs b{display:block;font-size:clamp(56px,6.4vw,92px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--pure)}
.bs b i{font-style:normal;color:var(--ice)}
.bs p{margin-top:14px;color:rgba(var(--ink-rgb),.75);font-size:15.5px;max-width:34ch}
.bs p b{display:inline;font-size:inherit;color:var(--pure);font-weight:700;letter-spacing:0}
.bs a{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--ice);border-bottom:1px solid rgba(var(--ice-rgb),.35)}
@media(max-width:820px){.bigstats{grid-template-columns:1fr;gap:40px}}

/* de-AI remaining chart cards: no micro meta labels */
.chart-card .meta{display:none}
.chart-card .val{font-size:clamp(38px,4vw,54px)}

/* ================= pillar cards - Shopify capability style ================= */
.pillars{display:flex;flex-direction:column;gap:18px}
.pillar{
  position:relative;overflow:hidden;border-radius:calc(var(--r) + 6px);
  background:linear-gradient(135deg,var(--panel) 0%,var(--pillar-b) 100%);
  border:1px solid rgba(var(--ink-rgb),.07);
  display:grid;grid-template-columns:1.05fr 1fr;align-items:center;
  transition:border-color .3s;
}
.pillar:hover{border-color:rgba(var(--ice-rgb),.25)}
.pillar.flip .pillar__copy{order:2}
.pillar.tint-blue{background:linear-gradient(120deg,var(--tint-blue) 0%,var(--panel) 62%)}
.pillar.tint-deep{background:linear-gradient(120deg,var(--tint-deep) 0%,var(--panel) 62%)}
.pillar__copy{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pillar__copy .ico{width:30px;height:30px;color:var(--ice)}
.pillar__copy h3{font-size:clamp(24px,2.8vw,38px);font-weight:800;letter-spacing:-.025em;line-height:1.08}
.pillar__copy p{color:rgba(var(--ink-rgb),.75);font-size:15.5px;max-width:44ch}
.pillar__copy p b{color:var(--pure)}
.pillar__links{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.pillar__links a{
  font-size:13px;font-weight:600;color:rgba(var(--ink-rgb),.85);
  border:1px solid rgba(var(--ink-rgb),.2);border-radius:100px;padding:8px 15px;
  transition:border-color .25s,background .25s,color .25s;
}
.pillar__links a:hover{border-color:var(--ice);color:var(--pure);background:rgba(var(--ice-rgb),.1)}
.pillar__proof{font-size:13.5px;color:var(--dim);margin-top:2px}
.pillar__proof a{color:var(--ice);border-bottom:1px solid rgba(var(--ice-rgb),.35)}
.pillar__media{position:relative;height:100%;min-height:320px}
.pillar__media .m1{position:absolute;right:-6%;top:10%;width:78%;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(var(--sh-rgb),.45),0 0 0 1px rgba(var(--pure-rgb),.08)}
.pillar__media .m2{position:absolute;left:4%;bottom:-8%;width:52%;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(var(--sh-rgb),.5),0 0 0 1px rgba(var(--pure-rgb),.08)}
.pillar.flip .pillar__media .m1{right:auto;left:-6%}
.pillar.flip .pillar__media .m2{left:auto;right:4%}
.pillar__media img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top}
.pillar__media .m2 img{aspect-ratio:4/3}
/* Grow pillar: a scoreboard instead of a screenshot. Own dark surface, because
   .pillar__media forces dark-tone text channels in both themes. */
.pillar__media:has(.scoreboard){display:flex;align-items:center}
.scoreboard{
  flex:1;margin:clamp(22px,2.6vw,34px);
  background:linear-gradient(150deg,rgb(var(--panel-rgb)) 0%,rgb(var(--canvas-rgb)) 100%);
  border:1px solid rgba(var(--ink-rgb),.1);border-radius:18px;
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,28px);
  box-shadow:0 30px 80px rgba(var(--sh-rgb),.4);
}
.sb-head{
  font-size:11.5px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sun-ink);display:flex;align-items:center;gap:8px;margin-bottom:4px;
}
.sb-head::before{content:"";width:16px;height:1px;background:var(--sun-ink);flex:none}
.sb-row{
  display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;
  padding:16px 0;border-top:1px solid rgba(var(--ink-rgb),.1);
}
.sb-row:first-of-type{border-top:0;padding-top:12px}
.sb-row:last-child{padding-bottom:2px}
.sb-n{
  grid-row:1/3;font-size:clamp(34px,3.4vw,50px);font-weight:800;letter-spacing:-.045em;
  line-height:1;color:var(--sun-ink);font-variant-numeric:tabular-nums;
  min-width:5.2ch;transition:transform .3s;
}
.sb-k{
  grid-column:2;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(var(--ink-rgb),.6);transition:color .25s;
}
.sb-d{grid-column:2;font-size:13.5px;line-height:1.45;color:rgba(var(--ink-rgb),.78);margin-top:3px}
.sb-row:hover .sb-k{color:var(--pure)}
.sb-row:hover .sb-n{transform:translateY(-2px)}
.sb-k::after{content:" →";opacity:0;transition:opacity .25s}
.sb-row:hover .sb-k::after{opacity:1}
@media(prefers-reduced-motion:reduce){.sb-n{transition:none}}
@media(max-width:900px){
  .pillar{grid-template-columns:1fr}
  .pillar.flip .pillar__copy{order:0}
  .pillar__media{min-height:260px;order:2}
  .pillar__media:has(.scoreboard){min-height:0}
  .scoreboard{margin:0 clamp(20px,4vw,28px) clamp(24px,4vw,32px)}
}
@media(max-width:560px){
  .sb-row{grid-template-columns:1fr;row-gap:2px}
  .sb-k{grid-row:1;grid-column:1}
  .sb-n{grid-row:2;grid-column:1;min-width:0;font-size:42px}
  .sb-d{grid-row:3;grid-column:1;margin-top:2px}
}

/* ================= hiring banner ================= */
.hirebar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:38px;padding:0 16px;
  background:linear-gradient(90deg,#1E3FBF,#3165F5 55%,#1E3FBF);
  font-size:13px;font-weight:600;color:var(--pure);
}
.hirebar a{display:inline-flex;align-items:center;gap:6px;color:#fff}
.hirebar a b{font-weight:800}
.hirebar a .arr{transition:transform .25s}
.hirebar a:hover .arr{transform:translateX(3px)}
.hirebar .dot{width:6px;height:6px;border-radius:50%;background:var(--sun);animation:blink 2s steps(1) infinite}
.hirebar ~ .nav{top:38px}
.hero{padding-top:38px}
.phead-b{padding-top:calc(clamp(150px,18vw,230px) + 38px)}
@media(max-width:700px){.hirebar{font-size:12px; padding:0 10px;}.hirebar a{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hirebar a .arr{display:none}}

/* ================= testimonials carousel ================= */
.tsec .rowhead{margin-bottom:34px}
.tscroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tscroll::-webkit-scrollbar{display:none}
.tscroll.draggable{cursor:grab;user-select:none}
.tscroll.draggable.dragging{cursor:grabbing;scroll-snap-type:none}
.tscroll.draggable.dragging .tcard{pointer-events:none}
.tcard{
  flex:0 0 min(460px,86vw);scroll-snap-align:start;
  background:var(--panel);border:1px solid rgba(var(--ink-rgb),.08);border-radius:calc(var(--r) + 2px);
  padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:20px;
  transition:border-color .3s,transform .3s;
}
.tcard:hover{border-color:rgba(var(--ice-rgb),.28);transform:translateY(-3px)}
.tcard .who{display:flex;align-items:center;gap:16px}
.tcard .who .face{width:62px;height:62px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(var(--pure-rgb),.1)}
.tcard .who .face img{width:70%;height:auto;object-fit:contain}
.tcard .who .face.fill{background:none}
.tcard .who .face.fill img{width:100%;height:100%;object-fit:cover}
.tcard .who b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em}
.tcard .who span{display:block;font-size:13.5px;color:var(--dim);margin-top:2px}
.tcard blockquote{margin:0;flex:1}
.tcard blockquote p{color:rgba(var(--ink-rgb),.8);font-size:15px;line-height:1.6;margin-bottom:12px}
.tcard blockquote p:first-child{color:var(--pure);font-weight:600;font-size:16px}
.tnav{display:flex;gap:10px}
.tnav button{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(var(--ink-rgb),.2);
  background:transparent;color:var(--pure);font-size:17px;cursor:pointer;
  transition:background .25s,border-color .25s;
}
.tnav button:hover{background:rgba(var(--blue-rgb),.25);border-color:var(--blue)}

/* ================= blog cards ================= */
.blogcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.4vw,22px);margin-top:34px}
@media(max-width:900px){.blogcards{grid-template-columns:1fr}}
.bcard{
  position:relative;border-radius:var(--r);overflow:hidden;min-height:250px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;
  transition:transform .4s,box-shadow .4s;
}
.bcard:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(var(--sh-rgb),.4)}
/* one brand colour per card: Core Blue, Light Blue, Yellow. Text colour is
   picked per ground rather than inherited, so all three stay legible. */
.bcard.b1{background:linear-gradient(155deg,#3E6FF7 0%,#1E3FBF 100%);--card-ink:#fff;--card-dim:rgba(255,255,255,.8);--card-rule:rgba(255,255,255,.28)}
.bcard.b2{background:linear-gradient(155deg,#9BE8F7 0%,#5CC8DF 100%);--card-ink:#06222B;--card-dim:rgba(6,34,43,.72);--card-rule:rgba(6,34,43,.22)}
.bcard.b3{background:linear-gradient(155deg,#FFD576 0%,#F5B32E 100%);--card-ink:#2A1D00;--card-dim:rgba(42,29,0,.72);--card-rule:rgba(42,29,0,.22)}
.bcard .k{
  display:inline-flex;align-items:center;align-self:flex-start;
  font-size:11.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--card-ink);opacity:.75;
  padding:5px 11px;border-radius:100px;border:1px solid var(--card-rule);
}
.bcard h3{font-size:clamp(18px,1.55vw,21.5px);font-weight:800;letter-spacing:-.02em;
  line-height:1.24;color:var(--card-ink);text-wrap:balance}
.bcard .go{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--card-rule);
  font-size:13.5px;font-weight:700;color:var(--card-ink);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.bcard .go::after{content:"\2192";transition:transform .3s cubic-bezier(.2,.8,.25,1)}
.bcard:hover .go::after{transform:translateX(5px)}
@media(max-width:860px){.blogcards{grid-template-columns:1fr}}

/* ================= google reviews badge ================= */
.gbadge{
  display:inline-flex;align-items:center;gap:12px;margin-top:16px;
  background:#fff;color:#1a1c22;border-radius:14px;padding:10px 18px 10px 12px;
  box-shadow:0 10px 30px rgba(var(--sh-rgb),.25);
  transition:transform .3s,box-shadow .3s;
}
.gbadge:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(var(--sh-rgb),.3)}
.gbadge .gico{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;border:1px solid #E8EAEE}
.gbadge .gico img{width:18px;height:18px}
.gbadge .gtxt b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:#1a1c22}
.gbadge .gtxt .stars{display:flex;align-items:center;gap:6px;font-size:13px;color:#FBBC05;letter-spacing:2px}
.gbadge .gtxt .stars i{font-style:normal;color:#5f6470;font-size:12px;letter-spacing:0}

/* ================= ask-the-AI proof section ================= */
.aiproof{text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.aiproof .kick2{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:rgba(var(--ink-rgb),.8)}
.aiproof .kick2 i{width:6px;height:6px;border-radius:50%;background:var(--ice)}
.aiproof h2{font-size:clamp(34px,4.6vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1.0}
.aipills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.aipills a{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--pure);color:var(--on-pure);font-weight:700;font-size:14.5px;
  padding:11px 22px 11px 15px;border-radius:100px;
  transition:background .3s,color .3s,transform .2s;
}
.aipills a:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
.aipills svg{width:21px;height:21px;fill:currentColor}

/* ================= mega footer ================= */
footer.bigfoot{padding:clamp(60px,8vw,100px) 0 0;background:var(--canvas);border-top:1px solid rgba(var(--ink-rgb),.07)}
.bf-top{display:grid;grid-template-columns:1.1fr 2fr;gap:clamp(40px,6vw,90px);padding-bottom:clamp(44px,6vw,70px)}
.bf-cta h2{font-size:clamp(38px,4.6vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1.0;margin-bottom:24px}
.bf-cta h2 span{color:var(--hl)}
.bf-cta .gbadge{margin-top:18px}
.bf-cta .bf-touch{margin-top:24px}
.bf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.bf-cols h4{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.bf-cols ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.bf-cols a{font-size:14.5px;color:rgba(var(--ink-rgb),.82)}
.bf-cols a:hover{color:var(--pure)}
.bf-cols .new{font-size:10px;font-weight:800;letter-spacing:.06em;background:var(--sun);color:#1E0F48;border-radius:100px;padding:2px 7px;margin-left:7px;vertical-align:2px}
.bf-touch p{font-size:14.5px;color:rgba(var(--ink-rgb),.75);line-height:1.7;margin-bottom:12px}
.bf-touch p b{color:var(--pure)}
.bf-touch a{color:var(--ice)}
.bf-bottom{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  padding:22px 0;border-top:1px solid rgba(var(--ink-rgb),.08);
  font-size:12.5px;color:var(--dim);
}
.bf-bottom a{color:var(--dim);border-bottom:1px solid rgba(var(--ink-rgb),.15)}
.bf-bottom a:hover{color:var(--ink)}
@media(max-width:960px){.bf-top{grid-template-columns:1fr}.bf-cols{grid-template-columns:repeat(2,1fr);gap:32px 20px}}

/* brand marks */
.bmark{display:inline-flex;width:46px;height:46px;flex:none}
.bmark svg{width:100%;height:100%}
.pillar__copy .bmark{margin-bottom:2px}
.rowhead .bmark{width:38px;height:38px;vertical-align:-10px;margin-right:14px}

/* ================= team avatars ================= */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tm-card{
  background:var(--panel);border:1px solid rgba(var(--ink-rgb),.07);border-radius:var(--r);
  padding:26px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  transition:transform .35s,border-color .35s;
  will-change:transform;
}
.tm-card:hover{transform:translateY(-5px);border-color:rgba(var(--ice-rgb),.3)}
.tm-card:hover .tm-ava svg{transform:rotate(-3deg) scale(1.05)}
.tm-ava{width:96px;height:96px;margin-bottom:14px}
.tm-ava svg{width:100%;height:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1);will-change:transform}
.tm-card b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.tm-card > span:last-child,.tm-card span:not(.tm-ava){font-size:13.5px;color:var(--dim)}
.tm-hire{border-style:dashed;border-color:rgba(var(--ice-rgb),.3)}
.tm-hire:hover{background:rgba(var(--blue-rgb),.12)}
.tm-hire span:not(.tm-ava){color:var(--ice)}
@media(max-width:960px){.team-grid{grid-template-columns:repeat(2,1fr)}}

/* team grid photos */
.tm-ava img{width:100%;height:100%;object-fit:cover;object-position:50% var(--y,25%);border-radius:26%;box-shadow:0 0 0 3px rgba(var(--blue-rgb),.55);transition:transform .45s cubic-bezier(.2,.7,.2,1);will-change:transform}
.tm-card:hover .tm-ava img{transform:rotate(-3deg) scale(1.05)}

/* Hero stat bar. Three equal columns, each stacked figure → claim → client, so
   the numbers align on one baseline and no label wraps into a ragged block.
   The 1px grid gap doubles as the dividers: the parent's background shows
   through, so there is no border to fight with the rounded corners. */
.hero-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  margin-top:38px;max-width:640px;border-radius:18px;overflow:hidden;
  /* Safari skips the rounded overflow clip for composited children
     (backdrop-filter, the scaling hairlines); isolate restores it without
     clipping the box-shadow the way clip-path or a mask would */
  isolation:isolate;
  background:rgba(var(--ink-rgb),.13);
  border:1px solid rgba(var(--ink-rgb),.14);
  box-shadow:0 24px 60px rgba(var(--sh-rgb),.35);
}
.hstat{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:19px 20px 17px;min-width:0;
  background:rgba(var(--canvas-rgb),.72);backdrop-filter:blur(16px);
  transition:background .35s;
}
.hstat:hover{background:rgba(var(--canvas-rgb),.94)}
/* On white, a 72%-white card over a white page has no edge at all. Tint the
   cells toward the panel and lean on the shadow instead of transparency. */
html[data-theme="light"] .hero-stats{
  background:rgba(var(--ink-rgb),.10);
  border-color:rgba(var(--ink-rgb),.10);
  box-shadow:0 18px 44px rgba(var(--sh-rgb),.10);
}
html[data-theme="light"] .hstat{background:rgb(var(--panel-rgb))}
html[data-theme="light"] .hstat:hover{background:#fff}
/* a hairline that draws in per column as the bar lands */
.hstat::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--ice),rgba(var(--ice-rgb),0));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s cubic-bezier(.22,.8,.2,1) var(--d,0s);
}
.hero-stats.in .hstat::before,.vin.go .hero-stats .hstat::before{transform:scaleX(1)}
.hstat:nth-child(2)::before{--d:.12s}
.hstat:nth-child(3)::before{--d:.24s}
.hstat b{
  font-size:clamp(29px,3.1vw,38px);font-weight:850;letter-spacing:-.04em;line-height:1;
  color:var(--ice);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.hstat b span{font-size:inherit;color:inherit;max-width:none}
/* matches the bare <span> of the older stat markup as well as .hs-lab */
.hstat>span{font-size:13px;line-height:1.35;color:rgba(var(--ink-rgb),.8);text-wrap:balance}
.hstat .hs-src{
  margin-top:auto;padding-top:4px;font-size:10px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.5);
}
@media(max-width:700px){
  .hero-stats{grid-template-columns:1fr;max-width:none;border-radius:16px}
  .hstat{flex-direction:row;align-items:baseline;gap:12px;padding:14px 18px;flex-wrap:wrap}
  .hstat b{font-size:26px;min-width:78px}
  .hstat>span{flex:1}
  .hstat .hs-src{margin-top:0;padding-top:0;width:100%}
}

/* case-studies index: big 2-up grid (Shape-style) */
.cardrow.cols2{grid-template-columns:repeat(2,1fr);gap:clamp(22px,2.6vw,34px);row-gap:clamp(28px,3.2vw,44px)}
.cols2 .cs-tile{aspect-ratio:16/11;border-radius:calc(var(--r) + 6px)}
.cols2 .cs-tile .brandmark{top:24px;left:28px}
.cols2 .cs-tile .brandmark{right:30px}
.cols2 .cs-tile .brandmark span{font-size:clamp(22px,2.1vw,30px);line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cols2 .cs-tile .shotcard{left:8%;right:-5%;top:32%;bottom:-12%}
.cols2 .cs-tile .tag{left:22px;bottom:20px;font-size:14px;padding:9px 16px}
@media(max-width:820px){.cardrow.cols2{grid-template-columns:1fr}}

/* Shape-style case cards: tile + meta + headline below */
.cs-item{display:block}
.cs-item .cs-tile{display:block;position:relative;aspect-ratio:4/3;margin-bottom:18px}
.cs-item .cs-meta{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--dim);margin-bottom:8px}
.cs-item .cs-meta::before{content:"";display:none}
.cs-item h3{font-size:clamp(20px,1.9vw,27px);font-weight:800;letter-spacing:-.02em;line-height:1.15;max-width:24ch;transition:color .3s}
.cs-item:hover h3{color:var(--ice)}
.cs-item:hover .cs-tile{transform:translateY(-4px)}
.cs-item .cs-tile{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}

/* hero crossfade slideshow */
.hero .fade-stack{position:absolute;inset:0}
.hero .fade-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease}
.hero .fade-stack img.on{opacity:1}
@media(prefers-reduced-motion:reduce){.hero .fade-stack img:first-child{opacity:1}}

/* case-studies zig-zag stagger */
@media(min-width:821px){
  .cardrow.cols2 .cs-item:nth-child(even){margin-top:clamp(48px,6vw,96px)}
  .cardrow.cols2{padding-bottom:clamp(48px,6vw,96px)}
}

/* ---------- blog post (bp-) ---------- */
.bp-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:70;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--blue),var(--sun-ink));pointer-events:none}
.bp-hero{position:relative;padding:clamp(150px,18vh,200px) 0 clamp(40px,6vw,64px);overflow:hidden}
.bp-hero::before{content:"";position:absolute;top:-320px;right:-180px;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(var(--blue-rgb),.16),transparent 65%);pointer-events:none}
.bp-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(36px,5vw,72px);align-items:center}
.bp-hero h1{font-size:clamp(32px,4.6vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin:18px 0 20px;max-width:20ch}
.bp-hero .lead{color:rgba(var(--ink-rgb),.78);font-size:clamp(16.5px,1.6vw,19px);line-height:1.55;max-width:58ch}
.bp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:26px;font-size:13.5px;color:var(--dim);font-weight:600}
.bp-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--dim);opacity:.6}
/* one rule for both tag rows. The blog build used to inline a hardcoded copy
   of this on every tag, which also froze the teal at its dark-theme value. */
.bp-meta .tag,.bp-tags .tag{border:1px solid rgba(var(--ice-rgb),.3);color:var(--ice);border-radius:100px;padding:4px 12px;font-size:12px;font-weight:700;letter-spacing:.04em}
.bp-tags .tag{padding:5px 14px;font-size:12.5px}
.bp-heroimg{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px rgba(var(--sh-rgb),.45),0 0 0 1px rgba(var(--ink-rgb),.07);background:var(--panel)}
.bp-heroimg img{width:100%;aspect-ratio:1/1;object-fit:cover}
.bp-heroimg::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(var(--pure-rgb),.08)}
@media(max-width:960px){.bp-hero .wrap{grid-template-columns:1fr}.bp-heroimg{max-width:420px}}
.bp-grid{display:grid;grid-template-columns:216px minmax(0,1fr);gap:clamp(40px,6vw,90px);align-items:start}
@media(max-width:1000px){.bp-grid{grid-template-columns:1fr}.bp-toc{display:none}}
.bp-toc{position:sticky;top:110px;font-size:13.5px}
.bp-toc h5{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.bp-toc a{display:block;padding:7px 0 7px 14px;color:var(--dim);line-height:1.35;border-left:1px solid rgba(var(--ink-rgb),.14);transition:color .2s,border-color .2s}
.bp-toc a:hover{color:var(--ink)}
.bp-toc a.on{color:var(--ice);border-left-color:var(--ice)}
.bp-toc .bp-back{margin-top:22px;padding-left:0;border-left:0;color:var(--dim);font-weight:700}
.bp-toc .bp-back:hover{color:var(--ice)}
.post-prose{max-width:70ch;min-width:0}
.post-prose>p{color:rgba(var(--ink-rgb),.82);font-size:17px;line-height:1.75;margin-bottom:20px}
.post-prose b,.post-prose strong{color:var(--pure);font-weight:700}
.post-prose a{color:var(--ice);border-bottom:1px solid rgba(var(--ice-rgb),.35);transition:border-color .2s}
.post-prose a:hover{border-bottom-color:var(--ice)}
.post-prose h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:54px 0 18px;scroll-margin-top:120px}
.post-prose h2::before{content:"";display:block;width:34px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--sun-ink));margin-bottom:16px}
.post-prose h3{font-size:clamp(19px,2vw,23px);font-weight:750;letter-spacing:-.015em;margin:38px 0 12px;scroll-margin-top:120px}
.post-prose h4{font-size:16px;font-weight:800;margin:28px 0 10px}
.post-prose ul,.post-prose ol{padding-left:24px;margin:0 0 20px}
.post-prose li{color:rgba(var(--ink-rgb),.8);font-size:16.5px;line-height:1.65;margin-bottom:9px}
.post-prose ul li::marker{color:var(--ice)}
.post-prose ol li::marker{color:var(--ice);font-weight:700}
.post-prose blockquote{margin:30px 0;padding:22px 26px;background:var(--panel);border-left:3px solid var(--ice);border-radius:0 16px 16px 0;color:rgba(var(--ink-rgb),.88);font-size:17.5px;line-height:1.6;font-weight:500}
.post-prose blockquote p:last-child{margin-bottom:0}
.post-prose code{font-family:"IBM Plex Mono",monospace;font-size:.86em;background:rgba(var(--ice-rgb),.1);color:var(--ice);padding:2px 7px;border-radius:6px;border:1px solid rgba(var(--ice-rgb),.18)}
.post-prose pre.shiki{margin:28px 0;padding:20px 22px;border-radius:16px;overflow-x:auto;font-size:14.5px;line-height:1.65;box-shadow:0 18px 50px rgba(var(--sh-rgb),.25),0 0 0 1px rgba(var(--ink-rgb),.06);scrollbar-width:thin;scrollbar-color:rgba(var(--ice-rgb),.5) transparent}
.post-prose pre.shiki code{font-family:"IBM Plex Mono",monospace;background:none;border:none;padding:0;color:inherit;display:block}
.post-prose pre.shiki::-webkit-scrollbar{height:8px}
.post-prose pre.shiki::-webkit-scrollbar-track{background:transparent}
.post-prose pre.shiki::-webkit-scrollbar-thumb{background:rgba(var(--ice-rgb),.4);border-radius:99px}
.post-prose pre.shiki::-webkit-scrollbar-thumb:hover{background:rgba(var(--ice-rgb),.65)}
.post-prose figure{margin:34px 0}
.post-prose figure img{border-radius:16px;width:100%;box-shadow:0 18px 50px rgba(var(--sh-rgb),.35),0 0 0 1px rgba(var(--ink-rgb),.06)}
.post-prose figure.sq img{max-width:560px;margin:0 auto}
.post-prose table{width:100%;margin:30px 0;border-collapse:collapse;font-size:15.5px;line-height:1.5;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(var(--ink-rgb),.1)}
.post-prose th,.post-prose td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(var(--ink-rgb),.1)}
.post-prose thead th{background:var(--panel);color:var(--pure);font-weight:700;border-bottom:1px solid rgba(var(--ice-rgb),.25)}
.post-prose td{color:rgba(var(--ink-rgb),.82)}
.post-prose tbody tr:last-child td{border-bottom:none}
.post-prose tbody tr:nth-child(even){background:rgba(var(--ink-rgb),.02)}
.bp-tags{display:flex;flex-wrap:wrap;gap:10px;margin:52px 0 0}
.bp-cta{margin:64px 0 0;padding:clamp(30px,4vw,46px);border-radius:var(--r);background:linear-gradient(135deg,rgba(var(--blue-rgb),.16),rgba(var(--panel-rgb),.9) 55%),var(--panel);border:1px solid rgba(var(--ice-rgb),.16);display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;justify-content:space-between}
.bp-cta h3{font-size:clamp(21px,2.4vw,27px);font-weight:800;letter-spacing:-.02em;max-width:22ch}
.bp-cta p{color:var(--dim);font-size:15px;margin-top:8px;max-width:46ch}
.bp-rel{margin-top:clamp(60px,8vw,100px)}
.bp-rel .rel-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
.bp-rel h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em}
.bp-rel .rel-all{color:var(--ice);font-weight:700;font-size:14.5px;white-space:nowrap}
.bp-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.bp-rel-grid{grid-template-columns:1fr}}
.bp-card{display:block;border-radius:18px;overflow:hidden;background:var(--panel);border:1px solid rgba(var(--ink-rgb),.07);transition:transform .25s,border-color .25s}
.bp-card:hover{transform:translateY(-5px);border-color:rgba(var(--ice-rgb),.3)}
.bp-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.bp-card .pad{padding:18px 20px 22px}
.bp-card .date{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.bp-card h4{font-size:16.5px;font-weight:750;letter-spacing:-.01em;line-height:1.3;margin-top:8px;color:var(--ink)}

/* ---------- blog landing (bl-) ---------- */
.bl-hero{position:relative;padding:clamp(150px,18vh,200px) 0 clamp(30px,4vw,50px);overflow:hidden}
.bl-hero::before{content:"";position:absolute;top:-340px;left:50%;width:900px;height:760px;transform:translateX(-30%);border-radius:50%;background:radial-gradient(circle,rgba(var(--blue-rgb),.15),transparent 65%);pointer-events:none}
.bl-hero h1{font-size:clamp(36px,5.4vw,68px);font-weight:800;letter-spacing:-.035em;line-height:1.03;margin:18px 0 18px;max-width:16ch}
.bl-hero h1 .pop2{color:var(--hl)}
.bl-hero .sub{color:rgba(var(--ink-rgb),.75);font-size:clamp(16.5px,1.6vw,19px);line-height:1.55;max-width:52ch}
.content-tabs{display:inline-flex;gap:14px;margin-top:28px}
.content-tabs a{padding:12px 26px;border-radius:100px;border:1.5px solid rgba(var(--ink-rgb),.18);font-weight:700;font-size:14.5px;color:rgba(var(--ink-rgb),.7);transition:background .2s,color .2s,border-color .2s}
.content-tabs a:hover{border-color:rgba(var(--ink-rgb),.4);color:var(--ink)}
.content-tabs a.on{background:var(--pure);border-color:var(--pure);color:var(--on-pure)}
.bl-feature{display:grid;grid-template-columns:1.05fr 1fr;border-radius:var(--r);overflow:hidden;background:var(--panel);border:1px solid rgba(var(--ink-rgb),.08);transition:transform .25s,border-color .25s}
.bl-feature:hover{transform:translateY(-4px);border-color:rgba(var(--ice-rgb),.3)}
.bl-feature .img{position:relative;min-height:340px}
.bl-feature .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bl-feature .txt{padding:clamp(26px,3.4vw,46px);display:flex;flex-direction:column;justify-content:center}
.bl-feature .kick{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ice);margin-bottom:14px}
.bl-feature h2{font-size:clamp(22px,2.6vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.12;color:var(--ink)}
.bl-feature p{color:rgba(var(--ink-rgb),.72);font-size:15.5px;line-height:1.6;margin-top:14px;max-width:52ch}
.bl-feature .meta{margin-top:20px;font-size:13px;font-weight:600;color:var(--dim)}
.bl-feature .go{margin-top:22px;color:var(--ice);font-weight:750;font-size:14.5px}
@media(max-width:860px){.bl-feature{grid-template-columns:1fr}.bl-feature .img{min-height:230px}}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
@media(max-width:960px){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.bl-grid{grid-template-columns:1fr}}
.bl-archive{margin-top:clamp(70px,9vw,120px)}
.bl-archive .arc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px}
.bl-archive h2{font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-.025em}
.bl-archive .count{color:var(--dim);font-weight:600;font-size:14px;margin-left:12px}
.bl-search{position:relative}
.bl-search input{width:min(320px,72vw);background:rgba(var(--ink-rgb),.06);border:1px solid rgba(var(--ink-rgb),.16);border-radius:100px;padding:12px 20px 12px 42px;color:var(--ink);font:inherit;font-size:14.5px;outline:none;transition:border-color .2s,background .2s}
.bl-search input:focus{border-color:rgba(var(--ice-rgb),.5);background:rgba(var(--ink-rgb),.09)}
.bl-search input::placeholder{color:var(--dim)}
.bl-search::before{content:"";position:absolute;left:16px;top:50%;width:14px;height:14px;transform:translateY(-50%);border:2px solid var(--dim);border-radius:50%;box-shadow:5px 6px 0 -4px var(--dim)}
.bl-year{font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--ice);margin:34px 0 6px;display:flex;align-items:center;gap:14px}
.bl-year::after{content:"";flex:1;height:1px;background:rgba(var(--ink-rgb),.1)}
.bl-row{display:flex;align-items:baseline;gap:22px;padding:13px 10px;border-radius:12px;transition:background .18s}
.bl-row:hover{background:rgba(var(--ink-rgb),.05)}
.bl-row time{flex:0 0 84px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.bl-row .t{font-size:16px;font-weight:600;color:rgba(var(--ink-rgb),.88);line-height:1.4}
.bl-row:hover .t{color:var(--ice)}
.bl-row .tg{margin-left:auto;flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--dim);border:1px solid rgba(var(--ink-rgb),.14);border-radius:100px;padding:3px 10px;white-space:nowrap}
@media(max-width:640px){.bl-row .tg{display:none}.bl-row time{flex-basis:70px}}
.bl-none{display:none;color:var(--dim);padding:26px 10px;font-size:15px}

/* two-col type hero (homepage) */
.hero-2col{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(40px,5vw,80px);align-items:center}
@media(max-width:1020px){.hero-2col{grid-template-columns:1fr}.hero-2col .chart-card{max-width:440px}}

/* testimonial grid (sector pages): static, 1-2 cards, no carousel */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:20px}
.tgrid .tcard{max-width:none}
/* white-on-transparent client logos need a dark disc, not the default white one */
.tcard .who .face.on-dark{background:#132741;box-shadow:0 0 0 1px rgba(var(--ice-rgb),.22)}
.tcard .who .face.on-dark img{width:78%}

/* ---------- error pages (err-) ---------- */
.errwrap{position:relative;min-height:82vh;display:flex;align-items:center;padding:clamp(130px,16vh,190px) 0 clamp(70px,9vw,120px);overflow:hidden}
.errwrap::before{content:"";position:absolute;top:-20%;left:50%;width:min(1100px,140vw);height:min(1100px,140vw);transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(var(--blue-rgb),.20),rgba(var(--blue-rgb),.05) 45%,transparent 68%);pointer-events:none}
.errwrap .wrap{position:relative;width:100%}
.errnum{font-size:clamp(96px,19vw,240px);font-weight:800;letter-spacing:-.055em;line-height:.82;background:linear-gradient(150deg,var(--pure) 8%,var(--sun-ink) 46%,var(--blue) 96%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:clamp(18px,2.4vw,30px)}
/* The numeral is decorative: the page's meaning sits in the <h1> below it. On
   dark that ramp reads white -> yellow -> blue and looks right. In light mode
   --sun-ink is the darkened amber (150,98,0) that keeps small yellow text
   legible on white, and at 240px it reads as mud, so light gets its own ramp
   straight through Core Blue instead. Tokens only, per the three-context rule. */
html[data-theme="light"] .errnum{background:linear-gradient(150deg,var(--pure) 6%,var(--blue) 92%);-webkit-background-clip:text;background-clip:text}
.errwrap h1{font-size:clamp(28px,4.2vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.06;max-width:19ch;margin-bottom:20px}
.errwrap h1 em{font-style:normal;color:var(--hl)}
.errwrap .esub{color:rgba(var(--ink-rgb),.76);font-size:clamp(16px,1.6vw,18.5px);line-height:1.6;max-width:56ch}
.errwrap .ctas{margin-top:32px}
.errlinks{margin-top:clamp(52px,7vw,84px)}
.errlinks h2{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:20px}
.errgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px}
.errcard{display:block;padding:20px 22px;border-radius:16px;background:var(--panel);border:1px solid rgba(var(--ink-rgb),.08);transition:transform .25s,border-color .25s,background .25s}
.errcard:hover{transform:translateY(-4px);border-color:rgba(var(--ice-rgb),.34);
  background:color-mix(in srgb,var(--panel) 88%,var(--ink))}
.errcard b{display:block;font-size:16px;font-weight:750;letter-spacing:-.01em}
.errcard span{display:block;font-size:13px;color:var(--dim);margin-top:5px;line-height:1.45}
.errcard .go{display:inline-block;margin-top:12px;font-size:13px;font-weight:750;color:var(--ice)}

/* ---------- editorial image trio (collage) ---------- */
.imgtrio{display:flex;align-items:center;gap:clamp(12px,1.3vw,22px)}
.imgtrio .stack{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(12px,1.3vw,22px);margin:auto 0}
.imgtrio .tallcol{flex:1;min-width:0}
.imgtrio img{display:block;width:100%;border-radius:14px;object-fit:cover;box-shadow:0 18px 44px rgba(var(--sh-rgb),.34)}
.imgtrio .tall{aspect-ratio:1/1.575}
.imgtrio .wide{aspect-ratio:1.9/1}
.imgtrio .inset{aspect-ratio:1.45/1;width:76%;margin-left:auto}
.splitrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,5vw,72px);align-items:center;margin-top:34px}
@media(max-width:900px){.splitrow{grid-template-columns:1fr;gap:34px}}

/* ---------- on-site visit: photo + quote (vst-) ---------- */
.vst{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,58px);align-items:center}
.vst .shot,.vshot{position:relative;border-radius:var(--r);overflow:hidden;background:var(--panel);box-shadow:0 30px 70px rgba(var(--sh-rgb),.42)}
.vst .shot img,.vshot img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 22%}
.vshot.wide img{aspect-ratio:4/3.1;object-position:center 16%}
.vst .shot figcaption,.vshot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:46px 22px 18px;
  background:linear-gradient(transparent,rgba(var(--canvas-rgb),.86) 62%);
  font-size:13px;line-height:1.45;color:rgba(var(--ink-rgb),.9);font-weight:550;
}
.vst .said blockquote{margin:0}
.vst .said blockquote p{font-size:clamp(19px,2.1vw,26px);line-height:1.4;font-weight:600;letter-spacing:-.02em;margin-bottom:16px}
.vst .said blockquote p:nth-last-child(2){font-size:clamp(15px,1.4vw,17px);font-weight:450;line-height:1.6;color:rgba(var(--ink-rgb),.74)}
.vst .said .who{display:flex;align-items:center;gap:14px;margin-top:26px}
.vst .said .who .face{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(var(--pure-rgb),.1)}
.vst .said .who .face img{width:70%;height:auto;object-fit:contain}
.vst .said .who b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.vst .said .who span{display:block;font-size:13.5px;color:var(--dim);margin-top:2px}
@media(max-width:860px){.vst{grid-template-columns:1fr;gap:26px}.vst .shot img{aspect-ratio:4/3.2;object-position:center 18%}}

/* ---------- nav preference toggles (theme + language) ---------- */
.navtools{margin-left:auto;display:flex;align-items:center;gap:8px}
.navtools + .cta-pill{margin-left:0}
.ntbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:36px;min-width:36px;padding:0 10px;
  border:1px solid rgba(var(--ink-rgb),.18);border-radius:100px;
  background:rgba(var(--ink-rgb),.05);color:rgba(var(--ink-rgb),.9);
  font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  cursor:pointer;transition:background .25s,border-color .25s,color .25s;
}
.ntbtn:hover{background:rgba(var(--ink-rgb),.12);border-color:rgba(var(--ink-rgb),.34);color:var(--pure)}
.ntbtn:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.ntbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* one icon per theme: sun shows in dark mode (click for light), moon in light */
.ntbtn .i-sun{display:none}
html[data-theme="light"] .ntbtn .i-sun{display:block}
html[data-theme="light"] .ntbtn .i-moon{display:none}
.ntbtn .lt-now{font-variant-numeric:tabular-nums}
.ntbtn .lt-alt{opacity:.42;font-weight:600}
@media(max-width:1080px){.navtools{gap:6px}.ntbtn{height:32px;min-width:32px;padding:0 8px;font-size:11.5px}}
@media(max-width:820px){.navtools .lt-alt{display:none}}

/* hold the page until the Vietnamese swap lands, so no English flashes first */
html[data-lang="vi"]:not(.i18n-ready) body{visibility:hidden}

/* ---------- partner meta line + recognition cards (recog) ---------- */
.pmeta{font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--ice);margin-top:4px}
.recog{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px;margin-top:34px}
.rcard{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--panel);border:1px solid rgba(var(--ink-rgb),.07);
  border-radius:var(--r);padding:22px;transition:border-color .3s,transform .3s;
}
a.rcard:hover{border-color:rgba(var(--ice-rgb),.34);transform:translateY(-4px)}
.rcard .rico{
  width:42px;height:42px;flex:none;border-radius:12px;background:#fff;
  display:grid;place-items:center;overflow:hidden;
  font-size:17px;font-weight:800;color:#0B1626;letter-spacing:-.02em;
}
.rcard .rico img{width:60%;height:auto}
.rcard .rword{background:rgba(var(--ice-rgb),.14);color:var(--ice)}
.rcard .rtxt b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.rcard .rtxt span{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--dim)}
.rnote{margin-top:20px;font-size:13.5px;color:var(--dim);max-width:70ch}
@media(max-width:900px){.recog{grid-template-columns:1fr}}
.tmore{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--ice);border-bottom:1px solid rgba(var(--ice-rgb),.35)}
.tmore:hover{color:var(--pure);border-bottom-color:rgba(var(--pure-rgb),.5)}
.tcard .who .face.mono{background:rgba(var(--ice-rgb),.14);color:var(--ice);font-size:17px;font-weight:800;letter-spacing:-.02em}

/* ---------- service verticals: subtle colour coding ---------- */
.v-build{--accent-rgb:var(--v-build-rgb)}
.v-grow{--accent-rgb:var(--v-grow-rgb)}
.v-support{--accent-rgb:var(--v-support-rgb)}
[class*="v-"]{--accent:rgb(var(--accent-rgb))}

/* the accent only ever touches small marks: kickers, one word in a heading,
   chip edges and a hairline. Never a background wash. */
.v-build .kick,.v-grow .kick,.v-support .kick,
.v-build .eyebrow,.v-grow .eyebrow,.v-support .eyebrow{color:var(--hl)}
/* Headline accents stay Core Blue on every vertical. The vertical colour is
   reserved for the small signals, kicker, eyebrow, rule, chip, dropdown head.
   Grow's yellow becomes an ochre in light mode, which is fine on a 12px kicker
   and wrong on a 48px headline word. */
.v-build .acc,.v-grow .acc,.v-support .acc,
.v-build .pop,.v-grow .pop,.v-support .pop{color:var(--hl)}
.v-build .eyebrow::before,.v-grow .eyebrow::before,.v-support .eyebrow::before{background:var(--accent)}
.vrule{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),transparent 82%);margin-bottom:26px}
.vchip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(var(--accent-rgb),.4);
  border-radius:100px;padding:6px 13px;
}
.vchip i{width:7px;height:7px;border-radius:50%;background:var(--accent);font-style:normal}

/* nav dropdown column headings carry the vertical colour */
/* the vertical colour stays on the mark; the label follows --hl, so the
   Build column does not put Core Blue type on the dark dropdown panel */
.dd-col.v-build .dd-h,.dd-col.v-grow .dd-h,.dd-col.v-support .dd-h{color:var(--hl)}
.dd-col .dd-h [data-mark]{color:var(--accent)}
/* dropdown column headings: brand mark, label, arrow that arrives on hover,
   and a rule that draws itself from the left rather than a flat underline */
a.dd-h{
  display:inline-flex;align-items:center;gap:8px;
  position:relative;width:fit-content;
  padding:2px 2px 7px;margin-bottom:6px;
  transition:color .25s,gap .25s cubic-bezier(.2,.8,.25,1);
}
a.dd-h .bmark{width:15px;height:15px;transition:transform .34s cubic-bezier(.2,.8,.25,1)}
a.dd-h .arw{
  font-size:12px;line-height:1;opacity:0;transform:translateX(-6px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.25,1);
}
a.dd-h::after{
  content:"";position:absolute;left:2px;right:2px;bottom:0;height:1.5px;border-radius:2px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .34s cubic-bezier(.2,.8,.25,1);
}
a.dd-h:hover::after,a.dd-h:focus-visible::after{transform:scaleX(1)}
a.dd-h:hover .bmark{transform:rotate(-9deg) scale(1.16)}
a.dd-h:hover .arw{opacity:1;transform:none}
a.dd-h:hover{gap:9px}
a.dd-h:focus-visible{outline:2px solid var(--accent,var(--ice));outline-offset:3px;border-radius:5px}
.pillar__lead{font-size:clamp(16px,1.5vw,18.5px);font-weight:650;letter-spacing:-.012em;color:rgba(var(--ink-rgb),.9);margin-top:-6px}
.pillar__links .pl-all{border-color:rgba(var(--accent-rgb),.45);color:var(--accent);font-weight:750}
.pillar__links .pl-all:hover{background:rgba(var(--accent-rgb),.12);border-color:var(--accent)}

/* ---------- stepflow: Shopify-style pinned, sequential process steps ---------- */
/* Opt-in with .band.stepflow. Falls back to the plain grid on small screens and
   for reduced motion, so the 30 other pages using .band .steps are untouched. */
.stepflow{position:relative}
.stepflow .sec{padding:0;height:100%}  /* sticky needs a tall containing block */
.stepflow .pin{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(60px,8vh,110px) 0}
.stepflow .rail{
  position:relative;height:2px;margin:34px 0 0;
  background:rgba(11,22,38,.12);border-radius:2px;overflow:hidden;
}
.stepflow .rail i{
  position:absolute;inset:0 auto 0 0;width:var(--p,0%);
  background:linear-gradient(90deg,var(--blue),var(--sun-ink));
  transition:width .45s cubic-bezier(.3,.7,.2,1);
}
.stepflow .steps{margin-top:26px;align-items:stretch}
.stepflow .step{
  opacity:.34;transform:translateY(14px) scale(.975);
  transition:opacity .5s cubic-bezier(.3,.7,.2,1),transform .5s cubic-bezier(.3,.7,.2,1),
             box-shadow .5s,border-color .5s;
  will-change:opacity,transform;
}
.stepflow .step.on{opacity:1;transform:none;box-shadow:0 26px 60px rgba(11,22,38,.13);border-color:rgba(49,101,245,.3)}
.stepflow .step.done{opacity:.62;transform:none}
/* the number becomes a filled chip once the step is live */
.stepflow .step .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:rgba(49,101,245,.1);color:var(--blue);
  font-size:12.5px;letter-spacing:0;transition:background .45s,color .45s,transform .45s;
}
.stepflow .step.on .n{background:var(--blue);color:#fff;transform:scale(1.06)}
.stepflow .step.done .n{background:var(--blue);color:#fff}
.stepflow .step .ico{transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.stepflow .step.on .ico{transform:scale(1.14) rotate(-4deg)}
.stepflow .cue{
  margin-top:24px;font-size:12.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#5A6474;display:flex;gap:10px;align-items:center;
}
.stepflow .cue b{color:var(--blue);font-variant-numeric:tabular-nums}
@media(max-width:900px){
  .stepflow{height:auto !important}
  .stepflow .pin{position:static;min-height:0;padding:0}
  .stepflow .step{opacity:1;transform:none}
  .stepflow .cue{display:none}
}
@media(prefers-reduced-motion:reduce){
  .stepflow{height:auto !important}
  .stepflow .pin{position:static;min-height:0}
  .stepflow .step{opacity:1;transform:none;transition:none}
  .stepflow .rail i{transition:none}
}

/* ---------- homepage intro hero (vin-) ---------- */

/* cover-fill a reel inside any box, relative to that box rather than the viewport */
.vfill{position:absolute;inset:0;overflow:hidden;background:var(--panel);container-type:size}
.vfill iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100cqw,177.78cqh);height:max(56.25cqw,100cqh);border:0;pointer-events:none}

/* Exactly one viewport: the trust strip is pinned to the hero's bottom edge, so
   any overshoot here pushes the logos below the fold. Leave the bottom gap. */
.vin{position:relative;min-height:100svh;display:flex;flex-direction:column;
  padding:156px 0 24px;background:var(--canvas);overflow:hidden}
.vin>.wrap{flex:1;display:flex;align-items:center;width:100%}
.vin .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,4vw,64px);align-items:center;width:100%}

/* ---------- staged copy ---------- */
.vin .say>*{opacity:0;transform:translateY(16px)}
.vin.go .say>*{animation:inup .8s cubic-bezier(.2,.8,.25,1) forwards}
.vin.go .say .eyebrow{animation-delay:.05s}
.vin.go .say h1{animation-delay:.14s}
.vin.go .say .sub{animation-delay:.26s}
.vin.go .say .hero-stats{animation-delay:.38s}
.vin.go .say .ctas{animation-delay:.5s}
@keyframes inup{to{opacity:1;transform:none}}
.vin h1{font-size:clamp(34px,4.6vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1.02}
.vin .sub{margin-top:20px;font-size:clamp(15px,1.4vw,18px);color:rgba(var(--ink-rgb),.84);max-width:46ch}
.vin .sub b{font-weight:700;color:var(--pure)}
.vin .ctas{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* ---------- stage: the badge grows into the player ---------- */
.vin .stage{position:relative;width:100%;max-width:min(660px,calc(58svh * 16 / 9));
  aspect-ratio:16/9;display:grid;place-items:center;justify-self:end}
.vin .badge{
  --size:clamp(104px,13vw,152px);
  position:relative;width:var(--size);height:var(--size);
  border-radius:calc(var(--size) * .225);      /* matches the real mark */
  background:var(--blue);overflow:hidden;
  display:grid;place-items:center;
  box-shadow:0 30px 70px rgba(var(--sh-rgb),.5);
  opacity:0;
}
/* drop from above, then settle with two decreasing bounces */
.vin.go .badge{
  animation:bdshow .01s linear .05s forwards,
            bddrop .82s cubic-bezier(.3,.05,.35,1) .05s forwards,
            bdopen .9s cubic-bezier(.62,0,.15,1) 1.30s forwards;
}
@keyframes bdshow{to{opacity:1}}
@keyframes bddrop{
  0%{transform:translateY(-118vh)}
  54%{transform:translateY(0)}
  67%{transform:translateY(-14%) scaleY(1.04)}
  79%{transform:translateY(0) scaleY(.94)}
  90%{transform:translateY(-5%) scaleY(1.01)}
  100%{transform:translateY(0) scale(1)}
}
/* then grow out from the centre into the full 16:9 frame */
@keyframes bdopen{
  0%{width:var(--size);height:var(--size);border-radius:calc(var(--size) * .225)}
  100%{width:100%;height:100%;border-radius:18px}
}

/* the mark itself, sitting on the blue while it is still a badge */
.vin .lock{position:absolute;z-index:3;display:flex;align-items:flex-end;gap:.05em;
  font-size:calc(var(--size) * .46);font-weight:800;letter-spacing:-.055em;color:#fff;line-height:1}
.vin .lock i{display:block;width:.2em;height:.2em;border-radius:50%;background:#fff;
  margin-bottom:.04em;opacity:0;transform:translateY(-640%)}
/* the dot lands after the square and bounces, as on the current site */
.vin.go .lock i{animation:dotdrop .66s cubic-bezier(.3,.05,.35,1) .86s forwards}
@keyframes dotdrop{
  0%{opacity:1;transform:translateY(-640%)}
  44%{transform:translateY(0)}
  60%{transform:translateY(-62%) scale(.92)}
  76%{transform:translateY(0) scale(1.08)}
  90%{transform:translateY(-18%)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.vin.go .lock{animation:lockout .3s ease 1.46s forwards}
@keyframes lockout{to{opacity:0}}

/* the reel underneath, revealed as the badge opens */
.vin .reel{position:absolute;inset:0;z-index:1;opacity:0;overflow:hidden;container-type:size}
.vin.go .reel{animation:reelin .5s ease 1.58s forwards}
@keyframes reelin{to{opacity:1}}
.vin .reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* cover-fill against the badge, which is what changes size, not the viewport */
.vin .reel iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100cqw,177.78cqh);height:max(56.25cqw,100cqh);border:0;pointer-events:none}
.vin .grade{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(120deg,rgba(var(--blue-rgb),.34),transparent 62%)}
.vin.go .grade{animation:reelin .5s ease 1.76s forwards}

/* ---------- trust strip: tilted, masked, lit through the centre ---------- */
.vin .tstrip{margin-top:auto;padding-top:15px;opacity:0;transform:translateY(16px)}
.vin .tstrip .wrap{width:100%}
.vin.go .tstrip{animation:inup .8s cubic-bezier(.2,.8,.25,1) .62s forwards}
.vin .tlab{display:flex;align-items:center;gap:9px;margin-bottom:8px;flex-wrap:wrap;
  font-size:11.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--ink-rgb),.45)}
.vin .tlab b{font-weight:750;color:var(--sun-ink)}
.vin .tlab span{text-transform:none;letter-spacing:normal;font-size:13px;font-weight:550;
  color:rgba(var(--ink-rgb),.68)}
.vin .tlab i{width:6px;height:6px;border-radius:50%;background:var(--sun-ink);flex:none;
  box-shadow:0 0 0 4px rgba(var(--sun-ink-rgb),.16)}
/* the band sits on a slight tilt so it reads as a physical strip passing by */
.vin .tmask{
  overflow:hidden;perspective:900px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.vin .ttrack{display:flex;align-items:center;gap:clamp(20px,2.1vw,36px);width:max-content;
  padding:4px 0;transform:rotateX(9deg);transform-style:preserve-3d;
  animation:tmarq 104s linear infinite}
@keyframes tmarq{to{transform:rotateX(9deg) translateX(-50%)}}
.vin .tmask:hover .ttrack{animation-play-state:paused}
/* each mark is a card with the logo on the front and the client on the back */
.vin .tl{
  position:relative;flex:none;display:grid;place-items:center;
  width:clamp(256px,23.6vw,316px);height:112px;
  opacity:.72;transform-origin:50% 70%;
}
.vin .tl img{height:auto;width:auto;max-height:92px;max-width:clamp(208px,19.6vw,264px);
  object-fit:contain;display:block;filter:brightness(0) invert(1)}
/* The client marks are supplied as WHITE silhouettes on transparent, so they
   have to be re-inked per ground, not merely un-inverted: brightness(0) drops
   every channel to black while leaving the alpha intact. `filter:none` here
   painted white logos onto a white page. */
html[data-theme="light"] .vin .tl img{filter:brightness(0)}
html[data-theme="light"] .vin .tl{opacity:.62}
html[data-theme="light"] .vin .tl:hover{opacity:.95}

/* ---------- loader ---------- */
.ldr{position:fixed;inset:0;z-index:200;background:var(--canvas);display:grid;place-items:center}
.ldr.out{animation:ldrup .8s cubic-bezier(.7,0,.2,1) forwards}
@keyframes ldrup{to{transform:translateY(-101%)}}
.ldr .mark{display:flex;align-items:center;gap:12px;font-size:clamp(20px,2.4vw,30px);
  font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.ldr .mark img{width:40px;height:40px;border-radius:11px}
.ldr .mark .wordmark{height:26px;width:auto;display:block;color:var(--pure)}
.ldr .mark b{color:var(--ice);font-weight:700}
.ldr .rule{position:absolute;left:50%;bottom:34%;transform:translateX(-50%);
  width:min(220px,44vw);height:2px;border-radius:2px;background:rgba(var(--ink-rgb),.14);overflow:hidden}
.ldr .rule i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--blue),var(--sun-ink));
  animation:ldrfill 1.0s cubic-bezier(.4,.1,.2,1) forwards}
@keyframes ldrfill{to{width:100%}}
.ldr .pct{position:absolute;right:34px;bottom:30px;font-size:12px;font-weight:750;
  letter-spacing:.1em;color:rgba(var(--ink-rgb),.5);font-variant-numeric:tabular-nums}
.ldr[hidden]{display:none}

/* ---------- yellow dot cursor ---------- */
@media (hover: hover) and (pointer: fine){
  html.hasdot,html.hasdot *{cursor:none !important}
  .dotcur{
    position:fixed;top:0;left:0;z-index:300;pointer-events:none;
    width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--sun);
    transition:width .22s ease,height .22s ease,margin .22s ease,background .22s ease;
  }
  .dotcur.big{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(var(--sun-rgb),.28)}
  .dotring{
    position:fixed;top:0;left:0;z-index:299;pointer-events:none;
    width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
    border:1px solid rgba(var(--sun-rgb),.45);
  }
}
@media (prefers-reduced-motion: reduce){
  .vin .say>*,.vin .tstrip{opacity:1;transform:none;animation:none}
  .vin .ttrack{animation:none;transform:none;flex-wrap:wrap;width:100%;justify-content:center}
  .vin .tl{opacity:.85;transform:none}
  .vin .badge{opacity:1;width:100%;height:100%;border-radius:18px;animation:none}
  .vin .lock{display:none}
  .vin .reel,.vin .grade{opacity:1;animation:none}
  .ldr{display:none}
}
@media(max-width:960px){
  .vin{padding-bottom:40px}
  .vin .row{grid-template-columns:1fr}
  .vin .stage{justify-self:stretch;max-width:none}
  .vin .ttrack{transform:none;animation-duration:76s}
  @keyframes tmarq{to{transform:translateX(-50%)}}
  .vin .tl{width:236px;height:100px}
  .vin .tl img{max-height:76px;max-width:196px}
}
/* Short laptops: buy the strip its room back out of the hero's head and the
   copy's leading, rather than letting the logos fall off the bottom. */
@media(min-width:961px) and (max-height:820px){
  .vin{padding-top:134px}
  .vin h1{font-size:clamp(32px,3.9vw,54px)}
  .vin .sub{margin-top:15px}
  .vin .ctas{margin-top:22px}
  .vin .badge{--size:clamp(96px,11vw,128px)}
}
/* 720p laptops: the doubled logo strip is 145px tall, so the copy stack has to
   give the last 30px back or the marks drop under the fold again. */
@media(min-width:961px) and (max-height:760px){
  .vin{padding-top:122px;padding-bottom:10px}
  .vin h1{font-size:clamp(30px,3.4vw,46px)}
  .vin .sub{margin-top:12px;font-size:15px}
  .vin .ctas{margin-top:16px}
  .vin .tlab{margin-bottom:5px;gap:7px}
  .vin .tlab span{font-size:12.5px;line-height:1.34}
  .vin .ttrack{padding:2px 0}
}
/* ---------- end homepage intro hero ---------- */

/* ---------- contact form: spacing, checkbox chips, no HubSpot chrome ---------- */
.hswrap-b .hs-form fieldset.form-columns-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.hswrap-b .hs-form fieldset.form-columns-2>div{width:100%!important;float:none!important}
.hswrap-b .hs-form .hs-form-field{margin-bottom:20px}
.hswrap-b .hs-form label{margin-bottom:9px;font-size:12px;font-weight:750;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(var(--ink-rgb),.55)}
/* the service picker reads as chips rather than a bare checkbox list */
.hswrap-b .hs-form ul.inputs-list{display:flex;flex-wrap:wrap;gap:9px}
.hswrap-b .hs-form ul.inputs-list li{margin:0}
.hswrap-b .hs-form ul.inputs-list label{
  display:inline-flex;align-items:center;gap:9px;margin:0;
  padding:9px 15px;border-radius:100px;cursor:pointer;
  border:1px solid rgba(var(--ink-rgb),.18);background:rgba(var(--ink-rgb),.04);
  font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  color:rgba(var(--ink-rgb),.85);transition:border-color .2s,background .2s,color .2s;
}
.hswrap-b .hs-form ul.inputs-list label:hover{border-color:rgba(var(--ice-rgb),.5);color:var(--pure)}
.hswrap-b .hs-form ul.inputs-list label:has(input:checked){
  border-color:var(--blue);background:rgba(var(--blue-rgb),.18);color:var(--pure);
}
.hswrap-b .hs-form ul.inputs-list input[type=checkbox]{
  position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;
  margin:0!important;padding:0!important;border:0!important;pointer-events:none!important;
}
.hswrap-b .hs-form .hs_submit{margin-top:8px}
/* HubSpot's own promo link */
.hswrap-b .hs-form__virality-link{display:none!important}
@media(max-width:640px){.hswrap-b .hs-form fieldset.form-columns-2{grid-template-columns:1fr}}
/* budget + enquiry-type fields we inject, matched to the HubSpot field styling */
.hswrap-b .sd-budget-list label{font-size:13.5px;padding:8px 14px}
.hswrap-b .sd-budget-list input[type=radio]{accent-color:var(--blue);width:14px;height:14px;flex:none}
.hswrap-b .sd-budget-list label:has(input:checked){border-color:var(--blue);background:rgba(var(--blue-rgb),.18);color:var(--pure)}
.hswrap-b .sd-kind select{width:100%}
.sd-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ================= flow: the four-step external process =================
   Numbered because the sequence is real: each step depends on the one before.
   A rail runs behind the markers to show progression, and the steps stagger in
   on scroll using the existing .rv observer rather than a new mechanism. */
.flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(40px,5vw,62px)}
.flow::before{
  content:"";position:absolute;left:27px;right:calc(25% - 5px);top:27px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(var(--blue-rgb),.5),rgba(var(--blue-rgb),.16));
  transform:scaleX(0);transform-origin:left;transition:transform 1.5s cubic-bezier(.2,.7,.2,1) .15s;
}
.flow.in::before{transform:scaleX(1)}
.fstep{position:relative;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.fstep .fmark{
  position:relative;z-index:2;width:54px;height:54px;border-radius:16px;flex:none;
  display:grid;place-items:center;
  background:var(--blue);color:#fff;
  box-shadow:0 12px 30px rgba(var(--blue-rgb),.28);
  transition:transform .5s cubic-bezier(.3,1.3,.5,1),width .3s,height .3s;
}
.fstep .fmark svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.fstep:hover .fmark{transform:translateY(-4px) rotate(-4deg)}
/* desktop/tablet: transparent passthrough so fnum/h3/p stay direct flex
   children of .fstep, same as before this wrapper existed */
.fstep__body{display:contents}
.fstep .fnum{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:600;
  letter-spacing:.16em;color:var(--blue);
}
.fstep h3{font-size:clamp(19px,2vw,23px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.fstep p{font-size:15px;line-height:1.6;max-width:34ch}

/* inside the light band */
.band .fstep h3{color:var(--light-ink)}
.band .fstep p{color:#4A5568}

/* staggered entrance, driven by the .rv observer already in b.js */
.flow .fstep{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.flow.in .fstep{opacity:1;transform:none}
.flow.in .fstep:nth-child(1){transition-delay:.10s}
.flow.in .fstep:nth-child(2){transition-delay:.24s}
.flow.in .fstep:nth-child(3){transition-delay:.38s}
.flow.in .fstep:nth-child(4){transition-delay:.52s}

@media(max-width:900px){
  .flow{grid-template-columns:repeat(2,1fr);gap:30px 20px}
  .flow::before{display:none}
}
/* mobile: a vertical stepper instead of a 2-col grid with a dangling icon.
   Icon shrinks and sits inline with its own connecting line, so it reads as
   a sequence again instead of a big, disconnected blue square. */
@media(max-width:560px){
  .flow{grid-template-columns:1fr;gap:0;margin-top:32px;position:relative}
  .flow::after{
    content:"";position:absolute;left:19px;top:4px;bottom:4px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,rgba(var(--blue-rgb),.5),rgba(var(--blue-rgb),.14));
    transform:scaleY(0);transform-origin:top;transition:transform 1.3s cubic-bezier(.2,.7,.2,1) .15s;
  }
  .flow.in::after{transform:scaleY(1)}
  .fstep{flex-direction:row;gap:16px;padding-bottom:32px}
  .fstep:last-child{padding-bottom:0}
  .fstep .fmark{width:40px;height:40px;border-radius:12px}
  .fstep .fmark svg{width:18px;height:18px}
  .fstep__body{display:block;padding-top:3px}
  .fstep .fnum{display:block;margin-bottom:4px}
  .fstep h3{margin-bottom:2px}
  .fstep p{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .flow::before,.flow::after{transform:none;transition:none}
  .flow .fstep{opacity:1;transform:none;transition:none}
  .fstep:hover .fmark{transform:none}
}

/* ================= sector tiles in the light band =================
   Photo-led, because "do you work with businesses like mine?" is answered
   faster by a recognisable image than by a list of industry names. */
.sectorband .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(34px,4vw,48px)}
.sectorband .stile{
  position:relative;display:block;border-radius:18px;overflow:hidden;isolation:isolate;
  background:#0B1626;aspect-ratio:16/11;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.sectorband .stile:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(11,22,38,.22)}
.sectorband .stile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sectorband .stile:hover img{transform:scale(1.05)}
.sectorband .stile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,21,40,.10) 30%,rgba(6,21,40,.82) 100%)}
.sectorband .stxt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;color:#fff}
.sectorband .stxt b{display:block;font-size:17px;font-weight:800;letter-spacing:-.015em}
.sectorband .stxt span{display:block;margin-top:4px;font-size:12.5px;font-weight:600;
  letter-spacing:.05em;color:rgba(255,255,255,.72)}
.sectorband .sall{margin-top:26px;font-size:15px}
@media(max-width:900px){.sectorband .sgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sectorband .sgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .sectorband .stile,.sectorband .stile img{transition:none}
  .sectorband .stile:hover{transform:none}
  .sectorband .stile:hover img{transform:none}
}

/* ================= featured case study, light band =================
   The homepage's single biggest proof point, so it gets the room. Numbers
   count up on reveal, the shot parallaxes gently, the quote arrives last. */
.feat{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(28px,4vw,60px);align-items:center;
  margin-top:clamp(30px,4vw,44px)}
.feat__kick{display:flex;align-items:center;gap:10px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.feat__kick i{width:22px;height:1px;background:var(--blue);flex:none}
.feat h2{font-size:clamp(30px,4.2vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.04;
  margin-top:14px;text-wrap:balance}
.feat h2 em{font-style:normal;color:var(--blue)}
.feat__lede{margin-top:16px;font-size:clamp(15.5px,1.5vw,17px);line-height:1.6;color:#4A5568;max-width:52ch}

.feat__nums{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(18px,3vw,38px);
  margin-top:clamp(24px,3vw,34px);align-items:start}
.feat__num b{display:block;font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:var(--light-ink);font-variant-numeric:tabular-nums}
.feat__num > span{display:block;margin-top:7px;font-size:12.5px;line-height:1.45;color:#5A6474;max-width:16ch}
.feat__num b span{font-size:inherit;display:inline;color:inherit;margin:0}

.feat__quote{margin-top:clamp(26px,3vw,34px);padding-left:18px;border-left:3px solid var(--blue);
  opacity:0;transform:translateY(14px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) .75s,transform .8s cubic-bezier(.2,.7,.2,1) .75s}
.feat.in .feat__quote{opacity:1;transform:none}
.feat__quote p{font-size:16px;line-height:1.55;color:var(--light-ink);font-weight:550}
.feat__who{display:flex;align-items:center;gap:11px;margin-top:14px}
.feat__who img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#e8edf5}
.feat__who b{display:block;font-size:14px;font-weight:750;color:var(--light-ink)}
.feat__who span{display:block;font-size:12.5px;color:#5A6474}
.feat__cta{margin-top:clamp(24px,3vw,32px);display:flex;gap:12px;flex-wrap:wrap}

/* the visual: stacked shots that settle on reveal */
.feat__media,.trio{position:relative;aspect-ratio:4/3.4}
.feat__media figure,.trio figure{position:absolute;margin:0;border-radius:16px;overflow:hidden;
  box-shadow:0 26px 60px rgba(11,22,38,.24);
  opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.feat__media img,.trio img{width:100%;height:100%;object-fit:cover;display:block}
.feat__media .m-back ,.trio .m-back {inset:0 8% 22% 0;}
.feat__media .m-front,.trio .m-front{inset:auto 0 0 26%;height:52%;}
.feat__media .m-chip ,.trio .m-chip {inset:auto auto 12% 0;width:31%;aspect-ratio:9/16;}
.feat.in .feat__media .m-back ,.trio.in .m-back {opacity:1;transform:none;transition-delay:.10s}
.feat.in .feat__media .m-front,.trio.in .m-front{opacity:1;transform:none;transition-delay:.28s}
.feat.in .feat__media .m-chip ,.trio.in .m-chip {opacity:1;transform:none;transition-delay:.44s}

@media(max-width:980px){
  .feat{grid-template-columns:1fr}
  .feat__media,.trio{order:2;aspect-ratio:4/3;max-width:560px}
}
@media(max-width:520px){
  .feat__nums{grid-template-columns:1fr 1fr;gap:20px}
  .feat__media .m-chip,.trio .m-chip{display:none}
}
@media(prefers-reduced-motion:reduce){
  .feat__quote,.feat__media figure,.trio figure{opacity:1;transform:none;transition:none}
}

/* pills inside the light band: the default solid pill is white-on-dark, which
   disappears here, so it inverts to Core Blue. */
.band .pill.solid{background:var(--blue);color:#fff;border-color:var(--blue)}
.band .pill.solid:hover{background:#2450d8;border-color:#2450d8}
.band .pill.ghost{color:var(--light-ink);border-color:rgba(11,22,38,.28)}
.band .pill.ghost:hover{border-color:var(--blue);color:var(--blue);background:rgba(49,101,245,.06)}

/* ================= headline numbers ("scoreboard" on /about) =================
   Four claims that carry the agency's credibility, so they get a card each,
   a counting number, and a stagger. The accent bar wipes in under each figure
   as it lands, which reads as the number "settling" rather than decorating. */
.bignums{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(30px,4vw,44px)}
.bnum{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.055),rgba(var(--ink-rgb),.015));
  border:1px solid rgba(var(--ink-rgb),.09);border-radius:18px;
  padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .35s,transform .35s cubic-bezier(.2,.7,.2,1);
}
.bnum:hover{border-color:rgba(var(--accent-rgb,var(--blue-rgb)),.42);transform:translateY(-4px)}
.bnum__fig{display:flex;align-items:baseline;gap:2px;font-weight:800;letter-spacing:-.045em;
  font-size:clamp(38px,4.6vw,60px);line-height:.95;color:var(--pure);font-variant-numeric:tabular-nums}
.bnum__fig .suf{font-size:.52em;font-weight:750;letter-spacing:-.02em;color:var(--ice)}
.bnum__bar{height:3px;width:34px;border-radius:3px;background:var(--ice);
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.bnum__lab{font-size:12px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ice)}
.bnum p{font-size:14px;line-height:1.55;color:rgba(var(--ink-rgb),.74)}
.bnum p b{color:var(--pure);font-weight:650}

.bignums.in .bnum__bar{transform:scaleX(1)}
.bignums .bnum{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),border-color .35s}
.bignums.in .bnum{opacity:1;transform:none}
.bignums.in .bnum:nth-child(1),.bignums.in .bnum:nth-child(1) .bnum__bar{transition-delay:.06s}
.bignums.in .bnum:nth-child(2),.bignums.in .bnum:nth-child(2) .bnum__bar{transition-delay:.18s}
.bignums.in .bnum:nth-child(3),.bignums.in .bnum:nth-child(3) .bnum__bar{transition-delay:.30s}
.bignums.in .bnum:nth-child(4),.bignums.in .bnum:nth-child(4) .bnum__bar{transition-delay:.42s}

@media(max-width:980px){.bignums{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.bignums{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .bignums .bnum{opacity:1;transform:none;transition:none}
  .bnum__bar{transform:scaleX(1);transition:none}
  .bnum:hover{transform:none}
}


/* ================= hero texture options =================
   A branded layer behind the hero, weighted to the left and masked out to the
   right so the headline never fights it. Four variants; the picker sets
   data-tex on .vin. All are CSS-only and pause under reduced motion. */
.vin .tex{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 26%,rgba(0,0,0,.55) 52%,transparent 78%);
  mask-image:linear-gradient(90deg,#000 0%,#000 26%,rgba(0,0,0,.55) 52%,transparent 78%)}
.vin > .wrap, .vin .tstrip{position:relative;z-index:1}

/* 1: mesh, drifting brand-colour blobs */
.vin[data-tex="1"] .tex::before{content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(38% 46% at 18% 32%,rgba(var(--blue-rgb),.42),transparent 62%),
    radial-gradient(32% 40% at 6% 72%,rgba(var(--sun-ink-rgb),.24),transparent 66%),
    radial-gradient(30% 38% at 34% 88%,rgba(var(--sun-rgb),.14),transparent 64%);
  filter:blur(28px);animation:texdrift 22s ease-in-out infinite alternate}
@keyframes texdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3%,-3%,0) scale(1.08)}
  100%{transform:translate3d(-2%,4%,0) scale(1.03)}
}

/* 2: grid, technical dot matrix creeping upward */
.vin[data-tex="2"] .tex::before{content:"";position:absolute;inset:-10% -10% -30% -10%;
  background-image:radial-gradient(circle,rgba(var(--sun-ink-rgb),.34) 1px,transparent 1.6px);
  background-size:26px 26px;animation:texgrid 26s linear infinite}
.vin[data-tex="2"] .tex::after{content:"";position:absolute;inset:0;
  background:radial-gradient(50% 60% at 12% 40%,rgba(var(--blue-rgb),.30),transparent 70%)}
@keyframes texgrid{to{background-position:0 -260px}}

/* 3: aurora, slow diagonal light sweeps */
.vin[data-tex="3"] .tex::before{content:"";position:absolute;inset:-40%;
  background:repeating-linear-gradient(112deg,
    rgba(var(--blue-rgb),.30) 0px,rgba(var(--blue-rgb),.30) 90px,
    transparent 90px,transparent 210px,
    rgba(var(--sun-ink-rgb),.18) 210px,rgba(var(--sun-ink-rgb),.18) 270px,
    transparent 270px,transparent 420px);
  filter:blur(34px);animation:texsweep 30s linear infinite}
@keyframes texsweep{to{transform:translateX(-420px)}}

/* 4: contour, topographic rings breathing outward */
.vin[data-tex="4"] .tex::before{content:"";position:absolute;inset:-30%;
  background:repeating-radial-gradient(circle at 14% 46%,
    rgba(var(--sun-ink-rgb),.20) 0 2px,transparent 2px 46px);
  animation:texbreathe 18s ease-in-out infinite alternate}
.vin[data-tex="4"] .tex::after{content:"";position:absolute;inset:0;
  background:radial-gradient(46% 56% at 14% 46%,rgba(var(--blue-rgb),.34),transparent 72%)}
@keyframes texbreathe{to{transform:scale(1.13)}}

/* 0: off */
.vin[data-tex="0"] .tex{display:none}

@media(prefers-reduced-motion:reduce){
  .vin .tex::before,.vin .tex::after{animation:none !important}
}

/* ================= core values, one brand colour each =================
   Each card carries a --vc from the brand palette. The colour is used on the
   heading, a top hairline and a faint corner wash, so the set reads as a
   family rather than four unrelated blocks. */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(30px,4vw,42px)}
.vcard{
  position:relative;overflow:hidden;border-radius:18px;padding:26px 24px 28px;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(var(--vc),.14),transparent 58%),
    linear-gradient(160deg,rgba(var(--ink-rgb),.05),rgba(var(--ink-rgb),.015));
  border:1px solid rgba(var(--vc),.26);
  transition:border-color .35s,transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.vcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,rgb(var(--vc)),rgba(var(--vc),0));
  transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.values.in .vcard::before{transform:scaleX(1)}
.vcard:hover{transform:translateY(-5px);border-color:rgba(var(--vc),.55);
  box-shadow:0 20px 44px rgba(var(--sh-rgb),.32)}
.vcard h3{font-size:19px;font-weight:800;letter-spacing:-.02em;color:rgb(var(--vc))}
.vcard p{margin-top:11px;font-size:14.5px;line-height:1.6;color:rgba(var(--ink-rgb),.76)}
.vcard p b{color:var(--pure);font-weight:650}

.values .vcard{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),border-color .35s}
.values.in .vcard{opacity:1;transform:none}
.values.in .vcard:nth-child(1),.values.in .vcard:nth-child(1)::before{transition-delay:.06s}
.values.in .vcard:nth-child(2),.values.in .vcard:nth-child(2)::before{transition-delay:.17s}
.values.in .vcard:nth-child(3),.values.in .vcard:nth-child(3)::before{transition-delay:.28s}
.values.in .vcard:nth-child(4),.values.in .vcard:nth-child(4)::before{transition-delay:.39s}

/* Yellow and light blue fail contrast as text on white, so they darken in light mode. */
html[data-theme="light"] .vcard{border-color:rgba(var(--vc),.38)}
@media(max-width:980px){.values{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.values{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .values .vcard{opacity:1;transform:none;transition:none}
  .vcard::before{transform:scaleX(1);transition:none}
  .vcard:hover{transform:none}
}

/* footer brand mark, sits above the legal line */
.bigfoot .bf-mark{padding-top:clamp(22px,3vw,30px);margin-bottom:-6px}
.bigfoot .bf-mark .mark{display:inline-flex;align-items:center;gap:10px}
.bigfoot .bf-mark .mark img{width:30px;height:30px;border-radius:8px}
.bigfoot .bf-mark .mark .wordmark{height:19px;width:auto;display:block;color:var(--pure)}

/* ================= founder message =================
   Portrait left, message right, with the quote card lifted out so the line
   people actually remember is not buried in a paragraph. */
.fmsg{display:grid;grid-template-columns:0.92fr 1fr;gap:clamp(26px,4vw,58px);align-items:center;
  margin-top:clamp(30px,4vw,44px)}
.fmsg__photo{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/4.4;
  background:var(--panel);box-shadow:0 26px 60px rgba(var(--sh-rgb),.4)}
.fmsg__photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.fmsg__kick{display:flex;align-items:center;gap:9px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ice)}
.fmsg__kick i{width:20px;height:1px;background:var(--ice);flex:none}
.fmsg h2{font-size:clamp(25px,3.2vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.08;
  margin-top:14px;text-wrap:balance}
.fmsg h2 em{font-style:normal;color:var(--hl)}
.fmsg__body{margin-top:16px;display:flex;flex-direction:column;gap:13px}
.fmsg__body p{font-size:15.5px;line-height:1.62;color:rgba(var(--ink-rgb),.78)}
.fmsg__body p b{color:var(--pure);font-weight:650}

.fmsg__quote{position:relative;margin-top:22px;border-radius:16px;padding:24px 26px 22px;
  background:linear-gradient(150deg,rgba(var(--blue-rgb),.18),rgba(var(--blue-rgb),.05));
  border:1px solid rgba(var(--blue-rgb),.30)}
.fmsg__quote::before{content:"“";position:absolute;top:2px;left:16px;
  font-size:64px;line-height:1;color:rgba(var(--sun-ink-rgb),.32);font-weight:800}
.fmsg__quote p{position:relative;font-size:clamp(16px,1.7vw,19px);line-height:1.5;
  font-weight:650;letter-spacing:-.015em;color:var(--pure);text-wrap:balance}
.fmsg__sig{display:flex;align-items:center;gap:12px;margin-top:18px}
.fmsg__sig img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 15%;
  border:1px solid rgba(var(--ink-rgb),.16)}
.fmsg__sig b{display:block;font-size:14.5px;font-weight:750}
.fmsg__sig span{display:block;font-size:12.5px;color:var(--dim)}

@media(max-width:900px){
  .fmsg{grid-template-columns:1fr}
  .fmsg__photo{max-width:420px;aspect-ratio:4/3.6}
}

/* ---------- case study: vertical tags, live link, tech stack ---------- */
.csbar{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin-top:26px}
.vtags{display:flex;gap:8px;flex-wrap:wrap}
.vtag{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:100px;
  color:var(--ink);background:rgba(var(--ink-rgb),.08);border:1px solid rgba(var(--ink-rgb),.18);
  transition:border-color .3s,background .3s}
.vtag i{width:7px;height:7px;border-radius:50%;background:rgb(var(--vc));
  box-shadow:0 0 0 3px rgba(var(--vc),.22);flex:none;font-style:normal}
.vtag:hover{background:rgba(var(--vc),.12);border-color:rgba(var(--vc),.45)}
.vt-build{--vc:var(--v-build-rgb)}
.vt-grow{--vc:var(--v-grow-rgb)}
.vt-support{--vc:var(--v-support-rgb)}
.livelink{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:750;
  letter-spacing:-.01em;color:var(--ink);border-bottom:1px solid rgba(var(--ink-rgb),.35);
  padding-bottom:2px;transition:border-color .25s,gap .25s}
.livelink:hover{border-bottom-color:var(--ink);gap:11px}
.livelink svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* the stack, as masked monochrome marks that take their brand colour on hover */
.techgrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.tech{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:14px;
  background:rgba(var(--panel-rgb),.5);border:1px solid rgba(var(--ink-rgb),.09);
  color:rgba(var(--ink-rgb),.62);
  opacity:0;transform:translateY(12px);
  transition:opacity .6s cubic-bezier(.22,.8,.2,1) var(--d,0s),
             transform .6s cubic-bezier(.22,.8,.2,1) var(--d,0s),
             color .3s,border-color .3s,background .3s}
.rv.in .tech,.tech.in{opacity:1;transform:none}
.tech:hover{color:var(--bc,var(--ice));border-color:currentColor;background:rgba(var(--panel-rgb),.9)}
.tech i{width:22px;height:22px;flex:none;display:block;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.tech span{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:rgba(var(--ink-rgb),.86)}
@media(max-width:520px){.techgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}}

/* ---------- process: stepped rows + reporting cadence ---------- */
.srows{position:relative;margin-top:clamp(28px,3.4vw,44px)}
.srow{position:relative;display:grid;grid-template-columns:78px 220px 1fr;gap:clamp(16px,2.4vw,34px);
  align-items:baseline;padding:clamp(22px,2.6vw,32px) 8px;border-top:1px solid rgba(var(--ink-rgb),.10);
  transition:background .35s,padding-left .35s}
.srow:last-child{border-bottom:1px solid rgba(var(--ink-rgb),.10)}
.srow:hover{background:rgba(var(--ice-rgb),.06);padding-left:20px}
.srow .sn{font-size:13px;font-weight:850;letter-spacing:.1em;color:var(--ice)}
.srow h3{font-size:clamp(22px,2.5vw,30px);font-weight:850;letter-spacing:-.032em;line-height:1.05}
.srow p{font-size:15px;line-height:1.62;color:rgba(var(--ink-rgb),.64);max-width:52ch}
.srow .sbar{position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--ice);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.22,.8,.2,1) var(--d,0s)}
.srows.in .srow .sbar{transform:scaleX(1)}
@media(max-width:820px){.srow{grid-template-columns:52px 1fr;row-gap:10px}
  .srow h3{grid-column:2}.srow p{grid-column:2}}

.cadence{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cad{position:relative;padding:24px 22px 26px;border-radius:18px;overflow:hidden;
  background:linear-gradient(170deg,rgba(var(--panel-rgb),.9),rgba(var(--panel-rgb),.42));
  border:1px solid rgba(var(--ink-rgb),.09)}
.cad::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,rgba(var(--cc),.95),rgba(var(--cc),0));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.22,.8,.2,1) var(--d,0s)}
.cadence.in .cad::before{transform:scaleX(1)}
.cad .when{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgb(var(--cc))}
.cad h3{margin:12px 0 8px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.cad p{font-size:13.5px;line-height:1.6;color:rgba(var(--ink-rgb),.6)}
.cad .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(var(--cc),.13);border:1px solid rgba(var(--cc),.26)}
.cad .ico svg{width:17px;height:17px;stroke:rgb(var(--cc));fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1000px){.cadence{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cadence{grid-template-columns:1fr}}

.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:34px;border-radius:16px;overflow:hidden;
  background:rgba(var(--ink-rgb),.10);border:1px solid rgba(var(--ink-rgb),.10)}
.promise div{background:var(--canvas);padding:22px 20px}
.promise .fig{font-size:clamp(26px,3vw,36px);font-weight:850;letter-spacing:-.035em;line-height:1;color:var(--ice)}
.promise .cap{margin-top:8px;font-size:12.5px;line-height:1.5;color:rgba(var(--ink-rgb),.56)}
@media(max-width:760px){.promise{grid-template-columns:repeat(2,1fr)}}

/* ---------- case study: three key numbers, straight under the hero ---------- */
.keynums{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-radius:20px;overflow:hidden;
  background:rgba(var(--ink-rgb),.11);border:1px solid rgba(var(--ink-rgb),.11)}
.keynum{position:relative;background:var(--canvas);padding:clamp(28px,3.6vw,44px) clamp(22px,2.6vw,34px);
  overflow:hidden;transition:background .35s}
.keynum:hover{background:rgba(var(--panel-rgb),.55)}
.keynum::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--ice),rgba(var(--ice-rgb),0));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.22,.8,.2,1) var(--d,0s)}
.keynums.in .keynum::before{transform:scaleX(1)}
.keynum b{display:block;font-size:clamp(42px,6vw,76px);font-weight:850;letter-spacing:-.05em;line-height:.92;
  color:var(--ice);font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.22,.8,.2,1) var(--d,0s),transform .7s cubic-bezier(.22,.8,.2,1) var(--d,0s)}
.keynums.in .keynum b{opacity:1;transform:none}
.keynum .kl{display:block;margin-top:14px;font-size:15px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.keynum .ks{display:block;margin-top:7px;font-size:13.5px;line-height:1.55;color:rgba(var(--ink-rgb),.58)}
@media(max-width:860px){.keynums{grid-template-columns:1fr}}

/* ---------- case study: pull-quote testimonial mid-content ---------- */
.csquote{position:relative;margin:clamp(30px,4vw,52px) 0;padding:clamp(28px,3.4vw,44px);border-radius:22px;
  background:linear-gradient(150deg,rgba(var(--ice-rgb),.10),rgba(var(--panel-rgb),.5) 60%);
  border:1px solid rgba(var(--ice-rgb),.22)}
.csquote::before{content:"\201C";position:absolute;top:6px;left:22px;font-size:82px;line-height:1;
  color:rgba(var(--ice-rgb),.30);font-weight:800}
.csquote blockquote{margin:0;font-size:clamp(18px,2vw,23px);line-height:1.5;font-weight:600;
  letter-spacing:-.02em;text-wrap:balance}
.csquote figcaption{margin-top:20px;display:flex;align-items:center;gap:12px;
  font-size:13.5px;color:rgba(var(--ink-rgb),.62)}
.csquote figcaption b{color:var(--ink);font-weight:750}
.csquote figcaption .av{width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,rgba(var(--ice-rgb),.85),rgba(var(--ice-rgb),.3))}

/* Awaiting-copy state. Holds the slot in the layout and is deliberately
   impossible to mistake for a real quote: no fill, dashed edge, and a visible
   tag. Every instance carries data-placeholder="testimonial", see
   scripts/check-placeholders.py, which must return clean before go-live. */
.csquote.is-ph{background:none;border-style:dashed;border-color:rgba(var(--sun-ink-rgb),.42)}
.csquote.is-ph::before{color:rgba(var(--sun-ink-rgb),.28)}
.csquote.is-ph blockquote{color:rgba(var(--ink-rgb),.45);font-weight:500;font-style:italic}
.csquote.is-ph figcaption{color:rgba(var(--ink-rgb),.45)}
.csquote.is-ph figcaption b{color:rgba(var(--ink-rgb),.62)}
.csquote.is-ph figcaption .av{background:none;border:1px dashed rgba(var(--sun-ink-rgb),.45)}
.csquote .ph-tag{position:absolute;top:-11px;right:20px;padding:3px 10px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sun-ink);background:var(--canvas);border:1px dashed rgba(var(--sun-ink-rgb),.5)}

/* two-column intro: heading left, long-form answer right (no dead space beside a lone column) */
.split-b{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.split-b h2{font-size:clamp(30px,4vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.05;position:sticky;top:120px}
.split-b .lead.statement{max-width:none}
@media(max-width:900px){.split-b{grid-template-columns:1fr}.split-b h2{position:static}}
/* Every Build/Grow/Support service: identical .rowhead heading, tighter gap to the grid */
#build-services .rowhead,#grow-services .rowhead,#support-services .rowhead{margin-bottom:34px}

/* ================= /services : built 1:1 from the design file (Services Page.dc.html) ================= */
.sv2{background:#060D1C;color:#E8EDF7;font-family:Figtree,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
.sv2 *{box-sizing:border-box}
.sv2 a{color:#7EA6FF;text-decoration:none}
.sv2 a:hover{color:#FFC83D}
.sv2 h1,.sv2 h2,.sv2 h3,.sv2 h4,.sv2 p{margin:0}
.sv2 .s2-mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.sv2 .s2-box{max-width:1180px;margin:0 auto}
.sv2 h2.s2-h2{font-size:clamp(30px,3.4vw,42px);letter-spacing:-.03em;font-weight:800;color:#fff}
.sv2 .s2-head{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:end;justify-content:space-between}
.sv2 .s2-head p{max-width:42ch;font-size:15px;line-height:1.55;color:#8FA0BE}

/* hero */
.sv2 .s2-hero{padding:160px 28px 64px;background:radial-gradient(110% 90% at 80% 0%,#123061 0%,#0A1934 45%,#060D1C 100%);position:relative}
.sv2 .s2-hero .s2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:56px;align-items:end}
.sv2 .s2-kick{margin:0 0 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7EA6FF}
.sv2 .s2-hero h1{margin:0 0 22px;font-size:clamp(38px,4.6vw,58px);line-height:1.04;letter-spacing:-.035em;font-weight:800;color:#fff;text-wrap:balance;max-width:none}
.sv2 .s2-hero .s2-lede{margin:0 0 32px;max-width:50ch;font-size:17px;line-height:1.6;color:#B9C6DE;text-wrap:pretty}
.sv2 .s2-hero .s2-lede strong{color:#fff;font-weight:600}
.sv2 .s2-ctas{display:flex;flex-wrap:wrap;gap:12px}
.sv2 .s2-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:1px;border-radius:20px;background:rgba(126,166,255,.2);overflow:hidden}
.sv2 .s2-stat{padding:26px;background:#0C1B33}
.sv2 .s2-stat b{display:block;font-size:40px;font-weight:800;letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums;line-height:1.2}
.sv2 .s2-stat:nth-child(4) b{color:#FFC83D}
.sv2 .s2-stat>span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:#B9C6DE}
.sv2 .s2-trust{margin:56px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;gap:10px 32px;font-size:13px;color:#8FA0BE;list-style:none}
.sv2 .s2-hero .s2-kick,.sv2 .s2-hero h1,.sv2 .s2-hero .s2-lede,.sv2 .s2-hero .s2-ctas,.sv2 .s2-hero .s2-stats,.sv2 .s2-hero .s2-trust{opacity:0;transform:translateY(16px);animation:inup .8s cubic-bezier(.2,.8,.25,1) forwards}
.sv2 .s2-hero h1{animation-delay:.12s}.sv2 .s2-hero .s2-lede{animation-delay:.22s}.sv2 .s2-hero .s2-ctas{animation-delay:.32s}.sv2 .s2-hero .s2-stats{animation-delay:.28s}.sv2 .s2-hero .s2-trust{animation-delay:.5s}

/* what we do */
.sv2 .s2-sec{padding:96px 28px}
.sv2 .s2-sec.s2-line{border-top:1px solid rgba(255,255,255,.06)}
.sv2 .s2-pillars{display:grid;gap:20px}
.sv2 .s2-pillar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:36px;padding:36px;border-radius:24px;border:1px solid rgba(126,166,255,.18);background:#0C1B33}
.sv2 .s2-pillar.s2-v-grow{border-color:rgba(47,107,255,.4);background:linear-gradient(125deg,#0B2452 0%,#0C1B33 70%)}
.sv2 .s2-pillar.s2-v-support{background:linear-gradient(125deg,#1A1B44 0%,#0C1B33 100%)}
.sv2 .s2-pcopy{display:flex;flex-direction:column;gap:14px;min-width:0}
.sv2 .s2-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#7EA6FF}
.sv2 .s2-v-grow .s2-eyebrow{color:#FFC83D}
.sv2 .s2-pcopy h3{font-size:34px;letter-spacing:-.03em;font-weight:800;color:#fff}
.sv2 .s2-pcopy .s2-l1{font-size:18px;font-weight:600;color:#fff}
.sv2 .s2-pcopy .s2-l2{max-width:46ch;font-size:15px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-fig{margin:6px 0 0;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background-color:#102544;background-image:repeating-linear-gradient(135deg,rgba(126,166,255,.10) 0 10px,transparent 10px 20px)}
.sv2 .s2-fig img{display:block;width:100%;height:100%;object-fit:cover}
.sv2 .s2-proof{font-size:14px;color:#8FA0BE}
.sv2 .s2-v-grow .s2-proof a:last-child{color:#FFC83D}
.sv2 .s2-plist{display:flex;flex-direction:column;min-width:0}
.sv2 .s2-item{display:grid;gap:4px;padding:18px 0;border-top:1px solid rgba(255,255,255,.08)}
.sv2 .s2-item b{font-size:17px;font-weight:700;color:#fff}
.sv2 .s2-item span{font-size:14px;line-height:1.5;color:#B9C6DE}
.sv2 .s2-plist>.s2-item:nth-last-child(2){border-bottom:1px solid rgba(255,255,255,.08)}
.sv2 .s2-plist.s2-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));column-gap:24px;align-content:start}
.sv2 .s2-plist.s2-two .s2-item{padding:16px 0}
.sv2 .s2-plist.s2-two .s2-item b{font-size:16px}
.sv2 .s2-plist.s2-two .s2-item span{font-size:13px}
.sv2 .s2-plist.s2-two>.s2-item:nth-last-child(2){border-bottom:0}

/* who we work with */
.sv2 .s2-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1px;padding:1px;border-radius:20px;background:rgba(126,166,255,.16);overflow:hidden}
.sv2 .s2-cell{padding:24px;background:#0A1628}
.sv2 .s2-cell .s2-t{margin-bottom:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7EA6FF}
.sv2 .s2-cell p{font-size:14px;line-height:1.55;color:#C6D1E5}

/* why vietnam */
.sv2 .s2-why-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px 40px;align-items:end;margin-bottom:36px}
.sv2 .s2-why-head h2{line-height:1.1;text-wrap:balance}
.sv2 .s2-why-head p{max-width:48ch;justify-self:end;margin-left:auto;font-size:15px;line-height:1.6;color:#8FA0BE}
.sv2 .s2-tbl-wrap{overflow-x:auto;border-radius:20px;border:1px solid rgba(126,166,255,.18)}
.sv2 .s2-tbl{min-width:760px;display:grid;grid-template-columns:1fr 1.2fr 1.2fr 1.4fr;font-size:14px;line-height:1.5}
.sv2 .s2-tbl .s2-row{display:contents}
.sv2 .s2-tbl .s2-c{padding:16px 20px;border-top:1px solid rgba(255,255,255,.07);color:#B9C6DE}
.sv2 .s2-tbl .s2-c.s2-h{border-top:0;background:#0C1B33;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8FA0BE}
.sv2 .s2-tbl .s2-c.s2-h.s2-us{background:#16306A;color:#FFC83D}
.sv2 .s2-tbl .s2-c.s2-k{font-weight:600;color:#fff}
.sv2 .s2-tbl .s2-c.s2-us{background:rgba(47,107,255,.14);font-weight:600;color:#fff}
.sv2 .s2-tbl .s2-c.s2-h.s2-us{background:#16306A;font-weight:400;color:#FFC83D}
.sv2 .s2-note{margin:20px 0 0;max-width:72ch;font-size:14px;line-height:1.6;color:#8FA0BE}

/* how we work */
.sv2 .s2-process{padding:104px 28px;background:linear-gradient(180deg,#0B2452 0%,#0A1934 60%,#060D1C 100%);border-top:1px solid rgba(126,166,255,.25)}
.sv2 .s2-process .s2-head{margin-bottom:40px}
.sv2 .s2-process .s2-head .s2-eyebrow{margin:0 0 12px;letter-spacing:.14em;color:#FFC83D}
.sv2 .s2-process .s2-head h2{font-size:clamp(30px,3.4vw,42px);letter-spacing:-.03em;font-weight:800;color:#fff}
.sv2 .s2-process .s2-head p{font-size:15px;color:#B9C6DE}
.sv2 .s2-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:14px}
.sv2 .s2-step{padding:24px;border-radius:18px;background:#0F2448;border:1px solid rgba(126,166,255,.3);border-top:3px solid #FFC83D}
.sv2 .s2-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#FFC83D;color:#0A1220;font-size:12px;font-weight:500;margin-bottom:18px}
.sv2 .s2-step h4{margin:0 0 8px;font-size:19px;font-weight:700;color:#fff}
.sv2 .s2-step p{font-size:14px;line-height:1.55;color:#B9C6DE}
.sv2 .s2-sub{margin:64px 0 20px;font-size:34px;letter-spacing:-.03em;font-weight:800;color:#fff}
.sv2 .s2-eng{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.sv2 .s2-engc{padding:28px;border-radius:18px;border:1px solid rgba(126,166,255,.16)}
.sv2 .s2-engc .s2-t{margin-bottom:4px;font-size:19px;font-weight:700;color:#fff}
.sv2 .s2-engc .s2-s{margin-bottom:16px;font-size:14px;color:#8FA0BE}
.sv2 .s2-chips{display:flex;flex-wrap:wrap;gap:8px}
.sv2 .s2-chip{padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.16);font-size:13px;color:#D6DEEE}
.sv2 .s2-chip.s2-hot{border-color:rgba(255,196,61,.5);color:#FFC83D}
.sv2 .s2-pnote{margin:18px 0 0;font-size:14px;color:#8FA0BE}
.sv2 .s2-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:40px;padding:28px 32px;border-radius:20px;background:#2F6BFF}
.sv2 .s2-bar div{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff}

/* standards */
.sv2 .s2-std{padding:96px 28px;background:#F1F3F8;color:#0A1220}
.sv2 .s2-std .s2-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:56px}
.sv2 .s2-std h2{margin:0 0 28px;font-size:clamp(30px,3.4vw,42px);line-height:1.1;letter-spacing:-.03em;font-weight:800;text-wrap:balance;color:#0A1220}
.sv2 .s2-rows{display:grid;gap:1px;background:rgba(10,18,32,.1);border-radius:18px;overflow:hidden}
.sv2 .s2-rows div{padding:20px 22px;background:#fff}
.sv2 .s2-rows b{display:block;font-size:17px;font-weight:700;margin-bottom:4px}
.sv2 .s2-rows span{display:block;font-size:14px;line-height:1.5;color:#44506A}
.sv2 .s2-nos{display:grid}
.sv2 .s2-no{display:flex;gap:14px;padding:16px 0;border-top:1px solid rgba(10,18,32,.12);font-size:17px;font-weight:600}
.sv2 .s2-no:last-child{border-bottom:1px solid rgba(10,18,32,.12)}
.sv2 .s2-no i{font-style:normal;color:#D0452F}
.sv2 .s2-std .s2-after{margin:18px 0 0;font-size:14px;color:#5A6780}

/* faq */
.sv2 .s2-faq{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.sv2 .s2-faq .s2-l{flex:1 1 280px}
.sv2 .s2-faq .s2-l h2{margin-bottom:14px}
.sv2 .s2-faq .s2-l a{font-size:14px;font-weight:600}
.sv2 .s2-faq .s2-r{flex:2 1 520px;min-width:0;display:grid}
.sv2 details{padding:20px 0;border-top:1px solid rgba(255,255,255,.1)}
.sv2 details:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.sv2 summary{display:flex;gap:16px;justify-content:space-between;cursor:pointer;list-style:none;font-size:17px;font-weight:600;color:#fff}
.sv2 summary::-webkit-details-marker{display:none}
.sv2 summary::after{content:"+";flex:none;color:#7EA6FF;transition:transform .2s ease}
.sv2 details[open] summary::after{transform:rotate(45deg)}
.sv2 details p{margin:12px 0 0;max-width:64ch;font-size:15px;line-height:1.6;color:#B9C6DE}

/* cta */
.sv2 .s2-cta{padding:84px 28px;background:linear-gradient(110deg,#1B4BE8 0%,#2F6BFF 55%,#1E3FBF 100%)}
.sv2 .s2-cta .s2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px;align-items:center}
.sv2 .s2-cta h2{margin:0 0 12px;font-size:clamp(30px,3.4vw,42px);letter-spacing:-.03em;font-weight:800;color:#fff}
.sv2 .s2-cta h2 span{color:#FFC83D}
.sv2 .s2-cta p{max-width:44ch;font-size:16px;line-height:1.6;color:rgba(255,255,255,.88)}
.sv2 .s2-cta .s2-side{display:grid;gap:12px;justify-items:start}
.sv2 .s2-cta .s2-mail{font-size:13px;color:rgba(255,255,255,.85)}
.sv2 .s2-cta .s2-mail a,.sv2 .s2-cta .s2-mail a:hover{color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}

/* related */
.sv2 .s2-rel{padding:80px 28px}
.sv2 .s2-rel h2{margin:0 0 24px;font-size:clamp(30px,3.4vw,42px);letter-spacing:-.03em;font-weight:800;color:#fff}
.sv2 .s2-relg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.sv2 .s2-relc{display:flex;flex-direction:column;gap:22px;padding:22px;border-radius:16px;border:1px solid rgba(126,166,255,.18);background:#0C1B33;transition:transform .3s,border-color .3s}
.sv2 .s2-relc:hover{transform:translateY(-4px);border-color:rgba(126,166,255,.45)}
.sv2 .s2-relc .s2-t{font-size:11px;letter-spacing:.1em;color:#8FA0BE}
.sv2 .s2-relc b{font-size:17px;font-weight:700;color:#fff}
@media(prefers-reduced-motion:reduce){.sv2 .s2-hero .s2-kick,.sv2 .s2-hero h1,.sv2 .s2-hero .s2-lede,.sv2 .s2-hero .s2-ctas,.sv2 .s2-hero .s2-stats,.sv2 .s2-hero .s2-trust{opacity:1;transform:none;animation:none}}

/* heading scale: one size per level on this page (h2 42 / h3 34 / h4 19) */
.sv2 h2{font-size:clamp(30px,3.4vw,42px);font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.1}
.sv2 h3{font-size:34px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.1}
.sv2 h4{font-size:19px;font-weight:700;color:#fff;line-height:1.3}
@media(max-width:600px){.sv2 h3{font-size:28px}}

/* standards: heading and list rows share grid rows, so both lists start on the same line however the headings wrap */
.sv2 .s2-std .s2-cols{grid-template-rows:auto 1fr;align-items:start}
.sv2 .s2-std .s2-cols>div{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;align-content:start}

/* ================= /services/ai-search-optimisation-service/ai-visibility-audits ================= */
.sv2 .s2-nw{white-space:nowrap}
.sv2 .s2-yc{color:#FFC83D}
.sv2 .s2-cap{font-size:11px;letter-spacing:.12em;color:#8FA0BE}
.sv2 .s2-hero-flex{padding:150px 28px 88px}
.sv2 .s2-crumb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:64px;font-size:13px;color:#8FA0BE}
.sv2 .s2-crumb a{color:#8FA0BE}
.sv2 .s2-crumb a:hover{color:#FFC83D}
.sv2 .s2-here{color:#fff}
.sv2 .s2-hflex{display:flex;flex-wrap:wrap;justify-content:space-between;gap:48px;align-items:center}
.sv2 .s2-hcopy{flex:1 1 540px;min-width:0}
.sv2 .s2-hcopy h1{margin:0 0 22px;max-width:640px}
.sv2 .s2-y{color:#FFC83D}
.sv2 .s2-l18{margin:0 0 14px;max-width:50ch;font-size:18px;line-height:1.6;color:#B9C6DE;text-wrap:pretty}
.sv2 .s2-l15{margin:0 0 32px;max-width:54ch;font-size:15px;line-height:1.6;color:#fff}
.sv2 .s2-hero-flex .s2-hcopy>*,.sv2 .s2-hero-flex .s2-sov{opacity:0;transform:translateY(16px);animation:inup .8s cubic-bezier(.2,.8,.25,1) forwards}
.sv2 .s2-hero-flex .s2-l18{animation-delay:.22s}.sv2 .s2-hero-flex .s2-l15{animation-delay:.28s}.sv2 .s2-hero-flex .s2-ctas{animation-delay:.36s}.sv2 .s2-hero-flex .s2-sov{animation-delay:.3s}
.sv2 .s2-sov{flex:0 1 420px;max-width:100%;border-radius:20px;border:1px solid rgba(126,166,255,.22);background:#0C1B33;padding:24px;display:grid;gap:16px}
.sv2 .s2-sovtop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sv2 .s2-sovtop .s2-mono{font-size:11px;letter-spacing:.12em;color:#7EA6FF}
.sv2 .s2-sovtop .s2-ill{font-size:10px;letter-spacing:0;color:#6B7E9E}
.sv2 .s2-bars{display:grid;gap:12px}
.sv2 .s2-bar1{display:grid;gap:6px}
.sv2 .s2-barlab{display:flex;justify-content:space-between;font-size:13px;color:#D6DEEE}
.sv2 .s2-barlab.s2-you{font-weight:700;color:#FFC83D}
.sv2 .s2-track{height:8px;border-radius:999px;background:rgba(255,255,255,.08)}
.sv2 .s2-fill{height:100%;border-radius:999px;background:#7EA6FF}
.sv2 .s2-fill.s2-yfill{background:#FFC83D}
.sv2 .s2-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:1px;border-radius:12px;background:rgba(126,166,255,.18);overflow:hidden}
.sv2 .s2-mini div{padding:12px;background:#0A1628}
.sv2 .s2-mini b{display:block;font-size:18px;font-weight:800;color:#fff}
.sv2 .s2-mini span{font-size:11px;color:#8FA0BE}

.sv2 .s2-def{padding:88px 28px}
.sv2 .s2-defgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px 56px}
.sv2 .s2-answer{font-size:18px;line-height:1.7;color:#D6DEEE;text-wrap:pretty}

.sv2 .s2-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;margin-bottom:40px}
.sv2 .s2-cmp1{padding:28px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:#0A1628}
.sv2 .s2-cmp2{padding:28px;border-radius:20px;border:1px solid rgba(255,200,61,.5);background:linear-gradient(160deg,#16306A 0%,#0C1B33 100%)}
.sv2 .s2-cmp .s2-cap{margin-bottom:18px}
.sv2 .s2-big{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.sv2 .s2-n1{font-size:44px;font-weight:800;letter-spacing:-.03em;color:#fff}
.sv2 .s2-n1.s2-dim{color:#8FA0BE}
.sv2 .s2-vs{font-size:15px;color:#8FA0BE}
.sv2 .s2-sm14{font-size:14px;color:#8FA0BE}
.sv2 .s2-why{display:grid;gap:10px;font-size:15px;line-height:1.5;color:#fff}
.sv2 .s2-why div{display:flex;gap:10px}
.sv2 .s2-why i{font-style:normal;color:#FFC83D}
.sv2 .s2-note2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px 48px;font-size:16px;line-height:1.7;color:#B9C6DE}

.sv2 .s2-meth{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.sv2 .s2-mstep{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;padding:28px;border-radius:18px;background:#0F2448;border:1px solid rgba(126,166,255,.3);border-top:3px solid #FFC83D}
.sv2 .s2-mstep .s2-num{margin:0}
.sv2 .s2-mstep h4{margin:4px 0 8px}
.sv2 .s2-mstep p{font-size:15px;line-height:1.6;color:#C6D1E5}

.sv2 .s2-sovhead{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px 48px;align-items:end;margin-bottom:36px}
.sv2 .s2-sovhead>p{max-width:52ch;justify-self:end;font-size:15px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-formula{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;gap:12px 18px;padding:22px 26px;margin-bottom:20px;border-radius:18px;border:1px solid rgba(126,166,255,.22);background:#0C1B33;font-size:16px;color:#fff}
.sv2 .s2-fcap{font-size:11px;letter-spacing:.12em;color:#7EA6FF}
.sv2 .s2-formula span:not(.s2-fcap){padding:8px 14px;border-radius:10px}
.sv2 .s2-f1{background:rgba(255,200,61,.14);color:#FFC83D;font-weight:700}
.sv2 .s2-f2{background:rgba(126,166,255,.12);font-weight:700}
.sv2 .s2-f3{background:#2F6BFF;font-weight:800}
.sv2 .s2-op{color:#8FA0BE;padding:0!important}
.sv2 .s2-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:1px;padding:1px;border-radius:20px;background:rgba(126,166,255,.16);overflow:hidden}
.sv2 .s2-metric{padding:24px;background:#0A1628}
.sv2 .s2-mt{font-size:17px;font-weight:700;color:#fff;margin-bottom:8px}
.sv2 .s2-mt.s2-yc{color:#FFC83D}
.sv2 .s2-metric p{font-size:14px;line-height:1.55;color:#B9C6DE}

.sv2 .s2-gets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));column-gap:40px}
.sv2 .s2-get{display:flex;gap:14px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);font-size:16px;line-height:1.5;color:#E8EDF7}
.sv2 .s2-get i{font-style:normal;flex:none;color:#FFC83D}
.sv2 .s2-keep{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:32px;padding:26px 30px;border-radius:20px;background:#0C1B33;border:1px solid rgba(126,166,255,.2)}
.sv2 .s2-keep p{max-width:64ch;font-size:15px;line-height:1.6;color:#B9C6DE}

.sv2 .s2-who h2{margin-bottom:32px}
.sv2 .s2-whos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.sv2 .s2-whoc{padding:28px;border-radius:18px;background:#fff;border:1px solid rgba(10,18,32,.08)}
.sv2 .s2-wt{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px;color:#0A1220}
.sv2 .s2-whoc p{font-size:15px;line-height:1.6;color:#44506A}


.sv2 .s2-sub2{font-size:16px;color:#8FA0BE}
.sv2 .s2-faq .s2-r details p{max-width:66ch;line-height:1.65}

.sv2 .s2-pills{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:56px;font-size:14px;color:#8FA0BE}
.sv2 .s2-rs{margin-right:6px}
.sv2 .s2-pills a{padding:8px 14px;white-space:nowrap;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:#D6DEEE}
.sv2 .s2-pills a:hover{border-color:#FFC83D}
.sv2 .s2-proofg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.sv2 .s2-pcard{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#0C1B33;border:1px solid rgba(126,166,255,.18);transition:transform .3s,border-color .3s}
.sv2 .s2-pcard:hover{transform:translateY(-4px);border-color:rgba(126,166,255,.45)}
.sv2 .s2-pimg{aspect-ratio:16/10;background:#102544;overflow:hidden}
.sv2 .s2-pimg img{width:100%;height:100%;object-fit:cover;display:block}
.sv2 .s2-pbody{padding:22px;display:grid;gap:6px}
.sv2 .s2-pn{font-size:18px;font-weight:700;color:#fff}
.sv2 .s2-pd{font-size:14px;line-height:1.55;color:#B9C6DE}
.sv2 .s2-pl{margin-top:10px;font-size:14px;font-weight:600;color:#7EA6FF}
@media(prefers-reduced-motion:reduce){.sv2 .s2-hero-flex .s2-hcopy>*,.sv2 .s2-hero-flex .s2-sov{opacity:1;transform:none;animation:none}}
.sv2 .s2-answer{text-align:justify}
.sv2 .s2-answer+.s2-answer{margin-top:24px}
.sv2 .s2-l18,.sv2 .s2-l15{text-align:justify}

/* buttons on the fixed-dark design pages: same .pill geometry, colours pinned so the theme toggle can't flip them */
.sv2 a.pill.solid,.sv2 a.pill.solid:hover{background:#fff;color:#060D1C}
.sv2 a.pill.ghost,.sv2 a.pill.ghost:hover{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.sv2 a.pill.ghost:hover{border-color:#fff}
.sv2 a.pill.sun,.sv2 a.pill.sun:hover{background:#FFC83D;color:#0A1220}
.sv2 a.pill.s2-mt{margin-top:28px}
.sv2 .s2-ctas{gap:14px}

/* CTA band: copy on the left edge, action block on the right edge of the container, so the band reads balanced */
.sv2 .s2-cta .s2-grid{grid-template-columns:minmax(0,1fr) auto;gap:28px 64px}
.sv2 .s2-cta .s2-side{justify-items:end;text-align:right}
@media(max-width:820px){.sv2 .s2-cta .s2-grid{grid-template-columns:1fr}.sv2 .s2-cta .s2-side{justify-items:start;text-align:left}}
/* pillar CTA: sits under the service list, sized to its label (never stretched by the grid/flex row) */
.sv2 .s2-plist>.pill{align-self:flex-start;margin-top:20px}
.sv2 .s2-plist.s2-two>.pill{grid-column:1/-1;justify-self:start;align-self:start}

/* ===== /services/ai-search-optimisation-service (design: AI Visibility GEO) ===== */
.sv2 .s2-gcopy h1{font-size:clamp(40px,5vw,64px);line-height:1.02;max-width:645px}
.sv2 .s2-gcopy .s2-l18{max-width:48ch;margin:0 0 32px;text-align:left}
.sv2 .s2-chat{flex:0 1 408px;width:408px;max-width:100%;min-height:345px;padding:22px;gap:12px;align-content:start}
.sv2 .s2-engines{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.sv2 .s2-engines span{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:6px 12px;white-space:nowrap;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:12px;color:#B9C6DE}
.sv2 .s2-engines span.on{background:rgba(47,107,255,.2);border-color:transparent;color:#fff}
.sv2 .s2-q{padding:14px 16px;border-radius:12px;background:rgba(126,166,255,.08);font-size:15px;color:#E8EDF7}
.sv2 .s2-a{padding:16px;border-radius:12px;background:rgba(47,107,255,.12);border:1px solid rgba(47,107,255,.3);font-size:15px;line-height:1.6;color:#E8EDF7}
.sv2 .s2-a strong{color:#FFC83D;font-weight:600}
.sv2 .s2-src{font-size:11px;color:#6B7E9E}
.sv2 .s2-mt12{margin-top:12px}
.sv2 .s2-mt28{margin-top:28px}
.sv2 .s2-ey14{margin:0 0 12px;letter-spacing:.14em}
.sv2 .s2-yel{color:#FFC83D}
.sv2 .s2-conf{color:#FF8A7A}

/* 02 definition */
.sv2 .s2-defcol{min-width:0}
.sv2 .s2-lead19{margin:0 0 24px;font-size:19px;line-height:1.6;color:#fff;text-wrap:pretty}
.sv2 .s2-quad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;padding:1px;margin-bottom:24px;border-radius:16px;background:rgba(126,166,255,.18);overflow:hidden}
.sv2 .s2-quad>div{padding:18px;background:#0C1B33;font-size:14px;line-height:1.55;color:#C6D1E5}
.sv2 .s2-quad strong{color:#fff}
.sv2 .s2-p16{font-size:16px;line-height:1.65;color:#B9C6DE}

/* 13 explore */
.sv2 .s2-xgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.sv2 .s2-xcard{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:18px;background:#0C1B33;border:1px solid rgba(126,166,255,.18);transition:transform .3s,border-color .3s}
.sv2 .s2-xcard:hover{transform:translateY(-4px);border-color:rgba(126,166,255,.45)}
.sv2 .s2-xcard b{font-size:19px;font-weight:700;color:#fff}
.sv2 .s2-xcard span{font-size:14px;line-height:1.55;color:#B9C6DE}
.sv2 .s2-relsv{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px;font-size:14px;color:#8FA0BE}
.sv2 .s2-relsv a{padding:7px 13px;white-space:nowrap;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:#D6DEEE;transition:border-color .2s,color .2s}
.sv2 .s2-relsv a:hover{border-color:rgba(255,200,61,.6);color:#FFC83D}

/* 03 terminal */
.sv2 .s2-band{background:#08142A}
.sv2 .s2-term{border-radius:18px;border:1px solid rgba(126,166,255,.22);background:#040A16;overflow:hidden;font-size:14px;line-height:1.75}
.sv2 .s2-tbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:#0A1628}
.sv2 .s2-tbar i{width:10px;height:10px;border-radius:50%;display:block}
.sv2 .s2-tbar span{margin-left:10px;font-size:12px;color:#6B7E9E}
.sv2 .s2-tbody{padding:24px 26px;display:grid;gap:10px;color:#B9C6DE;white-space:pre-wrap}
.sv2 .s2-ts{color:#6B7E9E}
.sv2 .s2-tb{color:#7EA6FF}
.sv2 .s2-te{color:#28C840}
.sv2 .s2-tbody strong{color:#FFC83D;font-weight:600}

/* 04 proof bar */
.sv2 .s2-pbar{padding:56px 28px}
.sv2 .s2-pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1px;padding:1px;border-radius:20px;background:rgba(126,166,255,.2);overflow:hidden}
.sv2 .s2-pstats>div{padding:26px;background:#0C1B33}
.sv2 .s2-pstats b{display:block;font-size:36px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.2}
.sv2 .s2-pstats.s2-coral b{color:#FF8A7A}
.sv2 .s2-pstats span{display:block;margin-top:6px;font-size:14px;color:#B9C6DE}
.sv2 .s2-pfoot{margin:14px 0 0;font-size:12px;color:#8FA0BE;text-align:right;font-style:italic}

/* 05 included */
.sv2 .s2-hp15{max-width:none;font-size:15px;color:#B9C6DE}
.sv2 .s2-hp16{max-width:none;font-size:16px;font-weight:600;color:#2F6BFF}
.sv2 .s2-inc{display:grid}
.sv2 .s2-incr{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:22px 0;border-top:1px solid rgba(255,255,255,.1)}
.sv2 .s2-incr:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.sv2 .s2-incr>span{font-size:13px;color:#7EA6FF}
.sv2 .s2-inct{margin-bottom:4px;font-size:19px;font-weight:700;color:#fff}
.sv2 .s2-incb{max-width:70ch;font-size:15px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-incr.s2-hot>span,.sv2 .s2-incr.s2-hot .s2-inct{color:#FFC83D}
.sv2 .s2-chip2{padding:5px 11px;border-color:rgba(126,166,255,.3);font-size:12px}

/* 06 kick starter */
.sv2 .s2-kicks{padding:96px 28px;background:linear-gradient(160deg,#0B2452 0%,#0A1934 55%,#060D1C 100%);border-top:1px solid rgba(126,166,255,.25)}
.sv2 .s2-ksp{margin:0 0 44px;max-width:58ch;font-size:17px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.sv2 .s2-day{padding:26px;border-radius:18px;background:#0F2448;border:1px solid rgba(126,166,255,.3);border-top:3px solid #FFC83D}
.sv2 .s2-day .s2-mono{margin-bottom:14px;font-size:12px;letter-spacing:.1em;color:#FFC83D}
.sv2 .s2-day p{font-size:15px;line-height:1.6;color:#D6DEEE}
.sv2 .s2-keepbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding:24px 28px;border-radius:18px;border:1px solid rgba(255,255,255,.12)}
.sv2 .s2-keepbar p{max-width:60ch;font-size:15px;line-height:1.6;color:#B9C6DE}

/* 07 loop */
.sv2 .s2-loop{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.sv2 .s2-lstep{padding:24px;border-radius:18px;background:#0C1B33;border:1px solid rgba(126,166,255,.16)}
.sv2 .s2-lnum{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#2F6BFF;color:#fff;font-size:12px;margin-bottom:16px}
.sv2 .s2-lstep h4{margin:0 0 8px}
.sv2 .s2-lstep p{font-size:14px;line-height:1.55;color:#B9C6DE}

/* 08 what we change (light band) */
.sv2 .s2-chg{padding:96px 28px}
.sv2 .s2-chg .s2-head h2{margin:0}
.sv2 .s2-chgg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.sv2 .s2-chgc{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;padding:32px;border-radius:18px;background:#fff;border:1px solid rgba(10,18,32,.08)}
.sv2 .s2-chgc>span{padding-top:5px;font-size:13px;font-weight:500;color:#2F6BFF}
.sv2 .s2-chgc h4{margin:0 0 10px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#0A1220}
.sv2 .s2-chgc p{font-size:15px;line-height:1.65;color:#44506A}

/* 09 who */
.sv2 .s2-wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;padding:1px;border-radius:20px;background:rgba(126,166,255,.16);overflow:hidden}
.sv2 .s2-wgrid>div{padding:26px;background:#0A1628}
.sv2 .s2-wgrid h4{margin:0 0 8px}
.sv2 .s2-wgrid p{font-size:14px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-wnote{margin:20px 0 0;max-width:72ch;font-size:14px;line-height:1.6;color:#8FA0BE}

/* 10 caveats */
.sv2 .s2-cav{padding:96px 28px;background:#0A1220;border-top:1px solid rgba(255,200,61,.35);border-bottom:1px solid rgba(255,200,61,.35)}
.sv2 .s2-cavbox{max-width:900px;margin:0 auto}
.sv2 .s2-cavsub{margin:0 0 36px;font-size:18px;color:#B9C6DE}
.sv2 .s2-cavl{margin:0;padding:0;list-style:none;display:grid}
.sv2 .s2-cavl li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);font-size:17px;line-height:1.6;color:#E8EDF7}
.sv2 .s2-cavl li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.sv2 .s2-cavl li>.s2-mono{padding-top:3px;font-size:13px;color:#FFC83D}
.sv2 .s2-cavend{margin:32px 0 0;font-size:22px;line-height:1.4;font-weight:700;color:#FFC83D;text-wrap:balance}

/* 11 costs */
@media(max-width:600px){.sv2 .s2-chat{width:100%}.sv2 .s2-incr{grid-template-columns:40px minmax(0,1fr);gap:12px}.sv2 .s2-chgc{padding:24px;grid-template-columns:40px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.sv2 .s2-chat{opacity:1;transform:none;animation:none}}
.sv2 .s2-caret{display:inline-block;width:8px;height:15px;margin-left:2px;background:#FFC83D;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@media(prefers-reduced-motion:reduce){.sv2 .s2-caret{animation:none}}

/* ===== /services/ai-search-optimisation-service/entity-authority-building ===== */
.sv2 .s2-ecopy .s2-l18{margin:0 0 32px}
.sv2 .s2-erec{gap:14px;align-content:start}
.sv2 .s2-erech{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sv2 .s2-erech .s2-mono:first-child{font-size:11px;letter-spacing:.12em;color:#7EA6FF}
.sv2 .s2-ill{font-size:10px;color:#6B7E9E}
.sv2 .s2-ename{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em}
.sv2 .s2-erows{display:grid}
.sv2 .s2-erow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08);font-size:14px}
.sv2 .s2-erow>span:first-child{color:#8FA0BE}
.sv2 .s2-erow>span:last-child{color:#fff;text-align:right}
.sv2 .s2-erow.s2-elast{border-bottom:1px solid rgba(255,255,255,.08)}
.sv2 .s2-good{font-style:normal;color:#28C840}
.sv2 .s2-erow>span.s2-bad:last-child{color:#FF8A7A}
.sv2 .s2-bad{color:#FF8A7A}

.sv2 .s2-edef{min-width:0;display:grid;gap:20px}
.sv2 .s2-e18{font-size:18px;line-height:1.7;color:#D6DEEE;text-wrap:pretty}
.sv2 .s2-halves>div{padding:18px}
.sv2 .s2-hk{margin-bottom:6px;font-size:11px;letter-spacing:.1em;color:#7EA6FF}
.sv2 .s2-hk.s2-yel{color:#FFC83D}
.sv2 .s2-hv{font-size:15px;line-height:1.5;color:#fff}

.sv2 .s2-ent-who{padding:96px 28px}
.sv2 .s2-ewgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px 56px}
.sv2 .s2-ent-who h2{margin:0}
.sv2 .s2-quote{margin:28px 0 0;padding:22px 24px;border-radius:16px;background:#0A1220;color:#fff;font-size:22px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.sv2 .s2-quote span{color:#FFC83D}
.sv2 .s2-ewtext{display:grid;gap:18px;align-content:start}
.sv2 .s2-ewtext p{font-size:17px;line-height:1.65;color:#2A3550}
.sv2 .s2-ewtext strong{color:#0A1220}
.sv2 .s2-ewl>div{padding:20px 0;border-top:1px solid rgba(10,18,32,.12)}
.sv2 .s2-ewl>div:last-child{border-bottom:1px solid rgba(10,18,32,.12)}
.sv2 .s2-ewl h4{margin:0 0 4px;font-size:18px;font-weight:800;color:#0A1220}
.sv2 .s2-ewl p{font-size:15px;line-height:1.6;color:#44506A}

.sv2 .s2-conhead{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px 48px;align-items:end;margin-bottom:36px}
.sv2 .s2-conhead p{max-width:48ch;justify-self:end;font-size:16px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-conbar{gap:10px;padding:12px 18px;font-size:12px;color:#6B7E9E}
.sv2 .s2-conl{display:grid;padding:0;gap:0;white-space:normal}
.sv2 .s2-conl>div{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:18px 22px;border-top:1px solid rgba(255,255,255,.06);font-size:16px;line-height:1.55;color:#E8EDF7;font-family:Figtree,Helvetica,Arial,sans-serif}
.sv2 .s2-conl>div:first-child{border-top:0}
.sv2 .s2-conl .s2-bad{font-family:'JetBrains Mono',monospace}
.sv2 .s2-connotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px 48px;margin-top:32px;font-size:16px;line-height:1.7;color:#B9C6DE}

.sv2 .s2-mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.sv2 .s2-mcard{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;padding:28px;border-radius:18px;background:#0F2448;border:1px solid rgba(126,166,255,.3);border-top:3px solid #FFC83D}
.sv2 .s2-mcard .s2-num{margin:0}
.sv2 .s2-mcard h4{margin:4px 0 8px}
.sv2 .s2-mcard p{font-size:15px;line-height:1.6;color:#C6D1E5}

.sv2 .s2-hp16d{max-width:none;font-size:16px;color:#B9C6DE}
.sv2 .s2-getl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));column-gap:40px}
.sv2 .s2-getl>div{display:flex;gap:14px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);font-size:16px;line-height:1.5;color:#E8EDF7}
.sv2 .s2-getl>div>span{color:#FFC83D;flex:none}
.sv2 .s2-getl>div:nth-last-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:879px){.sv2 .s2-getl>div:nth-last-child(2){border-bottom:0}}

.sv2 .s2-proof2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.sv2 .s2-proof2 .s2-pimg{aspect-ratio:16/9}
.sv2 .s2-proof3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.sv2 .s2-proof3 .s2-pimg{aspect-ratio:16/9}

/* ===== /services/website-design-service ===== */
.sv2 .s2-l15{max-width:54ch}
.sv2 .s2-ecopy .s2-l18{margin:0 0 14px;max-width:52ch}
.sv2 .s2-ecopy .s2-l15{margin:0 0 32px}
.sv2 .s2-wdhero{flex:0 1 460px;padding:0;border:0;background:none;gap:12px;align-content:start}
.sv2 .s2-wdshot{border-radius:20px;aspect-ratio:4/3;border:1px solid rgba(126,166,255,.22);background:#0C1B33;overflow:hidden}
.sv2 .s2-wdshot img{width:100%;height:100%;object-fit:cover;display:block}
.sv2 .s2-lh{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;background:#0C1B33;border:1px solid rgba(126,166,255,.22)}
.sv2 .s2-lhn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;border:3px solid #28C840;font-size:14px;font-weight:800;color:#28C840}
.sv2 .s2-lht{font-size:14px;font-weight:700;color:#fff}
.sv2 .s2-lhs{font-size:12px;color:#8FA0BE}
.sv2 .s2-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.sv2 .s2-fv{font-size:22px;font-weight:800;color:#fff}
.sv2 .s2-fv.s2-yel{color:#FFC83D}
.sv2 .s2-fl{font-size:13px;color:#8FA0BE}
@media(max-width:600px){.sv2 .s2-facts{grid-template-columns:1fr}}
.sv2 .s2-x2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

.sv2 .s2-wgrid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.sv2 .s2-wcard{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#0C1B33;border:1px solid rgba(126,166,255,.18);transition:transform .3s,border-color .3s}
.sv2 .s2-wcard:hover{transform:translateY(-4px);border-color:rgba(126,166,255,.45)}
.sv2 .s2-wimg{aspect-ratio:4/5;background:#102544;overflow:hidden}
.sv2 .s2-wimg img{width:100%;height:100%;object-fit:cover;display:block}
.sv2 .s2-wbody{padding:22px;display:grid;gap:8px}
.sv2 .s2-wt{font-size:19px;font-weight:700;color:#fff}

.sv2 .s2-fp{padding:88px 0;background:#040A16}
.sv2 .s2-fphead{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:end;justify-content:space-between;padding:0 28px;margin:0 auto 32px;max-width:1180px}
.sv2 .s2-fpsub{font-size:15px;color:#B9C6DE}
.sv2 .s2-fpframe{margin:0 28px;border-radius:18px;overflow:hidden;border:1px solid rgba(126,166,255,.22);background:#0C1B33;box-shadow:0 40px 80px rgba(0,0,0,.45)}
.sv2 .s2-fpbar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#0A1628;border-bottom:1px solid rgba(255,255,255,.08)}
.sv2 .s2-dots{display:flex;gap:7px}
.sv2 .s2-dots i{width:11px;height:11px;border-radius:50%;display:block}
.sv2 .s2-url{flex:1;max-width:460px;margin:0 auto;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.06);font-size:12px;color:#8FA0BE;text-align:center}
.sv2 .s2-fpsp{width:47px}
.sv2 .s2-fpview{height:min(78vh,820px);overflow-y:auto;background:#fff;overscroll-behavior:contain}
.sv2 .s2-fpview img{display:block;width:100%;height:auto}
.sv2 .s2-fpcap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;max-width:1180px;margin:20px auto 0;padding:0 28px;font-size:14px;color:#8FA0BE}
.sv2 .s2-fpcap a{font-weight:600;white-space:nowrap}

.sv2 .s2-incg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.sv2 .s2-inc2{padding:26px;border-radius:18px;background:#0C1B33;border:1px solid rgba(126,166,255,.16)}
.sv2 .s2-inc2 .s2-mono{margin-bottom:14px;font-size:12px;color:#7EA6FF}
.sv2 .s2-inc2 h4{margin:0 0 8px}
.sv2 .s2-inc2 p{font-size:14px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-inc2.s2-new{background:#0F2448;border-color:rgba(255,200,61,.45)}
.sv2 .s2-inc2.s2-new .s2-mono{color:#FFC83D}

.sv2 .s2-blue{color:#2F6BFF}
.sv2 .s2-a11y{display:grid;gap:12px}
.sv2 .s2-a-in,.sv2 .s2-a-out{padding:20px 22px;border-radius:16px}
.sv2 .s2-a-in{background:#fff;border:1px solid rgba(10,18,32,.08)}
.sv2 .s2-a-out{background:#0A1220;color:#fff}
.sv2 .s2-a-in .s2-mono,.sv2 .s2-a-out .s2-mono{margin-bottom:6px;font-size:11px;letter-spacing:.1em}
.sv2 .s2-a-in .s2-mono{color:#1E7F3A}
.sv2 .s2-a-out .s2-mono{color:#FF8A7A}
.sv2 .s2-a-in b,.sv2 .s2-a-out b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em}
.sv2 .s2-a-in span{font-size:14px;color:#44506A}
.sv2 .s2-a-out span{font-size:14px;color:#B9C6DE}

.sv2 .s2-steps4{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.sv2 .s2-steps4 .s2-step{padding:26px}
.sv2 .s2-p4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.sv2 .s2-pstats.s2-p4 b.s2-yel{color:#FFC83D}
.sv2 .s2-prismic{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;padding:16px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.12);transition:border-color .2s}
.sv2 .s2-prismic:hover{border-color:rgba(126,166,255,.45)}
.sv2 .s2-pbadge{padding:5px 10px;border-radius:8px;background:#fff;color:#0A1220;font-size:12px;font-weight:800}
.sv2 .s2-ptxt{font-size:15px;color:#fff}
.sv2 .s2-pgo{margin-left:auto;font-size:14px;font-weight:600;color:#7EA6FF}
.sv2 .s2-w420{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.sv2 .s2-w420>div{padding:26px}
.sv2 .s2-w420 h4{font-size:18px}
.sv2 .s2-w420 p{font-size:15px}
.sv2 .s2-w76{max-width:76ch;font-size:15px}

.sv2 .s2-costg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px 56px;align-items:start}
.sv2 .s2-costtxt{display:grid;gap:18px;padding-top:8px;font-size:16px;line-height:1.7;color:#B9C6DE}
.sv2 .s2-costtxt strong{color:#fff}
.sv2 .s2-ecopy .s2-l18,.sv2 .s2-ecopy .s2-l15{text-align:left}

/* ===== responsive pass (new service pages) ===== */
.sv2 .s2-pillar{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.sv2 img{max-width:100%}
@media(max-width:600px){
  .sv2 .s2-hero,.sv2 .s2-hero-flex{padding:120px 20px 56px}
  .sv2 .s2-sec,.sv2 .s2-process,.sv2 .s2-std,.sv2 .s2-cta,.sv2 .s2-kicks,.sv2 .s2-cav,.sv2 .s2-ent-who,.sv2 .s2-chg{padding-left:20px;padding-right:20px}
  .sv2 .s2-sec,.sv2 .s2-std,.sv2 .s2-ent-who,.sv2 .s2-chg{padding-top:64px;padding-bottom:64px}
  .sv2 .s2-process,.sv2 .s2-kicks,.sv2 .s2-cav{padding-top:72px;padding-bottom:72px}
  .sv2 .s2-cta{padding-top:64px;padding-bottom:64px}
  .sv2 .s2-pbar,.sv2 .s2-rel,.sv2 .s2-def{padding-left:20px;padding-right:20px}
  .sv2 .s2-crumb{margin-bottom:36px}
  .sv2 .s2-hflex{gap:32px}
  .sv2 .s2-pillar{padding:24px;gap:24px}
  .sv2 .s2-engc,.sv2 .s2-day,.sv2 .s2-mcard{padding:22px}
  .sv2 .s2-bar,.sv2 .s2-keepbar{padding:22px}
  .sv2 .s2-bar .pill,.sv2 .s2-keepbar .pill{width:100%;justify-content:center}
  .sv2 .s2-ctas{gap:10px}
  .sv2 .s2-ctas .pill,.sv2 .s2-cta .s2-side .pill{max-width:100%}
  .sv2 .s2-ctas .pill.nw{white-space:normal;text-align:center}
  .sv2 .s2-pfoot{text-align:left}
  .sv2 .s2-pstats b{font-size:30px}
  .sv2 .s2-conhead p{justify-self:start}
  .sv2 .s2-mcard{grid-template-columns:40px minmax(0,1fr)}
  .sv2 .s2-fpsp,.sv2 .s2-url{display:none}
  .sv2 .s2-fpframe{margin:0 20px}
  .sv2 .s2-fphead,.sv2 .s2-fpcap{padding:0 20px}
  .sv2 .s2-fp{padding:64px 0}
  .sv2 .s2-fpview{height:min(70vh,560px)}
  .sv2 .s2-prismic .s2-pgo{margin-left:0}
  .sv2 .s2-erow{flex-wrap:wrap;gap:4px 12px}
  .sv2 .s2-quote{font-size:19px}
  .sv2 .s2-cavend{font-size:19px}
  .sv2 .s2-cavl li{grid-template-columns:36px minmax(0,1fr);font-size:16px}
  .sv2 .s2-conl>div{padding:14px 16px;font-size:15px;grid-template-columns:24px minmax(0,1fr)}
  .sv2 .s2-tbody{padding:18px 16px;font-size:13px}
  .sv2 .s2-cta .s2-grid{grid-template-columns:1fr}
  .sv2 .s2-cta .s2-side{justify-items:start;text-align:left}
}
@media(max-width:400px){
  .sv2 .s2-stats{grid-template-columns:1fr}
  .sv2 .s2-stat b{font-size:34px}
  .sv2 .s2-inc,.sv2 .s2-incr{grid-template-columns:34px minmax(0,1fr)}
}
@media(max-width:600px){.sv2 .s2-chat{min-height:300px}}

/* ===== /services/website-design-service/ux-design-service ===== */
.sv2 .s2-uxpair{flex:0 1 440px;padding:0;border:0;background:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.sv2 .s2-uxa,.sv2 .s2-uxb{border-radius:18px;padding:16px;display:grid;gap:8px;align-content:start}
.sv2 .s2-uxa{border:1px solid rgba(255,255,255,.14);background:#0A1628}
.sv2 .s2-uxb{border:1px solid rgba(255,200,61,.45);background:#F1F3F8}
.sv2 .s2-uxa .s2-mono,.sv2 .s2-uxb .s2-mono{font-size:10px;letter-spacing:.12em}
.sv2 .s2-uxa .s2-mono{color:#8FA0BE}
.sv2 .s2-uxb .s2-mono{color:#2F6BFF}
.sv2 .s2-uxpair i{display:block}
.sv2 .s2-uxpair .l1{height:10px;width:60%;border-radius:4px}
.sv2 .s2-uxpair .box{height:54px;border-radius:8px}
.sv2 .s2-uxpair .l2,.sv2 .s2-uxpair .l3{height:8px;border-radius:4px}
.sv2 .s2-uxpair .l2{width:90%}
.sv2 .s2-uxpair .l3{width:75%}
.sv2 .s2-uxpair .two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sv2 .s2-uxpair .two i{height:40px;border-radius:6px}
.sv2 .s2-uxpair .pillbox{height:22px;width:45%;border-radius:999px}
.sv2 .s2-uxpair small{margin-top:6px;font-size:12px}
.sv2 .s2-uxa .l1{background:rgba(255,255,255,.18)}
.sv2 .s2-uxa .box{border:1px dashed rgba(255,255,255,.25)}
.sv2 .s2-uxa .l2,.sv2 .s2-uxa .l3{background:rgba(255,255,255,.1)}
.sv2 .s2-uxa .two i{border:1px dashed rgba(255,255,255,.25)}
.sv2 .s2-uxa .pillbox{border:1px dashed rgba(255,255,255,.35)}
.sv2 .s2-uxa small{color:#8FA0BE}
.sv2 .s2-uxb .l1{background:#0A1220}
.sv2 .s2-uxb .box{background:linear-gradient(120deg,#2F6BFF,#7EA6FF)}
.sv2 .s2-uxb .l2,.sv2 .s2-uxb .l3{background:#C9D2E3}
.sv2 .s2-uxb .two i{background:#fff;border:1px solid #DDE3EE}
.sv2 .s2-uxb .pillbox{background:#FFC83D}
.sv2 .s2-uxb small{color:#44506A}

.sv2 .s2-uxdef{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.sv2 .s2-uxdef>div{padding:20px}
.sv2 .s2-uxdef+.s2-e18{font-size:17px}
.sv2 .s2-uxcmp b{font-size:28px}
.sv2 .s2-astart{align-items:start}
.sv2 .s2-uiText{display:grid;gap:18px;font-size:17px;line-height:1.7;color:#D6DEEE}
.sv2 .s2-uiText a{text-decoration:underline;text-underline-offset:3px}
.sv2 .s2-quoteline{padding-left:18px;border-left:3px solid #FFC83D;color:#fff}

.sv2 .s2-uxm{display:grid;gap:12px}
.sv2 .s2-uxmc{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:24px 28px;border-radius:18px;background:#0F2448;border:1px solid rgba(126,166,255,.3)}
.sv2 .s2-uxmc.s2-hot{background:#16306A;border-color:rgba(255,200,61,.45)}
.sv2 .s2-uxmc .s2-num{width:38px;height:38px;margin:0}
.sv2 .s2-uxmb{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:6px 32px}
.sv2 .s2-uxmb h4{margin:6px 0 0}
.sv2 .s2-uxmb p{font-size:15px;line-height:1.6;color:#C6D1E5}

.sv2 .s2-lchips{display:flex;flex-wrap:wrap;gap:8px}
.sv2 .s2-lchips span{padding:7px 13px;white-space:nowrap;border-radius:999px;background:#fff;border:1px solid rgba(10,18,32,.12);font-size:13px;font-weight:600;color:#0A1220}
@media(max-width:600px){
  .sv2 .s2-uxmc{grid-template-columns:40px minmax(0,1fr);padding:20px;gap:12px}
  .sv2 .s2-uxpair{gap:8px}
}

/* ===== /services/website-design-service/design-systems ===== */
.sv2 .s2-dsviz{flex:0 1 420px;padding:0;border:0;background:none;gap:10px;align-content:start}
.sv2 .s2-dsc{padding:18px 20px;border-radius:16px;background:#0C1B33;border:1px solid rgba(126,166,255,.22)}
.sv2 .s2-dsc.s2-dscy{background:#16306A;border-color:rgba(255,200,61,.45)}
.sv2 .s2-dsk{margin-bottom:12px;font-size:10px;letter-spacing:.12em;color:#7EA6FF}
.sv2 .s2-dsk.s2-yel{color:#FFC83D}
.sv2 .s2-dsrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sv2 .s2-dsrow i{display:block;width:28px;height:28px;border-radius:8px}
.sv2 .s2-dstok{margin-left:8px;font-size:11px;color:#8FA0BE}
.sv2 .s2-dsb1,.sv2 .s2-dsb2{padding:8px 14px;border-radius:999px;font-size:12px;font-weight:600;color:#fff}
.sv2 .s2-dsb1{background:#2F6BFF}
.sv2 .s2-dsb2{border:1px solid rgba(255,255,255,.3)}
.sv2 .s2-dstag{padding:6px 10px;border-radius:8px;background:rgba(255,200,61,.16);color:#FFC83D;font-size:11px;font-weight:600}
.sv2 .s2-dsinp{flex:1 1 90px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.2)}
.sv2 .s2-dsblocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sv2 .s2-dsblocks i{display:block;height:26px;border-radius:6px;background:rgba(255,255,255,.14)}
.sv2 .s2-dsstat{display:flex;align-items:baseline;gap:12px;padding:4px 4px 0}
.sv2 .s2-dsstat b{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.02em}
.sv2 .s2-dsstat span{font-size:14px;color:#B9C6DE}

.sv2 .s2-dslayers{grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}
.sv2 .s2-dslayers>div{padding:20px}
.sv2 .s2-dsv{font-size:14px;line-height:1.55;color:#fff}
.sv2 .s2-q17{margin:0;font-size:17px;line-height:1.65}

.sv2 .s2-drift{padding:22px 24px;border-radius:16px;background:#0A1220;color:#fff}
.sv2 .s2-drift .s2-mono{margin-bottom:14px;font-size:11px;letter-spacing:.1em;color:#FF8A7A}
.sv2 .s2-swatches{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.sv2 .s2-swatches i{display:block;width:26px;height:26px;border-radius:6px}
.sv2 .s2-driftt{font-size:20px;font-weight:800;letter-spacing:-.01em}

.sv2 .s2-wn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.sv2 .s2-wn-yes,.sv2 .s2-wn-no{padding:28px;border-radius:20px;display:flex;flex-direction:column}
.sv2 .s2-wn-yes{background:#fff;border:1px solid rgba(10,18,32,.08)}
.sv2 .s2-wn-no{background:#0A1220;color:#fff}
.sv2 .s2-wn .s2-mono{margin-bottom:8px;font-size:12px;letter-spacing:.12em}
.sv2 .s2-wn-yes .s2-mono{color:#1E7F3A}
.sv2 .s2-wn-no .s2-mono{color:#FF8A7A}
.sv2 .s2-wnr{display:flex;gap:12px;padding:14px 0;font-size:15px;line-height:1.55}
.sv2 .s2-wn-yes .s2-wnr{border-top:1px solid rgba(10,18,32,.1);color:#2A3550}
.sv2 .s2-wn-no .s2-wnr{border-top:1px solid rgba(255,255,255,.12);color:#D6DEEE}
.sv2 .s2-wnr>span{flex:none;font-weight:800}
.sv2 .s2-wn-yes .s2-wnr>span{color:#1E7F3A}
.sv2 .s2-wn-no .s2-wnr>span{color:#FF8A7A}
.sv2 .s2-wn-no p{margin:auto 0 0;padding-top:22px;font-size:17px;font-weight:700;line-height:1.45;color:#FFC83D}
@media(max-width:600px){.sv2 .s2-wn-yes,.sv2 .s2-wn-no{padding:22px}}

/* ===== /services/website-design-service/web-design-saigon ===== */
.sv2 .s2-sgctas{gap:12px 24px;align-items:center}
.sv2 .s2-lnk{font-size:15px;font-weight:600;white-space:nowrap}
.sv2 .s2-sghero{flex:0 1 440px;padding:0;border:1px solid rgba(126,166,255,.22);border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:#0C1B33;display:block}
.sv2 .s2-sghero img{width:100%;height:100%;object-fit:cover;display:block}
.sv2 .s2-steps3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.sv2 .s2-steps3 .s2-step{padding:26px}
.sv2 .s2-sgwhy{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px 56px;margin-bottom:40px}
.sv2 .s2-sgwhyt{display:grid;gap:18px;font-size:17px;line-height:1.7;color:#D6DEEE}
.sv2 .s2-sgwhyt .s2-dim{color:#B9C6DE}
.sv2 .s2-sgwhyt a{text-decoration:underline;text-underline-offset:3px}
.sv2 .s2-w43{aspect-ratio:4/3}
.sv2 .s2-w20{padding:20px;gap:4px}
.sv2 .s2-ws{font-size:14px;color:#B9C6DE}
.sv2 .s2-p38 b{font-size:38px}
.sv2 .s2-pstats.s2-p4 b.s2-cor{color:#FF8A7A}
.sv2 .s2-chg30{padding:30px}
.sv2 .s2-chg .s2-eyebrow{margin-bottom:12px}
.sv2 .s2-rel72{padding-top:72px;padding-bottom:72px}
.sv2 .s2-rel72 h2{font-size:26px;letter-spacing:-.02em}

/* ===== /services/development ===== */
.sv2 .s2-devpr{flex:0 1 440px;padding:0;gap:0;border-radius:18px;background:#040A16;overflow:hidden;font-size:13px;line-height:1.8;display:block}
.sv2 .s2-devpr .s2-tbar{padding:12px 16px}
.sv2 .s2-devprb{padding:20px 22px;display:grid;gap:6px;color:#B9C6DE}
.sv2 .s2-ok{color:#28C840}
.sv2 .s2-yy{color:#FFC83D}
.sv2 .s2-devrdy{margin-top:8px}
.sv2 .s2-p3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.sv2 .s2-p3 b{font-size:38px}
.sv2 .s2-p3 b.s2-yb{font-size:30px;padding-top:6px}

.sv2 .s2-dvx{display:grid;border-bottom:1px solid rgba(255,255,255,.1)}
.sv2 .s2-dvxr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:22px 4px;border-top:1px solid rgba(255,255,255,.1);transition:background .2s}
.sv2 .s2-dvxr:hover{background:rgba(126,166,255,.05)}
.sv2 .s2-dvxr>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:4px 32px;align-items:baseline}
.sv2 .s2-dvxt{font-size:20px;font-weight:700;color:#fff}
.sv2 .s2-dvxb{font-size:15px;line-height:1.55;color:#B9C6DE}
.sv2 .s2-dvxa{font-size:18px;color:#7EA6FF;transition:transform .2s}
.sv2 .s2-dvxr:hover .s2-dvxa{transform:translateX(4px)}

.sv2 .s2-dvfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));margin-bottom:16px;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#16306A 0%,#0C1B33 100%);border:1px solid rgba(255,200,61,.45);transition:transform .3s}
.sv2 .s2-dvfeat:hover{transform:translateY(-3px)}
.sv2 .s2-dvfimg{position:relative;min-height:320px;background:#102544}
.sv2 .s2-dvfimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sv2 .s2-dvftxt{padding:36px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.sv2 .s2-dvftxt .s2-mono{font-size:11px;letter-spacing:.12em;color:#FFC83D}
.sv2 .s2-dvft{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.02em;color:#fff}
.sv2 .s2-dvfb{max-width:46ch;font-size:16px;line-height:1.6;color:#D6DEEE}
.sv2 .s2-dvfl{margin-top:8px;font-size:15px;font-weight:600;color:#FFC83D}
.sv2 .s2-ptag{font-size:11px;letter-spacing:.1em;color:#7EA6FF}
.sv2 .s2-w20t{font-size:20px}
.sv2 .s2-wbody .s2-ws{line-height:1.55}

.sv2 .s2-dvcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.sv2 .s2-dvc{padding:28px;border-radius:18px;background:#0C1B33;border:1px solid rgba(126,166,255,.16)}
.sv2 .s2-dvc.s2-hot{background:#0F2448;border-color:rgba(255,200,61,.45)}
.sv2 .s2-dvc h4{margin:0 0 8px}
.sv2 .s2-dvc.s2-hot h4{color:#FFC83D}
.sv2 .s2-dvc p{font-size:15px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-dvc.s2-hot p{color:#D6DEEE}

.sv2 .s2-stk1{margin:0 0 18px;font-size:16px;line-height:1.65;color:#B9C6DE}
.sv2 .s2-stk2{font-size:15px;line-height:1.65;color:#8FA0BE}
.sv2 .s2-stkl{display:grid}
.sv2 .s2-stkl>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1)}
.sv2 .s2-stkl>div:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.sv2 .s2-stkl .s2-mono{padding-top:3px;font-size:11px;letter-spacing:.1em;color:#7EA6FF}
.sv2 .s2-stkv{font-size:15px;color:#fff}
.sv2 .s2-stkd{font-size:15px;line-height:1.55;color:#fff}

.sv2 .s2-dvp{padding:26px 28px}
.sv2 .s2-dvin{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px 40px}
.sv2 .s2-dvh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:6px 0 10px}
.sv2 .s2-dvh h4{margin:0;font-size:20px}
.sv2 .s2-badge{padding:4px 10px;white-space:nowrap;border-radius:999px;background:rgba(255,200,61,.14);border:1px solid rgba(255,200,61,.4);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#FFC83D}
.sv2 .s2-dvchips{display:flex;flex-wrap:wrap;gap:8px;align-content:start;padding-top:6px}
.sv2 .s2-dvchips span{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);font-size:13px;color:#D6DEEE}

.sv2 .s2-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.sv2 .s2-model{padding:28px;border-radius:20px;background:#0C1B33;border:1px solid rgba(126,166,255,.18)}
.sv2 .s2-model.s2-hot{background:linear-gradient(160deg,#16306A 0%,#0C1B33 100%);border-color:rgba(255,200,61,.5)}
.sv2 .s2-model .s2-mono{margin-bottom:12px;font-size:11px;letter-spacing:.12em;color:#7EA6FF}
.sv2 .s2-model.s2-hot .s2-mono{color:#FFC83D}
.sv2 .s2-model h4{margin:0 0 10px;font-size:22px;font-weight:800}
.sv2 .s2-model p{font-size:14px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-model.s2-hot p{color:#C6D1E5}
.sv2 .s2-mnote{margin:20px 0 0;font-size:15px;color:#fff}

.sv2 .s2-vn{padding:96px 28px}
.sv2 .s2-vn h2{margin:0 0 36px}
.sv2 .s2-vngrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px 56px;margin-bottom:48px}
.sv2 .s2-vn .s2-ewtext p{font-size:17px;line-height:1.65}
.sv2 .s2-vn .s2-ewtext .s2-vnlead{font-weight:700;color:#0A1220}
.sv2 .s2-vncards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.sv2 .s2-vnc{padding:26px;border-radius:18px;background:#fff;border:1px solid rgba(10,18,32,.08)}
.sv2 .s2-vnc h4{margin:0 0 8px;font-size:19px;font-weight:800;color:#0A1220}
.sv2 .s2-vnc p{font-size:15px;line-height:1.6;color:#44506A}

.sv2 .s2-ownq{padding:22px 24px;border-radius:16px;background:#0C1B33;border:1px solid rgba(255,200,61,.45);font-size:20px;line-height:1.4;font-weight:700;color:#fff}
.sv2 .s2-ownq span{color:#FFC83D}
.sv2 .s2-dim2{color:#B9C6DE}
.sv2 .s2-w80{max-width:80ch}
@media(max-width:600px){
  .sv2 .s2-dvftxt{padding:24px}
  .sv2 .s2-dvfimg{min-height:220px}
  .sv2 .s2-dvp{padding:20px}
  .sv2 .s2-stkl>div{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .sv2 .s2-vn{padding:64px 20px}
  .sv2 .s2-model,.sv2 .s2-dvc,.sv2 .s2-vnc{padding:22px}
  .sv2 .s2-p3 b{font-size:30px}
}
@media(max-width:600px){.sv2 .s2-badge{white-space:normal}}

/* ===== /services/development/web-development-saigon ===== */
.sv2 .s2-tagl{margin:0 0 22px;font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;color:#FFC83D}
.sv2 .s2-wdl{display:grid;border-bottom:1px solid rgba(255,255,255,.1)}
.sv2 .s2-wdr{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:24px 0;border-top:1px solid rgba(255,255,255,.1)}
.sv2 .s2-wdr>.s2-mono{padding-top:4px;font-size:13px;color:#7EA6FF}
.sv2 .s2-wdr>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:6px 40px}
.sv2 .s2-wdr h4{margin:0;font-size:19px}
.sv2 .s2-wdr p{font-size:15px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-wdfoot{margin:18px 0 0;font-size:14px;color:#8FA0BE}
.sv2 .s2-wdfoot a{text-decoration:underline;text-underline-offset:3px}
.sv2 .s2-bluelead{font-size:18px;font-weight:600;line-height:1.5;color:#2F6BFF}
.sv2 .s2-ent-who .s2-bl{color:#2F6BFF}
.sv2 .s2-notbox{padding:20px 22px;border-radius:16px;background:#0A1220;color:#D6DEEE;font-size:16px}
.sv2 .s2-ent-who .s2-ewtext .s2-notbox{color:#D6DEEE}
.sv2 .s2-notbox strong{color:#FFC83D}
@media(max-width:600px){.sv2 .s2-wdr{grid-template-columns:36px minmax(0,1fr);gap:12px}}
@media(max-width:400px){
  .nav{gap:6px;padding:14px 12px}
  .nav .cta-pill{padding:8px 12px;font-size:12.5px}
  .navburger{width:30px;height:34px}
}
.sv2 summary{overflow-wrap:anywhere}
.sv2 details p{overflow-wrap:break-word}
.sv2 summary{padding-right:8px}

/* ===== /services/development/web-development-saigon ===== */
.sv2 .s2-slice{flex:0 1 420px;padding:24px;border-radius:20px;background:#0C1B33;border:1px solid rgba(126,166,255,.22);display:grid;gap:16px;align-content:start}
.sv2 .s2-slk{font-size:11px;letter-spacing:.12em;color:#7EA6FF}
.sv2 .s2-slrows{display:grid;gap:8px}
.sv2 .s2-slr{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#D6DEEE}
.sv2 .s2-slr.s2-sly{color:#FFC83D;font-weight:700}
.sv2 .s2-slr.s2-slm{color:#8FA0BE}
.sv2 .s2-sltrack{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;display:flex}
.sv2 .s2-sltrack span{display:block;height:100%}
.sv2 .s2-slnote{padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.05);font-size:13px;line-height:1.5;color:#B9C6DE}
.sv2 .s2-bb{gap:16px}
.sv2 .s2-bb-yes,.sv2 .s2-bb-no{padding:28px;border-radius:20px}
.sv2 .s2-bb-yes{background:linear-gradient(160deg,#16306A 0%,#0C1B33 100%);border:1px solid rgba(255,200,61,.45)}
.sv2 .s2-bb-no{background:#0A1628;border:1px solid rgba(255,255,255,.14)}
.sv2 .s2-bb .s2-mono{margin-bottom:8px;font-size:12px;letter-spacing:.12em}
.sv2 .s2-bb-yes .s2-mono{color:#FFC83D}
.sv2 .s2-bb-no .s2-mono{color:#8FA0BE}
.sv2 .s2-bb .s2-wnr{display:flex;gap:12px;padding:14px 0;font-size:15px;line-height:1.55}
.sv2 .s2-bb-yes .s2-wnr{border-top:1px solid rgba(255,255,255,.12);color:#E8EDF7}
.sv2 .s2-bb-no .s2-wnr{border-top:1px solid rgba(255,255,255,.1);color:#C6D1E5}
.sv2 .s2-bb-yes .s2-wnr>span{color:#FFC83D}
.sv2 .s2-bb-no .s2-wnr>span{color:#8FA0BE}
.sv2 .s2-bbnote{margin:24px 0 0;max-width:78ch;font-size:16px;line-height:1.65;color:#fff}
.sv2 .s2-m56{grid-template-columns:56px minmax(0,1fr)}
.sv2 .s2-m56 .s2-num{width:38px;height:38px}
.sv2 .s2-m56 p a{text-decoration:underline;text-underline-offset:3px}
.sv2 .s2-m56 p strong{color:#fff}
.sv2 .s2-stkt{display:grid;gap:16px;font-size:16px;line-height:1.65;color:#B9C6DE}
.sv2 .s2-ewl2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));column-gap:56px}
.sv2 .s2-ewl2>div{padding:20px 0;border-top:1px solid rgba(10,18,32,.12)}
.sv2 .s2-ewl2>div:nth-last-child(-n+2){border-bottom:1px solid rgba(10,18,32,.12)}
.sv2 .s2-ewl2 h4{margin:0 0 4px;font-size:18px;font-weight:800;color:#0A1220}
.sv2 .s2-ewl2 p{font-size:15px;line-height:1.6;color:#44506A}
.sv2 .s2-lnote{margin:20px 0 0;max-width:80ch;font-size:15px;line-height:1.6;color:#44506A}
@media(max-width:879px){.sv2 .s2-ewl2>div:nth-last-child(2){border-bottom:0}}
@media(max-width:600px){.sv2 .s2-bb-yes,.sv2 .s2-bb-no{padding:22px}.sv2 .s2-m56{grid-template-columns:40px minmax(0,1fr)}.sv2 .s2-slice{padding:20px}}

/* ===== /services/development/web-development-saigon ===== */
.sv2 .s2-wdterm{flex:0 1 440px;max-width:100%;min-width:0}
.sv2 .s2-wdterm .s2-tbody{gap:4px;white-space:normal}
.sv2 .s2-wfg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1px;padding:1px;border-radius:20px;background:rgba(126,166,255,.16);overflow:hidden}
.sv2 .s2-wfg>div{padding:26px;background:#0A1628}
.sv2 .s2-wfg h4{margin:0 0 8px;font-size:18px;font-weight:700;color:#fff}
.sv2 .s2-wfg p{margin:0;font-size:15px;line-height:1.6;color:#B9C6DE}

/* EN/VI switch hidden while the site is English-only; remove `hidden` on #langtog in Nav.astro to bring it back */
#langtog[hidden]{display:none!important}
/* ===== /services/development/hubspot-development ===== */
.sv2 .s2-hbm{display:grid}
.sv2 .s2-hbm>div{display:flex;gap:12px;padding:14px 0;border-top:1px solid rgba(255,255,255,.1);font-size:15px;color:#fff}
.sv2 .s2-hbm>div:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.sv2 .s2-hbm>div>span{color:#FFC83D}
.sv2 .s2-hbmt{display:grid;gap:18px;font-size:17px;line-height:1.7;color:#D6DEEE}
.sv2 .s2-hbmt p{margin:0}
.sv2 .s2-hbmt .s2-hbq{padding-left:18px;border-left:3px solid #FFC83D;color:#fff}

/* ===== /services/digital-grow-service ===== */
.sv2 .s2-gcopy h1{font-size:clamp(44px,5.4vw,72px);line-height:1;letter-spacing:-.04em;margin-bottom:18px}
.sv2 .s2-gtag{margin:0 0 20px;max-width:40ch;font-size:21px;line-height:1.45;font-weight:600;color:#fff}
.sv2 .s2-gcopy .s2-l18{max-width:58ch;font-size:16px;line-height:1.7;margin-bottom:32px}
.sv2 .s2-gdh{display:flex;justify-content:space-between;gap:12px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;color:#7EA6FF}
.sv2 .s2-gdh span:last-child{color:#6B7E9E}
.sv2 .s2-gquote{background:#F1F3F8;color:#0A1220;padding:88px 28px}
.sv2 .s2-gquote figure{max-width:980px;margin:0 auto}
.sv2 .s2-gquote blockquote{margin:0 0 28px;font-size:clamp(22px,2.6vw,30px);line-height:1.4;font-weight:700;letter-spacing:-.015em;text-wrap:pretty}
.sv2 .s2-gquote figcaption{display:flex;align-items:center;gap:14px}
.sv2 .s2-gface{flex:none;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(10,18,32,.1);display:grid;place-items:center;overflow:hidden}
.sv2 .s2-gface img{width:70%;height:auto;object-fit:contain}
.sv2 .s2-gquote figcaption b{display:block;font-size:16px;font-weight:700}
.sv2 .s2-gquote figcaption span:not(.s2-gface){display:block;font-size:14px;color:#5A6780}
@media(max-width:600px){.sv2 .s2-gquote{padding:64px 20px}}
.sv2 .s2-gcalls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.sv2 .s2-gcalls>div{padding:28px;border-radius:18px;background:#0C1B33;border:1px solid rgba(126,166,255,.16)}
.sv2 .s2-gcalls h4{margin:0 0 10px;font-size:19px;font-weight:700;color:#fff}
.sv2 .s2-gcalls p{margin:0;font-size:14px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-gcalls>.s2-hot{background:#0F2448;border-color:rgba(255,200,61,.45)}
.sv2 .s2-gcalls>.s2-hot h4{color:#FFC83D}
.sv2 .s2-gcalls>.s2-hot p{color:#C6D1E5}

/* ===== /services/digital-grow-service/marketing-agency-saigon ===== */
.sv2 .s2-mgcopy h1{font-size:clamp(40px,5vw,62px);line-height:1.03;max-width:660px;margin-bottom:32px}
.sv2 .s2-mgcard{padding:26px}
.sv2 .s2-mgh{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.12em;color:#7EA6FF}
.sv2 .s2-mgh span:last-child{color:#6B7E9E;font-family:inherit;letter-spacing:0}
.sv2 .s2-mgn{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#FFC83D}
.sv2 .s2-mgl{font-size:15px;color:#fff}
.sv2 .s2-mgbars{display:flex;align-items:flex-end;gap:8px;height:80px}
.sv2 .s2-mgbars span{flex:1;border-radius:6px 6px 0 0;background:rgba(126,166,255,.3)}
.sv2 .s2-mgbars span:nth-child(2){background:rgba(126,166,255,.45)}
.sv2 .s2-mgbars span:nth-child(3){background:rgba(126,166,255,.65)}
.sv2 .s2-mgbars span:nth-child(4){background:#FFC83D}
.sv2 .s2-mgf{font-size:12px;color:#6B7E9E}
.sv2 .s2-mginc .s2-inc2.s2-mghot{background:#0F2448;border-color:rgba(255,200,61,.45)}
.sv2 .s2-mginc .s2-inc2.s2-mghot .s2-mono{color:#FFC83D}
.sv2 .s2-mginc .s2-inc2 p a{text-decoration:underline;text-underline-offset:3px}
.sv2 .s2-pstats b.s2-mgc{color:#FF8A7A}
.sv2 .s2-mgproof{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

/* ===== /services/digital-grow-service/ppc-marketing-service ===== */
.sv2 .s2-ppcx{color:#FF8A7A}
.sv2 .s2-ppck{margin-bottom:14px;font-size:12px;letter-spacing:.12em;color:#7EA6FF}
.sv2 .s2-ppcm{grid-template-columns:1fr}
.sv2 .s2-ppcc{padding:24px;gap:14px}
.sv2 .s2-ppct{display:grid;gap:1px;padding:1px;border-radius:12px;background:rgba(255,255,255,.1);overflow:hidden;font-size:14px}
.sv2 .s2-ppct>div{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;background:#0A1628;color:#B9C6DE}
.sv2 .s2-ppct>.s2-ppcy{background:#16306A;color:#fff;font-weight:700}
.sv2 .s2-ppcok{color:#28C840}
.sv2 .s2-ppcl{display:grid;gap:1px;padding:1px;border-radius:16px;background:rgba(126,166,255,.18);overflow:hidden}
.sv2 .s2-ppcl>div{display:flex;justify-content:space-between;gap:12px;padding:16px 18px;background:#0C1B33;font-size:15px}
.sv2 .s2-ppcl>div>span:first-child{color:#B9C6DE}
.sv2 .s2-ppcl>div>span:last-child{color:#fff;font-weight:700}
.sv2 .s2-ppcl>.s2-ppcly{background:#16306A}
.sv2 .s2-ppcl>.s2-ppcly>span:first-child{color:#fff}
.sv2 .s2-ppcl>.s2-ppcly>span:last-child{color:#FFC83D;font-weight:800}
.sv2 .s2-ppcp{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.sv2 .s2-ppcp{grid-template-columns:1fr}}

fieldset.form-columns-1 .hs-input {
  width: 100% !important;
}

.hs-form-field .hs-input {
  width: 100% !important;
}

/* ===== /services/support ===== */
.sv2 .s2-spy{color:#FFC83D}
.sv2 .s2-spcov{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.sv2 .s2-spcov>a{display:flex;flex-direction:column;gap:14px;padding:32px;border-radius:22px;background:linear-gradient(160deg,#16306A 0%,#0C1B33 100%);border:1px solid rgba(126,166,255,.3);transition:transform .3s,border-color .3s}
.sv2 .s2-spcov>a:hover{transform:translateY(-4px);border-color:rgba(126,166,255,.55)}
.sv2 .s2-spcov .s2-mono{font-size:11px;letter-spacing:.12em;color:#FFC83D}
.sv2 .s2-spcov b{font-size:26px;font-weight:800;letter-spacing:-.02em;color:#fff}
.sv2 .s2-spcov>a>span:not(.s2-mono){font-size:16px;line-height:1.6;color:#D6DEEE}
.sv2 .s2-spcov em{margin-top:6px;font-style:normal;font-size:15px;font-weight:600;color:#FFC83D}
.sv2 .s2-spband{background:#08142A}
.sv2 .s2-spmore{font-size:15px;font-weight:600;white-space:nowrap}
.sv2 .s2-gquote figcaption a{color:#2F6BFF;display:inline}
.sv2 .s2-sptm{flex:0 1 420px;max-width:100%;min-width:0;padding:0;gap:0;font-size:13px;line-height:1.8}
.sv2 .s2-sptm .s2-tbar span{font-size:11px}
.sv2 .s2-sptm .s2-tbody{padding:20px 22px;gap:4px;white-space:normal}

/* ===== /services/support/hire-a-developer-service ===== */
.sv2 .s2-hdt{color:#6B7E9E}
.sv2 .s2-hdr-b{color:#7EA6FF}
.sv2 .s2-hdr-g{color:#28C840}
.sv2 .s2-hdr-y{color:#FFC83D}
.sv2 .s2-hdinc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.sv2 .s2-hdinc>div,.sv2 .s2-hdbuy>div{padding:26px;border-radius:18px;background:#0C1B33;border:1px solid rgba(126,166,255,.16)}
.sv2 .s2-hdinc .s2-mono{display:block;margin-bottom:14px;font-size:12px;color:#7EA6FF}
.sv2 .s2-hdinc h4,.sv2 .s2-hdbuy h4{margin:0 0 8px;font-size:19px;font-weight:700;color:#fff}
.sv2 .s2-hdinc p,.sv2 .s2-hdbuy p{margin:0;font-size:14px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-hdinc>.s2-hot{background:#0F2448;border-color:rgba(255,200,61,.45)}
.sv2 .s2-hdinc>.s2-hot .s2-mono{color:#FFC83D}
.sv2 .s2-hdbuy{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.sv2 .s2-hdbuy>div{padding:28px}
.sv2 .s2-hdbuy .s2-mono{display:block;margin-bottom:12px;font-size:11px;letter-spacing:.12em;color:#7EA6FF}
.sv2 .s2-hdbuy>.s2-hot{background:linear-gradient(160deg,#16306A 0%,#0C1B33 100%);border-color:rgba(255,200,61,.45)}
.sv2 .s2-hdbuy>.s2-hot .s2-mono{color:#FFC83D}
.sv2 .s2-hdcoral{color:#FF8A7A}
.sv2 .s2-hdlead{margin:0;font-size:16px;line-height:1.65;color:#B9C6DE}
.sv2 .s2-hdnot{display:grid;align-content:start;border-bottom:1px solid rgba(255,255,255,.1)}
.sv2 .s2-hdnot>div{display:flex;gap:14px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1)}
.sv2 .s2-hdnot>div>span{flex:none;color:#FF8A7A;font-weight:800}
.sv2 .s2-hdnot h4{margin:0 0 4px;font-size:17px;font-weight:700;color:#fff}
.sv2 .s2-hdnot p{margin:0;font-size:15px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-hdtxt{display:grid;gap:18px;font-size:16px;line-height:1.7;color:#B9C6DE}
.sv2 .s2-hdtxt p{margin:0}

/* ===== /services/support/hosting-and-maintenance ===== */
.sv2 .s2-pstats.s2-p5{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.sv2 .s2-hmz{display:grid;align-content:start;border-bottom:1px solid rgba(10,18,32,.12)}
.sv2 .s2-hmz>div{padding:20px 0;border-top:1px solid rgba(10,18,32,.12)}
.sv2 .s2-hmz b{display:block;margin-bottom:6px;font-size:18px;font-weight:800;color:#0A1220}
.sv2 .s2-hmz p{margin:0;font-size:15px;line-height:1.65;color:#44506A}
.sv2 .s2-hmcost{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;align-items:start}
.sv2 .s2-hmcost>div{padding:32px;border-radius:22px}
.sv2 .s2-hmc2{background:#0C1B33;border:1px solid rgba(126,166,255,.18)}
.sv2 .s2-hmcost h2{margin:0 0 20px;font-size:clamp(26px,3vw,34px)}
.sv2 .s2-hmc2>div{display:flex;gap:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
.sv2 .s2-hmc2>div>span{flex:none;color:#FF8A7A;font-weight:800}
.sv2 .s2-hmc2 p{margin:0;font-size:15px;line-height:1.6;color:#C6D1E5}
.sv2 .s2-hmx{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.sv2 .s2-sptm.s2-hmtm{flex-basis:440px}

/* ===== /services/seo-service/keyword-research-service ===== */
/* hero: sample keyword map (sits on .s2-devpr + .s2-tbar) */
.sv2 .s2-kr-map{flex:0 1 460px;font-size:12px;line-height:1.6}
.sv2 .s2-kr-mr{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.2fr) minmax(0,.8fr);gap:8px;padding:9px 18px;border-top:1px solid rgba(255,255,255,.06);color:#D6DEEE}
.sv2 .s2-kr-mr>span{overflow-wrap:anywhere}
.sv2 .s2-kr-mr.s2-kr-mh{padding:10px 18px;border-top:0;font-size:10px;letter-spacing:.1em;color:#6B7E9E}
.sv2 .s2-kr-mr:last-child{padding-bottom:16px}
.sv2 .s2-kr-blu{color:#7EA6FF}
.sv2 .s2-kr-dim{color:#8FA0BE}
/* 03 scope bar sits flush under the answer block */
.sv2 .s2-kr-scope{padding-top:0;padding-bottom:96px}
/* 04 last paragraph brighter */
.sv2 .s2-uiText p.s2-kr-w{color:#fff}
/* 05 / 09 section sub-lines */
.sv2 .s2-kr-sub{margin:0 0 32px;font-size:17px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-process .s2-kr-sub{margin-bottom:36px;color:#C6D1E5}
/* 05 steps: 3 + 2 split */
.sv2 .s2-kr-flow{display:flex;flex-wrap:wrap;gap:14px}
.sv2 .s2-kr-flow>div{min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:14px}
.sv2 .s2-kr-flow>div:first-child{flex:3 1 540px}
.sv2 .s2-kr-flow>div:last-child{flex:2 1 360px}
.sv2 .s2-kr-flow .s2-step h4{font-size:18px}
/* 06 keep bar */
.sv2 .s2-kr-keep{margin-top:24px;padding:24px 28px;border-radius:18px;border-color:rgba(126,166,255,.18)}
.sv2 .s2-kr-keep p{flex:1 1 480px;max-width:none;line-height:1.65;color:#D6DEEE}
/* 07 sources list */
.sv2 .s2-kr-src{display:grid;border-bottom:1px solid rgba(255,255,255,.1)}
.sv2 .s2-kr-src>div{padding:18px 0;border-top:1px solid rgba(255,255,255,.1)}
.sv2 .s2-kr-src b{display:block;margin-bottom:4px;font-size:17px;font-weight:700;color:#fff}
.sv2 .s2-kr-src p{font-size:15px;line-height:1.6;color:#B9C6DE}
/* 08 light band */
.sv2 .s2-ewtext p.s2-kr-lead{color:#0A1220;font-weight:600}
.sv2 .s2-ewtext p.s2-notbox{font-size:16px}
/* 09 note */
.sv2 .s2-kr-note{margin-top:24px;font-size:15px;line-height:1.65;color:#B9C6DE}
/* 10 timeline and cost */
/* 12-13 related + proof */
.sv2 h2.s2-kr-h36{font-size:clamp(28px,3vw,36px)}
.sv2 .s2-kr-relc{padding:22px 24px;border-radius:18px}
.sv2 .s2-kr-relc b{font-size:18px}
@media(max-width:600px){
  .sv2 .s2-kr-scope{padding-bottom:64px}
  .sv2 .s2-kr-scope .s2-pstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv2 .s2-kr-scope .s2-pstats>div{padding:20px 16px}
  .sv2 .s2-kr-scope .s2-pstats b{font-size:24px}
  .sv2 .s2-kr-mr{padding-left:14px;padding-right:14px}
  .sv2 .s2-kr-keep{padding:22px}
  .sv2 .s2-kr-keep .pill{width:100%;justify-content:center}
}

/* ===== /services/seo-service/technical-seo-service ===== */
/* hero: fetch-as table inside the .s2-devpr terminal */
.sv2 .s2-ts-fetch{font-size:12px;line-height:1.6}
.sv2 .s2-ts-fr{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) auto;gap:10px;padding:9px 20px;border-top:1px solid rgba(255,255,255,.06);color:#D6DEEE}
.sv2 .s2-ts-fr>span:nth-child(2){color:#8FA0BE}
.sv2 .s2-ts-fr.s2-ts-fh{padding:10px 20px;border-top:0;font-size:10px;letter-spacing:.1em;color:#6B7E9E}
.sv2 .s2-ts-fr.s2-ts-fh>span{color:#6B7E9E}
.sv2 .s2-ts-ffoot{padding:14px 20px 18px;border-top:1px solid rgba(255,255,255,.06);color:#FFC83D}

/* 04 boxed middle paragraph on the #08142A band */
.sv2 .s2-ts-box{padding:20px 22px;border-radius:16px;background:#0C1B33;border:1px solid rgba(126,166,255,.18);color:#fff}

/* 05 what we check: numbered two-column list */
.sv2 .s2-ts-chk{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));column-gap:48px}
.sv2 .s2-ts-chk>div{display:flex;gap:16px;padding:20px 0;border-top:1px solid rgba(255,255,255,.1)}
.sv2 .s2-ts-chk>div>.s2-mono{flex:none;padding-top:4px;font-size:12px;font-weight:700;color:#7EA6FF}
.sv2 .s2-ts-chk h4{margin:0 0 4px;font-size:17px}
.sv2 .s2-ts-chk p{font-size:15px;line-height:1.6;color:#B9C6DE}

/* 06 AI crawlers (light band) */
.sv2 .s2-ts-aiL{display:grid;gap:24px;align-content:start}
.sv2 .s2-ts-bots{display:flex;flex-wrap:wrap;gap:8px}
.sv2 .s2-ts-bots span{padding:7px 12px;border-radius:999px;background:#0A1220;color:#fff;font-size:12px}
.sv2 .s2-ent-who .s2-ewtext p.s2-ts-lead{color:#0A1220;font-weight:600}

/* 09 migrations */
.sv2 .s2-ts-mig{display:grid;gap:18px;align-content:start;justify-items:start}
.sv2 .s2-ts-p17{font-size:17px;line-height:1.65;color:#fff}
.sv2 .s2-ts-winsp{margin:0 0 8px;font-size:16px;line-height:1.6;color:#D6DEEE}
.sv2 .s2-ts-wins{display:grid;border-bottom:1px solid rgba(255,255,255,.1)}
.sv2 .s2-ts-wins>div{display:flex;gap:16px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1)}
.sv2 .s2-ts-wins>div>span{flex:none;font-weight:800;color:#FFC83D}
.sv2 .s2-ts-wins h4{margin:0 0 4px;font-size:17px}
.sv2 .s2-ts-wins p{font-size:15px;line-height:1.6;color:#B9C6DE}

/* 11 timeline and cost card */

/* 13 related service cards (label only) */
.sv2 .s2-ts-relc{padding:22px 24px;border-radius:18px}
.sv2 .s2-ts-relc b{font-size:18px}

/* 14 proof: featured card + two stacked horizontal cards */
.sv2 .s2-ts-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:16px}
.sv2 .s2-ts-feat{border-color:rgba(255,200,61,.5)}
.sv2 .s2-ts-feat .s2-pimg{aspect-ratio:16/9}
.sv2 .s2-ts-big{font-size:32px;font-weight:800;letter-spacing:-.03em;color:#FFC83D}
.sv2 .s2-ts-stack{display:grid;gap:16px}
.sv2 .s2-ts-h{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.sv2 .s2-ts-h .s2-pimg{aspect-ratio:auto;min-height:150px}
.sv2 .s2-ts-h .s2-pbody{align-content:center}
@media(max-width:600px){
  .sv2 .s2-ts-fr{padding-left:16px;padding-right:16px}
  .sv2 .s2-ts-ffoot{padding-left:16px;padding-right:16px}
  .sv2 .s2-ts-h{grid-template-columns:1fr}
  .sv2 .s2-ts-h .s2-pimg{aspect-ratio:16/9;min-height:0}
}

/* ===== /services/seo-service/onpage-seo-service ===== */
.sv2 .s2-hcopy .s2-l18.s2-op-lede{margin:0 0 32px;max-width:56ch}
.sv2 .s2-op-lede span{color:#fff}
.sv2 .s2-op-serp{flex:0 1 460px;padding:0;border:0;border-radius:0;background:none;gap:12px;align-content:start}
.sv2 .s2-op-sc{padding:20px 22px;border-radius:16px;background:#0C1B33}
.sv2 .s2-op-bef{border:1px solid rgba(255,138,122,.35)}
.sv2 .s2-op-aft{border:1px solid rgba(255,200,61,.5)}
.sv2 .s2-op-sc .s2-mono{margin-bottom:10px;font-size:10px;letter-spacing:.12em}
.sv2 .s2-op-bef .s2-mono{color:#FF8A7A}
.sv2 .s2-op-aft .s2-mono{color:#FFC83D}
.sv2 .s2-op-st{font-size:17px;line-height:1.35;color:#9DB8FF}
.sv2 .s2-op-ss{margin-top:6px;font-size:13px;line-height:1.5;color:#8FA0BE}
.sv2 .s2-op-aft .s2-op-ss{color:#B9C6DE}
.sv2 .s2-op-pull{margin-top:20px;padding-left:16px;font-size:17px;line-height:1.5;font-weight:700}
.sv2 .s2-op-col{display:grid;gap:24px;align-content:start}
.sv2 .s2-op-stats .s2-stat{padding:22px 18px}
.sv2 .s2-op-stats .s2-stat b{font-size:clamp(28px,3vw,38px);letter-spacing:-.03em}
.sv2 .s2-op-stats .s2-stat:first-child b{color:#FFC83D}
.sv2 p.s2-op-w{color:#fff}
.sv2 .s2-op-inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:0 48px;align-items:start}
.sv2 .s2-op-inc .s2-inct{font-size:18px;line-height:1.3}
.sv2 .s2-op-nol{display:grid;border-bottom:1px solid rgba(255,255,255,.1)}
.sv2 .s2-op-nol>div{display:flex;gap:14px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1)}
.sv2 .s2-op-nol>div>span{flex:none;font-weight:800;color:#FF8A7A}
.sv2 .s2-op-nol h4{margin:0 0 4px;font-size:17px;line-height:1.4}
.sv2 .s2-op-nol p{font-size:15px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-op-nol p a{text-decoration:underline;text-underline-offset:3px}
.sv2 .s2-op-keep{margin-top:24px;padding:24px 28px;border-radius:18px}
.sv2 .s2-op-keep p{max-width:none;line-height:1.65;color:#D6DEEE}
.sv2 h2.s2-op-h36{font-size:clamp(28px,3vw,36px)}
.sv2 .s2-op-pstat{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:#FFC83D}
@media(max-width:600px){.sv2 .s2-op-keep{padding:22px}.sv2 .s2-op-sc{padding:18px}}

/* ===== /services/seo-service/seo-audit-service ===== */
/* 01 hero: fix-list window (shell reuses .s2-devpr + .s2-tbar) */
.sv2 .s2-au-fx{line-height:1.6}
.sv2 .s2-au-fx .s2-tbar span{font-size:11px}
.sv2 .s2-au-r{display:flex;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);color:#8FA0BE}
.sv2 .s2-au-r.s2-au-hi{color:#D6DEEE}
.sv2 .s2-au-strike{color:#FF8A7A;text-decoration:line-through}
.sv2 .s2-au-k{padding:14px 20px 6px;font-size:10px;letter-spacing:.12em;color:#6B7E9E}
.sv2 .s2-au-i{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;padding:8px 20px;color:#D6DEEE}
.sv2 .s2-au-i:last-child{padding-bottom:18px}
/* 02 answer: pull line under the heading */
.sv2 .s2-au-qt{margin-top:20px;padding-left:16px;font-size:17px;line-height:1.5;font-weight:700}
/* 03 drawer: yellow head line + numbered cards (grid/cards reuse .s2-dvcards/.s2-dvc) */
.sv2 .s2-head .s2-au-hl{max-width:none;font-size:clamp(18px,2vw,22px);line-height:1.3;font-weight:800;color:#FFC83D}
.sv2 .s2-au-n{margin-bottom:12px;font-size:12px;color:#7EA6FF}
.sv2 .s2-dvc.s2-au-hot{background:linear-gradient(160deg,#16306A 0%,#0C1B33 100%);border-color:rgba(255,200,61,.5)}
.sv2 .s2-au-hot .s2-au-n{color:#FFC83D}
.sv2 .s2-dvc.s2-au-hot p{color:#fff}
/* 04 what we look at: two columns of numbered rows (rows reuse .s2-inc/.s2-incr) */
.sv2 .s2-au-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:0 48px}
.sv2 .s2-au-2col .s2-inc{align-content:start}
.sv2 .s2-au-2col .s2-incr{grid-template-columns:24px minmax(0,1fr);gap:18px}
.sv2 .s2-au-2col .s2-incr:last-child{border-bottom:0}
.sv2 .s2-au-2col .s2-incr>span{padding-top:4px;font-size:12px}
.sv2 .s2-au-2col .s2-inct{margin-bottom:6px;font-size:18px}
/* 05 what you get: note box */
.sv2 .s2-au-keep{margin-top:24px;padding:24px 28px;border-radius:18px}
.sv2 .s2-au-keep p{max-width:none;line-height:1.65;color:#D6DEEE}
/* 06 what this is not */
.sv2 .s2-au-not{border-bottom:1px solid rgba(255,255,255,.1)}
.sv2 .s2-au-not>div{display:flex;gap:14px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1)}
.sv2 .s2-au-not>div>span{flex:none;font-weight:800;color:#FF8A7A}
.sv2 .s2-au-not h4{margin:0 0 4px;font-size:17px}
.sv2 .s2-au-not p{font-size:15px;line-height:1.6;color:#B9C6DE}
/* 11 proof: headline number on the card */
.sv2 .s2-au-pv{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:#FFC83D}
@media(max-width:600px){
  .sv2 .s2-au-keep{padding:22px}
  .sv2 .s2-au-r,.sv2 .s2-au-i{padding-left:16px;padding-right:16px}
  .sv2 .s2-au-k{padding-left:16px;padding-right:16px}
}

/* ===== /services/seo-service/seo-agency-saigon-service ===== */
/* hero: two market cards */
.sv2 .s2-sa-mk{padding:0;border:0;background:none;gap:12px;align-content:start}
.sv2 .s2-sa-mkc{padding:22px 24px;border-radius:16px;background:#0C1B33;border:1px solid rgba(126,166,255,.3)}
.sv2 .s2-sa-mkc.s2-sa-mky{border-color:rgba(255,200,61,.5)}
.sv2 .s2-sa-mkc .s2-mono{margin-bottom:8px;font-size:11px;letter-spacing:.12em;color:#7EA6FF}
.sv2 .s2-sa-mkc.s2-sa-mky .s2-mono{color:#FFC83D}
.sv2 .s2-sa-mkc b{display:block;margin-bottom:4px;font-size:18px;font-weight:700;color:#fff}
.sv2 .s2-sa-mkc p{font-size:14px;line-height:1.55;color:#B9C6DE}
/* proof bar sits directly under the answer block */
.sv2 .s2-sa-pbar{padding-top:0;padding-bottom:96px}
/* shared left column: heading block + visual */
.sv2 .s2-sa-mleft{display:grid;gap:28px;align-content:start}
.sv2 .s2-sa-sub{margin:10px 0 0;font-size:17px;font-weight:600;color:#44506A}
.sv2 .s2-sa-sub.s2-sa-subd{color:#B9C6DE}
/* two markets: search volume card */
.sv2 .s2-sa-vol{padding:26px;border-radius:18px;background:#0A1220;display:grid;gap:18px}
.sv2 .s2-sa-volk{font-size:11px;letter-spacing:.12em;color:#8FA0BE}
.sv2 .s2-sa-volr{display:grid;gap:8px}
.sv2 .s2-sa-voll{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:#fff}
.sv2 .s2-sa-voll span:first-child{font-weight:700}
.sv2 .s2-sa-voll span:last-child{font-weight:800}
.sv2 .s2-sa-blu{color:#7EA6FF}
.sv2 .s2-sa-volb{height:12px;border-radius:999px}
.sv2 .s2-ewtext .s2-sa-em{color:#0A1220;font-weight:600}
.sv2 .s2-ewtext .s2-notbox{font-size:16px}
/* included: cards with a trailing link */
.sv2 .s2-sa-inc{display:flex;flex-direction:column;gap:10px}
.sv2 .s2-sa-inc .s2-mono,.sv2 .s2-sa-inc h4{margin:0}
.sv2 .s2-sa-inc p{flex:1;font-size:15px}
.sv2 .s2-sa-go{font-size:14px;font-weight:600}
/* prose column */
.sv2 .s2-sa-txt{display:grid;gap:18px;align-content:start;font-size:17px;line-height:1.7;color:#D6DEEE}
.sv2 .s2-sa-txt .s2-sa-w{color:#fff}
/* process subtitle */
.sv2 .s2-sa-psub{margin:8px 0 36px;font-size:17px;color:#C6D1E5}
/* the four options */
.sv2 .s2-sa-opts{display:grid;gap:10px}
.sv2 .s2-sa-opts>div{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:14px;background:#0C1B33;border:1px solid rgba(126,166,255,.14);font-size:15px;font-weight:500;color:#B9C6DE}
.sv2 .s2-sa-opts .s2-mono{font-size:12px;color:#6B7E9E}
.sv2 .s2-sa-opts>div.s2-sa-us{background:linear-gradient(160deg,#16306A 0%,#0C1B33 100%);border-color:rgba(255,200,61,.5);font-weight:700;color:#fff}
.sv2 .s2-sa-opts>div.s2-sa-us .s2-mono{color:#FFC83D}
/* cost card */
/* faq side links */
.sv2 .s2-sa-frel{margin-top:14px;font-size:14px;line-height:1.6;color:#B9C6DE}
/* proof cards: headline number + 16:9 image */
.sv2 .s2-sa-proof{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.sv2 .s2-sa-proof .s2-pimg{aspect-ratio:16/9}
.sv2 .s2-sa-pst{font-size:32px;font-weight:800;letter-spacing:-.03em;color:#FFC83D;line-height:1.2}
@media(max-width:600px){
  .sv2 .s2-sa-pbar{padding-bottom:64px}
  .sv2 .s2-sa-mkc{padding:18px 20px}
  .sv2 .s2-sa-vol{padding:20px}
  .sv2 .s2-sa-voll{flex-wrap:wrap;gap:4px 12px}
}
/* web development in Saigon (website-design-service/web-app-development) */
.sv2 .s2-hcopy p.s2-wdlead{margin:0 0 22px;font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#FFC83D}
.sv2 .s2-tdim{color:#6B7E9E}
.sv2 .s2-wdinc .s2-incr>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:6px 40px}
.sv2 .s2-wdinc .s2-inct,.sv2 .s2-wdinc .s2-incb{margin:0}
.sv2 .s2-wdwho{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1px;padding:1px;border-radius:20px;background:rgba(126,166,255,.16);overflow:hidden}
.sv2 .s2-wdwho>div{padding:26px;background:#0A1628}
.sv2 .s2-wdwt{margin-bottom:8px;font-size:18px;font-weight:700;color:#fff}
.sv2 .s2-wdwho p{margin:0;font-size:15px;line-height:1.6;color:#B9C6DE}
.sv2 .s2-wdwhy{margin:14px 0 0;font-size:18px;font-weight:600;line-height:1.5;color:#2F6BFF}
/* case-study closing CTA: balanced two-column band (text left, action right), shorter than the shared .final */
.final.final-cs{padding-block:clamp(56px,7vw,88px)}
.final-cs .wrap{grid-template-columns:minmax(0,1fr) auto;gap:32px 64px;align-items:center}
.final-cs h2{font-size:clamp(34px,4.4vw,56px);line-height:1.05}
.final-cs p{margin-top:14px;font-size:16px;line-height:1.6;max-width:44ch}
.final-cs .side{align-items:flex-end;text-align:right;gap:12px}
.final-cs .side .mail{margin:0}
@media(max-width:820px){.final-cs .wrap{grid-template-columns:1fr}.final-cs .side{align-items:flex-start;text-align:left}}
/* /services/ hero proof card on phones: keep the figures inside their cells (e.g. "100/100") */
@media(max-width:600px){
  .sv2 .s2-stats .s2-stat{padding:20px 16px}
  .sv2 .s2-stats .s2-stat b{font-size:clamp(24px,7vw,30px);letter-spacing:-.04em;white-space:nowrap}
  .sv2 .s2-stats .s2-stat>span{font-size:13px}
}
@media(max-width:360px){.sv2 .s2-stats .s2-stat b{font-size:22px}}
/* /case-studies/ cards on phones/tablets: long client names ("McLaren Construction Group") must not swamp the tile */
@media(max-width:820px){
  .cols2 .cs-tile .brandmark{top:18px;left:20px;right:20px}
  .cols2 .cs-tile .brandmark span{font-size:clamp(20px,5.6vw,32px);line-height:1.12;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cols2 .cs-tile .shotcard{top:40%}
  .cols2 .cs-tile .tag{left:16px;bottom:14px;font-size:12px;padding:7px 12px}
}

/* ===== /about (About Page.dc.html) ===== */
.sv2 .ab-box{max-width:1180px;margin:0 auto}
.sv2 .ab-sec{padding:96px 40px}
.sv2 .ab-flush{padding-top:0}
.sv2 .ab-line{border-top:1px solid rgba(255,255,255,.06)}
.sv2 .ab-mono{font-family:'JetBrains Mono',monospace}
.sv2 .ab-kick{margin:0 0 22px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7EA6FF}
.sv2 .ab-kick.ab-yel{margin-bottom:10px;font-size:11px;color:#FFC83D}
.sv2 .ab-hero{padding:96px 40px 72px;background:radial-gradient(120% 90% at 72% 0%,#123061 0%,#0A1934 42%,#060D1C 100%)}
.sv2 .ab-herogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:48px 64px;align-items:end}
.sv2 .ab-hero h1{margin:0 0 26px;font-size:clamp(34px,5.4vw,66px);line-height:1.02;letter-spacing:-.035em;font-weight:800;color:#fff;text-wrap:balance}
.sv2 .ab-lede{margin:0 0 34px;max-width:54ch;font-size:18px;line-height:1.6;color:#D3DCEC;text-wrap:pretty}
.sv2 .ab-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:1px;border-radius:18px;background:rgba(126,166,255,.18);overflow:hidden}
.sv2 .ab-facts>div{padding:24px;background:#0C1B33}
.sv2 .ab-facts dt{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6B7E9E}
.sv2 .ab-facts dd{margin:8px 0 0;font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#fff}
.sv2 .ab-facts dd.ab-small{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:0}
.sv2 .ab-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px 56px}
.sv2 .ab-two h2{margin:0;font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.03em;font-weight:800;color:#fff;text-wrap:balance}
.sv2 .ab-dim{color:#5A6C8C}
.sv2 .ab-prose{display:grid;gap:18px;align-content:start;font-size:16px;line-height:1.7;color:#B9C6DE}
.sv2 .ab-prose p{margin:0}
.sv2 .ab-prose strong{color:#fff;font-weight:600}
.sv2 .ab-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:36px}
.sv2 .ab-head h2{margin:0;font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:800;color:#fff}
.sv2 .ab-head p{margin:0;max-width:40ch;font-size:15px;line-height:1.6;color:#B9C6DE}
.sv2 .ab-head a{font-size:14px;font-weight:600}
.sv2 .ab-cells{display:grid;gap:1px;padding:1px;border-radius:18px;background:rgba(126,166,255,.18);overflow:hidden}
.sv2 .ab-svc{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.sv2 .ab-svc>a{display:grid;gap:10px;padding:26px 22px;background:#0C1B33;color:#fff;align-content:start;transition:background .2s}
.sv2 .ab-svc>a:hover{background:#102544;color:#fff}
.sv2 .ab-svc .ab-mono{font-size:11px;color:#7EA6FF}
.sv2 .ab-svc h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.sv2 .ab-svc p{margin:0;font-size:14px;line-height:1.55;color:#B9C6DE}
.sv2 .ab-band{background:#081327;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding-top:110px;padding-bottom:110px}
.sv2 .ab-founder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:48px 64px;align-items:center}
.sv2 .ab-fphoto{border-radius:20px;border:1px solid rgba(126,166,255,.22);background:#0C1B33;overflow:hidden;aspect-ratio:4/5}
.sv2 .ab-fphoto img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.sv2 .ab-founder h2{margin:0 0 24px;font-size:clamp(26px,3.2vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:800;color:#fff;text-wrap:balance}
.sv2 .ab-fprose{margin-bottom:30px}
.sv2 .ab-fquote{margin:0 0 22px;padding:24px 26px;border-radius:16px;background:#0C1B33;border:1px solid rgba(126,166,255,.18);font-size:18px;line-height:1.5;font-weight:600;color:#fff}
.sv2 .ab-fsig{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.sv2 .ab-fsig b{display:block;font-size:15px;font-weight:600;color:#fff}
.sv2 .ab-fsig span{display:block;font-size:13px;color:#8FA0BE}
.sv2 .ab-fsig a{font-size:14px;font-weight:600}
.sv2 .ab-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:16px}
.sv2 .ab-tm{display:grid;gap:12px;color:#fff;align-content:start}
.sv2 .ab-ph{position:relative;display:block;aspect-ratio:1/1;border-radius:16px;border:1px solid rgba(126,166,255,.22);background:#0C1B33;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s}
.sv2 .ab-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% var(--y,25%)}
.sv2 .ab-tm:hover .ab-ph{transform:translateY(-4px);border-color:rgba(126,166,255,.5)}
.sv2 .ab-tmt b{display:block;font-size:15px;font-weight:600;color:#fff}
.sv2 .ab-tmt span{display:block;font-size:13px;color:#8FA0BE}
.sv2 .ab-hire .ab-ph{display:flex;align-items:center;justify-content:center;border-style:dashed;background:#0A1628}
.sv2 .ab-q{font-size:56px;font-weight:800;color:#7EA6FF}
.sv2 .ab-hire .ab-tmt span{color:#7EA6FF}
.sv2 .ab-prin{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.sv2 .ab-prin>div{padding:26px 24px;background:#0C1B33}
.sv2 .ab-prin h3{margin:0 0 8px;font-size:17px;font-weight:700;color:#fff}
.sv2 .ab-prin p{margin:0;font-size:14px;line-height:1.55;color:#B9C6DE}
.sv2 .ab-light{background:#F3F6FB;color:#0A1220;padding-top:110px;padding-bottom:110px}
.sv2 .ab-light h2{color:#0A1220}
.sv2 .ab-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:32px}
.sv2 .ab-steps li{display:grid;gap:10px;padding-top:20px;border-top:2px solid #2F6BFF;align-content:start}
.sv2 .ab-steps .ab-mono{font-size:12px;color:#2F6BFF}
.sv2 .ab-steps h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;color:#0A1220}
.sv2 .ab-steps p{margin:0;font-size:15px;line-height:1.6;color:#3D4C66}
.sv2 .ab-quote{padding:120px 40px}
.sv2 .ab-quote figure{max-width:980px;margin:0 auto}
.sv2 .ab-quote blockquote{margin:0 0 24px;font-size:clamp(22px,3vw,36px);line-height:1.3;letter-spacing:-.02em;font-weight:600;color:#fff;text-wrap:pretty}
.sv2 .ab-quote blockquote span{color:#7EA6FF}
.sv2 .ab-quote figcaption{font-size:14px;color:#8FA0BE}
.sv2 .ab-careers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px;align-items:center;padding:36px;border-radius:20px;border:1px solid rgba(126,166,255,.18);background:#0C1B33}
.sv2 .ab-careers h2{margin:0;font-size:28px;letter-spacing:-.03em;font-weight:800;color:#fff}
.sv2 .ab-careerr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.sv2 .ab-careerr p{margin:0;max-width:40ch;font-size:15px;line-height:1.6;color:#B9C6DE}
@media(max-width:700px){
  .sv2 .ab-sec,.sv2 .ab-hero,.sv2 .ab-quote{padding-left:20px;padding-right:20px}
  .sv2 .ab-sec{padding-top:64px;padding-bottom:64px}
  .sv2 .ab-flush{padding-top:0}
  .sv2 .ab-hero{padding-top:56px;padding-bottom:48px}
  .sv2 .ab-band,.sv2 .ab-light{padding-top:72px;padding-bottom:72px}
  .sv2 .ab-quote{padding-top:72px;padding-bottom:72px}
  .sv2 .ab-careers{padding:24px}
  .sv2 .ab-facts>div{padding:18px}
  .sv2 .ab-team{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* /team/<slug> "Get in touch" pills with an icon */
.tm-contact{display:inline-flex;align-items:center;gap:10px}
.tm-contact .tm-ic{flex:none}
/* /team/<slug> hero: icon-only contact row under the intro, and a 20px gutter beside the portrait */
.tm-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.tm-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--ice-rgb),.35);color:var(--ice);transition:background .2s,border-color .2s,transform .2s}
.tm-social a:hover{background:rgba(var(--ice-rgb),.14);border-color:rgba(var(--ice-rgb),.7);transform:translateY(-2px)}
.chap-b .media.tm-hero-photo{margin-right:20px}
@media(max-width:900px){.chap-b .media.tm-hero-photo{margin-right:0}}
/* /team/<slug> hero: the text column runs the full height of the portrait (heading at the top, contact row at the bottom) */
.tm-contactme__h{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tm-contactme .tm-social{margin-top:0}
@media(min-width:901px){
  .chap-b:has(.tm-hero-photo){align-items:stretch}
  .chap-b:has(.tm-hero-photo) .txt{display:flex;flex-direction:column;justify-content:space-between;gap:28px}
}
@media(max-width:900px){.tm-contactme{margin-top:28px}}
/* /team grid reuses the /about tiles; keep the page background instead of the .sv2 one */
.sv2.tm-section{background:transparent}
/* article with no table of contents: use the full reading column instead of the 216px TOC track */
.bp-grid.bp-notoc{grid-template-columns:minmax(0,1fr)}