/* One colour scheme for every v4 page (loaded last). Matches the home page:
   flat navy banners, darker flat navy for dark sections, soft sky-blue accent on dark, amber only for booking. */
:root{--theme-hero:#16325c;--theme-dark:#0f2347;--theme-accent:#8fd8f3;--theme-on-dark:#c3d0e6}

/* Page banners */
.detail-hero,.approach-hero,.about-hero,.contact-hero{background:var(--theme-hero);color:var(--theme-on-dark)}
:is(.detail-hero,.approach-hero,.about-hero,.contact-hero) :is(.eyebrow,.kicker){color:var(--theme-accent)}
:is(.detail-hero,.approach-hero,.about-hero,.contact-hero) h1 span{color:var(--theme-accent)}
:is(.detail-hero,.approach-hero,.about-hero,.contact-hero) p{color:var(--theme-on-dark)}
.detail-hero .service-tabs a{border-color:rgba(255,255,255,.22);color:#dbe5f7}
.detail-hero .service-tabs a[aria-current=page]{background:rgba(143,216,243,.16);border-color:var(--theme-accent);color:#fff}

/* Dark sections */
.ai-focus,.band,.band.next-step,.dashboard-demo{background:var(--theme-dark)}
:is(.ai-focus,.band) :is(.eyebrow,.kicker){color:var(--theme-accent)}
.ai-focus .ai-card{border-color:rgba(255,255,255,.14)}
.ai-focus .ai-card .industry-icon{background:rgba(143,216,243,.14);color:var(--theme-accent)}
.ai-focus p,.band p{color:var(--theme-on-dark)}

/* Navigation once scrolled or opened on phones */
nav.scrolled,nav.menu-open{background:rgba(22,50,92,.96)}
.nav-links.open{background:var(--theme-hero)}

/* Home page pieces that still used the old near-black */
.h-cta-card::before{background:linear-gradient(100deg,rgba(15,35,71,.95) 30%,rgba(22,50,92,.82) 60%,rgba(22,50,92,.5))}
.h-cta .eyebrow,.h-dark .eyebrow{color:var(--theme-accent)}
@media (max-width:720px){.h-cta-card::before{background:linear-gradient(180deg,rgba(15,35,71,.86),rgba(15,35,71,.96))}}

/* Booking buttons: soft gold instead of orange-amber */
:root{--amber:#F9C74F;--amber-dk:#B8860B}
.btn-amber{background:#F9C74F;color:#0b1730;box-shadow:0 8px 22px -10px rgba(249,199,79,.55)}
.btn-amber:hover{background:#FBD375}
.nav-links a.btn-amber,.nav-links a.btn-amber:hover{color:#0b1730}

/* Header logo: stacked like the colour logo. The tagline is real text in Title Case, set in a box
   exactly as wide as "ALL SYSTEMS PLUS" (59.5% of the image) and justified, so word gaps adjust
   and the letters are never stretched. Font size tracks the logo height (~0.16x). */
.logo-stack{position:relative;display:block;line-height:0;text-decoration:none}
.logo-stack .logo-img{height:64px;width:auto}
.logo-stack .logo-tag{position:absolute;left:40.3%;width:59.5%;top:65%;line-height:1;white-space:nowrap;text-align:justify;text-align-last:justify;font:600 10.2px Inter,system-ui,sans-serif;letter-spacing:.01em;color:#d3dcec}
.logo-stack .logo-tag i{font-style:normal;color:var(--theme-accent)}
@media (max-width:720px){.logo-stack .logo-img{height:58px}.logo-stack .logo-tag{font-size:9.2px;letter-spacing:0}}
@media (max-width:340px){.logo-stack .logo-img{height:50px}.logo-stack .logo-tag{font-size:7.9px}}

/* Footer logo: same stacked treatment on white, in the logo's own colours */
footer .logo-stack-foot{display:inline-block}
footer .logo-stack-foot .foot-logo{height:68px;width:auto;max-width:none}
footer .logo-stack-foot .logo-tag{font-size:10.8px;color:#6E6E72}
footer .logo-stack-foot .logo-tag i{color:#0A8CDC}

/* Examples page sample dashboard: let its KPI tiles shrink on very small phones */
.dashboard-demo .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.dashboard-demo .kpi{min-width:0;overflow-wrap:anywhere}
.dashboard-demo select{max-width:100%}

/* Contact form: hidden anti-spam field and status messages */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-status{padding:14px 16px;border-radius:12px;font-weight:600;margin:0 0 18px}
.form-status-ok{background:#e7f8ef;border:1px solid #9fdcbc;color:#0f5132}
.form-status-err{background:#fdecec;border:1px solid #f3b5b5;color:#8a1c1c}

/* Launch review (JP, 2026-10-21) */
/* Compact booking button beside ☰ once the menu collapses, so booking is visible on the first screen */
.nav-book{display:none}
@media (max-width:860px){
  .nav-book{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin:0 10px 0 auto;font-size:14px;font-weight:700;border-radius:10px;color:#0b1730}
  .nav-book:hover{color:#0b1730}
  .burger{flex-shrink:0}
}
@media (max-width:420px){
  .logo-stack .logo-img{height:46px}.logo-stack .logo-tag{font-size:7.3px}
  .nav-book{padding:0 13px;margin-right:8px}
}
@media (max-width:340px){.logo-stack .logo-img{height:40px}.logo-stack .logo-tag{font-size:6.3px}.nav-book{padding:0 11px}}
/* Hero: below desktop width the floating chips sit under the dashboard instead of overlapping it */
@media (max-width:1180px){
  .h-hero-live{display:flex;flex-direction:column;align-items:stretch}
  .h-hero-live .dash{order:0}
  .h-hero-live .q-chip,.h-hero-live .ai-chip{position:relative;inset:auto;align-self:flex-start;max-width:100%;margin:14px 0 0;z-index:1}
  .h-hero-live .q-chip{order:1}
  .h-hero-live .ai-chip{order:2}
}
/* Approach steps on tablets: a 2-column grid instead of a sideways-scrolling strip */
@media (min-width:701px) and (max-width:1050px){
  .methodology-grid{grid-template-columns:repeat(2,minmax(0,1fr));overflow-x:visible;padding-bottom:0}
  .methodology-grid .ap-step:last-child{grid-column:1/-1}
}
/* Home: the 3-step flow inside "Choose how we work together" */
.h-flow-compact{margin:8px 0 44px}
.h-flow-compact .h-flow-ic{width:68px;height:68px;margin-bottom:14px;border-radius:20px}
.h-flow-compact .h-flow-ic .ico{width:28px;height:28px}
.h-flow-compact::before{top:34px}
.h-flow-compact h3{font-size:19px}
.h-flow-compact p{font-size:15px}
#engagement .h-flow-link{margin-top:28px}
@media (max-width:720px){
  .h-flow-compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:32px}
  .h-flow-compact li{padding:0}
  .h-flow-compact .h-flow-ic{width:52px;height:52px;border-radius:16px;margin-bottom:10px}
  .h-flow-compact .h-flow-ic .ico{width:22px;height:22px}
  .h-flow-compact h3{font-size:14px;line-height:1.3}
  .h-flow-compact p{display:none}
}
/* Touch devices: text links get a 44px tap height (Apple HIG) */
@media (pointer:coarse){
  .foot ul{gap:0}
  .foot ul a,.body-link,.text-link{display:inline-flex;align-items:center;min-height:44px}
  p .body-link:not(:only-child),p .text-link:not(:only-child){display:inline;min-height:0}
}
/* Footer: technologies without a formal partnership, as plain text */
.partner-tech{text-align:center;font-size:14px;color:#b9cbe4;margin-top:18px}
/* Contact: optional booking link under the form */
.booking-link{margin-top:18px;font-weight:600}
/* Privacy policy page */
.policy-body{max-width:760px}
.policy-body h2{font-size:24px;margin:34px 0 10px}
.policy-body h2:first-child{margin-top:0}