/* ==========================================================================
   SecondGen Solutions  |  main.css
   Homepage prototype v1  |  October 2026
   Tokens follow the SGS Logo Brand Manual v1.0
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --navy: #0A1F44;
  --navy-950: #061430;
  --navy-900: #071735;
  --navy-800: #0E2654;
  --navy-700: #183466;
  --gold: #C9A227;
  --gold-hi: #DDB93E;
  --gold-soft: #E9D27E;
  --green: #216B40;
  --green-hi: #6CC08C;
  --blue: #0C63A0;
  --blue-hi: #63B4EC;
  --paper: #F5F5F3;
  --white: #FFFFFF;
  --ink: #2B2B2B;
  --ink-2: #4A515C;
  --rule: #D9D9D9;
  --rule-strong: #B7BEC8;
  --on-dark: #EEF2F8;
  --on-dark-2: #AFBCD1;
  --rule-dark: rgba(255, 255, 255, 0.14);
  --error: #B42318;

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  --h2: clamp(1.95rem, 1.25rem + 2.1vw, 3.05rem);
  --h1: clamp(2.15rem, 3.55vw, 3.35rem);

  /* Layout */
  --max: 86rem;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --section: clamp(4.75rem, 3rem + 6vw, 9rem);
  --header-h: 5.5rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* 4K and ultrawide: scale the whole rem-based system with the viewport so
   layouts keep their 1920px proportions on 2560, 3200 and 3840 wide screens. */
@media (min-width: 1921px) {
  html { font-size: calc(100vw / 120); }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--navy); }
section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.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: 1rem; top: -4rem; z-index: 200;
  padding: 0.75rem 1rem; background: var(--gold); color: var(--navy);
  font-weight: 700; text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); color: var(--on-dark); }
.section--deep { background: var(--navy-900); color: var(--on-dark); }

/* ---------- Type ---------- */
.h2 {
  font-family: var(--font-display);
  font-size: var(--h2);
  font-weight: 650;
  font-stretch: 100%;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}
.section--navy .h2, .section--deep .h2 { color: var(--white); }
.lead { font-size: var(--step-2); line-height: 1.5; color: var(--navy); font-weight: 450; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4.5rem);
}
.section-head .h2 { max-width: 18ch; }
.section-head__text { max-width: 36rem; color: var(--ink-2); font-size: var(--step-1); line-height: 1.6; }
@media (min-width: 960px) {
  .section-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 4rem; }
  .section-head__text { justify-self: end; }
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem;
  padding: 1rem 1.45rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 620; letter-spacing: 0.005em;
  line-height: 1.2; text-decoration: none;
  border: 0; border-radius: 2px;
  transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease-out);
}
.btn .icon { transition: transform 0.35s var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--gold-hi); }
.btn--sm { padding: 0.72rem 1.05rem; font-size: 0.9375rem; }
.btn--block { width: 100%; }

.link-quiet {
  color: var(--on-dark); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px; transition: background-size 0.35s var(--ease-out), color 0.25s;
}
.link-quiet:hover { color: var(--gold-soft); background-size: 40% 1px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 620; color: var(--navy);
  text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 0.3rem;
}
.link-arrow .icon { transition: transform 0.35s var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(5px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  color: var(--white);
  transition: background-color 0.4s, box-shadow 0.4s;
}
.site-header.is-scrolled,
.site-header.is-menu-open {
  background: rgba(6, 20, 48, 0.94);
  box-shadow: 0 1px 0 var(--rule-dark);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header.is-scrolled { background: rgba(6, 20, 48, 0.93); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); }
}
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.site-header__logo { display: block; flex: none; }
.site-header__logo img { height: 2.65rem; width: auto; }
@media (min-width: 1080px) { .site-header__logo img { height: 3.45rem; } }

.primary-nav { display: none; }
@media (min-width: 1080px) {
  .primary-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.5rem); }
}
.primary-nav__list { display: flex; align-items: center; gap: clamp(0.25rem, 1vw, 1rem); }
.primary-nav__item { position: relative; }
.primary-nav__link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 560;
  color: var(--on-dark); text-decoration: none;
  background: none; border: 0;
  position: relative;
}
.primary-nav__link::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.3rem; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.primary-nav__link:hover::after,
.primary-nav__trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.primary-nav__link:hover { color: var(--white); }
.icon--chev { width: 1rem; height: 1rem; transition: transform 0.3s var(--ease-out); }
.primary-nav__trigger[aria-expanded="true"] .icon--chev { transform: rotate(180deg); }

/* Mega menu */
.mega {
  position: absolute; top: calc(100% + 1.1rem); left: -1rem;
  width: min(44rem, 80vw);
  background: var(--navy-800);
  border-top: 3px solid var(--gold);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.25s, transform 0.35s var(--ease-out);
}
.mega.is-open { opacity: 1; transform: none; }
.mega::before { content: ""; position: absolute; inset: -1.2rem 0 100% 0; }
.mega__inner { display: grid; grid-template-columns: 1fr 1fr; }
.mega__col { padding: 1.75rem 1.75rem 1.5rem; }
.mega__col + .mega__col { border-left: 1px solid var(--rule-dark); }
.mega__pillar { display: block; text-decoration: none; padding-bottom: 1rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--rule-dark); }
.mega__pillar-name {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 650; color: var(--white);
}
.mega__pillar-name::before { content: ""; width: 0.6rem; height: 0.6rem; flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.mega__col--hc .mega__pillar-name::before { background: var(--green-hi); }
.mega__col--fm .mega__pillar-name::before { background: var(--blue-hi); }
.mega__pillar-desc { display: block; margin-top: 0.4rem; font-size: 0.9375rem; line-height: 1.5; color: var(--on-dark-2); }
.mega__pillar:hover .mega__pillar-name { color: var(--gold-soft); }
.mega__subs li a {
  display: block; padding: 0.5rem 0; color: var(--on-dark); text-decoration: none; font-weight: 500;
  transition: color 0.2s, transform 0.3s var(--ease-out);
}
.mega__subs li a:hover { color: var(--gold-soft); transform: translateX(4px); }

/* Burger */
.burger {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0 0.5rem 0.5rem; background: none; border: 0; color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
}
@media (min-width: 1080px) { .burger { display: none; } }
.burger__box { position: relative; width: 1.75rem; height: 1.125rem; }
.burger__line {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 1px;
  transition: transform 0.45s var(--ease-out), opacity 0.25s, top 0.3s var(--ease-out);
}
.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: calc(50% - 1px); width: 70%; left: 30%; }
.burger__line:nth-child(3) { top: calc(100% - 2px); }
.burger[aria-expanded="true"] .burger__line:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--navy-950);
  padding-top: var(--header-h);
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease-io);
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); }
.mobile-menu__panel { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; padding: 1.5rem var(--gutter) 2.5rem; }
.mobile-menu__list > li { border-bottom: 1px solid var(--rule-dark); }
.mobile-menu__item { opacity: 0; transform: translateY(14px); transition: opacity 0.4s, transform 0.6s var(--ease-out); }
.mobile-menu.is-open .mobile-menu__item { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__item:nth-child(1) { transition-delay: 0.18s; }
.mobile-menu.is-open .mobile-menu__item:nth-child(2) { transition-delay: 0.24s; }
.mobile-menu.is-open .mobile-menu__item:nth-child(3) { transition-delay: 0.3s; }
.mobile-menu__link {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1.1rem 0; background: none; border: 0; text-align: left;
  font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 600; letter-spacing: -0.01em;
  color: var(--white); text-decoration: none;
}
.mobile-menu__toggle .icon { width: 1.75rem; height: 1.75rem; transition: transform 0.35s var(--ease-out); }
.mobile-menu__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.mobile-menu__sub { padding: 0 0 1.25rem; display: grid; gap: 1.25rem; }
.mobile-menu__group { padding-left: 1rem; border-left: 3px solid; }
.mobile-menu__group--hc { border-color: var(--green-hi); }
.mobile-menu__group--fm { border-color: var(--blue-hi); }
.mobile-menu__pillar { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 620; color: var(--white); text-decoration: none; padding: 0.25rem 0; }
.mobile-menu__group ul { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.mobile-menu__group li a { display: block; padding: 0.45rem 0; color: var(--on-dark-2); text-decoration: none; font-size: 1.0625rem; }
.mobile-menu__group li a:hover, .mobile-menu__pillar:hover { color: var(--gold-soft); }
.mobile-menu__foot { display: grid; gap: 1.5rem; opacity: 0; transition: opacity 0.5s 0.35s; }
.mobile-menu.is-open .mobile-menu__foot { opacity: 1; }
.mobile-menu__actions { display: grid; gap: 0.75rem; }
.btn--call { gap: 0.6rem; color: var(--white); border: 1px solid var(--rule-dark); background: transparent; }
.btn--call .icon { color: var(--gold); }
.btn--call:hover { border-color: var(--gold); color: var(--white); }
.btn--call:hover .icon { transform: none; }
/* Header call button: phone icon leads, number set in tabular figures */
.site-header__call { gap: 0.55rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-header__call .icon { width: 1.05em; height: 1.05em; }
.site-header__call:hover .icon { transform: rotate(-12deg); }
.mobile-menu__contact { color: var(--on-dark-2); font-size: 0.9375rem; line-height: 1.7; }
.mobile-menu__contact a { color: var(--white); }
html.menu-open { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding-top: var(--header-h);
  background: var(--navy); color: var(--on-dark);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 60% at 74% 46%, rgba(12, 99, 160, 0.38), rgba(12, 99, 160, 0) 70%),
              linear-gradient(180deg, rgba(6, 20, 48, 0) 60%, rgba(6, 20, 48, 0.65) 100%);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: url("../img/hex-lattice.svg") 0 0 / 2.8rem auto repeat;
  opacity: 0.05;
  -webkit-mask-image: radial-gradient(60% 70% at 76% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 76% 45%, #000 0%, transparent 75%);
}
.hero__inner {
  display: grid; align-items: center;
  gap: clamp(2.5rem, 5vw, 6rem);
  padding-block: clamp(2.5rem, 6vh, 5rem) clamp(2rem, 4vh, 3.5rem);
}
@media (min-width: 1080px) {
  .hero__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: 680;
  font-stretch: 100%;
  line-height: 1.04;
  letter-spacing: -0.024em;
  color: var(--white);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .line__in { display: block; }
.hero__lead {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  max-width: 37rem;
  font-size: var(--step-1); line-height: 1.6; color: var(--on-dark-2);
}
.hero__actions { margin-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

/* The SGS hexagon, split into its two halves */
.hexhero {
  position: relative;
  width: min(100%, 34rem);
  aspect-ratio: 232 / 271;
  justify-self: center;
  margin-bottom: 3.5rem;
}
@media (min-width: 1080px) { .hexhero { justify-self: end; width: min(100%, 36rem); margin-bottom: 0; } }
@media (max-width: 1079px) { .hexhero { width: min(84vw, 30rem); } }
.hexhero__half { position: absolute; top: 0; height: 100%; display: block; text-decoration: none; }
.hexhero__half:focus-visible { outline: none; }
.hexhero__half picture { position: absolute; inset: 0; overflow: hidden; }
.hexhero__half img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.06) brightness(0.94); transition: transform 1.2s var(--ease-out); }
.hexhero__half--hc { left: 0; width: 50%; }
.hexhero__half--hc picture { clip-path: polygon(93.97% 2.45%, 6.47% 25.80%, 7.84% 75.04%, 87.84% 93.84%, 87.84% 81.92%, 93.97% 81.92%); }
.hexhero__half--fm { left: 45.69%; width: 54.31%; }
.hexhero__half--fm picture { clip-path: polygon(10.24% 2.11%, 93.57% 25.86%, 94.37% 74.30%, 11.65% 97.38%, 4.05% 97.38%, 4.05% 85.46%, 10.24% 85.46%); }
.hexhero__half:hover img, .hexhero__half:focus-visible img { transform: scale(1.045); }

.hexhero__label {
  position: absolute; top: 84%; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.85rem 0.55rem 0.75rem;
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 620; color: var(--white); white-space: nowrap;
  background: rgba(6, 20, 48, 0.72);
  border: 1px solid var(--rule-dark);
  border-left: 3px solid;
  transition: background-color 0.3s, border-color 0.3s;
}
.hexhero__label .icon { width: 1.05rem; height: 1.05rem; transition: transform 0.35s var(--ease-out); }
.hexhero__half--hc .hexhero__label { left: -4%; border-left-color: var(--green-hi); }
.hexhero__half--fm .hexhero__label { right: -4%; border-left-color: var(--blue-hi); }
.hexhero__half:hover .hexhero__label, .hexhero__half:focus-visible .hexhero__label { background: var(--navy-800); }
.hexhero__half:hover .hexhero__label .icon, .hexhero__half:focus-visible .hexhero__label .icon { transform: translateX(4px); }
.hexhero__half:focus-visible .hexhero__label { outline: 3px solid var(--gold-soft); outline-offset: 3px; }

.hexhero__art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.shade { fill: var(--navy); opacity: 0.8; transition: opacity 0.6s var(--ease-out); }
.tint { opacity: 0.2; transition: opacity 0.6s var(--ease-out); }
.tint--hc { fill: var(--green); }
.tint--fm { fill: var(--blue); }
.hexhero:has(.hexhero__half--hc:hover, .hexhero__half--hc:focus-visible) .shade--hc { opacity: 0.55; }
.hexhero:has(.hexhero__half--hc:hover, .hexhero__half--hc:focus-visible) .tint--hc { opacity: 0.12; }
.hexhero:has(.hexhero__half--fm:hover, .hexhero__half--fm:focus-visible) .shade--fm { opacity: 0.55; }
.hexhero:has(.hexhero__half--fm:hover, .hexhero__half--fm:focus-visible) .tint--fm { opacity: 0.12; }
.hexhero__outline path { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.hexhero__outline .band { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.25; }
.hexhero__circuit .trace { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 1; }
.hexhero__circuit .pulse { fill: none; stroke: #FFF4CC; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0.07 1.2; stroke-dashoffset: 0.07; opacity: 0; }
.hexhero__circuit .node circle { fill: var(--gold); }
.hexhero__circuit .node .node__hole { fill: var(--navy); }
.hexhero__circuit .node { transform-box: fill-box; transform-origin: center; }

/* Certifications strip */
.hero__certs { border-top: 1px solid var(--rule-dark); }
.certs { display: grid; gap: 0; }
.cert {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.5rem; align-items: center; align-content: center;
  padding-block: 1.25rem;
}
.cert + .cert { border-top: 1px solid var(--rule-dark); }
/* Official program marks in their white versions. The DC CBE guide asks for
   0.25in of clear space, which the 1.5rem gap and cell padding provide. */
.cert__logo { grid-row: span 2; display: block; width: auto; height: 3.5rem; }
.cert--swam .cert__logo { height: 2.75rem; }
@media (max-width: 759px) {
  /* Stacked on phones: a fixed logo slot keeps the three labels aligned */
  .cert { grid-template-columns: 7.25rem 1fr; column-gap: 1.25rem; }
}
.cert__name { align-self: end; font-family: var(--font-display); font-weight: 640; color: var(--white); line-height: 1.3; }
.cert__desc { align-self: start; margin-top: 0.15rem; font-size: var(--step--1); color: var(--on-dark-2); line-height: 1.4; }
@media (min-width: 760px) {
  .certs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cert { padding-block: 1.6rem; }
  .cert__logo { height: 4.25rem; }
  .cert--swam .cert__logo { height: 3.3rem; }
  .cert + .cert { border-top: 0; border-left: 1px solid var(--rule-dark); padding-left: clamp(1rem, 3vw, 2.5rem); }
}

/* ==========================================================================
   Intro
   ========================================================================== */
.intro__grid { display: grid; gap: 2rem; }
.intro__title { max-width: 16ch; }
.intro__body { display: grid; gap: 1.4rem; max-width: 40rem; }
.intro__body p:not(.lead) { color: var(--ink-2); }
.intro__body .link-arrow { justify-self: start; margin-top: 0.5rem; }
@media (min-width: 960px) {
  .intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 7vw, 8rem); align-items: start; }
}

/* ==========================================================================
   Services
   ========================================================================== */
.services { background: var(--paper); }
.practices { display: grid; gap: clamp(1.5rem, 2.5vw, 2.5rem); }
@media (min-width: 960px) { .practices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.practice { background: var(--white); display: flex; flex-direction: column; border-top: 4px solid; }
.practice--hc { border-color: var(--green); }
.practice--fm { border-color: var(--blue); }
.practice__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.practice__media img { width: 100%; height: 100%; object-fit: cover; }
.practice__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 31, 68, 0) 55%, rgba(10, 31, 68, 0.35));
}
.practice__body { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); display: flex; flex-direction: column; gap: 1.25rem; flex: 1; }
.practice__title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 660; letter-spacing: -0.015em; line-height: 1.15; }
.practice__title a { color: var(--navy); text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat; transition: background-size 0.4s var(--ease-out); }
.practice__title a:hover { background-size: 100% 2px; }
.practice__text { color: var(--ink-2); max-width: 34rem; }

