/* ==========================================================================
   GTX DIGITAL — site.css
   Business technology for the Midlands Golden Triangle.
   Palette sampled from the GTX mark: #0030A1 -> #0079FA -> #01BBFA on #061123.
   ========================================================================== */

:root{
  --ink:        #061123;
  --ink-2:      #0B1B31;
  --ink-3:      #12263F;
  --paper:      #F6F8FB;
  --paper-2:    #EBF0F6;
  --white:      #FFFFFF;

  --deep:       #0030A1;
  --blue:       #0079FA;
  --blue-hi:    #2E93FF;
  --cyan:       #01BBFA;
  /* --grad is for DECORATION ONLY (rules, ticks, SVG strokes, hover fills).
     Never put text on it: white on its cyan end is 2.2:1. Text-bearing
     surfaces use the two measured variants below. */
  --grad:       linear-gradient(115deg, #0030A1 0%, #0079FA 52%, #01BBFA 100%);
  /* white text on this stays >=5.5:1 at every point along it */
  --grad-cta:   linear-gradient(115deg, #0030A1 0%, #0052C8 55%, #0062E0 100%);
  /* gradient-filled TEXT on the dark hero: >=7.1:1 at every point */
  --grad-text:  linear-gradient(115deg, #4AA3FF 0%, #27B6FF 50%, #5FD8FF 100%);
  --tint:       rgba(0,121,250,.10);
  /* --blue is a DECORATION blue: as text it measures 4.1:1 on white and 4.0:1
     on --paper-2, both below AA. Anything that renders --blue as text on a
     light surface uses this instead (5.5:1 on --paper-2, 6.3:1 on white).
     It is the midpoint of .grad-t--light, so the palette is unchanged. */
  --blue-text:  #0057D6;

  --text:       #0E1A2B;
  --text-mid:   #56667C;
  --text-inv:   #E8EEF6;
  --text-inv-2: #8FA1B8;

  --line:       rgba(14,26,43,.13);
  --line-soft:  rgba(14,26,43,.07);
  --line-inv:   rgba(255,255,255,.14);
  --line-inv-2: rgba(255,255,255,.07);

  --pad:        clamp(52px, 6vw, 86px);
  --gutter:     clamp(18px, 4vw, 44px);
  --max:        1240px;
  --r:          4px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.14; letter-spacing:-.018em; }
h1{ font-size:clamp(2.05rem, 3.5vw, 3.15rem); }
h2{ font-size:clamp(1.55rem, 2.4vw, 2.2rem); }
h3{ font-size:clamp(1.12rem, 1.4vw, 1.3rem); letter-spacing:-.012em; }
h4{ font-size:1rem; letter-spacing:-.006em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(.98rem, 1.05vw, 1.08rem);
  line-height:1.66;
  color:var(--text-mid);
  max-width:56ch;
}
.ink .lede,.hero .lede,.phead .lede,.band .lede{ color:var(--text-inv-2); }

.grad-t{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* a touch of padding stops the descenders clipping on the gradient fill */
  padding-right:.06em;
}

/* --- shells ------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--pad); position:relative; }
.ink{ background:var(--ink); color:var(--text-inv); }
.ink h1,.ink h2,.ink h3,.ink h4{ color:var(--white); }
.paper-2{ background:var(--paper-2); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.688rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.17em;
  color:var(--text-mid); margin:0 0 18px;
}
.eyebrow::before{ content:''; width:18px; height:2px; background:var(--grad); flex:none; }
.ink .eyebrow,.hero .eyebrow,.phead .eyebrow,.band .eyebrow{ color:var(--text-inv-2); }

.s-head{ max-width:62ch; margin-bottom:clamp(30px,3.6vw,48px); }
.s-head--split{ max-width:none; display:grid; gap:clamp(18px,3vw,54px); grid-template-columns:minmax(0,1fr); align-items:end; }
@media (min-width:900px){ .s-head--split{ grid-template-columns:1.05fr .95fr; } }

/* --- buttons — hug their text, left aligned, never full width ----------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  width:auto; max-width:max-content;
  padding:13px 22px;
  font-size:.875rem; font-weight:600; letter-spacing:-.005em;
  border:1px solid transparent; border-radius:var(--r);
  cursor:pointer;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.btn svg{ flex:none; transition:transform .28s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn--blue{ background:var(--grad-cta); color:#fff; background-size:150% 100%; background-position:0 0; }
.btn--blue:hover{ background-position:100% 0; box-shadow:0 10px 26px -14px rgba(0,121,250,.8); }
.btn--ink{ background:var(--ink); color:var(--white); }
.btn--ink:hover{ background:var(--ink-3); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }
/* Every dark surface. .phead was missing here until the service pages put a
   ghost button in one: the default dark-on-dark measured 1.08:1. */
.ink .btn--ghost,.hero .btn--ghost,.band .btn--ghost,.phead .btn--ghost{ color:var(--white); border-color:var(--line-inv); }
.ink .btn--ghost:hover,.hero .btn--ghost:hover,.band .btn--ghost:hover,.phead .btn--ghost:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start; }
/* centres the ROW only — the button keeps max-width:max-content and never stretches */
.btn-row--center{ justify-content:center; }

.tlink{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8125rem; font-weight:600; letter-spacing:.02em;
  color:var(--text); padding-bottom:3px;
  background-image:var(--grad);
  background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .3s var(--ease), color .2s var(--ease);
}
.tlink:hover{ background-size:100% 2px; color:var(--blue); }
.ink .tlink,.band .tlink{ color:var(--white); }
.ink .tlink:hover,.band .tlink:hover{ color:var(--cyan); }

/* ==========================================================================
   HEADER — two floating glass bars over the dark top of every page.
   It is fixed, so --head-h reserves the space underneath. site.js measures
   the real height and overwrites the fallback below on load and on resize.
   ========================================================================== */
:root{ --head-h:106px; }

/* ONE left edge for the whole site. The header bar, the hero, the page heads
   and every section all put their contents in the same --max/--gutter
   container, so the logo, the h1 and the cards below line up exactly.
   The maths: a container centred in W at --max starts at W/2 - (--max/2) +
   --gutter. The header's inner .wrap is centred inside the bar, and the bar
   is itself centred in W, so its padding cancels and it resolves to the same
   number at every viewport width. Verified by measurement, not by eye.
   --shell is only the floating bar's own outer width. */
/* The floating bar is inset from the viewport by exactly the content
   gutter, and capped at exactly the content width, so the glass pill's
   own left and right edges land on the content edges at every width. */
:root{ --bar-inset:var(--gutter); }

.site-top{
  position:fixed; top:0; left:0; right:0; z-index:70;
  max-width:var(--max); margin-inline:auto;
  padding:clamp(8px,1.1vw,14px) var(--bar-inset) 0;
  pointer-events:none;
}
.site-top > *{ pointer-events:auto; }

/* anchors must clear the fixed header */
[id]{ scroll-margin-top:calc(var(--head-h) + var(--onthis-h, 0px) + 14px); }

.site-head{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.02) 100%),
    rgba(10,25,46,.34);
  border:1px solid rgba(255,255,255,.17);
  border-radius:16px;
  /* brightness() is what keeps the nav legible without the bar ever changing
     colour on scroll. The fill alone composites to mid-grey over the pale
     sections, where white nav measured 2.28:1 and the cyan current-page item
     1.03:1. Darkening the BACKDROP keeps it real glass -- still blurred, still
     see-through -- while guaranteeing white text has something dark to sit on.
     Measured after: 5.3:1 over the pale sections, 15:1 over the hero. */
  -webkit-backdrop-filter:blur(26px) saturate(185%) brightness(.62);
          backdrop-filter:blur(26px) saturate(185%) brightness(.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(255,255,255,.07),
    0 24px 54px -34px rgba(0,0,0,.95);
}
/* no backdrop-filter support (older Firefox) — fall back to an opaque bar */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-head{ background:rgba(9,21,39,.94); }
}
/* the light sweep along the bottom edge */
.site-head::after{
  content:''; position:absolute; left:12%; right:12%; bottom:0; height:1px;
  background:linear-gradient(90deg, rgba(140,205,255,0), rgba(140,205,255,.9), rgba(140,205,255,0));
}
/* soft bloom rising off the sweep — kept inside the bar, which clips overflow */
.site-head::before{
  content:''; position:absolute; left:22%; right:22%; bottom:0; height:22px;
  background:radial-gradient(64% 150% at 50% 100%, rgba(105,185,255,.3), rgba(105,185,255,0) 70%);
  pointer-events:none;
}
.site-head .wrap{
  max-width:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(12px,2vw,26px); min-height:84px;
  padding-inline:clamp(13px,1.3vw,20px);
}
@media (max-width:600px){ .site-head .wrap{ min-height:70px; } }

.brand{ display:inline-flex; align-items:center; flex:none; }
.brand img{ height:56px; width:auto; }
@media (max-width:600px){ .brand img{ height:44px; } }

.nav{ display:none; align-items:center; gap:2px; margin-inline:auto; }
@media (min-width:1060px){ .nav{ display:flex; } }
.nav a{
  position:relative; padding:10px 15px; border-radius:var(--r);
  font-size:.9375rem; font-weight:500; color:#fff;
  /* the bar stays glass the whole way down, so over the pale sections this
     shadow is what keeps white legible — remove it and the nav washes out */
  text-shadow:0 1px 3px rgba(6,17,35,.55), 0 0 14px rgba(6,17,35,.35);
  transition:color .2s var(--ease);
}
/* Current page and hover stay WHITE. Cyan measured 2.4:1 even on the
   darkened bar, so the marker is weight plus an underline, not colour. */
