/* =============================================================================
   Medical Standard, design system
   A warm, editorial, Swiss aesthetic. Brand DNA from the company deck
   (navy + petrol-teal + serif headings + eyebrow/rule/card/timeline motifs),
   elevated with allegro.bio-grade restraint: warm paper, generous whitespace,
   a refined Fraunces display serif, and quiet, purposeful motion.
   ========================================================================== */

/* ---- Self-hosted variable fonts (no third-party requests) ---------------- */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:300 600; font-display:swap;
  src:url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:300 600; font-display:swap;
  src:url("../fonts/fraunces-latin-opsz-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

/* ---- Smooth cross-page transitions (progressive enhancement) ------------- */
@view-transition { navigation: auto; }

/* =============================================================================
   1. Design tokens
   ========================================================================== */
:root{
  /* Surfaces, warm "paper" base instead of stark white */
  --paper:      #F6F4EF;
  --paper-2:    #FBFAF6;
  --white:      #FFFFFF;
  --navy:       #0E2841;   /* dark band / footer / ink                       */
  --navy-700:   #14334F;

  /* Ink */
  --ink:        #0E2841;   /* headings                                       */
  --ink-soft:   #233A4D;   /* body                                           */
  --muted:      #51626E;   /* secondary text (AA on paper)                   */

  /* Brand accents */
  --teal-deep:  #0B6E6B;   /* eyebrows, rules, links (AA on light)           */
  --teal:       #149E96;   /* fills: card top-bars, nodes, badges            */
  --teal-bright:#17B3A6;
  --cyan:       #0F9ED5;   /* sparing accent on dark / large only            */
  --teal-on-navy:#86D9D1;  /* teal text on the navy band                     */

  /* Lines */
  --line:       #E4E0D6;
  --line-strong:#D6D1C5;

  /* Type */
  --serif: "Fraunces", "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Scale & rhythm */
  --maxw: 1200px;
  --maxw-text: 760px;
  --pad: clamp(20px, 5.5vw, 64px);
  --section-y: clamp(72px, 11vw, 152px);
  --radius: 6px;
  --radius-lg: 14px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(14,40,65,.05);
  --shadow-sm: 0 2px 8px rgba(14,40,65,.06), 0 1px 2px rgba(14,40,65,.05);
  --shadow-md: 0 10px 30px rgba(14,40,65,.09), 0 3px 8px rgba(14,40,65,.05);
  --shadow-lg: 0 28px 64px rgba(14,40,65,.14);

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

  --header-h: 76px;
  scroll-padding-top: calc(var(--header-h) + 16px);
  color-scheme: light;
}

/* =============================================================================
   2. Reset & base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(16px, .5vw + 15px, 18px);
  line-height:1.7;
  color:var(--ink-soft);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{
  font-family:var(--serif);
  font-optical-sizing:auto;
  color:var(--ink);
  line-height:1.08;
  margin:0;
  font-weight:480;
  letter-spacing:-.015em;
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }
a{ color:var(--teal-deep); text-decoration:none; }
img,svg{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
strong,b{ font-weight:600; color:var(--ink); }
::selection{ background:var(--teal); color:#fff; }

:focus-visible{ outline:3px solid var(--teal-deep); outline-offset:3px; border-radius:3px; }

/* =============================================================================
   3. Layout primitives
   ========================================================================== */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(48px,7vw,88px); }
.section--paper2{ background:var(--paper-2); }
.section--line{ border-block:1px solid var(--line); }
.measure{ max-width:var(--maxw-text); }

