/* ==========================================================================
   Juntos Solutions — style.css
   Palette taken verbatim from the value-creation deck.
   ========================================================================== */

/* ===== 00. FONTS ========================================================= */
/* Inter is self-hosted rather than pulled from fonts.googleapis.com. The font
   files are byte-identical; what changes is that no visitor's IP reaches a
   third party before they have been told anything. The site now makes no
   third-party requests at all, which is what the cookie policy claims. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== 01. TOKENS ======================================================== */
:root{
  /* brand — verbatim from the deck */
  --bg-1:#FFFFFF; --bg-2:#F7FAFC; --bg-3:#E6EDF2;
  --surface:#F2F6F9;  --card:#FFFFFF;
  --border:#DCE5EC;   --divider:#C3D0DA;
  --navy:#083860;     --navy-mid:#0E4A78;  --blue:#1A6BA8;
  --green:#88C040;
  --body:#4A5A66;

  /* accessibility-derived (the deck has no equivalent) */
  --accent:var(--green);
  --accent-rgb:136,192,64;
  --accent-ink:#4A6E1F;    /* green TEXT — 5.93:1 on white */
  --accent-ink-hov:#3C5A18;
  --muted:#64737E;         /* muted TEXT — 4.89:1 on white */
  --navy-rgb:8,56,96;
  --blue-rgb:26,107,168;
  --on-accent:var(--navy); /* text on a green fill — never white */

  --page-grad:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 52%,var(--bg-3) 100%);
  --hairline:1px solid var(--border);
  --tint-accent:rgba(var(--accent-rgb),.08);


  /* navy-tinted shadows, never black */
  --sh-xs:0 1px 2px rgba(var(--navy-rgb),.04);
  --sh-sm:0 1px 2px rgba(var(--navy-rgb),.04), 0 2px 6px rgba(var(--navy-rgb),.05);
  --sh-md:0 2px 4px rgba(var(--navy-rgb),.04), 0 8px 20px rgba(var(--navy-rgb),.07);
  --sh-lg:0 4px 10px rgba(var(--navy-rgb),.05), 0 18px 44px rgba(var(--navy-rgb),.10);
  --sh-accent:0 6px 18px rgba(var(--accent-rgb),.30);

  /* type */
  --ff:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --fs-display:clamp(2.5rem,1.4rem + 4.4vw,4.5rem);
  --fs-h2:clamp(1.75rem,1.05rem + 2.4vw,2.75rem);
  --fs-h3:clamp(1.125rem,.95rem + .6vw,1.375rem);
  --fs-lead:clamp(1.0625rem,.98rem + .34vw,1.25rem);
  --fs-eyebrow:.6875rem;
  --lh-display:1.06;
  --lh-body:1.75;
  --ls-display:-.03em;
  --ls-eyebrow:.22em;

  /* space & shape */
  --max:1200px;
  --gutter:clamp(20px,4vw,32px);
  --sec-y:clamp(72px,8vw,120px);
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --nav-h:72px;

  /* motion — deliberately subtle */
  --dur-rev:.62s;
  --dist-rev:18px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* per-section signature colour, overridden per service section */
  --sig:var(--navy);
 
  --sig-rgb:var(--navy-rgb);
}

/* ===== 02. RESET ========================================================= */
*,*::before,*::after{ box-sizing:border-box }
html{ font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:var(--ff);
  font-size:1rem;
  line-height:var(--lh-body);
  color:var(--body);
  background:var(--bg-2);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,figure,dl{ margin:0 }
ul,ol{ padding:0; list-style:none }
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:2px }
::selection{ background:rgba(var(--accent-rgb),.28); color:var(--navy) }
section[id]{ scroll-margin-top:calc(var(--nav-h) + 16px) }

.skip{
  position:absolute; left:8px; top:-60px; z-index:200;
  padding:10px 18px; border-radius:var(--r-sm);
  background:var(--navy); color:#fff; font-weight:600; font-size:.875rem;
  transition:top .18s var(--ease);
}
.skip:focus{ top:8px }
.vh{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== 03. LAYOUT PRIMITIVES ============================================ */
.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }
.section{ position:relative; z-index:1; padding-block:var(--sec-y) }
.section--surface{ background:var(--surface); border-block:var(--hairline) }
.section--edge{ border-top:var(--hairline) }

/* ===== 04. BACKGROUND MESH ============================================== */
.mesh{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  pointer-events:none; background:var(--page-grad);
}
.mesh i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(120px); will-change:transform;
}
.mesh i:nth-child(1){
  width:52vw; height:52vw; top:-14vw; left:-10vw;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.10) 0%,transparent 66%);
  animation:drift-a 56s var(--ease) infinite alternate;
}
.mesh i:nth-child(2){
  width:46vw; height:46vw; bottom:-16vw; right:-10vw;
  background:radial-gradient(circle,rgba(var(--navy-rgb),.07) 0%,transparent 66%);
  animation:drift-b 68s var(--ease) infinite alternate;
}
.mesh i:nth-child(3){
  width:40vw; height:40vw; top:44%; left:56%;
  background:radial-gradient(circle,rgba(var(--blue-rgb),.06) 0%,transparent 66%);
  animation:drift-c 44s var(--ease) infinite alternate;
}
/* translate range is only 3–5% — it should read as a static gradient */
@keyframes drift-a{ to{ transform:translate(4%,3%) scale(1.04) } }
@keyframes drift-b{ to{ transform:translate(-3%,-4%) scale(1.05) } }
@keyframes drift-c{ to{ transform:translate(-5%,3%) scale(1.03) } }

