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

/* Cross-document page-navigation fade (view transitions) — motion-safe only */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

    :root {
      /* VCG Brand Palette — from logo */
      --navy:   #1E2B3C;
      --navy-deep: #141F2D;
      --blue:   #0083C9;
      --teal:   #00A8A8;
      --teal-ink: #007878; /* WCAG AA teal for TEXT on light backgrounds */
      --gold:   #FFC857;
      --gold-light: #FFD37E;
      /* Supporting */
      --slate:  #344A62;
      --fog:    #F3F5F8;
      --white:  #FFFFFF;
      --text:   #1A2535;
      --muted:  #6B7F94;
      --border: #D4DCE6;
      --radius: 10px;
      /* Vertical rhythm scale (hero + capability section) */
      --space-1:  8px;
      --space-2: 16px;
      --space-3: 24px;
      --space-4: 40px;
      --space-5: 64px;
      --space-6: 96px;
      /* Display face for h1/h2 (premium serif); body stays Inter */
      --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', sans-serif;
      color: var(--text);
      background: var(--white);
      line-height: 1.65;
      font-size: 16px;
    }

    /* ─── IMAGE SLOTS (drop your own photos in) ─── */
    .img-slot {
      position: relative; overflow: hidden;
      background:
        linear-gradient(135deg, rgba(0,131,201,0.18), rgba(0,168,168,0.18)),
        repeating-linear-gradient(45deg, var(--slate) 0 2px, transparent 2px 14px);
      display: flex; align-items: center; justify-content: center;
    }
    .img-slot::after {
      content: attr(data-label);
      font-size: 11px; font-weight: 600; letter-spacing: 1px;
      text-transform: uppercase; color: rgba(255,255,255,0.55);
      text-align: center; padding: 12px 18px;
      border: 1px dashed rgba(255,255,255,0.35); border-radius: 6px;
      max-width: 80%; line-height: 1.5;
    }
    /* When you add a real image, set it as background and add .has-img */
    .img-slot.has-img::after { display: none; }

    /* ─── SCROLL REVEAL ─── */
    /* Hidden-until-reveal only when JS confirms it will run (body.anim-ready).
       No-JS, print and PDF users see everything immediately. */
    body.anim-ready .reveal {
      opacity: 0; transform: translateY(18px) scale(0.98);
      filter: blur(4px);
      transition: opacity 0.7s cubic-bezier(.22,.61,.36,1),
                  transform 0.7s cubic-bezier(.22,.61,.36,1),
                  filter 0.7s cubic-bezier(.22,.61,.36,1);
    }
    body.anim-ready .reveal.in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

    /* ─── HERO ENTRANCE (subpage heroes, added by site-animations.js; skipped under reduced motion) ─── */
    .hero-in {
      opacity: 0; transform: translateY(16px);
      transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1);
    }
    .hero-in.hero-in-active { opacity: 1; transform: translateY(0); }

    /* ─── CARD HOVER LIFT ─── */
    .ox-fix-card, .route-card, .sector-card, .service-card, .offer-card,
    .outcome-card, .platform-group, .assurance-card {
      transition: transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease, border-color 0.2s ease-out;
    }
    .ox-fix-card:hover, .route-card:hover, .sector-card:hover, .service-card:hover,
    .offer-card:hover, .outcome-card:hover, .platform-group:hover, .assurance-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 34px rgba(20,31,45,0.12);
    }

    /* ─── BUTTON MOTION ─── */
    .btn-white, .nav-cta, .ox-demo-btn, .footer-news-form button {
      transition: transform 0.25s cubic-bezier(.22,.61,.36,1), box-shadow 0.25s ease, opacity 0.2s ease;
    }
    .btn-white:hover, .nav-cta:hover, .ox-demo-btn:hover, .footer-news-form button:hover {
      transform: translateX(3px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.16);
    }

    /* ─── FAQ ACCORDION (smooth height via JS-added wrapper) ─── */
    .vro-faq-panel { overflow: hidden; }

    /* ─── NAV ─── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 48px; height: 70px;
      background: var(--navy-deep);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      transition: height 0.3s ease, box-shadow 0.3s ease;
    }
    /* shrink + shadow once the page is scrolled (class added by site-animations.js;
       nav is fixed, so the height change never shifts page content) */
    nav.nav-scrolled {
      height: 58px;
      box-shadow: 0 10px 30px rgba(6,10,18,0.35);
    }
    nav.nav-scrolled .nav-logo-img { height: 32px; }
    .nav-logo {
      display: flex; align-items: center; gap: 10px; text-decoration: none;
    }
    .nav-logo-img { height: 40px; width: auto; display: block; transition: height 0.3s ease; }
    .logo-mark {
      width: 32px; height: 32px; position: relative; flex-shrink: 0;
      display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
      align-content: center;
    }
    .logo-mark span {
      display: block; border-radius: 2px;
    }
    .logo-mark span:nth-child(1) { background: var(--blue);  width: 12px; height: 12px; }
    .logo-mark span:nth-child(2) { background: var(--teal);  width: 12px; height: 12px; }
    .logo-mark span:nth-child(3) { background: var(--gold);  width: 12px; height: 12px; }
    .logo-mark span:nth-child(4) { background: transparent; }
    .logo-text {
      font-size: 18px; font-weight: 700; color: var(--white); letter-spacing: -0.2px;
    }
    .logo-text span { color: var(--gold); }
    .nav-links { display: flex; gap: 32px; list-style: none; }
    .nav-links a {
      color: rgba(255,255,255,0.65); text-decoration: none;
      font-size: 13.5px; font-weight: 500; transition: color 0.2s ease-out;
      position: relative;
    }
    .nav-links a:not(.nav-cta)::after {
      content: ''; position: absolute; bottom: -3px; left: 0;
      width: 100%; height: 1px; background: currentColor;
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.2s ease-out;
    }
    .nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
    .nav-links a:hover { color: var(--white); }
    .nav-cta {
      background: var(--gold); color: var(--navy) !important;
      padding: 9px 20px; border-radius: 6px; font-weight: 700 !important;
    }
    .nav-cta:hover { background: var(--gold-light) !important; }

    /* ─── HERO ─── */
    .hero {
      /* one viewport tall when content fits; grows (never clips) when it doesn't */
      min-height: 100vh;   /* fallback */
      min-height: 100svh;
      background: var(--navy-deep);
      display: flex; flex-direction: column;
      padding: 118px 48px 0;   /* fixed nav (70px) + clear breathing room */
      position: relative; overflow: hidden;
    }
    .hero-inner { margin-top: auto; margin-bottom: auto; }
    @keyframes kenBurns {
      from { transform: scale(1);    }
      to   { transform: scale(1.06); }
    }
    /* Hero background image slot — darkened so text stays legible */
    .hero-bg {
      position: absolute; inset: 0; z-index: 0;
      /* Soft left-heavy navy scrim for text legibility — image file itself stays unfiltered */
      background:
        linear-gradient(100deg, rgba(20,31,45,0.74) 0%, rgba(20,31,45,0.48) 48%, rgba(20,31,45,0.08) 100%),
        url('../images/hero-bulb.jpg');
      background-size: cover;
      /* 20%: on height-cropped (laptop) viewports this keeps the bulb (image x≈58.5%) as far right
         as possible while still fully visible — measured from the image, not guessed */
      background-position: 20% center;
      animation: kenBurns 20s ease-in-out infinite alternate;
      will-change: transform;
    }
    /* Subtle colour blobs */
    .hero::before {
      content: ''; position: absolute; top: -120px; right: -80px;
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(0,131,201,0.12) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero::after {
      content: ''; position: absolute; bottom: -80px; left: 200px;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(0,168,168,0.1) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero-inner {
      max-width: 880px; position: relative; z-index: 1;
      display: flex; flex-direction: column;
      min-height: calc(100vh - 210px);
      padding-bottom: 88px;
    }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      align-self: flex-start;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.16);
      color: rgba(255,255,255,0.8); font-size: 11px; font-weight: 600;
      letter-spacing: 1.5px; text-transform: uppercase;
      padding: 7px 16px; border-radius: 40px; margin-bottom: 28px;
    }
    .hero-eyebrow::before {
      content: ''; width: 6px; height: 6px;
      background: var(--teal); border-radius: 50%;
    }
    .hero h1 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(32px, 4.2vw, 54px); font-weight: 500;
      color: var(--white); line-height: 1.12; letter-spacing: -1.5px;
      margin-bottom: 14px;
    }
    .hero h1 em { font-style: normal; color: var(--white); }
    /* Rotating line beneath the static h1 — ~40% of h1 size, gold */
    .hero-rule {
      width: 64px; height: 2px; border-radius: 1px;
      background: var(--gold);
      margin: 18px 0 46px;   /* one extra line of air before the descriptive paragraph (Sumit) */
    }
    .hero-rotator {
      font-family: 'Calibri Light', 'Lato', Calibri, 'Segoe UI', sans-serif;
      font-size: clamp(23px, 2.9vw, 34px);
      font-weight: 300;
      color: var(--gold);
      letter-spacing: -0.2px;
      line-height: 1.3;
      margin: 0;
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }
    .hero-sub {
      font-size: 16px; color: rgba(255,255,255,0.6);
      max-width: 45rem; margin-bottom: 30px; line-height: 1.8;
      /* 60→30: reclaims the extra rule→sub air so the pillar row stays near the fold */
    }
    .hero-actions { display: flex; gap: 52px; align-items: center; flex-wrap: wrap; margin: 8px 0 14px; }
    .btn-primary {
      background: var(--gold); color: var(--navy);
      padding: 11px 28px; border-radius: 8px;
      font-weight: 700; font-size: 15px; text-decoration: none;
      display: inline-block; transition: background 0.2s ease-out, transform 0.2s ease-out;
    }
    .btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
    .btn-ghost {
      color: rgba(255,255,255,0.82); font-size: 14px; font-weight: 500;
      text-decoration: none; display: inline-flex; align-items: center;
      gap: 6px;
      padding: 11px 20px; border-radius: 8px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.18);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      transition: color 0.2s, background 0.2s, border-color 0.2s;
    }
    .btn-ghost:hover { color: var(--white); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); }

    .hero-pillars {
      /* floats freely above the hero's bottom edge — no band, no box (Sumit) */
      margin: auto 0 clamp(20px, 4.5vh, 44px);
      display: flex; gap: 0;
      padding: 0;
    }
    .hero-pillar {
      flex: 1; display: flex; align-items: flex-start; gap: 10px;
      padding: 0 30px;
      border-right: 1px solid rgba(255,255,255,0.22);
    }
    .hero-pillar:first-child { padding-left: 0; }
    .hero-pillar:last-child { border-right: none; padding-right: 0; }
    .pillar-dot {
      width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; margin-top: 3px;
    }
    .pillar-dot.blue { background: var(--blue); }
    .pillar-dot.teal { background: var(--teal); }
    .pillar-dot.gold { background: var(--gold); }
    .hero-pillar span {
      font-size: 11px; color: #ffffff; font-weight: 500;
      text-transform: uppercase; letter-spacing: 1.3px; line-height: 1.5;
    }


    /* ─── HERO 2026 (reference build: vcg-hero_1) — text block, typewriter, pill CTAs ─── */
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .hero-eyebrow2 {
      display: inline-flex; align-items: center; gap: 12px; margin: 0 0 26px;
      font-size: clamp(11px, 1vw, 12.5px); font-weight: 600;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--white); opacity: 0.78;
    }
    .hero-eyebrow2::before { content: ''; flex: none; width: 34px; height: 2px; background: var(--gold); }
    .hero .hero-title2 {
      margin: 0;
      font-family: var(--font-display); font-weight: 500; color: var(--white);
      /* 3.6vw ceiling keeps line 1 (~16em) inside 58vw — clear of the bulb on narrower screens */
      font-size: clamp(26px, min(calc(2.6vw + 2.5vh), 3.3vw), 53px);
      line-height: 1.1; letter-spacing: -0.5px;
    }
    .hero-title2 .hero-line { display: block; }
    .hero-subline {
      margin: clamp(10px, 1.8vh, 18px) 0 0; max-width: 46ch;
      /* exactly the reference build (vcg-hero_1): head font at clamp(17px,1.62vw,23px) */
      font-family: 'GT Walsheim Pro', 'Poppins', 'Public Sans', sans-serif; font-weight: 400;
      color: var(--gold);
      font-size: clamp(16px, calc(1.1vw + 1.1vh), 23px); line-height: 1.34;
    }
    .hero-rule2 { position: relative; width: min(620px, 100%); height: 1px; margin: clamp(12px, 2vh, 22px) 0 0; background: rgba(255,255,255,0.28); }
    .hero-rule2::before { content: ''; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--white); }
    .hero-lede {
      margin: 0; max-width: 33rem;
      font-size: clamp(12.5px, calc(0.35vw + 1.15vh), 15px); line-height: 1.75;
      color: rgba(255,255,255,0.6);
    }
    .hero-ledecta { display: flex; align-items: center; gap: 48px; margin-top: clamp(14px, 2.6vh, 28px); }
    .hero-ledecta .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 0; }
    .hero-ledecta .hero-btn {
      width: auto; min-width: clamp(180px, 16.4vw, 210px);
      height: clamp(38px, 5.5vh, 44px);
      justify-content: center; white-space: nowrap;
    }
    @media (max-width: 900px) {
      .hero-ledecta { flex-direction: column; align-items: flex-start; gap: 22px; }
      .hero-ledecta .hero-actions { flex-direction: row; flex-wrap: wrap; }
    }
    .hero-typerow {
      display: flex; align-items: baseline; gap: 14px; flex-wrap: nowrap;
      margin: clamp(40px, 8vh, 88px) 0 0;
      min-height: 1.5em;
    }
    .hero-typetext { white-space: nowrap; }
    .hero-typetext::after { content: '\200B'; }
    .hero-typer { min-height: 1.4em; }
    .hero-typelabel {
      flex: none; font-size: clamp(11px, calc(0.55vw + 0.8vh), 14px); font-weight: 700; letter-spacing: 0.22em;
      text-transform: uppercase; color: rgba(255,255,255,0.8);
    }
    .hero-typer {
      display: inline-flex; align-items: baseline;
      font-family: 'Inter', sans-serif; font-weight: 500; color: var(--white);
      font-size: clamp(16px, calc(0.8vw + 1.1vh), 21px); line-height: 1.4; letter-spacing: -0.005em;
    }
    .hero-typetext { padding-bottom: 3px; border-bottom: 2px solid rgba(255,200,87,0.35); }
    .hero-caret {
      display: inline-block; width: 2px; height: 1em; margin-left: 4px;
      background: var(--gold); transform: translateY(2px);
      animation: vcgBlink 1s steps(1, end) infinite;
    }
    @keyframes vcgBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
    .hero-actions { margin-top: 24px; }
    .hero-btn {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 10px 22px; border: 1px solid transparent; border-radius: 100px; text-decoration: none;
      font-family: 'Inter', sans-serif; font-size: clamp(12px, calc(0.55vw + 0.8vh), 14px); font-weight: 500;
      transition: 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
    }
    .hero-btn svg { width: 13px; height: 13px; }
    .hero-btn-solid { background: var(--white); color: var(--navy-deep); }
    .hero-btn-solid:hover { background: var(--gold); transform: translateY(-2px); }
    .hero-btn-ghost { border: 1px solid rgba(255,255,255,0.34); color: var(--white); }
    .hero-btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
    .hero-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
    @media (max-width: 768px) {
      .hero-title2 .hero-line { display: inline; }
      .hero-subline { max-width: 30ch; }
      .hero-typerow { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 3.2em; }
      .hero-eyebrow2 { letter-spacing: 0.16em; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-caret { animation: none; opacity: 1; }
      .hero-btn:hover { transform: none; }
    }

    /* ─── TRUST BAR ─── */
    .trust-bar {
      background: var(--fog);
      border-bottom: 1px solid var(--border);
      padding: 18px 48px;
      display: flex; align-items: center; gap: 40px;
    }
    .trust-label {
      font-size: 11px; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: var(--muted); white-space: nowrap;
    }
    .trust-logos { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; }
    .trust-logo {
      font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.3px;
    }

    /* ─── SHARED ─── */
    section { padding: 124px 48px; }
    .section-eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; margin-bottom: 14px;
    }
    .eyebrow-blue { color: var(--blue); }
    .eyebrow-teal { color: var(--teal-ink); }
    .eyebrow-gold { color: var(--gold); }
    .section-title {
      font-family: 'Inter', sans-serif;
      font-size: clamp(30px, 3.5vw, 46px); font-weight: 600;
      line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 16px;
    }
    .section-title.light { color: var(--white); }
    .section-lead {
      font-size: 17px; color: var(--muted);
      max-width: 58ch; line-height: 1.75;
    }
    .section-lead.light { color: rgba(255,255,255,0.55); }
    .section-header { margin-bottom: 68px; }

    /* ─── ABOUT STRIP ─── */
    .about-strip {
      background: var(--white);
      display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr;
      padding: 0 48px;
      border-bottom: 1px solid var(--border);
    }
    .about-strip-div { background: var(--border); }
    .about-item {
      padding: 48px 40px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .about-stat {
      font-family: 'Inter', sans-serif;
      font-size: 44px; font-weight: 700; line-height: 1;
    }
    .about-stat.blue { color: var(--blue); }
    .about-stat.teal { color: var(--teal-ink); }
    .about-stat.gold { color: var(--gold); }
    .about-item h3 { font-size: 16px; font-weight: 700; color: var(--text); }
    .about-item p { font-size: 14px; color: var(--muted); line-height: 1.65; }

    /* ─── SERVICES ─── */
    .services-section { background: var(--fog); }
    .services-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    }

    /* ─── CORE CAPABILITY (Operating Model) ─── */
    .core-section { background: var(--white); }
    .core-layout {
      display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center;
    }
    .core-left .badge-core {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(30,43,60,0.06); color: var(--navy);
      font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
      padding: 8px 16px; border-radius: 40px; margin-bottom: 22px;
    }
    .core-left .badge-core i { color: var(--gold); }
    .core-left h2 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(30px, 3.6vw, 48px); font-weight: 600;
      line-height: 1.12; letter-spacing: -0.5px; color: var(--text); margin-bottom: 20px;
    }
    .core-left h2 em { font-style: normal; color: var(--teal-ink); }
    .core-left > p {
      font-size: 17px; color: var(--muted); line-height: 1.75; margin-bottom: 28px; max-width: 540px;
    }
    .core-points { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
    .core-points li {
      font-size: 14px; color: var(--text); font-weight: 500;
      display: flex; align-items: flex-start; gap: 10px;
    }
    .core-points li i { color: var(--teal); margin-top: 4px; font-size: 13px; }
    /* Right: layered operating-model visual */
    .core-visual {
      background: var(--navy-deep); border-radius: 18px; padding: 40px;
      box-shadow: 0 24px 60px rgba(20,31,45,0.22); position: relative; overflow: hidden;
    }
    .core-visual::before {
      content: ''; position: absolute; top: -80px; right: -80px;
      width: 240px; height: 240px;
      background: radial-gradient(circle, rgba(255,200,87,0.18), transparent 70%);
    }
    .cv-title {
      font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--gold); margin-bottom: 20px; position: relative; z-index: 1;
    }
    .cv-rows { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
    .cv-row {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
      border-radius: 10px; padding: 16px 18px;
      display: flex; align-items: center; gap: 14px;
    }
    .cv-row .cv-ico {
      width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 16px;
    }
    .cv-row h4 { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 2px; }
    .cv-row p { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.4; }

    /* ─── VALUE ASSURANCE ─── */
    .assurance-section { background: var(--fog); }
    .assurance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .assurance-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: 12px; padding: 34px 32px;
      display: flex; flex-direction: column; gap: 12px;
      box-shadow: 0 2px 8px rgba(20,31,45,0.03);
      transition: border-color 0.2s, transform 0.2s;
    }
    .assurance-card:hover { border-color: var(--gold); transform: translateY(-3px); }
    .assurance-card .ac-head { display: flex; align-items: center; gap: 12px; }
    .assurance-card .ac-ico {
      width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
      background: rgba(255,200,87,0.14); color: #A87A12;
      display: flex; align-items: center; justify-content: center; font-size: 17px;
    }
    .assurance-card h3 { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; }
    .assurance-card p { font-size: 14px; color: var(--muted); line-height: 1.65; }
    .assurance-card .ac-tools {
      font-size: 11px; font-weight: 600; color: var(--muted);
      border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; line-height: 1.6;
    }
    @media (max-width: 1100px) {
      .core-layout { grid-template-columns: 1fr; gap: 48px; }
      .assurance-grid { grid-template-columns: 1fr; }
    }
    .service-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 14px; padding: 41px 37px;
      position: relative; overflow: hidden;
      box-shadow: 0 2px 8px rgba(20,31,45,0.04);
      transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
    }
    .service-card:hover {
      border-color: var(--blue);
      box-shadow: 0 10px 36px rgba(0,0,0,0.07);
      transform: translateY(-3px);
    }
    .service-card::before {
      content: ''; position: absolute; top: 0; left: 0;
      right: 0; height: 3px;
    }
    .service-card.c-blue::before  { background: var(--blue); }
    .service-card.c-teal::before  { background: var(--teal); }
    .service-card.c-gold::before  { background: var(--gold); }
    .service-card.c-navy::before  { background: var(--navy); }
    .service-icon {
      width: 48px; height: 48px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; margin-bottom: 20px;
    }
    .ic-blue { background: rgba(0,131,201,0.12); }
    .ic-teal { background: rgba(0,168,168,0.12); }
    .ic-gold { background: rgba(255,200,87,0.15); }
    .ic-navy { background: rgba(30,43,60,0.08); }
    .service-icon i { font-size: 20px; line-height: 1; }
    .ic-blue i { color: var(--blue); }
    .ic-teal i { color: var(--teal); }
    .ic-gold i { color: #A87A12; }
    .ic-navy i { color: var(--navy); }
    .sector-icon i { color: var(--teal); font-size: 26px; }
    .cred-points i, .credential-item .ci { color: var(--gold); }
    .service-card h3 {
      font-size: 18px; font-weight: 700; color: var(--text);
      margin-bottom: 10px; line-height: 1.3;
    }
    .service-card p {
      font-size: 14px; color: var(--muted); line-height: 1.7;
      margin-bottom: 16px;
    }
    .service-tools {
      font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
      color: var(--muted); border-top: 1px solid var(--border);
      padding-top: 14px; line-height: 1.7;
    }

    /* ─── ASSET JOURNEY ─── */
    .journey-section {
      background: var(--navy-deep); color: var(--white);
    }
    .journey-intro {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: center; margin-bottom: 72px;
    }
    .journey-intro p {
      font-size: 16px; color: rgba(255,255,255,0.6); line-height: 1.75;
    }
    .tagline {
      font-family: 'Inter', sans-serif;
      font-size: 22px; font-style: italic;
      color: rgba(255,255,255,0.4); margin-top: 24px;
    }
    .journey-steps {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
      background: rgba(255,255,255,0.05);
      border-radius: 16px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .journey-steps.tech4 { grid-template-columns: repeat(4, 1fr); }
    @media (max-width: 1100px) { .journey-steps.tech4 { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 680px) { .journey-steps.tech4 { grid-template-columns: 1fr; } }
    .journey-step {
      padding: 55px 46px; position: relative; overflow: hidden;
      transition: background 0.2s ease-out;
    }
    .journey-step:hover { background: rgba(255,255,255,0.04); }
    .js-step-num {
      font-family: 'Inter', sans-serif;
      font-size: 72px; font-weight: 800; line-height: 1;
      margin-bottom: 16px; opacity: 0.12;
    }
    .js-step-num.blue { color: var(--blue); opacity: 0.4; }
    .js-step-num.teal { color: var(--teal-ink); opacity: 0.4; }
    .js-step-num.gold { color: var(--gold); opacity: 0.4; }
    .js-label {
      font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
      text-transform: uppercase; margin-bottom: 10px;
    }
    .js-label.blue { color: var(--blue); }
    .js-label.teal { color: var(--teal-ink); }
    .js-label.gold { color: var(--gold); }
    .journey-step h3 {
      font-size: 24px; font-weight: 600; color: var(--white);
      margin-bottom: 12px;
    }
    .journey-step p {
      font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.7;
      margin-bottom: 20px;
    }
    .js-platforms {
      font-size: 11px; color: rgba(255,255,255,0.3); line-height: 1.7;
      border-top: 1px solid rgba(255,255,255,0.07); padding-top: 16px;
    }

    /* ─── APPROACH ─── */
    .approach-section { background: var(--white); }
    .approach-layout {
      display: grid; grid-template-columns: 1fr 2fr; gap: 80px;
      align-items: start;
    }
    .approach-left {}
    .approach-steps {
      display: flex; flex-direction: column; gap: 0;
    }
    .approach-step {
      display: grid; grid-template-columns: 64px 1fr;
      gap: 24px; padding: 36px 0;
      border-bottom: 1px solid var(--border);
    }
    .approach-step:last-child { border-bottom: none; }
    .step-num {
      font-family: 'Inter', sans-serif;
      font-size: 36px; font-weight: 700; color: var(--border);
      line-height: 1;
    }
    .approach-step:hover .step-num { color: var(--blue); transition: color 0.2s; }
    .step-content h3 {
      font-size: 17px; font-weight: 700; color: var(--text);
      margin-bottom: 8px;
    }
    .step-content p {
      font-size: 14px; color: var(--muted); line-height: 1.7;
    }

    /* ─── OUTCOMES ─── */
    .outcomes-section { background: var(--fog); }
    .outcomes-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    }
    .outcome-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 28px 24px;
    }
    .outcome-card h3 {
      font-size: 16px; font-weight: 700; color: var(--text);
      margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
    }
    .outcome-card h3 .dot {
      width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
    }
    .outcome-card p { font-size: 14px; color: var(--muted); line-height: 1.65; }

    /* ─── SECTORS ─── */
    .sectors-section { background: var(--fog); }
    .sectors-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    }
    .sector-card {
      border: 1px solid var(--border); border-radius: var(--radius);
      padding: 32px 28px; transition: border-color 0.2s ease-out;
    }
    .sector-card:hover { border-color: var(--teal); }
    .sector-card h3 {
      font-size: 15px; font-weight: 700; color: var(--text);
      margin-bottom: 8px;
    }
    .sector-card p { font-size: 13px; color: var(--muted); line-height: 1.6; }
    .sector-icon { font-size: 28px; margin-bottom: 14px; }

    /* ─── CREDIBILITY BAND ─── */
    .cred-band {
      display: grid; grid-template-columns: 1fr 1fr;
      min-height: 460px;
    }
    .cred-image { min-height: 460px; }
    .cred-content {
      background: var(--navy); color: var(--white);
      padding: 80px 64px; display: flex; flex-direction: column; justify-content: center;
    }
    .cred-content h2 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(26px, 2.8vw, 38px); font-weight: 600;
      line-height: 1.2; margin-bottom: 20px;
    }
    .cred-content h2 em { font-style: italic; color: var(--gold); }
    .cred-content p {
      font-size: 16px; color: rgba(255,255,255,0.6); line-height: 1.75;
      max-width: 460px; margin-bottom: 28px;
    }
    .cred-points { list-style: none; display: flex; flex-direction: column; gap: 14px; }
    .cred-points li {
      font-size: 14px; color: rgba(255,255,255,0.8);
      display: flex; align-items: flex-start; gap: 12px;
    }
    .cred-points li::before {
      content: ''; width: 8px; height: 8px; border-radius: 2px;
      background: var(--gold); margin-top: 7px; flex-shrink: 0;
    }

    /* ─── CASE STUDIES ─── */
    .cases-section { background: var(--navy-deep); }
    .cases-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    }
    .case-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px; padding: 40px 36px;
      transition: border-color 0.2s;
    }
    .case-card:hover { border-color: rgba(255,200,87,0.3); }
    .case-sector {
      font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
    }
    .case-card h3 {
      font-size: 20px; font-weight: 600; color: var(--white);
      margin-bottom: 12px; line-height: 1.35;
    }
    .case-card p {
      font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.7;
      margin-bottom: 24px;
    }
    .case-stat {
      display: flex; gap: 32px; flex-wrap: wrap;
    }
    .case-stat-item {}
    .cs-number {
      font-family: 'Inter', sans-serif;
      font-size: 28px; font-weight: 700; color: var(--gold); line-height: 1;
      margin-bottom: 3px;
    }
    .cs-label {
      font-size: 11px; color: rgba(255,255,255,0.35);
      text-transform: uppercase; letter-spacing: 0.7px;
    }

    /* ─── LEADERSHIP ─── */
    .leadership-section { background: var(--white); }
    .leadership-layout {
      display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
      align-items: center;
    }
    .leadership-left { display: flex; flex-direction: column; gap: 24px; }
    .leadership-portrait {
      width: 100%; height: 360px; border-radius: 14px;
      box-shadow: 0 20px 50px rgba(20,31,45,0.18);
    }
    .leadership-quote {
      background: var(--navy-deep);
      border-radius: 14px; padding: 48px;
      position: relative; overflow: hidden;
    }
    .leadership-quote::before {
      content: '"';
      font-family: 'Inter', sans-serif;
      font-size: 140px; color: var(--gold);
      opacity: 0.15; position: absolute;
      top: -20px; left: 24px; line-height: 1;
    }
    .leadership-quote blockquote {
      font-size: 18px; line-height: 1.75;
      color: rgba(255,255,255,0.85);
      position: relative; z-index: 1;
      margin-bottom: 28px;
    }
    .quote-person {
      display: flex; align-items: center; gap: 14px;
      position: relative; z-index: 1;
    }
    .quote-avatar {
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--slate);
      border: 2px solid var(--gold);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; font-weight: 600; color: var(--white);
      flex-shrink: 0;
    }
    .quote-name { font-size: 14px; font-weight: 700; color: var(--white); }
    .quote-title { font-size: 12px; color: var(--gold); margin-top: 2px; }

    .leadership-right {}
    .leadership-right h2 { margin-bottom: 16px; }
    .leadership-right p {
      font-size: 15px; color: var(--muted); line-height: 1.75;
      margin-bottom: 20px;
    }
    .credentials {
      display: flex; flex-direction: column; gap: 12px; margin-top: 32px;
    }
    .credential-item {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 14px 18px; background: var(--fog);
      border-radius: 8px; border-left: 3px solid var(--teal);
    }
    .credential-item p { font-size: 13px; color: var(--text); line-height: 1.5; }

    /* ─── OFFERS ─── */
    .offers-section { background: var(--fog); }
    .offers-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    }
    .offer-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: 14px; padding: 41px 37px;
      display: flex; flex-direction: column;
      transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
    }
    .offer-card:hover {
      box-shadow: 0 12px 40px rgba(0,0,0,0.08);
      transform: translateY(-4px);
    }
    .offer-card.featured {
      background: var(--navy); border-color: transparent;
    }
    .offer-badge {
      font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--teal-ink);
      margin-bottom: 16px;
    }
    .offer-card.featured .offer-badge { color: var(--gold); }
    .offer-card h3 {
      font-size: 20px; font-weight: 600; color: var(--text);
      margin-bottom: 12px; line-height: 1.3;
    }
    .offer-card.featured h3 { color: var(--white); }
    .offer-card p {
      font-size: 14px; color: var(--muted);
      line-height: 1.7; flex: 1;
    }
    .offer-card.featured p { color: rgba(255,255,255,0.55); }
    .offer-outputs {
      margin-top: 20px; padding-top: 20px;
      border-top: 1px solid var(--border);
    }
    .offer-card.featured .offer-outputs { border-color: rgba(255,255,255,0.1); }
    .offer-outputs h4 {
      font-size: 10px; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: var(--muted);
      margin-bottom: 8px;
    }
    .offer-card.featured .offer-outputs h4 { color: rgba(255,255,255,0.3); }
    .offer-outputs p {
      font-size: 12px; color: var(--muted); line-height: 1.7; flex: unset;
    }
    .offer-card.featured .offer-outputs p { color: rgba(255,255,255,0.4); }
    /* VRO retained-engine note beneath the ladder */
    .offers-note {
      max-width: 760px; margin: 36px auto 0; text-align: center;
      font-size: 14px; color: var(--muted); line-height: 1.7;
    }
    .offers-note strong { color: var(--text); }

    /* ─── PLATFORMS ─── */
    .platforms-section { background: var(--white); }
    .platforms-layout {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
    }
    .platform-group h3 {
      font-size: 13px; font-weight: 700; color: var(--text);
      margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
    }
    .platform-group h3 .pdot {
      width: 8px; height: 8px; border-radius: 2px;
    }
    .platform-group ul {
      list-style: none; display: flex; flex-direction: column; gap: 7px;
    }
    .platform-group li {
      font-size: 13px; color: var(--muted);
      padding-left: 14px; position: relative;
    }
    .platform-group li::before {
      content: '→'; position: absolute; left: 0;
      color: var(--border); font-size: 11px;
    }

    /* ─── CTA BAND ─── */
    .cta-band {
      background: var(--teal); padding: 88px 48px;
      display: flex; align-items: center; justify-content: space-between; gap: 48px;
    }
    .cta-band h2 {
      font-family: 'Inter', sans-serif;
      font-size: clamp(26px, 3vw, 40px); font-weight: 600;
      color: var(--white); line-height: 1.2; max-width: 600px;
    }
    .cta-band h2 em { font-style: italic; opacity: 0.8; }
    .btn-white {
      background: var(--white); color: var(--teal-ink);
      padding: 17px 36px; border-radius: 8px;
      font-weight: 700; font-size: 15px; text-decoration: none;
      white-space: nowrap; display: inline-block;
      transition: opacity 0.2s; flex-shrink: 0;
    }
    .btn-white:hover { opacity: 0.92; }

    /* ─── FOOTER ─── */
    footer {
      background: var(--navy-deep); padding: 64px 48px 40px;
      display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 56px; border-top: 1px solid rgba(255,255,255,0.05);
    }
    .footer-brand .footer-logo-wrap {
      display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
    }
    .footer-logo-text {
      font-size: 18px; font-weight: 700; color: var(--white);
    }
    .footer-logo-text span { color: var(--gold); }
    .footer-brand > p {
      font-size: 13px; color: rgba(255,255,255,0.62); line-height: 1.7;
      max-width: 380px; margin-bottom: 26px;
    }
    .footer-contact {
      font-size: 13px; color: rgba(255,255,255,0.45); line-height: 2.1;
    }
    .footer-contact a { color: var(--gold); text-decoration: none; }
    /* Office tiles — three address blocks + a contact block */
    .footer-offices {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px 28px; max-width: 420px;
    }
    .footer-office { display: flex; flex-direction: column; gap: 5px; }
    .fo-city {
      font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--gold);
    }
    .fo-addr { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.55; }
    .fo-link { font-size: 13px; color: rgba(255,255,255,0.72); text-decoration: none; line-height: 1.7; }
    .fo-link:hover { color: var(--gold); }
    @media (max-width: 480px) { .footer-offices { grid-template-columns: 1fr; } }
    footer h4 {
      font-size: 13px; font-weight: 700; letter-spacing: 1.2px;
      text-transform: uppercase; color: rgba(255,255,255,0.9);
      margin-bottom: 18px;
    }
    /* Desktop: drop the three pillar headings to line up with the brand
       paragraph (i.e. below the logo, not level with it). 60px ≈ logo height + gap. */
    @media (min-width: 1025px) { footer h4 { margin-top: 60px; } }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-links a {
      font-size: 13px; color: rgba(255,255,255,0.62);
      text-decoration: none; transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--white); }
    .footer-bottom {
      background: var(--navy-deep); padding: 20px 48px;
      border-top: 1px solid rgba(255,255,255,0.05);
      display: flex; justify-content: space-between; align-items: center;
    }
    .footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.45); }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 1100px) {
      .services-grid { grid-template-columns: 1fr 1fr; }
      .sectors-grid { grid-template-columns: 1fr 1fr; }
      .outcomes-grid { grid-template-columns: 1fr 1fr; }
      .approach-layout { grid-template-columns: 1fr; gap: 40px; }
      .leadership-layout { grid-template-columns: 1fr; gap: 40px; }
      .cases-grid { grid-template-columns: 1fr; }
      .cred-band { grid-template-columns: 1fr; }
      .cred-image { min-height: 300px; }
      .cred-content { padding: 56px 40px; }
      .journey-steps { grid-template-columns: 1fr; }
      .journey-intro { grid-template-columns: 1fr; gap: 32px; }
      footer { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      nav { padding: 0 20px; }
      .nav-links { display: none; }
      section { padding: 64px 20px; }
      .hero { padding: 150px 20px 0; }
      .hero-pillars { margin: 48px -20px 0; padding: 26px 20px; }
      .trust-bar { padding: 16px 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
      .hero-pillars { flex-direction: column; gap: 14px; }
      .hero-pillar { border-right: none; padding-right: 0; margin-right: 0; border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 14px; }
      .hero-pillar:last-child { border-bottom: none; padding-bottom: 0; }
      .about-strip { grid-template-columns: 1fr; }
      .about-strip-div { display: none; }
      .services-grid, .sectors-grid, .outcomes-grid, .offers-grid { grid-template-columns: 1fr; }
      .platforms-layout { grid-template-columns: 1fr; }
      .cta-band { flex-direction: column; text-align: center; padding: 60px 20px; }
      footer { grid-template-columns: 1fr; padding: 40px 20px; }
      .footer-bottom { padding: 16px 20px; flex-direction: column; gap: 8px; text-align: center; }
    }

/* ─── INNER PAGE HERO ─── */
.page-hero {
  background: var(--navy-deep);
  padding: 150px 48px 80px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; top: -120px; right: -80px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(0,131,201,0.14) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero-inner { max-width: 820px; position: relative; z-index: 1; }
.page-hero .breadcrumb {
  font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 22px; letter-spacing: 0.3px;
}
.page-hero .breadcrumb a { color: var(--gold); text-decoration: none; }
.page-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,200,87,0.12); border: 1px solid rgba(255,200,87,0.25);
  color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 7px 16px; border-radius: 40px; margin-bottom: 24px;
}
.page-hero h1 {
  font-family: 'Inter', sans-serif; font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 500; color: var(--white); line-height: 1.1; letter-spacing: -1px; margin-bottom: 20px;
}
.page-hero h1 em { font-style: italic; color: var(--gold); }
.page-hero p { font-size: 18px; color: rgba(255,255,255,0.62); max-width: 640px; line-height: 1.75; }

/* generic content prose block */
.prose-section { background: var(--white); }
.prose-narrow { max-width: 780px; }
.prose-narrow h2 {
  font-family: 'Inter', sans-serif; font-size: clamp(26px,2.8vw,36px); font-weight: 600;
  color: var(--text); line-height: 1.2; margin: 0 0 16px;
}
.prose-narrow h3 {
  font-size: 19px; font-weight: 700; color: var(--text); margin: 28px 0 10px;
}
.prose-narrow p { font-size: 16px; color: var(--muted); line-height: 1.8; margin-bottom: 16px; }
.prose-narrow ul { margin: 0 0 16px 0; padding-left: 0; list-style: none; }
.prose-narrow ul li {
  font-size: 15px; color: var(--text); line-height: 1.7; padding-left: 26px; position: relative; margin-bottom: 8px;
}
.prose-narrow ul li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px;
  background: var(--teal); border-radius: 2px;
}
@media (max-width: 768px) { .page-hero { padding: 120px 20px 56px; } }