.subs { border-top: 1px solid var(--rule); margin-top: 0.25rem; }
.subs li { border-bottom: 1px solid var(--rule); }
.sub {
  display: grid; grid-template-columns: 1fr auto; column-gap: 1rem;
  padding: 1.05rem 0.25rem 1.1rem 0; text-decoration: none;
  transition: padding 0.35s var(--ease-out), background-color 0.3s;
}
.sub__name { font-family: var(--font-display); font-weight: 640; font-size: 1.1rem; color: var(--navy); line-height: 1.35; }
.sub__desc { grid-column: 1; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; margin-top: 0.15rem; }
.sub__icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--navy); transition: transform 0.35s var(--ease-out), color 0.3s; }
.practice--hc .sub:hover { padding-left: 0.75rem; background: linear-gradient(90deg, rgba(33, 107, 64, 0.07), rgba(33, 107, 64, 0)); }
.practice--hc .sub:hover .sub__icon { color: var(--green); transform: translateX(4px); }

.offers { display: grid; gap: 0.6rem 1.5rem; padding: 0.25rem 0 0; }
@media (min-width: 560px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.offers li { position: relative; padding-left: 1.25rem; font-size: 0.9875rem; color: var(--ink); line-height: 1.45; }
.offers li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 0.55rem; height: 0.62rem; background: var(--blue);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.feature-link {
  margin-top: auto;
  display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 1.1rem; align-items: center;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border: 1px solid var(--rule); text-decoration: none;
  transition: border-color 0.3s, background-color 0.3s;
}
.feature-link__media { display: block; aspect-ratio: 5 / 4; overflow: hidden; }
.feature-link__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.feature-link__body { display: grid; }
.feature-link:hover { border-color: var(--blue); background: rgba(12, 99, 160, 0.04); }
.feature-link:hover img { transform: scale(1.06); }
.feature-link:hover .sub__icon { color: var(--blue); transform: translateX(4px); }
@media (max-width: 479px) {
  .feature-link { grid-template-columns: minmax(0, 1fr) auto; row-gap: 1rem; padding: 0.75rem 0.9rem 1.1rem 0.75rem; }
  .feature-link__media { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
  .feature-link .sub__icon { grid-row: 2; align-self: end; margin-bottom: 0.2rem; }
}

/* ==========================================================================
   Why SGS
   ========================================================================== */
.why__grid { display: grid; gap: 3rem; }
.why__head .h2 { max-width: 15ch; }
.why__text { margin-top: 1.5rem; max-width: 30rem; color: var(--on-dark-2); font-size: var(--step-1); }
@media (min-width: 960px) {
  .why__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(3rem, 7vw, 8rem); align-items: start; }
  .why__head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}
.why__item {
  position: relative;
  display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1.25rem;
  padding-block: 1.75rem;
}
.why__item::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule-dark);
  transform-origin: left;
}
.why__item:last-child { border-bottom: 1px solid var(--rule-dark); }
.why__icon { grid-row: span 2; width: 1.9rem; height: 1.9rem; color: var(--gold); margin-top: 0.2rem; }
.why__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 640; color: var(--white); line-height: 1.25; }
.why__item p { margin-top: 0.45rem; color: var(--on-dark-2); max-width: 36rem; }

/* ==========================================================================
   Leadership
   ========================================================================== */
.leaders__list { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); }
@media (min-width: 1080px) { .leaders__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 4rem); } }
.leader { display: flex; flex-direction: column; }
.leader__portrait {
  position: relative; width: 7.5rem; aspect-ratio: 232 / 271; margin-bottom: 1.75rem;
  clip-path: polygon(50% 0, 100% 25.5%, 100% 74.5%, 50% 100%, 0 74.5%, 0 25.5%);
  background: linear-gradient(160deg, var(--navy-700), var(--navy) 70%);
  display: grid; place-items: center;
}
.leader__portrait::after {
  content: ""; position: absolute; inset: 0;
  background: url("../img/hex-lattice.svg") 50% 50% / 1.6rem auto repeat; opacity: 0.08;
}
.leader__portrait span { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; font-stretch: 112%; color: var(--white); letter-spacing: 0.02em; }
.leader__name { font-family: var(--font-display); font-size: var(--step-3); font-weight: 650; color: var(--navy); letter-spacing: -0.015em; line-height: 1.15; }
.leader__role { margin-top: 0.35rem; font-weight: 600; color: var(--green); font-size: 0.9875rem; }
.leader__bio { margin-top: 1rem; color: var(--ink-2); }
.leader__facts { margin-top: auto; padding-top: 1.5rem; display: grid; gap: 0; }
.leader__facts div { display: grid; grid-template-columns: 6.25rem 1fr; gap: 1rem; align-items: baseline; padding-block: 0.8rem; border-top: 1px solid var(--rule-strong); }
.leader__facts dt { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.1; }
.leader__facts dd { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.45; }
.leaders__more { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
/* Side by side, the cards share one set of rows, so names, roles, bios and each
   fact rule line up across the columns whatever the length of the text */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1080px) {
    .leaders__list { row-gap: 0; }
    .leaders__list > .leader { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
    .leaders__list > .leader > .leader__facts { grid-row: span 2; grid-template-rows: subgrid; margin-top: 0; }
  }
}

/* ==========================================================================
   Region
   ========================================================================== */