.skip-link{
  position:absolute; left:14px; top:-56px; z-index:300;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:8px;
  font-family:var(--sans); font-size:.9rem; font-weight:600; transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{ top:14px; color:#fff; }

/* =============================================================================
   4. Shared motifs, eyebrow + rule
   ========================================================================== */
.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.72rem;
  font-weight:600;
  color:var(--teal-deep);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow .sep{ color:var(--line-strong); }
.eyebrow .num{ font-variant-numeric:tabular-nums; }

.rule{ height:2px; width:100%; background:var(--teal-deep); border:0; margin:0; opacity:.9; transform-origin:left; }
.rule--hair{ height:1px; background:var(--line); opacity:1; }

.section-head{ max-width:760px; }
.section-head .eyebrow{ margin-bottom:20px; }
.section-head h2{ font-size:clamp(2rem, 3.6vw, 3rem); }
.section-head .lede{ margin-top:22px; }

.lede{
  font-family:var(--serif);
  font-weight:340;
  font-style:italic;
  color:var(--muted);
  font-size:clamp(1.15rem, 1.7vw, 1.45rem);
  line-height:1.5;
  max-width:60ch;
  letter-spacing:-.01em;
}

/* =============================================================================
   5. Buttons
   ========================================================================== */
.btn{
  --bg:var(--navy); --fg:#fff; --bd:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.005em;
  padding:14px 26px; min-height:48px; line-height:1; cursor:pointer; white-space:nowrap;
  color:var(--fg); background:var(--bg); border:1.5px solid var(--bd); border-radius:var(--radius);
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); color:var(--fg); }
.btn:active{ transform:translateY(0); }
.btn .arrow{ transition:transform var(--t-fast) var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.btn--primary{ --bg:var(--navy); --fg:#fff; --bd:var(--navy); }
.btn--primary:hover{ --bg:#0a1f33; }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line-strong); }
.btn--ghost:hover{ --bd:var(--teal); --fg:var(--teal-deep); box-shadow:none; }
.btn--light{ --bg:#fff; --fg:var(--navy); --bd:#fff; }
.btn--teal{ --bg:var(--teal-deep); --fg:#fff; --bd:var(--teal-deep); }
.btn--teal:hover{ --bg:#085a58; }
.btn--on-navy-ghost{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.32); }
.btn--on-navy-ghost:hover{ --bd:var(--teal-on-navy); --fg:#fff; box-shadow:none; }

/* Quiet text link with animated underline */
.link-arrow{
  font-family:var(--sans); font-weight:600; font-size:.95rem; color:var(--teal-deep);
  display:inline-flex; align-items:center; gap:.5em; position:relative;
}
.link-arrow::after{ content:""; position:absolute; left:0; right:auto; bottom:-3px; height:2px; width:0; background:currentColor; transition:width var(--t) var(--ease); }
.link-arrow:hover::after{ width:100%; }
.link-arrow .arrow{ transition:transform var(--t-fast) var(--ease); }
.link-arrow:hover .arrow{ transform:translateX(4px); }

/* =============================================================================
   6. Header / navigation
   ========================================================================== */
/* Liquid Glass: full-width square bar (frosted + saturated, glossy top sheen, bright top edge) */
.site-header{
  position:sticky; top:0; z-index:100;
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.06) 58%, rgba(255,255,255,0)),
    color-mix(in srgb, var(--paper) 56%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(190%) brightness(1.05);
  backdrop-filter:blur(18px) saturate(190%) brightness(1.05);
  border-bottom:1px solid color-mix(in srgb, var(--line) 65%, transparent);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.75);
  transition:box-shadow var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
  view-transition-name:site-header;
}
.liquid-defs{ display:none; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{ background:color-mix(in srgb, var(--paper) 95%, transparent); }
  .is-landing .site-header{ background:rgba(11,28,46,.93); }
}
.site-header.is-scrolled{ box-shadow:inset 0 1px 0 0 rgba(255,255,255,.75), 0 10px 30px rgba(14,40,65,.12); }

.nav{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:var(--header-h); flex-wrap:nowrap; }
.nav__primary{ display:flex; align-items:center; gap:36px; }
.nav__primary{ display:flex; align-items:center; gap:36px; }

/* Logo lockup, stacked wordmark + divider + uppercase meta (deck DNA) */
.logo{ display:inline-flex; align-items:center; gap:13px; flex:none; }
.logo__mark{ width:34px; height:34px; color:var(--teal-deep); flex:none; }
.logo__word{ display:flex; align-items:center; gap:12px; }
.logo__name{ display:flex; flex-direction:column; line-height:1; }
.logo__name b{ font-family:var(--serif); font-weight:560; font-size:1.16rem; color:var(--ink); letter-spacing:-.01em; line-height:1.02; }
.logo__name span{ font-family:var(--serif); font-weight:440; font-size:1.16rem; color:var(--ink); line-height:1.02; }
.logo__meta{
  border-left:1.5px solid var(--line-strong); padding-left:12px;
  font-family:var(--sans); font-size:.54rem; line-height:1.5; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
  display:flex; flex-direction:column;
}

.nav__links{ display:flex; align-items:center; gap:30px; font-family:var(--sans); }
.nav__links a{
  color:var(--ink); font-size:.875rem; font-weight:500; letter-spacing:.01em; padding:8px 0; position:relative;
  transition:color var(--t-fast) var(--ease);
}
.nav__links a::after{ content:""; position:absolute; left:0; bottom:2px; height:2px; width:0; background:var(--teal); transition:width var(--t) var(--ease); }
.nav__links a:hover{ color:var(--teal-deep); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after{ width:100%; }
.nav__links a[aria-current="page"]{ color:var(--teal-deep); }

.nav__cta{ display:flex; align-items:center; gap:14px; }
.nav__toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:0; color:var(--ink); cursor:pointer; }
.nav__toggle svg{ width:26px; height:26px; }
.nav__toggle .x{ display:none; }
.nav.is-open .nav__toggle .bars{ display:none; }
.nav.is-open .nav__toggle .x{ display:block; }

/* =============================================================================
   7. Hero
   ========================================================================== */
.hero{ position:relative; padding-block:clamp(56px,9vw,116px) clamp(56px,8vw,104px); overflow:clip; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:clip; }
.hero__arc{ position:absolute; right:-14%; top:-26%; width:min(720px,80vw); aspect-ratio:1; opacity:.5; }
.hero .wrap{ position:relative; z-index:1; }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,5vw,80px); align-items:center; }
.hero h1{ font-size:clamp(2.6rem, 6vw, 4.5rem); font-weight:430; letter-spacing:-.025em; margin-top:24px; max-width:15ch; }
.hero h1 em{ font-style:italic; color:var(--teal-deep); font-weight:380; }
.hero .lede{ margin-top:26px; font-size:clamp(1.15rem,1.7vw,1.45rem); max-width:46ch; }
.hero__actions{ margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; }
.hero__accent{ width:72px; height:3px; background:linear-gradient(90deg,var(--cyan),var(--teal)); margin-top:44px; border-radius:3px; }

/* Hero side panel, facts card with teal top-bar */
.fact-card{ background:var(--white); border:1px solid var(--line); border-top:4px solid var(--teal); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; }
.fact-card__head{ padding:24px 28px 4px; }
.fact-card dl{ margin:0; padding:6px 28px 26px; }
.fact-card .row{ padding:18px 0; border-top:1px solid var(--line); }
.fact-card .row:first-child{ border-top:0; }
.fact-card dt{ font-family:var(--sans); font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); }
.fact-card dd{ margin:8px 0 0; font-family:var(--serif); font-size:1.7rem; font-weight:500; color:var(--ink); line-height:1; }
.fact-card dd small{ font-size:.92rem; color:var(--muted); font-style:italic; font-weight:400; }

/* =============================================================================
   8. Manifesto / lead statement
   ========================================================================== */
.statement{ font-family:var(--serif); font-weight:360; font-size:clamp(1.6rem,3.2vw,2.5rem); line-height:1.3; color:var(--ink); letter-spacing:-.015em; max-width:20ch; }
.lead-para{ font-size:clamp(1.1rem,1.5vw,1.32rem); line-height:1.7; color:var(--ink-soft); max-width:62ch; }
.lead-para--drop::first-letter{
  font-family:var(--serif); font-weight:500; float:left; font-size:3.4em; line-height:.72;
  padding:.06em .12em 0 0; color:var(--teal-deep);
}

/* =============================================================================
   9. Feature columns (three horizons) + generic grids
   ========================================================================== */
.grid{ display:grid; gap:clamp(24px,3vw,40px); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.feature .eyebrow{ font-size:.7rem; }
.feature h3{ font-size:1.45rem; margin-top:16px; font-weight:500; }
.feature__sub{ font-family:var(--serif); font-style:italic; color:var(--teal-deep); margin-top:8px; font-size:1.05rem; }
.feature .col-rule{ height:2px; background:var(--teal-deep); width:100%; margin-top:18px; opacity:.9; }
.feature ul{ margin-top:22px; display:flex; flex-direction:column; gap:15px; }
.feature li{ position:relative; padding-left:24px; color:var(--ink-soft); }
.feature li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--teal); }

/* =============================================================================
   10. Pillar cards, refined toward the deck (teal top-bar + light serif numeral)
   ========================================================================== */
.pillar{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-top:3px solid var(--teal); border-radius:var(--radius); padding:34px 30px 30px;
  box-shadow:var(--shadow-xs);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pillar:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.pillar__num{ font-family:var(--serif); font-weight:400; font-size:2.4rem; line-height:1; color:var(--teal); font-variant-numeric:tabular-nums; }
.pillar h3{ font-size:1.3rem; margin-top:14px; font-weight:520; }
.pillar p{ margin-top:12px; color:var(--ink-soft); font-size:1rem; }
.pillar__tag{
  display:block; margin-top:22px; padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--sans); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.pillar__tag em{ display:block; margin-top:6px; font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:0; color:var(--ink-soft); font-size:.96rem; }

/* =============================================================================
   11. Timeline, concentric-ring nodes on a teal track + arrowhead
   ========================================================================== */
.timeline{ position:relative; margin-top:clamp(40px,5vw,64px); }
.timeline__track{ position:relative; height:3px; background:var(--teal-deep); margin:0 14px; border-radius:3px; transform-origin:left; }
.js .timeline__track{ transform:scaleX(0); }
.timeline.is-in .timeline__track{ transform:scaleX(1); transition:transform 1s var(--ease-out); }
.timeline__track::after{ content:""; position:absolute; right:-4px; top:50%; transform:translateY(-50%); border-left:14px solid var(--teal-deep); border-top:8px solid transparent; border-bottom:8px solid transparent; }
.timeline__nodes{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:-13px; }
.tnode{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-inline:10px; }
.tnode__dot{ width:26px; height:26px; border-radius:50%; background:var(--paper); border:2px solid var(--teal-deep); display:grid; place-items:center; flex:none; }
.section--paper2 .tnode__dot,
.card .tnode__dot{ background:var(--paper-2); }
.tnode__dot::after{ content:""; width:11px; height:11px; border-radius:50%; background:var(--teal); }
.tnode__when{ font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); margin-top:16px; font-weight:600; }
.tnode h3{ font-size:1.12rem; margin-top:8px; font-weight:520; }
.tnode p{ font-size:.95rem; color:var(--muted); margin-top:8px; max-width:24ch; }
.timeline__foot{ margin-top:40px; text-align:center; font-family:var(--serif); font-style:italic; color:var(--muted); }

/* =============================================================================
   12. Stats band (with count-up)
   ========================================================================== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); }
.stat{ }
.stat__num{ font-family:var(--serif); font-weight:480; font-size:clamp(2.4rem,4vw,3.4rem); line-height:1; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat__num .suffix{ color:var(--teal-deep); }
.stat__label{ margin-top:12px; font-family:var(--sans); font-size:.9rem; color:var(--muted); max-width:24ch; }
.stat__rule{ width:42px; height:2px; background:var(--teal); margin-top:16px; }

/* =============================================================================
   13. Logo / trust marquee
   ========================================================================== */
.trust__title{ text-align:center; font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.marquee{ margin-top:30px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__row{ display:flex; gap:clamp(40px,6vw,84px); width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover .marquee__row{ animation-play-state:paused; }
.marquee__row span{ font-family:var(--serif); font-weight:500; font-size:1.2rem; color:var(--muted); letter-spacing:.01em; white-space:nowrap; }
.marquee__row span em{ font-style:normal; font-weight:300; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =============================================================================
   14. Split (we bring / you bring) + callout
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); }
.split .col-rule{ height:2px; background:var(--teal-deep); margin-top:14px; opacity:.9; }
.split .eyebrow{ font-size:.72rem; }
.split ul{ margin-top:26px; display:flex; flex-direction:column; gap:20px; }
.split li{ position:relative; padding-left:26px; color:var(--ink-soft); font-size:1.05rem; }
.split li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--teal); }

.callout{
  border:1.5px solid var(--teal); background:var(--paper-2); border-radius:var(--radius);
  padding:26px 30px; display:flex; gap:18px; align-items:flex-start;
  font-family:var(--serif); font-style:italic; color:var(--ink); font-size:clamp(1.1rem,1.5vw,1.32rem); line-height:1.5;
}
.callout svg{ flex:none; width:28px; height:28px; color:var(--teal-deep); margin-top:4px; }

.pullquote{ font-family:var(--serif); font-weight:380; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.35; color:var(--ink); letter-spacing:-.015em; max-width:22ch; }
.pullquote__by{ margin-top:24px; font-family:var(--sans); font-size:.85rem; letter-spacing:.04em; color:var(--muted); }
.pullquote__by b{ color:var(--ink); }

/* =============================================================================
   15. Cards: generic / insights / team / value
   ========================================================================== */
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-xs); transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