/* ─── PROFILE / LEADERSHIP (matches original look) ─── */
.profile-section {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  background: var(--fog); align-items: stretch; position: relative;
}
.profile-section::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: var(--navy-deep); z-index: 2; }
.profile-photo, .profile-content { position: relative; z-index: 1; }
.profile-photo {
  /* The portrait sits on a white studio background: multiply-blending it over the
     section's fog colour turns the white to fog exactly, so the photo merges with
     the band. contain (not cover) zooms out to show the full portrait, anchored
     to the bottom of the column. */
  background-color: var(--fog);
  background-blend-mode: multiply;
  background-size: contain; background-repeat: no-repeat; background-position: center bottom;
  min-height: 640px;
  align-self: stretch; overflow: hidden;
}
.profile-content { padding: 80px 72px 150px; display: flex; flex-direction: column; }
.profile-heading {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(28px, 3vw, 42px); line-height: 1.18; letter-spacing: -0.5px;
  color: var(--text); font-weight: 500 !important; margin: 12px 0 20px;
}
.profile-intro { font-size: 16px; color: var(--muted); line-height: 1.8; margin-bottom: 8px; max-width: 640px; }

.acc { display: flex; flex-direction: column; gap: 10px; }
.acc-item { background: var(--white); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.acc-head {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 16px; color: var(--text); text-align: left;
}
.acc-head i { color: var(--gold); font-size: 14px; flex-shrink: 0; }
.acc-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.acc-body p { padding: 0 22px 20px; font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; }
.acc-item.open .acc-body { max-height: 200px; }

.profile-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: stretch; margin-top: 36px; }
.profile-quote { display: flex; flex-direction: column; justify-content: center; }
.profile-quote blockquote {
  font-family: 'Inter', sans-serif; font-size: 18px; font-style: italic;
  color: var(--text); line-height: 1.7; margin: 0; max-width: 640px;
}
.profile-author { display: flex; flex-direction: column; gap: 3px; margin-top: 22px; }
.profile-author strong { font-size: 15px; color: var(--text); }
.profile-author span { font-size: 13px; color: var(--muted); }