/* ===== 05. TYPE PRIMITIVES ============================================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--accent-ink);
  border:1px solid rgba(var(--accent-rgb),.42);
  background:rgba(var(--accent-rgb),.09);
  padding:6px 14px; border-radius:var(--r-pill);
  margin-bottom:22px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.45; transform:scale(.66) } }
.eyebrow--light{
  color:rgba(255,255,255,.86);
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);
}
.eyebrow--light .dot{ background:var(--accent) }

.h2{
  font-size:var(--fs-h2); font-weight:800; line-height:1.1;
  letter-spacing:var(--ls-display); color:var(--navy);
}
.h3{
  font-size:var(--fs-h3); font-weight:700; line-height:1.3;
  letter-spacing:-.02em; color:var(--navy);
}
.lead{ font-size:var(--fs-lead); font-weight:300; line-height:1.7; color:var(--body) }
.small{ font-size:.875rem; line-height:1.7 }

/* navy -> blue. A green gradient on white is unreadable. */
.grad{
  color:var(--blue);
  background:linear-gradient(90deg,var(--navy),var(--blue));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.rule{ display:block; width:48px; height:2px; border-radius:2px; background:var(--sig); margin-bottom:24px }
.rule--accent{ background:var(--accent) }

.section-head{ max-width:720px; margin-bottom:56px }
.section-head--center{ margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center }
.section-head--wide{ max-width:880px }
.section-head .lead{ margin-top:18px }

/* ===== 06. BUTTONS ====================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:var(--r-md);
  font-size:.9375rem; font-weight:600; letter-spacing:.01em;
  transition:background .22s var(--ease), box-shadow .22s var(--ease),
             transform .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none }
.btn--primary{ background:var(--accent); color:var(--on-accent); box-shadow:var(--sh-accent) }
.btn--primary:hover{ background:#95CE4A; box-shadow:0 8px 24px rgba(var(--accent-rgb),.42); transform:translateY(-1px) }
.btn--navy{ background:var(--navy); color:#fff; box-shadow:var(--sh-md) }
.btn--navy:hover{ background:var(--navy-mid); transform:translateY(-1px) }
.btn--ghost{ background:var(--card); color:var(--navy); border:var(--hairline); box-shadow:var(--sh-xs) }
.btn--ghost:hover{ border-color:var(--divider); box-shadow:var(--sh-sm); transform:translateY(-1px) }
.btn--sm{ padding:10px 20px; font-size:.84375rem; border-radius:var(--r-sm) }
.btn--lg{ padding:17px 36px; font-size:1rem; font-weight:700 }
.btn--onnavy{ background:var(--accent); color:var(--on-accent) }
.btn--onnavy:hover{ background:#95CE4A; transform:translateY(-1px) }

.textlink{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--accent-ink); font-weight:600; font-size:.875rem;
  transition:color .2s var(--ease), gap .2s var(--ease);
}
.textlink svg{ width:14px; height:14px }
.textlink:hover{ color:var(--accent-ink-hov); gap:11px }

/* ===== 07. HAIRLINE GRID (signature component) ========================== */
.grid-hair{
  display:grid; gap:1px;
  background:var(--border);
  border:var(--hairline); border-radius:var(--r-lg); overflow:hidden;
}
.grid-hair--2{ grid-template-columns:repeat(2,1fr) }
.grid-hair--3{ grid-template-columns:repeat(3,1fr) }
.grid-hair--4{ grid-template-columns:repeat(4,1fr) }
.grid-hair > *{ background:var(--card) }

/* ===== 08. NAV ========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.scrolled{
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--border);
  box-shadow:var(--sh-xs);
}
.nav__inner{ display:flex; align-items:center; gap:40px; height:100% }
.nav__brand{ display:flex; align-items:center; gap:11px; flex:none }
.nav__mark{ width:38px; height:auto; flex:none }
.nav__wordmark{ display:flex; flex-direction:column; line-height:1 }
.nav__wordmark b{ font-size:1.0625rem; font-weight:800; letter-spacing:.14em; color:var(--navy) }
.nav__wordmark span{ font-size:.5625rem; font-weight:700; letter-spacing:.3em; color:var(--accent-ink); margin-top:4px }
.nav__links{ display:flex; align-items:center; gap:32px; margin-left:auto }
.nav__link{
  position:relative; font-size:.875rem; font-weight:500; color:var(--muted);
  padding-block:6px; transition:color .2s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__link:hover{ color:var(--navy) }
.nav__link.active{ color:var(--navy); font-weight:600 }
.nav__link:hover::after,.nav__link.active::after{ transform:scaleX(1) }
.nav__cta{ flex:none }
.nav__toggle{
  display:none; width:42px; height:42px; margin-left:auto;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  border-radius:var(--r-sm);
}
.nav__toggle i{
  display:block; width:20px; height:2px; border-radius:2px; background:var(--navy);
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav__toggle[aria-expanded="true"] i:nth-child(2){ opacity:0 }
.nav__toggle[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

.progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  transform:scaleX(var(--progress,0)); transform-origin:left;
  background:var(--sig); opacity:.85; transition:transform .1s linear;
}

.drawer{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:99;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-bottom:var(--hairline); box-shadow:var(--sh-md);
  padding:20px var(--gutter) 28px;
  display:flex; flex-direction:column; gap:4px;
}
.drawer[hidden]{ display:none }
.drawer a:not(.btn){
  padding:12px 4px; font-size:1rem; font-weight:500; color:var(--navy);
  border-bottom:var(--hairline);
}
.drawer .btn{ margin-top:16px }

/* ===== 09. HERO ========================================================= */
.hero{
  position:relative; z-index:1;
  padding-top:calc(var(--nav-h) + clamp(56px,9vw,104px));
  padding-bottom:clamp(56px,8vw,96px);
}
.hero__inner{ max-width:920px }
.hero__title{
  font-size:var(--fs-display); font-weight:800; line-height:var(--lh-display);
  letter-spacing:var(--ls-display); color:var(--navy); margin-bottom:26px;
}
.hero__lead{ max-width:660px; margin-bottom:34px }
.hero__title--blue{ color:var(--navy) }
/* The corporate green, at the client's explicit request. Note #88C040 on white
   is 2.17:1, below the 3:1 WCAG large-text minimum; the scrim beneath the
   headline is darkened a little to claw some of that back. */
.hero__title--green{ color:var(--green) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px }
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  font-size:.8125rem; color:var(--muted);
}
.hero__meta b{ color:var(--navy); font-weight:600 }

/* ----- hero illustration (slide 7 of the value-creation deck) -------------
   A blurred plate of the bridge artwork with three crisp "pillars" travelling
   across it — the visual argument for bridging strategy and delivery. The plate
   is blurred so it never competes with the headline; the travellers are not,
   because crisp marks over a soft ground is what makes the motion read. */
.hero{ overflow:hidden }
.hero--visual{ min-height:clamp(560px,72vh,780px); display:flex; align-items:center }
.hero--visual .container{ width:100%; position:relative; z-index:2 }
.hero__visual{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.hero__plate{ position:absolute; inset:0; display:block }
.hero__plate img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  /* scale hides the soft edge blur would otherwise leave at the viewport rim */
  transform:scale(1.06); transform-origin:60% 50%;
  filter:blur(3px) saturate(1.06); opacity:.55;
  animation:hero-drift 44s var(--ease) infinite alternate;
}
@keyframes hero-drift{ to{ transform:scale(1.1) translate3d(-1.2%,-.8%,0) } }

/* Heaviest on the left, where the display headline sits — that is what keeps the
   navy type at its contrast ratio over the artwork. */
.hero__scrim{
  position:absolute; inset:0; display:block;
  background:
    linear-gradient(100deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.96) 30%,
                    rgba(255,255,255,.80) 56%,rgba(255,255,255,.46) 100%),
    linear-gradient(to bottom,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 26%,
                    rgba(255,255,255,0) 74%,rgba(255,255,255,.88) 100%);
}
.hero__travellers{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  transform:scale(1.06); transform-origin:60% 50%;
  animation:hero-drift 44s var(--ease) infinite alternate;
  /* blurred well past the plate behind them — they should register as movement
     in the artwork and nothing more */
  filter:blur(6px);
  opacity:0;
}
.hero__t{ opacity:0 }