.nav a:hover{ color:#fff; background:rgba(255,255,255,.13); }
.nav a[aria-current="page"]{ color:#fff; font-weight:600; }
.nav a[aria-current="page"]::after{
  content:''; position:absolute; left:15px; right:15px; bottom:6px;
  height:2px; border-radius:2px;
  background-image:linear-gradient(90deg,#fff,#9BE2FF);
}

.head-cta{ display:none; }
@media (min-width:1060px){ .head-cta{ display:inline-flex; } }

.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r); cursor:pointer; color:#fff;
}
@media (min-width:1060px){ .burger{ display:none; } }
.burger span{ display:block; width:18px; height:1.5px; background:currentColor; position:relative; transition:background .2s; }
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:18px; height:1.5px; background:currentColor;
  transition:transform .28s var(--ease), top .2s var(--ease);
}
.burger span::before{ top:-5.5px; }
.burger span::after{ top:5.5px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

.mobnav{
  display:none; border-top:1px solid rgba(255,255,255,.08);
  background:transparent; padding:8px clamp(14px,1.8vw,26px) 22px;
}
.mobnav.is-open{ display:block; }
@media (min-width:1060px){ .mobnav{ display:none !important; } }
.mobnav a{ display:block; padding:13px 2px; font-size:1rem; font-weight:500; border-bottom:1px solid rgba(255,255,255,.07); color:#E8EEF6; }
.mobnav a:last-of-type{ border-bottom:0; }
.mobnav .btn{ margin-top:16px; }

/* ==========================================================================
   HERO — UK network photograph, copy left, Golden Triangle overlaid right
   ========================================================================== */
.hero{ position:relative; background:var(--ink); color:var(--text-inv); overflow:hidden; isolation:isolate; }

.hero__bg{ position:absolute; inset:0; z-index:0; display:block; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:64% 50%; }

/* Left-weighted veil: keeps the copy legible, leaves the map visible on the right.
   The last stop fades into --ink so the section below joins without a seam. */
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* Ramp measured against the photo: every hero text style clears WCAG AA on
       the brightest pixel that falls beneath it (worst case 6.79:1 on the
       headline). Re-tuned when the headline grew to 98px and the lines started
       reaching further right. Don't lighten it without re-measuring. */
    linear-gradient(95deg, rgba(6,17,35,.96) 0%, rgba(6,17,35,.92) 26%, rgba(6,17,35,.80) 50%, rgba(6,17,35,.34) 68%, rgba(6,17,35,0) 88%),
    /* top stop kept light so the map still reads through the glass header */
    linear-gradient(to bottom, rgba(6,17,35,.3) 0%, rgba(6,17,35,0) 20%, rgba(6,17,35,0) 74%, rgba(6,17,35,.85) 92%, var(--ink) 100%);
}
@media (max-width:979px){
  /* copy sits on top of the map rather than beside it, so it needs more cover */
  .hero__veil{
    background:linear-gradient(to bottom, rgba(6,17,35,.9) 0%, rgba(6,17,35,.82) 40%, rgba(6,17,35,.88) 76%, var(--ink) 100%);
  }
  .hero__bg img{ object-position:58% 46%; }
}

/* one full viewport, header space reserved at the top */
.hero{ min-height:100svh; display:grid; align-items:center; padding-top:var(--head-h); }
@supports not (min-height: 100svh){ .hero{ min-height:100vh; } }

.hero .wrap{
  position:relative; z-index:2; width:100%;
  max-width:var(--max); padding-inline:var(--gutter);
}
.hero__inner{
  display:grid; gap:clamp(30px,4.5vw,56px);
  grid-template-columns:minmax(0,1fr); align-items:center;
  padding-block:clamp(26px,3.4vw,46px);
}
@media (min-width:980px){ .hero__inner{ grid-template-columns:1.12fr .88fr; } }
/* Hero type is sized against BOTH axes so the block fills the screen without
   ever outgrowing it. These coefficients are MEASURED, not chosen: candidates
   were rendered at 1280x720 / 1366x768 / 1440x900 / 1536x864 / 1894x874 /
   1920x1080 / 2560x1440 and this is the largest set that still fits at every
   one. Raising the vh terms (11.2 -> 11.8) overflows a 1894x874 laptop.
   If you change them, re-run that sweep — do not eyeball it. */
.hero h1{
  /* 70px on a normal desktop (client's call). The vw/vh terms only ever pull
     it DOWN, so a short or narrow window shrinks it rather than pushing the
     pillar row off the bottom. */
  font-size:clamp(2.05rem, min(4.9vw, 10.2vh), 70px);
  margin-bottom:clamp(16px, 2.4vh, 30px);
}
.hero .lede{
  max-width:50ch; color:#D4DEEA;
  font-size:clamp(.98rem, min(1.55vw, 2.75vh), 1.48rem);
  margin-bottom:clamp(22px, 3.4vh, 40px);
}
.hero__tag{
  font-size:clamp(.688rem, .95vh, .8125rem);
  margin-bottom:clamp(14px, 2.3vh, 26px);
}
.hero .btn-row{ margin-bottom:clamp(24px, 4.4vh, 52px); }
.hero .btn{ font-size:clamp(.875rem, 1.25vh, 1.0313rem); padding-block:clamp(13px, 1.9vh, 18px); }

/* eyebrow as a glass pill with a live dot */
.hero__tag{
  display:inline-flex; align-items:center; gap:11px; margin:0 0 20px;
  padding:9px 17px 9px 13px; border-radius:100px;
  background:rgba(11,27,49,.62); border:1px solid var(--line-inv);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:.688rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--text-inv);
}
.hero__tag i{
  width:8px; height:8px; border-radius:50%; background:var(--cyan); flex:none;
  box-shadow:0 0 0 4px rgba(1,187,250,.2);
}

/* secondary CTA: glass, with a circled play mark */
.btn--glass{
  background:rgba(11,27,49,.6); color:#fff; border-color:var(--line-inv);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding-right:12px;
}
.btn--glass:hover{ background:rgba(18,38,63,.82); border-color:rgba(1,187,250,.55); }
.btn__mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--grad); color:#fff;
}
.btn--glass:hover svg{ transform:none; }