@media (max-width: 1024px) {
  .profile-section { grid-template-columns: 1fr; }
  .profile-photo { min-height: 520px; }
  .profile-content { padding: 56px 32px; }
  .profile-split { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 680px) {
  .profile-content { padding: 48px 20px; }
}

/* ─── TECH DETAIL SECTIONS ─── */
.tech-detail { padding: 84px 48px; background: var(--white); }
.tech-detail.alt { background: var(--fog); }
.td-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px;
  align-items: start; max-width: 1180px; margin: 0 auto;
}
.tech-detail.alt .td-main { order: 2; }
.tech-detail.alt .td-side { order: 1; }
.td-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.td-main h2 {
  font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; color: var(--text);
  line-height: 1.2; letter-spacing: -0.3px; margin-bottom: 16px;
}
.td-main p { font-size: 16px; color: var(--muted); line-height: 1.8; margin-bottom: 16px; }
.td-main h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text); margin: 24px 0 12px; }
.td-main ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; }
.td-main ul li { font-size: 14px; color: var(--text); padding-left: 22px; position: relative; line-height: 1.55; }
.td-main ul li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 2px; background: var(--teal); }
.td-side {
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  padding: 30px 28px; box-shadow: 0 4px 18px rgba(20,31,45,0.05); position: sticky; top: 92px;
}
.td-ico { width: 54px; height: 54px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; }
.td-side h3 { font-size: 19px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.td-side .td-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.td-side h5 { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.td-list { list-style: none; }
.td-list li { font-size: 13px; color: var(--muted); line-height: 1.75; padding-left: 16px; position: relative; }
.td-list li::before { content: '→'; position: absolute; left: 0; color: var(--border); }
@media (max-width: 900px) {
  .tech-detail { padding: 56px 20px; }
  .td-grid { grid-template-columns: 1fr; gap: 32px; }
  .tech-detail.alt .td-main, .tech-detail.alt .td-side { order: 0; }
  .td-main ul { grid-template-columns: 1fr; }
  .td-side { position: static; }
}

/* ─── CASE STUDY ROWS ─── */
.case-row { padding: 60px 48px; background: var(--white); }
.case-row.alt { background: var(--fog); }
.case-row-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: center; }
.case-row .case-sector { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #B8860B; margin-bottom: 12px; }
.case-row-main h2 { font-size: clamp(23px, 2.3vw, 31px); font-weight: 600; color: var(--text); line-height: 1.25; letter-spacing: -0.3px; margin-bottom: 14px; }
.case-row-main p { font-size: 15px; color: var(--muted); line-height: 1.8; }
.case-row-stats { display: flex; flex-wrap: wrap; gap: 28px 36px; }
.case-row .cs-number { font-size: 32px; font-weight: 600; color: var(--teal-ink); line-height: 1; margin-bottom: 4px; }
.case-row .cs-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted); }
@media (max-width: 900px) {
  .case-row { padding: 48px 20px; }
  .case-row-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ─── INSIGHTS GRID ─── */
.insights-section { background: var(--white); }
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1180px; margin: 0 auto; }
.insight-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: 0 2px 10px rgba(20,31,45,0.04); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.insight-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(20,31,45,0.1); }
.insight-thumb { height: 150px; background: linear-gradient(135deg, var(--slate), var(--navy)); display: flex; align-items: center; justify-content: center; }
.insight-thumb i { font-size: 38px; color: rgba(255,255,255,0.9); }
.insight-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.insight-tag { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #B8860B; margin-bottom: 10px; }
.insight-card h3 { font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.35; margin-bottom: 10px; }
.insight-card p { font-size: 14px; color: var(--muted); line-height: 1.65; flex: 1; }
.insight-link { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--teal-ink); text-decoration: none; align-self: flex-start; }
@media (max-width: 1024px) { .insights-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .insights-grid { grid-template-columns: 1fr; } }