@supports (offset-path: path("M 0 0 L 1 1")){
  .hero__travellers{ opacity:1 }
  .hero__t{
    transform-box:view-box; transform-origin:0 0;
    offset-rotate:0deg;
    animation:hero-run var(--dur,13s) linear infinite;
    animation-delay:var(--delay,0s);
  }
  .hero__t--navy { offset-path:path("M 120,258 C 150.0,257.5 246.7,255.3 300.0,255.0 C 353.3,254.7 399.2,249.8 440.0,256.0 C 480.8,262.2 510.8,273.3 545.0,292.0 C 579.2,310.7 611.7,346.5 645.0,368.0 C 678.3,389.5 711.7,410.5 745.0,421.0 C 778.3,431.5 808.3,432.8 845.0,431.0 C 881.7,429.2 925.0,416.2 965.0,410.0 C 1005.0,403.8 1045.0,396.0 1085.0,394.0 C 1125.0,392.0 1165.0,392.8 1205.0,398.0 C 1245.0,403.2 1280.8,412.7 1325.0,425.0 C 1369.2,437.3 1445.8,464.2 1470.0,472.0") }
  .hero__t--green{ offset-path:path("M 120,524 C 150.0,521.3 243.3,510.2 300.0,508.0 C 356.7,505.8 406.7,509.7 460.0,511.0 C 513.3,512.3 570.0,516.3 620.0,516.0 C 670.0,515.7 716.7,516.2 760.0,509.0 C 803.3,501.8 840.0,483.3 880.0,473.0 C 920.0,462.7 960.0,453.8 1000.0,447.0 C 1040.0,440.2 1080.0,433.0 1120.0,432.0 C 1160.0,431.0 1200.0,434.3 1240.0,441.0 C 1280.0,447.7 1321.7,460.2 1360.0,472.0 C 1398.3,483.8 1451.7,505.3 1470.0,512.0") }
  .hero__t--blue { offset-path:path("M 140,719 C 153.3,729.8 193.3,776.2 220.0,784.0 C 246.7,791.8 271.7,768.0 300.0,766.0 C 328.3,764.0 361.7,773.3 390.0,772.0 C 418.3,770.7 444.2,765.3 470.0,758.0 C 495.8,750.7 520.0,743.8 545.0,728.0 C 570.0,712.2 594.2,683.0 620.0,663.0 C 645.8,643.0 675.0,618.8 700.0,608.0 C 725.0,597.2 740.0,603.3 770.0,598.0 C 800.0,592.7 840.0,582.0 880.0,576.0 C 920.0,570.0 968.3,561.0 1010.0,562.0 C 1051.7,563.0 1092.5,575.3 1130.0,582.0 C 1167.5,588.7 1203.3,601.7 1235.0,602.0 C 1266.7,602.3 1289.2,593.0 1320.0,584.0 C 1350.8,575.0 1395.0,557.3 1420.0,548.0 C 1445.0,538.7 1461.7,531.3 1470.0,528.0") }
}

/* Fades in leaving the circle and dissolves into the arrowhead, so nothing pops. */
@keyframes hero-run{
  0%   { offset-distance:0%;   opacity:0 }
  8%   { opacity:.13 }
  90%  { opacity:.13 }
  100% { offset-distance:100%; opacity:0 }
}

@media (max-width:860px){
  .hero--visual{ min-height:0 }
  .hero__plate img{ opacity:.4 }
  .hero__scrim{ background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 55%,rgba(255,255,255,.94) 100%) }
}

/* ===== 11. CREDIBILITY STRIP =========================================== */
.creds{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  background:var(--card); border:var(--hairline); border-radius:var(--r-md);
  padding:18px 24px 18px 28px; box-shadow:var(--sh-sm); overflow:hidden;
}
.creds::before{ content:''; position:absolute; inset:0 auto 0 0; width:5px; background:var(--accent) }
.creds__label{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.creds__list{ display:flex; flex-wrap:wrap; gap:8px 16px; font-weight:700; color:var(--navy); font-size:.9375rem }
.creds__list li{ display:flex; align-items:center; gap:16px }
.creds__list li + li::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--divider) }
.creds__note{ font-size:.875rem; color:var(--muted); font-weight:300 }
.creds__note b{ color:var(--accent-ink); font-weight:700 }

/* ===== 12. WHY JUNTOS =================================================== */
.why-argument{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start;
  margin-bottom:56px;
}
.why-argument p + p{ margin-top:18px }
.why-argument .lead{ color:var(--navy); font-weight:500 }
.pull{
  position:relative; background:var(--card); border:var(--hairline);
  border-radius:var(--r-lg); padding:34px 32px 34px 36px; box-shadow:var(--sh-md); overflow:hidden;
}
.pull::before{ content:''; position:absolute; inset:0 auto 0 0; width:5px; background:var(--accent) }
.pull q{
  display:block; font-size:clamp(1.25rem,1rem + 1.1vw,1.625rem); font-weight:700;
  line-height:1.34; letter-spacing:-.022em; color:var(--navy); quotes:none;
}
.pull footer{ margin-top:20px; font-size:.8125rem; color:var(--muted); font-weight:500 }

.diffs{ margin-bottom:56px }
.diffs .grid-hair > li{ padding:32px 30px }
.diffs h3{ margin-bottom:12px }
.diffs p{ font-size:.9375rem; font-weight:300; line-height:1.72 }

/* ===== 12b. OUR DNA ROW ================================================= */
/* Six bare words, no chrome. "Our DNA" is the whole and is set larger in navy;
   a hairline separates it from its five parts, which sit smaller and muted.
   Each word raises a pop-up anchored beneath it — hover on a mouse, tap on a
   finger, focus on a keyboard. */
.dna{ position:relative; margin-bottom:56px }
.dna__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px 30px;
}
.dna__rule{ width:1px; height:22px; background:var(--divider) }

.dna__word{
  position:relative; padding:5px 1px;
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); transition:color .2s var(--ease);
}
/* the only affordance — no border, just a rule that draws itself under the word */
.dna__word::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:2px; background:var(--accent);
  transform:scaleX(0); transition:transform .22s var(--ease);
}
.dna__word:hover,.dna__word.is-open{ color:var(--accent-ink) }
.dna__word:hover::after,.dna__word.is-open::after{ transform:scaleX(1) }

.dna__word--core{
  font-size:1.0625rem; font-weight:800; letter-spacing:.14em; color:var(--navy);
}
.dna__word--core::after{ background:var(--navy) }
.dna__word--core:hover,.dna__word--core.is-open{ color:var(--navy-mid) }

.dna__pop{
  width:min(460px,calc(100vw - 40px));
  background:var(--card); border:var(--hairline); border-radius:var(--r-md);
  box-shadow:var(--sh-lg); padding:20px 22px;
}
.dna__pop p{ font-size:.9375rem; font-weight:300; line-height:1.75; color:var(--body) }
.dna__pop p + p{ margin-top:12px }
.dna__pop--core{ width:min(560px,calc(100vw - 40px)) }