.region { background: var(--white); }
.region__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .region__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 7rem); } }
.region__copy .h2 { max-width: 16ch; }
.region__text { margin-top: 1.5rem; color: var(--ink-2); font-size: var(--step-1); max-width: 34rem; }
.region__sub { margin-top: 2.5rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; color: var(--navy); }
.region__list { margin-top: 0.75rem; border-top: 1px solid var(--rule); }
.region__list li {
  display: flex; align-items: center; gap: 0.85rem;
  padding-block: 0.85rem; border-bottom: 1px solid var(--rule);
  font-weight: 500; color: var(--ink);
}
.region__list li::before {
  content: ""; width: 0.6rem; height: 0.7rem; flex: none; background: var(--gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.region__map { margin: 0; }
.region__map > svg { width: 100%; height: auto; overflow: visible; }
.map__grid path { fill: none; stroke: var(--navy); stroke-opacity: 0.08; stroke-width: 1.5; }
.map__traces path { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1; }
.map__node circle { fill: var(--navy); }
.map__node .map__hole { fill: var(--white); }
.map__node--hq circle { fill: var(--gold); }
.map__node--hq .map__hole { fill: var(--navy); }
.map__node { transform-box: fill-box; transform-origin: center; }
.map__labels text { font-family: var(--font-body); font-size: 17px; font-weight: 600; fill: var(--navy); }
.map__labels .map__hq { font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.map__labels .map__hq-sub { font-size: 15px; font-weight: 500; fill: var(--ink-2); }
@media (max-width: 640px) {
  .map__labels text { font-size: 25px; }
  .map__labels .map__hq { font-size: 29px; }
  .map__labels .map__hq-sub { font-size: 22px; }
}
/* Live connections: data flows out along each trace, a pulse travels out and
   back, and each office answers with a ring when the pulse arrives */
.map__flows path { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1.5 15; animation: map-flow 1.15s linear infinite; }
.map__pulse { fill: var(--gold); filter: drop-shadow(0 0 5px rgba(201, 162, 39, 0.85)); }
.map__pulse--back { fill: var(--blue-hi); filter: drop-shadow(0 0 4px rgba(99, 180, 236, 0.9)); }
.map__ring { fill: none; stroke: var(--blue); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: map-ring 2.85s var(--e-out) infinite; }
.map__ring--pa { animation-delay: 2.35s; }
.map__ring--md { animation-delay: 3.3s; }
.map__ring--va { animation-delay: 4.25s; }
.map__ring--hq { stroke: var(--gold); animation-duration: 0.95s; animation-delay: 0s; animation-name: map-ring-hq; }
@keyframes map-flow { to { stroke-dashoffset: -16.5; } }
@keyframes map-ring { 0% { opacity: 0.85; transform: scale(1); } 45% { opacity: 0; transform: scale(2.6); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes map-ring-hq { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
.js .map__flows, .js .map__pulses, .js .map__rings { opacity: 0; transition: opacity 0.8s; }
.js .is-in .map__flows, .js .is-in .map__pulses, .js .is-in .map__rings { opacity: 1; transition-delay: 1.9s; }
@media (prefers-reduced-motion: reduce) {
  .map__pulses, .map__rings { display: none; }
  .map__flows path { animation: none; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact__grid { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .contact__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(3rem, 6vw, 7rem); align-items: start; } }
.contact__copy .h2 { max-width: 14ch; }
.contact__text { margin-top: 1.5rem; color: var(--on-dark-2); font-size: var(--step-1); max-width: 30rem; }
.contact__details { margin-top: 2.25rem; display: grid; gap: 1.1rem; }
.contact__details li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.9rem; align-items: start; color: var(--on-dark); }
.contact__details .icon { color: var(--gold); margin-top: 0.2rem; }
.contact__details a { color: var(--white); text-decoration-color: var(--gold); text-underline-offset: 4px; }

.contact__form-wrap {
  background: var(--white); color: var(--ink);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  clip-path: polygon(0 0, calc(100% - 1.75rem) 0, 100% 1.75rem, 100% 100%, 0 100%);
}
.lead-form__title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 650; color: var(--navy); letter-spacing: -0.015em; }
.lead-form__title { margin-bottom: 0.5rem; }
.field-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { position: relative; margin-top: 1rem; display: grid; gap: 0.4rem; align-content: start; }
/* Field names sit inside the fields as placeholders; the labels stay for screen readers */
.field input::placeholder, .field textarea::placeholder { color: #69707A; opacity: 1; }
.field select:invalid { color: #69707A; }
.field select option { color: var(--ink); }
.field label { font-weight: 600; font-size: 0.9375rem; color: var(--navy); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3.1rem; padding: 0.75rem 0.9rem;
  background: var(--white); border: 1px solid var(--rule-strong); border-radius: 2px;
  font-size: 1rem; line-height: 1.4; color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--navy-700); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.5); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__error { font-size: 0.875rem; color: var(--error); font-weight: 500; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select .icon { position: absolute; right: 0.9rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); pointer-events: none; color: var(--navy); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lead-form__actions { margin-top: 1.75rem; display: grid; gap: 0.85rem; }
.lead-form__status {
  margin-top: 1.25rem; padding: 1rem 1.1rem;
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem;
  border-left: 3px solid var(--green); background: rgba(33, 107, 64, 0.07); color: var(--ink);
}
.lead-form__status .icon { color: var(--green); }
.lead-form__status strong { color: var(--navy); }
.lead-form__status.is-error { border-left-color: var(--error); background: rgba(180, 35, 24, 0.06); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy-950); color: var(--on-dark-2); font-size: 0.9375rem; }
.site-footer__top {
  display: grid; gap: 3rem;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(2.5rem, 2rem + 2vw, 4rem);
}
/* The four link columns are sized to their content and spread evenly, so the
   space between each column reads the same */
.site-footer__cols { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 479px) { .site-footer__cols { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1080px) {
  .site-footer__top { grid-template-columns: auto minmax(0, 1fr); gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .site-footer__cols { display: flex; justify-content: space-between; gap: 2.5rem; }
}
.site-footer__brand img { height: 4.25rem; width: auto; }
@media (min-width: 1080px) { .site-footer__brand img { height: 5.25rem; } }
.site-footer__brand p { margin-top: 1.5rem; max-width: 20rem; line-height: 1.6; }
.site-footer__head { font-family: var(--font-display); font-size: 1rem; font-weight: 650; color: var(--white); margin-bottom: 1.1rem; }
.site-footer__col ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.site-footer__col li.indent { padding-left: 0.9rem; position: relative; }
.site-footer__col li.indent::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.45rem; height: 1px; background: var(--on-dark-2); opacity: 0.6; }
.site-footer a { color: var(--on-dark); text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: var(--gold-soft); }
.site-footer address { font-style: normal; line-height: 1.6; }
.site-footer__contact { gap: 0.9rem !important; }
.site-footer__contact li { display: grid; grid-template-columns: 1.1rem auto; column-gap: 0.75rem; align-items: start; }
.site-footer__contact .icon { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; color: var(--gold); }
.site-footer__certs { grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 1.1rem 1.25rem !important; }
.site-footer__certs img { display: block; width: auto; height: 3.4rem; }
.site-footer__cert--wide { grid-column: 1 / -1; }
.site-footer__cert--wide img { height: 2.9rem; }
.site-footer__bottom { border-top: 1px solid var(--rule-dark); padding-block: 1.5rem 2rem; font-size: 0.875rem; }

/* ==========================================================================
   Motion  (only when JS is running; content stays visible without it)
   ========================================================================== */
.js .hero__title .line__in { transform: translateY(108%); }
.js .hero__lead, .js .hero__actions, .js .hero__certs { opacity: 0; transform: translateY(14px); }
.js .hexhero__half picture { opacity: 0; transform: scale(1.06); }
.js .hexhero__label { opacity: 0; transform: translateY(8px); }
.js .shade { opacity: 0.96; }
.js .hexhero__outline path { stroke-dashoffset: 1; }
.js .hexhero__circuit .trace { stroke-dashoffset: 1; }
.js .hexhero__circuit .node { transform: scale(0); }

.is-loaded .hero__title .line__in { transform: none; transition: transform 1.15s var(--ease-out); }
.is-loaded .hero__title .line:nth-child(2) .line__in { transition-delay: 0.12s; }
.is-loaded .hero__title .line:nth-child(3) .line__in { transition-delay: 0.24s; }
.is-loaded .hero__lead { opacity: 1; transform: none; transition: opacity 0.9s 0.55s, transform 1s 0.55s var(--ease-out); }
.is-loaded .hero__actions { opacity: 1; transform: none; transition: opacity 0.9s 0.7s, transform 1s 0.7s var(--ease-out); }
.is-loaded .hero__certs { opacity: 1; transform: none; transition: opacity 1s 1.3s, transform 1.1s 1.3s var(--ease-out); }
.is-loaded .hexhero__half picture { opacity: 1; transform: none; transition: opacity 1.2s 0.35s, transform 1.8s 0.35s var(--ease-out); }
.is-loaded .hexhero__half--fm picture { transition-delay: 0.5s; }
.is-loaded .shade { opacity: 0.8; transition: opacity 1.4s 0.6s var(--ease-out); }
.is-loaded .hexhero__outline path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s 0.15s var(--ease-io); }
.is-loaded .hexhero__circuit .trace { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-io); }
.is-loaded .hexhero__circuit .trace:nth-child(1) { transition-delay: 1.15s; }
.is-loaded .hexhero__circuit .trace:nth-child(2) { transition-delay: 1.3s; }
.is-loaded .hexhero__circuit .trace:nth-child(3) { transition-delay: 1.45s; }
.is-loaded .hexhero__circuit .node { transform: none; transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.is-loaded .hexhero__circuit .node:nth-of-type(1) { transition-delay: 1s; }
.is-loaded .hexhero__circuit .node:nth-of-type(2) { transition-delay: 1.15s; }
.is-loaded .hexhero__circuit .node:nth-of-type(3) { transition-delay: 1.3s; }
.is-loaded .hexhero__label { opacity: 1; transform: none; transition: opacity 0.8s 1.7s, transform 0.9s 1.7s var(--ease-out), background-color 0.3s; }
.hexhero.is-live .pulse { animation: sgs-pulse 5.6s var(--ease-io) infinite; }
.hexhero.is-live .pulse:nth-of-type(5) { animation-delay: 0.9s; }
.hexhero.is-live .pulse:nth-of-type(6) { animation-delay: 1.8s; }
.hexhero.is-paused .pulse { animation-play-state: paused; }
@keyframes sgs-pulse {
  0% { stroke-dashoffset: 0.07; opacity: 0; }
  4% { opacity: 1; }
  38% { stroke-dashoffset: -1; opacity: 1; }
  42%, 100% { stroke-dashoffset: -1; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .hexhero .pulse { display: none; }
}

@media print {
  .site-header, .mobile-menu, .hexhero, .lead-form { display: none !important; }
  .hero { min-height: 0; background: none; color: #000; padding-top: 0; }
  .hero__title { color: #000; }
}


/* ==========================================================================
   Interior pages  |  v1.1
   ========================================================================== */
.section--white { background: var(--white); }
.section--tight { padding-block: clamp(3.5rem, 2.5rem + 3vw, 6rem); }
.primary-nav__link[aria-current="page"]::after,
.primary-nav__trigger.is-current::after { transform: scaleX(1); }
.primary-nav__link[aria-current="page"] { color: var(--white); }
.mega a[aria-current="page"], .mega a[aria-current="page"] .mega__pillar-name { color: var(--gold-soft); }
.mobile-menu a[aria-current="page"] { color: var(--gold-soft); }

/* ---------- Page hero ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: var(--header-h);
  background: var(--navy); color: var(--on-dark);
}
.page-hero__inner {
  display: grid; align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6.5rem) clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
}
@media (min-width: 1080px) {
  .page-hero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
}
.page-hero__title { font-size: clamp(2.1rem, 3.4vw, 3.3rem); }
.page-hero .hero__lead { max-width: 40rem; }
.page-hero .hexhero { width: min(100%, 23rem); margin: 0; justify-self: end; }
@media (max-width: 1079px) {
  .page-hero .hexhero { width: min(58vw, 16rem); justify-self: start; }
}
.page-hero--compact .page-hero__inner { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.page-hero--compact::after {
  content: ""; position: absolute; right: -6rem; top: 50%; z-index: -1;
  width: min(40rem, 70vw); aspect-ratio: 1; transform: translateY(-45%);
  background: url("../img/hex-lattice.svg") 0 0 / 3rem auto repeat; opacity: 0.06;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
  mask-image: radial-gradient(closest-side, #000, transparent);
}

/* Interior hexagon: one half lit, the other drawn as a quiet outline */
.hexhero--page .hexhero__half { pointer-events: none; }
/* Service pages light both halves; both carry the page's practice colour */
.page-hero--hc .tint--fm { fill: var(--green); }
.page-hero--fm .tint--hc { fill: var(--blue); }
.ghost { display: none; fill: var(--navy-800); opacity: 0.75; }
.is-ghost-hc .ghost--hc, .is-ghost-fm .ghost--fm { display: block; }
.is-ghost-hc .shade--hc, .is-ghost-hc .tint--hc, .is-ghost-fm .shade--fm, .is-ghost-fm .tint--fm { display: none; }
.is-ghost-hc .hexhero__outline .band:nth-child(3), .is-ghost-fm .hexhero__outline .band:nth-child(4),
.is-ghost-fm .hexhero__outline .band:nth-child(5) { stroke: rgba(255, 255, 255, 0.4); }


/* ---------- Intro with facts ---------- */
.p-intro__grid { display: grid; gap: 2.75rem; }
@media (min-width: 960px) {
  .p-intro__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .p-intro__aside { padding-top: 0.5rem; }
}
.p-intro .h2 { max-width: 20ch; }
.p-intro__body { margin-top: 1.75rem; display: grid; gap: 1.25rem; max-width: 44rem; }
.p-intro__body p:not(.lead) { color: var(--ink-2); }
.callout { border-left: 3px solid var(--gold); padding: 0.2rem 0 0.2rem 1.1rem; font-weight: 600; color: var(--navy); }
.facts { display: grid; border-top: 1px solid var(--rule-strong); }
.fact { display: grid; grid-template-columns: 7.25rem 1fr; gap: 1.25rem; align-items: baseline; padding-block: 1.3rem; border-bottom: 1px solid var(--rule-strong); }
.fact dt { font-family: var(--font-display); font-size: clamp(1.75rem, 1.35rem + 1vw, 2.35rem); font-weight: 700; color: var(--navy); letter-spacing: -0.025em; line-height: 1; }
.fact dd { margin: 0; color: var(--ink-2); font-size: 0.9875rem; line-height: 1.5; }

/* ---------- Service cards ---------- */
.svc-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
@media (min-width: 760px) { .svc-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .svc-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-card { position: relative; display: flex; flex-direction: column; background: var(--white); border-top: 4px solid var(--green); transition: box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.svc-card--fm { border-top-color: var(--blue); }
.svc-card:hover { box-shadow: 0 28px 50px -30px rgba(10, 31, 68, 0.45); transform: translateY(-4px); }
.svc-card:has(a:focus-visible) { outline: 3px solid var(--gold); outline-offset: 4px; }
.svc-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.svc-card:hover .svc-card__media img { transform: scale(1.05); }
.svc-card__body { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); }
.svc-card__title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 660; letter-spacing: -0.015em; line-height: 1.15; }
.svc-card__title a { color: var(--navy); text-decoration: none; }
.svc-card__title a:focus-visible { outline: none; }
.svc-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc-card__desc { color: var(--ink-2); }
.svc-card__points { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.svc-card__points li, .feature__points li { position: relative; padding-left: 1.2rem; font-size: 0.9375rem; line-height: 1.45; }
.svc-card__points li::before, .feature__points li::before, .checklist li::before, .value__name::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 0.55rem; height: 0.62rem; background: var(--green);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.svc-card--fm .svc-card__points li::before { background: var(--blue); }
.svc-card__more {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.55rem;
  padding-bottom: 0.3rem; border-bottom: 2px solid var(--gold);
  font-family: var(--font-display); font-weight: 620; color: var(--navy);
}
.svc-card__more .icon { transition: transform 0.35s var(--ease-out); }
.svc-card:hover .svc-card__more .icon { transform: translateX(5px); }

/* ---------- Offer grid ---------- */
.offer-grid { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule-strong); }
@media (min-width: 760px) { .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); } }
@media (min-width: 1080px) { .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.offer { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 1rem; padding-block: 1.6rem 1.75rem; border-bottom: 1px solid var(--rule-strong); }
.offer__icon { grid-row: span 2; width: 1.65rem; height: 1.65rem; margin-top: 0.1rem; color: var(--green); }
.offer-grid--fm .offer__icon { color: var(--blue); }
.offer__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 640; color: var(--navy); line-height: 1.3; }
.offer__desc { margin-top: 0.4rem; color: var(--ink-2); font-size: 0.9875rem; line-height: 1.55; }

/* ---------- Two column IT section ---------- */
.twocol { display: grid; gap: clamp(3.5rem, 5vw, 6rem); }
@media (min-width: 1000px) { .twocol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.twocol__block { display: flex; flex-direction: column; gap: 1.2rem; }
.twocol__title { max-width: 16ch; margin-bottom: 0.4rem; }
.twocol__text { color: var(--ink-2); }
.twocol__sub { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; color: var(--navy); }
.checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.checklist li { position: relative; display: grid; padding: 0.95rem 0 0.95rem 1.4rem; border-bottom: 1px solid var(--rule-strong); }
.checklist li::before { top: 1.3rem; }
.checklist__name { font-weight: 640; color: var(--navy); }
.checklist__desc { color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- Process steps (a real sequence, so it is numbered) ---------- */
.steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 2.25rem; }
.steps::before {
  content: ""; position: absolute; left: 1.6rem; top: 1.9rem; bottom: 1.9rem; width: 2px;
  background: var(--gold); transform-origin: top;
}
@media (min-width: 960px) {
  .steps { --steps-gap: clamp(1.5rem, 2.5vw, 3rem); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--steps-gap); }
  .steps::before { left: 1.6rem; right: calc((100% - 3 * var(--steps-gap)) / 4 - 1.6rem); top: 1.8rem; bottom: auto; width: auto; height: 2px; transform-origin: left; }
}
.step { position: relative; padding-left: 4.75rem; }
@media (min-width: 960px) { .step { padding-left: 0; } }
.step__num {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; place-items: center; width: 3.2rem; height: 3.65rem;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--white);
  background: var(--green); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
@media (min-width: 960px) { .step__num { position: relative; } }
.steps--fm .step__num { background: var(--blue); }
.step__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 640; color: var(--navy); line-height: 1.25; }
@media (min-width: 960px) { .step__name { margin-top: 1.4rem; } }
.step__desc { margin-top: 0.5rem; color: var(--ink-2); }
.section--paper .step__num { box-shadow: none; }

/* ---------- Statement ---------- */
.statement__grid { display: grid; gap: 1.25rem; }
@media (min-width: 960px) { .statement__grid { grid-template-columns: minmax(0, 0.3fr) minmax(0, 1.7fr); gap: 4rem; align-items: start; } }
.statement__label { display: flex; align-items: center; gap: 0.85rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; color: var(--navy); padding-top: 0.55rem; }
.statement__label::before { content: ""; width: 2.25rem; height: 2px; background: var(--gold); flex: none; }
.statement__text {
  font-family: var(--font-display); font-size: clamp(1.45rem, 1.05rem + 1.55vw, 2.4rem); font-weight: 520;
  line-height: 1.32; letter-spacing: -0.015em; color: var(--navy); max-width: 30em; text-wrap: pretty;
}

/* ---------- Feature (link to a sub page) ---------- */
.feature { display: grid; background: var(--navy); color: var(--on-dark); border-top: 4px solid var(--green); }
.feature--fm { border-top-color: var(--blue); }
@media (min-width: 960px) { .feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.feature__media { position: relative; min-height: 17rem; overflow: hidden; }
.feature__media picture, .feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__body { display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; padding: clamp(1.75rem, 1rem + 3vw, 4rem); }
.feature__title { color: var(--white); max-width: 16ch; }
.feature__text { color: var(--on-dark-2); font-size: var(--step-1); max-width: 34rem; }
.feature__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; color: var(--on-dark); }
.feature--fm .feature__points li::before { background: var(--blue-hi); }
.feature .link-arrow { color: var(--white); align-self: flex-start; margin-top: 0.5rem; }

/* ---------- Trio (supply categories) ---------- */
.trio { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
@media (min-width: 860px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trio__item { background: var(--paper); border-top: 4px solid var(--blue); padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.trio__index .icon { width: 2.25rem; height: 2.25rem; color: var(--blue); }
.trio__name { margin-top: 1.25rem; font-family: var(--font-display); font-size: var(--step-2); font-weight: 650; color: var(--navy); line-height: 1.25; }
.trio__desc { margin-top: 0.6rem; color: var(--ink-2); }
.trio__points { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.trio__points li { padding-block: 0.65rem; border-bottom: 1px solid var(--rule-strong); font-size: 0.9375rem; color: var(--ink); }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .faq__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.faq__head .h2 { max-width: 14ch; }
.faq__text { margin-top: 1.25rem; color: var(--ink-2); }
.faq__text a, .faq__a a { color: var(--navy); font-weight: 600; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.faq { border-top: 1px solid var(--rule-strong); }
.faq__item { border-bottom: 1px solid var(--rule-strong); }
.faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.35rem; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 { font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); font-weight: 620; color: var(--navy); line-height: 1.35; }
.faq__q:hover h3 { color: var(--green); }
.faq__q:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.faq__icon { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--navy); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.faq__icon .icon { width: 1.05rem; height: 1.05rem; transition: transform 0.4s var(--ease-out); }
.faq__item[open] .faq__icon { background: var(--navy); border-color: var(--navy); color: var(--white); }
.faq__item[open] .faq__icon .icon { transform: rotate(45deg); }
.faq__a { padding: 0 3.75rem 1.6rem 0; color: var(--ink-2); max-width: 46rem; }
.faq__item[open] .faq__a { animation: sgs-faq 0.5s var(--ease-out); }
@keyframes sgs-faq { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Related links ---------- */
.related { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule-strong); }
@media (min-width: 760px) { .related { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); border-top: 0; } }
.related__link { height: 100%; display: grid; grid-template-columns: 1fr auto; align-content: start; column-gap: 1rem; padding-block: 1.35rem; border-bottom: 1px solid var(--rule-strong); text-decoration: none; }
@media (min-width: 760px) { .related__link { border-bottom: 0; border-top: 3px solid var(--green); padding-top: 1.2rem; } .related__link--fm { border-top-color: var(--blue); } }
.related__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 650; color: var(--navy); transition: color 0.25s; }
.related__desc { grid-column: 1; margin-top: 0.3rem; color: var(--ink-2); font-size: 0.9375rem; }
.related__icon { grid-column: 2; grid-row: 1 / span 2; margin-top: 0.25rem; color: var(--navy); transition: transform 0.35s var(--ease-out); }
.related__link:hover .related__icon { transform: translateX(5px); }
.related__link--hc:hover .related__name { color: var(--green); }
.related__link--fm:hover .related__name { color: var(--blue); }

/* ---------- Closing call to action ---------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--on-dark); padding-block: clamp(3.75rem, 2.5rem + 4.5vw, 7rem); border-top: 1px solid var(--rule-dark); }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../img/hex-lattice.svg") 0 0 / 2.8rem auto repeat; opacity: 0.05;
  -webkit-mask-image: radial-gradient(50% 90% at 85% 50%, #000, transparent);
  mask-image: radial-gradient(50% 90% at 85% 50%, #000, transparent);
}
.cta-band__inner { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 960px) { .cta-band__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4rem; } .cta-band__actions { justify-content: flex-end; } }
.cta-band__title { color: var(--white); max-width: 18ch; }
.cta-band__text { margin-top: 1rem; color: var(--on-dark-2); font-size: var(--step-1); max-width: 34rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.cta-band__mail { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--white); font-weight: 600; text-decoration: none; }
.cta-band__mail .icon { color: var(--gold); }
.cta-band__mail:hover { color: var(--gold-soft); }
.cta-band__contact { display: grid; gap: 0.7rem; }

/* ---------- About: bios, values, certifications, capabilities, band ---------- */
.bios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.bio { display: grid; gap: 1.75rem clamp(2rem, 5vw, 5rem); padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); border-bottom: 1px solid var(--rule-strong); }
@media (min-width: 860px) { .bio { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); } }
.bio__side .leader__portrait { margin-bottom: 1.5rem; }
.bio__side .leader__facts { margin-top: 0; padding-top: 0; }
.bio__text { margin-top: 1rem; color: var(--ink-2); max-width: 46rem; }
.bio__text:first-of-type { color: var(--ink); font-size: var(--step-1); }
.values { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 760px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); } }
@media (min-width: 1080px) { .values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.value { padding-block: 1.75rem 2rem; border-top: 1px solid var(--rule-strong); }
.value__name { position: relative; padding-left: 1.3rem; font-family: var(--font-display); font-size: var(--step-2); font-weight: 650; color: var(--navy); }
.value__name::before { background: var(--gold); top: 0.45em; }
.value__desc { margin-top: 0.6rem; color: var(--ink-2); }
.cert-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
@media (min-width: 860px) { .cert-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cert-card {
  display: flex; flex-direction: column; padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  background: var(--navy); color: var(--on-dark);
  clip-path: polygon(0 0, calc(100% - 1.25rem) 0, 100% 1.25rem, 100% 100%, 0 100%);
}
.cert-card__icon { width: 2.25rem; height: 2.25rem; color: var(--gold); }
.cert-card__name { margin-top: 1.25rem; font-family: var(--font-display); font-size: var(--step-3); font-weight: 680; color: var(--white); }
.cert-card__full { margin-top: 0.25rem; color: var(--gold-soft); font-weight: 600; }
.cert-card__issuer { margin-top: 1rem; color: var(--on-dark-2); font-size: 0.9375rem; }
.cert-card__num { margin-top: auto; padding-top: 1.25rem; font-size: 0.875rem; color: var(--on-dark-2); }
.cert-card__num span { display: block; margin-top: 0.2rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--white); letter-spacing: 0.04em; }
.cap-cols { display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
@media (min-width: 860px) { .cap-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cap-col { background: var(--white); padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-top: 4px solid var(--green); }
.cap-col--fm { border-top-color: var(--blue); }
.cap-col__title a { font-family: var(--font-display); font-size: var(--step-3); font-weight: 660; color: var(--navy); text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat; transition: background-size 0.4s var(--ease-out); }
.cap-col__title a:hover { background-size: 100% 2px; }
.cap-col__desc { margin-top: 0.6rem; color: var(--ink-2); }
.cap-col__list { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.cap-col__list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.95rem; border-bottom: 1px solid var(--rule-strong); color: var(--navy); font-weight: 600; text-decoration: none; }
.cap-col__list a .icon { transition: transform 0.35s var(--ease-out); }
.cap-col__list a:hover .icon { transform: translateX(5px); }
.band { position: relative; isolation: isolate; overflow: hidden; display: grid; min-height: clamp(21rem, 36vw, 36rem); background: var(--navy); }
.band__pic, .band__pic img { position: absolute; inset: -6% 0; width: 100%; height: 112%; }
.band__pic img { object-fit: cover; filter: saturate(0.85); will-change: transform; }
.band__overlay { position: relative; z-index: 1; display: flex; align-items: flex-end; padding-block: clamp(3rem, 2rem + 4vw, 6rem); background: linear-gradient(180deg, rgba(10, 31, 68, 0.1) 0%, rgba(10, 31, 68, 0.9) 82%); }
.band__text { max-width: 28em; font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); font-weight: 560; line-height: 1.3; letter-spacing: -0.015em; color: var(--white); text-wrap: pretty; }

/* ---------- Contact page ---------- */
.contact-page__grid { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .contact-page__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; } }
.contact-page__form { scroll-margin-top: calc(var(--header-h) + 1rem); }
.contact-page__form .lead-form { background: var(--paper); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border-top: 4px solid var(--gold); }
.contact-block { padding-block: 1.5rem; border-top: 1px solid var(--rule-strong); }
.contact-block:first-child { border-top: 0; padding-top: 0; }
.contact-block__title { margin-bottom: 0.6rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; color: var(--navy); }
.contact-block a:not(.link-arrow) { color: var(--navy); font-weight: 600; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.contact-block address { line-height: 1.7; margin-bottom: 0.9rem; }
.link-arrow--sm { font-size: 0.9375rem; }
.mini-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.mini-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.8rem; align-items: start; color: var(--ink-2); }
.mini-steps__num { display: grid; place-items: center; width: 2rem; height: 2.3rem; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--white); background: var(--navy); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.contact-block--note { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.85rem; margin-top: 0.5rem; padding: 1.25rem; background: var(--paper); border-top: 0; border-left: 3px solid var(--gold); color: var(--ink-2); }
.contact-block--note .icon { color: var(--navy); margin-top: 0.15rem; }

.is-ghost-hc .tint--hc, .is-ghost-fm .tint--fm { display: block; fill: var(--navy-700); opacity: 0.95; }
.nw { white-space: nowrap; }
/* Statement: a real heading beside (desktop) or above (mobile) a large paragraph */
.statement__grid { align-items: start; }
@media (min-width: 960px) { .statement__grid { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); } }
.statement__title { position: relative; padding-top: 1.1rem; }
.statement__title::before { content: ""; position: absolute; left: 0; top: 0; width: 3rem; height: 3px; background: var(--gold); }
/* Tablet: hexagon sits beside the copy instead of under it */
@media (min-width: 760px) and (max-width: 1079px) {
  .page-hero__inner { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.6fr); gap: 2.5rem; }
  .page-hero .hexhero { width: min(100%, 15rem); justify-self: end; }
}

/* ==========================================================================
   Service pages: in-page section bar + service sections  |  v1.3
   ========================================================================== */
:root { --subnav-h: 3.6rem; }
.subnav-sentinel { height: 1px; margin-bottom: -1px; }
.subnav {
  position: sticky; top: var(--header-h); z-index: 80;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.3s;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .subnav { background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); }
}
.subnav.is-stuck { box-shadow: 0 12px 26px -20px rgba(10, 31, 68, 0.5); }
.subnav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--subnav-h); }
.subnav__list {
  display: flex; align-items: stretch; gap: clamp(0.5rem, 1.6vw, 2rem);
  min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list li { flex: none; }
.subnav__link {
  position: relative; display: inline-flex; align-items: center; gap: 0.55rem; height: 100%;
  padding: 1.05rem 0.2rem; white-space: nowrap;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
  transition: color 0.25s;
}
.subnav__link::after {
  content: ""; position: absolute; left: 0.2rem; right: 0.2rem; bottom: -1px; height: 3px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out);
}
.subnav__link:hover { color: var(--navy); }
.subnav__link.is-active { color: var(--navy); }
.subnav__link.is-active::after { transform: scaleX(1); }
.subnav__link:focus-visible { outline-offset: -3px; }
/* Every item starts with a small hexagon in the page's practice colour */
.subnav__link::before {
  content: ""; width: 0.5rem; height: 0.58rem; flex: none; background: var(--green);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.subnav--fm .subnav__link::before { background: var(--blue); }
/* The last item leads to the closing call to action: navy text and a gold hexagon,
   underlined like the others only while that section is in view */
.subnav__list .subnav__link--ask { color: var(--navy); }
.subnav__list .subnav__link--ask::before { background: var(--gold); }

/* Sticky column heads clear the header and the section bar on service pages */
@media (min-width: 960px) {
  .has-subnav .why__head { top: calc(var(--header-h) + var(--subnav-h) + 2.5rem); }
  .has-subnav .faq__head { top: calc(var(--header-h) + var(--subnav-h) + 2rem); }
}

/* Anchored sections land with their heading just below the header and section bar */
.has-subnav main > section[id] {
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 2rem - var(--section));
}