/* four pillar tiles under the CTAs */
.hero__pillars{
  display:grid; gap:18px 14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding-top:clamp(24px,3vw,30px); border-top:1px solid var(--line-inv-2);
}
@media (min-width:560px){ .hero__pillars{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 10px; } }
.hpill{ display:flex; align-items:flex-start; gap:9px; min-width:0; }
.hpill__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(36px, 4.6vh, 44px); height:clamp(36px, 4.6vh, 44px); flex:none; border-radius:50%;
  border:1px solid var(--line-inv); background:rgba(11,27,49,.5); color:var(--cyan);
  transition:border-color .26s var(--ease), background .26s var(--ease), color .26s var(--ease);
}
.hpill:hover .hpill__ico{ border-color:var(--cyan); background:rgba(1,187,250,.14); color:#fff; }
.hpill__n{ display:block; font-size:.688rem; font-weight:600; letter-spacing:.12em; color:var(--blue-hi); }
.hpill__t{ display:block; font-size:clamp(.8125rem, 1.35vh, 1.0625rem); font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:#fff; margin:2px 0 4px; }
.hpill__s{
  display:block; font-size:clamp(.75rem, 1.22vh, .9688rem); line-height:1.42; color:var(--text-inv-2);
  /* 15ch is measured, not guessed: it is wide enough that the longest
     description balances onto two lines, and narrow enough that the shortest
     still wraps — so all four tiles are two lines and the row stays level. */
  max-width:13ch;
  text-wrap:balance;
}

/* footnote card, bottom right of the hero */
.hero__note{
  position:absolute; z-index:3;
  /* flush with the right edge of the header bar, not its inner padding */
  /* sits on the content container's right edge, like everything else */
  right:calc(max(0px, (100% - var(--max)) / 2) + var(--gutter));
  bottom:clamp(20px,3vw,34px);
  display:none; align-items:center; gap:13px; max-width:270px;
  padding:13px 17px; border-radius:var(--r);
  background:rgba(11,27,49,.74); border:1px solid var(--line-inv);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:.8125rem; line-height:1.4; color:var(--text-inv);
}
@media (min-width:1120px){ .hero__note{ display:flex; } }
.hero__note span:first-child{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none; border-radius:var(--r);
  background:rgba(1,187,250,.14); color:var(--cyan);
}
.hero__note b{ display:block; font-weight:600; }

/* Short viewports: tighten the stack so the whole hero — copy, CTAs, pillar
   row, diagram, note and scroll cue — still lands inside one screen. */
@media (min-width:980px) and (max-height:880px){
  .hero__inner{ padding-block:clamp(14px,1.6vw,26px); }
  .hero__pillars{ padding-top:18px; gap:12px 10px; }
}
/* Tighten further on a short laptop screen — but never drop content.
   The pillar descriptions stay; only spacing and the two decorative
   elements give way. */
@media (min-width:980px) and (max-height:780px){
  .hero__inner{ padding-block:12px; }
  .hero h1{ margin-bottom:12px; }
  .hero__tag{ margin-bottom:12px; padding-block:7px; }
  .hero .lede{ margin-bottom:16px; }
  .hero .btn-row{ margin-bottom:18px; }
  .hero .btn{ padding-block:11px; }
  .hero__pillars{ padding-top:14px; gap:10px 10px; }
  .hero__note{ display:none !important; }
}

/* Very short window (a 1280x600-ish laptop with a lot of browser chrome).
   Spacing only — the four pillar tiles must still be fully visible. */
@media (min-width:980px) and (max-height:660px){
  .hero__inner{ padding-block:8px; }
  .hero__tag{ margin-bottom:10px; padding-block:6px; }
  .hero h1{ margin-bottom:10px; }
  .hero .lede{ margin-bottom:12px; }
  .hero .btn-row{ margin-bottom:14px; }
  .hero .btn{ padding-block:11px; }
  .hero__pillars{ padding-top:12px; gap:8px; }
  .hpill__ico{ width:32px; height:32px; }
}


/* --- the Golden Triangle, overlaid on the map ---------------------------
   The diagram is 560x500, so on a wide screen it would otherwise set the hero's
   height and push the pillar row below the fold. Cap its width from the height
   that is actually available (aspect 1.12), and the hero always fits. */
.tri{
  position:relative; width:100%; margin-inline:auto;
  max-width:min(640px, calc((100svh - var(--head-h) - 120px) * 1.12));
}
@supports not (height: 100svh){
  .tri{ max-width:min(640px, calc((100vh - var(--head-h) - 120px) * 1.12)); }
}
@media (max-width:979px){ .tri{ max-width:560px; } }
.tri svg{ width:100%; height:auto; overflow:visible; filter:drop-shadow(0 6px 26px rgba(0,60,140,.5)); }
.tri__edge{
  fill:none; stroke:url(#gtxLine); stroke-width:2.6; stroke-linejoin:round;
  stroke-dasharray:1000; stroke-dashoffset:1000;
  animation:triDraw 2.3s var(--ease) .3s forwards;
}
.tri__glow{ fill:none; stroke:var(--cyan); stroke-width:10; opacity:.26; stroke-linejoin:round; }

/* the map behind is busy — outline the small labels so they stay readable */
.tri__cap, .tri__town text, .tri__core text{
  paint-order:stroke fill; stroke:rgba(6,17,35,.9); stroke-width:3.5; stroke-linejoin:round;
}
.tri__inner{ fill:none; stroke:rgba(255,255,255,.22); stroke-width:1; stroke-dasharray:3 6; }
.tri__fill{ fill:url(#gtxFill); opacity:0; animation:triFade 1.2s var(--ease) 1.5s forwards; }

.tri__node circle.dot{ fill:#fff; stroke:var(--cyan); stroke-width:3; }
.tri__node circle.halo{ fill:var(--cyan); opacity:.25; }
.tri__node circle.pulse{ fill:none; stroke:var(--cyan); opacity:.55; animation:triPulse 3.4s ease-out infinite; }
.tri__chip{ fill:rgba(6,17,35,.82); stroke:rgba(255,255,255,.2); stroke-width:1; }
.tri__node text{ fill:#fff; font-size:13.5px; font-weight:600; letter-spacing:.005em; }
.tri__node tspan.sub{ fill:var(--text-inv-2); font-size:9.5px; font-weight:600; letter-spacing:.16em; }
.tri__cap{ fill:var(--text-inv-2); font-size:9.5px; font-weight:600; letter-spacing:.2em; }
.tri__town text{ fill:#C4D0E0; font-size:11px; font-weight:500; }
.tri__town circle{ fill:#C4D0E0; }
.tri__core text{ fill:var(--cyan); font-size:11px; font-weight:600; letter-spacing:.18em; }

@keyframes triDraw{ to{ stroke-dashoffset:0; } }
@keyframes triFade{ to{ opacity:1; } }
@keyframes triPulse{ 0%{ r:11; opacity:.55; } 70%{ r:30; opacity:0; } 100%{ r:30; opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .tri__edge{ animation:none; stroke-dashoffset:0; }
  .tri__fill{ animation:none; opacity:1; }
  .tri__node circle.pulse{ animation:none; opacity:0; }
}

/* ==========================================================================
   CAPABILITY MARQUEE — two counter-scrolling rows of glass chips.
   Rows are duplicated in JS so the -50% loop is seamless; the mask dissolves
   them at both edges instead of clipping them off.
   ========================================================================== */
.caps{
  position:relative; overflow:hidden;
  background:var(--ink);
  border-top:1px solid var(--line-inv-2); border-bottom:1px solid var(--line-inv-2);
  padding-block:clamp(18px,2vw,26px);
}
.caps::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 120% at 50% 0%, rgba(0,121,250,.16), rgba(0,121,250,0) 68%);
}
.caps__rows{ position:relative; display:grid; gap:clamp(12px,1.4vw,16px); }

.caps__row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.caps__track{ display:flex; width:max-content; animation:capScroll 52s linear infinite; }
.caps__row--rev .caps__track{ animation-direction:reverse; animation-duration:46s; }
.caps:hover .caps__track{ animation-play-state:paused; }
.caps__set{ display:flex; align-items:center; gap:clamp(10px,1.2vw,14px); padding-right:clamp(10px,1.2vw,14px); }
@keyframes capScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.cap{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 20px 10px 16px; border-radius:100px; white-space:nowrap;
  font-size:clamp(.875rem,1.05vw,.9688rem); font-weight:500; letter-spacing:-.005em;
  color:#CDDBEB;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.cap__i{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; flex:none; color:var(--cyan);
}
.cap__i svg{ width:100%; height:100%; display:block; }
/* every few chips carries the brand gradient so the rows have a rhythm */
.cap--on{
  background:var(--grad-cta); border-color:transparent; color:#fff; font-weight:600;
  box-shadow:0 8px 22px -14px rgba(0,121,250,.9);
}
.cap--on .cap__i{ color:rgba(255,255,255,.95); }

@media (prefers-reduced-motion: reduce){
  /* no scrolling — show them all as a static wrapped set */
  .caps__row{ -webkit-mask-image:none; mask-image:none; }
  .caps__track{ animation:none; width:auto; }
  .caps__set{ flex-wrap:wrap; justify-content:center; }
  .caps__set + .caps__set{ display:none; }
}

/* ==========================================================================
   PILLARS — proportions taken from the supplied design:
   of the card's inner width, icon ~14%, copy ~42%, illustration ~28%, arrow ~6%.
   ========================================================================== */
.pillars-sec{ background:var(--paper); }

.pillars-head{
  display:grid; gap:clamp(18px,3vw,54px); align-items:start;
  grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(28px,3.2vw,44px);
}
@media (min-width:900px){ .pillars-head{ grid-template-columns:1.05fr .95fr; } }
.pillars-head h2{ line-height:1.08; font-size:clamp(1.75rem,3vw,2.8rem); }
.pillars-head__note{
  font-size:clamp(.98rem,1.05vw,1.08rem); line-height:1.66; color:var(--text-mid);
  margin:0; padding-left:clamp(16px,2vw,26px);
  border-left:1px solid var(--line);
}
.pillars-head__note b{ color:var(--text); font-weight:600; }

/* gradient headline on a LIGHT background — the hero variant is far too pale
   here, and the cyan end of --grad is only 2.2:1 on white. */
.grad-t--light{
  /* background-image, NOT the `background` shorthand — the shorthand resets
     background-clip to border-box and the gradient paints the whole box
     instead of the glyphs, giving a solid blue bar. */
  background-image:linear-gradient(115deg, #0030A1 0%, #0057D6 55%, #0079FA 100%);
  -webkit-background-clip:text; background-clip:text;
}

.pillars{ --row-gap:clamp(12px,1.3vw,18px); --dot:13px; --dot-pad:clamp(16px,1.6vw,24px);
  position:relative; display:grid; gap:var(--row-gap); }

.pillar{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:center;
}
@media (min-width:920px){
  .pillar{ grid-template-columns:clamp(84px,7vw,108px) minmax(0,1fr); gap:0; }
}

/* number + solid node; the connector runs from this dot to the next one */
.pillar__rail{ position:relative; display:none; align-items:center; justify-content:flex-end; gap:clamp(12px,1.2vw,18px); padding-right:var(--dot-pad); }
@media (min-width:920px){ .pillar__rail{ display:flex; } }
.pillar__rail::after{
  content:''; position:absolute; z-index:0;
  top:50%; height:calc(100% + var(--row-gap));
  right:calc(var(--dot-pad) + var(--dot) / 2 - 1px); width:2px;
  background:rgba(0,121,250,.26);
}
.pillar:last-child .pillar__rail::after{ display:none; }
.pillar__n{
  font-size:clamp(1.75rem,2.4vw,2.4rem); font-weight:700; letter-spacing:-.035em;
  color:var(--blue); line-height:1;
}
.pillar__dot{
  position:relative; z-index:1;
  width:var(--dot); height:var(--dot); border-radius:50%; flex:none;
  background:var(--blue); box-shadow:0 0 0 4px rgba(0,121,250,.14);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.pillar:hover .pillar__dot{ transform:scale(1.2); box-shadow:0 0 0 6px rgba(0,121,250,.2); }

.pillar__card{
  display:grid; gap:clamp(14px,1.6vw,26px); align-items:center;
  grid-template-columns:minmax(0,1fr);
  background:var(--white); border:1px solid var(--line-soft); border-radius:16px;
  padding:clamp(18px,1.9vw,28px);
  overflow:hidden;
  transition:border-color .26s var(--ease), transform .26s var(--ease), box-shadow .26s var(--ease);
}
@media (min-width:620px){ .pillar__card{ grid-template-columns:auto minmax(0,1fr) auto; } }
@media (min-width:1140px){
  .pillar__card{ grid-template-columns:auto minmax(0,1.5fr) minmax(0,1.05fr) auto; }
}
.pillar:hover .pillar__card{
  border-color:rgba(0,121,250,.45);
  transform:translateY(-2px);
  box-shadow:0 18px 40px -26px rgba(6,17,35,.45);
}

/* compact variant (About): icon + copy only, no illustration column, so the
   card must not keep reserving the art and arrow tracks */
.pillar--compact .pillar__card{ grid-template-columns:minmax(0,1fr); }
@media (min-width:620px){ .pillar--compact .pillar__card{ grid-template-columns:auto minmax(0,1fr); } }
@media (min-width:1140px){ .pillar--compact .pillar__card{ grid-template-columns:auto minmax(0,1fr); } }
.pillar--compact .pillar__name a{ color:inherit; }
.pillar--compact .pillar__name a::after{ content:''; position:absolute; inset:0; z-index:3; }
.pillar--compact:hover .pillar__name a{ color:var(--blue); }

.pillar__icon{ display:flex; align-items:center; justify-content:center; flex:none; }
.pillar__icon img{
  width:clamp(104px,10.5vw,176px); height:auto;
  transition:transform .3s var(--ease);
}
.pillar:hover .pillar__icon img{ transform:scale(1.05); }

.pillar__body{ display:block; min-width:0; }
.pillar__kicker{
  display:block; font-size:.688rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--blue-hi); margin-bottom:6px;
}
.pillar__name{
  display:block; font-size:clamp(1.35rem,2vw,1.85rem); font-weight:600;
  letter-spacing:-.024em; line-height:1.1; color:var(--text); margin-bottom:9px;
}
.pillar__desc{ display:block; font-size:clamp(.875rem,.95vw,.9375rem); color:var(--text-mid); line-height:1.6; }
.pillar__desc b{ color:var(--text); font-weight:600; }

/* the supplied illustrations already sit on white, same as the card */
.pillar__art{ display:none; min-width:0; }
@media (min-width:1140px){ .pillar__art{ display:block; } }
.pillar__art img{ width:100%; height:auto; display:block; }

.pillar__go{
  display:none; align-items:center; justify-content:center;
  width:clamp(52px,4.4vw,66px); height:clamp(52px,4.4vw,66px); flex:none;
  border:1px solid rgba(0,121,250,.4); border-radius:50%; color:var(--blue);
  transition:background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}
@media (min-width:620px){ .pillar__go{ display:inline-flex; } }
.pillar:hover .pillar__go{ background:var(--grad-cta); border-color:transparent; color:#fff; transform:translateX(3px); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.grid{ display:grid; gap:clamp(14px,1.6vw,20px); grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); }

.card{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .26s var(--ease), transform .26s var(--ease), box-shadow .26s var(--ease);
}
.card:hover{ border-color:rgba(0,121,250,.45); transform:translateY(-3px); box-shadow:0 16px 36px -24px rgba(6,17,35,.55); }
.card h3{ margin:0; }
.card p{ font-size:.9063rem; color:var(--text-mid); line-height:1.62; }
.card__ico{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--tint); border-radius:var(--r); color:var(--blue); flex:none;
}
.ink .card{ background:var(--ink-2); border-color:var(--line-inv-2); }
.ink .card p{ color:var(--text-inv-2); }
.ink .card:hover{ box-shadow:none; border-color:rgba(1,187,250,.4); }
.ink .card__ico{ background:rgba(1,187,250,.12); color:var(--cyan); }

.facts{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); }
.fact{ background:var(--paper); padding:clamp(20px,2.4vw,28px); }
.fact dt{ font-size:.688rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-mid); margin-bottom:10px; }
.fact dd{ margin:0; font-size:.9063rem; color:var(--text); line-height:1.55; }
.fact dd b{ display:block; font-size:1.45rem; font-weight:600; letter-spacing:-.02em; margin-bottom:4px; }

/* ==========================================================================
   GOLDEN TRIANGLE X — headline left, 2x2 glass quadrant right with the
   X badge sitting exactly on the crossing of the dividers.
   ========================================================================== */
.xsec{ position:relative; overflow:hidden; }
.xsec::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52% 78% at 74% 44%, rgba(0,121,250,.30), rgba(0,121,250,0) 66%),
    radial-gradient(40% 60% at 92% 82%, rgba(1,187,250,.16), rgba(1,187,250,0) 68%),
    radial-gradient(46% 70% at 58% 96%, rgba(0,70,200,.22), rgba(0,70,200,0) 70%);
}
.xsec .wrap{ position:relative; }

.xsec__grid{
  display:grid; gap:clamp(34px,4vw,64px); align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:980px){ .xsec__grid{ grid-template-columns:1fr 1.05fr; } }

.xsec__h{
  font-size:clamp(2.3rem,4.6vw,4.1rem); line-height:1.02; letter-spacing:-.035em;
  color:var(--white);
}
.xsec__x{ color:var(--blue-hi); }

/* Checklist as filled blue badges with a white tick.
   Doubled-up class (.checks.checks--badge) on purpose: the base .checks rules
   sit LATER in this file, so equal specificity would lose to them. */
.checks.checks--badge{ margin-top:clamp(26px,3vw,36px); gap:clamp(14px,1.6vw,19px); }
.checks.checks--badge li{ padding-left:44px; font-size:clamp(.9063rem,1vw,1rem); color:var(--text-inv-2); }
.checks.checks--badge li::before{
  content:''; position:absolute; left:0; top:-1px;
  width:28px; height:28px; border-radius:50%;
  background:var(--grad-cta); border:0; transform:none;
  box-shadow:0 6px 16px -8px rgba(0,121,250,.9);
}
.checks.checks--badge li::after{
  content:''; position:absolute; left:9px; top:9px;
  width:10px; height:5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

/* --- the quadrant panel ------------------------------------------------- */
/* A backdrop-filter over a flat colour does nothing. These two blooms sit
   behind the panel specifically so the glass has light to refract — remove
   them and the "glass" goes back to looking like a dark box. */
.xquad{ position:relative; isolation:isolate; }
.xquad::before,
.xquad::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  border-radius:50%;
}
.xquad::before{
  /* peak sits just OUTSIDE the top-left corner: light spills across the rim
     and diffuses inward, instead of sitting bright behind the text */
  left:-26%; top:-28%; width:70%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(0,150,255,.9), rgba(0,150,255,0) 66%);
  filter:blur(24px);
}
.xquad::after{
  right:-24%; bottom:-28%; width:68%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(1,187,250,.8), rgba(1,187,250,0) 66%);
  filter:blur(26px);
}

/* faint concentric rings behind the glass */
.xquad__rings{
  position:absolute; z-index:1; left:50%; top:50%; width:134%; aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none;
  border-radius:50%; border:1px solid rgba(160,215,255,.16);
}
.xquad__rings::before,
.xquad__rings::after{
  content:''; position:absolute; left:50%; top:50%; border-radius:50%;
  transform:translate(-50%,-50%);
}
.xquad__rings::before{ width:80%; height:80%; border:1px solid rgba(160,215,255,.2); }
.xquad__rings::after{ width:58%; height:58%; border:1px dashed rgba(1,187,250,.4); }

.xquad__panel{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(8px,.95vw,14px);
  padding:clamp(10px,1.15vw,16px);
  z-index:2;
  /* low fill + heavy blur is what makes it read as glass; raising the fill
     opacity kills the effect no matter how much blur is on it */
  background:
    linear-gradient(152deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.045) 46%, rgba(255,255,255,.1) 100%),
    rgba(6,20,40,.16);
  border:1px solid rgba(130,195,255,.32);
  border-radius:26px;
  -webkit-backdrop-filter:blur(26px) saturate(150%);
          backdrop-filter:blur(26px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 0 1px rgba(60,150,255,.08),
    0 0 46px rgba(0,110,240,.3),
    0 44px 96px -54px rgba(0,95,225,1);
}
/* bright rim bloom, strongest at the top-right as in the design */
.xquad__panel::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, rgba(150,210,255,.55), rgba(150,210,255,0) 34%, rgba(150,210,255,0) 66%, rgba(90,170,255,.3));
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
          mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1.5px;
}
/* corner light sweep across the glass */
.xquad__panel::after{
  content:''; position:absolute; right:-12%; top:-40%; width:58%; height:108%;
  background:linear-gradient(200deg, rgba(160,215,255,.4), rgba(160,215,255,0) 56%);
  transform:rotate(16deg); pointer-events:none; opacity:.45; border-radius:40%;
}

/* each quadrant is its own rounded pane */
.xcell{
  position:relative; z-index:1; display:block;
  padding:clamp(18px,2vw,30px);
  border:1px solid rgba(160,215,255,.2);
  border-radius:18px;
  /* a controlled tint inside each pane so label/note contrast never depends on
     where the bloom happens to fall; the gaps and rim still show the glass */
  /* Tint + text colour are solved together against the worst case (bloom at
     full strength directly behind a pane): label/note clear 4.5:1 there.
     Lower the tint or darken the text and they stop passing. */
  background:linear-gradient(160deg, rgba(7,21,42,.66), rgba(7,21,42,.54));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}

.xcell__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(48px,3.9vw,60px); height:clamp(48px,3.9vw,60px);
  border-radius:14px; margin-bottom:clamp(14px,1.6vw,22px);
  background:linear-gradient(158deg, rgba(0,131,255,.34), rgba(0,58,175,.4));
  border:1px solid rgba(130,195,255,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px -12px rgba(0,110,240,.9);
  color:#57BAFF;
}
.xcell__ico svg{ width:clamp(24px,2vw,28px); height:auto; }
.xcell__label{
  display:block; font-size:.6875rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:#BECDDD; margin-bottom:7px;
}
.xcell__value{
  display:block; font-size:clamp(1.3rem,1.9vw,1.7rem); font-weight:600;
  letter-spacing:-.024em; color:var(--white); line-height:1.1; margin-bottom:8px;
}
.xcell__note{ display:block; font-size:clamp(.8125rem,.9vw,.9063rem); color:#BECDDD; line-height:1.5; }


/* Without backdrop-filter the low fill leaves text sitting on the raw bloom,
   so make the panel opaque there instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .xquad__panel{ background:rgba(8,22,42,.93); }
  .xcell{ background:rgba(7,21,42,.8); }
}

@media (max-width:560px){
  .xquad__panel{ grid-template-columns:1fr; }
  .xquad__rings{ display:none; }
}
}

/* ==========================================================================
   SECTORS — two-column card grid. The old <table> auto-sized to its content
   and left a dead column on the right; a grid fills the measure instead.
   ========================================================================== */
.sectors-sec{ position:relative; overflow:hidden; }
.sectors-sec::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 0% 0%, rgba(0,121,250,.12), rgba(0,121,250,0) 78%),
    radial-gradient(70% 55% at 100% 100%, rgba(1,187,250,.08), rgba(1,187,250,0) 80%);
}
.sectors-sec .wrap{ position:relative; }