/* Absolute positioning — and therefore the whole pop-up idea — is opted into by
   the .js class. Without it the six read as a plain stacked list rather than
   piling on top of one another in the same corner. */
.js .dna__pop{
  position:absolute; z-index:20; left:0; top:0;
  visibility:hidden; opacity:0; transform:translateY(-4px);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.js .dna__pop.is-open{ visibility:visible; opacity:1; transform:none }
.dna__pop + .dna__pop{ margin-top:14px }
.js .dna__pop + .dna__pop{ margin-top:0 }

/* the caret is placed by JS at the word's centre, clamped inside the card */
.js .dna__pop::before{
  content:''; position:absolute; top:-7px; left:var(--caret,50%); margin-left:-6px;
  width:12px; height:12px; background:var(--card);
  border-left:var(--hairline); border-top:var(--hairline);
  transform:rotate(45deg);
}

/* A finger has no hover and nothing to move away, so touch gets a close button.
   A mouse never sees it — moving off the word is dismissal enough. */
.dna__x{
  display:none; position:absolute; top:8px; right:9px;
  width:30px; height:30px; align-items:center; justify-content:center;
  border-radius:var(--r-sm); color:var(--muted); font-size:1.25rem; line-height:1;
}
.dna__x:hover{ color:var(--navy) }
@media (hover: none){
  .js .dna__x{ display:flex }
  .js .dna__pop{ padding-right:46px }
}

@media (max-width:640px){
  .dna__row{ gap:10px 20px }
  .dna__word{ letter-spacing:.14em }
  .dna__word--core{ font-size:1rem }
  .dna__rule{ display:none }
  .dna__pop,.dna__pop--core{ width:calc(100vw - 32px) }
  .dna__pop{ padding:18px 18px }
}

/* ===== 13. COMPARISON TABLES =========================================== */
.vs{ --them:var(--muted); }
.vs__head{ display:contents }
.vs__h{
  padding:16px 24px; background:var(--surface);
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.vs__h--ours{ color:var(--accent-ink) }
.vs__them,.vs__us{ padding:20px 24px; font-size:.9375rem; line-height:1.6 }
.vs__them{ color:var(--them); font-weight:300 }
.vs__us{ color:var(--navy); font-weight:500; box-shadow:inset 3px 0 0 var(--sig) }

/* S1 — deck-faithful 2-column hairline table */
.vs--table{ grid-template-columns:1fr 1fr }

/* S2 — pair rows with an arrow between */
.vs--swap{ display:flex; flex-direction:column; gap:12px; background:none; border:0; border-radius:0 }
.vs--swap .vs__head{ display:none }
.vs--swap .vs__pair{
  display:grid; grid-template-columns:1fr 30px 1fr; align-items:center; gap:0;
  background:var(--surface); border:var(--hairline); border-radius:var(--r-md); overflow:hidden;
}
.vs--swap .vs__them{ padding:18px 22px }
.vs--swap .vs__arrow{
  display:flex; align-items:center; justify-content:center;
  color:var(--divider); font-size:1rem;
}
.vs--swap .vs__us{
  background:var(--card); padding:18px 22px; height:100%;
  display:flex; align-items:center; box-shadow:inset 4px 0 0 var(--sig);
}

/* S3 — two full-height panels, left desaturated, right elevated */
.vs--panels{ display:grid; grid-template-columns:1fr 1fr; gap:24px; background:none; border:0; border-radius:0 }
.vs--panels .vs__col{ border-radius:var(--r-lg); overflow:hidden }
.vs--panels .vs__col--them{ background:var(--surface); border:var(--hairline) }
.vs--panels .vs__col--us{ background:var(--card); border:1px solid var(--divider); box-shadow:var(--sh-lg) }
.vs--panels .vs__h{ background:none; border-bottom:var(--hairline); display:block }
.vs--panels .vs__col--us .vs__h{ background:var(--sig); color:#fff; border-bottom:0 }
.vs--panels li{ padding:18px 24px; font-size:.9375rem; line-height:1.6 }
.vs--panels li + li{ border-top:var(--hairline) }
.vs--panels .vs__col--them li{ color:var(--muted); font-weight:300 }
.vs--panels .vs__col--us li{ color:var(--navy); font-weight:500 }

/* S4 — single-column ledger */
.vs--ledger{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border);
             border:var(--hairline); border-radius:var(--r-lg); overflow:hidden }
.vs--ledger .vs__head{ display:none }
.vs--ledger .vs__entry{ background:var(--card); padding:22px 26px }
.vs--ledger .vs__tag{
  display:block; font-size:.625rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:5px;
}
.vs--ledger .vs__tag--them{ color:var(--muted) }
.vs--ledger .vs__tag--us{ color:var(--accent-ink) }
.vs--ledger .vs__line--them{ color:var(--muted); font-weight:300; font-size:.9375rem; line-height:1.6 }
.vs--ledger .vs__line--us{ color:var(--navy); font-weight:500; font-size:.9375rem; line-height:1.6; margin-top:14px;
                           padding-top:14px; border-top:var(--hairline) }

/* ===== 14. SERVICE CARDS =============================================== */
.svc-card{
  position:relative; display:flex; flex-direction:column; padding:38px 32px 34px;
  transition:background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
/* signature cap gives each discipline an identity in the overview grid */
.svc-card::before{ content:''; position:absolute; inset:0 0 auto; height:4px; background:var(--sig) }
.svc-card:hover{ background:var(--bg-2) }
.icon-tile{
  width:48px; height:48px; border-radius:var(--r-md); flex:none;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  background:var(--tint-accent); border:1px solid rgba(var(--accent-rgb),.28);
  transition:background .22s var(--ease);
}
.icon-tile svg{ width:22px; height:22px; stroke:var(--accent-ink); fill:none; stroke-width:1.8;
                stroke-linecap:round; stroke-linejoin:round }
.svc-card:hover .icon-tile{ background:rgba(var(--accent-rgb),.16) }
.svc-card h3{ margin-bottom:10px }
.svc-card p{ font-size:.9375rem; font-weight:300; line-height:1.7; margin-bottom:18px }
/* the discipline's own headline, above its supporting sentence */
.svc-card__lede{ color:var(--navy); font-weight:600!important; margin-bottom:10px!important }
.svc-card .textlink{ margin-top:auto }

/* ===== 15. CHEVRON PHASE FLOW ========================================== */
.flow{ --point:20px; --gap:4px; --h:58px; display:flex; margin-bottom:48px }
.flow__step{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--h);
  padding:0 16px 0 calc(var(--point) + 16px);
  margin-left:calc(var(--gap) - var(--point));
  background:var(--navy); color:#fff;
  font-size:clamp(.6875rem,.42vw + .53rem,.8125rem);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  text-align:center; white-space:nowrap;
  clip-path:polygon(0 0, calc(100% - var(--point)) 0, 100% 50%,
                    calc(100% - var(--point)) 100%, 0 100%, var(--point) 50%);
}
.flow__step:first-child{
  margin-left:0; padding-left:20px;
  clip-path:polygon(0 0, calc(100% - var(--point)) 0, 100% 50%,
                    calc(100% - var(--point)) 100%, 0 100%);
}
/* the deck's colour ramp — a brand signature, identical across all four services */
.flow__step:nth-child(1){ background:var(--navy) }
.flow__step:nth-child(2){ background:var(--navy-mid) }
.flow__step:nth-child(3){ background:var(--blue) }
.flow__step:nth-child(4){ background:var(--accent); color:var(--on-accent) }

@supports not (clip-path: polygon(0 0, 1px 0, 1px 1px)){
  .flow{ display:grid; gap:2px }
  .flow__step{ clip-path:none; margin:0; padding:14px 18px; border-radius:var(--r-sm) }
}

.flow__cont{ margin:-30px 0 44px }
.flow__note{
  display:block; margin:0 0 10px; font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
/* Spans the full width of the chevron rail above it and carries the same colour
   ramp, so it reads as the same journey continuing rather than a new element. */
.flow__line{
  display:block; position:relative; width:100%; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy-mid) 34%,
                             var(--blue) 67%,var(--accent) 100%);
}
.flow__line::after{
  content:''; position:absolute; right:0; top:50%; transform:translateY(-50%);
  border-left:12px solid var(--accent);
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.flow__line::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
  background-size:28% 100%; background-repeat:no-repeat;
  animation:flow-travel 3.4s linear infinite;
}
@keyframes flow-travel{ from{ background-position:-30% 0 } to{ background-position:130% 0 } }

/* Advisory's four are capabilities a client can buy singly, not stages that run
   left to right, so that page opts out of the chevrons. The colour ramp stays —
   it is the brand signature shared with the other three services.

   Written at .flow.flow--boxes / .flow--boxes .flow__step rather than one class:
   the responsive blocks below re-declare .flow and .flow__step with chevron
   values, and being later in the file they would otherwise win. */
.flow.flow--boxes{ --point:0; --gap:10px }
.flow--boxes .flow__step,
.flow--boxes .flow__step:first-child{
  clip-path:none; border-radius:var(--r-sm);
  padding:12px 16px; margin-left:var(--gap);
  /* the chevron's clip-path was quietly cutting off the longest label; with the
     points gone it would spill instead, so let it wrap as it already does <1024px */
  white-space:normal; line-height:1.25;
}
.flow--boxes .flow__step:first-child{ margin-left:0 }

/* ===== 16. VALUE PILLARS =============================================== */
.pillars{ display:grid; gap:20px; margin-bottom:48px }
.pillars--4{ grid-template-columns:repeat(4,1fr) }
.pillars--2{ grid-template-columns:repeat(2,1fr) }
.pillar{
  position:relative; background:var(--card); border:var(--hairline);
  border-radius:var(--r-md); padding:26px 24px 28px; box-shadow:var(--sh-sm); overflow:hidden;
}
.pillar::before{ content:''; position:absolute; inset:0 0 auto; height:5px; background:var(--sig) }
.pillar h3{ font-size:1rem; margin-bottom:10px; position:relative }
.pillar p{ font-size:.875rem; font-weight:300; line-height:1.7; position:relative }

/* ===== 17. WHY-POINT VARIANTS ========================================== */
.why-block{ margin-bottom:48px }
.why-block__title{
  display:flex; align-items:center; gap:12px;
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:22px;
}
.why-block__title::after{ content:''; flex:1; height:1px; background:var(--border) }

/* S1 — bulleted list */
.why--list li{ display:flex; gap:14px; padding:14px 0 }
.why--list li + li{ border-top:var(--hairline) }
.why--list li::before{ content:''; width:8px; height:8px; margin-top:9px; flex:none; background:var(--accent); border-radius:2px }
.why--list b{ color:var(--navy); font-weight:600 }
.why--list p{ font-size:.9375rem; font-weight:300; line-height:1.7 }

/* S2 — 2x2 hairline grid */
.why--grid{ grid-template-columns:repeat(2,1fr) }
.why--grid li{ padding:26px 28px }
.why--grid b{ display:block; color:var(--navy); font-weight:700; font-size:.9375rem; margin-bottom:8px }
.why--grid span{ font-size:.875rem; font-weight:300; line-height:1.7; color:var(--body) }

/* S3 — 4 across with vertical hairlines */
.why--strip{ grid-template-columns:repeat(4,1fr) }
.why--strip li{ padding:24px 24px 26px }
.why--strip b{ display:block; color:var(--navy); font-weight:700; font-size:.875rem; margin-bottom:8px }
.why--strip span{ font-size:.8125rem; font-weight:300; line-height:1.66; color:var(--body) }

/* S4 — numbered vertical rail */
.why--rail{ position:relative; padding-left:34px }
.why--rail::before{ content:''; position:absolute; left:11px; top:8px; bottom:8px; width:2px; background:var(--border) }
.why--rail li{ position:relative; padding:12px 0 }
.why--rail li::before{
  content:''; position:absolute; left:-29px; top:19px;
  width:10px; height:10px; border-radius:50%;
  background:var(--card); border:2px solid var(--sig);
}
.why--rail b{ color:var(--navy); font-weight:600 }
.why--rail p{ font-size:.9375rem; font-weight:300; line-height:1.7 }

/* ===== 18. CLOSING BAND ================================================ */
.band{
  position:relative; margin-top:48px;
  background:var(--navy); color:#fff; border-radius:var(--r-md);
  padding:24px 32px 24px 38px; overflow:hidden;
}
.band::before{ content:''; position:absolute; inset:0 auto 0 0; width:6px; background:var(--accent) }
.band p{ font-size:1.0625rem; font-style:italic; font-weight:300; line-height:1.6; color:rgba(255,255,255,.94) }

.band--bleed{
  border-radius:0; margin-top:0;
  padding-block:clamp(40px,5vw,64px); padding-inline:0;
}
.band--bleed::before{ width:0 }
.band--bleed p{ font-size:clamp(1.125rem,.95rem + .7vw,1.5rem) }

/* ===== 19. SERVICE SECTION SHELL ======================================= */
.svc-index{
  display:flex; align-items:baseline; gap:12px; margin-bottom:16px;
  font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase;
}
.svc-index b{ font-size:1.5rem; font-weight:900; letter-spacing:-.02em; color:var(--sig); line-height:1 }
.svc-index span{ color:var(--muted); font-weight:600 }
.svc-index em{ color:var(--muted); font-style:normal; font-weight:600 }

/* Per-service signature colour. Set on <body data-svc="…"> so it applies across a
   whole service page, and on the overview cards on the home page. */
[data-svc="dcm"]   { --sig:var(--navy);     --sig-rgb:var(--navy-rgb) }
[data-svc="crisis"]{ --sig:var(--blue);     --sig-rgb:var(--blue-rgb) }
[data-svc="ma"]    { --sig:var(--accent);   --sig-rgb:var(--accent-rgb) }
[data-svc="advisory"]{ --sig:var(--navy-mid); --sig-rgb:14,74,120 }

/* the green service needs readable ink wherever --sig would be used as text */
[data-svc="ma"] .svc-index b,
[data-svc="ma"] [data-svc="ma"] .vs--panels .vs__col--us .vs__h{ color:var(--on-accent) }

/* ===== 19b. SERVICE PAGE HEADER ======================================== */
.page-head{
  position:relative; z-index:1;
  padding-top:calc(var(--nav-h) + clamp(40px,6vw,72px));
  padding-bottom:clamp(36px,5vw,56px);
  border-bottom:var(--hairline);
}
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.8125rem; color:var(--muted); margin-bottom:22px;
}
.crumb a{ color:var(--muted); transition:color .2s var(--ease) }
.crumb a:hover{ color:var(--accent-ink) }
.crumb b{ color:var(--navy); font-weight:600 }
.crumb i{ font-style:normal; color:var(--divider) }