.post{ display:flex; flex-direction:column; height:100%; overflow:hidden; }
.post__media{ aspect-ratio:16/10; background:linear-gradient(135deg,var(--navy),#16465f); position:relative; overflow:hidden; }
.post__media svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.post__body{ padding:26px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.post__meta{ font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); font-weight:600; }
.post h3{ font-size:1.3rem; font-weight:500; }
.post p{ color:var(--muted); font-size:.98rem; }
.post .link-arrow{ margin-top:auto; }

.value{ padding:30px 28px; }
.value__num{ font-family:var(--serif); color:var(--teal); font-size:1.5rem; }
.value h3{ font-size:1.25rem; margin-top:12px; font-weight:520; }
.value p{ margin-top:10px; color:var(--ink-soft); }

.person{ }
.person__photo{ aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; background:#e7ecec; position:relative; border:1px solid var(--line); }
.person__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; filter:grayscale(.12); transition:filter var(--t) var(--ease), transform .9s var(--ease-out); }
.person:hover .person__photo img{ filter:grayscale(0); transform:scale(1.03); }
.person__name{ font-family:var(--serif); font-size:1.2rem; font-weight:520; color:var(--ink); margin-top:16px; }
.person__role{ font-family:var(--sans); font-size:.82rem; letter-spacing:.04em; color:var(--teal-deep); margin-top:5px; font-weight:600; text-transform:uppercase; }
.person__bio{ margin-top:10px; color:var(--muted); font-size:.96rem; }

/* =============================================================================
   16. Page hero (interior pages)
   ========================================================================== */
.page-hero{ padding-block:clamp(56px,8vw,104px) clamp(36px,5vw,64px); position:relative; overflow:clip; }
.page-hero::before{
  content:""; position:absolute; right:-7%; top:-46%; width:min(560px,62vw); aspect-ratio:1; z-index:0;
  pointer-events:none; opacity:.6;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none'%3E%3Cg stroke='%23149E96' opacity='0.34'%3E%3Ccircle cx='300' cy='300' r='58' stroke-width='1.5'/%3E%3Ccircle cx='300' cy='300' r='110' stroke-width='1.5'/%3E%3Ccircle cx='300' cy='300' r='186' stroke-width='1.5'/%3E%3C/g%3E%3Ccircle cx='300' cy='300' r='290' stroke='%230F9ED5' opacity='0.22' stroke-width='1.5'/%3E%3Ccircle cx='300' cy='300' r='14' fill='%23149E96' opacity='0.3'/%3E%3C/svg%3E");
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ font-size:clamp(2.4rem,5vw,3.9rem); font-weight:430; letter-spacing:-.025em; margin-top:22px; max-width:18ch; }
.page-hero .lede{ margin-top:24px; }
.breadcrumb{ font-family:var(--sans); font-size:.8rem; color:var(--muted); display:flex; gap:.6em; align-items:center; flex-wrap:wrap; }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--teal-deep); }
.breadcrumb [aria-current]{ color:var(--ink); }
.breadcrumb .sep{ color:var(--line-strong); }

