/* ==========================================================================
   Northwind Energy — Global stylesheet
   Brand system inherited from North Wind Trading SPC (nwtrading.om)
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Typography
   5.  Buttons & links
   6.  Header / navigation
   7.  Hero
   8.  Sections & components
   9.  Cards
   10. Figures / stats
   11. Forms
   12. Footer
   13. Motion & reveal
   14. Responsive
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Brand: taken from the North Wind "NW" monogram --- */
  --nw-navy-900: #04182f;
  --nw-navy-850: #072742;
  --nw-navy-800: #0a3457;
  --nw-blue-700: #0e56a4;   /* the blue "N" */
  --nw-blue-600: #1173d4;   /* parent primary */
  --nw-blue-500: #3a8fe0;
  --nw-cyan-500: #3bc1d4;   /* the cyan "W" */
  --nw-cyan-400: #5fd8e8;
  --nw-amber-500: #ee7c2b;  /* energy accent */
  --nw-amber-700: #c2410c;  /* accessible amber for small text */

  /* --- Neutrals --- */
  --ink:        #0d1b2a;
  --text:       #1d2530;
  --text-2:     #3d4a5c;
  --muted:      #627084;
  --muted-2:    #8b97a8;
  --line:       #d9e0e8;
  --line-soft:  #e8edf2;
  --surface:    #ffffff;
  --surface-2:  #f6f8fa;
  --surface-3:  #eef2f6;

  /* --- On-dark neutrals --- */
  --d-text:     #eaf1f8;
  --d-muted:    #9db2ca;
  --d-line:     rgba(255, 255, 255, 0.14);
  --d-line-soft:rgba(255, 255, 255, 0.08);

  /* --- Typography --- */
  --font-sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* --- Spacing / rhythm --- */
  --gutter:  clamp(20px, 5vw, 64px);
  --section: clamp(64px, 9vw, 128px);
  --maxw:    1240px;
  --maxw-narrow: 800px;

  /* --- Shape --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* --- Elevation --- */
  --sh-sm: 0 1px 2px rgba(13, 27, 42, .06), 0 2px 8px rgba(13, 27, 42, .04);
  --sh-md: 0 4px 12px rgba(13, 27, 42, .07), 0 12px 32px rgba(13, 27, 42, .06);
  --sh-lg: 0 8px 24px rgba(13, 27, 42, .09), 0 28px 64px rgba(13, 27, 42, .10);

  /* --- Motion --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --header-h: 76px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 { margin: 0 0 .5em; line-height: 1.15; font-weight: 600; color: var(--ink); }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .45em; }
a  { color: var(--nw-blue-600); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--nw-blue-700); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
strong { font-weight: 600; color: var(--ink); }
::selection { background: var(--nw-cyan-500); color: var(--nw-navy-900); }

:focus-visible {
  outline: 3px solid var(--nw-cyan-500);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 999;
  background: var(--nw-navy-900); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; font-size: 15px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

.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;
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--flush-top { padding-top: 0; }

.section--alt   { background: var(--surface-2); }
.section--line  { border-top: 1px solid var(--line-soft); }

.section--dark {
  background: var(--nw-navy-900);
  color: var(--d-text);
}
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p  { color: var(--d-muted); }
/* :not(.btn) matters — this selector outranks .btn on specificity, so without
   the exclusion it would repaint button labels cyan. */
.section--dark a:not(.btn) { color: var(--nw-cyan-400); }
.section--dark .eyebrow { color: var(--nw-cyan-400); }
.section--dark .eyebrow::before { background: var(--nw-cyan-500); }

.grid { display: grid; gap: clamp(20px, 3vw, 32px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Editorial two-column: sticky label left, content right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: start;
}
.split__aside { position: sticky; top: calc(var(--header-h) + 40px); }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--nw-blue-700);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; flex: none;
  background: var(--nw-blue-700);
}

.h-display {
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.05;
}
.h-1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  letter-spacing: -.024em;
  line-height: 1.1;
}
.h-2 {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  letter-spacing: -.018em;
  line-height: 1.18;
}
.h-3 {
  font-size: clamp(1.2rem, 1.9vw, 1.4rem);
  letter-spacing: -.01em;
  line-height: 1.3;
}