.page-head h1{
  font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem); font-weight:800;
  line-height:1.08; letter-spacing:var(--ls-display); color:var(--navy);
  max-width:20ch;
}
.page-head .lead{ margin-top:20px; max-width:660px }
.page-head .rule{ margin-bottom:20px }

/* ===== 19c. SIBLING SERVICE NAV ======================================== */
.svc-nav h2{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:24px;
}

/* ===== 20. TEAM ======================================================== */
.team-card{ padding:36px 30px }
.avatar{
  width:64px; height:64px; border-radius:50%; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff; font-size:1.0625rem; font-weight:700; letter-spacing:.05em;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16);
}
.team-role{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:8px;
}
.team-card h3{ margin-bottom:12px }
.team-card p{ font-size:.875rem; font-weight:300; line-height:1.72; margin-bottom:18px }

/* ===== 21. CONTACT / FOOTER ============================================ */
.cta{ position:relative; z-index:1; background:var(--navy); color:#fff; overflow:hidden }
.cta::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(var(--accent-rgb),.20) 0%,transparent 62%);
  pointer-events:none;
}
.cta .container{ position:relative; z-index:1; text-align:center; max-width:760px }
.cta h2{ color:#fff; font-size:var(--fs-h2); font-weight:800; line-height:1.1; letter-spacing:var(--ls-display) }
.cta .grad{ background:linear-gradient(90deg,var(--accent),#B4E27A); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--accent) }
.cta p{ color:rgba(255,255,255,.82); font-weight:300; margin:20px auto 34px; max-width:560px }
.cta__mail{
  display:block; margin-top:22px; font-size:1rem; font-weight:500;
  color:rgba(255,255,255,.72); transition:color .2s var(--ease);
}
.cta__mail:hover{ color:#fff }

.footer{ background:var(--navy); color:rgba(255,255,255,.62); border-top:1px solid rgba(255,255,255,.10) }
.footer__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; padding-block:56px }
/* the mark's navy figure would vanish on the navy footer — sit it on a white chip */
.footer__mark{ width:46px; height:auto; margin-bottom:16px; padding:7px; background:#fff; border-radius:11px }
.footer__brand b{ display:block; font-size:.9375rem; font-weight:800; letter-spacing:.16em; color:#fff; margin-bottom:12px }
.footer__tagline{ font-style:italic; font-size:.875rem; font-weight:300; line-height:1.7 }
.footer h4{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.92); margin-bottom:18px;
}
.footer li + li{ margin-top:11px }
.footer a{ font-size:.875rem; transition:color .2s var(--ease) }
.footer a:hover{ color:var(--accent) }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center;
  padding-block:20px; border-top:1px solid rgba(255,255,255,.10);
  font-size:.75rem; color:rgba(255,255,255,.62);
}
.footer__social{ display:flex; gap:14px; margin-top:18px }
.footer__social a{ display:flex; width:34px; height:34px; align-items:center; justify-content:center;
                   border:1px solid rgba(255,255,255,.16); border-radius:var(--r-sm) }
.footer__social svg{ width:16px; height:16px; fill:currentColor }
.footer__social a:hover{ border-color:var(--accent) }

/* ===== 21b. COOKIE CONSENT ============================================= */
/* Visibility is the `hidden` attribute, as the drawer does it. A state class
   would leave this markup on screen for the moment before main.js runs, and it
   is markup nobody should see even once if they have already answered. */
.cc-banner[hidden],.cc-modal[hidden],.cc-backdrop[hidden]{ display:none }

.cc-banner{
  position:fixed; inset:auto 0 0 0; z-index:150;
  background:var(--card); border-top:2px solid var(--accent);
  box-shadow:var(--sh-lg); padding-block:20px;
}
/* the editor bar owns the bottom of the screen for a signed-in admin */
body:has(.jse-bar) .cc-banner{ bottom:64px }

.cc-banner__inner{ display:flex; align-items:center; gap:20px 32px; flex-wrap:wrap }
.cc-banner__copy{ flex:1 1 400px; min-width:0 }
.cc-banner__copy h2{ font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:5px }
.cc-banner__copy p{ font-size:.875rem; font-weight:300; line-height:1.65 }
.cc-banner__copy .textlink{ margin-top:8px }

/* Reject and Accept carry equal visual weight on purpose. Refusing has to be as
   easy as accepting, and that is a design claim as much as a click count. */
.cc-banner__actions{ display:flex; gap:10px; flex-wrap:wrap; flex:0 0 auto }
.cc-banner__actions .btn{ flex:1 1 auto; white-space:nowrap }

.cc-backdrop{
  position:fixed; inset:0; z-index:300; background:rgba(var(--navy-rgb),.55);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.cc-modal{
  position:fixed; z-index:301; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 2 * var(--gutter))); max-height:86vh; overflow-y:auto;
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:28px clamp(20px,4vw,32px) 24px;
}
.cc-modal__head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:8px }
.cc-modal__head h2{
  flex:1; font-size:1.25rem; font-weight:800; line-height:1.2;
  letter-spacing:-.02em; color:var(--navy);
}
.cc-x{
  flex:none; display:flex; width:32px; height:32px; align-items:center; justify-content:center;
  border:var(--hairline); border-radius:var(--r-sm); color:var(--muted); font-size:1.25rem; line-height:1;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.cc-x:hover{ border-color:var(--divider); color:var(--navy) }
.cc-modal__intro{ font-size:.875rem; font-weight:300; line-height:1.7; margin-bottom:18px }

.cc-cat{ padding-block:16px; border-top:var(--hairline) }
.cc-cat:last-of-type{ border-bottom:var(--hairline); margin-bottom:22px }
.cc-cat__top{ display:flex; align-items:center; gap:12px; margin-bottom:5px }
.cc-cat__top h3{ flex:1; font-size:.9375rem; font-weight:700; color:var(--navy) }
.cc-cat p{ font-size:.8125rem; font-weight:300; line-height:1.65 }

/* A real checkbox, hidden with .vh, so the keyboard and screen-reader behaviour
   is the browser's rather than ours to reimplement and get wrong. */
.cc-switch{ position:relative; flex:none; display:inline-flex; align-items:center; cursor:pointer }
.cc-switch__track{
  position:relative; display:block; width:44px; height:24px;
  border:1px solid var(--divider); border-radius:var(--r-pill); background:var(--bg-3);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.cc-switch__track::after{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:var(--sh-sm);
  transition:transform .2s var(--ease);
}
.cc-switch input:checked + .cc-switch__track{ background:var(--accent); border-color:var(--accent) }
.cc-switch input:checked + .cc-switch__track::after{ transform:translateX(20px) }
.cc-switch input:focus-visible + .cc-switch__track{ outline:2px solid var(--blue); outline-offset:2px }
.cc-switch input:disabled + .cc-switch__track{ opacity:.5 }
.cc-switch:has(input:disabled){ cursor:not-allowed }

.cc-badge{
  flex:none; padding:5px 11px; border-radius:var(--r-pill);
  font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); background:rgba(var(--accent-rgb),.09);
  border:1px solid rgba(var(--accent-rgb),.42);
}

.cc-modal__actions{ display:flex; gap:10px; flex-wrap:wrap }
.cc-modal__actions .btn{ flex:1 1 auto }
.cc-modal__actions .btn[disabled]{ opacity:.45; box-shadow:none; pointer-events:none }

/* the footer's bare buttons — cookie preferences, and the promo re-opener —
   are buttons rather than anchors, so they need matching to .footer a */
.footer .cc-link,.footer .promo-link{ font-size:.875rem }
.cc-link,.promo-link{ padding:0; text-align:left; transition:color .2s var(--ease) }
.cc-link:hover,.promo-link:hover{ color:var(--accent) }

@media (max-width:640px){
  .cc-modal{
    top:auto; bottom:0; left:0; transform:none; width:100%; max-height:90vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
  }
  .cc-banner__actions{ width:100% }
  .cc-banner__actions .btn{ flex:1 1 100%; justify-content:center }
}

/* ===== 21c. LEGAL / LONG-FORM COPY ===================================== */
/* The marketing pages are all cards and grids and have no plain running text.
   A policy is nothing but running text, so it gets the one prose scope. */
.prose{ max-width:74ch }
.prose > * + *{ margin-top:16px }
.prose h2{
  font-size:1.375rem; font-weight:800; line-height:1.3; letter-spacing:-.02em;
  color:var(--navy); margin-top:44px;
}
.prose h3{ font-size:1rem; font-weight:700; color:var(--navy); margin-top:28px }
.prose h2 + *,.prose h3 + *{ margin-top:12px }
.prose p,.prose li{ font-size:.9375rem; font-weight:300; line-height:1.75 }
.prose ul{ list-style:disc; padding-left:1.25em }
.prose li + li{ margin-top:7px }
.prose a:not(.btn){
  color:var(--accent-ink); font-weight:500;
  text-decoration:underline; text-underline-offset:3px;
}
.prose a:not(.btn):hover{ color:var(--accent-ink-hov) }
.prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.875em; color:var(--navy) }
.prose .cc-badge{ display:inline-block; vertical-align:middle; margin-left:10px }
.prose__updated{ font-size:.8125rem; color:var(--muted) }
.band + .prose{ margin-top:32px }

.cc-table{ margin-top:16px; overflow-x:auto; border:var(--hairline); border-radius:var(--r-md); background:var(--card) }
.cc-table table{ width:100%; min-width:520px; border-collapse:collapse }
.cc-table th,.cc-table td{ padding:12px 16px; text-align:left; vertical-align:top; font-size:.8125rem }
.cc-table th{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); background:var(--bg-2); border-bottom:var(--hairline);
}
.cc-table td{ font-weight:300; line-height:1.6; border-bottom:var(--hairline) }
.cc-table tr:last-child td{ border-bottom:0 }
.cc-table td code{ font-weight:400 }
.cc-none{ margin-top:12px; padding:14px 16px; border:1px dashed var(--divider); border-radius:var(--r-md); font-size:.8125rem; color:var(--muted) }

