/* ═══════════════════════════════════════════════════════════════════════════
   style-light.css — the site's light theme.

   Loaded last on all 485 pages that share style-v30.css and the _includes/
   header + footer. Every rule is scoped under `body.light`, so the theme is
   opt-in per page: a page without the class renders in the original dark
   palette, and removing the <link> reverts a page completely.

   §§1-17 cover the homepage. §§18-32 cover everything else — see the
   second banner further down for how the interior pages are organised.

   Strategy: style-v30.css is almost entirely token-driven, so redefining the
   --clr-* custom properties on body.light converts the bulk of every page
   for free. What remains is (a) hardcoded colours in the per-page inline
   <style> blocks, (b) inline style="" attributes, which beat any stylesheet
   and therefore need !important, and (c) the dark-mode idioms (glows,
   scrims, white-on-black hairlines) that need translating rather than
   recolouring.

   Dark anchors are deliberately preserved — the footer, the homepage's
   .cta-band and trust strip, and each interior page's closing CTA — so no
   page ends on nothing. Each re-scopes the original dark tokens locally,
   which is why white-on-dark text still works inside them.

   Contrast (measured, sRGB, against #FFFFFF unless noted):
     #0B1B2B text ............ 17.41:1   AA/AAA body
     #4A6480 muted ............ 6.13:1   AA body
     #0A6FA8 interactive ...... 5.45:1   AA body, links, buttons
     #08587F hover ............ 7.74:1
     #B45309 accent text ...... 5.02:1
     #079CEB large display .... 3.02:1   numerals/gradients ONLY
     #CE8508 large display .... 3.01:1
     #0FA976 large display .... 3.02:1
     #7F52FF large display .... 4.61:1
   The raw brand colours #21AEF8 (2.48:1), #F59E0B (2.15:1) and #10B981
   (2.54:1) fail even the 3:1 non-text floor on white, so they survive only
   as decorative fills where something else carries the meaning.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */

body.light{
  --clr-bg:          #FFFFFF;
  --clr-bg-2:        #F5F8FC;
  --clr-bg-card:     #FFFFFF;
  --clr-text:        #0B1B2B;
  --clr-text-muted:  #4A6480;
  --clr-border:      rgba(11,27,43,.10);
  --clr-primary:     #0A6FA8;
  --clr-primary-dk:  #08587F;
  --clr-accent:      #B45309;

  /* --clr-white means "text that contrasts the page", not literally white.
     .btn--white / .btn--outline-white are unused on this page, so remapping
     it is safe here and fixes .section-title / .hero__title in one move. */
  --clr-white:       #0B1B2B;

  /* legacy aliases used by per-page blocks */
  --clr-dark:        #FFFFFF;
  --clr-surface:     #F5F8FC;
  --clr-muted:       #4A6480;

  --shadow-card: 0 1px 2px rgba(11,27,43,.04), 0 8px 24px rgba(11,27,43,.06);
  --shadow-btn:  0 6px 18px -6px rgba(10,111,168,.45);

  /* display-only accents, pre-darkened to clear 3:1 on white */
  --brand-blue:   #079CEB;
  --brand-purple: #7F52FF;
  --brand-amber:  #CE8508;
  --brand-green:  #0FA976;

  color-scheme: light;
  background: #FFFFFF;
  color: var(--clr-text);
}