.lead {
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.6;
  color: var(--text-2);
  font-weight: 400;
}
.section--dark .lead { color: #c3d5e8; }

.measure   { max-width: 68ch; }
.measure-s { max-width: 54ch; }

.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

.rule-top {
  padding-top: 22px;
  border-top: 2px solid var(--ink);
}

/* Section heading block */
.sec-head { margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head--center { text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--center .lead { margin-inline: auto; }

/* ==========================================================================
   5. BUTTONS & LINKS
   ========================================================================== */
.btn {
  --btn-bg: var(--nw-blue-600);
  --btn-fg: #fff;
  --btn-bd: var(--nw-blue-600);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-sm);
  font: inherit; font-size: 16px; font-weight: 600;
  letter-spacing: .005em;
  cursor: pointer;
  text-align: center;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(17, 115, 212, .28);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line);
}
.btn--ghost:hover {
  --btn-bd: var(--nw-blue-600);
  --btn-fg: var(--nw-blue-600);
  box-shadow: none;
}

.btn--on-dark {
  --btn-bg: #fff;
  --btn-fg: var(--nw-navy-900);
  --btn-bd: #fff;
}
.btn--on-dark:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .38);
}
.btn--outline-light:hover {
  --btn-bd: #fff;
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}

.btn-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 32px;
}

/* Arrow text link */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15.5px;
  color: var(--nw-blue-700);
}
.link-arrow svg { transition: transform .25s var(--ease); flex: none; }
.link-arrow:hover svg { transform: translateX(5px); }
.section--dark .link-arrow { color: var(--nw-cyan-400); }

/* ==========================================================================
   6. HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease), height .3s var(--ease);
}
/* Solid state: scrolled, or on a page without a dark hero */
.site-header.is-solid,
body:not(.has-dark-hero) .site-header {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 18px rgba(13, 27, 42, .05);
}

/* Menu-open state: deliberately NOT blurred.
   backdrop-filter makes an element a containing block for its fixed-position
   descendants, which would trap the mobile drawer inside the 66px header box
   instead of letting it fill the viewport. An opaque background gives the same
   look without that side effect. Listed after the rule above, and matched with
   equal-or-greater specificity, so it always wins when both apply. */
body .site-header.is-open {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 18px rgba(13, 27, 42, .05);
}
.site-header.is-solid { height: 66px; }