/* ---------- Service section ---------- */
.svc-block__head { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
@media (min-width: 960px) {
  .svc-block__head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(3rem, 6vw, 7rem); }
  .svc-block__head--flip .svc-block__intro { order: 2; }
  .svc-block__head--flip .svc-block__media { order: 1; }
}
.svc-block__title { max-width: 18ch; }
.svc-block__tagline {
  margin-top: 1rem; max-width: 30ch;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 560; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--green);
}
.svc-block--fm .svc-block__tagline { color: var(--blue); }
.svc-block__body { margin-top: 1.5rem; display: grid; gap: 1.1rem; max-width: 40rem; color: var(--ink-2); }
.svc-block__cta { margin-top: 1.75rem; }
.svc-block__media {
  position: relative; margin: 0; aspect-ratio: 16 / 11; overflow: hidden;
  border-top: 4px solid var(--green);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.25rem), calc(100% - 2.25rem) 100%, 0 100%);
}
.svc-block--fm .svc-block__media { border-top-color: var(--blue); }
.svc-block__media picture, .svc-block__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-block__part { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.svc-block__sub { margin-bottom: 1.5rem; font-family: var(--font-display); font-size: var(--step-3); font-weight: 650; letter-spacing: -0.015em; color: var(--navy); }
.svc-block__part-text { margin: -0.75rem 0 1.5rem; max-width: 40rem; color: var(--ink-2); }
.section--paper .trio__item { background: var(--white); }
.twocol--inner { gap: clamp(2.5rem, 4vw, 5rem); }
.twocol__title--h3 { font-family: var(--font-display); font-size: var(--step-3); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; color: var(--navy); }
.checklist--fm li::before { background: var(--blue); }
.svc-block__why {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  display: grid; gap: 0.75rem 3rem; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  background: var(--navy); color: var(--on-dark);
  clip-path: polygon(0 0, calc(100% - 1.75rem) 0, 100% 1.75rem, 100% 100%, 0 100%);
}
@media (min-width: 960px) { .svc-block__why { grid-template-columns: minmax(0, 0.32fr) minmax(0, 1.68fr); align-items: start; } }
.svc-block__why-title { position: relative; padding-top: 1rem; font-family: var(--font-display); font-size: var(--step-3); font-weight: 650; color: var(--white); }
.svc-block__why-title::before { content: ""; position: absolute; left: 0; top: 0; width: 2.5rem; height: 3px; background: var(--gold); }
.svc-block__why-text { font-family: var(--font-display); font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--white); max-width: 34em; }

/* ==========================================================================
   Brand geometry + motion system  |  v1.4
   The SG mark carries through the page: a gold circuit rail links the
   sections, the S and G halves mark the two practices, frames are cut on
   the hexagon's 30 degree edge, and photos open through a hexagon.
   ========================================================================== */
:root {
  --e-out: cubic-bezier(0.19, 1, 0.22, 1);
  --e-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --e-io: cubic-bezier(0.76, 0, 0.24, 1);
  --e-back: cubic-bezier(0.34, 1.45, 0.64, 1);
  --cut: 1.75rem;
  --cut-y: calc(var(--cut) * 0.5774);
  --cut-br: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut)) 100%, 0 100%);
  --cut-tr: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut-y), 100% 100%, 0 100%);
}

/* ---------- Smooth scrolling (Lenis) ---------- */
html.has-lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- Page to page transitions (Chrome, Edge, Safari 18+) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: 0s; }
::view-transition-old(root) { animation: sgs-vt-out 0.42s var(--e-io) both; }
::view-transition-new(root) { animation: sgs-vt-in 0.8s var(--e-out) 0.08s both; }
@keyframes sgs-vt-out { to { opacity: 0; transform: translate3d(0, -1.5rem, 0); } }
@keyframes sgs-vt-in { from { opacity: 0; transform: translate3d(0, 2rem, 0); } }

/* ---------- Sections are positioned and clip their decoration ---------- */
main > section { position: relative; overflow: clip; }
main > section > .container { position: relative; z-index: 1; }

/* ---------- 30 degree hexagon cuts on frames ---------- */
.contact__form-wrap, .cert-card, .svc-block__why { clip-path: var(--cut-tr); }
.svc-block__media, .practice, .cap-col, .trio__item { clip-path: var(--cut-br); }
.cert-card { --cut: 1.4rem; }

/* Gold buttons: cut corner and a light sweep on hover */
.btn--gold { position: relative; isolation: isolate; background: none; }
.btn--gold:hover { background: none; }
.btn--gold::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, var(--gold) 0 40%, #EFD27A 50%, var(--gold) 60% 100%) 100% 0 / 260% 100% no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.55rem), calc(100% - 0.95rem) 100%, 0 100%);
  transition: background-position 1s var(--e-out);
}
.btn--gold:hover::before, .btn--gold:focus-visible::before { background-position: 0 0; }

/* FAQ toggles are hexagons */
.faq__icon { position: relative; width: 2.35rem; height: 2.65rem; border: 0; border-radius: 0; background: none !important; }
.faq__hex { position: absolute; inset: 0; width: 100%; height: 100%; fill: transparent; stroke: var(--rule-strong); stroke-width: 1.3; transition: fill 0.35s var(--e-soft), stroke 0.35s; }
.faq__icon .icon { position: relative; }
.faq__q:hover .faq__hex { stroke: var(--navy); }
.faq__item[open] .faq__hex { fill: var(--navy); stroke: var(--navy); }
.faq__item[open] .faq__icon { color: var(--white); }
.faq__a { overflow: hidden; }
.faq__item[open] .faq__a { animation: none; }

