/* ==========================================================================
   Castor Properties — site styles
   One stylesheet for the whole site. No framework, no build step.

   HOW TO CHANGE THINGS
   - Colors, fonts, spacing: the :root block below. Change once, applies
     everywhere.
   - Sections are numbered and appear roughly in page order.
   - All mobile rules live at the bottom under "RESPONSIVE".
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS  (self-hosted in assets/fonts — no Google connection)

   Source Serif 4 for headlines: reads as considered and established, which is
   the right register for regulatory and compliance work.
   Inter for everything else: holds up at small sizes, which matters because
   this site carries long service lists.
   -------------------------------------------------------------------------- */
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/source-serif-4-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — edit these, not the rules below
   -------------------------------------------------------------------------- */
:root {
  /* Navy — now a real surface color, not just an outline color.
     --navy-700 is the exact navy from the Castor logo. */
  --navy-900: #0b1e33;
  --navy-800: #12293f;
  --navy-700: #1d3454;

  /* Blues from the logo gradient */
  --blue:     #1264a3;   /* primary action */
  --blue-600: #1b75bb;   /* accent that carries text (passes contrast) */
  --blue-400: #26a9e0;   /* bright accent — rules, marks, on-dark text */

  /* Neutrals */
  --paper:    #ffffff;
  --paper-2:  #f2f5f8;   /* alternating section background */
  --paper-3:  #e8eef4;
  --line:     #dde5ec;
  --line-dark: rgba(255,255,255,.14);

  /* Text on light */
  --ink:   #10202f;      /* headlines */
  --body:  #46545f;      /* paragraphs — 7.4:1 on white */
  --muted: #667685;      /* captions */

  /* Text on navy */
  --on-dark:       #eaf1f7;
  --on-dark-body:  #c2d3e2;
  --on-dark-muted: #8fa8bf;

  /* Type */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --container: 1240px;
  --gutter: 28px;
  --logo-w: 200px;       /* header logo width — was 150px */
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.68;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.13;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}
h1 { font-size: clamp(38px, 5vw, 62px); }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3 { font-family: var(--font-sans); font-size: 20px; font-weight: 600;
     line-height: 1.35; letter-spacing: -0.005em; }

p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 20px; line-height: 1.6; color: var(--body); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--blue-400); outline-offset: 3px;
}

.sr-only {
  position: absolute; 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: -9999px; top: 0; z-index: 300;
  background: var(--blue); color: #fff; padding: 14px 22px; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 900px; }

.section { padding: 104px 0; position: relative; }
.section--tight { padding: 72px 0; }
.section--alt  { background: var(--paper-2); }
.section--dark { background: var(--navy-800); color: var(--on-dark-body); }
.section--dark h2, .section--dark h3 { color: #fff; }

/* Small uppercase label that sits above a headline */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  /* --blue rather than --blue-600: at 12.5px this is small text, and
     --blue-600 lands at 4.45:1 on the alt background — just under the 4.5 bar. */
  color: var(--blue); margin: 0 0 20px;
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--blue-400); flex: 0 0 auto; }
.section--dark .eyebrow { color: var(--blue-400); }