.site-header__inner {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* --- Logo --- */
/* color:inherit — the visible text lives in the child spans below, so the
   anchor must not carry the default link blue. */
.brand { display: inline-flex; align-items: center; gap: 13px; flex: none; color: inherit; min-width: 0; }
.brand:hover { color: inherit; }
/* Official wind mark, intrinsic ratio 485:145 (3.345:1).
   Painted as a background so the reversed variant can be swapped in on dark
   surfaces; the accessible name comes from .brand's aria-label and the
   adjacent .brand__name text, so the mark itself is purely decorative. */
.brand__mark {
  width: 114px; height: 34px; flex: none;
  background: url("../img/logo-mark.svg") left center / contain no-repeat;
}
/* Reversed mark: over the dark hero, and always in the footer */
body.has-dark-hero .site-header:not(.is-solid):not(.is-open) .brand__mark,
.site-footer .brand__mark { background-image: url("../img/logo-mark-light.svg"); }
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-size: 18.5px; font-weight: 700; letter-spacing: -.015em;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.brand__sub {
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  margin-top: 4px;
  transition: color .3s var(--ease);
}
/* On a transparent dark hero the wordmark flips to white */
body.has-dark-hero .site-header:not(.is-solid):not(.is-open) .brand__name { color: #fff; }
body.has-dark-hero .site-header:not(.is-solid):not(.is-open) .brand__sub  { color: rgba(255, 255, 255, .68); }

/* --- Desktop nav --- */
.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  padding: 9px 14px;
  font-size: 15.5px; font-weight: 500;
  color: var(--text-2);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color .22s var(--ease), background-color .22s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute;
  left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: var(--nw-cyan-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }

body.has-dark-hero .site-header:not(.is-solid):not(.is-open) .nav__link { color: rgba(255, 255, 255, .82); }
body.has-dark-hero .site-header:not(.is-solid):not(.is-open) .nav__link:hover,
body.has-dark-hero .site-header:not(.is-solid):not(.is-open) .nav__link[aria-current="page"] { color: #fff; }

.header__cta { margin-left: 8px; padding: 11px 22px; font-size: 15px; }
body.has-dark-hero .site-header:not(.is-solid):not(.is-open) .header__cta {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .4);
}

/* --- Mobile toggle --- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink); border-radius: var(--r-sm);
}
body.has-dark-hero .site-header:not(.is-solid):not(.is-open) .nav-toggle { color: #fff; }
.nav-toggle__bars { position: relative; width: 24px; height: 16px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 7px; }
.nav-toggle__bars span:nth-child(3) { top: 14px; }
.site-header.is-open .nav-toggle__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.site-header.is-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: min(90vh, 820px);
  padding-top: calc(var(--header-h) + 80px);
  padding-bottom: clamp(56px, 8vw, 96px);
  background: var(--nw-navy-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero--page {
  min-height: min(60vh, 520px);
  align-items: flex-end;
}

/* Layered ambient background */
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 82% 8%,  rgba(59, 193, 212, .30), transparent 58%),
    radial-gradient(95%  85% at 10% 92%, rgba(17, 115, 212, .38), transparent 62%),
    radial-gradient(70%  70% at 55% 45%, rgba(14, 86, 164, .28),  transparent 70%),
    linear-gradient(155deg, #04182f 0%, #072742 45%, #0a3457 100%);
}
/* Optional photography slot — set --hero-img on .hero to use a photo */
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--hero-img, none);
  background-size: cover; background-position: center;
  opacity: var(--hero-img-opacity, .3);
  mix-blend-mode: luminosity;
}
/* Fine engineering grid */
.hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(88% 78% at 50% 42%, #000 8%, transparent 82%);
  mask-image: radial-gradient(88% 78% at 50% 42%, #000 8%, transparent 82%);
}
/* Wind streamlines */
.hero__lines {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
}
.hero__lines path {
  fill: none;
  stroke: url(#nwStream);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 380 1400;
  animation: stream 17s linear infinite;
}
.hero__lines path:nth-child(2) { animation-delay: -3.4s;  opacity: .8; }
.hero__lines path:nth-child(3) { animation-delay: -6.8s;  opacity: .65; }
.hero__lines path:nth-child(4) { animation-delay: -10.2s; opacity: .8; }
.hero__lines path:nth-child(5) { animation-delay: -13.6s; opacity: .55; }
@keyframes stream {
  from { stroke-dashoffset: 1780; }
  to   { stroke-dashoffset: 0; }
}

.hero__inner {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column;
  gap: clamp(40px, 5vw, 68px);
}

/* Landing hero: copy on the left, brand visual on the right from 1024px up.
   Below that the visual is dropped entirely — see the responsive block. */
.hero__layout {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero__copy { min-width: 0; }

/* The headline measure MUST be expressed in em, not ch on the wrapper.
   `ch` resolves against the element's OWN font-size, so putting it on the
   17px container collapsed this column to ~177px and broke every word onto
   its own line. In em on the h1 it scales with the display size instead. */
.hero .h-display {
  color: #fff;
  margin-bottom: 24px;
  max-width: 11em;
}
.hero__lead {
  max-width: 56ch;
  font-size: clamp(1.08rem, 1.75vw, 1.34rem);
  line-height: 1.6;
  color: #c3d5e8;
  margin-bottom: 0;
}
.hero__eyebrow { color: var(--nw-cyan-400); }
.hero__eyebrow::before { background: var(--nw-cyan-500); }

/* --- Hero brand visual -------------------------------------------------- */
.hero__visual { display: none; }          /* switched on at >=1024px */
.hero__orbit  { width: 100%; height: auto; overflow: visible; }

.hv-ring { transform-origin: 300px 300px; }
.hv-ring--a { animation: hvSpin 70s linear infinite; }
.hv-ring--b { animation: hvSpin 52s linear infinite reverse; }
@keyframes hvSpin { to { transform: rotate(360deg); } }

/* Wind streamlines. Each line carries two long dashes that travel left to right,
   so the field reads as moving air rather than a static pattern. */
.hv-wind path {
  stroke-width: 2;
  stroke-dasharray: 150 330;
  animation: hvFlow 9s linear infinite;
}
.hv-wind path:nth-child(1) { animation-duration: 11s;  animation-delay: -0.4s; stroke-width: 1.4; }
.hv-wind path:nth-child(2) { animation-duration: 9.5s; animation-delay: -2.9s; stroke-width: 1.7; }
.hv-wind path:nth-child(3) { animation-duration: 8s;   animation-delay: -5.1s; }
.hv-wind path:nth-child(4) { animation-duration: 7s;   animation-delay: -1.7s; stroke-width: 2.4; }
.hv-wind path:nth-child(5) { animation-duration: 7.4s; animation-delay: -3.8s; stroke-width: 2.4; }
.hv-wind path:nth-child(6) { animation-duration: 8.6s; animation-delay: -0.9s; }
.hv-wind path:nth-child(7) { animation-duration: 10s;  animation-delay: -4.4s; stroke-width: 1.7; }
.hv-wind path:nth-child(8) { animation-duration: 12s;  animation-delay: -2.2s; stroke-width: 1.4; }
@keyframes hvFlow {
  from { stroke-dashoffset: 480; }
  to   { stroke-dashoffset: 0; }
}

/* Drift is a PURE translate, so it is unaffected by transform-origin/transform-box
   quirks on SVG, and it composes with the parent group's transform attribute
   rather than replacing it. */
.hv-mark { animation: hvDrift 11s ease-in-out infinite alternate; }
@keyframes hvDrift {
  from { transform: translateY(6px); }
  to   { transform: translateY(-10px); }
}

.hv-nodes circle { animation: hvPulse 3.4s ease-in-out infinite; }
.hv-nodes circle:nth-child(2) { animation-delay: .85s; }
.hv-nodes circle:nth-child(3) { animation-delay: 1.7s; }
.hv-nodes circle:nth-child(4) { animation-delay: 2.55s; }
@keyframes hvPulse {
  0%, 100% { opacity: .35; r: 4; }
  50%      { opacity: 1;   r: 6; }
}

/* Bottom strip of quick facts inside the hero */
.hero__strip {
  position: relative; z-index: 1;
  margin: clamp(44px, 6vw, 72px) 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--d-line);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
/* <dd> carries a 40px indent by default — remove it */
.hero__strip dd { margin: 0; }
.hero__stat-n {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  font-weight: 500; line-height: 1;
  color: #fff; letter-spacing: -.02em;
  margin-bottom: 8px;
}
.hero__stat-l {
  font-size: 13.5px; line-height: 1.4;
  color: var(--d-muted);
  letter-spacing: .01em;
}

/* Scroll cue */
.hero__cue {
  position: absolute; left: 50%; bottom: 22px; z-index: 1;
  transform: translateX(-50%);
  width: 22px; height: 34px;
  border: 1.5px solid rgba(255,255,255,.34);
  border-radius: 12px;
}
.hero__cue::after {
  content: ""; position: absolute; left: 50%; top: 7px;
  width: 3px; height: 6px; margin-left: -1.5px;
  background: var(--nw-cyan-400); border-radius: 2px;
  animation: cue 1.9s var(--ease) infinite;
}
@keyframes cue {
  0%   { opacity: 0; transform: translateY(0); }
  35%  { opacity: 1; }
  75%  { opacity: 0; transform: translateY(11px); }
  100% { opacity: 0; }
}

/* Breadcrumb on interior pages */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 20px;
  font-size: 13.5px; color: rgba(255,255,255,.62);
}
.crumbs a { color: rgba(255,255,255,.82); }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-hidden] { opacity: .5; }

/* ==========================================================================
   8. SECTIONS & COMPONENTS
   ========================================================================== */

/* --- Parent-company ribbon --- */
.ribbon {
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
  padding-block: 16px;
  font-size: 14.5px;
}
.ribbon__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 10px;
  color: var(--muted);
  text-align: center;
}
.ribbon strong { color: var(--text); font-weight: 600; }