/* ---------- SG mark watermarks ---------- */
.wm {
  position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 232 / 271; width: auto;
  fill: none; stroke: currentColor; stroke-width: var(--sw, 0.6); stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  translate: 0 calc(var(--py, 0) * 1px);
}
.wm .wm__tr { stroke: var(--gold); }
.wm--why { right: -6%; top: -12%; height: 124%; color: rgba(255, 255, 255, 0.09); }
.wm--why .wm__tr { opacity: 0.5; }
@media (min-width: 960px) {
  /* Sits in the open space under the section intro, clear of the list */
  .wm--why { right: auto; top: auto; left: calc((100% - min(100% - 2 * var(--gutter), var(--max))) / 2 - 2%); bottom: -16%; height: 64%; color: rgba(255, 255, 255, 0.1); }
  .wm--why .wm__tr { opacity: 0.6; }
}
.wm--cta { right: -4%; top: -40%; height: 180%; color: rgba(255, 255, 255, 0.08); }
.wm--cta .wm__tr { opacity: 0.55; }
.wm--footer { right: -3%; bottom: -18%; height: 120%; color: rgba(255, 255, 255, 0.05); }
.wm--footer .wm__tr { opacity: 0.25; }
.wm--contact { left: -8%; bottom: -10%; height: 105%; color: rgba(255, 255, 255, 0.06); }
.wm--contact .wm__tr { opacity: 0.35; }
.wm--leaders { right: -7%; top: -14%; height: 74%; color: rgba(10, 31, 68, 0.07); }
.wm--leaders .wm__tr { opacity: 0.32; }
.wm--contactpage { right: -6%; bottom: -12%; height: 70%; color: rgba(12, 99, 160, 0.08); }
.wm--svc { height: 128%; top: -14%; right: -9%; color: rgba(10, 31, 68, 0.07); }
.svc-block--hc .wm--svc { color: rgba(33, 107, 64, 0.11); }
.svc-block--fm .wm--svc { color: rgba(12, 99, 160, 0.11); }
.svc-block__head--flip .wm--svc { right: auto; left: -9%; }
.wm--svc .wm__tr { display: none; }
.svc-block__head { position: relative; }
.svc-block__intro, .svc-block__media { position: relative; z-index: 1; }
.wm--panel { right: -1.5rem; top: -35%; height: 170%; color: rgba(255, 255, 255, 0.08); }
.wm--panel .wm__tr { opacity: 0.4; }
.svc-block__why { position: relative; overflow: hidden; }
.svc-block__why > :not(.wm) { position: relative; z-index: 1; }
.wm--card { right: -1.25rem; bottom: -2.5rem; height: 13rem; color: rgba(10, 31, 68, 0.06); }
.practice--hc .wm--card { color: rgba(33, 107, 64, 0.1); }
.practice--fm .wm--card { color: rgba(12, 99, 160, 0.1); }
.practice__body { position: relative; overflow: hidden; }
.practice__body > :not(.wm) { position: relative; z-index: 1; }
.site-footer { position: relative; overflow: clip; }
.site-footer > .container { position: relative; z-index: 1; }
@media (max-width: 959px) {
  /* Small screens: the mark sits up by the heading and drops its traces so body copy stays clean */
  .wm--svc { height: auto; width: 62%; top: -1.5rem; bottom: auto; right: -20%; }
  .svc-block__head--flip .wm--svc { left: auto; right: -20%; }
  .wm--why { right: -30%; height: 70%; top: auto; bottom: -8%; }
}

/* ---------- Circuit rail: a gold trace that links section to section ---------- */
.rail {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: 14px; pointer-events: none;
  left: calc((100% - min(100% - 2 * var(--gutter), var(--max))) / 2 - 2.4rem);
  color: var(--gold); display: none;
}
@media (min-width: 1200px) { .rail { display: block; } }
.rail__track, .rail__line { position: absolute; left: 6px; width: 2px; background: currentColor; }
.rail__track { top: 0; bottom: 0; opacity: 0.14; }
.section--navy .rail__track, .section--deep .rail__track, .cta-band .rail__track { opacity: 0.2; }
.rail__line { transform-origin: 50% 0; }
.rail__line--top { top: 0; height: var(--ny, 6rem); transform: scaleY(var(--tp, 0)); }
.rail__line--bottom { top: var(--ny, 6rem); bottom: 0; transform: scaleY(var(--bp, 0)); }
.rail__node {
  position: absolute; left: 0; top: calc(var(--ny, 6rem) - 7px); width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, transparent 3.2px, currentColor 3.8px);
  transform: scale(0); transition: transform 0.8s var(--e-back);
}
.rail__branch {
  position: absolute; left: 13px; top: calc(var(--ny, 6rem) - 1px); width: 1.75rem; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s var(--e-out) 0.18s;
}
.rail.is-on .rail__node, .rail.is-on .rail__branch { transform: none; }
.rail.no-branch .rail__branch { display: none; }

/* ---------- Process steps: the gold trace draws as you scroll ---------- */
.steps::after {
  content: ""; position: absolute; left: 1.6rem; top: 1.9rem; bottom: 1.9rem; width: 2px;
  background: var(--rule-strong); opacity: 0.55; z-index: 0;
}
@media (min-width: 960px) { .steps::after { left: 1.6rem; right: calc((100% - 3 * var(--steps-gap)) / 4 - 1.6rem); top: 1.8rem; bottom: auto; width: auto; height: 2px; } }
.steps::before { z-index: 1; }
.js .steps::before { transform: scaleY(var(--sp, 0)); }
@media (min-width: 960px) { .js .steps::before { transform: scaleX(var(--sp, 0)); } }
.step__num { z-index: 2; }
.js .steps .step__num { transform: scale(0.35) rotate(-30deg); opacity: 0; transition: transform 0.75s var(--e-back), opacity 0.4s; }
.js .steps .step__name, .js .steps .step__desc { opacity: 0; transform: translate3d(0, 1rem, 0); transition: opacity 0.7s var(--e-soft), transform 0.9s var(--e-out); }
.js .steps .step__desc { transition-delay: 0.08s; }
.js .steps .step.is-on .step__num { transform: none; opacity: 1; }
.js .steps .step.is-on .step__name, .js .steps .step.is-on .step__desc { opacity: 1; transform: none; }

/* ---------- Entrances (one per component type; JS adds data-motion) ---------- */
.js [data-motion] { --d: 0s; }

/* Headings: words rise out of a mask */
.js .split .w { display: inline-block; vertical-align: top; overflow: hidden; padding: 0.08em 0.03em 0.14em; margin: -0.08em -0.03em -0.14em; }
.js .split .w__in { display: inline-block; transform-origin: 0 100%; transition: transform 1.3s var(--e-out) calc(var(--d) + var(--wi, 0) * 0.055s), opacity 0.9s var(--e-soft) calc(var(--d) + var(--wi, 0) * 0.055s), filter 1.1s var(--e-soft) calc(var(--d) + var(--wi, 0) * 0.05s); }
.js [data-motion="words-rise"]:not(.is-in) .w__in { transform: translate3d(0, 112%, 0) rotate(3deg); }
.js [data-motion="words-rise"].from-top:not(.is-in) .w__in { transform: translate3d(0, -112%, 0); }
/* Headings on navy: words sharpen from a soft blur */
.js [data-motion="words-blur"] .w { overflow: visible; }
.js [data-motion="words-blur"]:not(.is-in) .w__in { opacity: 0; filter: blur(12px); transform: translate3d(-0.4em, 0, 0); }
/* Smaller headings: a clean wipe from the left */
.js [data-motion="wipe"] { transition: clip-path 1.3s var(--e-io) var(--d), transform 1.3s var(--e-out) var(--d); clip-path: inset(-0.3em -0.3em -0.4em -0.3em); }
.js [data-motion="wipe"]:not(.is-in) { clip-path: inset(-0.3em 100% -0.4em -0.3em); transform: translate3d(-0.75rem, 0, 0); }

/* Body copy: soft rise */
.js [data-motion="soft"] { transition: opacity 1.1s var(--e-soft) var(--d), transform 1.4s var(--e-out) var(--d); }
.js [data-motion="soft"]:not(.is-in) { opacity: 0; transform: translate3d(0, 2rem, 0); }
.js [data-motion="soft"].from-top:not(.is-in) { transform: translate3d(0, -2rem, 0); }

/* Taglines: slide in from the left */
.js [data-motion="slide-x"] { transition: opacity 1s var(--e-soft) var(--d), transform 1.3s var(--e-out) var(--d); }
.js [data-motion="slide-x"]:not(.is-in) { opacity: 0; transform: translate3d(-2.5rem, 0, 0); }

/* Facts: slide in from the right while the numbers count up */
.js [data-motion="from-right"] { transition: opacity 1s var(--e-soft) var(--d), transform 1.3s var(--e-out) var(--d); }
.js [data-motion="from-right"]:not(.is-in) { opacity: 0; transform: translate3d(3.5rem, 0, 0); }

/* FAQ rows: arrive from the left */
.js [data-motion="from-left"] { transition: opacity 0.9s var(--e-soft) var(--d), transform 1.2s var(--e-out) var(--d); }
.js [data-motion="from-left"]:not(.is-in) { opacity: 0; transform: translate3d(-3rem, 0, 0); }

/* Offers: cascade up, the hexagon icon turns into place */
.js [data-motion="cascade"] { transition: opacity 0.9s var(--e-soft) var(--d), transform 1.2s var(--e-out) var(--d); }
.js [data-motion="cascade"]:not(.is-in) { opacity: 0; transform: translate3d(0, 2.5rem, 0) scale(0.97); }
.js [data-motion="cascade"] .offer__icon { transition: transform 0.9s var(--e-back) calc(var(--d) + 0.2s); }
.js [data-motion="cascade"]:not(.is-in) .offer__icon { transform: scale(0) rotate(-120deg); }

/* Navy "why" list: the rule draws, then the row arrives */
.js [data-motion="rule"]::before { transition: transform 1.3s var(--e-io) var(--d); }
.js [data-motion="rule"]:not(.is-in)::before { transform: scaleX(0); }
.js [data-motion="rule"] > * { transition: opacity 0.9s var(--e-soft) calc(var(--d) + 0.25s), transform 1.1s var(--e-out) calc(var(--d) + 0.25s); }
.js [data-motion="rule"]:not(.is-in) > * { opacity: 0; transform: translate3d(1.5rem, 0, 0); }

/* Values, related links: reveal left to right */
.js [data-motion="reveal-x"] { transition: clip-path 1.3s var(--e-io) var(--d), opacity 0.6s var(--d); clip-path: inset(0 -1rem 0 0); }
.js [data-motion="reveal-x"]:not(.is-in) { clip-path: inset(0 100% 0 0); opacity: 0.2; }

/* Supply categories: tilt up into place */
.js [data-motion="tilt"] { transform-origin: 50% 100%; transition: opacity 1s var(--e-soft) var(--d), transform 1.4s var(--e-out) var(--d); }
.js [data-motion="tilt"]:not(.is-in) { opacity: 0; transform: perspective(1100px) rotateX(18deg) translate3d(0, 3rem, 0); }

/* Certification cards: swing open */
.js [data-motion="flip"] { transform-origin: 0 50%; transition: opacity 1s var(--e-soft) var(--d), transform 1.5s var(--e-out) var(--d); }
.js [data-motion="flip"]:not(.is-in) { opacity: 0; transform: perspective(1200px) rotateY(-22deg) translate3d(-1.5rem, 0, 0); }

/* Cards and forms: rise with a slight scale */
.js [data-motion="card"], .js [data-motion="rise-scale"] { transition: opacity 1s var(--e-soft) var(--d), transform 1.4s var(--e-out) var(--d); }
.js [data-motion="card"]:not(.is-in) { opacity: 0; transform: translate3d(0, 3rem, 0) scale(0.96); }
.js [data-motion="rise-scale"]:not(.is-in) { opacity: 0; transform: translate3d(0, 4rem, 0) scale(0.98); }

/* Lists: items arrive one after another */
.js [data-motion="list"] > li { transition: opacity 0.8s var(--e-soft) calc(var(--d) + var(--li, 0) * 0.07s + 0.1s), transform 1.1s var(--e-out) calc(var(--d) + var(--li, 0) * 0.07s + 0.1s); }
.js [data-motion="list"]:not(.is-in) > li { opacity: 0; transform: translate3d(-1.25rem, 0, 0); }

/* Leaders: the hexagon portrait opens, then the text rises */
.js [data-motion="bio"] { transition: opacity 1s var(--e-soft) var(--d), transform 1.3s var(--e-out) var(--d); }
.js [data-motion="bio"]:not(.is-in) { opacity: 0; transform: translate3d(0, 2rem, 0); }
.js [data-motion="bio"] .leader__portrait { transition: clip-path 1.4s var(--e-io) calc(var(--d) + 0.1s); }
.js [data-motion="bio"]:not(.is-in) .leader__portrait { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); }

/* Service photos: open through a hexagon, then settle into the cut frame */
.js [data-motion="iris"] {
  transition: clip-path 1.6s var(--e-io) var(--d);
  clip-path: polygon(0 0, 50% 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut)) 100%, 0 100%);
}
.js [data-motion="iris"]:not(.is-in) {
  clip-path: polygon(calc(50% - 2.6rem) calc(50% - 1.5rem), 50% calc(50% - 3rem), calc(50% + 2.6rem) calc(50% - 1.5rem), calc(50% + 2.6rem) calc(50% + 1.5rem), 50% calc(50% + 3rem), calc(50% - 2.6rem) calc(50% + 1.5rem));
}
.js [data-motion="iris"] picture { display: block; transition: transform 2.2s var(--e-out) var(--d); }
.js [data-motion="iris"]:not(.is-in) picture { transform: scale(1.3); }

/* "Why SGS" panel: wipes open along the hexagon edge */
.js [data-motion="panel"] {
  transition: clip-path 1.3s var(--e-io) var(--d);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut-y), 100% 100%, 0 100%);
}
.js [data-motion="panel"]:not(.is-in) { clip-path: polygon(0 0, 0 0, 0 var(--cut-y), 0 100%, 0 100%); }
.js [data-motion="panel"] .svc-block__why-title { transition: opacity 0.9s var(--e-soft) calc(var(--d) + 0.5s), transform 1.1s var(--e-out) calc(var(--d) + 0.5s); }
.js [data-motion="panel"]:not(.is-in) .svc-block__why-title { opacity: 0; transform: translate3d(-1rem, 0, 0); }

/* Homepage practices: the two halves slide together like the mark */
.js [data-motion="split"] .practice { transition: opacity 1s var(--e-soft), transform 1.4s var(--e-out); }
.js [data-motion="split"]:not(.is-in) .practice { opacity: 0; }
.js [data-motion="split"]:not(.is-in) .practice--hc { transform: translate3d(-3rem, 0, 0); }
.js [data-motion="split"]:not(.is-in) .practice--fm { transform: translate3d(3rem, 0, 0); }
.js [data-motion="split"] .practice--fm { transition-delay: 0.12s; }
.js [data-motion="split"] .practice__media { transition: clip-path 1.5s var(--e-io) 0.15s; clip-path: inset(0); }
.js [data-motion="split"]:not(.is-in) .practice--hc .practice__media { clip-path: inset(0 100% 0 0); }
.js [data-motion="split"]:not(.is-in) .practice--fm .practice__media { clip-path: inset(0 0 0 100%); }
@media (max-width: 959px) {
  .js [data-motion="split"]:not(.is-in) .practice--hc, .js [data-motion="split"]:not(.is-in) .practice--fm { transform: translate3d(0, 2rem, 0); }
}

/* Region map: traces draw out from Washington */
.js [data-motion="draw"] .map__traces path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--e-io); }
.js [data-motion="draw"]:not(.is-in) .map__traces path { stroke-dashoffset: 1; }
.js [data-motion="draw"] .map__traces path:nth-child(2) { transition-delay: 0.2s; }
.js [data-motion="draw"] .map__traces path:nth-child(3) { transition-delay: 0.4s; }
.js [data-motion="draw"] .map__node { transition: transform 0.8s var(--e-back); }
.js [data-motion="draw"]:not(.is-in) .map__node { transform: scale(0); }
.js [data-motion="draw"] .map__node:nth-child(1) { transition-delay: 1.3s; }
.js [data-motion="draw"] .map__node:nth-child(2) { transition-delay: 1.45s; }
.js [data-motion="draw"] .map__node:nth-child(3) { transition-delay: 1.6s; }
.js [data-motion="draw"] .map__labels { transition: opacity 1s 1.5s; }
.js [data-motion="draw"]:not(.is-in) .map__labels { opacity: 0; }
.js [data-motion="draw"] .map__grid path { transition: opacity 1.2s; }
.js [data-motion="draw"]:not(.is-in) .map__grid path { opacity: 0; }