.section-head { max-width: 760px; margin-bottom: 60px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { font-size: 18.5px; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15.5px; line-height: 1;
  padding: 17px 32px; border: 1.5px solid transparent; border-radius: 2px;
  cursor: pointer; transition: background-color .18s, border-color .18s, color .18s;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 15px; height: 15px; fill: currentColor; }

.btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--primary:hover { background: #0e5289; border-color: #0e5289; color: #fff; }

.btn--ghost { background: transparent; color: var(--blue); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--blue); background: var(--paper-2); color: var(--blue); }

/* on navy */
.btn--light { background: #fff; color: var(--navy-800); border-color: #fff; }
.btn--light:hover { background: var(--paper-3); border-color: var(--paper-3); color: var(--navy-800); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.09); color: #fff; }

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

/* --------------------------------------------------------------------------
   5. HEADER + NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 28px; min-height: 104px; flex-wrap: wrap;
}
.logo { flex: 0 0 auto; display: block; }
.logo img { width: var(--logo-w); height: auto; }

.nav ul { display: flex; align-items: center; gap: 38px; list-style: none; margin: 0; padding: 0; }
.nav a, .nav .nav__toggle {
  font-family: var(--font-sans); font-weight: 500; font-size: 15.5px;
  color: var(--ink); background: none; border: 0; padding: 10px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: color .15s;
}
.nav a:hover, .nav .nav__toggle:hover { color: var(--blue); text-decoration: none; }
.nav a[aria-current="page"], .nav li.is-active > a, .nav li.is-active > .nav__toggle {
  color: var(--blue); font-weight: 600;
}
/* The `.nav a` rule above zeroes out background and border, so the Contact
   button has to put both back explicitly — otherwise it renders as invisible
   white text on the white header. */
.nav .btn {
  padding: 13px 24px; font-size: 14.5px; font-weight: 600;
  background: var(--blue); border: 1.5px solid var(--blue); color: #fff;
}
.nav .btn:hover { background: #0e5289; border-color: #0e5289; color: #fff; }

/* Login — the front door to Castor Operations, which is a separate app on its
   own Netlify site. Outlined rather than filled so it reads as secondary to
   Contact Us and the two buttons don't compete. */
.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav .btn--login {
  background: transparent; border-color: var(--line); color: var(--ink);
  padding: 13px 20px;
}
.nav .btn--login:hover { background: var(--paper-2); border-color: var(--blue); color: var(--blue); }
.btn__lock { width: 12px; height: 13.7px; fill: currentColor; opacity: .8; }

.nav__item--has-menu { position: relative; }
.nav__caret { width: 9px; height: 6px; fill: currentColor; transition: transform .18s; }
.nav__item--has-menu[data-open="true"] .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 250px; background: #fff;
  border: 1px solid var(--line); border-top: 2px solid var(--blue-400);
  box-shadow: 0 18px 42px rgba(12,35,58,.15); padding: 8px 0;
  opacity: 0; visibility: hidden;
  transition: opacity .16s, visibility .16s, transform .16s;
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu,
.nav__item--has-menu[data-open="true"] .nav__menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__menu ul { display: block; }
.nav__menu a { display: block; padding: 12px 24px; font-size: 15px; white-space: nowrap; }
.nav__menu a:hover { background: var(--paper-2); color: var(--blue); }

.nav-toggle { display: none; width: 48px; height: 48px; background: none; border: 0; cursor: pointer; padding: 12px; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 6px 0; transition: transform .22s, opacity .18s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5b. COMPANY LICENSES IN THE HEADER
   Sits between the logo and the nav on wide screens. Below 1180px it drops to
   its own full-width row under the logo so nothing gets crushed.
   The numbers live in the markup, repeated in every .html file.
   -------------------------------------------------------------------------- */
.licenses {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 22px; list-style: none; margin: 0; padding: 0;
  flex: 1 1 auto; min-width: 0;
}
.licenses li {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--ink); white-space: nowrap;
  letter-spacing: .01em; position: relative;
  /* Center the issuing body over its number. Without this the label and the
     number are both left-aligned, and since they are different widths every
     pair looks slightly off. */
  text-align: center;
}
.licenses li + li::before {
  content: ""; position: absolute; left: -11px; top: 50%;
  transform: translateY(-50%); width: 1px; height: 11px; background: var(--line);
}
.licenses span {
  display: block; font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .11em; color: var(--muted); margin-bottom: 1px;
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative; background: var(--navy-900) center/cover no-repeat;
  color: var(--on-dark-body); overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,30,51,.95) 0%, rgba(11,30,51,.86) 46%, rgba(18,41,63,.62) 100%);
}
.hero__inner { position: relative; z-index: 1; padding: 118px 0 124px; max-width: 800px; }
.hero h1 { color: #fff; margin-bottom: 26px; }
.hero p { font-size: 20.5px; line-height: 1.6; color: var(--on-dark-body); max-width: 640px; }
.hero .eyebrow { color: var(--blue-400); }

/* short banner on interior pages */
.pagehead { position: relative; background: var(--navy-900) center/cover no-repeat; overflow: hidden; }
.pagehead::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,30,51,.94), rgba(18,41,63,.72));
}
.pagehead__inner { position: relative; z-index: 1; padding: 78px 0 82px; max-width: 820px; }
.pagehead h1 { color: #fff; font-size: clamp(32px, 4vw, 50px); margin-bottom: 14px; }
.pagehead p { color: var(--on-dark-body); font-size: 19px; max-width: 620px; margin: 0; }
.pagehead .eyebrow { color: var(--blue-400); }

/* --------------------------------------------------------------------------
   7. CAPABILITY BAND
   Sits directly under the hero. Replaced an earlier band of statistics —
   these say what Castor can be engaged to do rather than quoting numbers.
   Each cell is a link through to the relevant service page.
   -------------------------------------------------------------------------- */
.capability { background: var(--navy-700); }
.capability__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--line-dark);
}
.cap {
  display: block; padding: 40px 30px 38px;
  border-right: 1px solid var(--line-dark);
  color: var(--on-dark-body);
  transition: background-color .2s;
}
.cap:hover { background: rgba(255,255,255,.05); text-decoration: none; }
.cap__mark {
  display: block; width: 32px; height: 2px;
  background: var(--blue-400); margin-bottom: 20px;
  transition: width .2s;
}
.cap:hover .cap__mark { width: 52px; }
.cap__title {
  font-family: var(--font-display); font-weight: 600; font-size: 23px;
  line-height: 1.2; color: #fff; margin: 0 0 10px; letter-spacing: -0.01em;
}
.cap p { font-size: 14.5px; line-height: 1.55; color: var(--on-dark-body); margin: 0; }

