/* tracio-v3.css (23 Oct 2026): the visual refresh. Loaded after tracio-v2-live.css on every body.v2 page.
   Header, hero, the booking block and the footer sit on deep navy (the colour in the logo's own ring
   gradient); the body reads on light grey sections with white cards. One gold primary button (the
   logo's own core colour), teal links on light sections, bright cyan links on navy. The free-call card
   in the hero and the navy line drawings carry the rest of the brand detail.
   Rules kept from the stage 2 design: one 1px line, flat fills, no glows, sentence case, no label above a
   heading, no arrow after a link, the existing logo files only, Archivo headings and Inter text.
   Scope: every rule starts with body.v2, so the 90 pages without it (404, terms, previews) are untouched. */

/* ---- tokens ---- */
body.v2 {
  --v3-navy: #0B1A3A; --v3-navy-2: #102648; --v3-navy-line: #1E3A68; --v3-panel: #0B1A3A;
  --v3-ink: #0F172A; --v3-ink-2: #334155; --v3-ink-3: #475569;
  --v3-paper: #E6EAF0; --v3-white: #FFFFFF; --v3-line: #D7DEE8; --v3-line-2: #C3CCDC;
  --v3-cyan: #22D3EE; --v3-cyan-deep: #06B6D4; --v3-cyan-bright: #67E8F9;
  --v3-teal: #155E75; --v3-teal-deep: #0C4254;
  --v3-gold: #F4B942; --v3-gold-deep: #D9881A;
  --v3-hero-a: #0B1A3A; --v3-hero-b: #102648;
  --v3-radius: 8px;
  --v3-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
  --v3-space: clamp(48px, 6vw, 80px);
  background: var(--v3-paper);
}
/* dark zones: header, hero, the booking block, the footer. Everything inside follows these tokens */
body.v2 header.nav, body.v2 .lp-header, body.v2 main .hero, body.v2 main .page-banner, body.v2 .lp-hero,
body.v2 footer.footer, body.v2 main > section.p172-book, body.v2 main > section#book, body.v2 .lp-final, body.v2 .v3-dark {
  --bg: var(--v3-navy); --bg-elev: var(--v3-navy-2); --surface: var(--v3-navy-2); --surface-2: #1A2642;
  --border: var(--v3-navy-line); --border-soft: var(--v3-navy-line);
  --text: #FFFFFF; --muted: #C7D2E4; --muted-2: #C7D2E4; --accent: var(--v3-cyan-bright); --accent-deep: var(--v3-cyan);
  background: var(--v3-navy) !important; color: var(--text);
}
/* light zones: the body sections. Every old component reads the same custom properties, so it follows this switch */
body.v2 .announce,
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark), body.v2 main > .last-updated, body.v2 main > div {
  --bg: var(--v3-paper); --bg-elev: var(--v3-white); --surface: var(--v3-white); --surface-2: var(--v3-paper);
  --border: var(--v3-line); --border-soft: var(--v3-line);
  --text: var(--v3-ink); --muted: var(--v3-ink-3); --muted-2: var(--v3-ink-3); --accent: var(--v3-teal); --accent-deep: var(--v3-teal-deep);
  --v2-line-ui: var(--v3-line-2);
  background: var(--v3-paper) !important; color: var(--v3-ink); border-top: 1px solid var(--v3-line);
}
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark):nth-of-type(even) { background: var(--v3-white) !important; }
body.v2 main > section.section { padding-top: var(--v3-space) !important; padding-bottom: var(--v3-space) !important; }
body.v2 main > section.section-sm { padding-top: calc(var(--v3-space) * .6) !important; padding-bottom: calc(var(--v3-space) * .6) !important; }
body.v2 main > section:first-of-type { border-top: 0; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(h1, h2, h3, h4) { color: var(--v3-ink); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(p, li, dd, td, th, label, figcaption, summary) { color: var(--v3-ink-2); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(strong, b, th, dt, .lead) { color: var(--v3-ink); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) a:not(.btn) { color: var(--v3-teal); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) a:not(.btn):hover { color: var(--v3-teal-deep); }
body.v2 .stat-num, body.v2 .num, body.v2 main section [class*="grad"] { color: var(--v3-teal) !important; }
body.v2 main section .fee { color: inherit; }

/* ---- type ---- */
body.v2 { font-size: 17px; line-height: 1.6; }
body.v2 h1 { font-size: clamp(2.1rem, 3vw + .9rem, 3.4rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
body.v2 h2 { font-size: clamp(1.6rem, 1.1vw + 1.1rem, 2.1rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; margin-bottom: .5em; }
body.v2 h3 { font-size: 1.2rem; line-height: 1.35; font-weight: 600; }
body.v2 .section-head { margin-bottom: 28px; }
body.v2 .section-head .lead, body.v2 .lead { font-size: 1.15rem; line-height: 1.55; }

/* ---- buttons: one shape, one primary (gold, dark text -- the logo's own core colour, so it's the one thing the eye goes to) ---- */
body.v2 .btn, body.v2 .lp-btn, body.v2 .ft-btn, body.v2 .nav-cta { border-radius: var(--v3-radius); font-weight: 600; font-size: 1rem; line-height: 1.2; min-height: 48px; padding: 12px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, border-color .15s, color .15s; }
body.v2 .btn-primary, body.v2 .ft-btn, body.v2 .nav-cta, body.v2 .lp-btn { background: var(--v3-gold) !important; color: #0B1220 !important; border: 2px solid var(--v3-gold) !important; }
body.v2 .btn-primary:hover, body.v2 .ft-btn:hover, body.v2 .nav-cta:hover, body.v2 .lp-btn:hover { background: var(--v3-gold-deep) !important; border-color: var(--v3-gold-deep) !important; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.btn-ghost, .btn-secondary, .lp-btn-alt), body.v2 main :is(.hero, .page-banner) .hero-cta > .btn-ghost { background: var(--v3-white) !important; color: var(--v3-ink) !important; border: 2px solid var(--v3-line-2) !important; text-decoration: none; padding: 12px 20px; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.btn-ghost, .btn-secondary, .lp-btn-alt):hover, body.v2 main :is(.hero, .page-banner) .hero-cta > .btn-ghost:hover { border-color: var(--v3-ink-3) !important; color: var(--v3-ink) !important; }
body.v2 :is(#book, .p172-book, .lp-final, .cta-banner.v3-dark) :is(.btn-ghost, .btn-secondary, .lp-btn-alt) { background: transparent !important; color: #F1F5F9 !important; border: 2px solid #3B4A6B !important; }
/* the lp hero's "ask for a second opinion" is .lp-btn.lp-btn-alt -- keep it an outline button on navy, never gold */
body.v2 .lp-hero .lp-btn.lp-btn-alt { background: transparent !important; color: var(--v3-cyan-bright) !important; border: 2px solid rgba(255,255,255,.35) !important; }
body.v2 .lp-hero .lp-btn.lp-btn-alt:hover { border-color: var(--v3-cyan-bright) !important; }
body.v2 :focus-visible { outline: 3px solid var(--v3-teal) !important; outline-offset: 3px; }
body.v2 :is(#book, .p172-book, footer, header.nav, main .hero, main .page-banner) :focus-visible { outline-color: var(--v3-cyan-bright) !important; }
/* the whitepaper page's own hero button ("Get the guides") is the one call-to-action there, so the header's "Book a call" steps back to an outline button instead of competing with it */
body.v2 header.nav .wp-nav-cta { background: transparent !important; color: #DCE6F5 !important; border: 2px solid rgba(255,255,255,.35) !important; }
body.v2 header.nav .wp-nav-cta:hover { border-color: #FFFFFF !important; color: #FFFFFF !important; }
/* the cookie banner's Accept stays a neutral outline button so gold stays the one call-to-action on the page */
body.v2 .cookie-banner [data-consent="accept"] { background: #FFFFFF !important; color: var(--v3-ink) !important; border: 2px solid var(--v3-ink) !important; font-weight: 700 !important; }
body.v2 .cookie-banner [data-consent="accept"]:hover { background: var(--v3-paper) !important; }
/* a touch slimmer so the banner clears content on short phone screens faster */
body.v2 .cookie-banner.cb-compact .cookie-banner-main { padding: 7px 10px !important; gap: 4px !important; }
body.v2 .cookie-banner.cb-compact .cookie-actions .btn { min-height: 40px !important; padding: 3px 6px !important; }

/* ---- top bar and header: white, navy wordmark ---- */
body.v2 .announce { background: var(--v3-paper) !important; border-bottom: 1px solid var(--v3-line); font-size: .9rem; }
body.v2 .announce-inner { padding: 8px 24px; }
body.v2 .announce-tag { display: none !important; }
body.v2 .announce-msg { color: var(--v3-ink-3); }
body.v2 .announce-contact, body.v2 .announce-contact a { color: var(--v3-ink-2); }
body.v2 .announce-contact a:hover { color: var(--v3-ink); }
body.v2 .lang-switch, body.v2 .lang-picker-btn { color: var(--v3-ink-2); }
body.v2 .lang-picker-panel { background: var(--v3-white); border: 1px solid var(--v3-line-2); color: var(--v3-ink); }
body.v2 header.nav { background: var(--v3-navy) !important; border-bottom: 1px solid var(--v3-navy-line); position: sticky; top: 0; z-index: 1000; }
body.v2 header.nav .nav-inner { padding-top: 12px; padding-bottom: 12px; }
body.v2 header.nav .brand img { height: 40px; width: auto; }
body.v2 header.nav .nav-links { gap: 2px; }
body.v2 header.nav .nav-links > li > a:not(.btn) { color: #DCE6F5; font-weight: 500; font-size: .95rem; padding: 8px 9px; border-radius: 6px; }
body.v2 header.nav .nav-cta { padding: 10px 16px; min-height: 42px; font-size: .95rem; white-space: nowrap; }
body.v2 header.nav .site-search-btn { margin-right: 10px; padding: 7px 9px; }
body.v2 header.nav .nav-links > li > a:not(.btn):hover, body.v2 header.nav .nav-links > li > a.active:not(.btn) { color: #FFFFFF; background: rgba(255,255,255,.08); }
body.v2 .nav-submenu, body.v2 .nav-mega { background: var(--v3-white) !important; border: 1px solid var(--v3-line-2) !important; border-radius: var(--v3-radius) !important; box-shadow: 0 16px 40px rgba(15, 23, 42, .14) !important; }
body.v2 .nav-submenu a, body.v2 .nav-mega a { color: var(--v3-ink); }
/* 23 Oct 2026: the dropdown panels are white but sit inside the navy header, so they inherited its white --text and
   older, more specific rules (header.nav .nav-links .nav-submenu a { color: var(--text) }) painted the links white on
   white. Give the panels the light-zone tokens so every rule inside them resolves to dark ink on white. */
body.v2 header.nav .nav-submenu, body.v2 header.nav .nav-mega {
  --bg: var(--v3-white); --bg-elev: var(--v3-white); --surface: var(--v3-white); --surface-2: var(--v3-paper);
  --border: var(--v3-line); --border-soft: var(--v3-line);
  --text: var(--v3-ink); --muted: var(--v3-ink-3); --muted-2: var(--v3-ink-3); --accent: var(--v3-teal); --accent-deep: var(--v3-teal-deep);
  color: var(--v3-ink);
}
body.v2 .nav-submenu a:hover, body.v2 .nav-mega a:hover { color: var(--v3-teal); }
body.v2 .nav-mega-h, body.v2 .nav-tools-label { color: var(--v3-ink-3); font-size: .85rem; font-weight: 600; }
body.v2 header.nav .site-search-btn, body.v2 header.nav .nav-toggle { background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: var(--v3-radius); color: #DCE6F5; }
body.v2 header.nav .site-search-btn:hover { border-color: #FFFFFF; color: #FFFFFF; background: rgba(255,255,255,.08); }
body.v2 header.nav .ss-btn-kbd { border: 1px solid rgba(255,255,255,.35); border-radius: 4px; color: #DCE6F5; }
body.v2 header.nav .lang-switch, body.v2 header.nav .lang-picker-btn { color: #DCE6F5; }
body.v2 .nav-caret { color: var(--v3-ink-3); }

/* ---- hero: deep navy, the free-call card on the right ---- */
body.v2 main .hero, body.v2 main .page-banner { padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--v3-navy-line); background: linear-gradient(180deg, var(--v3-hero-a) 0%, var(--v3-hero-b) 100%) !important; }
body.v2 main :is(.hero, .page-banner) h1 { color: #FFFFFF; max-width: 20ch; }
body.v2 main :is(.hero, .page-banner) .lead { color: #DCE6F5; max-width: 58ch; font-size: 1.15rem; }
body.v2 main :is(.hero, .page-banner) .lead a { color: var(--v3-cyan-bright); }
body.v2 main :is(.hero, .page-banner) .lead strong { color: #FFFFFF; }
body.v2 main :is(.hero, .page-banner) :is(.wc-promise, .wc-founder-line, .p1783-promise, .p172-book-note, .p196-asks, .ct-mail) { color: #C7D2E4; font-size: 1rem; }
body.v2 main :is(.hero, .page-banner) :is(.wc-promise, .p1783-promise) strong { color: #F8FAFC; }
body.v2 main :is(.hero, .page-banner) .p196-asks button, body.v2 main :is(.hero, .page-banner) .p172-book-note a, body.v2 main :is(.hero, .page-banner) .ct-mail a, body.v2 main :is(.hero, .page-banner) .p1014-link { color: var(--v3-cyan-bright); }
body.v2 main :is(.hero, .page-banner) .hero-cta { gap: 10px 14px; margin-top: 24px; }
body.v2 main :is(.hero, .page-banner) .hero-cta > .btn-primary { padding: 14px 26px; font-size: 1.05rem; }
body.v2 main .hero .proof-chips { display: none; }
body.v2 main .hero .wc-founder-line { display: none; }
body.v2 main .hero .hero-stats { border-top: 1px solid var(--v3-navy-line); margin-top: 28px; padding-top: 20px; gap: 24px; max-width: 640px; }
body.v2 main .hero .hero-stat .num { color: #FFFFFF !important; font-family: var(--v2-display); font-size: 1.6rem; font-weight: 700; }
body.v2 main .hero .hero-stat .lbl { color: #C7D2E4; font-size: .95rem; }
/* js/p196.js auto-reinserts a ".p196-asks" strip right after the booking link if none follows it -- the hero already carries its own copy of the quieter asks in .v3-after, so hide the auto one here */
body.v2 main .hero .p196-asks { display: none !important; }
/* the free-call card: stays a white card, same as the rest of the site's cards */
body.v2 .hero-aside { background: var(--v3-white); border: 1px solid var(--v3-line-2); border-radius: 12px; padding: 24px 26px; box-shadow: var(--v3-shadow); align-self: start; max-width: 460px; width: 100%; }
body.v2 .hero-aside .hero-aside-h { font-family: var(--v2-display); font-size: 1.2rem; font-weight: 700; color: var(--v3-ink); margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--v3-line); }
body.v2 .hero-aside ul { list-style: none; margin: 0; padding: 0; }
body.v2 .hero-aside li { position: relative; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--v3-line); color: var(--v3-ink); font-size: 1rem; line-height: 1.45; }
body.v2 .hero-aside li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--v3-teal); }
body.v2 .hero-aside li:last-child { border-bottom: 0; }
body.v2 .hero-aside .hero-aside-note { margin: 10px 0 0; color: var(--v3-ink-3); font-size: .95rem; }
@media (min-width: 981px) {
  body.v2 main :is(.hero, .page-banner) > .container:has(> .hero-aside), body.v2 main .hero > .container.hero-grid:has(.hero-aside) { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr) !important; gap: 48px !important; align-items: start !important; }
  body.v2 main :is(.hero.hm-plain, .page-banner) > .container:has(> .hero-aside) > *:not(.hero-aside) { grid-column: 1; }
  body.v2 main :is(.hero.hm-plain, .page-banner) > .container:has(> .hero-aside) > .hero-aside { grid-column: 2; grid-row: 1 / span 20; justify-self: end; margin-top: 8px; }
  body.v2 main .page-banner > .container:has(> .hero-aside) > * { margin-left: 0; max-width: 680px; }
  body.v2 main .hero > .container.hero-grid > .hero-aside { justify-self: end; align-self: start !important; margin-top: 8px; }
  body.v2 .hm-plain > .container > *, body.v2 .hm-plain > .container > div > * { max-width: min(680px, 100%); }
}
@media (max-width: 980px) { body.v2 .hero-aside { margin-top: 24px; max-width: none; } }
/* drawings: a navy panel in the (light) section under the hero -- it's the one dark accent against the grey/white body */
/* the panel is always navy (it's the brand's line-drawing treatment), whichever zone it sits in, so its caption stays light text regardless */
body.v2 .hero-fig { margin: 0; max-width: 960px; background: var(--v3-panel); border: 1px solid var(--v3-navy-line); border-radius: var(--v3-radius); padding: 14px; }
body.v2 .hero-fig img { display: block; width: 100%; height: auto; }
body.v2 .hero-fig figcaption { color: #C7D2E4; font-size: .95rem; margin-top: 10px; }
body.v2 main > section.v3-after { padding-top: 36px !important; padding-bottom: 36px !important; }
body.v2 main > section.v3-after .section-head { margin-bottom: 16px; }
body.v2 main > section.v3-after h2 { font-size: 1.3rem; }
/* the cost-guide link and the "not ready" asks moved out of the hero into .v3-after (markup change); style them quietly there */
body.v2 main .v3-after .hero-fig { margin-bottom: 20px; }
body.v2 main .v3-after .p1014-link { display: inline-block; margin-bottom: 10px; font-weight: 600; }
body.v2 main .v3-after .p196-asks { color: var(--v3-ink-3); font-size: .95rem; }
body.v2 main .v3-after .p196-asks button { background: none; border: 0; padding: 0; font: inherit; color: var(--v3-teal); cursor: pointer; }
body.v2 main .v3-after .p196-dot { color: var(--v3-line-2); margin: 0 4px; }
/* the glance panel on service pages becomes a light strip straight under the hero */
body.v2 .p192-glance dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; }
body.v2 .p192-glance dl > div { background: var(--v3-white) !important; border: 1px solid var(--v3-line) !important; border-radius: var(--v3-radius); padding: 16px 18px; }
body.v2 .p192-glance dt { color: var(--v3-ink-3); font-size: .9rem; font-weight: 500; margin-bottom: 6px; }
body.v2 .p192-glance dd { color: var(--v3-ink); margin: 0; font-weight: 500; }

/* ---- surfaces in light sections ---- */
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.card, .faq-item, .form, .p196-card, .lp-card, .aud-card, .p15-dl-card, .p193-xl-card, .stat-item, .p1783-form, .lp-quote-card, .wc-service, .wc-trust, .wc-steps li, .tech-chip, .cap-cell, .spec-card, .industry-card, .case-card, .post-card, .refcard, .testi-card, .process-step) {
  background: var(--v3-white) !important; border: 1px solid var(--v3-line) !important; border-radius: var(--v3-radius) !important; box-shadow: var(--v3-shadow) !important;
}
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark):nth-of-type(even) :is(.card, .faq-item, .stat-item, .tech-chip, .wc-steps li) { background: var(--v3-paper) !important; box-shadow: none !important; }
body.v2 main .card { padding: 24px; }
body.v2 main .card h3 { margin-top: 0; }
body.v2 main .faq-item summary { color: var(--v3-ink); font-weight: 600; }
body.v2 main .faq-item[open] { border-color: var(--v3-line-2) !important; }
body.v2 main :is(.card, .wc-steps li) :is(a, .btn-primary) { }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(table) { background: var(--v3-white); border: 1px solid var(--v3-line); border-radius: var(--v3-radius); overflow: hidden; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(th, td) { border-color: var(--v3-line) !important; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) th { background: var(--v3-paper) !important; color: var(--v3-ink); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) tr:nth-child(even) td { background: transparent; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(input, textarea, select) { background: var(--v3-white) !important; border: 1px solid var(--v3-line-2) !important; border-radius: 6px !important; color: var(--v3-ink) !important; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(input, textarea, select):focus { border-color: var(--v3-teal) !important; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(input, textarea)::placeholder { color: #94A3B8; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .tech-chip, body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .wc-chip, body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .cap-cell { color: var(--v3-ink); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.tech-chip, .wc-chip, a.sector-chip, .cap-cell):hover { border-color: var(--v3-teal) !important; color: var(--v3-teal) !important; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .wc-steps li::before { border-color: var(--v3-teal); color: var(--v3-teal); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.check, .tick, li.check)::before, body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .list-check li::before { color: var(--v3-teal); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) svg.ic, body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .check-ic { color: var(--v3-teal); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .brand-strip li span { color: var(--v3-ink-3); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) blockquote { border-left: 3px solid var(--v3-line-2); color: var(--v3-ink-2); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .section-head p { color: var(--v3-ink-2); }
/* the booking block and the closing CTA band stay navy, with the one cyan button */
body.v2 main .cta-banner { background: var(--v3-panel) !important; border: 1px solid var(--v3-navy-line) !important; border-radius: var(--v3-radius) !important; color: #F1F5F9; padding: 40px; }
body.v2 main .cta-banner :is(h2, h3) { color: #F8FAFC !important; }
body.v2 main .cta-banner :is(p, li) { color: #DCE6F5 !important; }
body.v2 main .cta-banner a:not(.btn), body.v2 main .cta-banner .p196-asks button { color: #67E8F9 !important; }
body.v2 main .cta-banner .btn-ghost { background: transparent !important; color: #F1F5F9 !important; border-color: #3B4A6B !important; }
body.v2 main > section#book, body.v2 main > section.p172-book { border-top: 1px solid var(--v3-navy-line); }
body.v2 main > section#book :is(h2, h3), body.v2 main > section.p172-book :is(h2, h3) { color: #F8FAFC; }
body.v2 main > section#book :is(p, li, label), body.v2 main > section.p172-book :is(p, li, label) { color: #CBD5E1; }
body.v2 .p172-cal { background: var(--v3-navy-2) !important; border: 1px solid var(--v3-navy-line) !important; border-radius: var(--v3-radius) !important; }
/* /contact: the calendar card is navy inside the light page */
body.v2 main > section .m177-contact-cards > #book.card, body.v2 .m177-contact-cards > #book { background: var(--v3-panel) !important; border: 1px solid var(--v3-navy-line) !important; color: #F1F5F9; --text: #F1F5F9; --muted: #C7D2E4; }
body.v2 main > section .m177-contact-cards > #book :is(h3) { color: #F8FAFC !important; }
body.v2 main > section .m177-contact-cards > #book :is(p, summary, label) { color: #DCE6F5 !important; }
body.v2 main > section .m177-contact-cards > #book a:not(.btn) { color: #67E8F9 !important; }
body.v2 main > section .m177-contact-cards > #book :is(input, textarea) { background: var(--v3-navy-2) !important; border: 1px solid #3B4A6B !important; color: #F1F5F9 !important; }

/* ---- dark drawings (img/wc/v2) sit in a navy frame on light sections ---- */
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .dg-fig { background: var(--v3-panel); border: 1px solid var(--v3-line); border-radius: var(--v3-radius); padding: 16px; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .dg-fig figcaption { color: var(--v3-ink-3); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) picture > img[src*="/img/wc/v2/"] { background: var(--v3-panel); border: 1px solid var(--v3-navy-line); border-radius: var(--v3-radius); padding: 16px; box-sizing: border-box; }

/* ---- footer ---- */
body.v2 footer.footer { background: var(--v3-navy) !important; border-top: 1px solid var(--v3-navy-line); color: #CBD5E1; }
body.v2 footer h4 { color: #F8FAFC; }
body.v2 footer a { color: #CBD5E1; }
body.v2 footer a:hover { color: #FFFFFF; }
body.v2 footer p, body.v2 footer li { color: #C7D2E4; }
body.v2 footer input { background: var(--v3-navy-2) !important; border: 1px solid #3B4A6B !important; color: #F1F5F9 !important; border-radius: 6px !important; }

/* ---- cookie banner, dialogs, search, phone bars ---- */
body.v2 .cookie-banner { background: #FFFFFF !important; border: 1px solid var(--v3-line-2) !important; border-radius: var(--v3-radius) !important; color: var(--v3-ink); box-shadow: 0 12px 32px rgba(2, 6, 23, .25) !important; }
body.v2 .cookie-banner :is(p, span, .cookie-text) { color: var(--v3-ink-2); }
body.v2 .cookie-banner a { color: var(--v3-teal); }
body.v2 .cookie-banner [data-consent]:not([data-consent="accept"]) { background: var(--v3-white) !important; color: var(--v3-ink) !important; border: 2px solid var(--v3-line-2) !important; border-radius: var(--v3-radius) !important; }
body.v2 .cookie-banner [data-consent="accept"] { border-radius: var(--v3-radius) !important; }
body.v2 .cookie-banner-categories, body.v2 .cookie-banner-categories label { color: var(--v3-ink-2); }
body.v2 .p196-dlg { background: var(--v3-white) !important; color: var(--v3-ink); border: 1px solid var(--v3-line-2) !important; border-radius: var(--v3-radius) !important; --text: var(--v3-ink); --muted: var(--v3-ink-3); --surface: var(--v3-white); --border: var(--v3-line); }
body.v2 .p196-dlg :is(h3) { color: var(--v3-ink); }
body.v2 .p196-dlg :is(p, label) { color: var(--v3-ink-2) !important; }
body.v2 .p196-dlg :is(input, textarea) { background: var(--v3-white) !important; border: 1px solid var(--v3-line-2) !important; color: var(--v3-ink) !important; border-radius: 6px !important; }
body.v2 .p196-dlg a { color: var(--v3-teal); }
body.v2 .site-search-modal { background: var(--v3-white); border: 1px solid var(--v3-line-2); border-radius: var(--v3-radius); color: var(--v3-ink); }
body.v2 .ss-input { color: var(--v3-ink); }
body.v2 .ss-inputwrap { border-bottom: 1px solid var(--v3-line); }
body.v2 .ss-result { color: var(--v3-ink); border-bottom: 1px solid var(--v3-line); }
body.v2 .ss-result:hover, body.v2 .ss-result.is-active { background: var(--v3-paper); }
body.v2 .ss-r-title { color: var(--v3-ink); }
body.v2 .ss-r-desc, body.v2 .ss-hint, body.v2 .ss-empty { color: var(--v3-ink-3); }
body.v2 .ss-r-kind { color: var(--v3-teal); }
body.v2 .ss-close { color: var(--v3-ink-3); border: 1px solid var(--v3-line-2); border-radius: 6px; background: transparent; }
body.v2 .wc-sticky, body.v2 #lp-sticky { background: var(--v3-paper) !important; border-top: 1px solid var(--v3-line-2) !important; }
body.v2 .m177-fold-btn { background: var(--v3-white); border: 1px solid var(--v3-line-2); color: var(--v3-ink); border-radius: var(--v3-radius); }

/* ---- phones ---- */
@media (max-width: 760px) {
  body.v2 main .hero, body.v2 main .page-banner { padding: 28px 0 28px; }
  body.v2 main :is(.hero, .page-banner) h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
  body.v2 main :is(.hero, .page-banner) .lead { font-size: 1.05rem; }
  body.v2 .hero-fig { margin-top: 24px; }
  body.v2 main > section.section, body.v2 main > section.section-sm { padding-top: 40px; padding-bottom: 40px; }
  body.v2 h2 { font-size: 1.45rem; }
  body.v2 main .card { padding: 18px; }
  body.v2 header.nav .nav-links { background: var(--v3-white) !important; border-top: 1px solid var(--v3-line); }
}
@media (max-width: 980px) {
  body.v2 header.nav .nav-links { background: var(--v3-white) !important; }
  body.v2 .nav-has-sub.open > .nav-submenu { background: var(--v3-paper) !important; }
}

/* ---- leftovers from the navy design that carried their own colour ---- */
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .neutrality-mark { color: var(--v3-teal) !important; }
body.v2 .p192-routes .p192-rh { font-size: 1.15rem !important; font-weight: 600; letter-spacing: 0 !important; color: var(--v3-ink) !important; font-family: var(--v2-display); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.check-list li::before, .benefits li::before, .wc-list li::before, .tick-list li::before, .list-tick li::before, ul.checks li::before) { background: var(--v3-teal) !important; border-color: var(--v3-teal) !important; color: #FFFFFF !important; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) svg[class*="check"], body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .ic-check { color: var(--v3-teal); }
/* phones: the hero drawing waits until the body of the page (the Book button and the first lines come first) */
@media (max-width: 760px) { body.v2 .hero-fig { display: none; } }
/* header fits 1280px laptops: the logo is the Home link, the text links are a touch tighter */
@media (min-width: 981px) {
  body.v2 header.nav .nav-links > li:has(> a[data-i18n="nav.home"]) { display: none; }
  body.v2 header.nav .nav-links > li > a:not(.btn) { font-size: .92rem; padding: 8px 8px; }
  body.v2 header.nav .nav-links { gap: 0; }
}
/* text that carried its own navy-design colour (cyan, white, light slate) inside light sections */
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(strong, b, .wc-kpi, .wc-service-name, .wc-kpi-cta, .ladder-num, .cap-num, .spec-label, [class*="-num"], [class*="-label"], [class*="-kicker"], .num) { color: var(--v3-ink) !important; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.ladder-num, .cap-num, .spec-label, .stat-num, .num) { color: var(--v3-teal) !important; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .rescue-num { color: #B45309 !important; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(span, small, em, cite, time) { color: inherit; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.card, li, p) > span:not([class]) { color: var(--v3-ink-2); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) button:not(.btn):not([class*="toggle"]):not(.m177-fold-btn):not(.m177-ft-btn) { color: var(--v3-teal); }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .p196-asks button, body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .p196-apac button { color: var(--v3-teal) !important; }
/* the call-back form folded inside the navy calendar card on /contact */
body.v2 main > section .m177-contact-cards > #book :is(.form, details, .p192-cb) { background: var(--v3-navy-2) !important; border: 1px solid var(--v3-navy-line) !important; border-radius: var(--v3-radius) !important; }
body.v2 main > section .m177-contact-cards > #book :is(label, .p172-book-priv, summary) { color: #DCE6F5 !important; }
body.v2 main > section .m177-contact-cards > #book :is(.p172-book-priv a, summary) { color: #67E8F9 !important; }
body.v2 main > section .m177-contact-cards > #book .p196-apac button, body.v2 main > section .m177-contact-cards > #book button:not(.btn) { color: #67E8F9 !important; }
/* small labels above headings are not part of the design */
body.v2 main .cap-num, body.v2 main .spec-label, body.v2 main .p186-lbl + .p186-sr { display: none !important; }
/* "Related:" links become a row of tags before the footer, so there is always somewhere to go next */
body.v2 main section.rel-links p { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 1rem; }
body.v2 main section.rel-links p a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--v3-line-2); border-radius: 999px; background: var(--v3-white); color: var(--v3-ink) !important; text-decoration: none; }
body.v2 main section.rel-links p a:hover { border-color: var(--v3-teal); color: var(--v3-teal) !important; }
/* ---- home: one browse section instead of three chip walls ---- */
body.v2 .v3-browse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
body.v2 .v3-browse-col h3 { font-size: 1rem; color: var(--v3-ink-3); font-weight: 600; margin: 0 0 12px; }
body.v2 .v3-browse-col .tech-strip { display: flex; flex-wrap: wrap; gap: 8px; }
body.v2 .v3-browse-col .tech-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; font-size: .95rem; font-weight: 500; margin: 0; }
@media (max-width: 900px) { body.v2 .v3-browse-grid { grid-template-columns: 1fr; gap: 20px; } }
/* chips everywhere: one pill style */
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.tech-chip, .wc-chip, a.sector-chip, .proof-chip) { border-radius: 999px !important; background: var(--v3-white) !important; border: 1px solid var(--v3-line-2) !important; color: var(--v3-ink) !important; font-weight: 500; box-shadow: none !important; }
body.v2 .v3-tool { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
body.v2 .v3-tool .btn { margin-top: auto; }
/* worked examples on the home page: text cards (the monogram "logos" stay hidden, the design has no invented logos) */
body.v2 #customers .logowall { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 24px; }
body.v2 #customers .logo-tile { display: block !important; background: var(--v3-white); border: 1px solid var(--v3-line); border-radius: var(--v3-radius); padding: 20px; box-shadow: var(--v3-shadow); text-decoration: none; }
body.v2 #customers .logo-tile:hover { border-color: var(--v3-teal); }
body.v2 #customers .logo-mono { display: none !important; }
body.v2 #customers .logo-name { color: var(--v3-ink); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
body.v2 #customers .logo-sector { color: var(--v3-ink-3); font-size: .95rem; }
body.v2 #customers .logo-cs { color: var(--v3-teal); font-size: .95rem; margin-top: 10px; }
@media (max-width: 900px) { body.v2 #customers .logowall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { body.v2 #customers .logowall { grid-template-columns: 1fr; } }

/* ---- "In depth" group: the long tail of a page folds under one heading, so the booking path stays short ---- */
body.v2 main > details.v3-more { background: var(--v3-paper); border-top: 1px solid var(--v3-line); }
body.v2 main > details.v3-more > summary { list-style: none; cursor: pointer; max-width: var(--container, 1240px); margin: 0 auto; padding: 28px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--v3-ink); font-family: var(--v2-display); font-weight: 700; font-size: 1.35rem; }
body.v2 main > details.v3-more > summary::-webkit-details-marker { display: none; }
body.v2 main > details.v3-more > summary span { font-family: var(--font-sans); font-weight: 500; font-size: 1rem; color: var(--v3-teal); white-space: nowrap; }
body.v2 main > details.v3-more > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--v3-teal); border-bottom: 2px solid var(--v3-teal); transform: rotate(45deg); margin: -4px 4px 0 0; flex: 0 0 auto; transition: transform .15s; }
body.v2 main > details.v3-more[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
body.v2 main > details.v3-more[open] > summary span { display: none; }
body.v2 main > details.v3-more > summary:hover { color: var(--v3-teal); }
body.v2 main > details.v3-more section { border-top: 1px solid var(--v3-line); }

/* ---- ad landing pages (body.lp): header + hero join the navy dark zone, same as the main site ---- */
body.v2.lp .lp-header a:not(.lp-btn) { color: #DCE6F5; }
body.v2.lp .lp-header .lp-logo { filter: none; } /* always the on-dark mark, never the light-background variant */
body.v2.lp .lp-hero { padding-bottom: 32px; border-bottom: 1px solid var(--v3-navy-line); }
body.v2.lp .lp-hero h1 { color: #FFFFFF; }
body.v2.lp .lp-hero :is(p, li, label) { color: #DCE6F5; }
body.v2.lp .lp-hero a:not(.lp-btn), body.v2.lp .lp-hero .p196-asks button { color: var(--v3-cyan-bright); }
body.v2.lp .lp-hero .lp-result { border-left-color: var(--v3-navy-line); color: #DCE6F5; }
body.v2.lp .lp-hero .lp-result blockquote { color: #F1F5F9; }
/* the "not ready" strip repeats the booking link right under it -- hide it in the hero like the main site does, it's still reachable from the footer card */
body.v2.lp .lp-hero .p196-asks { display: none !important; }
body.v2.lp .lp-hero :is(input, textarea) { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.25) !important; color: #FFFFFF !important; }
body.v2.lp .lp-hero :is(input, textarea)::placeholder { color: #9FB0CC; }
body.v2.lp .lp-hero label { color: #C7D2E4; }
/* keep "ask for a second opinion" as the one outline button in the hero -- .lp-btn alone is gold, this variant must win over it */
body.v2.lp .lp-final { padding: 48px 0 56px; }
body.v2.lp .lp-final :is(h2, h3) { color: #F8FAFC; }
body.v2.lp .lp-final :is(p, li) { color: #CBD5E1; }
body.v2.lp .lp-trust { background: var(--v3-white) !important; }
body.v2.lp main section.lp-section { padding-top: 40px !important; padding-bottom: 40px !important; }

/* ---- phone menu: one list, Book first, languages as a short row of codes ---- */
@media (max-width: 980px) {
  body.v2 header.nav .nav-links.open { display: flex; flex-direction: column; gap: 0; padding: 8px 0 20px; background: var(--v3-white) !important; border-top: 1px solid var(--v3-line); max-height: calc(100dvh - 72px); overflow: auto; box-shadow: 0 16px 40px rgba(15, 23, 42, .14); }
  /* the open phone menu is a white panel inside the navy header: give it the light-zone tokens (23 Oct 2026) */
  body.v2 header.nav .nav-links.open { --bg: var(--v3-white); --surface: var(--v3-white); --surface-2: var(--v3-paper); --border: var(--v3-line); --border-soft: var(--v3-line); --text: var(--v3-ink); --muted: var(--v3-ink-3); --muted-2: var(--v3-ink-3); --accent: var(--v3-teal); --accent-deep: var(--v3-teal-deep); color: var(--v3-ink); }
  body.v2 header.nav .nav-links > li { border-bottom: 1px solid var(--v3-line); margin: 0; }
  body.v2 header.nav .nav-links > li > a:not(.btn), body.v2 header.nav .nav-links > li > .nav-sub-trigger { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 24px; font-size: 1.05rem; font-weight: 500; color: var(--v3-ink); border-radius: 0; }
  body.v2 header.nav .nav-links > li > a:not(.btn):hover { background: var(--v3-paper); }
  /* a tapped (hovered/active/open) top-level item kept the desktop white-on-navy hover colour on the white phone menu */
  body.v2 header.nav .nav-links > li > a:not(.btn):hover, body.v2 header.nav .nav-links > li > a.active:not(.btn), body.v2 header.nav .nav-links > li.open > a:not(.btn), body.v2 header.nav .nav-links > li.nav-has-sub:hover > a.nav-sub-trigger { color: var(--v3-ink) !important; background: var(--v3-paper); }
  body.v2 header.nav .nav-links .nav-caret { color: var(--v3-ink-3); font-size: .9rem; }
  body.v2 header.nav .nav-links > li:has(> .nav-cta) { order: -1; border-bottom: 0; padding: 8px 24px 16px; }
  body.v2 header.nav .nav-links > li > .nav-cta { width: 100%; min-height: 48px; font-size: 1rem; }
  body.v2 header.nav .nav-links > li:has(> a[data-i18n="nav.home"]) { display: none; }
  body.v2 header.nav .nav-submenu, body.v2 header.nav .nav-mega { background: var(--v3-paper) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 6px 0 10px; }
  body.v2 header.nav .nav-submenu a, body.v2 header.nav .nav-mega a { display: block; padding: 10px 24px 10px 36px; font-size: .98rem; color: var(--v3-ink-2); }
  body.v2 header.nav .nav-mega-h, body.v2 header.nav .nav-tools-label { padding: 10px 24px 4px 36px; color: var(--v3-ink-3); }
  body.v2 header.nav .nav-mega-all a { color: var(--v3-ink); font-weight: 600; }
  body.v2 .m177-lang.v2-lang-li { display: flex !important; align-items: center; gap: 10px; padding: 14px 24px 0; border-bottom: 0; }
  body.v2 .m177-lang .m177-lang-h { font-size: .9rem; letter-spacing: 0; text-transform: none !important; color: var(--v3-ink-3); margin: 0; }
  body.v2 .m177-lang .m177-lang-list { gap: 4px; }
  body.v2 .m177-lang .m177-lang-list a { min-height: 36px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--v3-line-2); color: var(--v3-ink-2); font-size: 0; }
  body.v2 .m177-lang .m177-lang-list a::after { content: attr(hreflang); text-transform: uppercase !important; font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
  body.v2 .m177-lang .m177-lang-list a[aria-current] { background: var(--v3-teal); border-color: var(--v3-teal); color: #FFFFFF; }
}

/* ---- search panel: one component ---- */
body.v2 .site-search-overlay { background: rgba(5, 10, 25, .7) !important; backdrop-filter: blur(4px); }
body.v2 .site-search-modal { border-radius: var(--v3-radius); border: 1px solid var(--v3-line-2); box-shadow: 0 24px 60px rgba(2, 6, 23, .35) !important; overflow: hidden; }
body.v2 .ss-inputwrap { padding: 12px 16px; gap: 10px; }
body.v2 .ss-ico { color: var(--v3-ink-3); }
body.v2 .ss-input { font-size: 1.05rem; color: var(--v3-ink) !important; -webkit-text-fill-color: var(--v3-ink); padding: 8px 0; border: 0 !important; box-shadow: none !important; outline: none !important; background: transparent !important; }
body.v2 .ss-close { font-size: .8rem; padding: 4px 8px; }
body.v2 .ss-results { padding: 6px; max-height: 60vh; }
body.v2 .ss-result { display: grid; grid-template-columns: 84px 1fr; gap: 2px 12px; align-items: baseline; padding: 10px 12px; border: 0; border-radius: 6px; }
body.v2 .ss-result + .ss-result { margin-top: 0; border-top: 1px solid var(--v3-line); border-radius: 0; }
body.v2 .ss-result:hover, body.v2 .ss-result.is-active { background: var(--v3-paper); }
body.v2 .ss-r-kind { grid-column: 1; grid-row: 1 / span 2; font-size: .78rem !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 500; color: var(--v3-ink-3); background: var(--v3-paper); border: 1px solid var(--v3-line); border-radius: 4px; padding: 2px 8px; justify-self: start; align-self: start; margin: 2px 0 0; }
body.v2 .ss-r-title { grid-column: 2; font-size: 1rem; font-weight: 600; color: var(--v3-ink); }
body.v2 .ss-r-desc { grid-column: 2; font-size: .9rem; color: var(--v3-ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.v2 .ss-hint { padding: 10px 16px; font-size: .85rem; color: var(--v3-ink-3); border-top: 1px solid var(--v3-line); background: var(--v3-paper); }
@media (max-width: 760px) { body.v2 .ss-result { grid-template-columns: 1fr; } body.v2 .ss-r-kind { grid-row: auto; margin-bottom: 2px; } }

/* one left edge in the body of the page: the old centred prose blocks line up with their headings */
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final) :is(.container, .container > p, .container > div > p, .section-head, .section-head p) { text-align: left !important; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final) .container > p { margin-left: 0 !important; max-width: 66ch; }
body.v2 #customers .logo-tile, body.v2 .yt-note, body.v2 .p186-lbl { text-align: left !important; }
body.v2 main .cta-banner p { max-width: 62ch; }
@media (max-width: 760px) { body.v2 main :is(.hero, .page-banner) h1 { max-width: none; } }
/* the footer paints its own background on its inner blocks too, so contrast checks read white-on-navy, not white-on-page */
body.v2 footer.footer .container, body.v2 footer.footer .v2-langs, body.v2 footer.footer .footer-grid { background: var(--v3-navy); }
body.v2 footer.footer .v2-langs a { color: #DCE6F5; }
body.v2 main .p15-dl-card a, body.v2 main .dl-gate a { color: var(--v3-teal); }
/* small print keeps full-strength link colour (the old .p192-small faded its links below 4.5:1) */
body.v2 main .p192-small, body.v2 main .p192-small a, body.v2 main section:not(.p172-book):not(.v3-dark) .p172-book-priv a { opacity: 1 !important; color: var(--v3-teal) !important; }
body.v2 main :is(.p172-book, #book) .p172-book-priv a { color: #67E8F9 !important; opacity: 1 !important; }
/* /contact: the calendar card reserves its height before Calendly answers, so the phone card below never jumps (CLS) */
body.v2 .m177-contact-cards > #book { min-height: 760px; }
/* phones open Calendly from the Book button (no inline calendar), so the #book card no longer reserves 700px; only when the inline calendar is shown */
@media (max-width: 760px) { body.v2 .m177-contact-cards > #book { min-height: 0; } body.v2 .m177-contact-cards > #book:has([data-p172-book="contact"]:not([hidden])) { min-height: 700px; } }

/* the one-second filter line right under an ad-landing H1, telling a mismatched "fleet" searcher this isn't their page
   before they read any further -- quieter than the H1 but still easy to read on the navy hero */
body.v2 .lp-scope-note, body.v2 .hero .lp-scope-note { margin: -6px 0 10px; font-size: .98rem; color: #9FB0CC; }

/* the hint line and the empty space in search results now focus the input on tap instead of doing nothing (see js/main.js) */
body.v2 .ss-hint, body.v2 .ss-results { cursor: text; }

/* the hero proof card looks tappable (border, shadow, a quote) but only its one small text link worked -- stretch
   that link over the whole card so a tap anywhere on it goes to the case study, not just the three words at the end */
body.v2 .lp-result { position: relative; cursor: pointer; }
body.v2 .lp-result:hover { border-color: rgba(255,255,255,.35); }
body.v2 .lp-result-src a::after { content: ""; position: absolute; inset: 0; }


/* ==== 23 Oct 2026 sitewide contrast pass (WCAG AA): every page swept at 390 and 1440 px, all locales ==== */

/* -- contrast group A -- */
/* Contrast fixes A (23 Oct 2026): dark (navy) components that sit inside light sections picked up the light-zone
   ink/teal colours from the broad "light zone" rules, e.g. the "Not ready for a call?" row inside the navy
   .cta-banner. These rules repeat the light-zone selector prefix so they win, and only apply inside the dark boxes. */

/* navy .cta-banner and the navy hero figure on the home page: grey text, cyan links */
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.cta-banner, .hero-fig.v3-fig) .p196-asks,
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.cta-banner, .hero-fig.v3-fig) .p196-asks > span,
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.cta-banner, .hero-fig.v3-fig) .p196-dot { color: #C7D2E4 !important; }
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.cta-banner, .hero-fig.v3-fig) .p196-asks button,
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .hero-fig.v3-fig a:not(.btn) { color: #67E8F9 !important; }

/* dark figure captions (demo guide flow figure, industries card figures) */
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) :is(.v2-fig, .dg-fig) figcaption { color: #C7D2E4 !important; }

/* whitepaper download form: navy card in the hero, its privacy link was teal */
body.v2 main .dl-gate a:not(.btn), body.v2 main .p15-dl-card a:not(.btn) { color: #67E8F9; }

/* contact form: the selected chip is teal, its label text stayed ink */
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .chip-group input[type="radio"]:checked + label,
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .chip-group input[type="checkbox"]:checked + label { color: #FFFFFF !important; }

/* military-training quick facts: translucent navy boxes on white rendered mid-grey; make them light cards */
body.v2 main section.p193-facts .p193-facts-grid > div { background: var(--v3-paper) !important; border: 1px solid var(--v3-line); }

/* -- contrast group C -- */
/* ---- Contrast fixes C (23 Oct 2026): tool and widget components that kept dark-zone colours on light panels,
   or light-zone colours on dark code blocks, after the v3 light/dark zone switch ---- */

/* Code samples (hybrid-stack, location-intelligence, insights/beyond-x-y): the <pre> keeps its dark #0a0f1f
   background, so its text and syntax colours must be the light set. !important beats the light-zone
   ":is(span, ...) { color: inherit }" rule that flattened every syntax colour to dark ink. */
body.v2 pre.arch-pre, body.v2 pre.arch-pre code { color: #E2E8F0 !important; }
body.v2 pre.arch-pre .ak-k { color: #67E8F9 !important; }
body.v2 pre.arch-pre .ak-s { color: #86EFAC !important; }
body.v2 pre.arch-pre .ak-n, body.v2 pre.arch-pre .ak-s .ak-n { color: #F9A8D4 !important; }

/* AI pipeline panel (demo, "From a moving dot to a decision"): its frame is dark, so the inner panels and chips
   take the dark-zone tokens again instead of the light ones they inherited (white cards in a black frame). */
body.v2 [data-sa="032f8117"] {
  --bg: #0a0f1f; --bg-elev: #131a36; --surface: #131a36; --surface-2: #1a2347;
  --border: #2a3a5c; --border-soft: #2a3a5c;
  --text: #FFFFFF; --muted: #C7D2E4; --muted-2: #C7D2E4; --accent: #67E8F9; --accent-deep: #22D3EE;
  color: #E2E8F0;
}
body.v2 [data-sa="032f8117"] :is(div, p, span) { color: inherit; }
body.v2 [data-sa="032f8117"] [data-sa] { --success: #34D399; }

/* Floor-plan demos (demo, services/cold-chain): the side panel is white, so the stat and KPI tiles follow the
   light palette too (they were black tiles with dark-ink text). Active buttons get white text on teal. */
body.v2 :is(.fp-demo, #fp-home-demo) .fp-stat, body.v2 :is(.fp-demo, #fp-home-demo) .fp-kpi { background: var(--v3-paper, #F1F5F9) !important; border: 1px solid var(--v3-line, #D7DEE8) !important; }
body.v2 :is(.fp-demo, #fp-home-demo) :is(.fp-stat-lbl, .fp-kpi-lbl, .fp-kpi-hint) { color: var(--v3-ink-3, #475569) !important; }
body.v2 :is(.fp-demo, #fp-home-demo) .fp-kpi-val { color: var(--v3-ink, #0F172A) !important; }
body.v2 :is(.fp-demo, #fp-home-demo) .fp-stat-val { color: var(--v3-teal-deep, #0E5468) !important; }
body.v2 :is(.fp-demo, #fp-home-demo) .fp-btn.active, body.v2 :is(.fp-demo, #fp-home-demo) .fp-btn[aria-pressed="true"] { color: #FFFFFF !important; }
body.v2 :is(.fp-demo, #fp-home-demo) .fp-btn.is-gold { background: #F4B942 !important; border-color: #F4B942 !important; color: #0B1220 !important; }

/* hybrid-stack result rows, tech-picker options, insights index cards, FAQ questions: white text on white cards */
body.v2 .hs-row .hs-row-uc { color: var(--v3-ink, #0F172A) !important; }
body.v2 .tp-option .tp-option-title { color: var(--v3-ink, #0F172A) !important; }
body.v2 .post-card h3 a, body.v2 .post-card h3 a.m177-tap { color: var(--v3-ink, #0F172A) !important; }
body.v2 .post-card h3 a:hover { color: var(--v3-teal, #155E75) !important; }
body.v2 details.p1911-faq > summary { color: var(--v3-ink, #0F172A) !important; }

/* method.html stage cards: cyan / green headings on white cards -> the light-zone teal and a dark green */
body.v2 main .grid-2 > .card > h3[data-sa="5c93d8bd"], body.v2 main .grid-2 > .card > h3[data-sa="1cdcb4d7"] { color: var(--v3-teal, #155E75) !important; }
body.v2 main .grid-2 > .card > h3[data-sa="6c46604e"] { color: #047857 !important; }

/* "How it works" stat lines on solution / industry pages: --accent-2 (cyan), --accent-3 and --success (mint) were dark-zone
   colours; inside light sections use teal and a dark green */
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .card { --accent-2: #155E75; --accent-3: #92400E; --success: #047857; }

/* location-intelligence tabs: the active tab is teal, its label must be white */
body.v2 .lidash-tab.active, body.v2 .lidash-tab[aria-selected="true"] { color: #FFFFFF !important; }

/* p196 privacy line: .7 opacity took dark ink to 4.35:1 on white */
body.v2 .p196-priv { opacity: 1 !important; }

/* -- contrast group B -- */
/* ---- Contrast fixes B (23 Oct 2026): dark-zone colours that ended up on light sections ---- */

/* Light sections: the accent and success tokens still held their dark-zone values (#22D3EE, #34D399), which the
   industry/solution "how it works" cards use for their chips and deltas ("AS9100", "-lost assets"): ~1.5:1 on light.
   Same hues, light-zone shades. */
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark),
body.v2 main > details, body.v2 section.tracio-quick-comparisons {
  --accent-2: #155E75; --accent-3: #92400E; --success: #047857;
}

/* Blocks that sit outside the light-zone selector (a <section> outside <main>, a <details> directly under <main>)
   kept the dark-zone text tokens: give them the light-zone set */
body.v2 main > details, body.v2 section.tracio-quick-comparisons {
  --bg: var(--v3-paper); --bg-elev: var(--v3-white); --surface: var(--v3-white); --surface-2: var(--v3-paper);
  --border: var(--v3-line); --border-soft: var(--v3-line);
  --text: var(--v3-ink); --muted: var(--v3-ink-3); --muted-2: var(--v3-ink-3); --accent: var(--v3-teal); --accent-deep: var(--v3-teal-deep);
  color: var(--v3-ink);
}
body.v2 section.tracio-quick-comparisons :is(h1, h2, h3, h4) { color: var(--v3-ink); }
body.v2 main > details .wc-chip { color: var(--v3-teal); border-color: var(--v3-line-2); }
body.v2 main > details .wc-chips-label { color: var(--v3-ink-3); }

/* Case-study result cards: the big figure ("80%+") was hard-coded white for the old dark cards */
body.v2 main section [data-sa="79457949"]:not(#_#_#_) { color: var(--v3-teal); }

/* Case-study quotes and their attribution: hard-coded near-white text, now on white/light sections */
body.v2 main section :is([data-sa="4bcd07ef"], [data-sa="15fe07a7"], [data-sa="6ea1bf3e"], [data-sa="e4ae0e16"]):not(#_#_#_) { color: var(--v3-ink-2); }
body.v2 main section [data-sa="abe826c8"]:not(#_#_#_) { color: var(--v3-ink-3); }

/* Home "programme rescue" ladder badge: #B45309 is 4.16:1 on the light card; one step darker */
body.v2 main section:not(.hero):not(.page-banner):not(.lp-hero):not(.lp-final):not(.p172-book):not(.v3-dark) .ladder-num.rescue-num { color: #92400E !important; }

/* AI-insight badge (home in de/es/fr/it/nl/pl/pt, and /demo): the script sets a light dark-zone colour inline per
   insight type, on a white card. Darker shades of the same hues; the tinted background stays. */
body.v2 #tai-badge:not([data-sa="032f8117"] *)[style*="34, 211, 238"] { color: #0E7490 !important; }
body.v2 #tai-badge:not([data-sa="032f8117"] *)[style*="248, 113, 113"] { color: #B91C1C !important; }
body.v2 #tai-badge:not([data-sa="032f8117"] *)[style*="244, 185, 66"] { color: #92400E !important; }
body.v2 #tai-badge:not([data-sa="032f8117"] *)[style*="79, 124, 255"] { color: #1D4ED8 !important; }

/* -- contrast group D -- */
/* stats band: long values (e.g. "65% → 98%") overflowed the grid column on desktop */
body.v2 .stats-grid > .stat-item { min-width: 0; }
body.v2 .stats-grid .stat-num { overflow-wrap: anywhere; }

/* the /demo AI frame is dark: its step labels and badge keep the bright palette (merged contrast fixes, 23 Oct 2026) */
body.v2 [data-sa="032f8117"] :is([data-sa="724629bb"], [data-sa="a887cf25"], [data-sa="978e88ad"], [data-sa="05d360d2"]) { color: #67E8F9 !important; }