.sectors{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(10px,1.1vw,16px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){ .sectors{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.sector{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.4vw,20px); align-items:start;
  padding:clamp(18px,1.8vw,24px);
  border-radius:16px;
  background:linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1);
  transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
/* gradient rim that lights up on hover */
.sector::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(140deg, rgba(120,195,255,.55), rgba(120,195,255,0) 42%, rgba(1,187,250,.3));
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
          mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px; opacity:0; transition:opacity .28s var(--ease);
}
.sector:hover{
  transform:translateY(-3px);
  border-color:transparent;
  box-shadow:0 22px 50px -32px rgba(0,100,230,.95);
}
.sector:hover::before{ opacity:1; }

.sector__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(44px,3.5vw,52px); height:clamp(44px,3.5vw,52px); flex:none;
  border-radius:13px; color:#57BAFF;
  background:linear-gradient(158deg, rgba(0,131,255,.3), rgba(0,58,175,.36));
  border:1px solid rgba(130,195,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:color .28s var(--ease), box-shadow .28s var(--ease);
}
.sector__ico svg{ width:clamp(22px,1.8vw,26px); height:auto; }
.sector:hover .sector__ico{ color:#8FD4FF; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px -12px rgba(0,130,255,.9); }

.sector__body{ display:block; min-width:0; }
.sector__top{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:9px;
}
.sector__name{
  font-size:clamp(1rem,1.1vw,1.0938rem); font-weight:600;
  letter-spacing:-.016em; color:var(--white); line-height:1.25;
}
.sector__size{
  display:inline-block; white-space:nowrap;
  padding:4px 11px; border-radius:100px;
  font-size:.75rem; font-weight:600; color:var(--cyan);
  background:rgba(1,187,250,.1); border:1px solid rgba(1,187,250,.26);
}
.sector__build{
  display:block; font-size:clamp(.8438rem,.92vw,.9063rem);
  color:#BECDDD; line-height:1.55;
}

/* ==========================================================================
   CAPABILITIES — index + circular icon chip, copy, arrow, and the supplied
   isometric illustration bleeding out of the card's bottom-right corner.
   ========================================================================== */
.capsec{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, #F3F7FD 0%, #EAF1FA 48%, #F4F8FD 100%);
}
/* soft wave forms behind the grid */
.capsec::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 42% at 4% 10%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    radial-gradient(52% 40% at 96% 86%, rgba(255,255,255,.85), rgba(255,255,255,0) 72%),
    radial-gradient(44% 34% at 88% 8%, rgba(0,121,250,.07), rgba(0,121,250,0) 76%);
}
/* dot grid, top right */
.capsec__dots{
  position:absolute; right:2.5%; top:6%; width:clamp(90px,10vw,150px); height:clamp(70px,8vw,110px);
  background-image:radial-gradient(rgba(0,121,250,.26) 1.4px, rgba(0,121,250,0) 1.5px);
  background-size:14px 14px; opacity:.55; pointer-events:none;
}
.capsec .wrap{ position:relative; }

.capsec__head{
  display:grid; gap:clamp(16px,2.6vw,48px); align-items:start;
  grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(28px,3.2vw,44px);
}
@media (min-width:900px){ .capsec__head{ grid-template-columns:1.05fr .95fr; } }
.capsec__head h2{ font-size:clamp(1.8rem,3.1vw,2.9rem); line-height:1.08; }
.capsec__note{
  margin:0; font-size:clamp(.98rem,1.05vw,1.08rem); line-height:1.66; color:var(--text-mid);
  padding-left:clamp(16px,2vw,26px); border-left:1px solid var(--line);
}

.capgrid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(12px,1.3vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}

.capcard{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  min-height:clamp(290px,23vw,340px);
  padding:clamp(20px,1.9vw,26px);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(14,26,43,.04), 0 18px 36px -26px rgba(14,26,43,.3);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.capcard:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 5px rgba(14,26,43,.05), 0 30px 56px -28px rgba(0,80,200,.45);
}

/* the illustration bleeds out of the bottom-right corner */
.capcard__art{
  /* the supplied art is 3:2 with the subject centre-right, so it is sized to
     the full card width and pushed past the corner: that lands the saturated
     part inside the card and leaves the pale half bleeding off the edge. */
  position:absolute; z-index:-1; right:-14%; bottom:-10%;
  width:100%; pointer-events:none;
  -webkit-mask-image:linear-gradient(292deg, #000 60%, rgba(0,0,0,0) 92%);
          mask-image:linear-gradient(292deg, #000 60%, rgba(0,0,0,0) 92%);
  transition:transform .45s var(--ease);
}
.capcard__art img{ width:100%; height:auto; display:block; }
.capcard:hover .capcard__art{ transform:scale(1.05) translate(-1%,-2%); }

.capcard__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:clamp(18px,2vw,26px); }
.capcard__n{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.8125rem; font-weight:600; letter-spacing:.06em; color:var(--text-mid);
}
.capcard__n::after{ content:''; width:22px; height:1px; background:rgba(14,26,43,.22); }

/* circular icon chip, top right */
.capcard__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(44px,3.5vw,54px); height:clamp(44px,3.5vw,54px); flex:none;
  border-radius:50%; color:var(--blue);
  background:#fff; border:1px solid rgba(14,26,43,.07);
  box-shadow:0 2px 10px -4px rgba(14,26,43,.18);
  transition:color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.capcard__ico svg{ width:clamp(21px,1.7vw,25px); height:auto; }
.capcard:hover .capcard__ico{
  background:var(--grad-cta); color:#fff; border-color:transparent;
  box-shadow:0 10px 22px -10px rgba(0,80,200,.9);
}

.capcard__title{
  font-size:clamp(1.0313rem,1.25vw,1.1875rem); font-weight:600;
  letter-spacing:-.018em; color:var(--text); margin:0 0 10px; line-height:1.25;
}
.capcard__title a{ color:inherit; }
/* whole card is the hit area, but the link text stays meaningful */
.capcard__title a::after{ content:''; position:absolute; inset:0; z-index:3; }
.capcard:hover .capcard__title a{ color:var(--blue); }

.capcard__body{
  margin:0 0 clamp(18px,2vw,24px); max-width:30ch;
  font-size:clamp(.8125rem,.9vw,.8906rem); color:var(--text-mid); line-height:1.6;
}

/* circular arrow, bottom left */
.capcard__go{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none; margin-top:auto;
  border-radius:50%; color:var(--text);
  background:#fff; border:1px solid rgba(14,26,43,.1);
  box-shadow:0 2px 8px -4px rgba(14,26,43,.2);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.capcard__go svg{ width:17px; height:17px; }
.capcard:hover .capcard__go{
  background:var(--grad-cta); color:#fff; border-color:transparent; transform:translateX(3px);
}

@media (prefers-reduced-motion: reduce){
  .capcard, .capcard__art, .capcard__go, .capcard__ico{ transition:none; }
  .capcard:hover{ transform:none; }
  .capcard:hover .capcard__art{ transform:none; }
}

/* ==========================================================================
   STAGES — glass cards with a watermark numeral, icon tile and a progress bar
   that fills on hover. Used for the engagement stages and the Grow surfaces.
   ========================================================================== */
.stages{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(12px,1.3vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  counter-reset:stage;
}

.stage{
  position:relative; isolation:isolate;
  padding:clamp(22px,2.2vw,30px) clamp(20px,2vw,26px) clamp(24px,2.4vw,30px);
  border-radius:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* gradient rim, revealed on hover */
.stage::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(145deg, rgba(120,195,255,.6), rgba(120,195,255,0) 44%, rgba(1,187,250,.32));
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
          mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px; opacity:0; transition:opacity .3s var(--ease);
}
.stage:hover{ transform:translateY(-4px); border-color:transparent; box-shadow:0 26px 56px -34px rgba(0,100,230,.95); }
.stage:hover::before{ opacity:1; }

/* progress segment across the top of each card */
.stage__bar{
  position:absolute; left:0; right:0; top:0; height:2px; overflow:hidden;
  background:rgba(255,255,255,.09);
}
.stage__bar::after{
  content:''; position:absolute; inset:0; width:34%;
  background:linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow:0 0 12px rgba(1,187,250,.8);
  transition:width .55s var(--ease);
}
.stage:hover .stage__bar::after{ width:100%; }

/* big ghosted numeral, watermark only */
.stage__n{
  position:absolute; right:clamp(14px,1.4vw,20px); top:clamp(6px,.8vw,12px); z-index:-1;
  font-size:clamp(3.4rem,5vw,4.8rem); font-weight:700; line-height:1;
  letter-spacing:-.06em; color:rgba(255,255,255,.05); pointer-events:none;
}

.stage__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(44px,3.5vw,52px); height:clamp(44px,3.5vw,52px);
  border-radius:13px; margin-bottom:clamp(16px,1.8vw,22px);
  color:#57BAFF;
  background:linear-gradient(158deg, rgba(0,131,255,.3), rgba(0,58,175,.36));
  border:1px solid rgba(130,195,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:color .3s var(--ease), box-shadow .3s var(--ease);
}
.stage__ico svg{ width:clamp(22px,1.8vw,26px); height:auto; }
.stage:hover .stage__ico{ color:#8FD4FF; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px -12px rgba(0,130,255,.95); }

.stage__label{
  display:block; font-size:.6875rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); margin-bottom:9px;
}
.stage__title{
  font-size:clamp(1.15rem,1.5vw,1.35rem); font-weight:600;
  letter-spacing:-.02em; color:var(--white); margin:0 0 10px;
}
.stage__body{ margin:0; font-size:clamp(.8438rem,.92vw,.9063rem); color:#BECDDD; line-height:1.6; }

/* ==========================================================================
   SPLIT / PANEL
   ========================================================================== */
.split{ display:grid; gap:clamp(28px,4vw,60px); grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:920px){ .split{ grid-template-columns:1fr 1fr; } }

.checks{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px; }
.checks li{ position:relative; padding-left:26px; font-size:.9375rem; color:var(--text-mid); line-height:1.55; }
.checks li::before{
  content:''; position:absolute; left:0; top:.5em; width:9px; height:9px;
  border-left:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(-45deg) translateY(-1px);
}
.ink .checks li{ color:var(--text-inv-2); }
.ink .checks li::before{ border-color:var(--cyan); }

.panel{ position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,3vw,40px); }
.panel::before,.panel::after{ content:''; position:absolute; width:16px; height:16px; border:2px solid var(--blue); }
.panel::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.panel::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.ink .panel{ background:var(--ink-2); border-color:var(--line-inv); }
.ink .panel::before,.ink .panel::after{ border-color:var(--cyan); }

/* ==========================================================================
   WHERE WE WORK — copy + map on the left, four area cards on the right with
   the supplied isometric art bleeding in from each card's right edge.
   ========================================================================== */
.geosec{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #F7FAFE 0%, #EDF3FB 52%, #F6FAFE 100%);
}
.geosec::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 44% at 2% 6%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%),
    radial-gradient(54% 42% at 98% 92%, rgba(255,255,255,.9), rgba(255,255,255,0) 74%),
    radial-gradient(42% 32% at 86% 4%, rgba(0,121,250,.07), rgba(0,121,250,0) 78%);
}
.geosec__dots{
  position:absolute; left:1.5%; top:30%; width:clamp(80px,8vw,120px); height:clamp(70px,7vw,100px);
  background-image:radial-gradient(rgba(0,121,250,.22) 1.4px, rgba(0,121,250,0) 1.5px);
  background-size:14px 14px; opacity:.5; pointer-events:none;
}
.geosec .wrap{ position:relative; }

.geosec__grid{
  display:grid; gap:clamp(30px,3.4vw,54px); align-items:start;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:1000px){ .geosec__grid{ grid-template-columns:1fr 1.06fr; } }

.geosec__copy h2{ font-size:clamp(1.8rem,3.1vw,2.9rem); line-height:1.08; }
/* The map is a backdrop for the whole left column, not a block under the
   button: it is absolutely placed so it sits behind and to the right of the
   copy, exactly as in the design. The box is cropped to the landmass with
   object-fit/object-position so the source's empty margins do not push it
   out of place, and the radial mask dissolves its rectangular edge.
   (mix-blend-mode:multiply was tried and erases it — the art is too pale.) */
.geosec__copy{ position:relative; isolation:isolate; }
@media (min-width:1000px){ .geosec__copy{ min-height:clamp(520px,42vw,660px); } }

.geosec__map{
  position:absolute; z-index:-1; pointer-events:none;
  left:38%; top:26%; width:94%; aspect-ratio:1.16; overflow:hidden;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 50%, #000 68%, rgba(0,0,0,0) 99%);
          mask-image:radial-gradient(72% 72% at 50% 50%, #000 68%, rgba(0,0,0,0) 99%);
}
.geosec__map img{ width:100%; height:100%; display:block; object-fit:cover; object-position:39% 58%; }
@media (max-width:999px){
  .geosec__map{ position:relative; left:auto; top:auto; width:106%; margin:10px 0 0 -3%; aspect-ratio:1.4; }
}

/* --- the four area cards ------------------------------------------------ */
.geolist{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(12px,1.3vw,18px); }

.geocard{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.6vw,22px); align-items:center;
  padding:clamp(18px,1.8vw,24px) clamp(18px,1.8vw,24px) clamp(18px,1.8vw,24px) clamp(16px,1.6vw,22px);
  border-radius:18px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(14,26,43,.04), 0 18px 36px -26px rgba(14,26,43,.3);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.geocard:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 5px rgba(14,26,43,.05), 0 28px 52px -28px rgba(0,80,200,.42);
}

/* art bleeds in from the right, behind the arrow */
.geocard__art{
  position:absolute; z-index:-1; right:-10%; top:50%; width:58%;
  transform:translateY(-50%); pointer-events:none;
  -webkit-mask-image:linear-gradient(270deg, #000 42%, rgba(0,0,0,0) 94%);
          mask-image:linear-gradient(270deg, #000 42%, rgba(0,0,0,0) 94%);
  transition:transform .45s var(--ease);
}
.geocard__art img{ width:100%; height:auto; display:block; }
.geocard:hover .geocard__art{ transform:translateY(-50%) scale(1.05); }

/* soft neumorphic ring, as in the design */
.geocard__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(54px,4.4vw,68px); height:clamp(54px,4.4vw,68px); flex:none;
  border-radius:50%; color:var(--blue);
  background:linear-gradient(145deg, #FFFFFF, #EDF3FB);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 6px 14px -8px rgba(14,26,43,.3),
    inset 0 0 0 6px rgba(255,255,255,.75),
    inset 0 2px 4px rgba(14,26,43,.05);
  transition:color .3s var(--ease), box-shadow .3s var(--ease);
}
.geocard__ico svg{ width:clamp(24px,2vw,28px); height:auto; }
.geocard:hover .geocard__ico{
  color:var(--deep);
  box-shadow:0 10px 22px -10px rgba(0,80,200,.5), inset 0 0 0 6px rgba(255,255,255,.9), inset 0 2px 4px rgba(14,26,43,.05);
}

.geocard__body{ min-width:0; }
.geocard__n{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:5px;
  font-size:.75rem; font-weight:600; letter-spacing:.14em; color:var(--text-mid);
}
.geocard__n::after{ content:''; width:20px; height:1px; background:rgba(14,26,43,.22); }
.geocard__title{
  font-size:clamp(1.0313rem,1.25vw,1.1875rem); font-weight:600;
  letter-spacing:-.018em; color:var(--text); margin:0 0 6px; line-height:1.25;
}
.geocard__text{
  margin:0; max-width:34ch;
  font-size:clamp(.8125rem,.9vw,.8906rem); color:var(--text-mid); line-height:1.55;
}


@media (max-width:600px){
  .geocard{ grid-template-columns:auto minmax(0,1fr); }
  .geocard__art{ width:70%; right:-18%; }
}
@media (prefers-reduced-motion: reduce){
  .geocard, .geocard__art, .geocard__ico{ transition:none; }
  .geocard:hover{ transform:none; }
  .geocard:hover .geocard__art{ transform:translateY(-50%); }
}

/* ==========================================================================
   GOLDEN TRIANGLE IN NUMBERS — sourced figures, each carrying its attribution
   ========================================================================== */
.statsec{ position:relative; overflow:hidden; background:var(--ink); color:var(--text-inv); }
.statsec::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(0,121,250,.2), rgba(0,121,250,0) 76%),
    radial-gradient(56% 48% at 100% 100%, rgba(1,187,250,.14), rgba(1,187,250,0) 78%);
}
.statsec .wrap{ position:relative; }
.statsec h2{ color:var(--white); }

.stats{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(12px,1.3vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.stat{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(20px,2vw,28px);
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.1);
  transition:border-color .28s var(--ease), transform .28s var(--ease);
}
.stat:hover{ transform:translateY(-3px); border-color:rgba(1,187,250,.4); }
.stat__fig{
  display:block; font-size:clamp(2rem,3.2vw,2.9rem); font-weight:700;
  letter-spacing:-.04em; line-height:1; margin-bottom:10px;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.06em;
}
.stat__label{
  display:block; font-size:.6875rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:12px;
}
.stat__note{ display:block; font-size:clamp(.8438rem,.92vw,.9063rem); color:#BECDDD; line-height:1.6; margin-bottom:14px; }
.stat__src{
  display:inline-block; margin-top:auto; align-self:flex-start;
  padding:4px 10px; border-radius:100px;
  font-size:.6875rem; font-weight:600; letter-spacing:.06em;
  color:var(--text-inv-2); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.statsec__foot{
  margin:clamp(22px,2.6vw,32px) 0 0; max-width:88ch;
  font-size:.8438rem; line-height:1.65; color:var(--text-inv-2);
}
.statsec__foot cite{ font-style:italic; color:#BECDDD; }

/* --- stats variants used on the About and Contact pages ----------------- */
.stats--two{ grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.stats--one{ grid-template-columns:minmax(0,1fr); }
.stat__fig--sm{
  font-size:clamp(1.05rem,1.4vw,1.25rem); font-weight:600; letter-spacing:-.018em;
  line-height:1.3; margin-bottom:8px;
}
.stat__fig--sm a{ color:inherit; }
.stat__fig--sm a:hover{ opacity:.85; }
.stats--one .stat,
.stats--two .stat{ padding:clamp(18px,1.8vw,24px); }

/* light-background variant: the About/Contact pages are not on ink */
.section:not(.ink):not(.statsec) .stat{
  background:rgba(255,255,255,.78);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(14,26,43,.04), 0 16px 32px -24px rgba(14,26,43,.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.section:not(.ink):not(.statsec) .stat:hover{ border-color:rgba(0,121,250,.35); }
.section:not(.ink):not(.statsec) .stat__label{ color:var(--blue-text); }
.section:not(.ink):not(.statsec) .stat__fig{
  background:var(--grad-cta); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section:not(.ink):not(.statsec) .stat__note{ color:var(--text-mid); }

/* --- contact form in a premium glass card ------------------------------- */
.formcard{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(24px,2.6vw,36px);
  border-radius:18px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(14,26,43,.04), 0 26px 52px -30px rgba(14,26,43,.34);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.formcard::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(145deg, rgba(0,121,250,.45), rgba(0,121,250,0) 48%, rgba(1,187,250,.32));
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
          mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1px;
}
.formcard__bar{
  position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--deep), var(--blue), var(--cyan));
}
.formcard h3{ margin-top:4px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ border-top:1px solid var(--line); max-width:920px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font-size:1.0313rem; font-weight:600; letter-spacing:-.012em; line-height:1.4; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:8px; top:27px; width:9px; height:9px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(45deg); transition:transform .28s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:31px; }
.faq details p{ padding:0 44px 22px 0; font-size:.9375rem; color:var(--text-mid); line-height:1.66; max-width:72ch; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.band{ position:relative; background:var(--ink); color:var(--text-inv); overflow:hidden; }
.band::before{ content:''; position:absolute; inset:0; background:radial-gradient(72% 130% at 100% 0%, rgba(0,121,250,.26), rgba(0,121,250,0) 62%); }
.band .wrap{ position:relative; }
.band__grid{ display:grid; gap:clamp(22px,3vw,48px); align-items:center; grid-template-columns:minmax(0,1fr); }
@media (min-width:880px){ .band__grid{ grid-template-columns:1.3fr auto; } }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form{ display:grid; gap:16px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:.75rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-mid); }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:.9375rem; color:var(--text);
  padding:12px 14px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ min-height:132px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--blue); box-shadow:0 0 0 3px var(--tint); }
.field--2{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:560px){ .field--2{ grid-template-columns:1fr 1fr; } }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__note{ font-size:.75rem; color:var(--text-mid); line-height:1.55; }
.form-msg{ padding:13px 15px; border-radius:var(--r); font-size:.875rem; border:1px solid; }
.form-msg--ok{ background:rgba(20,140,95,.08); border-color:rgba(20,140,95,.35); color:#136b46; }
.form-msg--bad{ background:rgba(190,60,50,.07); border-color:rgba(190,60,50,.32); color:#a33328; }

/* ==========================================================================
   INNER PAGE HEAD
   ========================================================================== */
.phead{ position:relative; background:var(--ink); color:var(--text-inv); overflow:hidden; }
.phead::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:74px 100%;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent);
          mask-image:linear-gradient(to bottom, #000, transparent);
}
.phead::after{
  content:''; position:absolute; right:-6%; top:-40%; width:46%; height:180%;
  background:radial-gradient(circle at 50% 50%, rgba(0,121,250,.2), rgba(0,121,250,0) 64%);
}
.phead .wrap{
  position:relative; z-index:1;
  padding-top:calc(var(--head-h) + clamp(28px,3.6vw,50px));
  padding-bottom:clamp(46px,6vw,82px);
}
.phead h1{ margin-bottom:16px; max-width:20ch; }
.phead .lede{ max-width:58ch; }
.crumbs{ font-size:.75rem; color:var(--text-inv-2); margin-bottom:20px; letter-spacing:.02em; }
.crumbs a:hover{ color:var(--cyan); }
.crumbs span{ margin-inline:7px; opacity:.5; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--ink); color:var(--text-inv-2); border-top:1px solid var(--line-inv-2); }
.foot__top{ display:grid; gap:clamp(28px,3.4vw,44px); grid-template-columns:minmax(0,1fr); padding-block:clamp(44px,5vw,68px); }
@media (min-width:760px){ .foot__top{ grid-template-columns:1.5fr 1fr 1fr; } }
@media (min-width:1040px){ .foot__top{ grid-template-columns:1.7fr 1fr 1fr 1.1fr; } }
.foot h4{ font-size:.688rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--white); margin-bottom:16px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot a{ font-size:.875rem; color:var(--text-inv-2); transition:color .2s var(--ease); }
.foot a:hover{ color:var(--cyan); }
.foot__blurb{ font-size:.875rem; line-height:1.66; max-width:38ch; margin:18px 0 0; }
.foot .brand img{ height:56px; }
.foot__bot{ display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center; border-top:1px solid var(--line-inv-2); padding-block:20px; font-size:.75rem; }
.foot__bot p{ margin:0; }

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--blue-text); color:#fff; padding:11px 18px; font-weight:600; font-size:.875rem; }
.skip:focus{ left:8px; top:8px; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* Reveal on scroll — only ever applied when JS is running. */
.js .reveal{ opacity:0; transform:translateY(14px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1 !important; transform:none !important; } }









































/* ==========================================================================
   SERVICE PAGES — added for /services/ and the 18 service pages.
   Six new components; everything else on those pages reuses the homepage kit
   (.checks, .grid/.card, .stages, .faq, .band, .stats, .panel).
   ========================================================================== */

/* The service hero carries a longer headline than .phead was sized for. */
.phead--svc h1{ max-width:26ch; }
.phead--svc .lede{ max-width:64ch; }
.phead__c{ position:relative; z-index:2; min-width:0; }

/* --- full-bleed hero artwork ---------------------------------------------
   The supplied image is composed with an empty dark left half and the GTX
   scene on the right, so the copy occupies the left column and the
   photograph itself is the right-hand visual. On wide screens the copy is
   capped so it never runs under the artwork. */
.phead--img{ isolation:isolate; }
.phead__bg{ position:absolute; inset:0; z-index:0; display:block; }
.phead__bg img{
  width:100%; height:100%; object-fit:cover; object-position:62% 50%;
}
/* The flat-ink decorations fight a photograph; the veil replaces them. */
.phead--img::before,
.phead--img::after{ display:none; }

/* Measured, not eyeballed. The copy column is capped so no text reaches the
   glowing hexagon, and the ramp then holds a high alpha across the copy and
   falls away before the artwork. Both numbers were solved against the actual
   image pixels: the brightest pixel under each text element was sampled and
   the alpha required to clear its AA target computed from it.
   Every stop is the ink colour at decreasing alpha — never bare
   `transparent`, which interpolates through transparent black and leaves a
   muddy band across the middle. */
.phead__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(6,17,35,.95) 0%,
      rgba(6,17,35,.93) 40%,
      rgba(6,17,35,.86) 52%,
      rgba(6,17,35,.44) 66%,
      rgba(6,17,35,.20) 82%,
      rgba(6,17,35,.13) 100%),
    linear-gradient(180deg,
      rgba(6,17,35,.70) 0%,
      rgba(6,17,35,.13) 26%,
      rgba(6,17,35,.10) 62%,
      rgba(6,17,35,.56) 100%);
}
/* Below the two-column breakpoint the copy sits over the whole frame, so the
   veil becomes an even wash rather than a left-weighted ramp. */
@media (max-width:1039px){
  .phead__bg img{ object-position:72% 50%; }
  .phead__veil{
    background:
      linear-gradient(90deg, rgba(6,17,35,.93) 0%, rgba(6,17,35,.86) 60%, rgba(6,17,35,.78) 100%),
      linear-gradient(180deg, rgba(6,17,35,.6) 0%, rgba(6,17,35,.3) 40%, rgba(6,17,35,.62) 100%);
  }
}
/* The mockup sets a specific three-line headline. Natural wrapping split the
   gradient phrase across two lines, so the breaks are explicit -- but only at
   the width where the two-column treatment applies. Below that the headline
   wraps normally, as everywhere else on the site. */
.br-lg{ display:none; }
@media (min-width:1040px){ .br-lg{ display:inline; } }

/* Capped so the headline breaks to three lines as in the mockup AND so no
   text reaches the bright hexagon. Both were solved from the image pixels. */
@media (min-width:1040px){
  .phead--img .phead__c{ max-width:min(52%, 620px); }
}


/* --- in-page nav ----------------------------------------------------------
   A floating pill, centred, with an icon per item, hairline dividers, count
   chips and an active tab that carries a blue underline. Sticky beneath the
   fixed header; --onthis-h is measured by site.js and fed into the global
   [id] scroll-margin, so a jump never lands behind this bar. */
/* The strip behind the pill is gone: only the pill floats, so the content
   scrolling underneath stays visible through it. That is what makes it read
   as glass rather than as a slab. */
.onthis{
  position:sticky; top:var(--head-h); z-index:40;
  padding-block:clamp(9px,1.1vw,14px);
  pointer-events:none;
}
.onthis .wrap{ display:flex; justify-content:center; }
.onthis__row{
  pointer-events:auto;
  display:inline-flex; align-items:stretch; gap:2px;
  max-width:100%; padding:7px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  -webkit-backdrop-filter:blur(22px) saturate(190%) brightness(1.06);
  backdrop-filter:blur(22px) saturate(190%) brightness(1.06);
  box-shadow:
    0 1px 2px rgba(14,26,43,.05),
    0 16px 40px -22px rgba(14,26,43,.6),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(14,26,43,.04);
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}

/* Over the dark sections the pill flips to dark glass with light text, rather
   than sitting there as a white slab. site.js toggles .is-ink from the
   geometry of the ink sections, so no backdrop guessing. */
.onthis.is-ink .onthis__row{
  background:rgba(10,25,46,.46);
  border-color:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(24px) saturate(185%) brightness(.8);
  backdrop-filter:blur(24px) saturate(185%) brightness(.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 2px rgba(0,0,0,.2),
    0 20px 46px -24px rgba(0,0,0,.95);
}
.onthis.is-ink .onthis__row a{ color:rgba(255,255,255,.82); }
.onthis.is-ink .onthis__row a:hover{ color:#fff; background:rgba(255,255,255,.11); }
.onthis.is-ink .onthis__i{ color:#A7DCFF; opacity:.9; }
.onthis.is-ink .onthis__row a + a::before{ background:rgba(255,255,255,.18); }
.onthis.is-ink .onthis__n{ background:rgba(1,187,250,.22); color:#BDEBFF; }
.onthis.is-ink .onthis__row a.is-active{
  color:#fff; background:rgba(255,255,255,.15);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.onthis.is-ink .onthis__row a.is-active .onthis__i{ color:#BDEBFF; opacity:1; }
.onthis.is-ink .onthis__row a.is-active .onthis__n{ background:rgba(1,187,250,.32); color:#fff; }
.onthis.is-ink .onthis__row a.is-active::after{
  background-image:linear-gradient(90deg,#fff,#9BE2FF);
}
.onthis__row::-webkit-scrollbar{ display:none; }

.onthis__row a{
  position:relative; flex:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px clamp(10px,.95vw,14px);
  border-radius:999px; white-space:nowrap;
  font-size:.875rem; font-weight:500; letter-spacing:-.006em;
  color:var(--text-mid);
  transition:color .22s var(--ease), background .22s var(--ease);
}
/* hairline between items, suppressed either side of the active tab so the
   filled chip never sits against a rule */
.onthis__row a + a::before{
  content:''; position:absolute; left:-2px; top:50%;
  width:1px; height:19px; margin-top:-9.5px;
  background:rgba(14,26,43,.11);
}
.onthis__row a.is-active + a::before,
.onthis__row a.is-active::before{ display:none; }

.onthis__i{
  flex:none; width:18px; height:18px; display:inline-flex;
  align-items:center; justify-content:center;
  color:var(--ink-3); opacity:.72;
  transition:color .22s var(--ease), opacity .22s var(--ease);
}
.onthis__i svg{ width:100%; height:100%; display:block; }

.onthis__n{
  flex:none; font-style:normal;
  min-width:20px; height:20px; padding-inline:5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:rgba(0,121,250,.11);
  color:var(--blue-text); font-size:.75rem; font-weight:600;
  transition:background .22s var(--ease);
}

.onthis__row a:hover{ color:var(--text); background:rgba(14,26,43,.035); }
.onthis__row a:hover .onthis__i{ opacity:1; color:var(--blue-text); }

.onthis__row a.is-active{
  color:var(--blue-text); font-weight:600;
  background:#fff;
  box-shadow:0 1px 2px rgba(14,26,43,.05), 0 6px 16px -10px rgba(0,80,200,.5);
}
.onthis__row a.is-active .onthis__i{ color:var(--blue); opacity:1; }
.onthis__row a.is-active .onthis__n{ background:rgba(0,121,250,.17); }
/* the tab underline, sitting on the pill's inner edge */
.onthis__row a.is-active::after{
  content:''; position:absolute; left:clamp(10px,.95vw,14px);
  right:clamp(10px,.95vw,14px); bottom:-7px; height:3px;
  border-radius:3px; background-image:var(--grad-cta);
}

@media (max-width:620px){
  /* the pill keeps the page gutter so it never runs to the screen edge, and
     scrolls inside itself */
  .onthis__row{ padding:6px; }
  .onthis__row a{ font-size:.8125rem; padding-inline:11px; }
}
@media (prefers-reduced-motion: reduce){
  .onthis__row a, .onthis__i, .onthis__n{ transition:none; }
}

/* --- direct-answer block -------------------------------------------------
   The one passage on each page written to be lifted whole, so it is given
   its own surface rather than buried in a column of body copy. */
.answer{
  position:relative; max-width:880px; margin-inline:auto;
  padding:clamp(26px,3.2vw,46px) clamp(22px,2.8vw,42px);
  background:var(--white); border-radius:20px;
  box-shadow:0 26px 64px -44px rgba(6,17,35,.46);
}
/* gradient rim: two masks, the inner one excluded, leaves a 1px edge */
.answer::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  padding:1px; background:var(--grad); pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.answer__q{
  display:flex; align-items:center; gap:10px;
  margin:0 0 clamp(14px,1.6vw,20px);
  font-size:.75rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--blue);
}
.answer__q::before{
  content:''; flex:none; width:20px; height:2px;
  background-image:var(--grad); border-radius:2px;
}
.answer__a{
  margin:0; font-size:clamp(1.0313rem,1.45vw,1.3125rem);
  line-height:1.56; letter-spacing:-.012em; color:var(--text);
}
.answer__pts{
  list-style:none; margin:clamp(20px,2.4vw,28px) 0 0; padding:0;
  display:grid; gap:11px;
  border-top:1px solid var(--line-soft); padding-top:clamp(18px,2vw,24px);
}
.answer__pts li{
  position:relative; padding-left:27px;
  font-size:.9063rem; color:var(--text-mid); line-height:1.55;
}
.answer__pts li::before{
  content:''; position:absolute; left:0; top:.45em;
  width:13px; height:13px; border-radius:50%;
  background-image:var(--grad);
}
.answer__pts li::after{
  content:''; position:absolute; left:3.6px; top:calc(.45em + 4.4px);
  width:5.4px; height:3px; border-left:1.6px solid #fff;
  border-bottom:1.6px solid #fff; transform:rotate(-45deg);
}

/* --- deliverables: numbered editorial rows ------------------------------- */
.oblist{
  list-style:none; margin:0; padding:0; display:grid;
  border-top:1px solid var(--line);
}
.ob{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.6vw,40px); align-items:start;
  padding-block:clamp(20px,2.4vw,32px);
  border-bottom:1px solid var(--line);
}
.ob__n{
  font-size:clamp(1.375rem,2.5vw,2.25rem); font-weight:600;
  letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums;
  background-image:linear-gradient(115deg,#0030A1,#0057D6 55%,#0079FA);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ob__c{ display:block; min-width:0; }
.ob__t{ margin:0 0 7px; font-size:clamp(1.0313rem,1.25vw,1.1875rem); }
.ob__b{
  margin:0; font-size:clamp(.875rem,.96vw,.9375rem);
  color:var(--text-mid); line-height:1.66; max-width:68ch;
}

/* --- technology chips ----------------------------------------------------- */
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px 9px 12px;
  background:var(--white); border:1px solid var(--line);
  border-radius:999px; font-size:.875rem; font-weight:500;
  color:var(--text); transition:border-color .2s var(--ease);
}
.chip:hover{ border-color:rgba(0,121,250,.45); }
.chip__i{
  flex:none; width:17px; height:17px; color:var(--blue);
  display:inline-flex; align-items:center; justify-content:center;
}
.chip__i svg{ width:100%; height:100%; display:block; }

/* --- service cards (hub groups + related services) -----------------------
   Glass icon tile, number with a rule running off it, then title, body and an
   Explore affordance. One component for both places it appears. */
.relgrid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,292px),1fr));
}
.relcard{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  padding:clamp(22px,2.3vw,30px);
  background:linear-gradient(170deg, rgba(255,255,255,.96), rgba(248,251,255,.88));
  border:1px solid rgba(14,26,43,.085);
  border-radius:clamp(16px,1.5vw,20px);
  box-shadow:0 1px 2px rgba(14,26,43,.03), 0 18px 40px -32px rgba(14,26,43,.5);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.relcard:hover{
  transform:translateY(-4px); border-color:rgba(0,121,250,.34);
  box-shadow:0 1px 2px rgba(14,26,43,.04), 0 26px 52px -30px rgba(0,80,200,.55);
}

/* icon tile + number + rule */
.relcard__top{
  display:flex; align-items:center; gap:clamp(13px,1.3vw,18px);
  margin-bottom:clamp(17px,1.9vw,23px);
}
.relcard__ico{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:clamp(52px,4.6vw,64px); height:clamp(52px,4.6vw,64px);
  border-radius:clamp(15px,1.4vw,19px);
  background:linear-gradient(150deg, rgba(214,232,255,.95), rgba(241,247,255,.7));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 2px rgba(0,80,200,.07),
    0 7px 18px -12px rgba(0,80,200,.6);
  color:var(--blue);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.relcard__ico svg{ width:clamp(27px,2.4vw,33px); height:auto; display:block; }
/* the duotone glyphs carry their own mass, so they take a slightly
   heavier stroke than the flat outlines used elsewhere */
.relcard__ico svg[stroke-width]{ stroke-width:1.9; }
/* Hover deepens the glass rather than flooding it with the gradient. The
   flood left a pale seam at the top-left corner, because the tile's white
   inset highlight sat over the blue fill -- and it also washed out the
   duotone glyph, whose two tones both became white. */
.relcard:hover .relcard__ico{
  background-image:linear-gradient(150deg, rgba(188,218,255,.98), rgba(229,240,255,.82));
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 3px rgba(0,80,200,.11),
    0 11px 24px -12px rgba(0,80,200,.8);
  color:var(--blue-text);
}
.relcard__n{
  display:flex; align-items:center; gap:clamp(10px,1vw,14px);
  flex:1; min-width:0;
  font-size:.8125rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-mid);
  font-variant-numeric:tabular-nums;
}
.relcard__n::after{
  content:''; flex:1; height:1px; min-width:18px;
  background:linear-gradient(90deg, rgba(14,26,43,.18), rgba(14,26,43,0));
}

.relcard__t{
  margin:0 0 10px; font-size:clamp(1.0625rem,1.3vw,1.1875rem);
  letter-spacing:-.016em; transition:color .2s var(--ease);
}
.relcard__t a{ color:inherit; }
.relcard__t a::after{ content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; }
.relcard:hover .relcard__t a{ color:var(--blue-text); }
.relcard__b{
  margin:0 0 clamp(20px,2.2vw,26px); font-size:.875rem;
  color:var(--text-mid); line-height:1.66;
}

/* Explore affordance */
.relcard__go{
  margin-top:auto; display:inline-flex; align-items:center;
  gap:clamp(12px,1.2vw,16px);
}
.relcard__dot{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:clamp(38px,3.2vw,44px); height:clamp(38px,3.2vw,44px);
  border-radius:50%; border:1px solid rgba(14,26,43,.14);
  color:var(--ink); background:rgba(255,255,255,.7);
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.relcard__cta{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.875rem; font-weight:600; letter-spacing:-.006em;
  color:var(--text); transition:color .2s var(--ease), gap .3s var(--ease);
}
.relcard:hover .relcard__dot{
  background-image:var(--grad-cta); border-color:transparent;
  color:#fff; transform:translateX(3px);
}
.relcard:hover .relcard__cta{ color:var(--blue-text); gap:11px; }

@media (prefers-reduced-motion: reduce){
  .relcard, .relcard__dot, .relcard__ico, .relcard__cta{ transition:none; }
  .relcard:hover{ transform:none; }
  .relcard:hover .relcard__dot{ transform:none; }
}

/* --- hub pillar group header ---------------------------------------------
   Eyebrow, the pillar name at display size, a strapline whose tail carries
   the accent, then the blurb. No illustration: the mockup has none, and the
   cards below already carry the colour. */
.pgroup{ margin-bottom:clamp(28px,3.4vw,46px); max-width:72ch; }
.pgroup__h{
  margin:6px 0 0; font-size:clamp(2.4rem,5.2vw,4.1rem);
  line-height:1.02; letter-spacing:-.035em;
}
.pgroup__s{
  margin:clamp(8px,1vw,12px) 0 0;
  font-size:clamp(1.1875rem,2.2vw,1.875rem);
  line-height:1.22; letter-spacing:-.022em; font-weight:500;
  color:var(--text);
}
.pgroup__s span{ color:var(--blue-text); }
.pgroup__b{ margin-top:clamp(12px,1.3vw,16px); max-width:62ch; }

/* --- small print under the Golden Triangle cards ------------------------- */
.locnote{
  margin:clamp(22px,2.6vw,32px) 0 0;
  font-size:.8125rem; color:var(--text-mid); line-height:1.66;
  max-width:92ch;
}

/* Six scope cards want two rows of three, not four-then-two. */
@media (min-width:980px){
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* 11px uppercase micro-labels are legible on a desktop and genuinely small on
   a phone. One floor, applied to every label that sits at .688rem. */
@media (max-width:560px){
  .eyebrow,
  .foot h4,
  .stat__label,
  .hero__tag,
  .xcell__label,
  .relcard__k,
  .onthis__row a i{ font-size:.75rem; }
}

/* --- symptom cards on the dark section -----------------------------------
   These carry the same duotone glyphs as the service cards, so the icon
   language is one thing across the page. The 40px tile was sized for thin
   outlines; the duotone shapes need a little more room and a rounder tile. */
.ink .card__ico{
  width:clamp(44px,3.6vw,50px); height:clamp(44px,3.6vw,50px);
  border-radius:14px;
  background:linear-gradient(150deg, rgba(1,187,250,.2), rgba(1,187,250,.07));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  color:#6FD2FF;
}
.ink .card__ico svg{ width:clamp(23px,1.95vw,26px); height:auto; display:block; }
.ink .card:hover .card__ico{
  background-image:linear-gradient(150deg, rgba(1,187,250,.3), rgba(1,187,250,.12));
  color:#9BE2FF;
}

/* ==========================================================================
   LOCATION PAGES — the service x city grid, the city hubs and the areas index
   ========================================================================== */

/* the county-grouped location index on every service page. 35 cards would be
   ~2,700px of page; this keeps every location linked and scannable. */
.locgroups{
  display:grid; gap:clamp(16px,1.8vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,296px),1fr));
}
.locgroup__h{
  display:flex; align-items:center; gap:9px;
  margin:0 0 12px; font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-mid);
}
.locgroup__h i{
  font-style:normal; font-size:.6875rem; font-weight:600;
  min-width:20px; height:20px; padding-inline:5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--tint); color:var(--blue-text);
}

/* sibling-link columns on the service x city pages */
.linklist{ list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; }
.linklist li{ background:var(--white); }
.linklist a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px clamp(14px,1.5vw,18px);
  font-size:.9063rem; color:var(--text-mid);
  transition:background .2s var(--ease), color .2s var(--ease);
}
/* chevron drawn from borders rather than a glyph: no font dependency, and
   no unicode escape to get mangled on the way into the stylesheet */
.linklist a::after{
  content:''; flex:none; width:6px; height:6px;
  border-top:1.6px solid currentColor; border-right:1.6px solid currentColor;
  transform:rotate(45deg); opacity:.45;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.linklist a:hover{ background:var(--tint); color:var(--blue-text); }
.linklist a:hover::after{ opacity:1; transform:rotate(45deg) translate(1.5px,-1.5px); }
.linklist a b{ color:var(--text); font-weight:600; }

/* the full service x location index on the areas hub */
.matrix{ list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:var(--line-inv-2); border:1px solid var(--line-inv-2);
  border-radius:16px; overflow:hidden; }
.matrix li{
  background:var(--ink-2); padding:clamp(14px,1.5vw,18px) clamp(15px,1.7vw,22px);
  display:grid; gap:6px 20px; grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){
  .matrix li{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); align-items:baseline; }
}
.matrix li b{ font-size:.9375rem; font-weight:600; }
.matrix li b a{ color:var(--white); }
.matrix li b a:hover{ color:var(--cyan); }
.matrix li span{
  font-size:.8438rem; color:var(--text-inv-2); line-height:1.9;
}
.matrix li span a{ color:var(--text-inv-2); }
.matrix li span a:hover{ color:var(--cyan); }

/* ==========================================================================
   FIT TABLE, DELIVERABLES AND THE TESTIMONIAL SLIDER
   ========================================================================== */

/* the honest "worth doing when / probably not when" pair */
.fitgrid{
  display:grid; gap:clamp(14px,1.6vw,20px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){ .fitgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.fitcol{
  padding:clamp(22px,2.4vw,32px);
  background:var(--white); border:1px solid var(--line);
  border-radius:18px; position:relative; overflow:hidden;
}
.fitcol::before{
  content:''; position:absolute; inset:0 auto 0 0; width:3px;
}
.fitcol--yes::before{ background-image:var(--grad-cta); }
.fitcol--no::before{ background:rgba(14,26,43,.18); }
.fitcol__h{
  margin:0 0 clamp(14px,1.6vw,18px);
  font-size:clamp(1rem,1.15vw,1.125rem); letter-spacing:-.012em;
}
.fitlist{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.fitlist li{
  position:relative; padding-left:30px;
  font-size:.9375rem; color:var(--text-mid); line-height:1.58;
}
.fitlist li::before{
  content:''; position:absolute; left:0; top:.3em;
  width:17px; height:17px; border-radius:50%;
}
.fitlist--yes li::before{ background-image:var(--grad-cta); }
.fitlist--no li::before{ background:rgba(14,26,43,.1); border:1px solid rgba(14,26,43,.16); }
/* tick */
.fitlist--yes li::after{
  content:''; position:absolute; left:4.6px; top:calc(.3em + 5.4px);
  width:7px; height:3.6px; border-left:1.8px solid #fff;
  border-bottom:1.8px solid #fff; transform:rotate(-45deg);
}
/* cross */
.fitlist--no li::after{
  content:''; position:absolute; left:7.6px; top:calc(.3em + 4px);
  width:1.6px; height:9px; background:rgba(14,26,43,.42);
  box-shadow:0 0 0 0 transparent; transform:rotate(45deg);
}
.fitlist--no li{ color:var(--text-mid); }

/* --- testimonial slider --------------------------------------------------
   Renders only when data_testimonials has real entries. One slide at a time
   with scroll-snap, so it degrades to a swipeable row with no JS. */
.tsec{ background:var(--paper-2); }
.tslider{ position:relative; }
.ttrack{
  list-style:none; margin:0; padding:0;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:clamp(14px,1.8vw,24px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-behavior:smooth;
}
.ttrack::-webkit-scrollbar{ display:none; }
@media (min-width:980px){ .ttrack{ grid-auto-columns:minmax(0,calc(50% - 12px)); } }
.tcard{
  scroll-snap-align:start; min-width:0;
  display:flex; flex-direction:column;
  padding:clamp(26px,3vw,40px);
  background:var(--white); border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(14,26,43,.03), 0 18px 40px -32px rgba(14,26,43,.5);
}
.tcard__q{ display:block; color:var(--blue); opacity:.22; margin-bottom:10px; }
.tcard__t{ margin:0 0 clamp(18px,2vw,24px); }
.tcard__t p{
  margin:0; font-size:clamp(1rem,1.25vw,1.1875rem);
  line-height:1.6; letter-spacing:-.01em; color:var(--text);
}
.tcard__w{ margin-top:auto; display:block; }
.tcard__w b{ display:block; font-size:.9375rem; font-weight:600; color:var(--text); }
.tcard__w i{ display:block; font-style:normal; font-size:.8438rem; color:var(--text-mid); margin-top:2px; }

.tnav{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(12px,1.4vw,18px); margin-top:clamp(22px,2.4vw,30px);
}
.tbtn{
  flex:none; width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--line); color:var(--text);
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.tbtn:hover{ background-image:var(--grad-cta); border-color:transparent; color:#fff; }
.tbtn[disabled]{ opacity:.35; cursor:default; }
.tbtn[disabled]:hover{ background:var(--white); background-image:none; color:var(--text); border-color:var(--line); }
.tdots{ display:flex; gap:7px; }
.tdot{
  width:7px; height:7px; border-radius:50%; padding:0; cursor:pointer;
  background:rgba(14,26,43,.18); border:0;
  transition:background .25s var(--ease), width .25s var(--ease);
}
.tdot[aria-current="true"]{ width:22px; border-radius:999px; background-image:var(--grad-cta); }

@media (prefers-reduced-motion: reduce){
  .ttrack{ scroll-behavior:auto; }
  .tbtn, .tdot{ transition:none; }
}