/* Watermarks: the mark draws itself in */
.js [data-motion="mark"] { transition: stroke-dashoffset 3.2s var(--e-io) var(--d); }
.js [data-motion="mark"]:not(.is-in) { stroke-dashoffset: 1; }

/* Statements: words light up as you read */
.js [data-read] .rw { opacity: clamp(0.18, calc((var(--rp, 0) * (var(--n, 20) + 8) - var(--i, 0)) / 8), 1); }

/* ---------- Exits: content eases away as it leaves the top of the screen ---------- */
.js [data-exit].is-settled {
  transition-property: transform, box-shadow, background-color, border-color, color;
  transition-duration: 0.4s;
  opacity: calc(1 - var(--x, 0) * var(--xo, 0.85));
  translate: calc(var(--x, 0) * var(--xx, 0px)) calc(var(--x, 0) * var(--xy, 0px));
  scale: calc(1 - var(--x, 0) * var(--xs, 0));
}
.js [data-exit="lift"] { --xy: -2.75rem; --xo: 0.9; }
.js [data-exit="fade"] { --xy: -1.25rem; --xo: 0.8; }
.js [data-exit="recede"] { --xs: 0.08; --xy: -1.5rem; --xo: 0.6; }
.js [data-exit="shrink"] { --xs: 0.05; --xy: -1rem; --xo: 0.8; }
.js [data-exit="slide-l"] { --xx: -3rem; --xo: 0.85; }
.js [data-exit="slide-r"] { --xx: 3rem; --xo: 0.85; }

/* Inner photo parallax */
.js .par { overflow: hidden; }
.js .par img { scale: 1.12; translate: 0 calc(var(--py, 0) * 1px); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js .steps .step__num, .js .steps .step__name, .js .steps .step__desc { opacity: 1; transform: none; }
  .js .steps::before { transform: none; }
  .js [data-read] .rw { opacity: 1; }
}

/* ==========================================================================
   About page  |  v1.8
   Each section has its own composition: a photo diptych split on the
   hexagon edge, a circuit board that powers the figures, a leadership
   spotlight, the six values as the six sides of the hexagon, and a
   certification slider.
   ========================================================================== */