/* capability verb label */
.ac-verb { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 14px; color: var(--teal-ink); }

/* ─── FOOTER NEWSLETTER ─── */
.footer-news {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center;
  gap: 28px; flex-wrap: wrap;
  background: rgba(255, 200, 87, 0.07);
  border: 1px solid rgba(255, 200, 87, 0.35);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 44px;
}
.fn-title { font-size: 22px; font-weight: 700; color: var(--gold); margin-bottom: 6px; }
.footer-news .fn-copy p { font-size: 13px; color: rgba(255,255,255,0.65); max-width: 440px; margin: 0; line-height: 1.6; }
.footer-news-form { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-news-form input {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px; padding: 12px 16px; color: #fff; font-size: 14px;
  min-width: 280px; font-family: inherit;
}
.footer-news-form input::placeholder { color: rgba(255,255,255,0.4); }
.footer-news-form button {
  background: var(--gold); color: var(--navy); border: none; border-radius: 8px;
  padding: 12px 26px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit;
  transition: opacity 0.2s;
}
.footer-news-form button:hover { opacity: 0.9; }
@media (max-width: 768px) {
  .footer-news { flex-direction: column; align-items: flex-start; }
  .footer-news-form input { min-width: 0; width: 100%; }
}

/* ─── HERO OUTCOMES STRIP ─── */
.outcomes-band { background: var(--white); padding: 96px 48px 56px; border-bottom: 1px solid var(--border); }
.outcomes-band .ob-eyebrow { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 10px; }
.outcomes-band .ob-head { text-align: center; margin-bottom: 76px; }
/* Section title — one step up in size, lighter weight */
.outcomes-band .ob-title { font-size: clamp(28px, 3vw, 38px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); margin: 0; }
/* Rule under title: grey line centred + narrower than heading; bold black bar centred within it */
.outcomes-band .ob-title::after {
  content: ''; display: block; height: 3px;
  width: 260px; margin: 20px auto 0;
  background-color: #d1d5db;
  background-image: linear-gradient(var(--text), var(--text));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 64px 3px;
}
.ob-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px; max-width: 1240px; margin: 0 auto; }
.ob-item { text-align: center; padding: 0 16px; }
/* Icons: no box, no background — large, light-weight line-drawn style */
.ob-ico { width: auto; height: auto; border-radius: 0; background: transparent !important; color: rgba(26,37,53,0.9) !important; display: flex; align-items: center; justify-content: center; font-size: 48px; margin: 0 auto 24px; }
/* Card sub-headings — one step up in size, lighter weight.
   display:table shrinks the box to text width so ::after hugs the text exactly. */
.ob-item h3 { font-size: 18px; font-weight: 600; color: var(--text); margin: 0 auto; display: table; }
/* Sub-heading rule: grey line = text width; black bar starts at left ~1/3, grows to full on hover */
.ob-item h3::after {
  content: ''; display: block; height: 2px; width: 100%;
  margin: 9px 0 14px;
  background-color: #d1d5db;
  background-image: linear-gradient(var(--text), var(--text));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 33% 100%;
  transition: background-size 0.32s ease;
}
.ob-item:hover h3::after { background-size: 100% 100%; }
.ob-item p { font-size: 13px; color: var(--muted); line-height: 1.6; }
@media (max-width: 900px) { .ob-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
@media (max-width: 560px) { .ob-grid { grid-template-columns: 1fr; } .outcomes-band { padding: 44px 20px; } }

/* ─── HERO DESCRIPTOR (replaces the three pillars) ─── */
.hero-descriptor {
  margin-top: 52px; padding-top: 28px; max-width: 560px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 14px; color: rgba(255,255,255,0.55); letter-spacing: 0.2px; line-height: 1.6;
}

/* ─── "WHAT WE DO" — editorial / typographic (no boxes) ─── */
.whatwedo { background: var(--fog); padding: 96px 48px; }
.whatwedo-inner { max-width: 1080px; margin: 0 auto; }
.ww-head { margin-bottom: 30px; }
.ww-title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; color: var(--text); letter-spacing: -0.3px; line-height: 1.2; max-width: 680px; margin-top: 12px; }
.ww-list { list-style: none; margin: 0; padding: 0; }
.ww-list li { display: grid; grid-template-columns: 46px 184px 1fr; gap: 24px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--border); }
.ww-num { font-size: 13px; font-weight: 700; color: var(--teal-ink); }
.ww-verb { font-size: 21px; font-weight: 700; color: var(--text); }
.ww-desc { font-size: 16px; color: var(--muted); line-height: 1.6; }
@media (max-width: 760px) {
  .whatwedo { padding: 64px 20px; }
  .ww-list li { grid-template-columns: 1fr; gap: 4px; padding: 20px 0; }
  .ww-num { display: inline; }
}

/* ─── CAPABILITIES — unified section (Variant A live) ─── */
.capabilities { background: var(--fog); }
.capabilities-a .core-layout { margin: 4px 0 56px; }
.capabilities-a .section-header { margin-bottom: 48px; }

/* ─── CAPABILITIES — Variant B: single framed panel ─── */
.cap-b { background: var(--white); }
.cap-b-frame {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,0.09);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(20,31,45,0.18);
}
.cap-b-cell { background: var(--navy-deep); padding: 34px 28px; }
.cap-b-verb { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px; }
.cap-b-cell h3 { font-size: 17px; font-weight: 600; color: #fff; line-height: 1.3; margin-bottom: 10px; }
.cap-b-cell > p { font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 16px; }
.cap-b-tools { font-size: 11px; color: rgba(255,255,255,0.4); border-top: 1px solid rgba(255,255,255,0.09); padding-top: 14px; line-height: 1.7; }
@media (max-width: 1024px) { .cap-b-frame { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .cap-b-frame { grid-template-columns: 1fr; } }

/* compare-page labels */
.cmp-label { background: var(--navy-deep); color: #fff; padding: 16px 48px; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.cmp-label span { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 10px; }

/* ─── CAPABILITIES SELECTOR (interactive tabs) ─── */
.cap-selector { background: var(--fog); }
.cs-tabs { display: flex; flex-wrap: wrap; gap: 0 28px; margin-bottom: 40px; border-bottom: 1px solid var(--border); }
.cs-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 2px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .2s; }
.cs-tab:hover { color: var(--text); }
.cs-tab.is-active { color: var(--text); border-bottom-color: var(--gold); }
.cs-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.cs-panel[hidden] { display: none; }
.cs-panel.is-active { animation: csFade .3s ease; }
@keyframes csFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cs-panel.is-active { animation: none; } }
.cs-panel .core-layout { align-items: start; }
.cs-panel .core-left h2 { font-size: clamp(24px, 2.8vw, 34px); }
.cs-axis { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.cs-oneliner { font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.5; margin: 0 0 16px; }
.cs-methods { font-size: 14px; color: var(--muted); margin-top: 10px; }
.cs-methods strong { color: var(--text); font-weight: 600; }
.cs-visual .cv-block { margin-bottom: 22px; }
.cs-visual .cv-block:last-child { margin-bottom: 0; }
.cv-blabel { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.cv-blabel span { color: rgba(255,255,255,0.4); font-weight: 400; letter-spacing: 0; text-transform: none; }
.cv-blist { list-style: none; margin: 0; padding: 0; }
.cv-blist li { font-size: 13.5px; color: rgba(255,255,255,0.72); line-height: 1.7; padding-left: 16px; position: relative; }
.cv-blist li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 2px; background: var(--teal); }
a.hero-pillar { text-decoration: none; transition: opacity .2s; }
a.hero-pillar:hover { opacity: 0.82; }
@media (max-width: 768px) {
  .cs-tabs { flex-direction: column; gap: 0; border-bottom: none; }
  .cs-tab { width: 100%; text-align: left; border-bottom: 1px solid var(--border); border-left: 2px solid transparent; padding: 16px 12px; margin: 0; }
  .cs-tab.is-active { border-bottom-color: var(--border); border-left-color: var(--gold); background: var(--white); }
}
/* compare-page static variant */
.cap-static-row { padding: 72px 48px; }
.cap-static-row.alt { background: var(--fog); }
.cap-static-inner { max-width: 1180px; margin: 0 auto; }
@media (max-width: 768px) { .cap-static-row { padding: 48px 20px; } }

/* ─── CAPABILITIES VERTICAL DRAWERS ─── */
.cap-drawer-v-wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cap-drawer-v {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  overflow: hidden;
  transition: background 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out;
}
.cap-drawer-v[data-color="blue"].is-open { border-left-color: var(--blue); }
.cap-drawer-v[data-color="teal"].is-open { border-left-color: var(--teal); }
.cap-drawer-v[data-color="gold"].is-open { border-left-color: var(--gold); }
.cap-drawer-v.is-open {
  background: var(--white);
  box-shadow: 0 4px 18px rgba(30, 43, 60, 0.06);
}
.cdv-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 36px 26px 32px;
  cursor: default;
}
.cdv-titles { flex: 1; min-width: 0; }
.cdv-title {
  font-size: clamp(20px, 2vw, 27px); font-weight: 700;
  color: var(--text); line-height: 1.3; margin: 0 0 5px;
}
.cdv-title em { font-style: normal; color: inherit; }
.cap-drawer-v[data-color="blue"] .cdv-title { color: var(--blue); }
.cap-drawer-v[data-color="teal"] .cdv-title { color: var(--teal); }
.cap-drawer-v[data-color="gold"] .cdv-title { color: var(--slate); }
.cdv-oneliner { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.cdv-chevron { flex-shrink: 0; color: var(--muted); font-size: 13px; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.cap-drawer-v.is-open .cdv-chevron { transform: rotate(180deg); }
.cdv-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4,0,0.2,1);
}
.cap-drawer-v.is-open .cdv-body { grid-template-rows: 1fr; }
.cdv-inner { overflow: hidden; }
.cdv-inner .core-layout {
  margin: 28px 36px 42px 32px;
  gap: 56px; align-items: start;
}
.cdv-inner .core-left > p { font-size: 16px; color: var(--muted); line-height: 1.75; max-width: 480px; }
@media (max-width: 900px) {
  .cap-drawer-v-wrap { gap: 12px; }
  .cdv-header { padding: 18px 20px; gap: 14px; cursor: pointer; }
  .cdv-inner .core-layout { margin: 4px 20px 28px; gap: 32px; grid-template-columns: 1fr; }
}

/* ─── CAPABILITIES HORIZONTAL DRAWERS (legacy, unused) ─── */
.cap-section-intro {
  text-align: center;
  padding: 72px 48px 40px;
  max-width: 1180px;
  margin: 0 auto;
}
.cap-section-intro .section-lead { margin: 0 auto; max-width: none; white-space: nowrap; }
.cap-section-intro .section-title { white-space: nowrap; }
@media (max-width: 900px) {
  .cap-section-intro .section-title,
  .cap-section-intro .section-lead { white-space: normal; }
}
.cap-drawer-outer { padding: 0 48px 88px; }
.cap-drawer-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 460px;
}
.cap-drawer-panel {
  flex: 0 0 72px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  transition: flex 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--white);
  border-right: 1px solid var(--border);
}
.cap-drawer-panel:last-child { border-right: none; }
.cap-drawer-panel.is-open { flex: 1; }
.cdp-trigger {
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 40px 0;
  background: none;
  border: none;
  border-right: 3px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease-out;
}
.cap-drawer-panel[data-color="blue"] .cdp-trigger { border-right-color: var(--blue); }
.cap-drawer-panel[data-color="teal"] .cdp-trigger { border-right-color: var(--teal); }
.cap-drawer-panel[data-color="gold"] .cdp-trigger { border-right-color: var(--gold); }
.cdp-trigger:hover { background: var(--fog); }
.cap-drawer-panel.is-open .cdp-trigger { background: rgba(0,0,0,0.018); cursor: default; pointer-events: none; }
.cdp-axis {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.cap-drawer-panel[data-color="blue"] .cdp-axis { color: var(--blue); }
.cap-drawer-panel[data-color="teal"] .cdp-axis { color: var(--teal); }
.cap-drawer-panel[data-color="gold"] .cdp-axis { color: var(--gold); }
.cdp-vtitle {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 12.5px; font-weight: 600; color: var(--text);
  line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-height: 210px;
}
.cdp-content {
  flex: 1;
  padding: 48px 52px 52px 36px;
  opacity: 0;
  transition: opacity 0.2s ease;
  min-width: 0;
}
.cap-drawer-panel.is-open .cdp-content {
  opacity: 1;
  transition: opacity 0.35s ease 0.28s;
}
.cdp-content .core-layout { gap: 48px; align-items: start; }
.cdp-content .core-left h2 { font-size: clamp(20px, 2.2vw, 30px); }
@media (max-width: 900px) {
  .cap-drawer-wrap { flex-direction: column; min-height: auto; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .cap-drawer-panel { flex: none; flex-direction: column; overflow: hidden; }
  .cap-drawer-panel.is-open { flex: none; }
  .cdp-trigger {
    flex: none; flex-direction: row; width: 100%;
    border-right: none; border-bottom: 3px solid var(--border);
    padding: 16px 20px; gap: 12px; justify-content: flex-start;
  }
  .cap-drawer-panel[data-color="blue"] .cdp-trigger { border-bottom-color: var(--blue); }
  .cap-drawer-panel[data-color="teal"] .cdp-trigger { border-bottom-color: var(--teal); }
  .cap-drawer-panel[data-color="gold"] .cdp-trigger { border-bottom-color: var(--gold); }
  .cdp-axis { writing-mode: horizontal-tb; transform: none; }
  .cdp-vtitle { writing-mode: horizontal-tb; transform: none; max-height: none; white-space: normal; font-size: 14px; }
  .cdp-content {
    max-height: 0; overflow: hidden; padding: 0 20px;
    opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
  }
  .cap-drawer-panel.is-open .cdp-content {
    max-height: 1400px; opacity: 1; padding: 28px 20px;
    transition: max-height 0.45s ease, opacity 0.3s ease 0.15s, padding 0.4s ease;
  }
  .cap-drawer-outer { padding: 0 20px 60px; }
  .cap-section-intro { padding: 48px 20px 28px; }
}

/* ─── SERVICES — three-parallel-pillar section (homepage #services + /services/ hub) ─── */
.svc-section {
  background: var(--fog);
  padding: 124px 48px;
}
.svc-head {
  max-width: 1180px;
  margin: 0 auto 56px;
  text-align: center;
}
.svc-head .section-lead {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}
.svc-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.svc-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 34px 36px;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  color: var(--white);
  text-decoration: none;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
/* Navy tint overlay — keeps the background image at ~15-25% visibility for legibility */
.svc-pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(30,43,60,0.82), rgba(20,31,45,0.92));
  transition: opacity 0.25s ease-out;
}
/* Background images per pillar — paths relative to this CSS file (css/) */
.svc-pillar[data-pillar="operating-model"] { background-image: url('../images/pillars/pillar-operating-model.jpg'); }
.svc-pillar[data-pillar="asset"]           { background-image: url('../images/pillars/pillar-asset.jpg'); }
.svc-pillar[data-pillar="sap"]             { background-image: url('../images/pillars/pillar-sap.jpg'); }
.svc-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 18px;
}
.svc-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  margin: 0 0 12px;
}
.svc-oneliner {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.80);
  margin: 0 0 22px;
}
.svc-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-points li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
}
.svc-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--gold);
}
.svc-tech {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.58);
  margin: 0 0 24px;
}
.svc-link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  transition: color 0.2s ease-out;
}
.svc-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(20,31,45,0.22);
}
.svc-pillar:hover::before { opacity: 0.90; }
.svc-pillar:hover .svc-link { color: var(--gold-light); }
@media (max-width: 768px) {
  .svc-section { padding: 72px 20px; }
  .svc-head { margin-bottom: 40px; }
  .svc-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* Hub-page closing line under the three pillars */
.svc-closing {
  max-width: 760px;
  margin: 44px auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}
.svc-closing a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  white-space: nowrap;
}
.svc-closing a:hover { color: var(--blue); }

