/*
 * Global Solutions Operations FZE (GSO)
 * Shared stylesheet for the static site and the WordPress theme.
 * Token values follow the design handoff exactly; see README.md.
 */

/* ---------- Fonts (self-hosted Geist, SIL OFL 1.1) ---------- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist-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: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist-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;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist-mono-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: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist-mono-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;
}

/* ---------- Tokens ---------- */
:root {
  --accent: #1F3CEB;
  --accent-2: #2B4BFF;
  --accent-light: #6E86FF;
  --navy: #060B1F;
  --navy-deep: #04081A;
  --ink: #0B0F1A;
  --ink-soft: #4A5059;
  --muted: #8A8F98;
  --muted-strong: #6E7480;
  --paper: #EFEFEF;
  --white: #FFFFFF;
  --tile: #F5F6F8;
  --tile-hover: #ECEEF2;
  --placeholder: #E4E7EC;
  --error: #B42318;
  --error-bg: #FDEDEC;

  --font: Geist, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-pill: 999px;
  --r-panel: 28px;
  --r-card: 24px;
  --r-block: 22px;
  --r-bar: 20px;
  --r-tile: 18px;
  --r-row: 16px;
  --r-field: 14px;

  --gap: 20px;
  --gutter: 20px;
  --pad-hero: clamp(32px, 5vw, 72px);
  --pad-lg: clamp(32px, 4.5vw, 64px);
  --pad-md: clamp(28px, 3.5vw, 48px);
  --pad-card: 32px;
  --pad-post: 30px;

  --t: 180ms ease;
  --reveal: .8s cubic-bezier(.22, .61, .36, 1);

  --scrim: linear-gradient(176deg, rgba(4,8,26,.66) 0%, rgba(7,16,51,.5) 46%, rgba(7,18,54,.55) 78%, rgba(4,8,26,.72) 100%);
  --cta-gradient: linear-gradient(135deg, #2B4BFF 0%, #1226B8 46%, #050A1E 100%);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }
input, textarea, button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.panel--navy :focus-visible, .footer :focus-visible, .hero :focus-visible, .cta :focus-visible { outline-color: #FFFFFF; }
::selection { background: rgba(31, 60, 235, .18); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 20px; top: -60px; z-index: 100;
  background: var(--navy); color: #FFFFFF; padding: 12px 20px; border-radius: var(--r-pill);
  font-size: 14px; transition: top var(--t);
}
.skip-link:focus { top: 14px; color: #FFFFFF; }

/* Shared type */
.mono, .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-strong);
  font-weight: 400;
}
.label--sm { font-size: 10.5px; }
.h2 {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 400;
  text-wrap: pretty;
}
.h2--panel { font-size: clamp(26px, 3vw, 40px); line-height: 1.08; }
.h2--why { font-size: clamp(28px, 3.2vw, 44px); }
.h2--cta { font-size: clamp(30px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -0.045em; max-width: 18em; }
.h2--cta-sm { font-size: clamp(26px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.045em; max-width: 20em; }
.h2--cta-contact { font-size: clamp(30px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -0.045em; }
.h2--more { font-size: clamp(24px, 3vw, 40px); }
.statement { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.035em; font-weight: 400; }
.statement--sm { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.18; }
.icon { flex: none; }

/* ---------- Layout ---------- */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px var(--gutter) 20px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--gap);
}
.panel {
  background: var(--white);
  border-radius: var(--r-panel);
  padding: var(--pad-lg);
}
.panel--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.panel--split-300 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.panel--stack { display: flex; flex-direction: column; gap: 32px; }
.panel--navy { background: var(--navy); color: #FFFFFF; display: flex; flex-direction: column; gap: 40px; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.stack-18 { display: flex; flex-direction: column; gap: 18px; }
.stack-22 { display: flex; flex-direction: column; gap: 22px; }
.section-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.section-head--outside { padding: 0 clamp(8px, 2vw, 24px); }
.section-head__end { margin-left: auto; }
.lede { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.body-muted { font-size: 15.5px; line-height: 1.65; color: var(--muted-strong); text-wrap: pretty; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; padding: 14px var(--gutter) 0; }
.site-header__bar {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: var(--r-bar);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.logo {
  display: inline-flex;
  align-items: center;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 1;
  color: var(--ink);
  padding-right: .08em;
}
.logo:hover { color: var(--ink); }
.logo__o { color: var(--accent); }
.nav { margin-left: 10px; }
.nav__list { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.nav__link {
  font-size: 14px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color var(--t);
  padding: 4px 0;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current]::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--tile);
  color: var(--ink);
  align-items: center;
  justify-content: center;
  transition: background-color var(--t);
  flex: none;
}
.nav-toggle:hover { background: var(--tile-hover); }
.nav-toggle__bars { position: relative; width: 16px; height: 10px; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px;
  background: currentColor; transition: transform var(--t), top var(--t);
}
.nav-toggle__bars::before { top: 1px; }
.nav-toggle__bars::after { top: 7.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 4.25px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 4.25px; transform: rotate(-45deg); }

.mobile-menu {
  max-width: 1240px;
  margin: 8px auto 0;
  background: #FFFFFF;
  border-radius: var(--r-bar);
  padding: 10px 22px 22px;
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mobile-menu__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0;
  font-size: 22px; letter-spacing: -0.03em; color: var(--ink);
}
.mobile-menu__link:hover { color: var(--accent); }
.mobile-menu__link span { display: inline-flex; align-items: center; gap: 10px; }
.mobile-menu__link[aria-current] span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none;
}
.mobile-menu__link .icon { color: var(--muted); }
.mobile-menu__foot {
  margin-top: 14px; padding: 18px 20px; background: var(--tile); border-radius: var(--r-row);
  display: flex; flex-direction: column; gap: 6px;
}
.mobile-menu__foot a { font-size: 16px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu:not([hidden]) { animation: menu-in .22s ease both; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Pills / buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: var(--r-pill);
  white-space: nowrap;
  cursor: pointer;
  align-self: flex-start;
  font-size: 15px;
  line-height: 1.2;
  transition: background-color var(--t), color var(--t);
}
.pill--header { padding: 11px 20px; background: var(--navy); color: #FFFFFF; font-size: 13.5px; }
.pill--header:hover { background: var(--accent); color: #FFFFFF; }
.pill--hero { padding: 13px 15px 13px 24px; background: var(--accent); color: #FFFFFF; }
.pill--hero:hover { background: #FFFFFF; color: var(--navy); }
.pill--white { padding: 14px 16px 14px 26px; background: #FFFFFF; color: var(--navy); }
.pill--white:hover { background: var(--navy); color: #FFFFFF; }
.pill--accent { padding: 14px 16px 14px 26px; background: var(--accent); color: #FFFFFF; }
.pill--accent:hover { background: var(--navy); color: #FFFFFF; }
.pill--ghost { padding: 12px 14px 12px 22px; background: rgba(255, 255, 255, .08); color: #FFFFFF; font-size: 14px; }
.pill--ghost:hover { background: var(--accent); color: #FFFFFF; }
.pill--soft { padding: 13px 22px; background: #FFFFFF; color: var(--ink); font-size: 14px; }
.pill--soft:hover { background: var(--navy); color: #FFFFFF; }
.pill[disabled] { opacity: .6; cursor: progress; }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--accent); }

/* ---------- Heroes ---------- */
.hero {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-panel);
  overflow: hidden;
  padding: var(--pad-hero);
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  background: var(--hero-bg);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--scrim); pointer-events: none; }
.hero__streak {
  position: absolute; z-index: -1; pointer-events: none; filter: blur(2px);
  top: var(--st-top, -10%); right: var(--st-right, auto); left: var(--st-left, auto);
  width: var(--st-w, 42%); height: var(--st-h, 120%);
  background: var(--st-bg, linear-gradient(200deg, rgba(255,255,255,.28), rgba(255,255,255,0) 58%));
  transform: rotate(var(--st-rot, 14deg));
}
.hero__top { display: flex; flex-direction: column; gap: 24px; }
.hero__eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.hero__title {
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 400;
  color: #FFFFFF;
  text-wrap: pretty;
}
.hero__title .dim { color: rgba(255, 255, 255, .52); }
.hero__lead {
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .76);
  max-width: 640px;
  text-wrap: pretty;
}

.hero--home {
  --hero-bg: linear-gradient(168deg, #04081A 0%, #071033 32%, #0E2360 62%, #2F508E 86%, #7E9CCB 100%);
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(26px, 3.4vw, 54px);
}
.hero__copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.hero__figure {
  position: relative;
  align-self: stretch;
  min-height: 340px;
  border-radius: var(--r-bar);
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
.hero__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--home .hero__title { font-size: clamp(34px, 4.05vw, 62px); max-width: 14em; }
.hero--home .hero__lead { color: rgba(255, 255, 255, .74); max-width: 30em; }
.hero__foot { max-width: 560px; font-size: clamp(14px, 1.3vw, 16px); line-height: 1.6; color: rgba(255, 255, 255, .86); text-wrap: pretty; }

.hero--service { min-height: 480px; justify-content: space-between; gap: 48px; }
.hero--service .hero__lead { color: #FFFFFF; max-width: 660px; }
.hero--advisory {
  --hero-bg: linear-gradient(176deg, #04081A 0%, #071033 40%, #0E2360 66%, #33558F 84%, #93AED2 96%, #C8D8EC 100%);
  --st-top: -20%; --st-right: 12%; --st-w: 36%; --st-h: 130%; --st-rot: 16deg;
  --st-bg: linear-gradient(200deg, rgba(255,255,255,.3), rgba(255,255,255,0) 60%);
}
.hero--implementation {
  --hero-bg: linear-gradient(176deg, #04081A 0%, #08123A 40%, #142C72 68%, #4064A4 86%, #9FB8D9 97%, #CEDCEE 100%);
  --st-top: -20%; --st-left: 18%; --st-w: 40%; --st-h: 130%; --st-rot: -12deg;
  --st-bg: linear-gradient(190deg, rgba(255,255,255,.28), rgba(255,255,255,0) 62%);
}
.hero--technology {
  --hero-bg: linear-gradient(176deg, #03060F 0%, #06102F 38%, #0B1F55 62%, #2B4BFF 88%, #8FB0EC 97%, #D5E2F5 100%);
  --st-top: -16%; --st-right: 6%; --st-w: 44%; --st-h: 126%; --st-rot: 18deg;
  --st-bg: linear-gradient(205deg, rgba(255,255,255,.3), rgba(255,255,255,0) 56%);
}
.hero--insights {
  --hero-bg: linear-gradient(176deg, #04081A 0%, #071033 42%, #0E2360 70%, #3A5E9E 90%, #BBCDE7 100%);
  --st-top: -22%; --st-right: 10%; --st-w: 40%; --st-h: 136%; --st-rot: 15deg;
  --st-bg: linear-gradient(200deg, rgba(255,255,255,.3), rgba(255,255,255,0) 58%);
  min-height: 400px; justify-content: flex-end; gap: 24px;
}
.hero--contact {
  --hero-bg: linear-gradient(176deg, #04081A 0%, #071033 44%, #0E2360 72%, #3A5E9E 90%, #B9CCE6 100%);
  --st-top: -24%; --st-right: 14%; --st-w: 38%; --st-h: 140%; --st-rot: 15deg;
  --st-bg: linear-gradient(200deg, rgba(255,255,255,.3), rgba(255,255,255,0) 58%);
  min-height: 380px; justify-content: flex-end; gap: 26px;
}
.hero--contact .hero__lead { max-width: 620px; }
.hero--article {
  --hero-bg: linear-gradient(176deg, #04081A 0%, #071033 44%, #0E2360 72%, #35578F 92%, #A9C0DE 100%);
  --scrim: linear-gradient(176deg, rgba(4,8,26,.62) 0%, rgba(7,16,51,.42) 48%, rgba(4,8,26,.74) 100%);
  min-height: 440px; justify-content: flex-end; gap: 24px;
}
.hero--article .hero__title { font-size: clamp(30px, 4.8vw, 66px); line-height: 1.03; max-width: 20em; }
.hero--404 {
  --hero-bg: linear-gradient(176deg, #04081A 0%, #071033 44%, #0E2360 72%, #3A5E9E 90%, #B9CCE6 100%);
  min-height: 460px; justify-content: flex-end; gap: 24px;
}

.post-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
}
.post-meta__cat { color: var(--accent); }
.post-meta__info { color: var(--muted-strong); }
.hero .post-meta { font-size: 11px; color: rgba(255, 255, 255, .7); }
.hero .post-meta__cat { color: rgba(255, 255, 255, .7); }
.hero .post-meta__info { color: rgba(255, 255, 255, .5); }

/* ---------- Media panels ---------- */
.media {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--placeholder);
  min-height: 340px;
}
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--band { min-height: 400px; }
.media--contact { min-height: 320px; }

/* ---------- Home: service cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: var(--gap);
}
.card {
  background: var(--white);
  border-radius: var(--r-card);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 300px;
  color: var(--ink);
  transition: background-color var(--t), color var(--t);
}
.card:hover { background: var(--navy); color: #FFFFFF; }
.card__tile {
  height: 92px; border-radius: var(--r-row);
  display: flex; align-items: flex-end; padding: 16px; color: #FFFFFF;
}
.card__tile--advisory { background: linear-gradient(135deg, #2B4BFF 0%, #0C1C6E 100%); }
.card__tile--implementation { background: linear-gradient(135deg, #6E86FF 0%, #12227A 100%); }
.card__tile--technology { background: linear-gradient(135deg, #A9C0DE 0%, #1F3CEB 55%, #04081A 100%); }
.card__title { font-size: 22px; line-height: 1.2; letter-spacing: -0.03em; font-weight: 400; }
.card__body { font-size: 14.5px; line-height: 1.6; color: var(--muted-strong); text-wrap: pretty; }
.card__more { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--accent); }

/* ---------- Home: how we work ---------- */
.stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
.stage {
  background: rgba(255, 255, 255, .05);
  border-radius: var(--r-bar);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.stage__num { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.stage__title { font-size: 19px; letter-spacing: -0.02em; font-weight: 400; color: #FFFFFF; }
.stage__body { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .58); text-wrap: pretty; }
.panel--navy .label { color: rgba(255, 255, 255, .45); }

/* ---------- Motion ----------
 * Elements rise and scale in as they enter, and dim as they leave.
 * Modern browsers run this from the scroll position itself (animation-timeline),
 * older ones get the same entrance through an IntersectionObserver class.
 * Everything here is off under prefers-reduced-motion.
 */
@keyframes gso-rise { from { opacity: 0; transform: translateY(44px) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes gso-blur { from { opacity: 0; transform: translateY(34px) scale(.92); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes gso-zoom { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes gso-dim { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-40px) scale(.94); } }
@keyframes gso-hero-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes gso-hero-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }

@media (prefers-reduced-motion: no-preference) {
  /* Fallback path: hidden until the observer adds .is-in */
  .js [data-anim] {
    opacity: 0;
    transform: translateY(44px) scale(.88);
    transition: opacity var(--reveal), transform var(--reveal), filter var(--reveal);
    transition-delay: calc(var(--i, 0) * .09s);
  }
  .js [data-anim="stage"] { transform: translateY(34px) scale(.92); filter: blur(8px); transition-delay: calc(var(--i, 0) * .13s); }
  .js [data-anim="zoom"] { transform: scale(.9); }
  .js [data-anim].is-in { opacity: 1; transform: none; filter: none; }

  /* Scroll-driven path: same entrance, plus the exit dim */
  @supports (animation-timeline: view()) {
    .js [data-anim] {
      opacity: 1;
      transform: none;
      filter: none;
      transition: none;
      animation: gso-rise 1s linear both, gso-dim 1s linear both;
      animation-timeline: view(), view();
      animation-range: entry 0% entry 60%, exit 0% exit 90%;
    }
    .js [data-anim="stage"] { animation-name: gso-blur, gso-dim; }
    .js [data-anim="zoom"] { animation-name: gso-zoom, gso-dim; }
    /* Article copy: enter only, so text never fades while it is being read */
    .js [data-anim="in"] {
      animation: gso-rise 1s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    /* On phones a panel can be taller than the screen, so dimming on exit would
       fade text the reader is still on. Keep the entrance, drop the exit. */
    @media (max-width: 860px) {
      .js [data-anim] { animation-name: gso-rise; animation-timeline: view(); animation-range: entry 0% entry 55%; }
      .js [data-anim="stage"] { animation-name: gso-blur; }
      .js [data-anim="zoom"] { animation-name: gso-zoom; }
    }
  }

  /* Hero: runs on load rather than on scroll */
  .hero__top > *, .hero__copy > *, .hero > .hero__eyebrow, .hero > .hero__title, .hero > .hero__lead, .hero > .post-meta {
    animation: gso-hero-rise .85s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: calc(var(--d, 0) * .1s + .05s);
  }
  .hero__top > *:nth-child(2), .hero__copy > *:nth-child(2), .hero > .hero__title { --d: 1; }
  .hero__top > *:nth-child(3), .hero__copy > *:nth-child(3), .hero > .hero__lead { --d: 2; }
  .hero__top > *:nth-child(4), .hero__copy > *:nth-child(4) { --d: 3; }
  .hero__foot { animation: gso-hero-rise .85s cubic-bezier(.22, .61, .36, 1) both; animation-delay: .45s; }
  .hero__media img, .hero__figure img { animation: gso-hero-zoom 18s cubic-bezier(.22, .61, .36, 1) both; }
}

/* ---------- Load intro ---------- */
.page-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  background: var(--paper);
  pointer-events: none;
}
.page-intro__logo {
  display: flex;
  align-items: center;
  font-size: clamp(40px, 7vw, 62px);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 1;
  color: var(--ink);
}
.page-intro__logo .logo__o { color: var(--accent); }
.page-intro__bar {
  width: clamp(90px, 18vw, 130px);
  height: 2px;
  border-radius: 2px;
  background: rgba(11, 15, 26, .08);
  overflow: hidden;
}
.page-intro__bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
html:not(.js) .page-intro { display: none; }
@media (prefers-reduced-motion: reduce) { .page-intro { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .page-intro { animation: intro-out .55s cubic-bezier(.22, .61, .36, 1) .9s both; }
  .page-intro__logo > span:first-child { animation: intro-mark .6s cubic-bezier(.22, .61, .36, 1) both; }
  .page-intro__logo .logo__o { animation: intro-o .7s cubic-bezier(.22, .61, .36, 1) .1s both; }
  .page-intro__bar::after { animation: intro-bar .8s cubic-bezier(.4, 0, .2, 1) both; }

  /* Second page onwards in the same visit: keep it brief */
  .page-intro--quick { animation-delay: .15s; animation-duration: .35s; }
  .page-intro--quick .page-intro__logo > span,
  .page-intro--quick .page-intro__bar::after { animation-duration: .3s; animation-delay: 0s; }
}
@keyframes intro-mark { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes intro-o { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes intro-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* When a card inverts to navy, its accent link switches to the design's
   on-navy accent (#6E86FF, same token as the footer logo) so it stays readable. */
.card:hover .card__more,
.post-card:hover .post-card__more,
.featured:hover .link-arrow,
.post-card:hover .post-meta .icon,
.featured:hover .post-meta__cat { color: var(--accent-light); }

/* Hover lift on the cards that already invert */
.card, .xlink, .post-card, .featured { transition: background-color var(--t), color var(--t), transform var(--t); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover, .xlink:hover, .post-card:hover { transform: translateY(-3px); }
  .pill:hover { transform: translateY(-1px); }
  .pill { transition: background-color var(--t), color var(--t), transform var(--t); }
}

/* ---------- Home: why list ---------- */
.checklist { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--tile); border-radius: var(--r-row); padding: 20px 22px;
  font-size: 15.5px; line-height: 1.5;
}
.checklist .icon { margin-top: 2px; color: var(--accent); }

/* ---------- CTA panel ---------- */
.cta {
  border-radius: var(--r-panel);
  padding: clamp(36px, 5vw, 76px);
  background: var(--cta-gradient);
  display: flex; flex-direction: column; gap: 26px;
  color: #FFFFFF;
}
.cta--compact { padding: var(--pad-lg); gap: 22px; }
.cta--contact { gap: 22px; }
.cta__text { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .78); max-width: 620px; text-wrap: pretty; }
.cta--contact .cta__text { max-width: 660px; }

/* ---------- Service pages ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 14px;
  list-style: none; margin: 0; padding: 0;
}
.tile {
  background: var(--tile); border-radius: var(--r-tile); padding: 24px;
  display: flex; flex-direction: column; gap: 22px; min-height: 130px;
}
.tile__num { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.tile__label { font-size: 17px; letter-spacing: -0.02em; margin-top: auto; }
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--gap);
}
.statement-panel {
  background: var(--white);
  border-radius: var(--r-panel);
  padding: var(--pad-md);
  display: flex; flex-direction: column; gap: 18px;
}
.statement-panel__body { font-size: 15px; line-height: 1.65; color: var(--muted-strong); text-wrap: pretty; }
.statement-panel--dark { color: #FFFFFF; }
.statement-panel--dark .label { color: rgba(255, 255, 255, .5); }
.statement-panel--dark .statement-panel__body { color: rgba(255, 255, 255, .7); }
.statement-panel--advisory { background: linear-gradient(140deg, #0E2360 0%, #071033 60%, #04081A 100%); }
.statement-panel--implementation { background: linear-gradient(140deg, #142C72 0%, #08123A 60%, #04081A 100%); }
.statement-panel--technology { background: linear-gradient(140deg, #2B4BFF 0%, #10206A 58%, #04081A 100%); }

.xlinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--gap);
}
.xlink {
  background: var(--white); border-radius: var(--r-card); padding: 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  color: var(--ink);
  transition: background-color var(--t), color var(--t);
}
.xlink:hover { background: var(--navy); color: #FFFFFF; }
.xlink__text { display: flex; flex-direction: column; gap: 6px; }
.xlink__title { font-size: 20px; letter-spacing: -0.03em; }

/* ---------- Insights index ---------- */
.featured {
  background: var(--white);
  border-radius: var(--r-panel);
  padding: var(--pad-md);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 3.5vw, 48px);
  align-items: center;
  color: var(--ink);
  transition: background-color var(--t), color var(--t);
}
.featured:hover { background: var(--navy); color: #FFFFFF; }
.featured__media { position: relative; border-radius: var(--r-bar); overflow: hidden; min-height: 320px; background: var(--placeholder); }
.featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured__body { display: flex; flex-direction: column; gap: 18px; }
.featured__title { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.06; letter-spacing: -0.04em; font-weight: 400; text-wrap: pretty; }
.featured__excerpt { font-size: 15.5px; line-height: 1.65; color: var(--muted-strong); text-wrap: pretty; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px clamp(8px, 2vw, 24px) 0; }
.filter {
  border: 0; border-radius: var(--r-pill); padding: 10px 16px 10px 18px;
  background: var(--white); color: var(--ink-soft); font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background-color var(--t), color var(--t);
}
.filter:hover { color: var(--ink); background: var(--tile-hover); }
.filter[aria-pressed="true"] { background: var(--navy); color: #FFFFFF; }
.filter__count { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted); }
.filter[aria-pressed="true"] .filter__count { color: rgba(255, 255, 255, .5); }

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: var(--gap);
  list-style: none; margin: 0; padding: 0;
}
.post-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.post-grid > li { display: flex; }
.post-grid > li[hidden] { display: none; }
.post-card {
  flex: 1;
  background: var(--white);
  border-radius: var(--r-card);
  padding: var(--pad-post);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 340px;
  color: var(--ink);
  transition: background-color var(--t), color var(--t);
}
.post-card:hover { background: var(--navy); color: #FFFFFF; }
.post-card__media { position: relative; height: 130px; border-radius: var(--r-row); overflow: hidden; background: var(--placeholder); flex: none; }
.post-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-card .post-meta { gap: 10px; color: var(--muted-strong); }
.post-card .post-meta .icon { color: var(--accent); }
.post-card__title { font-size: 21px; line-height: 1.18; letter-spacing: -0.03em; font-weight: 400; text-wrap: pretty; }
.post-card__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--muted-strong); text-wrap: pretty; }
.post-card__more { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--accent); }
.post-card__date { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-strong); }

.load-more-wrap { display: flex; justify-content: center; padding-top: 4px; }
.load-more-wrap[hidden] { display: none; }
.insights-empty { padding: 0 clamp(8px, 2vw, 24px); color: var(--muted-strong); }

/* ---------- Article ---------- */
.article {
  background: var(--white);
  border-radius: var(--r-panel);
  padding: clamp(30px, 5vw, 76px);
  display: flex; flex-direction: column; align-items: center;
}
.prose {
  width: 100%;
  max-width: 760px;
  display: flex; flex-direction: column; gap: 30px;
}
.prose > * { margin: 0; }
.prose > p + p { margin-top: -6px; }
.prose .standfirst,
.prose .is-style-standfirst {
  font-size: clamp(18px, 2vw, 23px); line-height: 1.5; letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty;
}
.prose h2 {
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.2; letter-spacing: -0.03em; font-weight: 500;
  scroll-margin-top: 110px; text-wrap: balance;
}
.prose h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.025em; font-weight: 500; }
.prose p, .prose li { font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 10px; }
.prose li::marker { color: var(--accent); }
/* Links inside article copy. Pills keep their own styling, so they are excluded:
   a plain `.prose a:hover` outranks `.pill--accent:hover` and would turn the
   button's label dark on its dark hover background. */
.prose a:not(.pill) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(31, 60, 235, .4); }
.prose a:not(.pill):hover { color: var(--ink); text-decoration-color: currentColor; }
.prose em { font-style: italic; }
.prose strong { font-weight: 500; color: var(--ink); }

.prose .figure,
.prose .wp-block-image {
  position: relative; border-radius: var(--r-block); overflow: hidden; background: var(--placeholder); min-height: 320px;
}
.prose .figure img,
.prose .wp-block-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.steps, .prose .gso-steps { display: flex; flex-direction: column; gap: 14px; counter-reset: step; list-style: none; padding: 0; }
.step, .prose .gso-step {
  background: var(--tile); border-radius: var(--r-tile); padding: 24px 26px;
  display: flex; flex-direction: column; gap: 8px;
}
.step::before, .prose .gso-step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; color: var(--accent);
}
.prose .gso-steps .wp-block-group__inner-container,
.prose .gso-step .wp-block-group__inner-container { display: contents; }
.step__title, .prose .gso-step h3 { font-size: 17.5px; line-height: 1.35; letter-spacing: -0.025em; font-weight: 400; color: var(--ink); margin: 0; }
.step__body, .prose .gso-step p { font-size: 15px; line-height: 1.65; color: var(--muted-strong); margin: 0; }

.pullquote, .prose .wp-block-pullquote {
  border-radius: var(--r-block);
  padding: clamp(26px, 3.5vw, 44px);
  background: linear-gradient(135deg, #2B4BFF 0%, #1226B8 50%, #0A1440 100%);
  display: flex; flex-direction: column; gap: 16px;
  color: #FFFFFF; margin: 0; border: 0; text-align: left;
}
.pullquote blockquote, .prose .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.pullquote p, .prose .wp-block-pullquote p {
  font-size: clamp(19px, 2.2vw, 27px); line-height: 1.3; letter-spacing: -0.03em; color: #FFFFFF; text-wrap: pretty; margin: 0;
}
.prose .wp-block-pullquote::before {
  content: ""; width: 26px; height: 26px; flex: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7.5 A8.5 8.5 0 1 1 12 5'/%3E%3Cpath d='M9 2 L12 5 L9 8'/%3E%3C/svg%3E");
}
.prose .wp-block-pullquote cite { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); font-style: normal; }
.article__cta { margin-top: 6px; }
.article__back { padding: 0 clamp(8px, 2vw, 24px); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--gap);
  align-items: start;
}
.contact-panel { background: var(--white); border-radius: var(--r-panel); padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 18px; }
.contact-panel--details { gap: 26px; }
.contact-panel--form { gap: 24px; }
.detail { display: flex; flex-direction: column; gap: 7px; }
.detail__label { display: flex; align-items: center; gap: 9px; }
.detail__label .icon { color: var(--accent); }
.detail__value { font-size: 19px; letter-spacing: -0.025em; color: var(--ink); overflow-wrap: anywhere; font-style: normal; }
a.detail__value:hover { color: var(--accent); }

.form { display: flex; flex-direction: column; gap: 14px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-strong); }
.field__req { color: var(--accent); }
.field__input {
  width: 100%;
  font-size: 15px; line-height: 1.4;
  padding: 14px 16px;
  border-radius: var(--r-field);
  border: 0;
  background: var(--tile);
  color: var(--ink);
  outline: 1.5px solid transparent;
  outline-offset: 0;
  transition: background-color var(--t), outline-color var(--t);
  -webkit-appearance: none;
  appearance: none;
}
.field__input:focus { background: var(--tile-hover); }
.field__input:focus-visible { outline-color: var(--accent); }
textarea.field__input { resize: vertical; min-height: 140px; }
.field--error .field__input { background: var(--error-bg); outline-color: rgba(180, 35, 24, .5); }
.field__error { font-size: 13px; line-height: 1.4; color: var(--error); }
.field__error:empty { display: none; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: 13px; line-height: 1.55; color: var(--muted-strong); }
.form__alert { background: var(--error-bg); color: var(--error); border-radius: var(--r-field); padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.form__alert[hidden] { display: none; }
.form .pill { margin-top: 6px; }
.success {
  background: var(--tile); border-radius: var(--r-bar); padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.success[hidden] { display: none; }
.success__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: #FFFFFF; }
.success__title { font-size: 19px; letter-spacing: -0.03em; font-weight: 400; }
.success__text { font-size: 14.5px; line-height: 1.6; color: var(--muted-strong); }
.success__text a { overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.site-footer { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) 20px; }
.footer {
  background: var(--navy);
  border-radius: var(--r-panel);
  padding: clamp(32px, 4.5vw, 60px);
  display: flex; flex-direction: column; gap: 48px;
  color: #FFFFFF;
}
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 36px; }
.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer .logo { font-size: 30px; color: #FFFFFF; }
.footer .logo__o { color: var(--accent-light); }
.footer__desc { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .55); max-width: 260px; }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__heading { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .4); font-weight: 400; }
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.footer__list a, .footer__list span { font-size: 14px; color: rgba(255, 255, 255, .78); transition: color var(--t); overflow-wrap: anywhere; }
.footer__list a:hover { color: #FFFFFF; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__copy { font-size: 12.5px; color: rgba(255, 255, 255, .4); }

/* ---------- 404 ---------- */
.notfound-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Glass surfaces and the blue field behind them ----------
 * Panels are translucent and blur what is behind them, so the pale blue
 * gradients on the page show through. Every surface keeps a hairline edge,
 * which is what makes the material read as glass rather than as flat white.
 * Browsers without backdrop-filter fall back to near-opaque panels.
 */
:root {
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .74);
  --glass-tile: rgba(255, 255, 255, .46);
  --glass-recess: rgba(219, 229, 243, .55);
  --glass-edge: rgba(255, 255, 255, .58);
  --glass-edge-soft: rgba(255, 255, 255, .34);
  --glass-dark-edge: rgba(255, 255, 255, .10);
  --blur: saturate(170%) blur(22px);
  --blur-strong: saturate(180%) blur(30px);
}

/* The field itself: fixed, so panels blur a stable image while the page scrolls. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(72vw 58vh at 6% -10%, rgba(126, 165, 220, .62), transparent 62%),
    radial-gradient(64vw 52vh at 98% 2%, rgba(154, 188, 230, .56), transparent 64%),
    radial-gradient(84vw 62vh at 64% 48%, rgba(183, 206, 235, .48), transparent 66%),
    radial-gradient(88vw 68vh at 20% 106%, rgba(132, 168, 217, .55), transparent 64%),
    linear-gradient(180deg, #EFF4FB 0%, #E9EEF6 45%, #E6ECF4 100%);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .panel, .card, .post-card, .featured, .contact-panel, .article, .success,
  .statement-panel:not(.statement-panel--dark), .filter, .pill--soft {
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-edge);
  }
  .site-header__bar, .mobile-menu {
    background: var(--glass-strong);
    -webkit-backdrop-filter: var(--blur-strong);
    backdrop-filter: var(--blur-strong);
    border: 1px solid var(--glass-edge);
  }
  /* Inner surfaces sit on glass already, so they stay lighter and skip the blur. */
  .tile, .checklist li, .step, .prose .gso-step, .mobile-menu__foot {
    background: var(--glass-tile);
    border: 1px solid var(--glass-edge-soft);
  }
  /* Form fields read as recessed: a cooler tint with a light edge above it. */
  .field__input {
    background: var(--glass-recess);
    border: 1px solid rgba(255, 255, 255, .55);
  }
  .field__input:focus { background: rgba(255, 255, 255, .72); }
  .field__input::placeholder { color: var(--muted); }
  .media, .featured__media, .post-card__media, .hero__figure, .prose .figure, .prose .wp-block-image {
    border: 1px solid var(--glass-edge-soft);
  }
  /* Dark surfaces get the same treatment in reverse: a little of the page shows through. */
  .panel--navy, .footer, .statement-panel--dark {
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-dark-edge);
  }
  .panel--navy, .footer { background: rgba(6, 11, 31, .93); }
  .statement-panel--advisory { background: linear-gradient(140deg, rgba(14,35,96,.94) 0%, rgba(7,16,51,.95) 60%, rgba(4,8,26,.96) 100%); }
  .statement-panel--implementation { background: linear-gradient(140deg, rgba(20,44,114,.94) 0%, rgba(8,18,58,.95) 60%, rgba(4,8,26,.96) 100%); }
  .statement-panel--technology { background: linear-gradient(140deg, rgba(43,75,255,.92) 0%, rgba(16,32,106,.94) 58%, rgba(4,8,26,.96) 100%); }
  .stage { background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-dark-edge); }
  .cta { border: 1px solid rgba(255, 255, 255, .14); }
  .hero { border: 1px solid rgba(255, 255, 255, .12); }
  .pullquote, .prose .wp-block-pullquote { border: 1px solid rgba(255, 255, 255, .14); }

  /* Inverted cards keep the material, swapping the tint for navy. */
  .card:hover, .post-card:hover, .featured:hover, .xlink:hover {
    background: rgba(6, 11, 31, .92);
    border-color: var(--glass-dark-edge);
  }
  .filter[aria-pressed="true"], .pill--soft:hover {
    background: rgba(6, 11, 31, .92);
    border-color: var(--glass-dark-edge);
  }
  .xlink { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); }
}

/* ---------- Page shell width ---------- */
@media (min-width: 1024px) {
  .container, .site-footer {
    width: min(90%, 1440px);
    max-width: none;
    padding-inline: 0;
  }
  .site-header { padding-inline: 0; }
  .site-header__bar { width: min(90%, 1440px); max-width: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero--home { grid-template-columns: 1fr; align-items: start; }
  .hero__figure { min-height: 220px; order: 2; }
}
@media (max-width: 899px) {
  .js .nav { display: none; }
  .js .nav-toggle { display: inline-flex; }
  .site-header__bar { gap: 16px; padding: 12px 12px 12px 22px; }
}
@media (min-width: 900px) {
  .mobile-menu { display: none !important; }
}
@media (max-width: 640px) {
  :root {
    --r-panel: 20px;
    --r-card: 20px;
    --gutter: 12px;
    --pad-hero: 24px;
    --pad-card: 26px;
    --pad-post: 24px;
    --gap: 12px;
  }
  .container { padding-top: 12px; }
  .site-header { padding-top: 10px; }
  .site-header__bar { padding: 10px 10px 10px 18px; }
  .pill--header { padding: 10px 16px; font-size: 13px; }

  .hero { padding-bottom: 44px; }
  .hero--home { min-height: 0; gap: 28px; }
  .hero--service { min-height: 380px; gap: 40px; }
  .hero--insights, .hero--contact { min-height: 340px; }
  .hero--article { min-height: 380px; }
  .hero__title br { display: none; }
  .hero__title .dim::before { content: " "; }

  .media { min-height: 240px; }
  .media--band { min-height: 260px; }
  .media--contact { min-height: 240px; }
  .featured__media { min-height: 220px; }
  .prose .figure, .prose .wp-block-image { min-height: 220px; }
  .card { min-height: 0; }
  .post-card { min-height: 0; }
  .stage { padding: 24px; }
  .tile { min-height: 110px; padding: 20px; }
  .xlink { padding: 24px; }
  .checklist li { padding: 18px; }
  .step, .prose .gso-step { padding: 20px 22px; }
  .success { padding: 26px; }

  .footer { gap: 36px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .footer__brand, .footer__col--contact { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .pill--header { padding: 9px 13px; font-size: 12.5px; }
  .site-header__bar { gap: 10px; padding-left: 14px; }
  .logo { font-size: 24px; }
}

/* Touch devices: avoid sticky hover inversion after a tap. */
@media (hover: none) {
  .card:hover, .xlink:hover, .featured:hover, .post-card:hover { background: var(--glass, var(--white)); color: var(--ink); }
  .card:active, .xlink:active, .featured:active, .post-card:active { background: rgba(6, 11, 31, .92); color: #FFFFFF; }
}

@media print {
  .site-header, .site-footer, .cta, .article__cta, .filters, .load-more-wrap { display: none !important; }
  body { background: #FFFFFF; }
  .hero { color: var(--ink); background: none; min-height: 0 !important; padding: 0 0 20px; }
  .hero__media, .hero__scrim, .hero__streak { display: none; }
  .hero__title, .hero .post-meta, .hero .post-meta__info { color: var(--ink); }
  .article { padding: 0; }
}