/* VANTAGE INTELLIGENCE | Shared Visual System v1.1 | 19 October 2026
   Visual source: approved Home.html. No copy changes are made by this file.
   Keep CSS here as the single source of truth when Codex builds the deployed site. */
:root {
  --vi-ink: #18201f;
  --vi-hero: #1c2a26;
  --vi-cream: #f3f0e9;
  --vi-paper: #faf8f3;
  --vi-sage: #e9ece4;
  --vi-muted: #4b5b50;
  --vi-line: #d8d9d0;
  --vi-white: #ffffff;
  --vi-font: 'Manrope', 'Segoe UI', system-ui, Arial, sans-serif;
  --vi-h1: clamp(48px, 5.4vw, 76px);
  --vi-h2: clamp(35px, 3.55vw, 52px);
  --vi-h3: clamp(20px, 1.55vw, 23px);
  --vi-body: 16px;
  --vi-body-mobile: 15px;
  --vi-card-copy: 14px;
  --vi-eyebrow: 11px;
  --vi-action: 13px;
  --vi-card-radius: 15px;
  --vi-card-shadow: 0 8px 24px rgba(24,32,31,.07);
  --vi-card-shadow-hover: 0 12px 32px rgba(24,32,31,.10);
}
body.vi-aligned {font-family:var(--vi-font);background:var(--vi-paper);color:var(--vi-ink);font-size:var(--vi-body);}
body.vi-aligned main {color:var(--vi-ink);}
body.vi-aligned h1,body.vi-aligned h2,body.vi-aligned h3,
body.vi-aligned h4,body.vi-aligned p,body.vi-aligned a,body.vi-aligned button,
body.vi-aligned input,body.vi-aligned select,body.vi-aligned textarea {
  font-family:var(--vi-font);
}
body.vi-aligned h1 {font-size:var(--vi-h1);font-weight:500;letter-spacing:-.045em;line-height:1.07;}
body.vi-aligned h2 {font-size:var(--vi-h2);font-weight:600;letter-spacing:-.035em;line-height:1.14;}
body.vi-aligned h3 {font-size:var(--vi-h3);font-weight:650;letter-spacing:-.02em;line-height:1.30;}
body.vi-aligned p {line-height:1.66;}
body.vi-aligned .eyebrow,body.vi-aligned .vc-mini,body.vi-aligned .vc-kicker,
body.vi-aligned .ap-kicker,body.vi-aligned .card-index,
body.vi-aligned .wa-n {font-size:var(--vi-eyebrow);font-weight:700;letter-spacing:.13em;line-height:1.45;}
body.vi-aligned .button,body.vi-aligned .vc-action,body.vi-aligned .vc-action-light,
body.vi-aligned .wa-action,body.vi-aligned .text-cta,
body.vi-aligned .ap-cta {font-size:var(--vi-action);font-weight:700;letter-spacing:0;line-height:1.35;}