/* ===== 21d. PROMOTION MODAL ============================================ */
/* One reusable campaign card. The copy, the campaign id and the on/off switch
   are all data-c keys, so swapping campaigns is a portal edit — only the
   illustration is code. It never opens alongside the cookie banner: main.js
   waits for a consent choice first. */
/* display:none cannot transition, so the card would blink out rather than
   slide. visibility can, as long as its flip is held back until the slide
   has finished — hence the 0s delay on the way out and none on the way in. */
.promo[hidden],.promo-backdrop[hidden]{
  display:block;                 /* the UA sheet's [hidden]{display:none} would kill the transition */
  visibility:hidden; opacity:0; pointer-events:none;
}

.promo-backdrop{
  position:fixed; inset:0; z-index:400; background:rgba(var(--navy-rgb),.58);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.promo{
  position:fixed; z-index:401; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 2 * var(--gutter))); max-height:88vh; overflow-y:auto;
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
}
.promo__x{
  position:absolute; top:12px; right:13px; z-index:2;
  display:flex; width:34px; height:34px; align-items:center; justify-content:center;
  border-radius:var(--r-pill); background:rgba(255,255,255,.86); color:var(--navy);
  font-size:1.375rem; line-height:1;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.promo__x:hover{ background:#fff; transform:scale(1.06) }

.promo__art{
  background:linear-gradient(160deg,var(--bg-2) 0%,var(--bg-3) 100%);
  border-bottom:var(--hairline); border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:22px 24px 6px;
}
.promo__art svg{ width:100%; height:auto; max-width:320px; margin-inline:auto; display:block }

.promo__body{ padding:24px clamp(22px,4vw,32px) 26px }
.promo__body h2{
  font-size:clamp(1.25rem,1.05rem + .7vw,1.625rem); font-weight:800; line-height:1.2;
  letter-spacing:var(--ls-display); color:var(--navy); margin-bottom:12px;
}
.promo__body p{ font-size:.9375rem; font-weight:300; line-height:1.7 }
.promo__body p + p{ margin-top:11px }
.promo__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px }
.promo__actions .btn{ flex:1 1 auto; justify-content:center }

/* The card slides off to the left rather than vanishing, and leaves this behind.
   The cross means "not right now"; only "Not now" means no. */
.promo-flap[hidden]{ display:none }
.promo-flap{
  position:fixed; z-index:390; left:0; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:8px;
  padding:18px 9px; border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--navy); color:#fff; box-shadow:var(--sh-md);
  border-left:3px solid var(--accent);
  transition:background .2s var(--ease), padding-right .2s var(--ease);
}
.promo-flap:hover{ background:var(--navy-mid); padding-right:13px }
.promo-flap__label{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.promo-flap svg{ width:13px; height:13px; flex:none }

/* slide, don't blink — the card leaves towards the flap it becomes */
.promo{
  visibility:visible; opacity:1;
  transition:transform .32s var(--ease), opacity .32s var(--ease), visibility 0s;
}
.promo[hidden]{
  transform:translate(-150%,-50%);
  transition:transform .32s var(--ease), opacity .32s var(--ease), visibility 0s .32s;
}
.promo-backdrop{ transition:opacity .28s var(--ease), visibility 0s }
.promo-backdrop[hidden]{ transition:opacity .28s var(--ease), visibility 0s .28s }

@media (max-width:640px){
  .promo{
    top:auto; bottom:0; left:0; transform:none; width:100%; max-height:92vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
  }
  /* 34px is under the 44px minimum comfortable touch target */
  /* 61px of a 390px screen is too much edge to give up — drop the chevron
     and tighten the padding so the tab is ~34px on a phone */
  .promo-flap{ padding:16px 7px; gap:0 }
  .promo-flap svg{ display:none }
  .promo__x{ width:44px; height:44px; top:10px; right:10px }
  .promo__art{ padding:18px 18px 4px }
  .promo__body{ padding:20px 18px 22px }
  .promo__actions .btn{ flex:1 1 100% }
}

/* ===== 22. RESPONSIVE ================================================== */
@media (max-width:1024px){
  .flow{ --point:16px }
  .flow__step{ white-space:normal; line-height:1.25; padding:12px 14px 12px calc(var(--point) + 14px) }
  .pillars--4{ grid-template-columns:repeat(2,1fr) }
  .grid-hair--4{ grid-template-columns:repeat(2,1fr) }
  .why--strip{ grid-template-columns:repeat(2,1fr) }
  .why-argument{ grid-template-columns:1fr; gap:36px }
  .vs--panels{ gap:20px }
}

@media (max-width:860px){
  .nav__links,.nav__cta{ display:none }
  .nav__toggle{ display:flex }
  .flow{ flex-direction:column; --point:18px }
  .flow__step{
    margin-left:0; margin-top:calc(var(--gap) - var(--point));
    /* clear the notch at BOTH edges — the top edge dips inward by --point too */
    padding:calc(var(--point) + 12px) 20px calc(var(--point) + 12px);
    justify-content:flex-start; text-align:left; white-space:normal;
    clip-path:polygon(0 0, 50% var(--point), 100% 0,
                      100% calc(100% - var(--point)), 50% 100%, 0 calc(100% - var(--point)));
  }
  .flow__step:first-child{
    margin-top:0; padding-top:18px;   /* flat top edge — no notch to clear */
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--point)), 50% 100%, 0 calc(100% - var(--point)));
  }
  @supports not (clip-path: polygon(0 0, 1px 0, 1px 1px)){
    .flow__step{ margin:0; padding:14px 18px }
  }
  .vs--panels{ grid-template-columns:1fr }
  .vs--swap .vs__pair{ grid-template-columns:1fr }
  .vs--swap .vs__arrow{ display:none }
  .vs--swap .vs__us{ border-top:var(--hairline) }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:40px }
  .footer__brand{ grid-column:1 / -1 }
}