body.light ::selection{ background:rgba(10,111,168,.18); color:#0B1B2B; }

body.light .section--alt,
body.light .about-snapshot{ background:var(--clr-bg-2); }

body.light .section-title,
body.light .about-snapshot__answer strong,
body.light h1, body.light h2, body.light h3, body.light h4{ color:var(--clr-text); }
body.light .section-subtitle,
body.light .about-snapshot__answer{ color:var(--clr-text-muted); }

body.light .section-eyebrow{
  color:var(--clr-primary);
  background:rgba(10,111,168,.08);
  border-color:rgba(10,111,168,.22);
}

/* ── 2. Buttons ─────────────────────────────────────────────────────────── */

body.light .btn--primary{
  background:linear-gradient(120deg,#0A6FA8,#0C63C4);
  color:#FFFFFF;
  box-shadow:var(--shadow-btn);
}
body.light .btn--primary:hover{ background:linear-gradient(120deg,#08587F,#0A54A8); }
body.light .btn--outline{
  background:#FFFFFF;
  color:var(--clr-text);
  border-color:rgba(11,27,43,.18);
}
body.light .btn--outline:hover{
  background:#F5F8FC;
  border-color:rgba(10,111,168,.45);
  color:var(--clr-primary);
}

/* visible focus on white — the dark-theme rings disappear here */
body.light a:focus-visible,
body.light button:focus-visible,
body.light summary:focus-visible,
body.light input:focus-visible,
body.light textarea:focus-visible,
body.light select:focus-visible{
  outline:2px solid #0A6FA8;
  outline-offset:2px;
  border-radius:6px;
}

/* ── 3. Header / nav / mega menu ────────────────────────────────────────── */

body.light .header{ background:rgba(255,255,255,.86); backdrop-filter:blur(14px); }
body.light .header.scrolled{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 rgba(11,27,43,.08), 0 8px 28px rgba(11,27,43,.07);
}
/* Two independent scroll classes are in play: script.js toggles .scrolled,
   and a second inline script toggles .sh-stuck, whose dark glass carries
   !important. That one is what actually paints the scrolled navbar. */
body.light .header.sh-stuck{
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(11,27,43,.10)!important;
  box-shadow:0 10px 30px -18px rgba(11,27,43,.35);
}
/* The shipped logo is a near-white wordmark and vanishes on white, so the
   navy variant is swapped in from CSS and the shared header include stays
   untouched. Scoped to the HEADER only — the footer stays dark, so the
   original light wordmark is correct down there. */
body.light .header .logo img{ content:url('/assets/images/logo-dark.png'); }
body.light .footer .logo img{ content:normal; }

body.light .nav__link{ color:#33465E; }
body.light .nav__link:hover,
body.light .nav__link.active{ color:var(--clr-primary); background:rgba(10,111,168,.08); }

body.light .mega-menu{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.10);
  box-shadow:0 24px 60px -20px rgba(11,27,43,.20);
}
body.light .mega-menu a{ color:#33465E; }
body.light .mega-menu a:hover{ color:var(--clr-primary); background:rgba(10,111,168,.07); }
/* the include carries these inline, so they need !important */
body.light .mega-menu [style*="rgba(255,255,255,.08)"]{
  border-top-color:rgba(11,27,43,.10)!important;
}
body.light .mega-menu [style*="color:#21AEF8"]{ color:#0A6FA8!important; }

body.light .mobile-nav{ background:#FFFFFF; border-top:1px solid rgba(11,27,43,.10); }
body.light .mobile-nav a,
body.light .mobile-nav__toggle{ color:#22344B; }
body.light .hamburger span{ background:#0B1B2B; }

/* ── 4. Hero ────────────────────────────────────────────────────────────── */

/* Soft off-axis washes rather than a symmetrical glow — asymmetry is what
   keeps a light hero from looking like a stock template. */
body.light .hero{
  background:
    radial-gradient(58% 48% at 78% 6%,  rgba(33,174,248,.13), transparent 68%),
    radial-gradient(46% 42% at 12% 88%, rgba(127,82,255,.08), transparent 70%),
    radial-gradient(70% 60% at 45% 40%, rgba(255,255,255,.85), transparent 75%),
    linear-gradient(168deg,#FFFFFF 0%,#F4F8FD 58%,#EEF4FB 100%);
}
/* The graph-paper grid is removed outright rather than recoloured. On dark it
   read as depth; on white it reads as a template background, which is exactly
   the generic look this theme is meant to avoid. The hero now carries its
   interest through the gradient wash and the blurred orbs alone. */
body.light .hero::before{ display:none!important; }
/* .hero::after is a darkening scrim whose only job was keeping white text
   legible over the dark mesh. On white it is pure mud — remove it. */
body.light .hero::after{ display:none!important; }
body.light #sh-heroglow{ display:none!important; }
body.light #rv-hero-canvas{ display:none!important; }

/* the blurred orbs stay, but as pastel washes rather than neon glows */
body.light .hero .shape{ opacity:.16!important; filter:blur(90px)!important; }

body.light .hero__title{ color:var(--clr-text); text-shadow:none!important; }
body.light .hero__subtitle{ color:#3E5872!important; }
body.light .hero__subtitle strong{ color:var(--clr-text)!important; }

/* gradient headline: both stops darkened, or it disappears into the page */
body.light .text-gradient{
  background:linear-gradient(110deg,#0A6FA8 0%,#079CEB 30%,#7F52FF 62%,#079CEB 85%,#0A6FA8 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}

body.light .badge--pill{
  background:rgba(10,111,168,.08);
  border-color:rgba(10,111,168,.22);
  color:var(--clr-primary);
}

/* ── 5. Trust strip — a DARK band directly under the banner ─────────────
   This block used to sit inside the hero. It is now its own full-width strip
   below it, and it stays dark on purpose: it separates the banner from the
   page, and the Trustpilot/Clutch marks are supplied as light-on-dark assets,
   so they need no recolouring here. A third dark anchor alongside the CTA
   band and the footer. */

body.light .trust-strip{
  background:linear-gradient(140deg,#0B1421 0%,#12335A 60%,#2B2668 100%);
  padding:26px 0;
  position:relative;
  z-index:2;
}
/* the base rule gives this a card treatment (border, glass fill, drop
   shadow) that made sense floating in the hero; on its own band it should
   read as the band itself, not a panel inside one */
body.light .trust-strip .hero__trust{
  border:0!important;
  border-radius:0!important;
  background:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  margin:0!important;
  padding:0!important;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.25rem 2.5rem;
}
/* the numerals keep their original brand gradient — it was designed for a
   dark ground and still reads correctly here. Left untouched deliberately:
   a plain colour would not win anyway, since the base rule sets
   -webkit-text-fill-color:transparent. */
body.light .trust-strip .hero__trust-item span{ color:rgba(255,255,255,.72)!important; }
body.light .trust-strip .hero__trust-divider{
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.28),transparent)!important;
}
/* the catch-all in §15 would darken these inline colours; restated here,
   exactly as the CTA band and footer do */
body.light .trust-strip [style*="color:rgba(255,255,255"]{ color:rgba(255,255,255,.78)!important; }
body.light .trust-strip [style*="color:#fff"]{ color:#FFFFFF!important; }
body.light .trust-strip .hero__trust-item--clutch strong{ color:#FFFFFF!important; }
/* Trustpilot ships a white wordmark — correct as-is on this dark band */
body.light .trust-strip .hero__trust-item--tp img{ filter:none!important; }

@media (max-width:640px){
  body.light .trust-strip{ padding:20px 0; }
  body.light .trust-strip .hero__trust{ gap:1rem 1.5rem; }
  body.light .trust-strip .hero__trust-divider{ display:none; }
}

/* ── 6. Hero flow panel (.shv-*) ────────────────────────────────────────── */

body.light .shv-sys{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.10)!important;
  box-shadow:0 18px 48px -24px rgba(11,27,43,.28);
}
body.light .shv-sys__bar{ color:#7A8899; border-bottom-color:rgba(11,27,43,.08); }
/* the window-chrome label is set separately, at 40% of a near-white */
body.light .shv-sys__bar span{ color:#6B7C90!important; }
body.light .shv-sys__bar i{ background:rgba(11,27,43,.16); }
body.light .shv-node{
  background:#F7FAFD;
  border:1px solid rgba(11,27,43,.08);
}
body.light .shv-node__t{ color:var(--clr-text); }
body.light .shv-node__s{ color:var(--clr-text-muted); }
body.light .shv-node__ic{
  background:rgba(10,111,168,.10);
  border-color:rgba(10,111,168,.22);
  color:#0A6FA8;
}
body.light .shv-flow{ background:linear-gradient(180deg,rgba(10,111,168,.45),rgba(10,111,168,.12)); }
body.light .shv-node--out{
  background:rgba(15,169,118,.08);
  border-color:rgba(15,169,118,.30);
}
body.light .shv-node--out .shv-node__ic{
  background:rgba(15,169,118,.14);
  border-color:rgba(15,169,118,.32);
  color:#0C875E;
}

/* ── 7. Partners / tech pills ───────────────────────────────────────────── */

body.light .partners__label{ color:var(--clr-text-muted); }
body.light .tech-pill{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.10);
  color:#33465E;
  box-shadow:0 1px 2px rgba(11,27,43,.04);
}
body.light .tech-pill:hover{
  border-color:rgba(10,111,168,.35);
  color:var(--clr-primary);
}

/* ── 8. What We Do — stat band ──────────────────────────────────────────── */

/* the per-tile accents are inline custom properties, so overriding them
   needs !important; each is remapped to its contrast-safe equivalent */
body.light .about-snapshot__stat:nth-child(1){
  --a1:#079CEB!important; --a2:#0A6FA8!important; --gl:rgba(7,156,235,.14)!important; }
body.light .about-snapshot__stat:nth-child(2){
  --a1:#7F52FF!important; --a2:#6B3FE0!important; --gl:rgba(127,82,255,.13)!important; }
body.light .about-snapshot__stat:nth-child(3){
  --a1:#CE8508!important; --a2:#C2410C!important; --gl:rgba(206,133,8,.13)!important; }
body.light .about-snapshot__stat:nth-child(4){
  --a1:#0FA976!important; --a2:#0A6FA8!important; --gl:rgba(15,169,118,.13)!important; }

body.light .about-snapshot__stat{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.09);
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 30px -18px rgba(11,27,43,.30);
}
body.light .about-snapshot__stat:hover{
  border-color:rgba(11,27,43,.16);
  box-shadow:0 2px 4px rgba(11,27,43,.05), 0 20px 44px -20px rgba(11,27,43,.34);
}
/* the aurora and spotlight were glows against black; here they read as a
   faint tint, so they are dialled right down rather than deleted */
body.light .about-snapshot__stat::before{ opacity:.5; filter:blur(52px); }
body.light .about-snapshot__stat:hover::before{ opacity:.8; }
body.light .about-snapshot__stat::after{ background:radial-gradient(190px circle at var(--mx) var(--my),var(--gl),transparent 62%); }

body.light .about-snapshot__stat .shs-stat__ic{ color:#FFFFFF; }
body.light .about-snapshot__stat .shs-stat__lbl{ color:var(--clr-text-muted); }
body.light .about-snapshot__stat .shs-stat__stars{ color:rgba(11,27,43,.15); }
body.light .about-snapshot__stat .shs-stat__stars::after{ color:#CE8508; }

/* capability cards */
body.light .about-snapshot__list li{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.09);
  color:var(--clr-text);
  box-shadow:0 1px 2px rgba(11,27,43,.03);
}
body.light .about-snapshot__list li:hover{ border-color:rgba(10,111,168,.32); }
body.light .about-snapshot__list li::before{ background:linear-gradient(135deg,#079CEB,#7F52FF); }

/* facts strip — the base rules use !important, so these must too */
body.light .about-snapshot__fact{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.08)!important;
}
body.light .about-snapshot__fact dt{ color:#7A8899!important; }
body.light .about-snapshot__fact dd{ color:#33465E!important; }

/* ── 9. Services / cards / process / testimonials / FAQ ─────────────────── */

body.light .service-card{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.09);
  box-shadow:var(--shadow-card);
}
body.light .service-card:hover{
  border-color:rgba(10,111,168,.32);
  box-shadow:0 2px 6px rgba(11,27,43,.05), 0 22px 48px -22px rgba(11,27,43,.32);
}
body.light .service-card__title{ color:var(--clr-text); }
body.light .service-card__desc{ color:var(--clr-text-muted); }
body.light .service-card__link{ color:var(--clr-primary); }
body.light .service-card__link:hover{ color:#08587F; }
body.light .service-card__icon{ color:var(--clr-primary); }

body.light .faq-item{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.09);
  box-shadow:0 1px 2px rgba(11,27,43,.03);
}
body.light .faq-item summary{ color:var(--clr-text); }
body.light .faq-item[open]{ border-color:rgba(10,111,168,.30); }
body.light .faq-item p{ color:var(--clr-text-muted); }

body.light .testimonials{ background:var(--clr-bg-2); }
body.light .testimonial-card,
body.light .geo-card,
body.light .stat-card,
body.light .about__card{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.09);
  box-shadow:var(--shadow-card);
  color:var(--clr-text);
}

body.light .contact{
  background:
    radial-gradient(58% 50% at 82% 8%, rgba(127,82,255,.06), transparent 60%),
    radial-gradient(50% 50% at 6% 92%, rgba(33,174,248,.07), transparent 62%),
    #FFFFFF;
}
body.light input, body.light textarea, body.light select{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.16);
  color:var(--clr-text);
}
body.light input::placeholder, body.light textarea::placeholder{ color:#8B98A8; }

/* Book Your Free Strategy Call — styled entirely with inline attributes, so
   the panel and all three text levels have to be reached with !important. */
body.light #cal-cta{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.10)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 14px 36px -20px rgba(11,27,43,.30);
}
body.light #cal-cta h3{ color:#0B1B2B!important; }
body.light #cal-cta p{ color:#42586F!important; }
/* the "Powered by Cal.com" line is the quietest level, but still ≥4.5:1 */
body.light #cal-cta p:last-of-type{ color:#6B7C90!important; }
/* rgba(126,168,201,…) was a mid-blue that reads ~2.5:1 on white */
body.light [style*="rgba(126,168,201"]{ color:#42586F!important; }
body.light .contact__cal .cal-embed,
body.light #cal-inline{ background:#FFFFFF; border-radius:18px; }

/* ── 10. Dark anchors — CTA band + footer keep the original palette ─────── */

body.light .cta-band,
body.light .footer{
  --clr-bg:         #080E1A;
  --clr-bg-2:       #0C1424;
  --clr-bg-card:    #101E30;
  --clr-text:       #E6F2FF;
  --clr-text-muted: #7EA8C9;
  --clr-white:      #FFFFFF;
  --clr-primary:    #21AEF8;
  --clr-border:     rgba(33,174,248,.18);
  color:#E6F2FF;
}
body.light .cta-band{
  background:linear-gradient(140deg,#0B1421 0%,#12335A 55%,#3B2D77 100%);
  border-top:0;
  border-bottom:0;
}
body.light .cta-band .section-title,
body.light .cta-band__title{ color:#FFFFFF; }
body.light .cta-band__subtitle{ color:#B9D4EC; }
body.light .cta-band .btn--primary{
  background:linear-gradient(120deg,#21AEF8,#5B8DEF 55%,#7F52FF);
  color:#04101C;
}
/* .btn--outline resolves --clr-text, which the anchors re-scope to a LIGHT
   value — so the generic light-mode outline button would render white text
   on a white pill inside the dark band. Restated explicitly here. */
body.light .cta-band .btn--outline,
body.light .footer .btn--outline{
  background:transparent;
  color:#FFFFFF;
  border-color:rgba(255,255,255,.35);
}
body.light .cta-band .btn--outline:hover,
body.light .footer .btn--outline:hover{
  background:rgba(255,255,255,.10);
  color:#FFFFFF;
  border-color:rgba(255,255,255,.55);
}
body.light .footer{ background:#0B1421; border-top:1px solid rgba(255,255,255,.08); }
body.light .footer a{ color:rgba(255,255,255,.72); }
body.light .footer a:hover{ color:#7FD2FF; }

/* ── 11. Cookie banner ──────────────────────────────────────────────────── */

/* The outer element carries positioning only; __inner is the card. Written
   originally to correct style-refine-v31.css, which turned this into a corner
   card but left the white fill and square edge on the outer element. That file
   is gone, so above 860px this now renders as a full-width bar with the card
   inside it — still correct, just wider than the old corner treatment. */
body.light .cookie-banner{
  background:transparent;
  border-top:0;
  box-shadow:none;
  padding:0 16px 16px;
}
body.light .cookie-banner__inner{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.10);
  border-radius:18px;
  padding:22px 24px;
  box-shadow:0 2px 8px rgba(11,27,43,.06), 0 24px 60px -24px rgba(11,27,43,.38);
}
body.light .cookie-banner__text strong{ font-size:1rem; color:#0B1B2B; }
body.light .cookie-banner__text p{ color:#42586F; font-size:.88rem; }
body.light .cookie-banner__link{ color:var(--clr-primary); text-underline-offset:2px; }

body.light .cookie-banner__btn{ padding:11px 22px; border-radius:10px; font-weight:700; }
body.light .cookie-banner__btn--accept{
  background:linear-gradient(120deg,#0A6FA8,#0C63C4);
  color:#FFFFFF; border:1px solid transparent;
  box-shadow:0 8px 18px -8px rgba(10,111,168,.6);
}
body.light .cookie-banner__btn--decline{
  background:#FFFFFF; color:#33465E; border:1px solid rgba(11,27,43,.18);
}
body.light .cookie-banner__btn--decline:hover{ background:#F4F7FB; opacity:1; }
body.light .cookie-banner__btn--accept:hover{ opacity:1; filter:brightness(1.08); }

/* below 860px the refine layer leaves it as a full-width bar; give that the
   same card language rather than a hard-edged strip */
@media (max-width:859px){
  body.light .cookie-banner{ padding:0 12px 12px; }
  body.light .cookie-banner__inner{ padding:18px 18px; border-radius:16px; }
  body.light .cookie-banner__actions{ width:100%; }
  body.light .cookie-banner__btn{ flex:1 1 auto; }
}

/* ── 12. Remaining glass cards ──────────────────────────────────────────
   These all follow the same dark idiom — a translucent near-black fill over
   the page, with a white hairline and light text. On white the fill is
   invisible and the text disappears, so surface and text are converted
   together. Grouped rather than repeated: identical treatment throughout. */

body.light .tech-block,
body.light .qa-card,
body.light .ind-card,
body.light .cs-card,
body.light .art-card,
body.light .geo-c,
body.light .geo-stat,
body.light .wu-kpi,
body.light .about__feature,
body.light .about__stat-card,
body.light .process__card,
body.light .rv-card{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.09)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -18px rgba(11,27,43,.28);
}
body.light .tech-block:hover,
body.light .qa-card:hover,
body.light .ind-card:hover,
body.light .cs-card:hover,
body.light .art-card:hover,
body.light .geo-c:hover,
body.light .process__card:hover,
body.light .about__feature:hover,
body.light .rv-card:hover{ border-color:rgba(10,111,168,.30)!important; }

/* headings inside those cards */
body.light .tech-block__title,
body.light .qa-card__q,
body.light .ind-card__title,
body.light .cs-card__title,
body.light .art-card__title,
body.light .art-card__category,
body.light .geo-c__name,
body.light .rv-card__name,
body.light .faq .faq-cta__text strong,
body.light .faq .faq-item[open] summary,
body.light .faq .faq-item summary:hover{ color:#0B1B2B!important; }

/* body copy inside those cards */
body.light .tech-block__desc,
body.light .tech-more,
body.light .tech-more strong,
body.light .tech-block__footer,
body.light .qa-card__text,
body.light .ind-card__desc,
body.light .ind-card__tag,
body.light .cs-card__excerpt,
body.light .cs-card__metric-lbl,
body.light .cs-card__meta,
body.light .art-card__excerpt,
body.light .art-card__meta,
body.light .geo-stat__lbl,
body.light .geo-c__cities,
body.light .geo-c__list li,
body.light .rv-card__quote,
body.light .rv-card__role,
body.light .process__deliverables li,
body.light .about__text{ color:#42586F!important; }

body.light .process__deliverables{ border-top-color:rgba(11,27,43,.10)!important; }
body.light .faq .faq-cta{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.10)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -18px rgba(11,27,43,.26);
}
body.light .faq .faq-cta__text span{ color:#42586F!important; }
body.light .feature-check{ background:rgba(10,111,168,.12); color:#0A6FA8; }
body.light .qa-card::before{ color:#0A6FA8!important; }

/* KPI figures stay branded but darkened to clear 3:1 as large text */
body.light .wu-kpi strong,
body.light .about__stat-card strong,
body.light .geo-stat strong{ color:#0A6FA8!important; }

body.light .tech-logo-wall__item,
body.light .tech-logos-row__item{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.09)!important;
}
body.light .tech-logo-wall__item:hover::after,
body.light .tech-logos-row__item:hover::after{ color:#0B1B2B!important; }

body.light .process__num{
  background:linear-gradient(135deg,#079CEB,#7F52FF);
  color:#FFFFFF;
  border-color:transparent;
}
body.light .process__card-icon{ background:rgba(10,111,168,.10); color:#0A6FA8; }
body.light .rv-card__stars{ color:#CE8508; }
body.light .reviews-track::before,
body.light .reviews-track::after{ display:none!important; }  /* dark edge fades */

/* ── 13. Estimate modal (.shf-*) ────────────────────────────────────────── */

body.light .shf-panel{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.12)!important;
  box-shadow:0 30px 80px -30px rgba(11,27,43,.45);
}
body.light .shf-head h3{ color:#0B1B2B!important; }
body.light .shf-note,
body.light .shf-form label{ color:#42586F!important; }
body.light .shf-x{ color:#42586F!important; }
body.light .shf-x:hover{ color:#0B1B2B!important; background:rgba(11,27,43,.06); }
body.light .shf-form input,
body.light .shf-form select,
body.light .shf-form textarea{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.16)!important;
  color:#0B1B2B!important;
}
body.light .shf-cap-new{ background:rgba(10,111,168,.10)!important; color:#0A6FA8!important; }
body.light .shf-cap-new:hover{ background:rgba(10,111,168,.18)!important; }
body.light .float-icon{ color:#0A6FA8!important; }

/* ── 14. Comparison table (.wu-compare) ─────────────────────────────────── */

body.light .wu-compare{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.10)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -18px rgba(11,27,43,.26);
}
body.light .wu-compare__row{ border-top-color:rgba(11,27,43,.08)!important; }
body.light .wu-compare__row--head{
  background:linear-gradient(135deg,rgba(10,111,168,.08),rgba(127,82,255,.06))!important;
}
body.light .wu-compare__row:not(.wu-compare__row--head):hover{
  background:rgba(10,111,168,.04)!important;
}
body.light .wu-compare__label{ color:#22344B!important; }
body.light .wu-compare__row--head .wu-compare__label,
body.light .wu-compare__them{ color:#5C7387!important; }
body.light .wu-compare__us{
  background:linear-gradient(135deg,#0A6FA8,#7F52FF)!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
body.light .wu-cell--us{ color:#22344B!important; }
body.light .wu-cell--them{ color:#5C7387!important; }
body.light .wu-cell--us::after,
body.light .wu-cell--them::after{ color:#7A8899!important; }
body.light .wu-ic--yes{ color:#0C875E!important; }
body.light .wu-ic--no{ color:#B42318!important; }

/* ── 15. Inline style="" attributes ──────────────────────────────────────
   69 of them on this page, and an inline declaration outranks any normal
   stylesheet rule — so these need !important to reach. Caught by attribute
   substring rather than enumerated, then the two dark anchors re-assert
   their white text underneath (higher specificity, so they win). */

body.light [style*="color:#fff"],
body.light [style*="color:#FFF"],
body.light [style*="color: #fff"]{ color:#0B1B2B!important; }
body.light [style*="color:rgba(255,255,255"],
body.light [style*="color: rgba(255,255,255"]{ color:#42586F!important; }
body.light [style*="rgba(255,255,255,.08)"]{ border-color:rgba(11,27,43,.10)!important; }

/* dark anchors keep their light-on-dark inline colours */
body.light .cta-band [style*="color:#fff"],
body.light .footer [style*="color:#fff"],
body.light .cta-band [style*="color:#FFF"],
body.light .footer [style*="color:#FFF"]{ color:#FFFFFF!important; }
body.light .cta-band [style*="color:rgba(255,255,255"],
body.light .footer [style*="color:rgba(255,255,255"]{ color:rgba(255,255,255,.72)!important; }
body.light .footer [style*="rgba(255,255,255,.08)"]{ border-color:rgba(255,255,255,.08)!important; }

/* the specialist callout is styled entirely inline */
body.light .about__specialist-block{
  background:linear-gradient(135deg,rgba(10,111,168,.06) 0%,rgba(127,82,255,.05) 100%)!important;
  border:1px solid rgba(10,111,168,.20)!important;
}

/* ── 16. "What We Do" and "Why Choose Us" ───────────────────────────────
   Both sections were laid out as plain text with small flat boxes. They now
   borrow the stat band's language — white cards, a gradient icon chip, one
   accent per item, soft shadows and real breathing room — so the whole
   upper page reads as one system. CSS-only: no markup was rewritten. */

/* ---- shared: a gradient chip with a white tick, used in both sections ---- */
body.light .about-snapshot__list li::before,
body.light .feature-check{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"),
    linear-gradient(135deg,#079CEB,#7F52FF)!important;
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:14px,cover;
}

/* ---- What We Do: capability cards ---- */
body.light .about-snapshot__answer{ font-size:1.12rem; line-height:1.85; }
body.light .about-snapshot__list{ gap:16px; margin-top:30px; }
body.light .about-snapshot__list li{
  padding:22px 20px 20px 20px;
  border-radius:18px;
  font-size:1rem;
  font-weight:600;
  line-height:1.5;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s;
}
body.light .about-snapshot__list li::before{
  position:static;
  display:block;
  width:34px; height:34px;
  margin:0 0 14px;
  border-radius:11px;
  top:auto; left:auto;
}
body.light .about-snapshot__list li:hover{
  transform:translateY(-4px);
  border-color:rgba(10,111,168,.28)!important;
  box-shadow:0 2px 6px rgba(11,27,43,.05), 0 18px 40px -20px rgba(11,27,43,.30);
}

/* ---- What We Do: facts strip, from spec sheet to reference cards ---- */
body.light .about-snapshot__facts{ gap:16px; margin-top:52px; }
body.light .about-snapshot__fact{
  position:relative;
  padding:20px 22px 20px 24px!important;
  border-radius:16px!important;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s;
}
/* a hairline accent down the leading edge, so the grid reads as cards */
body.light .about-snapshot__fact::before{
  content:"";
  position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#079CEB,#7F52FF);
  opacity:.75;
}
body.light .about-snapshot__fact:hover{
  transform:translateY(-3px);
  border-color:rgba(10,111,168,.26)!important;
  box-shadow:0 2px 6px rgba(11,27,43,.05), 0 16px 34px -20px rgba(11,27,43,.28);
}
body.light .about-snapshot__fact dt{
  font-size:.7rem!important; letter-spacing:.12em; font-weight:700;
  color:#8194A8!important; margin-bottom:7px;
}
body.light .about-snapshot__fact dd{ font-size:.95rem!important; line-height:1.6; color:#22344B!important; }

/* ---- Why Choose Us: the specialist callout ---- */
body.light .about__specialist-block{
  position:relative;
  padding:26px 30px 26px 32px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(10,111,168,.055),rgba(127,82,255,.045))!important;
  border:1px solid rgba(10,111,168,.16)!important;
  overflow:hidden;
}
body.light .about__specialist-block::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#079CEB,#7F52FF);
}
body.light .about__specialist-block h3{ font-size:1.18rem!important; margin-bottom:12px!important; }
body.light .about__specialist-block p{ font-size:1rem!important; line-height:1.8!important; }

/* ---- Why Choose Us: feature cards ---- */
body.light #about .about__features{ gap:18px!important; margin-top:2.2rem!important; }
body.light .about__feature{
  display:flex; align-items:flex-start; gap:16px;
  padding:24px 24px 22px!important;
  border-radius:18px!important;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s;
}
body.light .about__feature:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 6px rgba(11,27,43,.05), 0 18px 40px -20px rgba(11,27,43,.30);
}
body.light .feature-check{
  width:34px!important; height:34px!important;
  border-radius:11px!important;
  flex-shrink:0;
  font-size:0!important;            /* the chip's tick is drawn, not typed */
  color:transparent!important;
  box-shadow:0 8px 18px -8px rgba(10,111,168,.55);
}
body.light .about__feature strong{
  display:block; font-size:1.02rem; color:#0B1B2B!important; margin-bottom:7px;
}
body.light .about__feature p{ font-size:.95rem!important; line-height:1.7!important; }

/* ---- Why Choose Us: KPI row, matched to the stat band ---- */
body.light .wu-kpis{ gap:16px!important; margin:2.8rem 0 .6rem!important; }
body.light .wu-kpi{
  padding:26px 16px!important;
  border-radius:18px!important;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s;
}
body.light .wu-kpi:hover{
  transform:translateY(-4px);
  border-color:rgba(10,111,168,.28)!important;
  box-shadow:0 2px 6px rgba(11,27,43,.05), 0 18px 40px -20px rgba(11,27,43,.30);
}
body.light .wu-kpi b{
  display:block;
  font-family:var(--font-head,inherit);
  font-size:clamp(1.9rem,2.7vw,2.5rem)!important;
  font-weight:800; line-height:1; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  background:linear-gradient(120deg,#079CEB,#7F52FF)!important;
  /* the !important shorthand above resets background-clip to border-box at
     the same priority, so these must be !important too or the numerals
     paint as solid gradient blocks instead of gradient text */
  -webkit-background-clip:text!important; background-clip:text!important;
  color:transparent!important; -webkit-text-fill-color:transparent!important;
}
body.light .wu-kpi span{
  display:block; margin-top:11px;
  font-size:.72rem!important; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#6B7C90!important;
}

/* ---- Why Choose Us: comparison table ---- */
body.light .wu-compare{ border-radius:20px!important; margin-top:2.6rem!important; }
/* the tinted lane eats horizontal room, so the middle column gets a little
   more of the split — otherwise two rows wrap and the grid goes ragged */
body.light .wu-compare__row{ padding:16px 24px!important; grid-template-columns:1.2fr 1.15fr .95fr!important; }
body.light .wu-compare__row--head{ padding:18px 24px!important; }
/* the SpiderHunts column is the point of the table, so it gets a tinted
   lane running the full height rather than sitting flush with the rest */
body.light .wu-compare__row > *:nth-child(2){
  background:linear-gradient(90deg,rgba(10,111,168,.055),rgba(127,82,255,.045));
  margin:-16px 0; padding:16px 14px;
}
body.light .wu-compare__row--head > *:nth-child(2){ margin:-18px 0; padding:18px 14px; }
body.light .wu-compare__us{ font-size:1.05rem!important; }
body.light .wu-compare__label{ font-size:.95rem!important; }

@media (max-width:900px){
  body.light .wu-compare__row > *:nth-child(2){ background:none; margin:0; padding:0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART TWO — THE REST OF THE SITE
   §§18-31 extend the theme from the homepage to the other 484 pages.

   Everything above this line was written for index.html. Everything below is
   the shared vocabulary: the .svc-* system (59 service / country / industry /
   case-study / city / guide pages), the blog article template (412 pages),
   the blog index and category pages, About, 404, the legal pages and the
   remaining one-offs.

   Three rules govern the translation, and they are the same three the
   homepage used:

     1. Surfaces invert, accents darken. A translucent white fill over black
        is invisible on white, so every glass card becomes a white card with
        a hairline border and a soft shadow. #21AEF8 is 2.48:1 on white and
        fails as text everywhere, so it becomes #0A6FA8 (5.45:1) wherever it
        carries meaning and #079CEB only where it is large display type.

     2. Closing CTAs stay dark. .cta-band, .svc-cta, .cta-section,
        .about-cta, .resources-cta and the footer keep the original palette,
        re-scoping the dark tokens locally. That is what stops a page of
        white sections ending on nothing.

     3. Page rhythm is preserved, not flattened. Where a section alternated
        black / near-black to mark a change of subject, it now alternates
        #FFFFFF / #F5F8FC / #EEF4FB. Three tiers of light do the job two
        tiers of dark used to.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 18. Sitewide token safety ──────────────────────────────────────────
   --clr-white is remapped in §1 to mean "text that contrasts the page",
   which is right for the ~25 headline rules that use it and wrong for the
   four places style-v30.css uses it as an actual white. Those are restated
   here. .btn--white sits inside a dark anchor on all 33 pages that use it,
   so §21 restores it there; this is the fallback for any that escape. */

body.light{ --bg:#FFFFFF; --bg2:#F5F8FC; }

body.light .btn--white{
  background:linear-gradient(120deg,#0A6FA8,#0C63C4);
  color:#FFFFFF;
  box-shadow:var(--shadow-btn);
}
body.light .btn--white:hover{ background:linear-gradient(120deg,#08587F,#0A54A8); color:#FFFFFF; }
/* literal, not var(--clr-text) — inside a dark anchor that token is a light
   value, which would paint white text on the white pill */
body.light .btn--outline-white,
body.light .btn--white-outline{
  background:#FFFFFF!important;
  color:#0B1B2B!important;
  border:1px solid rgba(11,27,43,.18)!important;
}
body.light .btn--outline-white:hover,
body.light .btn--white-outline:hover{
  background:#F5F8FC!important;
  border-color:rgba(10,111,168,.45)!important;
  color:var(--clr-primary)!important;
}

/* ── 19. The .svc-* system ──────────────────────────────────────────────
   One block of overrides covers 59 pages: every service page, every country
   page, the five industry pages, the five case studies, the four city pages
   and the long-form guides all share these class names. */

/* ---- hero: the homepage's asymmetric wash, reused so the site reads as
        one system rather than a light homepage bolted to a light interior --- */
body.light .svc-hero{
  background:
    radial-gradient(56% 46% at 82% 2%,  rgba(33,174,248,.14), transparent 68%),
    radial-gradient(44% 40% at 6% 94%,  rgba(127,82,255,.09), transparent 70%),
    linear-gradient(168deg,#FFFFFF 0%,#F4F8FD 58%,#EDF3FB 100%)!important;
  color:var(--clr-text)!important;
  border-bottom:1px solid rgba(11,27,43,.07);
}
/* the corner glow was a neon bloom on black; here it is a pastel bleed */
body.light .svc-hero::before{
  background:radial-gradient(circle, rgba(127,82,255,.10) 0%, transparent 70%)!important;
}
body.light .svc-hero__title,
body.light .svc-hero__text h1{ color:var(--clr-text)!important; }
body.light .svc-hero__sub,
body.light .svc-hero__text p{ color:#3E5872!important; opacity:1!important; }

/* the highlighted phrase in the H1 — a flat mid-blue on white is unreadable,
   so it becomes the same gradient the homepage headline uses */
body.light .svc-hero__title span{
  background:linear-gradient(110deg,#0A6FA8 0%,#079CEB 45%,#7F52FF 100%)!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  color:transparent!important; -webkit-text-fill-color:transparent!important;
}

body.light .svc-hero__eyebrow,
body.light .svc-eyebrow,
body.light .eyebrow{
  background:rgba(10,111,168,.08)!important;
  border:1px solid rgba(10,111,168,.22)!important;
  color:#0A6FA8!important;
}
body.light .svc-eyebrow{ background:none!important; border:0!important; }

body.light .svc-hero__stats{ border-top:1px solid rgba(11,27,43,.10)!important; }
/* KPI numerals: large display type, so the gradient is allowed here */
body.light .svc-hero__stat strong,
body.light .svc-trust__num,
body.light .stat-num{
  background:linear-gradient(120deg,#079CEB,#7F52FF)!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  color:transparent!important; -webkit-text-fill-color:transparent!important;
  font-variant-numeric:tabular-nums;
}
body.light .svc-hero__stat span,
body.light .svc-trust__label,
body.light .stat-label{ color:#6B7C90!important; opacity:1!important; }

/* ---- quick answer: was a solid navy panel; now a tinted card with a
        gradient rail, matching the homepage's specialist callout ---- */
body.light .svc-quick-answer,
body.light .quick-answer{
  position:relative;
  background:linear-gradient(135deg,rgba(10,111,168,.055),rgba(127,82,255,.045))!important;
  border:1px solid rgba(10,111,168,.18)!important;
  border-left:0!important;
  border-radius:16px!important;
  overflow:hidden;
}
body.light .svc-quick-answer::before,
body.light .quick-answer::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#079CEB,#7F52FF);
}
body.light .svc-quick-answer__label,
body.light .svc-quick-answer dt{ color:#0A6FA8!important; }
body.light .svc-quick-answer__text,
body.light .qa-question{ color:var(--clr-text)!important; }
body.light .svc-quick-answer dd,
body.light .qa-answer{ color:#42586F!important; }

/* ---- section rhythm: two tiers of dark become three tiers of light ---- */
body.light .svc-section--alt{ background:#F5F8FC!important; }
body.light .svc-section--dark{
  background:linear-gradient(180deg,#EEF4FB 0%,#E8F0F9 100%)!important;
  border-block:1px solid rgba(11,27,43,.06);
}
body.light .svc-title,
body.light .svc-sub,
body.light .svc-card__title,
body.light .svc-use-case__title,
body.light .svc-industry__name,
body.light .svc-step h3,
body.light .svc-faq__q,
body.light .svc-geo__item h3,
body.light .use-case-title,
body.light .post-hero-title,
body.light .svc-card h2,
body.light .svc-card h3,
body.light .svc-card h4,
body.light .svc-use-case h3,
body.light .svc-industry h3{ color:var(--clr-text)!important; }
/* the hover accent is a per-card custom property holding a neon brand tint */
body.light .svc-card:hover h3,
body.light .svc-card:hover h2{ color:#0A6FA8!important; }
body.light .svc-lead,
body.light .svc-bullets,
body.light .svc-card__text,
body.light .svc-use-case__text,
body.light .svc-industry__desc,
body.light .svc-step p,
body.light .svc-faq__a,
body.light .svc-geo__item p,
body.light .svc-problem__list li,
body.light .section-sub,
body.light .post-meta,
body.light .breadcrumb{ color:#42586F!important; }
body.light .svc-faq__a a,
body.light .svc-faq__list a:not(.btn),
body.light .faq-item a:not(.btn),
body.light .breadcrumb a,
body.light .svc-lead a:not(.btn),
body.light .svc-bullets a:not(.btn),
body.light .svc-card a:not(.btn){ color:#0A6FA8!important; }
/* several pages restate the card's body copy at element level */
body.light .svc-card p,
body.light .svc-card li,
body.light .svc-use-case p,
body.light .svc-industry p{ color:#42586F!important; }

/* ---- cards: one treatment, applied everywhere the dark theme used a
        translucent white fill ---- */
body.light .svc-card,
body.light .svc-use-case,
body.light .svc-industry,
body.light .svc-step,
body.light .svc-faq__item,
body.light .stat-item,
body.light .ldn-stat,
body.light .card{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.09)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -18px rgba(11,27,43,.28)!important;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s;
}
body.light .svc-card:hover,
body.light .svc-use-case:hover,
body.light .svc-industry:hover,
body.light .svc-step:hover,
body.light .stat-item:hover{
  transform:translateY(-4px);
  border-color:rgba(10,111,168,.28)!important;
  box-shadow:0 2px 6px rgba(11,27,43,.05), 0 18px 40px -20px rgba(11,27,43,.30)!important;
}

/* the step number: a gradient chip with a white numeral, same as the
   homepage process cards, rather than an outlined blue circle */
body.light .svc-step__num{
  background:linear-gradient(135deg,#079CEB,#7F52FF)!important;
  border:0!important;
  color:#FFFFFF!important;
  box-shadow:0 8px 18px -8px rgba(10,111,168,.55);
}
body.light .svc-use-case__num,
body.light .svc-stack__tag,
body.light .resource-card__tag{ color:#0A6FA8!important; }
body.light .svc-stack__tag,
body.light .tag{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.10)!important;
  color:#33465E!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04);
}
body.light .svc-stack__tag{ color:#0A6FA8!important; border-color:rgba(10,111,168,.22)!important; }

/* ---- before / after columns ---- */
body.light .svc-problem__col--before{
  background:rgba(180,35,24,.045)!important;
  border:1px solid rgba(180,35,24,.18)!important;
}
body.light .svc-problem__col--after{
  background:rgba(10,111,168,.05)!important;
  border:1px solid rgba(10,111,168,.20)!important;
}
body.light .svc-problem__col--before .svc-problem__label,
body.light .svc-problem__col--before .svc-problem__list li::before,
body.light .badge-no{ color:#B42318!important; }
body.light .svc-problem__col--after .svc-problem__label,
body.light .svc-problem__col--after .svc-problem__list li::before{ color:#0A6FA8!important; }
body.light .badge-yes,
body.light .badge--yes{ color:#15803D!important; }
body.light .badge-partial,
body.light .badge--partial{ color:#B45309!important; }
body.light .badge--no{ color:#B42318!important; }

/* ---- comparison tables ---- */
body.light .svc-comparison,
body.light .comparison-table table,
body.light .svc-table,
body.light .kw-table,
body.light .priority-table{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.10)!important;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -18px rgba(11,27,43,.26);
}
body.light .svc-comparison thead th,
body.light .comparison-table th,
body.light .svc-table thead,
body.light .kw-table thead th,
body.light .table th{
  background:linear-gradient(135deg,rgba(10,111,168,.08),rgba(127,82,255,.06))!important;
  color:#22344B!important;
}
body.light .svc-comparison tbody tr:nth-child(even){ background:#F7FAFD!important; }
body.light .svc-comparison tbody td,
body.light .comparison-table td,
body.light .kw-table td,
body.light .priority-table td,
body.light table td{
  color:#42586F!important;
  border-bottom:1px solid rgba(11,27,43,.07)!important;
}
body.light .svc-comparison tbody td:first-child{ color:#22344B!important; }

/* ---- geo panel ---- */
body.light .svc-geo{
  background:linear-gradient(135deg,rgba(10,111,168,.045),rgba(127,82,255,.035))!important;
  border:1px solid rgba(10,111,168,.16)!important;
}

/* ── 20. Country pages ──────────────────────────────────────────────────
   These 13 pages style themselves almost entirely through the legacy
   --clr-dark / --clr-surface / --clr-muted aliases, which §1 already
   redefines — so most of the page converts without a rule here. What is
   left is the two places --clr-dark was used as a literal dark gradient
   stop rather than as a surface. */

/* 21 of the 24 pages that carry a trust bar set it inline to a solid
   --clr-primary band with white text; the other three leave it transparent.
   Rather than half-convert it, the band becomes the interior pages' answer
   to the homepage's dark trust strip — one brand-gradient stripe under the
   hero, white text, the same on all 24. The gradient beats the inline fill
   because the inline declaration carries no !important. */
body.light .trust-bar{
  background:linear-gradient(120deg,#0A6FA8 0%,#0C63C4 52%,#5B3FD6 100%)!important;
  color:#FFFFFF!important;
  border-block:0;
}
body.light .trust-bar .trust-item,
body.light .trust-bar .trust-item span,
body.light .trust-bar .trust-item strong,
body.light .trust-bar [style*="color:#fff"],
body.light .trust-bar [style*="color:rgba(255,255,255"]{ color:#FFFFFF!important; }
body.light .trust-item{ color:#33465E; }
body.light .geo-card h3{ color:var(--clr-text)!important; }
body.light .geo-card p{ color:#42586F!important; }

/* ── 21. Dark anchors, sitewide ─────────────────────────────────────────
   The closing CTA of every interior page keeps the original palette, for
   the same reason the homepage does: a page of white sections needs
   somewhere to land. Each re-scopes the dark tokens locally, which is what
   makes white-on-dark text work again inside them. */

body.light .svc-cta,
body.light .cta-section,
body.light .about-cta,
body.light .resources-cta{
  --clr-bg:         #080E1A;
  --clr-bg-2:       #0C1424;
  --clr-bg-card:    #101E30;
  --clr-text:       #E6F2FF;
  --clr-text-muted: #7EA8C9;
  --clr-white:      #FFFFFF;
  --clr-primary:    #21AEF8;
  --clr-border:     rgba(33,174,248,.18);
  color:#E6F2FF;
}
body.light .svc-cta,
body.light .cta-section,
body.light .resources-cta{
  background:linear-gradient(140deg,#0B1421 0%,#12335A 55%,#3B2D77 100%)!important;
  border-top:0!important;
}
body.light .svc-cta h2,
body.light .cta-section h2,
body.light .resources-cta h2,
body.light .about-cta h2,
body.light .svc-cta .svc-title{ color:#FFFFFF!important; }
body.light .svc-cta p,
body.light .cta-section p,
body.light .cta-section__inner > p,
body.light .resources-cta p,
body.light .about-cta p{ color:#B9D4EC!important; opacity:1!important; }
body.light .cta-section__note{ color:rgba(255,255,255,.6)!important; opacity:1!important; }

/* white pills read correctly again inside a dark band */
body.light .svc-cta .btn--white,
body.light .cta-section .btn--white,
body.light .resources-cta .btn--white,
body.light .about-cta .btn--white{
  background:#FFFFFF;
  color:#0B1B2B;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.55);
}
body.light .svc-cta .btn--white:hover,
body.light .cta-section .btn--white:hover,
body.light .resources-cta .btn--white:hover,
body.light .about-cta .btn--white:hover{ background:#E9F4FD; color:#0B1B2B; }
body.light .svc-cta .btn--white-outline,
body.light .svc-cta .btn--outline-white,
body.light .svc-cta .btn--outline,
body.light .cta-section .btn--white-outline,
body.light .cta-section .btn--outline-white,
body.light .cta-section .btn--outline,
body.light .resources-cta .btn--outline,
body.light .about-cta .btn--white-outline,
body.light .about-cta .btn--outline-white{
  background:transparent!important;
  color:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.38)!important;
}
body.light .svc-cta .btn--white-outline:hover,
body.light .svc-cta .btn--outline-white:hover,
body.light .svc-cta .btn--outline:hover,
body.light .cta-section .btn--white-outline:hover,
body.light .cta-section .btn--outline-white:hover,
body.light .cta-section .btn--outline:hover,
body.light .resources-cta .btn--outline:hover,
body.light .about-cta .btn--white-outline:hover,
body.light .about-cta .btn--outline-white:hover{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.58)!important;
  color:#FFFFFF!important;
}
/* the §31 catch-all would darken inline whites inside these bands */
body.light .svc-cta [style*="color:#fff"],
body.light .cta-section [style*="color:#fff"],
body.light .resources-cta [style*="color:#fff"],
body.light .about-cta [style*="color:#fff"]{ color:#FFFFFF!important; }
body.light .svc-cta [style*="color:rgba(255,255,255"],
body.light .cta-section [style*="color:rgba(255,255,255"],
body.light .resources-cta [style*="color:rgba(255,255,255"],
body.light .about-cta [style*="color:rgba(255,255,255"]{ color:rgba(255,255,255,.75)!important; }

/* ── 22. Blog article template — 412 pages ──────────────────────────────
   These carry no per-page <style> block at all, so the token remap in §1
   converts the body copy, the hero band and the callout boxes for free.
   Four things it cannot reach: the breadcrumb's inline greys, the two AEO
   boxes, the CTA's white-on-white button, and the "Continue reading" band,
   which is a hardcoded #080E1A section full of inline-styled cards. */

body.light .blog-post__hero{ background:#F5F8FC; border-bottom:1px solid rgba(11,27,43,.08); }
body.light .blog-post__content h2{ letter-spacing:-.01em; }
body.light .blog-post__content strong{ color:var(--clr-text); }
body.light .blog-highlight{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.09);
  border-left:3px solid #0A6FA8;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -20px rgba(11,27,43,.26);
}
body.light .blog-tldr{
  background:linear-gradient(135deg,rgba(10,111,168,.06),rgba(127,82,255,.045));
  border:1px solid rgba(10,111,168,.18);
  border-left:4px solid #0A6FA8;
}
body.light .blog-key-facts{
  background:rgba(180,83,9,.045);
  border:1px solid rgba(180,83,9,.18);
  border-left:4px solid #B45309;
}
body.light .blog-key-facts ul li{ color:#22344B; }
body.light .blog-author{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.09);
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -18px rgba(11,27,43,.28);
}
body.light .blog-cta{
  background:linear-gradient(135deg,#F7FAFD 0%,#EFF5FC 100%);
  border:1px solid rgba(11,27,43,.09);
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 12px 32px -22px rgba(11,27,43,.26);
}
/* .blog-cta a.btn resolves --clr-white, which §1 remaps to near-black —
   so the primary pill would render dark-on-dark without this */
body.light .blog-cta a.btn--primary{ color:#FFFFFF; }
body.light .blog-cta a.btn--outline{
  background:#FFFFFF;
  color:var(--clr-text);
  border-color:rgba(11,27,43,.18);
}
body.light .blog-cta a.btn--outline:hover{
  background:#F5F8FC; color:var(--clr-primary); border-color:rgba(10,111,168,.45);
}

/* the two AEO boxes are styled entirely with inline attributes */
body.light .aeo-tldr{
  background:linear-gradient(135deg,rgba(10,111,168,.06) 0%,rgba(127,82,255,.045) 100%)!important;
  border:1px solid rgba(10,111,168,.18)!important;
}
body.light .aeo-tldr > p:first-child{ color:#0A6FA8!important; }
body.light .aeo-tldr__text{ color:#22344B!important; }
body.light .aeo-lastupdated{ color:#7A8899!important; }

/* "Continue reading" — a hardcoded dark band with inline-styled cards whose
   hover state is driven by onmouseover/onmouseout handlers. Inline styles
   set from JS still lose to !important, so the border survives mouse-out
   instead of vanishing into the page. */
body.light [data-related-posts]{ border-top:1px solid rgba(11,27,43,.10)!important; }
body.light [data-related-posts] > span{
  background:rgba(10,111,168,.08)!important;
  border:1px solid rgba(10,111,168,.22)!important;
  color:#0A6FA8!important;
}
body.light [data-related-posts] > h2{ color:var(--clr-text)!important; }
body.light [data-related-posts] a{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.09)!important;
  border-radius:14px!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -20px rgba(11,27,43,.26)!important;
}
body.light [data-related-posts] a:hover{
  border-color:rgba(10,111,168,.30)!important;
  box-shadow:0 2px 6px rgba(11,27,43,.05), 0 18px 40px -22px rgba(11,27,43,.30)!important;
}
body.light [data-related-posts] a h3,
body.light [data-related-posts] a strong{ color:var(--clr-text)!important; }
body.light [data-related-posts] a span{ color:#0A6FA8!important; }
body.light [data-related-posts] + div a,
body.light [data-related-posts] ~ div a{ color:#0A6FA8!important; border-color:rgba(10,111,168,.35)!important; }

/* ── 23. Blog index and category pages ──────────────────────────────────── */

body.light .blog-hero::before{
  background:radial-gradient(ellipse, rgba(127,82,255,.10) 0%, transparent 65%);
}
body.light .blog-card{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.09);
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -18px rgba(11,27,43,.28);
}
body.light .blog-card:hover{
  border-color:rgba(10,111,168,.30);
  box-shadow:0 2px 6px rgba(11,27,43,.05), 0 20px 44px -22px rgba(11,27,43,.32);
}
/* .blog-card__visual keeps its dark brand gradient on purpose — it stands in
   for a cover image, and it is the only colour in an otherwise white grid */

body.light .blog-search__input{
  background:#FFFFFF!important;
  color:var(--clr-text)!important;
  border:1px solid rgba(11,27,43,.16)!important;
}
body.light .blog-search__input::placeholder{ color:#8B98A8!important; }
body.light .blog-search__input:focus{
  border-color:#0A6FA8!important;
  box-shadow:0 0 0 3px rgba(10,111,168,.15)!important;
}
body.light .blog-search__icon,
body.light .blog-search__count,
body.light .blog-noresults{ color:#6B7C90!important; }
body.light .blog-noresults strong{ color:var(--clr-text)!important; }
body.light .blog-search__clear{ background:rgba(11,27,43,.06)!important; color:#42586F!important; }
body.light .blog-search__clear:hover{ background:rgba(11,27,43,.12)!important; color:var(--clr-text)!important; }
body.light .blog-chip{
  background:#FFFFFF!important;
  color:#42586F!important;
  border:1px solid rgba(11,27,43,.12)!important;
}
body.light .blog-chip:hover{ color:var(--clr-text)!important; border-color:rgba(10,111,168,.40)!important; }
body.light .blog-chip.is-active{
  background:linear-gradient(120deg,#0A6FA8,#0C63C4)!important;
  border-color:transparent!important;
  color:#FFFFFF!important;
}

body.light .cat-hero__title{ color:var(--clr-text)!important; }
body.light .cat-hero__sub{ color:#42586F!important; }
body.light .cat-hero__eyebrow{
  background:rgba(10,111,168,.08)!important;
  border:1px solid rgba(10,111,168,.22)!important;
  color:#0A6FA8!important;
}
body.light .cat-hero__count{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.10)!important;
  color:#42586F!important;
}
body.light .cat-post-card{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.09)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -18px rgba(11,27,43,.28)!important;
}
body.light .cat-post-card:hover{
  border-color:rgba(10,111,168,.30)!important;
  box-shadow:0 2px 6px rgba(11,27,43,.05), 0 18px 40px -22px rgba(11,27,43,.30)!important;
}
body.light .cat-post-card__title{ color:var(--clr-text)!important; }
body.light .cat-post-card__date{ color:#7A8899!important; }
body.light .cat-post-card__link,
body.light .cat-breadcrumb a{ color:#0A6FA8!important; }
body.light .cat-breadcrumb{ color:#6B7C90!important; }
/* the category CTA is a tinted card, not a full band — it stays light */
body.light .cat-cta{
  background:linear-gradient(135deg,rgba(10,111,168,.06),rgba(127,82,255,.05))!important;
  border:1px solid rgba(10,111,168,.18)!important;
}
body.light .cat-cta h2{ color:var(--clr-text)!important; }
body.light .cat-cta p{ color:#42586F!important; }
body.light .cat-cta a{
  background:linear-gradient(120deg,#0A6FA8,#0C63C4)!important;
  color:#FFFFFF!important;
}

/* ── 24. About page ─────────────────────────────────────────────────────
   The heaviest per-page block on the site: eight components built on
   translucent-white-over-black with inset highlights and 70%-black drop
   shadows, all carrying !important. Every one becomes a white card. */

body.light .about-hero{
  background:
    radial-gradient(58% 48% at 80% 4%,  rgba(33,174,248,.13), transparent 68%),
    radial-gradient(46% 42% at 8% 92%,  rgba(127,82,255,.09), transparent 70%),
    linear-gradient(168deg,#FFFFFF 0%,#F4F8FD 60%,#EDF3FB 100%)!important;
  color:var(--clr-text)!important;
}
body.light .about-section--alt{
  background:#F5F8FC!important;
  border-block:1px solid rgba(11,27,43,.07)!important;
}
body.light .about-stats__item,
body.light .about-value,
body.light .about-faq__item,
body.light .founder-card,
body.light .about-industries__tag{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.09)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 12px 32px -20px rgba(11,27,43,.28)!important;
}
body.light .about-stats__item:hover,
body.light .about-value:hover,
body.light .about-faq__item:hover{
  border-color:rgba(10,111,168,.28)!important;
  box-shadow:0 2px 6px rgba(11,27,43,.05), 0 20px 44px -22px rgba(11,27,43,.32)!important;
}
/* the mouse-follow spotlights were white glows on black; on white they are
   a faint blue tint or they read as smudges */
body.light .about-stats__item::after,
body.light .about-value::after{
  background:radial-gradient(170px circle at var(--gx) var(--gy), rgba(10,111,168,.07), transparent 62%)!important;
}
/* The page's second <style> block restates every text colour with
   !important — #EAF4FF headings, #A9C2DA body, #9DB8CE labels, #5BCFFF
   accents — all of which were tuned for black. Class-scoped rules outrank
   them on specificity, so each one is answered here. */
body.light .about-value__title,
body.light .founder-card__name,
body.light .about-faq__q,
body.light .about-section__title{ color:var(--clr-text)!important; }
body.light .about-section__body,
body.light .about-timeline__text,
body.light .founder-card__bio,
body.light .about-faq__a,
body.light .about-value__text{ color:#42586F!important; }
body.light .about-stats__label{ color:#6B7C90!important; opacity:1!important; }
body.light .about-timeline__year,
body.light .founder-card__title{ color:#0A6FA8!important; }
body.light .about-timeline::before,
body.light .about-timeline__item::after{ background:rgba(11,27,43,.12)!important; }
body.light .about-industries__tag:hover{ color:#0A6FA8!important; border-color:rgba(10,111,168,.35)!important; }
body.light .about-value__icon{ box-shadow:0 8px 20px -8px rgba(10,111,168,.45)!important; }
body.light .founder-card__avatar{ border:1px solid rgba(11,27,43,.12)!important; }
/* the timeline dots punch a hole in the page colour behind them */
body.light .about-timeline__item::before{ border:2px solid #FFFFFF!important; }
/* .about-cta keeps its bright brand gradient — it already works on white */
body.light .about-cta::before{ background:rgba(255,255,255,.16)!important; }

/* ── 25. 404 ────────────────────────────────────────────────────────────
   This page defines its own --bg/--bg2 on :root; §18 redefines them on
   body.light, which wins for everything inside <body>. */

body.light .p404{
  background:linear-gradient(168deg,#FFFFFF 0%,#F4F8FD 62%,#EDF3FB 100%)!important;
}
body.light .p404::before{
  background:
    radial-gradient(ellipse 700px 500px at 20% 0%,  rgba(33,174,248,.11) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 80% 80%, rgba(127,82,255,.08) 0%, transparent 70%)!important;
}
/* the graph-paper grid reads as a template background on white, as it did
   on the homepage hero — removed for the same reason */
body.light .p404__grid{ display:none!important; }
body.light .p404__web{ opacity:.06!important; }
body.light .p404__sub{ color:#42586F!important; }
body.light .p404__search{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.14)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 12px 32px -22px rgba(11,27,43,.26)!important;
}
body.light .p404__search input{ color:var(--clr-text)!important; }
body.light .p404__search input::placeholder,
body.light .p404__search-icon{ color:#8B98A8!important; }
body.light .p404__search-btn,
body.light .p404__btn-a{
  background:linear-gradient(120deg,#0A6FA8,#0C63C4)!important;
  color:#FFFFFF!important;
}
body.light .p404__btn-b{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.16)!important;
  color:#33465E!important;
}
body.light .p404__section-label{ color:#7A8899!important; }
body.light .p404__post{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.09)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04)!important;
}
/* the Quick Links grid: eight rgba(16,30,50,.65) tiles, which on white read
   as slate blocks with near-invisible labels */
body.light .p404__link{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.09)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 8px 22px -16px rgba(11,27,43,.26);
  backdrop-filter:none!important;
}
body.light .p404__link:hover{
  background:#F5F8FC!important;
  border-color:rgba(10,111,168,.32)!important;
  color:#0A6FA8!important;
}
body.light .p404__link-ico{ background:rgba(10,111,168,.10)!important; }
body.light .p404__post-title{ color:var(--clr-text)!important; }
body.light .p404__post-arrow{ color:#0A6FA8!important; }
body.light .p404__link{ color:#42586F!important; }
body.light .p404__link:hover{ color:#0A6FA8!important; }
body.light .p404__status{
  border:1px solid rgba(11,27,43,.10)!important;
  color:#7A8899!important;
}

/* ── 26. Resources, press, case-study hub, industries ───────────────────
   Token-driven apart from the cards' hover shadow, which was tuned for a
   black ground and reads as a blue haze on white. */

body.light .resource-card,
body.light .cs-hub-card,
body.light .press-card{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.09)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -18px rgba(11,27,43,.28);
}
body.light .resource-card:hover,
body.light .cs-hub-card:hover,
body.light .press-card:hover{
  border-color:rgba(10,111,168,.30)!important;
  box-shadow:0 2px 6px rgba(11,27,43,.05), 0 20px 44px -22px rgba(11,27,43,.32)!important;
}
body.light .resources-hero,
body.light .press-hero{
  background:linear-gradient(180deg,#FFFFFF 0%,#F5F8FC 100%)!important;
  border-bottom:1px solid rgba(11,27,43,.07);
}
body.light .resources-section:nth-child(even){ background:#F5F8FC!important; }
body.light .resources-section:nth-child(even) .resource-card{ background:#FFFFFF!important; }

/* ── 27. Legal pages, guides, the ROI calculator ────────────────────────
   The legal pages are entirely token-driven and convert on §1 alone. What
   is left is the two guide-page components that hardcode a dark panel. */

body.light .legal-toc,
body.light .legal-contact-box{
  background:#F7FAFD;
  border:1px solid rgba(11,27,43,.09);
}
body.light .legal-section h2 .sec-num{ background:rgba(10,111,168,.10); color:#0A6FA8; }

body.light .doc-header{
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F6FC 100%)!important;
  border-bottom:1px solid rgba(11,27,43,.08);
}
body.light .calc-hero{
  background:
    radial-gradient(56% 46% at 82% 2%, rgba(33,174,248,.13), transparent 68%),
    linear-gradient(168deg,#FFFFFF 0%,#F4F8FD 58%,#EDF3FB 100%)!important;
  color:var(--clr-text)!important;
}
body.light .technique-card__title{ color:var(--clr-text)!important; }
body.light .technique-card__desc,
body.light .technique-card__example,
body.light .platform-card li,
body.light .query-item{ color:#42586F!important; }
body.light .schema-block{ border:1px solid rgba(11,27,43,.10)!important; }
body.light .rank-item__num,
body.light .process-step__num{ color:#FFFFFF!important; }

/* Code stays dark. A syntax-highlighted block on a light page is a
   deliberate, conventional inversion — and the practical argument is
   stronger still: 46 code blocks across 20 pages colour their tokens inline
   (#21aef8 keywords, #f8e021 identifiers, #21f878 strings) for a dark
   ground. Keeping the ground dark preserves all of it; recolouring would
   mean remapping every token colour by hand. The blocks are identified by
   their inline monospace stack, which nothing else on the site uses. */
body.light .code-block,
body.light code.token,
body.light [style*="font-family:monospace"],
body.light [style*="font-family: monospace"],
body.light [style*="mono"][style*="background:rgba(255,255,255"]{
  background:#0D1524!important;
  border:1px solid rgba(11,27,43,.14)!important;
  color:rgba(230,242,255,.86)!important;
  border-radius:12px;
}
body.light .code-block .comment{ color:rgba(230,242,255,.42)!important; }
/* §31 would otherwise darken the comment tokens inside a dark block */
body.light .code-block [style*="color:#fff"],
body.light .code-block [style*="color:rgba(255,255,255"],
body.light [style*="mono"] [style*="color:#fff"],
body.light [style*="mono"] [style*="color:rgba(255,255,255"]{
  color:rgba(230,242,255,.55)!important;
}

/* ── 28. The .f3d-* flow visual ─────────────────────────────────────────── */

body.light .f3d__hud{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.09)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -18px rgba(11,27,43,.28);
}
body.light .f3d__cap b{ color:var(--clr-text)!important; }
body.light .f3d__cap span{ color:#42586F!important; }
body.light .f3d__dots button{ background:rgba(11,27,43,.20)!important; }

/* ── 29. Forms and the estimate flow, sitewide ──────────────────────────── */

body.light .form-group input,
body.light .form-group textarea,
body.light .form-group select{
  background:#FFFFFF;
  border:1px solid rgba(11,27,43,.16);
  color:var(--clr-text);
}
body.light .form-group label{ color:#33465E; }

/* ── 30. Section-level dark bands declared inline ───────────────────────
   Every blog post closes with <section style="…background:#080E1A;">, and a
   handful of interior pages do the same. Caught by attribute substring so
   no markup has to change. */

body.light section[style*="background:#080E1A"],
body.light section[style*="background: #080E1A"],
body.light div[style*="background:#080E1A"]{
  background:#F5F8FC!important;
  border-block:1px solid rgba(11,27,43,.07);
}
body.light [style*="background:#0C1424"],
body.light [style*="background:#0D1525"],
body.light [style*="background:#101E30"]{ background:#F7FAFD!important; }
/* :not([style*="mono"]) keeps the inline code blocks out — §27 deliberately
   leaves those dark, and this sweep comes later in the sheet, so without the
   exclusion it would win the tie and bleach them.

   The rgba(13,21,36…) family is matched anywhere in the attribute rather
   than only after `background:` — it occurs 1,139 times, almost all of it
   the two-stop fill `linear-gradient(180deg, rgba(13,21,36,.6),
   rgba(8,14,26,.45))`, which an anchored match would miss. */
body.light [style*="background:rgba(255,255,255,.04)"]:not([style*="mono"]),
body.light [style*="background:rgba(255,255,255,.05)"]:not([style*="mono"]),
body.light [style*="background:rgba(255,255,255,.06)"]:not([style*="mono"]),
body.light [style*="rgba(13,21,36"]:not([style*="mono"]),
body.light [style*="rgba(8,14,26"]:not([style*="mono"]),
body.light [style*="rgba(20,33,54"]:not([style*="mono"]),
body.light [style*="rgba(11,19,34"]:not([style*="mono"]){
  background:#FFFFFF!important;
  border-color:rgba(11,27,43,.09)!important;
}
/* gradient numerals inside those panels: the #21AEF8 stop is 2.48:1 on
   white, under the 3:1 floor even as large display type */
body.light [style*="-webkit-text-fill-color:transparent"][style*="#21AEF8"]{
  background-image:linear-gradient(135deg,#0A6FA8,#7F52FF)!important;
}
/* …except inside the dark anchors, where a translucent white fill is still
   doing its original job. The footer's Clutch panel is the one that bites:
   turned solid white it takes its own white text with it. */
body.light .footer [style*="background:rgba(255,255,255"],
body.light .cta-band [style*="background:rgba(255,255,255"],
body.light .trust-strip [style*="background:rgba(255,255,255"],
body.light .svc-cta [style*="background:rgba(255,255,255"],
body.light .cta-section [style*="background:rgba(255,255,255"],
body.light .about-cta [style*="background:rgba(255,255,255"],
body.light .resources-cta [style*="background:rgba(255,255,255"],
body.light .press-contact [style*="background:rgba(255,255,255"],
body.light .footer [style*="rgba(13,21,36"],
body.light .cta-band [style*="rgba(13,21,36"],
body.light .trust-strip [style*="rgba(13,21,36"],
body.light .svc-cta [style*="rgba(13,21,36"],
body.light .cta-section [style*="rgba(13,21,36"]{
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(255,255,255,.14)!important;
}

/* ── 31. Inline colour attributes, sitewide ─────────────────────────────
   §15 handles the homepage's 69. The interior pages add two more families:
   rgba(230,242,255,…), which is style-v30's light text colour, and the
   graded whites the blog breadcrumbs use. The graded rules come after the
   blanket ones deliberately — same specificity, so source order decides,
   and the more specific substring should win. */

body.light [style*="color:rgba(230,242,255"],
body.light [style*="color: rgba(230,242,255"]{ color:#42586F!important; }
body.light [style*="color:rgba(226,239,255"],
body.light [style*="color: rgba(226,239,255"]{ color:#7A8899!important; }
body.light [style*="color:#E6F2FF"],
body.light [style*="color:#e6f2ff"],
body.light [style*="color:#EAF4FF"],
body.light [style*="color:#EEF5FF"]{ color:#0B1B2B!important; }

body.light [style*="color:rgba(255,255,255,.3)"]{ color:#A9B6C4!important; }  /* breadcrumb slash */
body.light [style*="color:rgba(255,255,255,.4)"],
body.light [style*="color:rgba(255,255,255,.45)"],
body.light [style*="color:rgba(255,255,255,.5)"]{ color:#7A8899!important; }
body.light [style*="color:rgba(255,255,255,.55)"],
body.light [style*="color:rgba(255,255,255,.6)"],
body.light [style*="color:rgba(255,255,255,.65)"]{ color:#4A6480!important; }
body.light [style*="color:rgba(255,255,255,.7)"],
body.light [style*="color:rgba(255,255,255,.75)"],
body.light [style*="color:rgba(255,255,255,.8)"],
body.light [style*="color:rgba(255,255,255,.9)"],
body.light [style*="color:rgba(255,255,255,.92)"]{ color:#22344B!important; }

/* #21AEF8 is 2.48:1 on white — it fails as text wherever it appears inline */
body.light [style*="color:#21AEF8"],
body.light [style*="color: #21AEF8"]{ color:#0A6FA8!important; }
/* a handful of blog headings use the CSS keyword, which is 1.97:1 on white */
body.light [style*="color:orange" i]{ color:#B45309!important; }
/* The status palette, written inline in both cases across the case studies
   and comparison tables. The `i` flag covers both; it is deliberately NOT
   used on #21AEF8 above, because the code blocks in §27 spell their keyword
   token #21aef8 and must keep it against their dark ground. */
body.light [style*="color:#f59e0b" i],
body.light [style*="color:#fbbf24" i]{ color:#B45309!important; }
body.light [style*="color:#22c55e" i],
body.light [style*="color:#10b981" i],
body.light [style*="color:#4ade80" i]{ color:#15803D!important; }
body.light [style*="color:#ef4444" i],
body.light [style*="color:#f87171" i]{ color:#B42318!important; }
body.light [style*="color:var(--clr-accent)"]{ color:#0A6FA8!important; }

/* borders and hairlines drawn for a black ground */
body.light [style*="border:1px solid rgba(255,255,255"],
body.light [style*="border: 1px solid rgba(255,255,255"],
body.light [style*="border-top:1px solid rgba(255,255,255"],
body.light [style*="border-bottom:1px solid rgba(255,255,255"]{
  border-color:rgba(11,27,43,.10)!important;
}

/* the dark anchors re-assert their own inline colours underneath */
body.light .svc-cta [style*="color:rgba(230,242,255"],
body.light .cta-section [style*="color:rgba(230,242,255"],
body.light .resources-cta [style*="color:rgba(230,242,255"],
body.light .about-cta [style*="color:rgba(230,242,255"]{ color:rgba(230,242,255,.75)!important; }

/* ── 32. The long tail ─────────────────────────────────────────────────
   What a selector-by-selector audit of the per-page <style> blocks turned
   up after §§18-31: generic variable names, bare element selectors, and a
   handful of one-off panels. Grouped here rather than filed by page,
   because none of them belongs to a system. */

/* ---- generic variable names. Only 404.html and aeo-strategy.html declare
        these, and both mean the same thing by them, so one remap serves. --- */
body.light{
  --bg3:    #EEF4FB;
  --text:   #22344B;
  --muted:  #4A6480;
  --dim:    #8B98A8;
  --border: rgba(11,27,43,.10);
  --accent: #0A6FA8;
  --green:  #15803D;
  --yellow: #B45309;
  --red:    #B42318;
}

/* ---- bare element selectors. `strong { color:#fff }` is declared at
        element level on one page, which no class-scoped rule can outrank —
        so the fix has to be element-level too, and the dark anchors then
        take their white back. ---- */
body.light strong{ color:var(--clr-text); }
body.light .cta-band strong,
body.light .footer strong,
body.light .trust-strip strong,
body.light .svc-cta strong,
body.light .cta-section strong,
body.light .about-cta strong,
body.light .resources-cta strong,
body.light .press-contact strong,
body.light .code-block strong,
body.light .blog-card__visual strong,
body.light .art-card__cover strong{ color:#FFFFFF; }

/* NOT a bare `table th` rule: several guide pages give their header row a
   solid --clr-primary fill with white text, which is correct on light and
   which a blanket dark colour would break. The tables that need a dark
   header colour are the ones §19 also gives a light header fill. */
body.light .cost-table td,
body.light .cost-table th{ border-bottom:1px solid rgba(11,27,43,.07)!important; }
body.light .svc-trust__item{ color:var(--clr-text)!important; }

/* ---- press.html closes on the same dark panel the other pages do ---- */
body.light .press-contact{
  --clr-text:  #E6F2FF;
  --clr-white: #FFFFFF;
  background:linear-gradient(140deg,#0B1421 0%,#12335A 55%,#3B2D77 100%)!important;
  color:#E6F2FF;
}
body.light .press-contact h2{ color:#FFFFFF!important; }
body.light .press-contact p,
body.light .press-contact__detail{ color:#B9D4EC!important; }

/* ---- homepage panels the first pass missed ---- */
body.light .tech-logo-wall{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.09)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 12px 32px -22px rgba(11,27,43,.26)!important;
}
body.light .cs-card__metric{
  background:#F7FAFD!important;
  border:1px solid rgba(11,27,43,.08)!important;
}
/* the hairline that separates a card's footer link from its body */
body.light .qa-card__link,
body.light .ind-card__link,
body.light .art-card__link,
body.light .geo-c__link,
body.light .cs-card__footer{ border-top-color:rgba(11,27,43,.10)!important; }
/* these "read more" links inherit a per-card neon accent (#F59E0B, #10B981,
   #21AEF8) that lands between 2.1:1 and 2.5:1 on white. The card keeps its
   accent elsewhere; the link itself becomes one consistent affordance. */
body.light .art-card__link,
body.light .ind-card__link,
body.light .cs-card__link,
body.light .geo-c__link,
body.light .qa-card__link{ color:#0A6FA8!important; }
body.light .contact__detail strong{ color:#6B7C90!important; }

body.light .contact__detail{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.09)!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04), 0 10px 28px -20px rgba(11,27,43,.26)!important;
}
body.light .contact__detail::after,
body.light #cal-cta::after{
  background:radial-gradient(200px circle at var(--gx) var(--gy), rgba(10,111,168,.07), transparent 62%)!important;
}
body.light .social-link{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.10)!important;
  color:#33465E!important;
  box-shadow:0 1px 2px rgba(11,27,43,.04)!important;
}
body.light .social-link:hover{
  border-color:rgba(10,111,168,.35)!important;
  color:#0A6FA8!important;
}
/* the estimate modal's outer shell — §13 styles .shf-panel, but the dialog
   on this page is .shf-box */
body.light .shf-box{
  background:#FFFFFF!important;
  border:1px solid rgba(11,27,43,.12)!important;
  box-shadow:0 30px 80px -30px rgba(11,27,43,.45)!important;
}

/* the fixed graph-paper texture behind the whole page — invisible on white
   and, like the hero grid in §4, the wrong idiom for a light ground */
body.light body::after,
body.light::after{ display:none!important; }

/* a black scrollbar trough on a white page is the one piece of chrome that
   gives away a retro-fitted theme */
body.light::-webkit-scrollbar-track{ background:#EEF3F9; }
body.light::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#7FB6DA,#A99BE8);
  border:2.5px solid #EEF3F9;
}
body.light::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#0A6FA8,#7F52FF);
}

/* ── 33. Reduced motion is inherited from the base sheets; nothing here
       introduces new motion. ───────────────────────────────────────────── */