/* --------------------------------------------------------------------------
   8. SERVICE AREA CARDS
   -------------------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.svc-grid--four { grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Compact variant used for the advisory row — no icon, tighter padding */
.svc--compact { padding: 30px 26px 26px; }
.svc--compact h3 { font-size: 19px; margin-bottom: 12px; }
.svc--compact p { font-size: 15.5px; }

.svc {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--blue-400);
  padding: 40px 34px 34px;
  transition: box-shadow .2s, transform .2s;
}
.svc:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(12,35,58,.11); }
.svc__icon { height: 62px; margin-bottom: 26px; }
.svc__icon img { flex: 0 0 auto; height: 62px; width: auto; }
.svc h3 { margin-bottom: 14px; font-size: 21px; color: var(--ink); }
.svc p { font-size: 16.5px; }
.svc__list { list-style: none; margin: 0 0 8px; padding: 0; font-size: 15.5px; }
.svc__list li { padding: 7px 0 7px 20px; position: relative; border-top: 1px solid var(--line); }
.svc__list li:first-child { border-top: 0; }
.svc__list li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 6px; height: 6px; background: var(--blue-400); border-radius: 50%;
}
.svc__foot { margin-top: auto; padding-top: 26px; }
.svc__link { font-weight: 600; font-size: 15.5px; display: inline-flex; align-items: center; gap: 8px; }
.svc__link svg { width: 14px; height: 14px; fill: currentColor; transition: transform .18s; }
.svc__link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   9. THE COMPLIANCE SERVICE INDEX
   Six groups, all services on the page rather than hidden in a PDF.
   -------------------------------------------------------------------------- */
.index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }

.index__group { padding: 34px 0; border-top: 1px solid var(--line); }
.index__group:first-child, .index__group:nth-child(2) { border-top: 0; padding-top: 0; }

.index__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.index__num {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--blue-400); flex: 0 0 auto;
}
.index__group h3 { margin: 0; font-size: 19px; color: var(--ink); }

.index ul { list-style: none; margin: 0; padding: 0; }
.index li {
  position: relative; padding: 6px 0 6px 24px;
  font-size: 16px; line-height: 1.5; color: var(--body);
}
.index li::before {
  content: ""; position: absolute; left: 2px; top: 14px;
  width: 9px; height: 2px; background: var(--blue-400);
}

/* --------------------------------------------------------------------------
   10. WHO WE SERVE
   -------------------------------------------------------------------------- */
.serve { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.serve__item { padding: 32px 30px; background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); }
.serve__item h3 { margin-bottom: 10px; font-size: 19px; }
.serve__item p { font-size: 16px; margin: 0; color: var(--on-dark-body); }

/* --------------------------------------------------------------------------
   11. TWO-COLUMN CONTENT
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 76px; align-items: center; }
.split--flip > .split__media { order: -1; }
.split__text h2 { margin-bottom: 22px; }
.framed { position: relative; }
.framed img { width: 100%; }
.framed::after {
  content: ""; position: absolute; left: -14px; bottom: -14px;
  width: 118px; height: 118px; border-left: 3px solid var(--blue-400);
  border-bottom: 3px solid var(--blue-400); pointer-events: none;
}

/* --------------------------------------------------------------------------
   12. FOUNDERS  (monogram, no stock silhouettes)
   -------------------------------------------------------------------------- */
.founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; }
/* One leader on their own: cap the card at a comfortable reading width instead
   of letting it stretch full-bleed or sit in a half-empty two-column grid.
   Remove this class once a second card joins the section. */
.founders--solo { grid-template-columns: minmax(0, 720px); }
.founder {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--blue-400);
  padding: 40px 38px;
}
/* No avatar. Both founders share the initials A.S., so a monogram reads as a
   bug rather than a design — and a stock silhouette is worse. The name itself
   carries the block instead. */
.founder__top { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.founder__name { font-family: var(--font-display); font-weight: 600; font-size: 27px;
                 color: var(--ink); margin: 0 0 6px; line-height: 1.15; letter-spacing: -0.015em; }
.founder__role { font-size: 13px; font-weight: 600; text-transform: uppercase;
                 letter-spacing: .13em; color: var(--blue-600); margin: 0; }
.founder__bio p { font-size: 16.5px; }
.founder__creds { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.founder__creds h4 {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 12px;
}
/* Credentials read as a plain list — no pills, boxes, borders or fills.
   Deliberate: the boxed treatment looked like tags rather than credentials. */
.creds { list-style: none; margin: 0; padding: 0; }
.creds li {
  font-size: 15px; font-weight: 400; color: var(--body);
  line-height: 1.45; padding: 4px 0;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li {
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); padding: 6px 13px; border-radius: 2px;
}

/* --------------------------------------------------------------------------
   13. DOCUMENT LINKS
   -------------------------------------------------------------------------- */
.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.docs a {
  display: flex; align-items: center; gap: 15px; padding: 18px 22px;
  background: #fff; border: 1px solid var(--line); font-size: 16px; font-weight: 500;
  color: var(--ink); transition: border-color .18s, box-shadow .18s;
}
.docs a:hover { border-color: var(--blue-400); box-shadow: 0 6px 18px rgba(12,35,58,.08); text-decoration: none; }
.docs svg { flex: 0 0 auto; width: 24px; height: 28px; }
.docs span { flex: 1; }
.docs em { font-style: normal; font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------------------
   13b. REQUIREMENTS TABLE
   Used for the NSPIRE Affirmative Requirements on nspire.html. Collapses to
   stacked cards below 760px so it stays readable on a phone.
   -------------------------------------------------------------------------- */
.req-table { margin: 0 0 46px; }
.req-table__cap {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em; color: var(--blue);
  margin: 0 0 14px; display: flex; align-items: center; gap: 12px;
}
.req-table__cap::before { content: ""; width: 26px; height: 2px; background: var(--blue-400); }

.req-table table { width: 100%; border-collapse: collapse; background: #fff; }
.req-table th, .req-table td {
  text-align: left; padding: 14px 18px; border: 1px solid var(--line);
  font-size: 16px; line-height: 1.5; vertical-align: top;
}
.req-table th {
  background: var(--paper-2); font-family: var(--font-sans); font-weight: 600;
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink);
}
.req-table td:first-child { font-weight: 600; color: var(--ink); width: 38%; }
.req-table tbody tr:hover td { background: var(--paper-2); }

/* Deadline callout — this one is time-sensitive, so it gets its own treatment */
.deadline {
  border: 1px solid var(--blue-400); border-left: 4px solid var(--blue-400);
  background: #fff; padding: 26px 30px; margin: 0 0 40px;
}
.deadline h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  color: var(--ink); margin: 0 0 12px;
}
.deadline p { font-size: 16.5px; margin: 0 0 14px; }
.deadline p:last-child { margin-bottom: 0; }
.deadline__date {
  display: inline-block; font-family: var(--font-sans); font-weight: 600;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em;
  background: var(--blue); color: #fff; padding: 6px 12px; margin-bottom: 14px;
}
.deadline ul { margin: 0 0 14px; padding-left: 22px; }
.deadline li { font-size: 16px; margin-bottom: 6px; }
.deadline li::marker { color: var(--blue-400); }
.source-note { font-size: 14px; color: var(--muted); margin: 0; }

@media (max-width: 760px) {
  .req-table thead { display: none; }
  .req-table table, .req-table tbody, .req-table tr, .req-table td { display: block; width: 100%; }
  .req-table tr { margin-bottom: 14px; border: 1px solid var(--line); background: #fff; }
  .req-table td { border: 0; border-top: 1px solid var(--line); padding: 12px 16px; }
  .req-table td:first-child { border-top: 0; width: 100%; background: var(--paper-2); }
  .deadline { padding: 22px 20px; }
}

/* --------------------------------------------------------------------------
   14. CONTACT + FORM
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }

.contact-list { list-style: none; margin: 0 0 30px; padding: 0; }
.contact-list li { display: flex; gap: 14px; margin-bottom: 18px; font-size: 16.5px; }
.contact-list svg { flex: 0 0 auto; width: 20px; height: 20px; fill: var(--blue-400); margin-top: 4px; }
.contact-list a { color: var(--on-dark-body); }
.contact-list a:hover { color: #fff; }
.contact-list strong { display: block; font-size: 12.5px; font-weight: 600; text-transform: uppercase;
                       letter-spacing: .1em; color: var(--on-dark-muted); margin-bottom: 2px; }

.form-card { background: #fff; padding: 40px; border: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px;
}
.form-field input, .form-field textarea {
  width: 100%; font-family: var(--font-sans); font-size: 16px; color: var(--ink);
  padding: 14px 15px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 2px;
}
.form-field textarea { min-height: 132px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); }
.form-field input:focus, .form-field textarea:focus { background: #fff; border-color: var(--blue); }
.form-actions { grid-column: 1 / -1; margin-top: 6px; }
.form-note { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.hp-field { position: absolute; left: -5000px; }

.eho { display: flex; align-items: center; gap: 14px; margin-top: 30px;
       padding-top: 26px; border-top: 1px solid var(--line-dark); }
.eho img { width: 54px; }
.eho span { font-size: 13.5px; color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   15. CTA STRIP
   -------------------------------------------------------------------------- */
.cta { background: var(--blue); color: #fff; }
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px 0; }
.cta h2 { color: #fff; margin: 0 0 8px; font-size: clamp(26px, 3vw, 36px); }
.cta p { margin: 0; color: rgba(255,255,255,.9); font-size: 17.5px; }
.cta .btn-row { margin: 0; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: var(--on-dark-body); padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 46px; padding-bottom: 56px; }
.site-footer h4 {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--on-dark-muted); margin: 0 0 18px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 11px; font-size: 15.5px; }
.site-footer a { color: var(--on-dark-body); }
.site-footer a:hover { color: #fff; }
.footer-logo img { width: 190px; margin-bottom: 20px; }
.footer-blurb { font-size: 15.5px; color: var(--on-dark-muted); max-width: 300px; margin: 0; }
.footer-bar {
  border-top: 1px solid var(--line-dark); padding: 24px 0;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 14px; color: var(--on-dark-muted);
}
.footer-bar p { margin: 0; }

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */
/* Licenses get their own row before the nav starts feeling cramped */
@media (max-width: 1180px) {
  .site-header__inner { padding-top: 10px; padding-bottom: 10px; }
  .licenses {
    order: 3; flex: 1 0 100%; justify-content: flex-start;
    padding-top: 12px; border-top: 1px solid var(--line);
  }
  /* strip is left-aligned in its own row, but each label still centers on its number */
  .licenses li { text-align: center; }
}

@media (max-width: 1080px) {
  .section { padding: 80px 0; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-grid--four { grid-template-columns: repeat(2, 1fr); }
  .capability__grid { grid-template-columns: repeat(2, 1fr); }
  .cap { border-top: 1px solid var(--line-dark); }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split--flip > .split__media { order: 0; }
  .split__media { order: -1; }
  .index { grid-template-columns: 1fr; gap: 0; }
  .index__group:nth-child(2) { border-top: 1px solid var(--line); padding-top: 34px; }
  .founders { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 46px; }
  .serve { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 860px) {
  :root { --logo-w: 168px; }
  .nav-toggle { display: block; }

  /* Phone header: logo centered, licenses centered under it, menu button
     pinned to the right of the logo row. The button is taken out of normal
     flow so its width can't push the logo off-center.
     Its height tracks the logo's: the artwork is 200x120, so height is always
     60% of --logo-w. That keeps the button vertically centered against the
     logo at every breakpoint without hardcoding a pixel value. */
  .site-header__inner {
    position: relative; justify-content: center; min-height: 82px;
  }
  .logo { margin: 0 auto; }
  .nav-toggle {
    /* Position only — do NOT touch this button's internal layout. Its three
       bars are spaced by `margin: 6px 0`, and the open-state X depends on
       translateY(±8px) matching that spacing exactly. Making it a flex column
       or adding gap re-spaces the bars and the X comes out as a chevron.

       right: var(--gutter), not 0 — an absolutely positioned child resolves
       `right` against the padding box, so 0 hangs it in the container's
       gutter and clips it at the screen edge.

       top centers the 48px button against the logo row: 10px of header
       padding, plus half the difference between the logo's height
       (--logo-w x 0.6, from the 200x120 artwork) and the button's 48px. */
    position: absolute; right: var(--gutter);
    top: calc(10px + (var(--logo-w) * 0.6 - 48px) / 2);
  }
  .licenses { justify-content: center; }

  .nav {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: 0 18px 34px rgba(12,35,58,.14);
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
  }
  .nav[data-open="true"] { max-height: 82vh; overflow-y: auto; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--line); }
  .nav > ul > li:last-child { border-bottom: 0; padding: 16px var(--gutter); }
  .nav a, .nav .nav__toggle { width: 100%; padding: 17px var(--gutter); justify-content: space-between; font-size: 16px; }
  /* justify-content has to be restored here: the `.nav a` rule above sets
     space-between for the plain nav links, which would shove the lock icon
     and the word "Login" to opposite ends of the button. */
  .nav .btn { width: 100%; padding: 15px; justify-content: center; }
  /* Login + Contact stack instead of sitting side by side on a phone. */
  .nav__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .nav .btn--login { padding: 15px; }

  .nav__menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    border: 0; border-top: 1px solid var(--line); box-shadow: none;
    background: var(--paper-2); padding: 0; max-height: 0; overflow: hidden;
    transition: max-height .25s ease; min-width: 0;
  }
  /* The desktop rule near the top of this file re-applies translateX(-50%)
     whenever the menu opens. On a phone that threw the whole panel half a
     screen to the left — the links were rendering, just off-canvas, so the
     dropdown looked blank. These selectors have to match that rule's
     specificity to beat it. Do not simplify them to `.nav__menu`. */
  .nav__item--has-menu:hover .nav__menu,
  .nav__item--has-menu:focus-within .nav__menu,
  .nav__item--has-menu[data-open="true"] .nav__menu { transform: none; }

  /* Eight service links need ~490px. The old 320px silently clipped the last
     three. If you add another service page, raise this. */
  .nav__item--has-menu[data-open="true"] .nav__menu { max-height: 560px; }
  .nav__item--has-menu:hover .nav__menu { max-height: 0; }
  .nav__item--has-menu[data-open="true"]:hover .nav__menu { max-height: 560px; }
  .nav__menu a { padding-left: calc(var(--gutter) + 18px); }

  .capability__grid { grid-template-columns: repeat(2, 1fr); border-left: 0; }
  .cap { border-right: 0; border-top: 1px solid var(--line-dark); padding: 30px 22px; }
  .cap:nth-child(odd) { border-right: 1px solid var(--line-dark); }
  .cap__title { font-size: 20px; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; --logo-w: 150px; }
  body { font-size: 16px; }

  .licenses { gap: 0 14px; padding-top: 10px; }
  .licenses li { font-size: 11px; }
  .licenses li + li::before { left: -7px; }
  .licenses span { font-size: 9px; letter-spacing: .08em; }

  .section { padding: 60px 0; }
  .section--tight { padding: 48px 0; }
  .hero__inner { padding: 74px 0 78px; }
  .hero p { font-size: 17.5px; }
  .pagehead__inner { padding: 54px 0 56px; }
  .pagehead p { font-size: 17px; }
  .lede { font-size: 17.5px; }

  .svc { padding: 30px 24px 26px; }
  .svc-grid--four { grid-template-columns: 1fr; }
  .capability__grid { grid-template-columns: 1fr; }
  .cap:nth-child(odd) { border-right: 0; }
  .founder { padding: 30px 24px; }
  .founder__top { gap: 15px; }
  .monogram { width: 60px; height: 60px; font-size: 21px; }
  .form-card { padding: 26px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .framed::after { display: none; }
}

@media print {
  .site-header, .nav, .cta, .btn { display: none !important; }
  .hero::after, .pagehead::after { display: none; }
  body { color: #000; font-size: 11pt; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}