/* ── Services hub: methodology flow bar ── */
.svc-flow {
  max-width: 1180px;
  margin: 0 auto 46px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
}
.svc-flow-step {
  position: relative;
  flex: 1;
  max-width: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 0 12px;
}
.svc-flow-step + .svc-flow-step::before {
  content: '→';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 22px;
  font-weight: 700;
}
.sf-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
}
.sf-msg {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.sf-sub {
  font-size: 13px;
  color: var(--muted);
}

/* ── Services hub: interactive expanding pillars ── */
.svc-grid--interactive {
  display: flex;
  align-items: stretch;
}
.svc-grid--interactive .svc-pillar {
  flex: 1 1 0;
  min-width: 0;
  min-height: 440px;
  transition:
    flex-grow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.25s ease-out,
    box-shadow 0.25s ease-out;
}
.svc-grid--interactive .svc-pillar .svc-points,
.svc-grid--interactive .svc-pillar .svc-tech {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition: max-height 0.5s ease, opacity 0.35s ease, margin-bottom 0.5s ease;
}
.svc-grid--interactive .svc-pillar:hover,
.svc-grid--interactive .svc-pillar:focus-visible {
  flex-grow: 1.8;
}
.svc-grid--interactive .svc-pillar:hover .svc-points,
.svc-grid--interactive .svc-pillar:focus-visible .svc-points {
  max-height: 340px;
  opacity: 1;
  margin-bottom: 22px;
}
.svc-grid--interactive .svc-pillar:hover .svc-tech,
.svc-grid--interactive .svc-pillar:focus-visible .svc-tech {
  max-height: 120px;
  opacity: 1;
  margin-bottom: 24px;
}
.svc-msg {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.2px;
  margin: 0 0 10px;
}
.svc-btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease-out, gap 0.2s ease-out;
}
.svc-pillar:hover .svc-btn,
.svc-pillar:focus-visible .svc-btn {
  background: var(--gold-light);
  gap: 12px;
}
.svc-hint {
  max-width: 760px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
/* Touch / no-hover devices, small screens and reduced motion: everything revealed */
@media (hover: none), (max-width: 900px), (prefers-reduced-motion: reduce) {
  .svc-grid--interactive .svc-pillar .svc-points,
  .svc-grid--interactive .svc-pillar .svc-tech {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }
  .svc-grid--interactive .svc-pillar .svc-points { margin-bottom: 22px; }
  .svc-grid--interactive .svc-pillar .svc-tech { margin-bottom: 24px; }
  .svc-grid--interactive .svc-pillar:hover,
  .svc-grid--interactive .svc-pillar:focus-visible { flex-grow: 1; }
  .svc-hint { display: none; }
}
@media (max-width: 900px) {
  .svc-grid--interactive { flex-direction: column; gap: 16px; }
  .svc-grid--interactive .svc-pillar { min-height: 0; }
  .svc-flow { flex-direction: column; align-items: center; gap: 18px; }
  .svc-flow-step { max-width: none; }
  .svc-flow-step + .svc-flow-step::before {
    content: '↓';
    position: static;
    transform: none;
    margin-bottom: 2px;
  }
}

/* ── Service pages: outcome list (Lean Value Design content) ── */
.svcpage-outcomes {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  max-width: 940px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 36px;
}
.svcpage-outcomes li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
}
.svcpage-outcomes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold);
}
@media (max-width: 768px) {
  .svcpage-outcomes { grid-template-columns: 1fr; }
}
.svcpage-outcomes li a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
}
.svcpage-outcomes li a:hover { color: var(--blue); }

/* ── Sector cards: compact offering points (sectors.html) ── */
.sector-offer-line {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 14px 0 0;
}
.sector-points {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sector-points li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.sector-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* Quiet offerings line on homepage priority cards */
.priority-offer {
  display: block;
  margin: 10px 0 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Nav dropdown submenus (Services · Technology) ── */
.nav-links .has-sub { position: relative; }
.nav-caret { font-size: 8px; opacity: 0.65; }
.nav-sub {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 24px;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease-out, visibility 0.18s;
  z-index: 120;
}
.nav-sub::before {
  content: '';
  position: absolute;
  inset: 14px 0 0;
  background: var(--navy-deep);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(10, 16, 24, 0.45);
  z-index: -1;
}
.has-sub:hover .nav-sub,
.has-sub:focus-within .nav-sub,
.has-sub.sub-open .nav-sub { opacity: 1; visibility: visible; }
.nav-sub li { width: auto; }
.nav-sub a {
  display: block;
  padding: 9px 20px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.nav-sub a:hover { color: var(--gold); }
.nav-sub a:not(.nav-cta)::after { display: none; }
@media (max-width: 768px) {
  .nav-sub {
    position: static;
    transform: none;
    padding: 0 0 4px;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .nav-sub::before { display: none; }
  .has-sub.sub-open .nav-sub,
  .has-sub:focus-within .nav-sub { display: block; }
  .nav-sub a { padding: 8px 24px 8px 44px; font-size: 14px; color: rgba(255, 255, 255, 0.7); }
}

/* ── Technology page: routing panels to the four technology pages ── */
.route-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.route-card {
  display: block;
  background: var(--white);
  border: 1px solid rgba(30, 43, 60, 0.12);
  border-radius: 12px;
  padding: 28px 26px 24px;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(20, 31, 45, 0.05);
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.route-card:hover {
  border-color: var(--gold);
  box-shadow: 0 12px 28px rgba(20, 31, 45, 0.12);
  transform: translateY(-2px);
}
.route-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
}
.route-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 8px;
}
.route-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
.route-card:hover .route-link { color: var(--blue); }
@media (max-width: 900px) {
  .route-grid { grid-template-columns: 1fr; }
}

/* ── Technology page: full-width alternating bands + clear section identity ── */
.techpage { background: var(--white); }
.tech-band { background: var(--white); }
.tech-band--alt { background: var(--fog); }
.techpage .svcpage-section { padding: 72px 48px; }
.techpage .svcpage-h2 {
  font-family: 'Newsreader', serif;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.02em;
}
.techpage .svcpage-h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--gold);
  margin-top: 14px;
}
/* Links must be unmissable */
.techpage .svcpage-problem a,
.techpage .svcpage-outcomes a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
}
.techpage .svcpage-problem a:hover,
.techpage .svcpage-outcomes a:hover { color: var(--navy); }
.techpage .offer-more {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
.techpage .offer-more:hover { color: var(--blue); }

/* Process-mining instrument cards */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tool-card {
  background: var(--white);
  border: 1px solid rgba(30, 43, 60, 0.12);
  border-radius: 12px;
  padding: 28px 26px 24px;
  box-shadow: 0 4px 18px rgba(20, 31, 45, 0.05);
}
.tool-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.tool-card h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
}
.tool-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 16px;
}
.tool-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-card li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.tool-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--gold);
}
.tool-links {
  margin: 32px 0 0;
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .techpage .svcpage-section { padding: 52px 20px; }
  .tool-grid { grid-template-columns: 1fr; }
}

/* Pull-quote line opening a section (e.g. AI Value Assurance 'Ready') */
.pull-line {
  max-width: 720px;
  margin: 0 0 20px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1.35;
  color: var(--navy);
}

/* ── VRO page: residency band ── */
.vro-residency {
  display: flex;
  align-items: center;
  gap: 36px;
  max-width: 1040px;
}
.vro-residency img {
  flex: 0 0 44%;
  max-width: 44%;
  border-radius: var(--radius);
  display: block;
  height: auto;
}
@media (max-width: 820px) {
  .vro-residency { flex-direction: column; align-items: flex-start; }
  .vro-residency img { max-width: 100%; flex: none; }
}

/* ── VRO page: closing quote + FAQ ── */
.vro-close-line {
  max-width: 720px;
  margin: 32px 0 0;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--navy);
}
.vro-faq {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vro-faq details {
  background: var(--white);
  border: 1px solid rgba(30, 43, 60, 0.12);
  border-radius: var(--radius);
  padding: 0 22px;
}
.vro-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  position: relative;
  padding-right: 34px;
}
.vro-faq summary::-webkit-details-marker { display: none; }
.vro-faq summary::after {
  content: '+';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--gold);
}
.vro-faq details[open] summary::after { content: '–'; }
.vro-faq details[open] summary { border-bottom: 1px solid rgba(30, 43, 60, 0.10); }
.vro-faq details p {
  padding: 16px 0 20px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

/* ── Services hub: recurring-engine strip (VRO — not a fourth pillar) ── */
.svc-vro-strip {
  max-width: 1180px;
  margin: 56px auto 0;
  padding: 34px 38px;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.svc-vro-strip .sv-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.svc-vro-strip h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
}
.svc-vro-strip p {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}
.svc-vro-strip .svc-btn { margin-top: 0; flex: 0 0 auto; }

/* Ladder note: VRO link */
.offers-note a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
}
.offers-note a:hover { color: var(--blue); }

/* ─── SERVICE & HUB PAGES (/services/…) ─── */
.svcpage-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--navy-deep);
  color: var(--white);
  padding: 150px 48px 84px;
}
.svcpage-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
}
.svcpage-hero[data-pillar="operating-model"]::before { background-image: url('../images/pillars/pillar-operating-model.jpg'); }
.svcpage-hero[data-pillar="asset"]::before           { background-image: url('../images/pillars/pillar-asset.jpg'); }
.svcpage-hero[data-pillar="sap"]::before             { background-image: url('../images/pillars/pillar-sap.jpg'); }
.svcpage-hero-inner { max-width: 1180px; margin: 0 auto; }
.svcpage-breadcrumb { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 22px; }
.svcpage-breadcrumb a { color: rgba(255,255,255,0.78); text-decoration: none; }
.svcpage-breadcrumb a:hover { color: var(--gold); }
.svcpage-breadcrumb span { margin: 0 7px; opacity: 0.5; }
.svcpage-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.svcpage-hero h1 {
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 22px;
  max-width: 20ch;
}
.svcpage-lead {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  max-width: 62ch;
  margin: 0;
}
.svcpage-main { background: var(--white); }
.svcpage-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 48px;
}
.svcpage-h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 28px;
}
.svcpage-problem {
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.6;
  color: var(--text);
  max-width: 72ch;
  margin: 0;
}
/* What this service covers */
.svcpage-covers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 48px;
}
.svcpage-cover { display: flex; gap: 20px; align-items: flex-start; }
.svcpage-cover-num {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold);
  padding-top: 3px;
}
.svcpage-cover-body h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  margin: 0 0 8px;
}
.svcpage-cover-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
  max-width: 52ch;
}
/* How we do it / Technologies / Standards panel */
.svcpage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  background: var(--fog);
  border-radius: var(--radius);
}
.svcpage-meta-block { flex: 1 1 260px; min-width: 240px; }
.svcpage-meta-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 12px;
}
.svcpage-meta-block p { font-size: 15px; line-height: 1.7; color: var(--text); margin: 0; }
.svcpage-meta-note {
  margin-top: 12px !important;
  font-size: 13.5px !important;
  color: var(--muted) !important;
  font-style: italic;
}
/* Proof callout */
.svcpage-proof {
  background: var(--navy);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 36px 40px;
}
.svcpage-proof-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.svcpage-proof p { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.90); margin: 0; }
.svcpage-proof strong { color: var(--white); }
/* How we engage */
.svcpage-engage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.svcpage-engage-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.svcpage-engage-head { margin-bottom: 12px; }
.svcpage-engage-head h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 10px;
}
.svcpage-engage-dur {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--teal);
  background: rgba(0,168,168,0.10);
  padding: 3px 10px;
  border-radius: 20px;
}
.svcpage-engage-item p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; }
/* Related services */
.svcpage-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.svcpage-related-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  text-decoration: none;
  transition: border-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.svcpage-related-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(30,43,60,0.08);
}
.svcpage-related-num { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--gold); }
.svcpage-related-name { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); }
.svcpage-related-arrow { font-size: 18px; color: var(--gold); }
.svcpage-related-hub { background: var(--fog); }
/* CTA band */
.svcpage-cta { background: var(--teal); padding: 72px 48px; text-align: center; }
.svcpage-cta-inner { max-width: 760px; margin: 0 auto; }
.svcpage-cta h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  margin: 0 0 28px;
}
@media (max-width: 768px) {
  .svcpage-hero { padding: 120px 20px 60px; }
  .svcpage-section { padding: 44px 20px; }
  .svcpage-covers { grid-template-columns: 1fr; gap: 28px; }
  .svcpage-meta { gap: 28px; }
  .svcpage-engage { grid-template-columns: 1fr; }
  .svcpage-related-grid { grid-template-columns: 1fr; }
  .svcpage-cta { padding: 56px 20px; }
}