/* --- Numbered / iconed feature list --- */
.feature-list { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.feature-list li {
  display: grid; grid-template-columns: 34px 1fr; gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--line-soft);
  margin: 0;
}
.feature-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.feature-list__n {
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 500;
  color: var(--nw-blue-700);
  padding-top: 3px;
}
.feature-list h3 { font-size: 1.08rem; margin-bottom: 4px; }
.feature-list p  { margin: 0; font-size: 15.5px; color: var(--muted); }
.section--dark .feature-list li { border-color: var(--d-line-soft); }
.section--dark .feature-list p  { color: var(--d-muted); }
.section--dark .feature-list__n { color: var(--nw-cyan-400); }
/* .tile p and .section--dark p tie on specificity, so the light-mode muted grey
   would otherwise win on source order and land on navy at 3.5:1. */
.section--dark .tile p { color: var(--d-muted); }

/* --- Value / principle tiles --- */
.tile {
  padding: 30px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; }
.tile__icon {
  width: 46px; height: 46px; margin-bottom: 20px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: linear-gradient(145deg, rgba(17,115,212,.10), rgba(59,193,212,.10));
  color: var(--nw-blue-600);
}
.tile__icon svg { width: 23px; height: 23px; }
.tile h3 { font-size: 1.12rem; margin-bottom: 8px; }
.tile p  { margin: 0; font-size: 15.5px; color: var(--muted); }