@media (max-width:768px){
  .grid-hair--2,.grid-hair--3,.grid-hair--4{ grid-template-columns:1fr }
  .pillars--4,.pillars--2{ grid-template-columns:1fr }
  .why--grid,.why--strip{ grid-template-columns:1fr }
  .vs--table,.vs--ledger{ grid-template-columns:1fr }
  .vs--table .vs__h{ display:none }
  .vs--table .vs__them::before{ content:'Typical'; display:block; font-size:.625rem; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:5px }
  .vs--table .vs__us::before{ content:'Juntos'; display:block; font-size:.625rem; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:5px }
  .hero__cta .btn{ flex:1 1 100%; }
  .creds{ flex-direction:column; align-items:flex-start; gap:12px }
  .band{ padding:22px 24px 22px 30px }
  .footer__inner{ grid-template-columns:1fr; gap:36px }
}

@media (max-width:480px){
  .mesh i:nth-child(3){ display:none }
    .svc-index b{ font-size:1.25rem }
}

/* ===== 23. MOTION ====================================================== */
/* Visible is the DEFAULT. Only the .js class opts elements into hiding, so
   the page is fully readable if JS is disabled, blocked, or fails to load. */
[data-anim]{ opacity:1; transform:none }
.js [data-anim]{
  opacity:0; transform:translateY(var(--dist-rev));
  transition:opacity var(--dur-rev) var(--ease), transform var(--dur-rev) var(--ease);
}
.js [data-anim].visible{ opacity:1; transform:none }
.js [data-stagger] > *{ transition-delay:var(--d,0ms) }
.js [data-delay="1"]{ transition-delay:.08s }
.js [data-delay="2"]{ transition-delay:.16s }
.js [data-delay="3"]{ transition-delay:.24s }
.js [data-delay="4"]{ transition-delay:.32s }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  html{ scroll-behavior:auto }
  .js [data-anim]{ opacity:1!important; transform:none!important }
  .mesh i{ animation:none!important }
  .eyebrow .dot{ animation:none!important }
  .flow__line::before{ animation:none!important; opacity:0 }
  .hero__plate img,
  .hero__travellers{ animation:none!important }
  /* travellers hold mid-path rather than vanishing — the lanes stay legible */
  .hero__t{ animation:none!important; opacity:.13!important }
  .hero__t--navy{ offset-distance:62%!important }
  .hero__t--green{ offset-distance:48%!important }
  .hero__t--blue{ offset-distance:55%!important }
}

/* ===== 24. PRINT ======================================================= */
@media print{
  .mesh,.nav,.drawer,.skip,.hero__cta,.footer__social,.hero__visual,
  .cc-banner,.cc-backdrop,.cc-modal,.promo,.promo-backdrop,.promo-flap{ display:none!important }
  body{ background:#fff; color:#000 }
  .js [data-anim]{ opacity:1!important; transform:none!important }
  /* a printed page carries all six, not whichever happened to be on screen */
  .js .dna__pop{ position:static; visibility:visible!important; opacity:1!important;
                 transform:none!important; box-shadow:none; width:auto }
  .js .dna__pop::before,.dna__x{ display:none }
  .js .dna__pop + .dna__pop{ margin-top:12px }
  .section{ padding-block:24px; break-inside:avoid }
  .cta,.footer,.band{ background:#fff!important; color:#000!important; border:1px solid #999 }
  .cta h2,.band p{ color:#000!important }
  .flow__step{ clip-path:none!important; margin:0 0 2px!important; padding:10px 14px!important;
               color:#fff!important; print-color-adjust:exact; -webkit-print-color-adjust:exact }
  .grid-hair,.pillar,.creds,.pull{ box-shadow:none!important }
  a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:.7em; color:#555 }
}