/* ---------- What we do: two practices, one split frame ---------- */
.dip__head { max-width: 48rem; margin: 0 auto clamp(2.5rem, 4vw, 4.25rem); text-align: center; }
.dip__title { font-size: clamp(2.3rem, 1.4rem + 3vw, 4.1rem); }
.dip__text { margin-top: 1.25rem; font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); }
/* Larger screens: the service list sits on two even lines */
@media (min-width: 1080px) { .dip__head { max-width: 66rem; } .dip__text { text-wrap: balance; } }
.dip__panels {
  --slant: clamp(3rem, 7vw, 8rem); --seam: 6px;
  position: relative; display: grid; gap: 1.25rem;
}
.dip__panel {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  min-height: 26rem; display: flex; align-items: flex-end;
  color: var(--white); background: var(--navy);
  clip-path: var(--cut-br);
}
.dip__pic, .dip__pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dip__pic img { object-fit: cover; scale: 1.04; transition: scale 1.6s var(--e-out); }
.dip__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(6, 20, 48, 0.94) 0%, rgba(6, 20, 48, 0.72) 34%, rgba(6, 20, 48, 0.12) 72%, rgba(6, 20, 48, 0) 100%);
}
/* The practice colour covers the photo, then pulls away from the seam */
.dip__panel::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--green); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.25s var(--e-io);
}
.dip__panel--fm::after { background: var(--blue); transform-origin: 100% 50%; transition-delay: 0.12s; }
@media (max-width: 959px) {
  .dip__panel { min-height: 30rem; }
  .dip__panel::before { background: linear-gradient(to top, rgba(6, 20, 48, 0.96) 0%, rgba(6, 20, 48, 0.86) 48%, rgba(6, 20, 48, 0.4) 80%, rgba(6, 20, 48, 0.12) 100%); }
}
.dip__body { position: relative; z-index: 2; width: 100%; padding: clamp(1.75rem, 1rem + 2.5vw, 3.25rem); }
.dip__name { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 680; line-height: 1.05; letter-spacing: -0.02em; }
.dip__name a { color: inherit; text-decoration: none; }
.dip__name a::before { content: ""; display: inline-block; width: 0.42em; height: 0.48em; margin-right: 0.45em; vertical-align: 0.06em; background: var(--green-hi); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.dip__panel--fm .dip__name a::before { background: var(--blue-hi); }
.dip__name a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
.dip__desc { margin-top: 0.9rem; max-width: 30rem; color: var(--on-dark); line-height: 1.6; }
.dip__links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.dip__links a {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem;
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--white); text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(6, 20, 48, 0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.dip__links a .icon { width: 0.95rem; height: 0.95rem; color: var(--gold); transition: transform 0.35s var(--e-out); }
.dip__links a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.dip__links a:hover .icon { color: var(--navy); transform: translateX(3px); }
@media (min-width: 960px) {
  /* Desktop: the two photos meet on one slanted seam, like the halves of the mark */
  .dip__panels { display: flex; gap: 0; min-height: clamp(32rem, 40vw, 46rem); background: var(--gold); }
  .dip__panel { flex: 1 1 0; min-height: 0; transition: flex-grow 0.9s var(--e-io); }
  .dip__panel--hc { clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
  .dip__panel--hc .dip__body { padding-right: calc(var(--slant) + 2.5rem); }
  .dip__panel--fm { margin-left: calc(var(--seam) - var(--slant)); clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }
  .dip__panel--fm .dip__body { padding-left: clamp(2.25rem, 1rem + 2.5vw, 3.5rem); }
}
@media (min-width: 960px) and (hover: hover) {
  .dip__panel:hover, .dip__panel:focus-within { flex-grow: 1.4; }
  .dip__panel:hover .dip__pic img, .dip__panel:focus-within .dip__pic img { scale: 1.1; }
}
.js [data-motion="dip"]:not(.is-in) .dip__panel::after { transform: scaleX(1); }
.js [data-motion="dip"]:not(.is-in) .dip__pic img { scale: 1.28; }
.js [data-motion="dip"] .dip__body > * { transition: opacity 0.9s var(--e-soft), transform 1.1s var(--e-out); }
.js [data-motion="dip"] .dip__body > :nth-child(2) { transition-delay: 0.08s; }
.js [data-motion="dip"] .dip__body > :nth-child(3) { transition-delay: 0.16s; }
.js [data-motion="dip"] .dip__panel--hc .dip__body > * { transition-delay: calc(0.75s + var(--bd, 0s)); }
.js [data-motion="dip"] .dip__panel--fm .dip__body > * { transition-delay: calc(0.9s + var(--bd, 0s)); }
.js [data-motion="dip"]:not(.is-in) .dip__body > * { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
.dip__body > :nth-child(2) { --bd: 0.08s; }
.dip__body > :nth-child(3) { --bd: 0.16s; }

/* ---------- Our strength: the circuit board that powers the figures ---------- */
.strength { position: relative; overflow: clip; }
.strength::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.07;
  background: url("../img/hex-lattice.svg") 0 0 / 3.25rem auto repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.strength__intro { max-width: 60rem; }
.strength__title {
  font-family: var(--font-display); font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.6rem);
  font-weight: 700; font-stretch: 108%; line-height: 1.02; letter-spacing: -0.025em; color: var(--white); text-wrap: balance;
}
.strength__lead { margin-top: 1.75rem; max-width: 46rem; font-size: var(--step-2); line-height: 1.55; color: var(--on-dark); }
.strength__more { display: grid; gap: 1.25rem 3rem; margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--rule-dark); color: var(--on-dark-2); }
@media (min-width: 960px) { .strength__more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.board { --chip: clamp(6.25rem, 5rem + 3vw, 8rem); --lead: clamp(1.4rem, 0.8rem + 1.6vw, 2.4rem); --drop: 3.5rem; position: relative; display: grid; gap: 3.5rem; margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.board__bus { display: none; }
.board__mod { position: relative; container-type: inline-size; }
.board__drop { display: none; }
.board__top { display: flex; align-items: center; }
.board__chip { position: relative; flex: none; width: var(--chip); aspect-ratio: 100 / 115.47; display: grid; place-items: center; }
.board__hex { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.board__hex-base { fill: var(--navy-800); stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: fill 0.8s; }
.board__hex-run { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--e-io); }
.board__num {
  position: relative; font-family: var(--font-display); font-weight: 800; font-stretch: 118%;
  font-size: calc(var(--chip) * 0.5); line-height: 1; color: var(--white); font-variant-numeric: tabular-nums;
  transition: color 0.6s, text-shadow 0.8s;
}
.board__mod.is-on .board__num { color: var(--gold-soft); text-shadow: 0 0 1.4rem rgba(201, 162, 39, 0.45); }
/* The lit chip sends a gold lead out of its right side to its title, which takes
   the same gold as the number and wipes in along the lead as the count runs */
.board__lead { position: relative; flex: none; align-self: center; width: var(--lead); height: 2px; margin: 0 1.05rem 0 -1px; background: rgba(255, 255, 255, 0.16); }
.board__lead::before { content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; transition: transform 0.55s var(--e-out) 0.1s; }
.board__lead::after {
  content: ""; position: absolute; right: -0.32rem; top: 50%; width: 0.64rem; height: 0.64rem; margin-top: -0.32rem; border-radius: 50%;
  background: var(--gold-soft); box-shadow: 0 0 0 0.28rem rgba(201, 162, 39, 0.22), 0 0 1rem 0.2rem rgba(233, 210, 126, 0.35);
  transition: transform 0.5s var(--e-back) 0.5s;
}
.board__label {
  /* as large as the column allows while the longer line still fits beside the chip */
  font-family: var(--font-display); font-size: min(clamp(1.3rem, 0.85rem + 1vw, 1.95rem), calc((100cqi - var(--chip) - var(--lead) - 1.25rem) / 9)); font-weight: 700; line-height: 1.12; letter-spacing: -0.012em;
  color: var(--gold-soft);
  clip-path: inset(-0.2em -0.2em -0.2em -0.2em); transition: clip-path 0.9s var(--e-io) 0.55s, color 0.6s 0.55s;
}
ul.board__pins { position: relative; margin: 1.4rem 0 0 calc(var(--chip) / 2 - 1px); padding: 0.35rem 0 0 2.1rem; display: grid; gap: 0.15rem; }
.board__spine { position: absolute; left: 0; top: -1.4rem; bottom: 1.15rem; width: 2px; background: rgba(255, 255, 255, 0.16); }
.board__spine span { position: absolute; inset: 0; background: var(--gold); transform-origin: 50% 0; transform: scaleY(1); }
.board__pin { position: relative; padding: 0.45rem 0; font-size: 0.975rem; line-height: 1.35; color: var(--on-dark); transition: color 0.5s; }
.board__pin::before { content: ""; position: absolute; left: -2.1rem; top: 1.05rem; width: 1.55rem; height: 2px; background: var(--gold); transform-origin: 0 50%; transition: transform 0.5s var(--e-out), background-color 0.5s; }
.board__pin::after {
  content: ""; position: absolute; left: -0.82rem; top: calc(1.05rem - 0.32rem); width: 0.66rem; height: 0.66rem; border-radius: 50%;
  border: 2px solid var(--gold); background: var(--navy-900); transition: transform 0.6s var(--e-back), background-color 0.5s, border-color 0.5s;
}
.board__pin--hc::after { border-color: var(--green-hi); }
.board__pin--fm::after { border-color: var(--blue-hi); }

@media (min-width: 1200px) {
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: var(--drop); }
  .board__bus { display: block; position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 0; height: 2px; background: rgba(255, 255, 255, 0.16); }
  .board__bus-fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(201, 162, 39, 0), var(--gold) 12%); transform-origin: 0 50%; transform: scaleX(var(--bus, 1)); }
  .board__spark { position: absolute; top: 50%; left: calc(var(--bus, 1) * 100%); width: 0.75rem; height: 0.75rem; margin: -0.375rem 0 0 -0.375rem; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 0 0.35rem rgba(201, 162, 39, 0.25), 0 0 1.5rem 0.4rem rgba(233, 210, 126, 0.55); opacity: var(--spark, 0); }
  .board__drop { display: block; position: absolute; left: calc(var(--chip) / 2 - 1px); top: calc(-1 * var(--drop)); height: var(--drop); width: 2px; background: rgba(255, 255, 255, 0.16); }
  .board__drop-fill { position: absolute; inset: 0; background: var(--gold); transform-origin: 50% 0; transform: scaleY(var(--dp, 1)); }
}

/* Unlit states only while the motion engine is driving the board */
.motion-on .board__mod:not(.is-on) .board__hex-run { stroke-dashoffset: 1; }
.motion-on .board__mod:not(.is-on) .board__num { color: rgba(255, 255, 255, 0.55); }
.motion-on .board__mod:not(.is-on) .board__lead::before { transform: scaleX(0); }
.motion-on .board__mod:not(.is-on) .board__lead::after { transform: scale(0); }
/* Each title sits on exactly two lines */
.board__line { display: block; white-space: nowrap; }
@media (max-width: 359px) { .board { --chip: 5.25rem; --lead: 1.1rem; } }
.motion-on .board__mod:not(.is-on) .board__label { clip-path: inset(-0.2em 100% -0.2em -0.2em); color: rgba(255, 255, 255, 0.5); transition-delay: 0s; }
.motion-on .board__spine span { transform: scaleY(var(--sp, 0)); }
.motion-on .board__pin:not(.is-lit) { color: var(--on-dark-2); }
.motion-on .board__pin:not(.is-lit)::before { transform: scaleX(0); }
.motion-on .board__pin:not(.is-lit)::after { transform: scale(0.5); border-color: rgba(255, 255, 255, 0.3); }
.board__pin.is-lit::after { background: var(--gold); }
.board__pin--hc.is-lit::after { background: var(--green-hi); }
.board__pin--fm.is-lit::after { background: var(--blue-hi); }

/* ---------- Leadership spotlight ---------- */
.spot__grid { display: grid; gap: 3rem; }
.spot__text { margin-top: 1.25rem; max-width: 30rem; color: var(--ink-2); }
.spot__stage { display: none; }
.spot__list { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.spot__bio { position: relative; }
.spot__mini { width: 4.75rem; aspect-ratio: 100 / 115.47; display: grid; place-items: center; margin-bottom: 1.25rem; background: var(--navy); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.spot__mini span { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: 1.5rem; color: var(--white); letter-spacing: 0.02em; }
.spot__name { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.6rem); font-weight: 680; line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); }
.spot__role { margin-top: 0.4rem; font-family: var(--font-display); font-weight: 600; color: var(--green); }
.spot__facts { display: flex; flex-wrap: wrap; gap: 1rem 2.75rem; margin: 1.6rem 0 1.4rem; padding: 1.1rem 0; border-block: 1px solid var(--rule); }
.spot__facts div { display: grid; gap: 0.15rem; }
.spot__facts dt { font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.75rem); font-weight: 750; font-stretch: 112%; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.spot__facts dd { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.spot__p { max-width: 40rem; color: var(--ink-2); }
.spot__p + .spot__p { margin-top: 1rem; }
@media (min-width: 1080px) {
  .spot__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(3rem, 7vw, 8rem); align-items: start; }
  .spot__aside { align-self: stretch; }
  /* Sticky inside the full-height column, centred in the space under the header */
  .spot__stage {
    display: block; position: sticky; width: min(100%, 24rem); margin-top: 2.75rem;
    top: calc(var(--header-h) + max(1.5rem, (100svh - var(--header-h) - 33rem) / 2));
  }
  .spot__hex { position: relative; aspect-ratio: 200 / 230.94; display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(120% 90% at 30% 20%, var(--navy-700), var(--navy) 60%, var(--navy-950));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  .spot__hex::before { content: ""; position: absolute; inset: 0; opacity: 0.1; background: url("../img/hex-lattice.svg") 0 0 / 2.5rem auto repeat; }
  .spot__traces { position: absolute; left: 50%; top: 50%; width: 62%; translate: -50% -50%; fill: none; stroke: var(--gold); stroke-width: 3.5; opacity: 0.22; }
  .spot__initials {
    grid-area: 1 / 1; position: relative; font-family: var(--font-display); font-weight: 800; font-stretch: 120%;
    font-size: clamp(4rem, 2.5rem + 3.5vw, 6.5rem); letter-spacing: 0.02em; color: var(--white);
    opacity: 0; transform: translate3d(0, 40%, 0); transition: opacity 0.6s var(--e-soft), transform 0.9s var(--e-out);
  }
  .spot__initials.is-active { opacity: 1; transform: none; }
  .spot__initials.is-past { transform: translate3d(0, -40%, 0); }
  .spot__frame { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; overflow: visible; }
  .spot__frame-base { fill: none; stroke: rgba(10, 31, 68, 0.12); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .spot__frame-run { fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: var(--spot, 0.6667); transition: stroke-dashoffset 1s var(--e-io); }
  .spot__now { display: grid; margin-top: 1.5rem; }
  .spot__now-item { grid-area: 1 / 1; display: grid; gap: 0.2rem; opacity: 0; transform: translate3d(0, 0.75rem, 0); transition: opacity 0.5s, transform 0.7s var(--e-out); }
  .spot__now-item.is-active { opacity: 1; transform: none; transition-delay: 0.15s; }
  .spot__now-item strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--navy); }
  .spot__now-item span { color: var(--ink-2); font-size: 0.9375rem; }
  ol.spot__list { padding-top: 0.5rem; gap: clamp(5rem, 10vw, 9rem); padding-bottom: 12vh; }
  .spot__mini { display: none; }
  .spot__bio::before { content: ""; position: absolute; left: -2.25rem; top: 0.35rem; bottom: 0.35rem; width: 3px; background: var(--gold); transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.8s var(--e-out); }
  .spot__bio.is-active::before { transform: none; }
}

/* ---------- What guides our work: six commitments, six sides ---------- */
.vscene { position: relative; background: var(--white); }
.vscene__stage { padding-block: var(--section); }
.vscene__head { max-width: 44rem; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
.vscene__text { margin-top: 1.1rem; color: var(--ink-2); font-size: var(--step-1); }
.vscene__hex { display: none; }
.vscene__big { display: none; }
.vscene__list { display: grid; gap: 2.25rem 3rem; counter-reset: none; }
@media (min-width: 700px) { .vscene__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .vscene__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vscene__item { position: relative; padding-left: 2rem; }
.vscene__item::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 0.95rem; height: 1.1rem; background: var(--gold); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.vscene__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 680; color: var(--navy); line-height: 1.25; }
.vscene__name button { all: unset; cursor: pointer; }
.vscene__name button:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 4px; }
.vscene__desc { margin-top: 0.55rem; color: var(--ink-2); }

/* Live scene (motion welcome, JavaScript on): a gold light travels round the
   hexagon one side at a time and each side it runs along brings its commitment
   to the centre. It loops on its own and holds while hovered. */
.vscene.is-live .vscene__board { --hs: clamp(23rem, 14rem + 16vw, 34rem); --d: calc(var(--hs) * 0.383 + 1.35rem); position: relative; height: var(--hs); }
.vscene.is-live .vscene__hex { display: block; position: absolute; left: 50%; top: 50%; width: var(--hs); height: var(--hs); translate: -50% -50%; overflow: visible; }
.vscene__wedge { fill: var(--gold); opacity: 0; transition: opacity 0.9s var(--e-soft); }
.vscene__wedge.is-active { opacity: 0.07; }
.vscene__side { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke 1.1s var(--e-soft), stroke-width 1.1s var(--e-soft); }
.vscene__side.is-lit { stroke: var(--gold); stroke-width: 3.5; transition-duration: 0s; }
.vscene__run { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 0 1; }
.vscene__node { fill: var(--white); stroke: var(--rule-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: fill 0.5s, stroke 0.5s; }
.vscene__node.is-lit { fill: var(--gold); stroke: var(--gold); }
.vscene__dot { pointer-events: none; }
.vscene__core { fill: var(--gold); stroke: var(--white); stroke-width: 2; vector-effect: non-scaling-stroke; }
.vscene__halo { fill: rgba(201, 162, 39, 0.3); transform-box: fill-box; transform-origin: center; animation: vscene-halo 2.2s var(--e-out) infinite; }
@keyframes vscene-halo { 0% { transform: scale(0.45); opacity: 0.95; } 100% { transform: scale(1.7); opacity: 0; } }
.vscene.is-live .vscene__list { display: block; position: absolute; inset: 0; }
/* Side midpoints, clockwise from the top right side */
.vscene__item--k0 { --cx: 0.5; --cy: -0.866; }
.vscene__item--k1 { --cx: 1; --cy: 0; }
.vscene__item--k2 { --cx: 0.5; --cy: 0.866; }
.vscene__item--k3 { --cx: -0.5; --cy: 0.866; }
.vscene__item--k4 { --cx: -1; --cy: 0; }
.vscene__item--k5 { --cx: -0.5; --cy: -0.866; }
.vscene.is-live .vscene__item { position: static; padding: 0; }
.vscene.is-live .vscene__item::before { display: none; }
.vscene.is-live .vscene__name {
  position: absolute; left: calc(50% + var(--cx) * var(--d)); top: calc(50% + var(--cy) * var(--d)); translate: 0 -50%;
  width: max-content; max-width: 13rem; font-size: 1.05rem; font-weight: 600; color: var(--ink-2);
  transition: color 0.4s;
}
.vscene.is-live .vscene__item--l .vscene__name { translate: -100% -50%; text-align: right; }
.vscene.is-live .vscene__item.is-active .vscene__name { color: var(--navy); font-weight: 700; }
.vscene.is-live .vscene__name button { transition: color 0.3s; }
.vscene.is-live .vscene__name button:hover { color: var(--navy); }
.vscene.is-live .vscene__name button::before { content: ""; position: absolute; inset: -0.6rem -0.8rem; }
.vscene.is-live .vscene__big, .vscene.is-live .vscene__desc {
  position: absolute; left: 50%; width: calc(var(--hs) * 0.62); translate: -50% 0; text-align: center;
  opacity: 0; transition: opacity 0.45s var(--e-soft), transform 0.7s var(--e-out); pointer-events: none;
}
.vscene.is-live .vscene__big { display: block; bottom: 53%; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.1vw, 2.1rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--navy); transform: translate3d(0, 0.6rem, 0); }
.vscene.is-live .vscene__desc { top: 51%; margin: 0; font-size: 0.975rem; line-height: 1.55; transform: translate3d(0, 0.8rem, 0); }
.vscene.is-live .vscene__item.is-active .vscene__big,
.vscene.is-live .vscene__item.is-active .vscene__desc { opacity: 1; transform: none; }
.vscene.is-live .vscene__item.is-active .vscene__desc { transition-delay: 0.08s; }
/* Phones and tablets: the hexagon carries the name, the description sits below,
   and a tap moves on to the next commitment */
@media (max-width: 999px) {
  .vscene.is-live .vscene__board { --hs: min(84vw, 23rem); height: calc(var(--hs) + 10.5rem); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .vscene.is-live .vscene__hex { top: calc(var(--hs) / 2); }
  .vscene.is-live .vscene__name { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; translate: none; }
  .vscene.is-live .vscene__big { bottom: auto; top: calc(var(--hs) / 2); translate: -50% -50%; width: calc(var(--hs) * 0.62); font-size: clamp(1.2rem, 1rem + 1.6vw, 1.65rem); }
  .vscene.is-live .vscene__desc { top: calc(var(--hs) + 1.25rem); width: min(100%, 34rem); }
}

/* ---------- Certified: the certification slider ---------- */
.cslide__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.cslide__intro { max-width: 42rem; }
.cslide__text { margin-top: 1.1rem; color: var(--ink-2); }
.cslide__arrows { display: none; gap: 0.75rem; }
.cslide__arrow {
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border: 0; color: var(--white); background: var(--navy);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background-color 0.3s, color 0.3s;
}
.cslide__arrow:hover { background: var(--gold); color: var(--navy); }
.cslide__arrow:focus-visible { outline: none; background: var(--gold); color: var(--navy); }
.cslide__arrow[data-cs-prev] .icon { transform: rotate(180deg); }
.cslide__track { display: grid; gap: 1.5rem; }
.cslide__slide { display: grid; gap: 2rem; align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 3rem); background: var(--white); clip-path: var(--cut-br); }
.cslide__plaque {
  position: relative; display: grid; place-items: center; min-height: 13rem; padding: 2rem;
  background: var(--paper); clip-path: var(--cut-tr); overflow: hidden;
}
.cslide__plaque::before { content: ""; position: absolute; inset: 0; opacity: 0.05; background: url("../img/hex-lattice.svg") 0 0 / 2.4rem auto repeat; }
.cslide__plaque img { position: relative; width: auto; height: clamp(8rem, 6rem + 6vw, 12.5rem); max-width: 100%; object-fit: contain; }
.cslide__plaque--swam img { height: clamp(5.5rem, 4rem + 4vw, 8.5rem); }
.cslide__name { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--navy); }
.cslide__full { margin-top: 0.6rem; font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; color: var(--green); }
.cslide__about { margin-top: 1rem; max-width: 34rem; color: var(--ink-2); }
.cslide__meta { display: grid; gap: 0.9rem; margin-top: 1.6rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.cslide__meta dt { font-size: 0.875rem; color: var(--ink-2); }
.cslide__meta dd { margin: 0.1rem 0 0; font-family: var(--font-display); font-weight: 600; color: var(--navy); }
.cslide__tabs { display: none; }
@media (min-width: 860px) {
  .cslide__slide { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); }
  .cslide__plaque { min-height: clamp(18rem, 14rem + 8vw, 26rem); }
}
/* With JavaScript: one certification at a time, moved by tabs, arrows or swipe */
.js .cslide.is-ready .cslide__arrows { display: flex; }
.js .cslide.is-ready .cslide__viewport { overflow: hidden; touch-action: pan-y; }
.js .cslide.is-ready .cslide__track { display: flex; gap: 0; transform: translate3d(calc(var(--cs, 0) * -100%), 0, 0); transition: transform 1s var(--e-io); }
.js .cslide.is-ready .cslide__slide { flex: 0 0 100%; }
.js .cslide.is-ready .cslide__plaque img { transition: transform 1.1s var(--e-out) 0.25s, opacity 0.7s 0.25s; }
.js .cslide.is-ready .cslide__slide:not(.is-active) .cslide__plaque img { transform: scale(0.82) rotate(-8deg); opacity: 0; }
.js .cslide.is-ready .cslide__info > * { transition: opacity 0.7s var(--e-soft), transform 0.9s var(--e-out); }
.js .cslide.is-ready .cslide__slide.is-active .cslide__info > * { transition-delay: calc(0.35s + var(--ci, 0) * 0.07s); }
.js .cslide.is-ready .cslide__slide:not(.is-active) .cslide__info > * { opacity: 0; transform: translate3d(2rem, 0, 0); }
.cslide__info > :nth-child(2) { --ci: 1; } .cslide__info > :nth-child(3) { --ci: 2; } .cslide__info > :nth-child(4) { --ci: 3; }
.js .cslide.is-ready .cslide__tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.cslide__rail { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rule); }
.cslide__rail-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc((var(--cs, 0) + 1) / 3 * 100%); background: var(--gold); transition: width 1s var(--e-io); }
.cslide__tab {
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0.25rem 0.5rem; border: 0; background: none; text-align: left;
  color: var(--ink-2); transition: color 0.4s;
}
.cslide__tab-logo { opacity: 0.45; filter: grayscale(1); transition: opacity 0.4s, filter 0.4s; }
.cslide__tab:hover .cslide__tab-logo { opacity: 0.8; }
.cslide__tab[aria-selected="true"] { color: var(--navy); }
.cslide__tab[aria-selected="true"] .cslide__tab-logo { opacity: 1; filter: none; }
.cslide__tab-logo { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3rem; }
.cslide__tab-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.cslide__tab-name { font-family: var(--font-display); font-weight: 650; font-size: 1rem; }
@media (max-width: 599px) { .cslide__tab-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cslide__tab { justify-content: center; } }

@media (prefers-reduced-motion: reduce) {
  .dip__panel::after { display: none; }
  .js .cslide.is-ready .cslide__track, .cslide__rail-fill { transition: none; }
}

/* ==========================================================================
   Who we serve: photo slider  |  v1.9
   ========================================================================== */
.serve { margin-top: clamp(5.5rem, 10.5vw, 10.5rem); }
.serve__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.serve__title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 680; letter-spacing: -0.015em; color: var(--navy); }
.serve__nav { display: flex; gap: 0.6rem; }
.serve__arrow {
  display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border: 0; color: var(--white); background: var(--navy);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background-color 0.3s, opacity 0.3s;
}
.serve__arrow:hover { background: var(--gold); color: var(--navy); }
.serve__arrow:focus-visible { outline: none; background: var(--gold); color: var(--navy); }
.serve__arrow[data-serve-prev] .icon { transform: rotate(180deg); }
ul.serve__track {
  display: flex; gap: clamp(0.9rem, 1.5vw, 1.4rem); margin: 0 calc(50% - 50vw) 0 0; padding: 0.75rem var(--gutter) 1.25rem 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 0;
  scrollbar-width: none; cursor: grab;
}
ul.serve__track::-webkit-scrollbar { display: none; }
ul.serve__track:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 4px; }
ul.serve__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
ul.serve__track.is-dragging .serve__card { pointer-events: none; }
.serve__card {
  position: relative; flex: 0 0 clamp(15.5rem, 12rem + 9vw, 21rem); aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  background: var(--navy); clip-path: var(--cut-br); scroll-snap-align: start; user-select: none;
  transition: translate 0.7s var(--e-out);
}
.serve__pic, .serve__pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.serve__pic img { object-fit: cover; filter: saturate(0.7) contrast(1.03); scale: 1.03; transition: scale 1.3s var(--e-out), filter 0.9s var(--e-soft); -webkit-user-drag: none; }
.serve__card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(6, 20, 48, 0.92) 0%, rgba(6, 20, 48, 0.55) 34%, rgba(10, 31, 68, 0.12) 64%, rgba(10, 31, 68, 0.2) 100%);
  transition: opacity 0.8s;
}
.serve__card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 4px; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--e-out);
}
.serve__name {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 1.5rem 1.25rem 1.6rem; font-family: var(--font-display); font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem); font-weight: 650; line-height: 1.25; color: var(--white);
  transition: transform 0.7s var(--e-out);
}
.serve__name::before {
  content: ""; flex: none; width: 0.7rem; height: 0.8rem; margin-top: 0.35rem; background: var(--gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: transform 0.8s var(--e-back);
}
@media (hover: hover) {
  .serve__card:hover { translate: 0 -0.5rem; }
  .serve__card:hover .serve__pic img { scale: 1.12; filter: saturate(1.05) contrast(1.03); }
  .serve__card:hover::after { transform: scaleX(1); }
  .serve__card:hover .serve__name { transform: translate3d(0, -0.4rem, 0); }
  .serve__card:hover .serve__name::before { transform: rotate(120deg) scale(1.25); }
}
/* Every group name sits on exactly two lines so the cards line up */
.serve__line { display: block; white-space: nowrap; }
/* One segment per client group; while the slider plays, the current one fills up until the next move.
   It plays on its own and holds while the cards are hovered, touched or focused from the keyboard. */
.serve__progress { display: flex; gap: 0.5rem; height: 3px; margin-top: 0.75rem; }
.serve__progress span { position: relative; flex: 1; overflow: hidden; background: var(--rule); }
.serve__progress span::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.45s var(--e-out); }
.serve__progress span.is-on::after { transform: scaleX(1); }
.serve.is-running .serve__progress span.is-on::after { animation: serve-fill 4.2s linear both; }
@keyframes serve-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.js [data-motion="card"].serve__card { transition: opacity 1s var(--e-soft) var(--d), transform 1.4s var(--e-out) var(--d), translate 0.7s var(--e-out); }
@media (max-width: 599px) { .serve__nav { display: none; } }