/* =============================================================================
   16b. Imagery, frames, hero media, bands, chips, figures
   ========================================================================== */
.frame{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-md); background:#e7ecec; }
.frame::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--teal); z-index:2; }
.frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame--tall{ aspect-ratio:4/5; }
.frame--wide{ aspect-ratio:16/10; }
.frame--square{ aspect-ratio:1/1; }

.hero__media{ position:relative; }
.chip{
  position:absolute; left:18px; bottom:18px; z-index:3;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:14px 18px; display:flex; gap:14px; align-items:center;
}
.chip__k{ font-family:var(--sans); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.chip__v{ font-family:var(--serif); font-weight:560; color:var(--ink); font-size:1rem; line-height:1.2; }
.chip .div{ width:1px; align-self:stretch; background:var(--line); }

.media-band{ position:relative; min-height:clamp(280px,40vw,440px); display:grid; align-items:center; overflow:clip; border-block:1px solid var(--line); }
.media-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.media-band__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(14,40,65,.86) 0%, rgba(14,40,65,.66) 46%, rgba(14,40,65,.32) 100%); }
.media-band .wrap{ position:relative; z-index:2; padding-block:clamp(48px,7vw,88px); }
.media-band h2, .media-band p{ color:#fff; }
.media-band .eyebrow{ color:var(--teal-on-navy); }
.media-band p{ color:#d4dee6; }

figure.figure{ margin:0; }
figure.figure figcaption{ margin-top:14px; font-family:var(--sans); font-size:.82rem; color:var(--muted); }

/* =============================================================================
   17. CTA band (navy)
   ========================================================================== */
.cta{ background:var(--navy); color:#fff; position:relative; overflow:clip; view-transition-name:cta-band; }
.cta__arc{ position:absolute; left:-12%; bottom:-40%; width:min(560px,70vw); aspect-ratio:1; opacity:.7; pointer-events:none; }
.cta .wrap{ position:relative; z-index:1; padding-block:clamp(64px,9vw,120px); }
.cta .eyebrow{ color:var(--teal-on-navy); }
.cta h2{ color:#fff; font-size:clamp(2rem,3.8vw,3.1rem); margin-top:20px; max-width:18ch; font-weight:440; }
.cta p{ color:#c4d2dc; margin-top:20px; max-width:54ch; font-size:1.12rem; }
.cta__actions{ margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; }

/* =============================================================================
   18. Forms (contact)
   ========================================================================== */
.form{ display:grid; gap:22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--sans); font-weight:600; font-size:.85rem; color:var(--ink); letter-spacing:.01em; }
.field label .req{ color:var(--teal-deep); }
.field .hint{ font-family:var(--sans); font-size:.8rem; color:var(--muted); }
.field input, .field textarea, .field select{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--white);
  border:1.5px solid var(--line-strong); border-radius:var(--radius); padding:14px 16px; min-height:50px;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea{ min-height:140px; resize:vertical; line-height:1.6; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--teal-deep); box-shadow:0 0 0 3px rgba(11,110,107,.16); }
.field input:user-invalid, .field textarea:user-invalid{ border-color:#c0492b; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form__status{ font-family:var(--sans); font-size:.95rem; }
.form__status[data-state="ok"]{ color:var(--teal-deep); }
.form__status[data-state="err"]{ color:#c0492b; }

.contact-aside{ display:flex; flex-direction:column; gap:28px; }
.contact-block h3{ font-size:1.05rem; font-weight:560; }
.contact-block p, .contact-block a{ color:var(--ink-soft); font-size:1rem; }
.contact-block a:hover{ color:var(--teal-deep); }
.contact-block .eyebrow{ margin-bottom:10px; }

/* =============================================================================
   19. Footer
   ========================================================================== */
.site-footer{ background:var(--white); border-top:1px solid var(--line); padding-block:64px 30px; view-transition-name:site-footer; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:44px; }
.footer__brand p{ color:var(--muted); font-size:.98rem; max-width:32ch; margin-top:18px; }
.footer__col-title{ font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:0 0 16px; font-weight:600; line-height:1.3; }
.footer__col a{ display:inline-flex; align-items:center; color:var(--ink-soft); font-size:.96rem; padding:9px 0; min-height:40px; }
.footer__col a:hover{ color:var(--teal-deep); }
.footer__offices{ display:flex; flex-direction:column; gap:18px; }
.office address{ font-style:normal; color:var(--muted); font-size:.92rem; line-height:1.6; }
.office b{ display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:6px; }
.footer__bottom{ margin-top:52px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.footer__bottom small{ font-family:var(--sans); font-size:.82rem; color:var(--muted); }
.footer__legal{ display:flex; gap:8px; flex-wrap:wrap; }
.footer__legal a{ font-family:var(--sans); font-size:.82rem; color:var(--muted); padding:8px 10px; min-height:40px; display:inline-flex; align-items:center; }
.footer__legal a:hover{ color:var(--teal-deep); }
.to-top{ font-family:var(--sans); font-size:.82rem; color:var(--muted); display:inline-flex; align-items:center; gap:.5em; padding:8px 4px; }
.to-top:hover{ color:var(--teal-deep); }

/* =============================================================================
   20. Scroll-reveal animation
   ========================================================================== */
/* Gated behind .js so that, without JavaScript, all content stays visible. */
.reveal{ transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal{ opacity:0; transform:translateY(20px); }
.js .reveal.is-in{ opacity:1; transform:none; }
/* Above-the-fold heroes always paint immediately (LCP) */
.hero .reveal, .page-hero .reveal{ opacity:1 !important; transform:none !important; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }

/* =============================================================================
   21. Utilities
   ========================================================================== */
.u-center{ text-align:center; margin-inline:auto; }
.u-mt-s{ margin-top:20px; } .u-mt-m{ margin-top:32px; } .u-mt-l{ margin-top:clamp(40px,6vw,72px); }
.u-grid-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.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; }
.section-note{ font-family:var(--serif); font-style:italic; color:var(--muted); text-align:center; max-width:62ch; margin-inline:auto; font-size:1.05rem; }

/* =============================================================================
   22. Responsive
   ========================================================================== */
@media (max-width:1024px){
  .hero__grid{ grid-template-columns:1fr; }
  .fact-card{ max-width:460px; margin-inline:auto; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
}
@media (max-width:900px){
  /* Switch to mobile nav before the desktop bar runs out of room */
  .nav__links, .nav__cta .btn{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .logo__meta{ display:none; }
  .nav__links{
    position:absolute; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1); top:100%;
    flex-direction:column; align-items:stretch; gap:0; padding:8px var(--pad) 20px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 26%),
      color-mix(in srgb, var(--paper) 88%, transparent);
    -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
    border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px rgba(14,40,65,.14);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
  }
  .nav.is-open .nav__links{ display:flex; opacity:1; transform:none; pointer-events:auto; }
  .nav.is-open .nav__links a{ padding:16px 2px; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav.is-open .nav__links a::after{ display:none; }
  .grid--3{ grid-template-columns:1fr; }
  .timeline__track{ display:none; }
  .timeline__nodes{ grid-template-columns:1fr; gap:14px; margin-top:0; text-align:left; }
  .tnode{ flex-direction:row; align-items:flex-start; gap:16px; text-align:left; padding-inline:0; border-left:2px solid var(--line); padding-left:20px; position:relative; }
  .tnode__dot{ position:absolute; left:-14px; top:2px; }
  .tnode p{ max-width:46ch; }
  .timeline__foot{ text-align:left; }
  .split{ grid-template-columns:1fr; gap:40px; }
  .form__row{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:560px){
  .grid--2, .grid--4{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .hero__actions .btn, .cta__actions .btn{ width:100%; }
}

/* =============================================================================
   22b. Landing splash + advanced motion
   ========================================================================== */
/* Scroll progress bar (all pages) */
.scroll-progress{
  position:fixed; left:0; top:0; height:3px; width:100%; z-index:300;
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none;
  background:linear-gradient(90deg, var(--teal-deep), var(--teal) 55%, var(--cyan));
}

/* --- Landing: dark liquid-glass bar OVERLAYING the full-bleed splash, white text --- */
.is-landing .site-header{
  position:absolute; top:0; left:0; right:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.02) 58%, rgba(255,255,255,0)),
    rgba(13,31,50,.52);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.26);
}
.is-landing .site-header.is-scrolled{ box-shadow:inset 0 1px 0 0 rgba(255,255,255,.26), 0 12px 34px rgba(0,0,0,.28); }
.is-landing .logo__name b, .is-landing .logo__name span{ color:#fff; }
.is-landing .logo__mark{ color:var(--teal-on-navy); }
.is-landing .logo__meta{ color:rgba(255,255,255,.72); border-left-color:rgba(255,255,255,.3); }
.is-landing .nav__links a{ color:rgba(255,255,255,.92); }
.is-landing .nav__links a::after{ background:#fff; }
.is-landing .nav__links a:hover{ color:#fff; }
.is-landing .nav__toggle{ color:#fff; }
.is-landing .nav__cta .btn--primary{ background:#fff; color:var(--navy); border-color:#fff; }
.is-landing .nav__cta .btn--primary:hover{ background:var(--teal-on-navy); border-color:var(--teal-on-navy); }
@media (max-width:900px){ .is-landing .nav.is-open .nav__links{ background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 32%), rgba(16,34,53,.9); } .is-landing .nav.is-open .nav__links a{ color:#fff; border-bottom-color:rgba(255,255,255,.12); } }
/* White focus ring over the dark splash (teal ring is invisible there) */
.is-landing .site-header :focus-visible, .splash :focus-visible{ outline-color:#fff; box-shadow:0 0 0 5px rgba(7,20,34,.55); }

/* --- The splash --- */
.splash{ position:relative; min-height:100svh; display:grid; align-items:center; overflow:clip; isolation:isolate; }
.splash__media{ position:absolute; inset:0; z-index:-3; }
.splash__media img{ width:100%; height:100%; object-fit:cover; }
.js .splash__media img{ animation:kenburns 20s cubic-bezier(.33,0,.2,1) both; }
@keyframes kenburns{ from{ transform:scale(1.12) translate(1.5%, -1.5%); } to{ transform:scale(1) translate(0,0); } }
.splash__scrim{ position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 72% 32%, rgba(14,40,65,.42), rgba(11,32,52,.78) 62%, rgba(7,20,34,.92) 100%),
    linear-gradient(180deg, rgba(7,20,34,.5), transparent 26%, transparent 62%, rgba(7,20,34,.7));
}
.splash__grain{ position:absolute; inset:0; z-index:-1; opacity:.5; pointer-events:none; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.10) 0.5px, transparent 0.5px); background-size:3px 3px; }

/* Reticle (compounding rings - the growth motif) */
.reticle{ position:absolute; z-index:-1; right:-8%; top:37%; translate:0 -50%; width:min(740px,78vw); aspect-ratio:1; opacity:.95; pointer-events:none;
  filter:drop-shadow(0 0 34px rgba(20,158,150,.20)); will-change:transform;
  transform:translate(var(--px,0px), var(--py,0px)); transition:transform .5s var(--ease-out); }
.reticle [data-draw]{ stroke-dasharray:1; stroke-dashoffset:1; }
.js .reticle [data-draw]{ animation:draw 1.7s var(--ease-out) forwards; }
.reticle [data-draw="2"]{ animation-delay:.16s; } .reticle [data-draw="3"]{ animation-delay:.32s; }
.reticle [data-draw="4"]{ animation-delay:.48s; } .reticle [data-draw="5"]{ animation-delay:.6s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.reticle__spin{ transform-box:fill-box; transform-origin:center; }
.js .reticle__spin{ animation:spin 64s linear infinite 1.5s; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.reticle__spin--rev{ animation-direction:reverse !important; animation-duration:96s !important; }
.reticle__pulse{ transform-box:fill-box; transform-origin:center; }
.js .reticle__pulse{ animation:pulse 4.6s ease-in-out infinite 1.5s; }
@keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.1); } }

/* Splash content */
.splash__inner{ position:relative; z-index:1; color:#fff; padding-block:clamp(130px,20vh,220px); }
.splash__eyebrow{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:.74rem; font-weight:600; color:var(--teal-on-navy); display:inline-flex; gap:.6em; align-items:center; }
.splash__eyebrow .sep{ color:rgba(255,255,255,.4); }
.js .splash__eyebrow{ opacity:0; animation:fadeUp .9s var(--ease-out) .05s forwards; }
.splash__title{ color:#fff; font-weight:370; letter-spacing:-.02em; line-height:1.0; margin-top:26px;
  font-size:clamp(3.1rem, 9.2vw, 7.4rem); }
.splash__title .line{ display:block; overflow:hidden; padding-bottom:.18em; margin-bottom:-.14em; }
.splash__title .w{ display:inline-block; transform:translateY(118%); will-change:transform; }
.js .splash__title .w{ animation:riseWord .9s cubic-bezier(.2,.8,.2,1) forwards; }
.splash__title .line:nth-child(1) .w{ animation-delay:.12s; }
.splash__title .line:nth-child(2) .w:nth-child(1){ animation-delay:.26s; }
.splash__title .line:nth-child(2) .w:nth-child(2){ animation-delay:.34s; }
.splash__title .accent{ font-style:italic; color:var(--teal-on-navy); }
@keyframes riseWord{ to{ transform:translateY(0); } }
.splash__sub{ font-family:var(--serif); font-style:italic; font-weight:340; letter-spacing:-.01em; line-height:1.45; margin-top:26px; max-width:42ch; font-size:clamp(1.2rem,1.7vw,1.5rem); color:rgba(255,255,255,.9); }
.js .splash__sub{ opacity:0; animation:fadeUp 1s var(--ease-out) .7s forwards; }
.splash__actions{ margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; }
.js .splash__actions{ opacity:0; animation:fadeUp 1s var(--ease-out) .9s forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.splash__foot{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding-bottom:clamp(20px,4vh,40px); }
.splash__foot .row{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.splash__foot small, .splash__foot a{ font-family:var(--sans); font-size:.78rem; letter-spacing:.04em; color:rgba(255,255,255,.82); }
.splash__foot a{ padding:6px 0; }
.splash__foot a:hover{ color:#fff; }
.splash__legal{ display:flex; gap:18px; }
.js .splash__foot{ opacity:0; animation:fadeUp 1s var(--ease-out) 1.15s forwards; }

/* --- Clip-path image reveals (frames + media bands) --- */
.js .frame img{ clip-path:inset(0 0 100% 0); transform:scale(1.06); transition:clip-path 1.1s var(--ease-out), transform 1.3s var(--ease-out); }
.js .frame.is-shown img{ clip-path:inset(0 0 0 0); transform:none; }
.js .media-band img{ clip-path:inset(0 0 0 100%); transition:clip-path 1.25s var(--ease-out); }
.js .media-band.is-shown img{ clip-path:inset(0 0 0 0); }

@media (max-width:760px){
  .reticle{ right:-26%; top:33%; opacity:.55; }
  .splash__foot .row{ justify-content:flex-start; }
}

/* =============================================================================
   23. Reduced motion & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1!important; transform:none!important; }
  .timeline__track{ transform:scaleX(1)!important; }
  .marquee__row{ animation:none!important; }
  /* Splash + media reveals: show final state, no motion */
  .splash__title .w{ transform:none!important; }
  .splash__eyebrow, .splash__sub, .splash__actions, .splash__foot{ opacity:1!important; transform:none!important; }
  .reticle [data-draw]{ stroke-dashoffset:0!important; }
  .reticle__spin, .reticle__pulse{ animation:none!important; }
  .splash__media img{ animation:none!important; transform:none!important; }
  .frame img, .media-band img{ clip-path:none!important; transform:none!important; }
  @view-transition{ navigation:none; }
}
@media print{
  .site-header, .site-footer, .cta, .nav__toggle, .hero__bg{ display:none!important; }
  body{ background:#fff; color:#000; }
  a{ color:#000; text-decoration:underline; }
}