/* Common header. Preserve the exact home brandmark and its responsive scale. */
body.vi-aligned .site-header {height:88px;min-height:88px;position:relative;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:0 clamp(24px,4.2vw,72px);background:var(--vi-cream);color:var(--vi-ink);}
body.vi-aligned .global-nav {display:flex;align-items:center;gap:clamp(12px,1.4vw,26px);margin-left:auto;}
body.vi-aligned .global-nav > a,body.vi-aligned .nav-group > a {display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:700;color:var(--vi-ink);text-decoration:none;white-space:nowrap;}
body.vi-aligned .global-nav a.nav-current,body.vi-aligned .global-nav [aria-current='page'] {border-bottom:2px solid var(--vi-ink);}
body.vi-aligned .nav-group{position:relative;display:flex;align-items:center;gap:1px;}
body.vi-aligned .dropdown-toggle {width:28px;height:40px;border:0;display:inline-flex;align-items:center;justify-content:center;background:none;color:var(--vi-ink);cursor:pointer;}
body.vi-aligned .dropdown-toggle svg {width:14px;height:14px;}
body.vi-aligned .nav-dropdown{position:absolute;z-index:110;display:none;top:100%;left:-20px;width:min(340px,80vw);padding:14px 8px;background:var(--vi-cream);border:1px solid var(--vi-line);box-shadow:0 12px 30px rgba(0,0,0,.12);}
body.vi-aligned .nav-group.is-open .nav-dropdown,body.vi-aligned .nav-group:focus-within .nav-dropdown{display:flex;flex-direction:column;}
body.vi-aligned .nav-dropdown a{display:block;padding:11px 13px;color:var(--vi-ink);font-size:13px;font-weight:600;line-height:1.35;white-space:normal;text-decoration:none;}
body.vi-aligned .nav-dropdown a:hover,body.vi-aligned .nav-dropdown a:focus-visible{background:var(--vi-sage);}
body.vi-aligned .nav-contact{min-height:44px;padding:0 16px;border:1px solid #a1afa3;gap:15px;display:inline-flex;align-items:center;justify-content:center;}
body.vi-aligned .menu-toggle {display:none;}

/* Hero consistency: restrained charcoal, editorial typography, real capability diagram.
   Photography intentionally unchanged while the image library is developed. */
body.vi-aligned .vc-hero,body.vi-aligned .wa-hero,body.vi-aligned .services-hero {background:var(--vi-hero);color:#f8f7f2;}
body.vi-aligned .vc-hero h1,body.vi-aligned .wa-hero h1,
body.vi-aligned .services-hero h1 {font-size:clamp(42px,4.4vw,64px);font-weight:500;letter-spacing:-.045em;line-height:1.08;}
body.vi-aligned .vc-hero p,body.vi-aligned .wa-hero p,body.vi-aligned .services-hero p {color:#e3e8e3;line-height:1.7;}
body.vi-aligned .vc-hero-grid,body.vi-aligned .wa-hero-inner,body.vi-aligned .services-hero-inner {min-height:530px;padding-top:76px;padding-bottom:76px;}
body.vi-aligned .vc-hero .eyebrow,body.vi-aligned .wa-hero .eyebrow {color:#c6d3cb;}
body.vi-aligned .vc-hero a,body.vi-aligned .wa-hero a,body.vi-aligned .services-hero a {transition:opacity .2s ease,transform .2s ease;}
body.vi-aligned .vc-hero a:hover,body.vi-aligned .wa-hero a:hover,body.vi-aligned .services-hero a:hover {transform:translateY(-2px);}

/* Section hierarchy mirrors the homepage: title first, intro directly underneath. */
body.vi-aligned .vc-section,body.vi-aligned .wa-section {padding-block:clamp(72px,7vw,110px);}
body.vi-aligned .vc-section-head {display:block;max-width:870px;margin:14px 0 32px;}
body.vi-aligned .vc-section-head p {display:block;max-width:720px;margin:17px 0 0;font-size:16px;color:var(--vi-muted);line-height:1.66;}
body.vi-aligned .vc-section h2,body.vi-aligned .vc-cta h2,
body.vi-aligned .wa-section h2,body.vi-aligned .service-detail h2 {font-size:var(--vi-h2);font-weight:600;line-height:1.14;letter-spacing:-.035em;}
body.vi-aligned .vc-cream,body.vi-aligned .band-cream {background:var(--vi-cream);}
body.vi-aligned .vc-sage,body.vi-aligned .band-sage {background:var(--vi-sage);}
body.vi-aligned .vc-section p,body.vi-aligned .wa-section p {color:var(--vi-muted);}

/* Unified card DNA taken from homepage: calm white surfaces, rounded corners,
   fine border and restrained shadow. Different sizes remain purposeful. */
body.vi-aligned .vc-card,body.vi-aligned .vc-solution,
body.vi-aligned .svc-card,body.vi-aligned .wa-deliver-card,
body.vi-aligned .wa-control,body.vi-aligned .vc-mini-card,
body.vi-aligned .vc-faq,body.vi-aligned .vc-tile {
  background:var(--vi-white);border:1px solid #e0e3dc;
  border-radius:var(--vi-card-radius);box-shadow:var(--vi-card-shadow);
  min-width:0;overflow:hidden;
}
body.vi-aligned .vc-card,body.vi-aligned .vc-solution {padding:26px;}
body.vi-aligned .vc-card-grid{gap:18px;}
body.vi-aligned .vc-card h3,body.vi-aligned .vc-solution h3,
body.vi-aligned .wa-deliver-card h3,body.vi-aligned .svc-card h3 {font-size:var(--vi-h3);font-weight:650;line-height:1.32;}
body.vi-aligned .vc-card p,body.vi-aligned .vc-solution p,
body.vi-aligned .wa-deliver-card p,body.vi-aligned .svc-card p {font-size:var(--vi-card-copy);line-height:1.65;color:var(--vi-muted);}
body.vi-aligned .svc-card-image {border-radius:var(--vi-card-radius) var(--vi-card-radius) 0 0;}
body.vi-aligned .svc-card:hover,body.vi-aligned .vc-card:hover,body.vi-aligned .vc-solution:hover {box-shadow:var(--vi-card-shadow-hover);}
body.vi-aligned .vc-action-light,body.vi-aligned .vc-action,
body.vi-aligned .wa-action,body.vi-aligned .text-cta{min-height:44px;}

/* Page closure and footer should never introduce an unrelated colour system. */
body.vi-aligned .global-footer{background:var(--vi-ink);color:#f3f0e9;}
body.vi-aligned .vc-cta,body.vi-aligned .wa-final-cta {background:var(--vi-sage);color:var(--vi-ink);}

/* OUR APPROACH: previously forced a dark page-wide aesthetic. This light editorial
   correction changes styling only, preserving the accepted process and deliverables. */
body.vi-aligned.approach-page,body.vi-aligned.approach-page main {background:var(--vi-paper);color:var(--vi-ink);}
body.vi-aligned.approach-page .ap-main {padding-top:0;}
body.vi-aligned.approach-page .ap-container{width:min(100% - 84px,1420px);}
body.vi-aligned.approach-page .ap-hero {background-color:var(--vi-hero);color:#fff;border-radius:0;}
body.vi-aligned.approach-page .ap-hero h1 {font-size:var(--vi-h1);font-weight:500;color:#fff;}
body.vi-aligned.approach-page .ap-hero-lead {color:#e2eae5;}
body.vi-aligned.approach-page .ap-hero-anchors {color:#d7e1dc;}
body.vi-aligned.approach-page .ap-section {padding:clamp(68px,7vw,108px) 0;border-bottom:1px solid var(--vi-line);color:var(--vi-ink);}
body.vi-aligned.approach-page .ap-section h2 {color:var(--vi-ink);font-size:var(--vi-h2);font-weight:600;letter-spacing:-.035em;line-height:1.14;}
body.vi-aligned.approach-page .ap-section .ap-kicker{color:#647468;}
body.vi-aligned.approach-page .ap-intro,body.vi-aligned.approach-page .ap-ownership-intro,body.vi-aligned.approach-page .ap-note {color:var(--vi-muted);}
body.vi-aligned.approach-page .ap-intake {background:#fff;border:1px solid var(--vi-line);border-radius:var(--vi-card-radius);box-shadow:var(--vi-card-shadow);color:var(--vi-ink);}
body.vi-aligned.approach-page .ap-intake h3,body.vi-aligned.approach-page .ap-intake p,body.vi-aligned.approach-page .ap-intake-output {color:var(--vi-ink);}
body.vi-aligned.approach-page .ap-intake-top,body.vi-aligned.approach-page .ap-agreed {color:var(--vi-muted);}
body.vi-aligned.approach-page #see-shape-scale {background:var(--vi-sage);padding:clamp(38px,5vw,74px);border:0;border-radius:16px;margin-block:22px;}
body.vi-aligned.approach-page .ap-phase {background:#fff;color:var(--vi-ink);border:1px solid var(--vi-line);border-radius:var(--vi-card-radius);overflow:hidden;box-shadow:var(--vi-card-shadow);padding:24px;}
body.vi-aligned.approach-page .ap-phase h3,body.vi-aligned.approach-page .ap-phase p{color:var(--vi-ink);}
body.vi-aligned.approach-page .ap-phase > p {color:var(--vi-muted);}
body.vi-aligned.approach-page .ap-phase .ap-kicker,body.vi-aligned.approach-page .ap-phase-num{color:var(--vi-muted);}
body.vi-aligned.approach-page .ap-phase-visual {background:#e1e8e0;border-radius:10px;overflow:hidden;}
body.vi-aligned.approach-page .ap-tags span {border:1px solid var(--vi-line);color:var(--vi-ink);background:var(--vi-paper);}
body.vi-aligned.approach-page #five-stages {background:var(--vi-paper);}
body.vi-aligned.approach-page .ap-step {border-bottom:1px solid var(--vi-line);color:var(--vi-ink);}
body.vi-aligned.approach-page .ap-step summary{color:var(--vi-ink);}
body.vi-aligned.approach-page .ap-step-num,body.vi-aligned.approach-page .ap-step-phase {color:var(--vi-muted);}
body.vi-aligned.approach-page .ap-step-title {color:var(--vi-ink);}
body.vi-aligned.approach-page .ap-step-body p,body.vi-aligned.approach-page .ap-stage-copy p {color:var(--vi-muted);}
body.vi-aligned.approach-page .ap-step-body b,body.vi-aligned.approach-page .ap-stage-copy b {color:var(--vi-ink);}
body.vi-aligned.approach-page .ap-artifact {border:1px solid var(--vi-line);background:#fff;color:var(--vi-ink);border-radius:12px;}
body.vi-aligned.approach-page .ap-artifact-caption,body.vi-aligned.approach-page .ap-artifact-heading {color:var(--vi-muted);}
body.vi-aligned.approach-page .ap-example-diagram,body.vi-aligned.approach-page .ap-mini-flow {color:var(--vi-ink);}
body.vi-aligned.approach-page .ap-artifact p{color:var(--vi-muted);}
body.vi-aligned.approach-page #client-ownership {background:var(--vi-sage);padding:clamp(38px,5vw,74px);border-radius:16px;margin-top:24px;}
body.vi-aligned.approach-page .ap-ownership-grid > div {border-top:1px solid #aebdb1;}
body.vi-aligned.approach-page .ap-ownership-grid p{color:var(--vi-muted);}
body.vi-aligned.approach-page .ap-contact {background:var(--vi-hero);color:#fff;}
body.vi-aligned.approach-page .ap-contact h2{color:#fff;}
body.vi-aligned.approach-page .ap-contact p{color:#e3e9e4;}
body.vi-aligned.approach-page .ap-cta{background:var(--vi-cream);color:var(--vi-ink);}

/* Responsive: keep deliberate card and diagram variety, no page-wide overflow. */
@media(max-width:1050px){
 body.vi-aligned .global-nav{gap:10px;}
 body.vi-aligned .global-nav > a,body.vi-aligned .nav-group > a{font-size:12px;}
}
@media(max-width:900px){
 body.vi-aligned .menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--vi-line);background:transparent;color:var(--vi-ink);}
 body.vi-aligned .global-nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;padding:16px 20px 24px;background:var(--vi-cream);border-top:1px solid var(--vi-line);box-shadow:0 14px 20px rgba(0,0,0,.08);align-items:stretch;flex-direction:column;gap:4px;max-height:80vh;overflow:auto;}
 body.vi-aligned .global-nav.is-open{display:flex;}
 body.vi-aligned .nav-group{display:flex;flex-wrap:wrap;}
 body.vi-aligned .nav-dropdown{position:static;flex-basis:100%;width:100%;box-shadow:none;border:0;border-left:2px solid #c5d0c6;padding:4px 0 8px 10px;}
 body.vi-aligned .nav-group:not(.is-open) .nav-dropdown{display:none;}
 body.vi-aligned .nav-group.is-open .nav-dropdown{display:flex;}
 body.vi-aligned .dropdown-toggle{margin-left:auto;}
 body.vi-aligned .global-nav > a,body.vi-aligned .nav-group > a{font-size:15px;}
 body.vi-aligned.approach-page .ap-container{width:min(100% - 40px,1420px);}
}
@media(max-width:700px){
 body.vi-aligned {font-size:var(--vi-body-mobile);}
 body.vi-aligned h1{font-size:clamp(42px,9.3vw,64px);}
 body.vi-aligned h2{font-size:clamp(32px,7.6vw,45px);}
 body.vi-aligned h3{font-size:21px;}
 body.vi-aligned .vc-section-head p{font-size:15px;}
 body.vi-aligned .vc-hero h1,body.vi-aligned .wa-hero h1,body.vi-aligned .services-hero h1{font-size:clamp(36px,8.5vw,54px);}
 body.vi-aligned .vc-hero-grid,body.vi-aligned .wa-hero-inner,body.vi-aligned .services-hero-inner{min-height:auto;padding-block:60px;}
 body.vi-aligned.approach-page .ap-hero h1{font-size:clamp(42px,9.3vw,64px);}
 body.vi-aligned.approach-page #see-shape-scale,body.vi-aligned.approach-page #client-ownership{padding:27px 18px;}
 body.vi-aligned.approach-page .ap-section{padding-block:57px;}
}
@media(prefers-reduced-motion:reduce){body.vi-aligned *,body.vi-aligned *::before,body.vi-aligned *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;}}
/* Contrast corrections when a diagram originally designed for dark cards is
   displayed on the now-approved light See / Shape / Scale cards. */
body.vi-aligned.approach-page .ap-phase-shape .ap-mini-heading,
body.vi-aligned.approach-page .ap-phase-scale .ap-mini-heading,
body.vi-aligned.approach-page .ap-phase-scale .ap-ui-line,
body.vi-aligned.approach-page .ap-phase-scale .ap-ui-line span,
body.vi-aligned.approach-page .ap-phase-scale .ap-ui-line b,
body.vi-aligned.approach-page .ap-phase-shape .ap-mini-branch,
body.vi-aligned.approach-page .ap-phase-shape .ap-mini-branch b,
body.vi-aligned.approach-page .ap-phase-shape .ap-mini-branch span {color:#344b40!important;opacity:1;}
body.vi-aligned.approach-page .ap-phase-shape .ap-mini-flow span,
body.vi-aligned.approach-page .ap-phase-shape .ap-mini-flow i {color:#1e382c!important;}
body.vi-aligned.approach-page .ap-phase-visual .ap-bars i {background:#8daea2;}