/* ==========================================================================
   Thank-you page  |  v1.10
   A gold hexagon draws itself, then the check, then the message rises in.
   ========================================================================== */
.thanks {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: var(--header-h);
  min-height: max(34rem, 78svh);
  display: grid; align-items: center;
  background: var(--navy); color: var(--on-dark);
}
.thanks .hero__bg::before { background: radial-gradient(50% 55% at 50% 42%, rgba(12, 99, 160, 0.42), rgba(12, 99, 160, 0) 72%), linear-gradient(180deg, rgba(6, 20, 48, 0) 55%, rgba(6, 20, 48, 0.7) 100%); }
.thanks .hero__bg::after { -webkit-mask-image: radial-gradient(45% 60% at 50% 45%, #000 0%, transparent 78%); mask-image: radial-gradient(45% 60% at 50% 45%, #000 0%, transparent 78%); opacity: 0.07; }
.wm--thanks { left: 50%; top: 50%; height: 150%; color: rgba(255, 255, 255, 0.045); transform: translate(-50%, -50%); }
.wm--thanks .wm__tr { opacity: 0.12; }
.thanks__inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; padding-block: clamp(3.5rem, 8vw, 7rem); }
.thanks__badge { width: clamp(5.5rem, 4rem + 4vw, 8rem); height: auto; overflow: visible; margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.thanks__ring { fill: rgba(201, 162, 39, 0.1); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.5; }
.thanks__hex, .thanks__check { fill: none; stroke: var(--gold); stroke-linejoin: round; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; }
.thanks__hex { stroke-width: 3; }
.thanks__check { stroke-width: 7; }
.thanks__title { font-family: var(--font-display); font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.4rem); font-weight: 680; line-height: 1.04; letter-spacing: -0.024em; color: var(--white); }
.thanks__text { margin-top: clamp(1rem, 0.75rem + 1vw, 1.6rem); max-width: 46rem; text-wrap: balance; font-size: var(--step-1); line-height: 1.6; color: var(--on-dark-2); }
.thanks__links { list-style: none; margin: clamp(1.5rem, 1.2rem + 1vw, 2.1rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.75rem; }
.thanks__links a { color: var(--on-dark); font-weight: 600; text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: color 0.25s; }
.thanks__links a:hover { color: var(--gold-soft); }
.thanks__actions { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.25rem 2rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .thanks__ring { opacity: 0; transform: scale(0.82); transform-origin: 50% 50%; transform-box: fill-box; }
  .js .thanks__hex, .js .thanks__check { stroke-dashoffset: 1; }
  .js .thanks__title, .js .thanks__text, .js .thanks__links, .js .thanks__actions { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
  .is-loaded .thanks__ring { opacity: 1; transform: none; transition: opacity 0.9s 0.1s, transform 1.4s 0.1s var(--e-out); }
  .is-loaded .thanks__hex { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s 0.15s var(--e-io); }
  .is-loaded .thanks__check { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s 1.25s var(--e-out); }
  .is-loaded .thanks__title, .is-loaded .thanks__text, .is-loaded .thanks__links, .is-loaded .thanks__actions { opacity: 1; transform: none; transition: opacity 1s var(--e-soft), transform 1.3s var(--e-out); }
  .is-loaded .thanks__title { transition-delay: 0.55s; }
  .is-loaded .thanks__text { transition-delay: 0.75s; }
  .is-loaded .thanks__links { transition-delay: 0.85s; }
  .is-loaded .thanks__actions { transition-delay: 0.95s; }
}

/* ==========================================================================
   Healthcare overview: a monitor with one live trace per service  |  v1.12
   Each channel scrolls its own signal (a staircase for consulting, a
   heartbeat for staffing, a data pulse for IT) and links to its section.
   ========================================================================== */
.mon {
  position: relative; isolation: isolate; color: var(--on-dark);
  padding: 0.35rem clamp(1.25rem, 0.9rem + 1.2vw, 2rem) 0.6rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 1.25rem,
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 1.25rem 100%,
    radial-gradient(110% 70% at 100% 0%, rgba(33, 107, 64, 0.42), rgba(33, 107, 64, 0) 62%),
    var(--navy);
  clip-path: polygon(0 0, calc(100% - 1.75rem) 0, 100% 1.75rem, 100% 100%, 0 100%);
}
.mon::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--green-hi), var(--gold)); }
ul.mon__list { display: grid; }
.mon__ch + .mon__ch { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mon__link { position: relative; display: grid; padding: 1.5rem 0 1rem; color: inherit; text-decoration: none; }
.mon__name { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem); font-weight: 650; color: var(--white); transition: color 0.3s; }
.mon__dot { flex: none; width: 0.55rem; height: 0.64rem; background: var(--green-hi); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
/* the count sits under the service name and reads as one line: 500+ provider network */
.mon__read { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin-top: 0.55rem; padding-left: 1.15rem; }
.mon__num { font-family: var(--font-display); font-size: clamp(1.35rem, 1.05rem + 0.8vw, 1.8rem); font-weight: 750; font-stretch: 112%; line-height: 1; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.mon__unit { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-2); }
.mon__line { max-width: 30rem; margin-top: 0.75rem; padding-left: 1.15rem; font-size: 0.9375rem; line-height: 1.55; color: var(--on-dark-2); }
/* the scope: the trace runs up to a glowing write head, like a bedside monitor */
.mon__scope { position: relative; display: block; margin-top: 0.7rem; }
.mon__scope::after {
  content: ""; position: absolute; top: 8%; bottom: 8%; left: 80%; width: 2px; border-radius: 2px;
  background: linear-gradient(transparent, var(--gold-soft) 30%, var(--gold-soft) 70%, transparent);
  box-shadow: 0 0 0.9rem 0.2rem rgba(233, 210, 126, 0.35); opacity: 0.8;
  animation: mon-head var(--mon-t, 4s) ease-in-out infinite;
}
@keyframes mon-head { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.mon:not(.is-live) .mon__scope::after { animation-play-state: paused; }
.mon__trace {
  display: block; width: 100%; height: 3.1rem; overflow: hidden; filter: drop-shadow(0 0 5px rgba(108, 192, 140, 0.45));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 80%, transparent);
}
.mon__trace path { fill: none; stroke: var(--green-hi); stroke-width: 2.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke 0.35s; }
.mon__wave { animation: mon-scroll var(--mon-t, 4s) linear infinite; }
.mon__ch--slow { --mon-t: 7s; }
.mon__ch--beat { --mon-t: 2.8s; }
.mon__ch--fast { --mon-t: 3.6s; }
@keyframes mon-scroll { to { transform: translateX(-200px); } }
.mon__go { position: absolute; right: 0; bottom: 1.15rem; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--navy); background: var(--gold); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: 0; transform: translateX(-0.5rem); transition: opacity 0.3s, transform 0.4s var(--e-out); }
.mon__go .icon { width: 1rem; height: 1rem; }
.mon__link:hover .mon__name, .mon__link:focus-visible .mon__name { color: var(--gold-soft); }
.mon__link:hover .mon__trace path, .mon__link:focus-visible .mon__trace path { stroke: var(--gold-soft); }
.mon__link:hover .mon__go, .mon__link:focus-visible .mon__go { opacity: 1; transform: none; }
.mon__link:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 2px; }
/* the beating dot keeps time with each channel */
.mon__dot { animation: mon-blip var(--mon-t, 4s) var(--e-out) infinite; }
@keyframes mon-blip { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.35); opacity: 0.55; } }
/* Paused off screen; traces sweep in from the left the first time the panel arrives */
.mon:not(.is-live) .mon__wave, .mon:not(.is-live) .mon__dot { animation-play-state: paused; }
.motion-on .mon .mon__trace { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s var(--e-io); }
.motion-on .mon.is-swept .mon__trace { clip-path: inset(0); }
.motion-on .mon.is-swept .mon__ch:nth-child(2) .mon__trace { transition-delay: 0.2s; }
.motion-on .mon.is-swept .mon__ch:nth-child(3) .mon__trace { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) { .mon__wave, .mon__dot, .mon__scope::after { animation: none; } }
/* v1.12.3 wide overview: the monitor runs under the text as one strip with the
   three services side by side, so the text column no longer ends far above a
   tall panel. The lead and the supporting paragraph sit side by side above it. */
@media (min-width: 960px) {
  .p-intro--wide .p-intro__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.75rem, 1.5rem + 2.4vw, 4.5rem); }
  .p-intro--wide .p-intro__aside { padding-top: 0; }
}
@media (min-width: 1080px) {
  .p-intro--wide .h2 { max-width: none; }
  .p-intro--wide .p-intro__body { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: clamp(3rem, 1rem + 4.5vw, 7rem); max-width: none; align-items: start; }
  .p-intro--wide .p-intro__body > p:not(.lead) { padding-top: 0.3rem; }
}
@media (min-width: 900px) {
  .p-intro--wide .mon { --mon-px: clamp(1.4rem, 0.4rem + 1.7vw, 2.75rem); padding: 0 0 0 3px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 1.25rem,
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 1.25rem 100%,
      radial-gradient(45% 110% at 100% 0%, rgba(33, 107, 64, 0.42), rgba(33, 107, 64, 0) 62%),
      var(--navy); }
  .p-intro--wide ul.mon__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-intro--wide .mon__ch { display: grid; }
  .p-intro--wide .mon__ch + .mon__ch { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .p-intro--wide .mon__link { grid-template-rows: auto auto 1fr auto; padding: 1.85rem var(--mon-px) 1.35rem; }
  .p-intro--wide .mon__line { align-self: start; }
  .p-intro--wide .mon__scope { margin-top: 1rem; }
  .p-intro--wide .mon__go { right: var(--mon-px); bottom: 1.6rem; }
}


/* Certification marks wherever the certifications are named  |  v1.12 */
ul.cert-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; margin-top: 1rem; }
.cert-logos img { display: block; width: auto; height: 2.9rem; }
.cert-logos__wide img { height: 2.5rem; }
.board__pin--logo { display: flex; align-items: center; gap: 0.8rem; }
.board__logo { flex: none; width: 4rem; height: 1.9rem; object-fit: contain; object-position: left center; opacity: 0.55; transition: opacity 0.5s; }
.board__logo--wide { height: 1.55rem; }
.board__pin--logo.is-lit .board__logo, :root:not(.motion-on) .board__logo { opacity: 1; }
.board__pin--logo::before { top: 50%; }
.board__pin--logo::after { top: calc(50% - 0.33rem); }
.why__item .cert-logos--why { grid-column: 2; margin-top: 1.1rem; }

/* ==========================================================================
   v1.12.4 responsive polish from the full screen-size review
   ========================================================================== */
/* Background marks: the gold circuit traces only show where they sit in open
   space, never behind copy, contact details or buttons */
@media (max-width: 1079px) { .wm .wm__tr { display: none; } }
.wm--cta .wm__tr, .wm--panel .wm__tr, .wm--footer .wm__tr, .wm--leaders .wm__tr,
.wm--contact .wm__tr, .wm--thanks .wm__tr { display: none; }

/* Header call button on phones and tablets (the desktop one sits in the nav) */
.site-header__tel { display: none; }
@media (max-width: 1079px) {
  .site-header__tel {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    margin-left: auto; margin-right: -0.75rem; height: 2.6rem; padding-inline: 0.85rem;
    font-family: var(--font-display); font-size: 0.9375rem; font-weight: 620; color: var(--navy);
    background: var(--gold); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.55rem), calc(100% - 0.55rem) 100%, 0 100%);
    transition: background-color 0.25s;
  }
  .site-header__tel:hover { background: var(--gold-hi); }
  .site-header__tel:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
  .site-header__tel .icon { width: 1.05rem; height: 1.05rem; }
}
@media (max-width: 599px) {
  .site-header__tel { width: 2.6rem; padding: 0; }
  .site-header__tel-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* Footer: short Company links never break onto two lines */
.site-footer__col[aria-labelledby="ft-company"] a { white-space: nowrap; }

/* Homepage certification strip on tablets: logo above the name in each column */
@media (min-width: 760px) and (max-width: 1279px) {
  .cert { grid-template-columns: minmax(0, 1fr); row-gap: 0.9rem; align-content: start; }
  .cert__logo { grid-row: auto; height: 3.4rem; }
  .cert--swam .cert__logo { height: 2.7rem; margin-block: 0.35rem; }
  .cert__name { align-self: start; }
}

/* Homepage leaders below 1080: one card per row, portrait beside the text, the
   two facts side by side (no card left alone on a half-empty row) */
@media (min-width: 640px) and (max-width: 1079px) {
  .leader { position: relative; display: block; padding-left: calc(7.5rem + clamp(1.75rem, 4vw, 3rem)); min-height: calc(7.5rem * 271 / 232); }
  .leader__portrait { position: absolute; left: 0; top: 0; margin: 0; }
  .leader__bio { max-width: 40rem; }
  .leader__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; padding-top: 1.25rem; }
}

/* Hero practice labels on small phones: staggered so they never collide */
@media (max-width: 479px) {
  .hexhero__label { font-size: 0.875rem; padding: 0.5rem 0.7rem 0.5rem 0.65rem; gap: 0.45rem; }
  .hexhero__half--hc .hexhero__label { top: 79%; }
  .hexhero__half--fm .hexhero__label { top: 91%; }
}

/* Small phones: buttons keep their label on one line */
@media (max-width: 399px) { .btn { padding-inline: 1.1rem; font-size: 0.9375rem; } }

/* Four related cards: two by two on tablets, four across on desktops */
@media (min-width: 760px) { .related:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .related:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* About leadership facts: the same two-column layout for every leader on phones */
@media (max-width: 599px) { .spot__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; } }