/* ─── SERVICES — full-bleed BCG-style hover-reveal strip (homepage #services) ─── */
.svc-strip-section {
  background: var(--white);
  padding: 96px 0 0;
}
.svc-strip-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 48px 80px;
  text-align: center;
}
.svc-strip-head .section-lead {
  /* wide enough that each lead sentence sits on a single line at desktop width */
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
/* Full-bleed three-column strip — sharp edges, hairline dividers */
.svc-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  width: 100%;
}
.svc-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 580px;
  overflow: hidden;
  background-color: var(--navy-deep);
  background-size: cover;
  background-position: center;
  text-decoration: none;
  outline-offset: -4px;
}
.svc-tile[data-pillar="operating-model"] { background-image: url('../images/pillars/pillar-operating-model.jpg'); }
.svc-tile[data-pillar="asset"]           { background-image: url('../images/pillars/pillar-asset.jpg'); }
.svc-tile[data-pillar="sap"]             { background-image: url('../images/pillars/pillar-sap.jpg'); }
/* Navy overlay — lightens on hover/focus so the image breathes through */
.svc-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--navy-deep);
  opacity: 0.82;
  transition: opacity 0.4s ease-out;
}
.svc-tile-inner {
  position: relative;
  z-index: 2;
  padding: 48px;
  width: 100%;
}
.svc-tile-num {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.svc-tile-title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--white);
  margin: 0;
}
/* Locked message line — first line under each service-card heading */
.svc-tile-msg {
  font-size: 15px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--gold);
  margin: 10px 0 0;
}

/* Hidden content (revealed on hover/focus on pointer devices; always shown on touch) */
.svc-tile-reveal {
  opacity: 1;
  transform: none;
  max-height: none;
  overflow: hidden;
}
.svc-tile-lead {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 16px;
}
.svc-tile-points {
  list-style: none;
  margin: 16px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
}
.svc-tile-points li {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
}
.svc-tile-tech {
  font-size: 12px;
  font-style: italic;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 16px;
}
.svc-tile-link {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
  margin-top: 24px;
}
/* Keyboard focus — visible gold outline, same reveal as hover */
.svc-tile:focus,
.svc-tile:focus-visible {
  outline: 2px solid var(--gold);
}
/* Pointer (hover-capable) devices: collapse the reveal until hover/focus */
@media (hover: hover) {
  .svc-tile-reveal {
    opacity: 0;
    transform: translateY(16px);
    max-height: 0;
    transition: opacity 0.35s ease-out 0.05s, transform 0.35s ease-out 0.05s, max-height 0.4s ease-out 0.05s;
  }
  .svc-tile:hover .svc-tile-reveal,
  .svc-tile:focus .svc-tile-reveal,
  .svc-tile:focus-within .svc-tile-reveal {
    opacity: 1;
    transform: translateY(0);
    max-height: 460px;
  }
  .svc-tile:hover::before,
  .svc-tile:focus::before,
  .svc-tile:focus-within::before {
    opacity: 0.6;
  }
  .svc-tile:hover .svc-tile-link,
  .svc-tile:focus .svc-tile-link,
  .svc-tile:focus-within .svc-tile-link {
    text-decoration: underline;
  }
}
/* Mobile: single full-width column */
@media (max-width: 768px) {
  .svc-strip-section { padding: 64px 0 0; }
  .svc-strip-head { padding: 0 20px 48px; }
  .svc-strip { grid-template-columns: 1fr; }
  .svc-tile { min-height: 420px; }
  .svc-tile-inner { padding: 36px 28px; }
}

/* ─── FEATURED CLIENTS — rotating logo strip (light band, slate monochrome logos) ─── */
.clients-strip {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 0 54px;
  text-align: center;
  overflow: hidden;
}
.clients-head { margin-bottom: 30px; padding: 0 20px; }
.clients-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--teal-ink); margin-bottom: 8px;
}
.clients-title {
  font-size: clamp(20px, 2.4vw, 28px); font-weight: 700;
  letter-spacing: -0.01em; color: var(--text); margin: 0;
}
.clients-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.clients-track {
  display: flex;
  align-items: center;
  gap: 144px;
  width: max-content;
  animation: clientsScroll 50s linear infinite;
}
.clients-strip:hover .clients-track { animation-play-state: paused; }
.client-logo {
  height: 46px; width: auto; flex-shrink: 0;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.2s ease-out;
}
.client-logo:hover { opacity: 1; }
@keyframes clientsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .clients-strip { padding: 40px 0 44px; }
  .clients-track { gap: 96px; }
  .client-logo { height: 38px; }
}

/* ─── FOOTER TAGLINE + BRAND CROSS-REFERENCE ─── */
p.footer-tagline, .footer-brand > p.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--gold);
  margin: 2px 0 14px;
}
.footer-brand > p.footer-crossref {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  max-width: 380px;
  margin: -14px 0 24px;
}
.footer-bottom .footer-tagline { margin: 0; font-size: 13px; }

/* ─── FOOTER SOCIAL ICONS ─── */
.footer-social { display: flex; gap: 12px; margin-top: 24px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.72);
  font-size: 16px; text-decoration: none;
  transition: background 0.2s ease-out, color 0.2s ease-out;
}
.footer-social a:hover { background: var(--gold); color: var(--navy); }

/* ─── TWIN DEFINITION — plain-English line preceding first "twin" mention ─── */
.twin-def { font-style: italic; opacity: 0.85; }

/* ─── LEAKS BAND — the five value-leak questions (homepage) ─── */
.leaks-band {
  background: var(--fog);
  padding: 88px 48px 76px;
}
.leaks-head {
  max-width: 1180px;
  margin: 0 auto 40px;
  text-align: center;
}
.leaks-head .section-lead { max-width: 62ch; margin-left: auto; margin-right: auto; }
.leaks-list {
  list-style: none;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px 48px;
}
.leaks-list li { border-top: 2px solid var(--border); padding-top: 22px; }
.leak-num {
  display: block;
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 12px;
}
.leaks-list h3 {
  font-size: 18px; font-weight: 700; color: var(--text);
  line-height: 1.35; margin: 0 0 10px;
}
.leaks-list p {
  font-size: 15px; color: var(--muted); line-height: 1.7;
  font-style: italic; margin: 0;
}
@media (max-width: 768px) {
  .leaks-band { padding: 72px 20px; }
  .leaks-list { gap: 28px; }
}
/* Explanatory inline SVG figures (leaks band + operating-model page) */
.leaks-figure, .process-figure {
  max-width: 960px;
  margin: 48px auto 0;
  padding: 0;
}
.process-figure { margin-top: 44px; }
.leaks-figure svg, .process-figure svg { display: block; width: 100%; height: auto; }
.leaks-figcaption, .process-figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 768px) {
  .leaks-figure, .process-figure { margin-top: 40px; }
}

/* ─── SECTOR PRESSURES — pressure-led sector cards (homepage) ─── */
.pressure-band {
  background: var(--white);
  padding: 96px 48px;
}
.pressure-head {
  max-width: 1180px;
  margin: 0 auto 44px;
  text-align: center;
}
.pressure-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.pressure-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  text-decoration: none;
  transition: border-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.pressure-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(30,43,60,0.08);
}
.pressure-card h3 {
  font-size: 16px; font-weight: 700; color: var(--text);
  letter-spacing: 0.2px; margin: 0 0 10px;
}
.pressure-card p {
  font-size: 14.5px; color: var(--muted); line-height: 1.65;
  margin: 0 0 18px; flex: 1;
}
.pressure-link { font-size: 13px; font-weight: 600; color: var(--teal-ink); }
.pressure-card:hover .pressure-link { color: var(--gold); }
@media (max-width: 768px) {
  .pressure-band { padding: 64px 20px; }
  .pressure-grid { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pressure-card:hover { transform: none; box-shadow: none; }
}

/* ─── FOUNDER CREDENTIAL ROWS (profile band, replaces old accordion) ─── */
.cred-rows { display: flex; flex-direction: column; gap: 14px; }
.cred-row {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 20px;
}
.cred-row-label {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 4px;
}
.cred-row p { font-size: 14px; color: var(--text); line-height: 1.6; margin: 0; }

/* Accordion variant (homepage founder band): title always visible, body expands on hover/focus.
   The container has a FIXED height — the hovered box takes slack from the other two, so the
   photo and the sections below never move. */
.cred-rows--accordion {
  height: 440px;
}
.cred-rows--accordion .cred-row {
  cursor: default;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition:
    flex-grow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.25s ease-out,
    box-shadow 0.25s ease-out;
}
.cred-rows--accordion .cred-title {
  font-weight: 700;
  color: var(--navy);
}
.cred-rows--accordion .cred-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.45s ease, opacity 0.3s ease, margin-top 0.45s ease;
}
.cred-rows--accordion .cred-row:hover,
.cred-rows--accordion .cred-row:focus-visible {
  flex-grow: 2.6;
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(20, 31, 45, 0.08);
}
.cred-rows--accordion .cred-row:hover .cred-body,
.cred-rows--accordion .cred-row:focus-visible .cred-body {
  max-height: 140px;
  opacity: 1;
  margin-top: 6px;
}
/* Touch devices, narrow screens and reduced motion: static, everything expanded */
@media (hover: none), (max-width: 900px), (prefers-reduced-motion: reduce) {
  .cred-rows--accordion { height: auto; }
  .cred-rows--accordion .cred-row { flex: none; overflow: visible; }
  .cred-rows--accordion .cred-row:hover,
  .cred-rows--accordion .cred-row:focus-visible { flex-grow: 0; }
  .cred-rows--accordion .cred-body {
    max-height: none;
    opacity: 1;
    overflow: visible;
    margin-top: 6px;
  }
}

/* ─── OPERATIONS X-RAY PAGE ─── */
.offer-more {
  display: inline-block; margin-top: 16px;
  font-size: 13.5px; font-weight: 600; color: var(--teal-ink); text-decoration: none;
}
.offer-more:hover { color: var(--gold); }

.xray-intro { font-size: 16px; color: var(--text); margin: 0 0 18px; }
.xray-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 640px;
}
.xray-list li {
  position: relative; padding-left: 20px;
  font-size: 15.5px; color: var(--text); line-height: 1.6;
}
.xray-list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--gold);
}
.xray-list-2col {
  max-width: 1180px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px 48px;
}
.xray-note { font-size: 14.5px; color: var(--muted); font-style: italic; margin: 20px 0 0; }
@media (max-width: 768px) { .xray-list-2col { grid-template-columns: 1fr; } }

/* Quiet technologies line (twin foundation page) */
.svc-tech-line {
  max-width: 760px; margin: 0 auto; text-align: center;
  font-size: 13.5px; color: var(--muted); font-style: italic; line-height: 1.7;
}

/* ─── INSIGHTS — seeded articles ─── */
.insights-articles { background: var(--white); padding: 72px 48px 40px; }
.insight-post {
  max-width: 760px; margin: 0 auto 72px;
  padding-bottom: 64px; border-bottom: 1px solid var(--border);
}
.insight-post:last-child { border-bottom: none; margin-bottom: 24px; }
.insight-post h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px); font-weight: 600;
  line-height: 1.25; color: var(--text); margin: 6px 0 20px;
}
.insight-post p { font-size: 16px; line-height: 1.8; color: var(--text); margin-bottom: 18px; }
.insight-post p strong { color: var(--text); }
.insight-post-cta a {
  font-size: 14.5px; font-weight: 600; color: var(--teal); text-decoration: none;
}
.insight-post-cta a:hover { color: var(--gold); }
@media (max-width: 768px) { .insights-articles { padding: 48px 20px 24px; } .insight-post { margin-bottom: 48px; padding-bottom: 40px; } }

/* Government page — panel tiles (cred-rows in a 2-col grid on white) */
.gov-panels {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; max-width: 880px; margin-top: 24px;
}
.gov-panels .cred-row { background: var(--fog); border-color: var(--border); }
@media (max-width: 680px) { .gov-panels { grid-template-columns: 1fr; } }

/* ─── CTA STRIP (slim, between bands 3 and 4 per §3) ─── */
.cta-strip {
  background: var(--navy);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 18px 36px; padding: 26px 48px;
}
.cta-strip p { font-size: 15px; color: rgba(255,255,255,0.85); margin: 0; }
.cta-strip .btn-primary { padding: 11px 24px; font-size: 14px; }
@media (max-width: 768px) { .cta-strip { padding: 22px 20px; text-align: center; } }