.section--dark .tile {
  background: rgba(255,255,255,.04);
  border-color: var(--d-line);
}
.section--dark .tile:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.section--dark .tile__icon {
  background: rgba(59,193,212,.14);
  color: var(--nw-cyan-400);
}

/* --- Accordion --- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: clamp(1.05rem, 1.7vw, 1.22rem); font-weight: 600;
  color: var(--ink); text-align: left;
  transition: color .2s var(--ease);
}
.acc__btn:hover { color: var(--nw-blue-600); }
.acc__icon {
  flex: none; width: 26px; height: 26px; position: relative;
  border: 1.5px solid var(--line); border-radius: 50%;
  transition: transform .35s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: opacity .3s var(--ease);
}
.acc__icon::before { width: 11px; height: 1.8px; }
.acc__icon::after  { width: 1.8px; height: 11px; }
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(180deg); border-color: var(--nw-blue-600); }
.acc__btn[aria-expanded="true"] .acc__icon::after { opacity: 0; }
.acc__panel {
  overflow: hidden;
  height: 0;
  transition: height .38s var(--ease);
}
.acc__panel-inner { padding-bottom: 26px; max-width: 74ch; }
.acc__panel-inner p:last-child, .acc__panel-inner ul:last-child { margin-bottom: 0; }

/* --- Pull quote --- */
.quote {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.38; font-weight: 400;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.section--dark .quote { color: #fff; }
.quote__cite {
  display: block; margin-top: 24px;
  font-family: var(--font-sans);
  font-size: 15px; font-style: normal; font-weight: 600;
  color: var(--nw-blue-600);
  letter-spacing: .01em;
}
.section--dark .quote__cite { color: var(--nw-cyan-400); }
.quote__cite small { display: block; font-weight: 400; color: var(--muted); margin-top: 3px; }
.section--dark .quote__cite small { color: var(--d-muted); }

/* --- CTA band --- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, var(--nw-navy-900) 0%, var(--nw-blue-700) 68%, #10639e 100%);
  color: #fff;
  padding-block: clamp(56px, 8vw, 96px);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 130% at 88% 12%, rgba(59,193,212,.34), transparent 60%),
    radial-gradient(50% 100% at 4% 96%, rgba(238,124,43,.16), transparent 65%);
}
.cta-band h2 { color: #fff; }
.cta-band p  { color: rgba(255,255,255,.84); }
.cta-band__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: clamp(28px, 5vw, 56px);
}
.cta-band__text { flex: 1 1 460px; }
.cta-band__text p:last-child { margin-bottom: 0; }
.cta-band .btn-row { margin-top: 0; flex: none; }

/* --- Map / reach --- */
.reach { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.reach__map { width: 100%; }
.reach__map svg { width: 100%; height: auto; }
.reach__dot { fill: var(--nw-cyan-400); }
.reach__dot--pulse { animation: dotPulse 3s ease-in-out infinite; transform-origin: center; }
.reach__dot--pulse:nth-of-type(2) { animation-delay: .5s; }
.reach__dot--pulse:nth-of-type(3) { animation-delay: 1s; }
.reach__dot--pulse:nth-of-type(4) { animation-delay: 1.5s; }
@keyframes dotPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.office-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.office-list li {
  padding: 18px 0; margin: 0;
  border-bottom: 1px solid var(--d-line-soft);
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
}
.office-list__city { font-weight: 600; color: #fff; font-size: 1.02rem; }
.office-list__role { font-size: 14px; color: var(--d-muted); text-align: right; }

/* ==========================================================================
   9. CARDS
   ========================================================================== */

/* --- Sector card (image slot + gradient) --- */
.sector-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 340px;
  padding: 28px;
  border-radius: var(--r-md);
  background: var(--nw-navy-850);
  color: #fff;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease);
}
.sector-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); color: #fff; }
.sector-card::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  /* Drop a photo in by setting --img: url('../img/your-photo.jpg') on the element */
  background-image: var(--img, none);
  background-size: cover; background-position: center;
  transition: transform .7s var(--ease);
}
.sector-card:hover::before { transform: scale(1.06); }
.sector-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(4,24,47,.94) 8%, rgba(4,24,47,.62) 46%, rgba(4,24,47,.30) 100%),
    var(--tint, linear-gradient(145deg, rgba(17,115,212,.42), rgba(59,193,212,.24)));
}
.sector-card__icon {
  width: 40px; height: 40px; margin-bottom: auto;
  color: var(--nw-cyan-400);
}
.sector-card h3 { color: #fff; font-size: 1.3rem; margin: 22px 0 8px; }
.sector-card p  { color: rgba(255,255,255,.8); font-size: 15px; margin: 0 0 18px; }
.sector-card .link-arrow { color: #fff; }

/* --- Plain content card --- */
.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; }
.card__media {
  aspect-ratio: 16 / 9;
  background: var(--img, linear-gradient(140deg, var(--nw-navy-850), var(--nw-blue-700)));
  background-size: cover; background-position: center;
  position: relative;
}
.card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.card__tag { color: var(--nw-blue-700); }
.card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.card h3 a { color: inherit; }
.card h3 a:hover { color: var(--nw-blue-600); }
.card p { font-size: 15.5px; color: var(--muted); margin-bottom: 18px; }
.card .link-arrow { margin-top: auto; }

/* --- Role / job row --- */
.role-list { border-top: 1px solid var(--line); }
.role {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 20px; align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-inline .25s var(--ease), background-color .25s var(--ease);
}
.role:hover { background: var(--surface-2); padding-inline: 16px; }
.role h3 { font-size: 1.08rem; margin: 0; }
.role__meta { font-size: 14.5px; color: var(--muted); }

/* --- Timeline --- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px;
  width: 2px; background: linear-gradient(var(--nw-cyan-500), var(--nw-blue-600), transparent);
}
.timeline li {
  position: relative; margin: 0 0 34px; padding-left: 40px;
}
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--nw-blue-600);
}
.timeline__year {
  display: block; font-family: var(--font-serif);
  font-size: 1.1rem; font-weight: 600; color: var(--nw-blue-700);
  margin-bottom: 4px;
}
.timeline p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ==========================================================================
   10. FIGURES / STATS
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.stat {
  padding: 32px 26px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.stat__n {
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 4.2vw, 3.05rem);
  font-weight: 500; line-height: 1;
  letter-spacing: -.028em;
  color: var(--nw-blue-700);
  margin-bottom: 10px;
}
.stat__l { font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.section--dark .stat { background: rgba(255,255,255,.035); border-color: var(--d-line-soft); }
.section--dark .stat__n { color: var(--nw-cyan-400); }
.section--dark .stat__l { color: var(--d-muted); }

/* ==========================================================================
   11. FORMS
   ========================================================================== */
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 7px; }
.field label {
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: .01em;
}
.field label .req { color: var(--nw-amber-700); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  font: inherit; font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--nw-blue-600);
  box-shadow: 0 0 0 4px rgba(17,115,212,.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field__hint { font-size: 13.5px; color: var(--muted); }
.field--error input, .field--error select, .field--error textarea { border-color: #e04c4c; }
.field__err { font-size: 13.5px; color: #c62f2f; font-weight: 500; }

.check {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  font-size: 14.5px; color: var(--muted);
}
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--nw-blue-600); }

/* Honeypot — off-screen rather than display:none, because some bots skip
   fields that are explicitly hidden. Never focusable by a real visitor. */
.hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__note {
  padding: 16px 18px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  background: rgba(17,115,212,.06);
  border: 1px solid rgba(17,115,212,.18);
  color: var(--text-2);
}
.form__status {
  padding: 14px 18px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500;
}
.form__status[data-state="ok"]  { background: #e8f7ee; border: 1px solid #b6e3c6; color: #1c6b3a; }
.form__status[data-state="err"] { background: #fdeced; border: 1px solid #f3c3c6; color: #a32731; }

/* Contact detail block */
.contact-block { display: grid; gap: 26px; }
.contact-item { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.contact-item__icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: linear-gradient(145deg, rgba(17,115,212,.10), rgba(59,193,212,.10));
  color: var(--nw-blue-600);
}
.contact-item__icon svg { width: 20px; height: 20px; }
.contact-item h3 { font-size: .95rem; margin-bottom: 3px; letter-spacing: .01em; }
.contact-item p, .contact-item address {
  margin: 0; font-size: 15.5px; color: var(--muted);
  font-style: normal; line-height: 1.55;
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--nw-navy-900);
  color: var(--d-muted);
  padding-top: clamp(56px, 7vw, 88px);
  font-size: 15px;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 52px);
  padding-bottom: 48px;
}
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__sub  { color: rgba(255,255,255,.55); }
.footer__blurb {
  margin: 22px 0 24px;
  max-width: 38ch; font-size: 15px; line-height: 1.6;
  color: var(--d-muted);
}
.footer__col h4 {
  color: #fff; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 18px;
}
.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__links li { margin-bottom: 11px; }
.footer__links a { color: var(--d-muted); font-size: 15px; }
.footer__links a:hover { color: #fff; }

.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--d-line); border-radius: var(--r-sm);
  color: var(--d-muted);
  transition: color .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
}
.footer__social a:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.footer__social svg { width: 18px; height: 18px; }