/* ─── VALUE-LEAK INSTRUMENT §4 v2 — caption row + sector ribbon ─── */
.leaks-captions {
  max-width: 1180px; margin: 28px auto 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.leak-caption-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.leak-caption p { font-size: 13px; line-height: 1.6; color: var(--muted); font-style: italic; margin: 0; }
@media (max-width: 900px) { .leaks-captions { grid-template-columns: 1fr; gap: 16px; } }

.sector-ribbon { max-width: 1180px; margin: 64px auto 0; }
.ribbon-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 27px); font-weight: 600;
  color: var(--text); text-align: center; margin: 0 0 20px;
}

/* ─── INSTRUMENT WIRING (§5 v2) ─── */
.hero-sub-link {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,0.5);
  transition: color 0.2s ease-out, border-color 0.2s ease-out;
}
.hero-sub-link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.svc-demo-link {
  display: block; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85);
  text-decoration: underline; text-decoration-color: rgba(255,255,255,0.4);
  cursor: pointer;
}
.svc-demo-link:hover, .svc-demo-link:focus { color: var(--gold); outline: none; }
.demo-feature {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  background: var(--fog); border-radius: var(--radius);
  padding: 36px 40px;
}
.demo-feature .svcpage-h2 { margin-bottom: 12px; }
.demo-feature .svcpage-problem { margin: 0; }
.demo-cta { white-space: nowrap; }

/* ─── CLIENT OUTCOMES (v2 §6) — twelve-card proof library + homepage band ─── */
.co-band { background: var(--fog); padding: 96px 48px; }
.co-band-home { background: var(--white); }
.co-head { max-width: 1180px; margin: 0 auto 44px; text-align: center; }
.co-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px;
}
.co-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 26px;
  scroll-margin-top: 96px;
}
.co-band-home .co-card { background: var(--fog); }
.co-card h3 { font-size: 14.5px; font-weight: 700; letter-spacing: 0.2px; color: var(--text); margin: 0 0 10px; }
.co-card p { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin: 0 0 14px; flex: 1; }
.co-tech { font-size: 12px !important; color: var(--muted) !important; font-style: italic; flex: 0 !important; }
.co-instrument { font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: none; }
.co-instrument:hover { color: var(--gold); }
.co-all { text-align: center; margin: 36px 0 0; }
.co-all a { font-size: 14px; font-weight: 600; color: var(--teal); text-decoration: none; }
.co-all a:hover { color: var(--gold); }
@media (max-width: 768px) { .co-band { padding: 64px 20px; } }

/* ─── CLIENT OUTCOMES — testimonial carousel (live-site format) ─── */
.tst-carousel { position: relative; max-width: 900px; margin: 0 auto; padding: 0 64px; }
.tst-stage { position: relative; min-height: 320px; }
.tst-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease-out;
  text-align: center;
}
.tst-slide.is-active { opacity: 1; pointer-events: auto; position: relative; }
.tst-text { font-size: 16.5px; line-height: 1.8; color: var(--text); margin: 0 0 26px; }
.tst-name { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.tst-stars { color: var(--gold); font-size: 15px; letter-spacing: 4px; margin-bottom: 10px; }
.tst-meta .co-instrument { display: inline-block; }
.tst-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border);
  color: var(--text); font-size: 17px; cursor: pointer;
  transition: border-color 0.2s ease-out, color 0.2s ease-out;
  z-index: 2;
}
.tst-arrow:hover { border-color: var(--gold); color: var(--gold); }
.tst-prev { left: 0; }
.tst-next { right: 0; }
.tst-counter { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--muted); letter-spacing: 1px; }
@media (max-width: 680px) {
  .tst-carousel { padding: 0 8px; }
  .tst-arrow { position: static; transform: none; margin: 0 8px; }
  .tst-stage { min-height: 420px; }
  .tst-carousel { display: flex; flex-wrap: wrap; justify-content: center; }
  .tst-stage { width: 100%; order: -1; margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tst-slide { transition: none; } }

/* ── Homepage outcomes band: testimonial layout — content left, photo right ── */
.tst-band { padding: 0; }
.tst-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: stretch;
}
.tst-band .tst-content {
  max-width: none;
  padding: 96px 72px 80px max(48px, calc((100vw - 1280px) / 2 + 48px));
  text-align: left;
}
.tst-quotemark {
  font-family: 'Newsreader', serif;
  font-size: 120px;
  line-height: 0.55;
  color: var(--navy);
  margin-bottom: 26px;
}
.tst-band .section-title { text-align: left; margin-bottom: 12px; }
.tst-sub {
  font-size: 16px;
  color: var(--text);
  margin: 0 0 22px;
}
.tst-rule {
  position: relative;
  height: 1px;
  background: rgba(30, 43, 60, 0.14);
  max-width: 440px;
  margin-bottom: 46px;
}
.tst-rule::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 120px;
  height: 3px;
  background: var(--navy);
}
.tst-band .tst-stage { min-height: 300px; }
.tst-band .tst-slide { text-align: left; justify-content: flex-start; }
.tst-band .tst-text {
  font-size: 18.5px;
  line-height: 1.8;
  font-weight: 300;
  margin: 0 0 34px;
}
.tst-band .tst-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  border-top: 1px solid rgba(30, 43, 60, 0.12);
  padding-top: 26px;
}
.tst-band .tst-name { margin: 0; font-size: 16px; }
.tst-band .tst-stars { margin: 0; }
.tst-band .tst-meta .co-instrument { flex-basis: 100%; }
.tst-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}
.tst-band .tst-arrow {
  position: static;
  transform: none;
  width: auto; height: auto;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 26px;
  color: var(--navy);
  padding: 2px 6px;
}
.tst-band .tst-arrow:hover { color: var(--gold); }
.tst-band .tst-counter { margin: 0 0 0 8px; }
.tst-band .co-all { text-align: left; margin-top: 30px; }
.tst-photo {
  background-size: cover;
  background-position: center;
  min-height: 560px;
}
@media (max-width: 980px) {
  .tst-wrap { grid-template-columns: 1fr; }
  .tst-band .tst-content { padding: 72px 24px 56px; }
  .tst-photo { min-height: 320px; order: 2; }
  .tst-band .tst-stage { min-height: 420px; }
}

/* ─── SECTOR PRIORITIES — continuous ribbon, three visible, moving left ─── */
.priority-marquee {
  max-width: 1180px; margin: 0 auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.priority-track {
  display: flex; gap: 24px; width: max-content;
  animation: priorityScroll 45s linear infinite;
}
.priority-marquee:hover .priority-track { animation-play-state: paused; }
.priority-card {
  flex: 0 0 370px;
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 28px; text-decoration: none;
}
.priority-card h4 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.priority-card p { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin: 0 0 16px; flex: 1; }
.priority-card:hover { border-color: var(--gold); }
.priority-card:hover .pressure-link { color: var(--gold); }
@keyframes priorityScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 680px) { .priority-card { flex-basis: 300px; } }
@media (prefers-reduced-motion: reduce) {
  .priority-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .priority-track a[aria-hidden="true"] { display: none; }
  .priority-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ─── LEGAL PAGES (privacy / terms) ─── */
.legal-section { background: var(--white); padding: 72px 48px 96px; }
.legal-inner { max-width: 760px; margin: 0 auto; }
.legal-inner p { font-size: 15.5px; color: var(--text); line-height: 1.8; margin-bottom: 18px; }
.legal-inner h2 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; color: var(--text);
  margin: 36px 0 12px;
}
.legal-inner a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(0,131,201,0.3); }
.legal-inner a:hover { color: var(--teal); }
@media (max-width: 768px) { .legal-section { padding: 48px 20px 64px; } }
/* Footer-bottom legal links */
.footer-bottom a { color: rgba(255,255,255,0.55); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold); }

/* ─── PREMIUM DISPLAY TYPOGRAPHY — Newsreader for h1/h2, Inter for body ─── */
.hero h1,
.section-title,
.page-hero h1,
.svcpage-hero h1,
.svcpage-h2,
.ob-title,
.clients-title,
.profile-heading,
.core-left h2,
.case-row-main h2,
.cta-band h2,
.svcpage-cta h2 {
  font-family: var(--font-display);
}
/* Serif needs gentler tracking than Inter's tight negative spacing */
.hero h1 { letter-spacing: -0.5px; }
.section-title { letter-spacing: -0.2px; }
.svc-tile-title { letter-spacing: 0; } /* picks up --font-display via its existing var() */

/* ─── MOBILE NAV — hamburger toggle ─── */
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,0.85); border-radius: 1px;
  transition: transform 0.25s ease-out, opacity 0.2s ease-out;
}
nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 70px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--navy-deep);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 8px 0 16px;
  }
  nav.nav-open .nav-links { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 24px; font-size: 15px; }
  .nav-links a:not(.nav-cta)::after { display: none; }
  .nav-cta { margin: 10px 24px 0; text-align: center; }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Client strip: no scroll — show one static, centred, wrapped set */
  .clients-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 40px 56px; max-width: 1180px; margin: 0 auto; }
  .clients-track img[aria-hidden="true"] { display: none; }
  .clients-marquee { -webkit-mask-image: none; mask-image: none; }
  /* Services pillars + related cards: no lift on hover */
  .svc-pillar:hover { transform: none; box-shadow: none; }
  .svcpage-related-card:hover { transform: none; box-shadow: none; }
  /* BCG strip: show all tile content instantly, no overlay/reveal animation */
  .svc-tile-reveal {
    opacity: 1 !important;
    transform: none !important;
    max-height: none !important;
    transition: none !important;
  }
  .svc-tile::before { transition: none !important; }
  /* Disable all animations and transitions */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  /* Reveal elements appear immediately */
  .reveal { opacity: 1; transform: none; }
  /* Ken-Burns stays static */
  .hero-bg { animation: none; }
  /* Rotating word swaps without slide */
  #hero-rotate { transition: none !important; transform: none !important; }
}

/* ── Floating section-scroll button ── */
#scroll-nav {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  color: var(--navy);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(20, 31, 45, 0.35);
  z-index: 90;
  transition: background 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
}
#scroll-nav:hover { background: var(--navy); color: var(--gold); transform: translateY(-2px); }
@media (max-width: 768px) {
  #scroll-nav { right: 16px; bottom: 16px; width: 42px; height: 42px; font-size: 18px; }
}

/* ── Nav brand word: Advisory beside the logo ── */
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo-word {
  font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px;
  letter-spacing: .18em; text-transform: uppercase; color: #9DA5AD;
  padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18);
  line-height: 1;
}
@media (max-width: 768px) {
  .nav-logo { gap: 8px; }
  .nav-logo-word { font-size: 12px; }
}

/* ── Homepage AI Value Assurance band ── */
.ai-band { background: var(--navy-deep); padding: 96px 48px; }
.ai-band-inner { max-width: 1180px; margin: 0 auto; }
.ai-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.ai-headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.2; letter-spacing: -0.02em;
  color: var(--white); margin: 0 0 22px; max-width: 20ch;
}
.ai-body {
  font-size: 17px; line-height: 1.75; color: rgba(255,255,255,0.72);
  max-width: 66ch; margin: 0 0 34px;
}
@media (max-width: 768px) { .ai-band { padding: 64px 20px; } }

/* VRO strip: lead + dual-audience lines */
.svc-vro-strip .vro-lead {
  font-size: 15.5px; font-weight: 600; color: rgba(255,255,255,0.92);
  margin: 0 0 8px; max-width: 62ch;
}
.svc-vro-strip .vro-audience {
  font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.6);
  margin: 10px 0 0; max-width: 70ch;
}
/* Hub trust line */
.svc-trust {
  max-width: 860px; margin: 26px auto 0; text-align: center;
  font-size: 13px; line-height: 1.65; color: var(--muted);
}

/* svc-msg keeps its gold inside the VRO strip (strip p rule otherwise outranks it) */
.svc-vro-strip .svc-msg { color: var(--gold); margin-bottom: 6px; }

/* ══ VRO page re-layout (vrx-*) — mirrors the old /services/ page structure ══ */
/* 1. Photo hero */
.vrx-hero {
  position: relative;
  background-image:
    linear-gradient(100deg, rgba(20,31,45,0.94) 0%, rgba(20,31,45,0.82) 45%, rgba(20,31,45,0.55) 100%),
    url('../images/residency-session.jpg');
  background-size: cover;
  background-position: center;
  padding: 170px 48px 96px;
  color: var(--white);
}
.vrx-hero-inner { max-width: 1180px; margin: 0 auto; }
.vrx-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 18px;
}
.vrx-hero-lead {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 16px;
}
.vrx-hero-sub {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
  max-width: 62ch;
  margin: 0 0 34px;
}
/* 2. Trust bar (dark, white logo variants) */
.vrx-trust {
  background: var(--navy-deep);
  padding: 40px 48px;
  text-align: center;
}
.vrx-trust-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 24px;
}
.vrx-trust-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
}
.vrx-trust-logos img { height: 30px; width: auto; opacity: 0.85; }
/* 3. Checklist */
.vrx-check {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 72ch;
}
.vrx-check li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
}
.vrx-check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--gold);
}
/* 4. Dual outcomes */
.vrx-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.vrx-dual-col {
  background: var(--fog);
  border: 1px solid rgba(30,43,60,0.10);
  border-radius: 12px;
  padding: 28px 30px;
}
.vrx-dual-col h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 14px; }
.vrx-dual-col .vrx-check { margin-top: 0; }
/* 5. Image + features band */
.vrx-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: stretch;
  background: var(--fog);
}
.vrx-feature-text { padding: 72px 56px 72px max(48px, calc((100vw - 1280px) / 2 + 48px)); }
.vrx-minis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 36px;
  margin-top: 34px;
}
.vrx-mini h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.vrx-mini p { font-size: 14px; line-height: 1.65; color: var(--text); margin: 8px 0 0; }
.vrx-feature-img { background-size: cover; background-position: center; min-height: 420px; }
/* 6. Numbered vertical flow */
.vrx-steps { display: flex; flex-direction: column; gap: 0; max-width: 860px; }
.vrx-step {
  display: flex;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(30,43,60,0.10);
}
.vrx-step:last-child { border-bottom: none; }
.vrx-step-num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  padding-top: 2px;
}
.vrx-step-body h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 4px; }
.vrx-step-body p { font-size: 15px; line-height: 1.7; color: var(--text); margin: 8px 0 0; }
/* 8. Champions card band */
.vrx-champ {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: stretch;
  background: var(--navy);
  color: var(--white);
}
.vrx-champ-img { background-size: cover; background-position: center; min-height: 420px; }
.vrx-champ-body { padding: 72px 56px; }
.vrx-champ-body .svcpage-h2 { color: var(--white); }
.vrx-champ-body p { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,0.82); margin: 0 0 18px; max-width: 70ch; }
.vrx-champ-body .vrx-check li { color: rgba(255,255,255,0.85); }
.vrx-champ-body .vrx-check { margin-bottom: 22px; }
.vrx-champ-body .vro-close-line { color: var(--gold); }
/* 9. Tool grid */
.vrx-tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.vrx-tool {
  display: block;
  background: var(--white);
  border: 1px solid rgba(30,43,60,0.12);
  border-radius: 12px;
  padding: 24px 22px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(20,31,45,0.05);
  transition: border-color 0.2s ease-out;
}
a.vrx-tool:hover { border-color: var(--gold); }
.vrx-tool h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.vrx-tool p { font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0; }
/* 12. Testimonial band */
.vrx-quote { background: var(--navy-deep); padding: 88px 48px; }
.vrx-quote-inner { max-width: 900px; margin: 0 auto; }
.vrx-quote-mark {
  font-family: var(--font-display);
  font-size: 110px;
  line-height: 0.5;
  color: var(--gold);
  margin-bottom: 30px;
}
.vrx-quote-text { font-size: 18px; line-height: 1.8; color: rgba(255,255,255,0.88); margin: 0 0 26px; }
.vrx-quote-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vrx-quote-name { font-size: 15px; font-weight: 700; color: var(--white); }
.vrx-quote-stars { color: var(--gold); letter-spacing: 4px; }
/* Mobile: everything stacks */
@media (max-width: 900px) {
  .vrx-hero { padding: 130px 20px 64px; }
  .vrx-trust { padding: 32px 20px; }
  .vrx-trust-logos { gap: 32px; }
  .vrx-trust-logos img { height: 24px; }
  .vrx-dual { grid-template-columns: 1fr; }
  .vrx-feature, .vrx-champ { grid-template-columns: 1fr; }
  .vrx-feature-text, .vrx-champ-body { padding: 52px 20px; }
  .vrx-feature-img, .vrx-champ-img { min-height: 260px; }
  .vrx-minis { grid-template-columns: 1fr; }
  .vrx-tools { grid-template-columns: 1fr 1fr; }
  .vrx-step { gap: 18px; }
  .vrx-quote { padding: 64px 20px; }
}
@media (max-width: 560px) {
  .vrx-tools { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vrx-tool, .vrx-hero, .vrx-feature-img, .vrx-champ-img { transition: none !important; }
}

/* Pillar tile sub-link (Data to Intelligence) */
.svc-sublink { color: var(--gold); font-weight: 600; cursor: pointer; }
.svc-sublink:hover { text-decoration: underline; }

/* ══ Outcome-led technology pages (ox-*) ══ */
/* 1. Outcome hero — photo + navy overlay (photo set inline per page) */
.ox-hero {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  padding: 170px 48px 96px;
  color: var(--white);
}
.ox-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(20,31,45,0.95) 0%, rgba(20,31,45,0.85) 45%, rgba(20,31,45,0.6) 100%);
}
.ox-hero-inner { max-width: 1180px; margin: 0 auto; }
.ox-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 20px;
  max-width: 18ch;
}
.ox-hero-lead {
  font-size: 17.5px;
  line-height: 1.75;
  color: rgba(255,255,255,0.82);
  max-width: 62ch;
  margin: 0;
}
/* 2. What it fixes */
.ox-fix { background: var(--fog); padding: 72px 48px; }
.ox-fix-inner { max-width: 1180px; margin: 0 auto; }
.ox-fix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ox-fix-card {
  background: var(--white);
  border: 1px solid rgba(30,43,60,0.12);
  border-radius: 12px;
  padding: 28px 26px;
  box-shadow: 0 4px 16px rgba(20,31,45,0.05);
}
.ox-fix-problem {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 14px;
}
.ox-fix-arrow { color: var(--gold); font-size: 20px; line-height: 1; margin: 0 0 12px; }
.ox-fix-outcome { font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--navy); margin: 0; }
/* 3. Live demo band — unmissable gold */
.ox-demo { background: var(--gold); padding: 64px 48px; }
.ox-demo-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.ox-demo h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 8px;
}
.ox-demo p { font-size: 15.5px; line-height: 1.65; color: rgba(20,31,45,0.8); margin: 0; max-width: 60ch; }
.ox-demo-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.ox-demo-btn {
  display: inline-block;
  background: var(--navy-deep);
  color: var(--white);
  padding: 14px 26px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.ox-demo-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,31,45,0.3); }
/* 5. When-to-use-what table */
.ox-table-wrap { overflow-x: auto; margin-top: 32px; }
.ox-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ox-table th, .ox-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(30,43,60,0.12);
  font-size: 14.5px;
  line-height: 1.6;
  vertical-align: top;
}
.ox-table th {
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid var(--gold);
}
.ox-table td:first-child { font-weight: 700; color: var(--navy); white-space: nowrap; }
/* deep-dive accordion reuses .vro-faq */
/* 6. Serves-the-service closer */
.ox-close { background: var(--navy); padding: 72px 48px; color: var(--white); }
.ox-close-inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.ox-close-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.ox-close h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 36px);
  color: var(--white);
  margin: 0 0 24px;
}
.ox-close-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.ox-close-links .btn-primary { background: var(--gold); color: var(--navy); }
.ox-close-links .btn-ghost-w {
  color: rgba(255,255,255,0.85); font-size: 15px; font-weight: 600; text-decoration: none;
  padding: 12px 22px; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px;
  transition: border-color 0.2s ease-out, color 0.2s ease-out;
}
.ox-close-links .btn-ghost-w:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 900px) {
  .ox-hero { padding: 130px 20px 64px; }
  .ox-fix { padding: 52px 20px; }
  .ox-fix-grid { grid-template-columns: 1fr; }
  .ox-demo { padding: 48px 20px; }
  .ox-close { padding: 52px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ox-demo-btn { transition: none; }
  .ox-demo-btn:hover { transform: none; }
}

/* Inline explainer accordion (technology deep-dives) */
.vro-faq-inline { margin-top: 10px; }
.vro-faq-inline summary {
  cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--blue);
  list-style: none;
}
.vro-faq-inline summary::-webkit-details-marker { display: none; }
.vro-faq-inline summary::after { content: ' +'; color: var(--gold); }
.vro-faq-inline[open] summary::after { content: ' –'; }
.vro-faq-inline p { margin-top: 8px; }

/* Quiet footnote inside the AI band (twin definition) */
.ai-foot { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.5); font-style: italic; margin: 18px 0 0; max-width: 66ch; }

/* Hero grows naturally when one viewport can't fit the content */
@media (max-width: 768px), (max-height: 700px) {
  .hero { padding-top: 115px; }
}

/* ─── HOTFIX 19 Jul: hero pillar row was painted behind .hero-bg (z-index 0, absolute)
   after being moved out of .hero-inner. Lift it into the content layer. ─── */
.hero .hero-pillars { position: relative; z-index: 1; }

/* ─── Hero refinements 19 Jul (Sumit): content lower, pillar row tighter + larger ─── */
.hero-inner { padding-top: clamp(20px, 4.5vh, 52px); }   /* eyebrow sits 1–2 lines lower (Sumit, Aug 19) */
.hero .hero-pillars { justify-content: flex-start; }     /* cluster left instead of full stretch */
.hero .hero-pillar { flex: 0 0 auto; padding: 0 28px; }  /* natural width, tighter spacing; label size stays the base 11px */
@media (max-width: 768px) { .hero-inner { padding-top: 16px; } }

/* ─── SITE ANIMATIONS — reduced-motion overrides ───
   Disables the nav-shrink, hero entrance, card-lift and button-motion
   effects for anyone with a system-level reduced-motion preference.
   (Scroll reveal is already safe: .reveal classes are only added by JS
   when reduced motion is NOT set, and content is visible without JS.) */
@media (prefers-reduced-motion: reduce) {
  nav, .nav-logo-img { transition: none !important; }
  .hero-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ox-fix-card, .route-card, .sector-card, .service-card, .offer-card,
  .outcome-card, .platform-group, .assurance-card,
  .btn-white, .nav-cta, .ox-demo-btn, .footer-news-form button {
    transition: none !important; transform: none !important;
  }
  .vro-faq-panel { transition: none !important; }
}

/* ═══════════════ P16 SECTION KIT (K1–K7) — Herrington-inspired reusable patterns.
   Existing tokens only; no icon fonts (numbers, ✓ → glyphs, pillar-dot squares);
   all sections stack to one column ≤768px; motion gated by reduced-motion below. ═══════════════ */

/* shell */
.kit-section { padding: 88px 48px; }
.kit-fog  { background: var(--fog); }
.kit-white{ background: var(--white); }
.kit-navy { background: var(--navy-deep); }
.kit-inner { max-width: 1180px; margin: 0 auto; }
.kit-head { max-width: 1180px; margin: 0 auto 44px; }
.kit-navy .section-title, .kit-navy h2, .kit-navy h3 { color: var(--white); }
.kit-navy p { color: rgba(255,255,255,0.82); }

/* K1 — problem grid (2×2 cards) */
.kit-problems { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.kit-problem {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: 0 6px 18px rgba(20,31,45,0.05);
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease;
}
.kit-problem:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(20,31,45,0.10); }
.kit-problem h3 { font-size: 16.5px; font-weight: 700; color: var(--navy); line-height: 1.45; margin: 0 0 10px; }
.kit-problem p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; }
.kit-problem.kit-wide { grid-column: 1 / -1; }

/* K2 — stat band (about-strip numbers family) */
.kit-stats { display: flex; justify-content: center; gap: 26px 72px; flex-wrap: wrap; text-align: center; }
.kit-stat-num { font-family: 'Inter', sans-serif; font-size: 44px; font-weight: 700; line-height: 1; }
.kit-stat-num.blue { color: var(--blue); } .kit-stat-num.teal { color: var(--teal-ink); } .kit-stat-num.gold { color: var(--gold); }
.kit-stat-label { font-size: 13px; color: var(--muted); margin-top: 10px; }
.kit-navy .kit-stat-label { color: rgba(255,255,255,0.65); }
.kit-navy .kit-stat-num.teal { color: var(--teal); }

/* K3 — offer cards (3-col; .kit-five = compact five-across) */
.kit-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kit-offers.kit-five { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.kit-offer {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 26px; display: flex; flex-direction: column;
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease;
}
.kit-offer:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(20,31,45,0.10); }
.kit-offer-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 10px; }
.kit-offer h3 { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.35; margin: 0 0 12px; }
.kit-offer p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0 0 12px; }
.kit-offer ul { list-style: none; margin: 0 0 18px; padding: 0; }
.kit-offer li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--text); margin-bottom: 8px; }
.kit-offer li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.kit-offers.kit-five .kit-offer { padding: 22px 18px; }
.kit-offers.kit-five .kit-offer p { margin-bottom: 0; }
.kit-offer-link { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--teal-ink); text-decoration: none; }
.kit-offer-link:hover { color: var(--blue); }

/* K4 — numbered process steps, optional photo right */
.kit-steps { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.kit-steps.kit-nophoto { grid-template-columns: 1fr; }
.kit-steps-list { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.kit-steps-list.kit-vertical { grid-template-columns: 1fr; max-width: 860px; }
.kit-step-num { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 10px; }
.kit-step h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 8px; line-height: 1.4; }
.kit-step p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0 0 8px; }
.kit-steps-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: 0 18px 40px rgba(20,31,45,0.16); display: block; }
.kit-navy .kit-step h3 { color: var(--white); }
.kit-navy .kit-step p { color: rgba(255,255,255,0.75); }

/* K5 — split approach: text left, image right (.kit-flip = image left) */
.kit-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.kit-split-text h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 700; color: var(--navy); line-height: 1.25; margin: 0 0 20px; }
.kit-split-text p { font-size: 15.5px; line-height: 1.75; color: var(--muted); margin: 0 0 16px; }
.kit-split-text p strong { color: var(--navy); }
.kit-split-img { display: grid; gap: 18px; }
.kit-split-img img { width: 100%; border-radius: var(--radius); box-shadow: 0 18px 40px rgba(20,31,45,0.16); display: block; }
.kit-split.kit-flip .kit-split-img { order: -1; }
.kit-navy .kit-split-text h2 { color: var(--white); }
.kit-navy .kit-split-text p { color: rgba(255,255,255,0.78); }
.kit-navy .kit-split-text p strong { color: var(--white); }

/* K6 — FAQ accordion: the .vro-faq pattern IS the kit version (reused as-is) */

/* K7 — proof block (quiet quote band) */
.kit-proof { max-width: 900px; margin: 0 auto; text-align: center; }
.kit-proof-mark { font-family: var(--font-display); font-size: 64px; line-height: 0.6; color: var(--gold); margin-bottom: 18px; }
.kit-proof-text { font-family: var(--font-display); font-size: clamp(17px, 2vw, 21px); font-style: italic; line-height: 1.65; color: var(--navy); margin: 0 0 18px; }
.kit-proof-name { font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.kit-navy .kit-proof-text { color: rgba(255,255,255,0.92); }
.kit-navy .kit-proof-name { color: rgba(255,255,255,0.60); }

.kit-offers.kit-two { grid-template-columns: repeat(2, 1fr); }
.kit-steps-list.kit-three { grid-template-columns: repeat(3, 1fr); }

/* responsive */
@media (max-width: 1100px) {
  .kit-offers, .kit-offers.kit-five, .kit-offers.kit-two { grid-template-columns: repeat(2, 1fr); }
  .kit-offers.kit-five { grid-template-columns: repeat(3, 1fr); }
  .kit-steps, .kit-split { grid-template-columns: 1fr; gap: 36px; }
  .kit-split.kit-flip .kit-split-img { order: 0; }
}
@media (max-width: 768px) {
  .kit-section { padding: 64px 20px; }
  .kit-problems, .kit-offers, .kit-offers.kit-five, .kit-offers.kit-two,
  .kit-steps-list, .kit-steps-list.kit-three { grid-template-columns: 1fr; }
  .kit-stats { gap: 26px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-problem, .kit-offer { transition: none !important; transform: none !important; }
}

/* kit — teal engagement band variant (VA rewrite) */
.kit-teal { background: var(--teal); }
.kit-teal h2, .kit-teal h3, .kit-teal .kit-step h3 { color: var(--white); }
.kit-teal p, .kit-teal .kit-step p { color: rgba(255,255,255,0.88); }
.kit-teal .section-eyebrow { color: rgba(255,255,255,0.75); }