.footer__bottom {
  border-top: 1px solid var(--d-line-soft);
  padding-block: 26px;
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  align-items: center; justify-content: space-between;
  font-size: 14px;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer__legal a { color: var(--d-muted); }
.footer__legal a:hover { color: #fff; }

/* ==========================================================================
   12b. TOUCH TARGETS
   On touch devices every standalone control needs roughly 44x44 CSS px of
   tappable area (WCAG 2.5.8 / platform HIG). These rules grow the hit area
   without changing how anything looks. Links sitting inside a sentence are
   deliberately left alone — inline text links are exempt.
   ========================================================================== */
@media (pointer: coarse), (max-width: 960px) {
  .link-arrow { min-height: 44px; }
  .footer__social a { width: 44px; height: 44px; }
  .check { align-items: center; min-height: 44px; }
  .check input { width: 22px; height: 22px; margin-top: 0; }
  .footer__links a { display: inline-block; padding-block: 6px; }
  .crumbs a { display: inline-block; padding-block: 4px; }
}
/* The logo lockup is the "home" link — give it a full-height hit area. */
.brand { padding-block: 5px; }

/* ==========================================================================
   13. MOTION & REVEAL
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__lines { display: none; }
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

/* Two-column landing hero. Only from 1024px, where there is genuinely room for
   a visual beside the copy — below that the copy gets the full width and the
   visual is removed rather than squeezed. */
@media (min-width: 1024px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: clamp(40px, 5vw, 80px);
  }
  .hero__visual { display: block; }
  .hero__visual .hero__orbit { max-width: 540px; margin-left: auto; }
  .hero .h-display { max-width: 9.4em; }
  .hero__lead { max-width: 46ch; }
}

@media (min-width: 1400px) {
  .hero .h-display { max-width: 10em; }
  .hero__visual .hero__orbit { max-width: 600px; }
}

@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .role { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
  .role__meta--hide-lg { display: none; }
}

@media (max-width: 960px) {
  :root { --header-h: 66px; }

  /* Mobile drawer */
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    z-index: 90;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    padding: 12px var(--gutter) 40px;
    background: #fff;
    border-top: 1px solid var(--line-soft);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .site-header.is-open .nav {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  .nav__link {
    padding: 17px 4px;
    font-size: 18px; font-weight: 500;
    color: var(--text) !important;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--nw-blue-600) !important; }
  .header__cta { margin: 26px 0 0; width: 100%; padding: 15px 24px;
                 --btn-bg: var(--nw-blue-600) !important;
                 --btn-fg: #fff !important;
                 --btn-bd: var(--nw-blue-600) !important; }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .split__aside { position: static; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stats   { grid-template-columns: repeat(2, 1fr); }
  .reach   { grid-template-columns: 1fr; }
  .hero__strip { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
  .hero__copy { max-width: 100%; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .role { grid-template-columns: 1fr; gap: 6px; }
  .role__meta--hide-sm { display: none; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 64px); }
  .hero__cue { display: none; }
  .office-list li { grid-template-columns: 1fr; gap: 2px; }
  .office-list__role { text-align: left; }
  .brand__mark { width: 94px; height: 28px; }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .footer__top { grid-template-columns: 1fr; }
  .hero__strip { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .site-header, .nav-toggle, .hero__cue, .cta-band, .site-footer { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero { min-height: auto; background: none; color: #000; padding: 0 0 24px; }
  .hero .h-display, .hero__lead { color: #000; }
  a { text-decoration: underline; color: #000; }
}