/* ------------------------------------------------------------
   main.css  |  Design tokens first, then base, then components.
   Change a color or font once here and it updates everywhere.
   ------------------------------------------------------------ */
   :root {
    --navy: #022E66;
    --navy-soft: #1A355C;  /* muted navy for large background areas */
    --navy-deep: #12284A;  /* footer */
    --red: #DE0128;
    --gold: #C3944E;
    --bg: #FAFAF8;
    --ink: #171A1F;
    --white: #FFFFFF;
  
    --font-head: "Source Serif 4", Georgia, serif;
    --font-body: "Barlow", system-ui, sans-serif;
  
    --container: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
    --section: clamp(72px, 10vw, 140px);
    --ease: cubic-bezier(.2, .7, .2, 1);
  }
  
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  html, body { overflow-x: clip; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 1.0625rem/1.65 var(--font-body);
  }
  img { max-width: 100%; height: auto; display: block; }
  a { color: var(--navy); }
  
  h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; color: var(--navy); }
  h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); margin: 0 0 .5em; }
  h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
  h3, .subhead { font-family: var(--font-body); font-weight: 600; }
  
  .label {
    font-weight: 500; font-size: .8125rem;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--gold); margin: 0 0 1rem;
  }
  .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
  
  .sr-only, .skip-link:not(:focus) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--white); padding: 8px 12px; }
  
  /* Buttons */
  .btn {
    display: inline-block; padding: .85em 1.6em;
    font: 600 .9375rem var(--font-body); letter-spacing: .02em;
    text-decoration: none; border-radius: 2px;
    transition: background-color .25s var(--ease), transform .25s var(--ease);
  }
  .btn-primary { background: var(--navy); color: var(--white); }
  .btn-primary:hover { background: var(--red); transform: translateY(-1px); }
  
  /* Header */
  .site-header { background: var(--white); border-bottom: 1px solid rgba(2,46,102,.08); position: sticky; top: 0; z-index: 50; }
  .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
  .brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
  .brand-name { font: 600 1.125rem var(--font-head); color: var(--navy); }
  .site-nav { display: flex; align-items: center; gap: 2rem; }
  .site-nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
  .site-nav ul a {
    font-weight: 500; text-decoration: none; color: var(--ink);
    padding: .25em 0; border-bottom: 2px solid transparent;
    transition: color .2s var(--ease), border-color .2s var(--ease);
  }
  .site-nav ul a:hover, .site-nav ul a.is-active { color: var(--navy); border-color: var(--gold); }
  .nav-toggle { display: none; }
  
  @media (max-width: 900px) {
    .nav-toggle {
      display: block; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative;
    }
    .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
      content: ""; position: absolute; left: 10px; width: 24px; height: 2px; background: var(--navy);
    }
    .nav-toggle-bar { top: 21px; }
    .nav-toggle-bar::before { top: -7px; left: 0; }
    .nav-toggle-bar::after { top: 7px; left: 0; }
    .site-nav {
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: flex-start; gap: 1.25rem;
      background: var(--white); padding: 1.5rem var(--gutter) 2rem;
      border-bottom: 1px solid rgba(2,46,102,.08);
      display: none;
    }
    .site-nav.is-open { display: flex; }
    .site-nav ul { flex-direction: column; gap: 1rem; }
  }
  
  /* Shared section helpers */
  .section { padding: var(--section) 0; }
  .section-head { max-width: 640px; margin-bottom: 3.5rem; }
  .section-head h2 { margin: 0; }
  .lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); max-width: 46ch; }
  .text-link {
    font-weight: 600; text-decoration: none; color: var(--navy);
    border-bottom: 1px solid var(--gold); padding-bottom: 2px;
    transition: color .2s var(--ease);
  }
  .text-link:hover { color: var(--red); }
  .btn-ghost { color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
  .btn-ghost:hover { background: var(--white); color: var(--navy); transform: translateY(-1px); }
  .btn-gold { background: var(--gold); color: var(--navy); }
  .btn-gold:hover { background: var(--white); transform: translateY(-1px); }
  
  /* 1. Hero: photo behind, navy gradient for legible text */
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: min(88vh, 820px); display: flex; align-items: flex-end;
    color: var(--white); padding: 120px 0 clamp(64px, 9vw, 112px);
  }
  .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgba(2,46,102,.92) 0%, rgba(2,46,102,.72) 45%, rgba(2,46,102,.2) 100%);
  }
  .hero-content { width: 100%; } /* fills the row so text lines up with the logo */
  .hero h1 { color: var(--white); max-width: 15ch; }
  .hero .label { color: var(--gold); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
  
  /* Phones: the photo becomes its own block on top, centered on Alex,
     fading into navy, with the headline underneath instead of over him. */
  @media (max-width: 700px) {
    .hero { display: block; min-height: 0; padding-top: 0; background: var(--navy-soft); }
    .hero-bg {
      position: relative; inset: auto; z-index: -2;
      height: min(110vw, 440px); object-position: 72% 25%;
    }
    .hero::before {
      bottom: auto; height: min(110vw, 440px);
      background: linear-gradient(180deg, rgba(26,53,92,0) 55%, var(--navy-soft) 100%);
    }
    .hero-content { margin-top: -48px; }
  }
  
  /* 2. Trust bar: a white card that overlaps the bottom of the hero */
  .hero { padding-bottom: clamp(120px, 14vw, 176px); } /* room for the overlap */
  .trust-bar { position: relative; z-index: 2; margin-top: clamp(-96px, -7vw, -64px); }
  .trust-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--white); border-top: 3px solid var(--gold);
    box-shadow: 0 24px 48px -24px rgba(2,46,102,.28), 0 2px 6px rgba(2,46,102,.05);
  }
  .trust-item { padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 32px); }
  .trust-item + .trust-item { border-left: 1px solid rgba(2,46,102,.1); }
  .trust-num {
    display: block; margin-bottom: .5rem;
    font: 600 clamp(1.875rem, 3.2vw, 2.625rem)/1 var(--font-head); color: var(--navy);
  }
  .trust-text { display: block; font-size: .875rem; line-height: 1.45; color: #4A4F57; max-width: 24ch; }
  @media (max-width: 900px) {
    .trust-grid { grid-template-columns: 1fr 1fr; }
    .trust-item + .trust-item { border-left: 0; }
    .trust-item:nth-child(even) { border-left: 1px solid rgba(2,46,102,.1); }
    .trust-item:nth-child(n+3) { border-top: 1px solid rgba(2,46,102,.1); }
  }
  
  /* 3. Intro */
  .intro-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
  .intro-photo { margin: 0; position: relative; }
  .intro-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .intro-photo::after {
    content: ""; position: absolute; inset: 24px -24px -24px 24px; z-index: -1;
    border: 1px solid var(--gold);
  }
  .intro-copy h2 { margin-top: 0; }
  .intro-copy p { max-width: 58ch; }
  .intro-copy .text-link { display: inline-block; margin-top: 1rem; }
  @media (max-width: 800px) {
    .intro-grid { grid-template-columns: 1fr; }
    .intro-photo { max-width: 420px; margin-right: 24px; }
  }
  
  /* 4. Services overview */
  .services-overview { background: var(--white); }
  .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(2,46,102,.1); border: 1px solid rgba(2,46,102,.1); }
  .service-card {
    display: flex; flex-direction: column; background: var(--white);
    padding: clamp(28px, 4vw, 48px); text-decoration: none; color: var(--ink);
    transition: background-color .3s var(--ease);
  }
  .service-card:hover { background: var(--bg); }
  .service-num { font: 600 .875rem var(--font-body); letter-spacing: .12em; color: var(--gold); margin-bottom: 1.25rem; }
  .service-card h3 { font: 600 1.375rem/1.25 var(--font-head); color: var(--navy); margin: 0 0 .75rem; }
  .service-card p { margin: 0 0 1.5rem; color: #4A4F57; }
  .service-more { margin-top: auto; font-weight: 600; font-size: .9375rem; color: var(--navy); }
  .service-more span { display: inline-block; transition: transform .25s var(--ease); }
  .service-card:hover .service-more span { transform: translateX(4px); }
  @media (max-width: 700px) { .service-grid { grid-template-columns: 1fr; } }
  
  /* Firms: slim strip under the credentials card */
  .firms { padding: clamp(32px, 4vw, 48px) 0 0; }
  .firms-row {
    display: flex; align-items: center; gap: 1.25rem 3rem;
    padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid rgba(2,46,102,.1);
  }
  .firms-label { margin: 0; flex: 0 0 auto; max-width: 15ch; line-height: 1.6; }
  .firm-list {
    list-style: none; margin: 0; padding: 0; flex: 1;
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 0;
  }
  .firm-list li {
    font: 600 .9375rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
    color: var(--navy); opacity: .8; padding: 0 1.25rem; white-space: nowrap;
    flex: 1 1 auto; text-align: center; /* equal spacing, dividers evenly placed */
  }
  .firm-list li + li { border-left: 1px solid var(--gold); }
  @media (max-width: 900px) {
    .firms-row { flex-direction: column; align-items: flex-start; }
    .firms-label { max-width: none; }
    .firm-list { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .9rem 2rem; }
    .firm-list li { padding: 0; text-align: left; }
    .firm-list li + li { border-left: 0; }
  }
  @media (max-width: 600px) {
    .firm-list { grid-template-columns: 1fr 1fr; gap: .9rem 1.25rem; }
    .firm-list li { font-size: .8125rem; white-space: normal; }
  }
  
  /* 6. CTA band */
  .cta-band { background: var(--navy-soft); color: rgba(255,255,255,.85); padding: clamp(72px, 9vw, 120px) 0; text-align: center; }
  .cta-inner { max-width: 960px; } /* wide enough for the heading to fit on one line on desktop */
  .cta-band h2 { color: var(--white); margin-top: 0; text-wrap: balance; } /* if it must wrap (phones), split lines evenly */
  .cta-band p { margin: 0 auto 2rem; max-width: 48ch; }
  
  /* ---------- Inner pages ---------- */
  
  /* Blueprint texture: faint drafting grid, shared by the page banner
     and the no-photo service panel. The mask fades it in from the right
     so text always sits on a clean background. */
  .blueprint { position: relative; isolation: isolate; }
  .blueprint::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
      linear-gradient(rgba(2,46,102,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(2,46,102,.06) 1px, transparent 1px),
      linear-gradient(rgba(2,46,102,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(2,46,102,.035) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
    -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
            mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
  }
  
  /* Page hero: light title banner (page-hero.html) */
  .page-hero {
    background: linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
    padding: clamp(64px, 8vw, 104px) 0 clamp(48px, 6vw, 72px);
    border-bottom: 1px solid rgba(2,46,102,.08);
  }
  .page-hero h1 { max-width: 20ch; }
  .page-hero .lede { margin: 0; max-width: 56ch; color: #4A4F57; }
  .page-hero .container::after { /* short gold rule under the intro */
    content: ""; display: block; width: 64px; height: 2px; background: var(--gold); margin-top: 2.25rem;
  }
  
  /* Jump links: a tinted bar that pins under the header while scrolling.
     The link for the section on screen gets .is-active (see main.js). */
  .jump-links {
    position: sticky; top: 76px; z-index: 40;
    background: #EEF1F6; /* very light navy tint */
    border-bottom: 1px solid rgba(2,46,102,.1);
    box-shadow: 0 8px 20px -12px rgba(2,46,102,.25);
  }
  .jump-links ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; overflow-x: auto; scrollbar-width: none;
  }
  .jump-links ul::-webkit-scrollbar { display: none; }
  .jump-links li { flex: 1 0 auto; }
  .jump-links li + li { border-left: 1px solid rgba(2,46,102,.1); }
  .jump-links a {
    display: flex; align-items: center; gap: .75rem; height: 100%;
    padding: 1.1rem 1.5rem; white-space: nowrap;
    font-weight: 500; font-size: .9375rem; text-decoration: none; color: #4A4F57;
    border-bottom: 2px solid transparent;
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  }
  .jump-num { font-weight: 600; font-size: .8125rem; letter-spacing: .08em; color: var(--gold); }
  .jump-links a:hover { background: rgba(255,255,255,.7); color: var(--navy); }
  .jump-links a.is-active { background: var(--white); color: var(--navy); border-bottom-color: var(--gold); font-weight: 600; }
  /* Phones: the bar becomes a 2x2 grid of tiles, all visible at once,
     and stops pinning so it doesn't cover a small screen. */
  @media (max-width: 700px) {
    .jump-links { position: static; box-shadow: none; padding: 12px 0; }
    .jump-links ul {
      display: grid; grid-template-columns: 1fr 1fr; overflow: visible;
      gap: 1px; background: rgba(2,46,102,.12); border: 1px solid rgba(2,46,102,.12);
    }
    .jump-links li + li { border-left: 0; }
    .jump-links a {
      flex-direction: column; align-items: flex-start; gap: .35rem;
      white-space: normal; padding: .9rem .9rem 1rem; background: var(--white);
      font-size: .875rem; line-height: 1.3;
    }
    .service-detail { scroll-margin-top: 88px; }
  }
  
  /* Gold offset frame behind a photo. Same detail as the Home headshot,
     so every photo on the site feels like part of one set. */
  .framed { position: relative; isolation: isolate; margin: 0; }
  .framed img { position: relative; z-index: 1; }
  .framed::after {
    content: ""; position: absolute; z-index: 0;
    inset: 20px -20px -20px 20px; border: 1px solid var(--gold);
  }
  @media (max-width: 700px) { .framed::after { inset: 12px -10px -12px 10px; } }
  
  /* Service sections (services.html). Backgrounds alternate for depth. */
  .service-detail { padding: var(--section) 0; scroll-margin-top: 136px; } /* header + jump bar */
  .service-detail:nth-of-type(even) { background: var(--white); }
  
  .service-copy h2 { margin: 0 0 1.5rem; }
  .service-copy > p { max-width: 62ch; }
  .service-copy .service-num { margin: 0 0 1rem; }
  .service-copy h3.label { margin: 2.5rem 0 1.25rem; }
  
  .includes-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
  .includes-list li { padding: .9rem 0 .9rem 1.25rem; border-top: 1px solid rgba(2,46,102,.1); position: relative; }
  .includes-list li::before { /* small gold marker */
    content: ""; position: absolute; left: 0; top: 1.45rem; width: 6px; height: 6px; background: var(--gold);
  }
  .includes-list strong { display: block; font-weight: 600; color: var(--navy); }
  .includes-list span { display: block; font-size: .9375rem; color: #4A4F57; margin-top: .25rem; }
  
  .service-closing {
    margin-top: 2.5rem; padding-left: 1.25rem; border-left: 3px solid var(--gold);
    font: 600 1.125rem/1.55 var(--font-head); color: var(--navy); max-width: 62ch;
  }
  
  /* Layout 1: side (vertical photo beside the text) */
  .service-side-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 7vw, 104px); align-items: start; }
  .service-photo { position: sticky; top: 168px; }
  .service-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  
  /* Layout 2: wide (horizontal photo as a full-width band, uncropped) */
  .is-wide .service-copy { max-width: 880px; }
  .service-band { margin: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px); }
  .service-band img { width: 100%; height: auto; }
  
  /* Layout 3: panel (no photo; framed card with the blueprint texture) */
  .service-panel {
    background: var(--white);
    border: 1px solid rgba(2,46,102,.1); border-top: 3px solid var(--gold);
    padding: clamp(32px, 6vw, 80px);
  }
  
  @media (max-width: 900px) {
    .service-side-grid { grid-template-columns: 1fr; }
    .service-photo { position: static; max-width: 520px; }
    .service-photo img { aspect-ratio: 4 / 3; }
  }
  @media (max-width: 600px) { .includes-list { grid-template-columns: 1fr; } }
  
  /* ---------- Experience & Credentials page ---------- */
  
  /* Credential spotlight: license card beside a framed photo */
  .spotlight { background: var(--white); }
  .spotlight-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 7vw, 104px); align-items: center; }
  .credential-card {
    background: var(--bg); border-top: 3px solid var(--gold);
    padding: clamp(32px, 5vw, 64px);
    box-shadow: 0 24px 48px -28px rgba(2,46,102,.25);
  }
  .credential-card h2 { margin: 0 0 .5rem; }
  .credential-no { font: 600 .875rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.5rem; }
  .credential-card > p:not(.label):not(.credential-no) { max-width: 54ch; color: #4A4F57; }
  .credential-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 2rem 0 0; border-top: 1px solid rgba(2,46,102,.12); }
  .credential-stats div { padding: 1.5rem 1rem 0 0; }
  .credential-stats div + div { padding-left: 1.25rem; border-left: 1px solid rgba(2,46,102,.12); }
  .credential-stats dt { font: 600 clamp(1.75rem, 3vw, 2.25rem)/1 var(--font-head); color: var(--navy); margin-bottom: .4rem; }
  .credential-stats dd { margin: 0; font-size: .875rem; line-height: 1.4; color: #4A4F57; }
  .spotlight-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 50%; } /* keeps Alex centered in the crop */
  
  /* Certifications grid */
  .cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: rgba(2,46,102,.1); border: 1px solid rgba(2,46,102,.1); }
  .cert-group { background: var(--white); padding: clamp(24px, 3vw, 36px); }
  .cert-group h3 { font: 600 1.25rem var(--font-head); color: var(--navy); margin: 0 0 1.25rem; padding-bottom: .9rem; border-bottom: 2px solid var(--gold); }
  .cert-group ul { list-style: none; margin: 0; padding: 0; }
  .cert-group li { display: flex; gap: .75rem; align-items: baseline; padding: .5rem 0; font-size: .9375rem; color: #4A4F57; }
  .cert-code { flex: 0 0 2.25rem; font-weight: 600; font-size: .8125rem; letter-spacing: .06em; color: var(--navy); }
  
  /* Photo mosaic: one large photo, two stacked beside it */
  .mosaic-section { padding-bottom: var(--section); }
  .mosaic { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: repeat(2, clamp(180px, 20vw, 280px)); gap: clamp(10px, 1.5vw, 16px); }
  .mosaic figure { margin: 0; overflow: hidden; }
  .mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .mosaic figure:hover img { transform: scale(1.03); }
  .mosaic .m1 { grid-row: 1 / 3; }
  @media (max-width: 700px) {
    .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 160px; }
    .mosaic .m1 { grid-column: 1 / 3; grid-row: auto; }
  }
  
  /* Selected projects: year column + details, divided by hairlines */
  .projects { background: var(--white); }
  .project-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(2,46,102,.12); }
  .project {
    display: grid; grid-template-columns: minmax(140px, 1fr) 4fr; gap: 1rem clamp(24px, 5vw, 64px);
    padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid rgba(2,46,102,.12);
    transition: background-color .3s var(--ease);
  }
  .project-year { margin: .2rem 0 0; font: 600 .875rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
  .project-body h3 { font: 600 clamp(1.25rem, 2vw, 1.5rem)/1.25 var(--font-head); color: var(--navy); margin: 0 0 .35rem; }
  .project-name { margin: 0 0 .75rem; font-weight: 500; font-size: .9375rem; color: var(--ink); }
  .project-desc { margin: 0; max-width: 70ch; color: #4A4F57; }
  @media (max-width: 700px) { .project { grid-template-columns: 1fr; gap: .5rem; } }
  
  /* Firms band: deep navy with the blueprint grid in white */
  .firms-feature { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 136px) 0; text-align: center; color: var(--white);
    background: linear-gradient(180deg, var(--navy-deep), var(--navy-soft)); }
  .blueprint-dark::before {
    background-image:
      linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  }
  .firms-feature-inner { max-width: 960px; }
  .firms-feature h2 { color: var(--white); margin: 0 auto 2.5rem; max-width: 26ch; text-wrap: balance; }
  .firms-feature + .cta-band { border-top: 1px solid rgba(255,255,255,.12); }
  
  @media (max-width: 900px) {
    .spotlight-grid { grid-template-columns: 1fr; }
    .spotlight-photo { max-width: 460px; }
    .credential-stats { grid-template-columns: 1fr 1fr 1fr; }
  }
  @media (max-width: 520px) {
    .credential-stats { grid-template-columns: 1fr; }
    .credential-stats div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(2,46,102,.12); padding-bottom: 1rem; }
  }
  
  /* ---------- Contact page ---------- */
  .contact-grid { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
  .contact-form-card {
    background: var(--white); border-top: 3px solid var(--gold);
    padding: clamp(28px, 5vw, 56px);
    box-shadow: 0 24px 48px -28px rgba(2,46,102,.25);
  }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .field { margin-bottom: 1.5rem; }
  .field label { display: block; margin-bottom: .5rem; font-weight: 600; font-size: .875rem; color: var(--navy); }
  .field label span { color: var(--gold); }
  .field input, .field select, .field textarea {
    width: 100%; padding: .85rem 1rem;
    font: 400 1rem/1.4 var(--font-body); color: var(--ink);
    background: var(--bg); border: 1px solid rgba(2,46,102,.18); border-radius: 2px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  }
  .field select {
    appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(-45deg, transparent 50%, var(--navy) 50%);
    background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
    background-size: 5px 5px; background-repeat: no-repeat;
  }
  .field textarea { resize: vertical; min-height: 150px; }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; background-color: var(--white); border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(195,148,78,.2);
  }
  .field ::placeholder { color: #8A8F97; }
  .form-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
  .form-actions button { border: 0; cursor: pointer; }
  .form-actions button[disabled] { opacity: .6; cursor: wait; }
  .form-note { margin: 0; font-size: .8125rem; color: #6B7079; }
  .form-error { margin: 1.25rem 0 0; padding: 1rem 1.25rem; border-left: 3px solid var(--red); background: rgba(222,1,40,.05); font-size: .9375rem; }
  .form-success h2 { margin: 0 0 .75rem; }
  .form-success p:last-child { margin: 0; color: #4A4F57; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  
  .contact-aside { display: grid; gap: 2.5rem; }
  .contact-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .contact-details .label, .contact-tips .label { margin-bottom: .75rem; }
  .contact-line { margin: 0 0 .35rem; font: 600 1.25rem var(--font-head); }
  .contact-line a { color: var(--navy); text-decoration: none; transition: color .2s var(--ease); }
  .contact-line a:hover { color: var(--red); }
  .contact-region { margin: 1rem 0 0; font-size: .9375rem; color: #4A4F57; }
  .contact-tips { padding-top: 2rem; border-top: 1px solid rgba(2,46,102,.12); }
  .contact-tips ul { list-style: none; margin: 0; padding: 0; }
  .contact-tips li { position: relative; padding: .4rem 0 .4rem 1.25rem; font-size: .9375rem; color: #4A4F57; }
  .contact-tips li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 6px; height: 6px; background: var(--gold); }
  
  @media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-aside { grid-template-columns: 1fr 1fr; align-items: start; }
    .contact-photo { grid-column: 1 / -1; max-width: 520px; }
  }
  @media (max-width: 600px) {
    .field-row { grid-template-columns: 1fr; }
    .contact-aside { grid-template-columns: 1fr; }
  }
  
  /* Experience page: firm wall, each firm in its own bordered tile */
  .firm-wall {
    list-style: none; margin: 0 auto; padding: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16);
  }
  .firm-wall li {
    position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 104px; padding: 1.25rem 1rem;
    border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16);
    font: 600 .875rem/1.35 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--white);
    transition: background-color .3s var(--ease), color .3s var(--ease);
  }
  .firm-wall li::before { /* gold line that grows in on hover */
    content: ""; position: absolute; top: -1px; left: 50%; width: 0; height: 2px; background: var(--gold);
    transition: width .35s var(--ease), left .35s var(--ease);
  }
  .firm-wall li:hover { background: rgba(255,255,255,.04); color: var(--gold); }
  .firm-wall li:hover::before { width: 100%; left: 0; }
  @media (max-width: 900px) {
    .firm-wall { grid-template-columns: repeat(6, 1fr); }
    .firm-wall li { grid-column: span 2; }
    .firm-wall li:nth-child(4), .firm-wall li:nth-child(5) { grid-column: span 3; }
  }
  @media (max-width: 600px) {
    .firm-wall { grid-template-columns: 1fr 1fr; }
    .firm-wall li, .firm-wall li:nth-child(4) { grid-column: auto; min-height: 84px; font-size: .8125rem; }
    .firm-wall li:nth-child(5) { grid-column: 1 / -1; }
  }
  
  /* Long and short wording: full text on desktop, shorter on phones */
  .short-form { display: none; text-decoration: none; }
  .nowrap { white-space: nowrap; }
  @media (max-width: 700px) {
    .long-form { display: none; }
    .short-form { display: inline; }
  }
  
  /* Footer on phones: centered, one line of links */
  @media (max-width: 700px) {
    .site-footer .container { text-align: center; }
    .footer-row { align-items: center; }
    .footer-brand-block { flex-direction: column; gap: .75rem; }
    .footer-license { white-space: nowrap; }
    .footer-nav ul { justify-content: center; flex-wrap: nowrap; gap: 1.25rem; }
    .footer-nav a { font-size: .75rem; letter-spacing: .06em; white-space: nowrap; }
  }
  
  /* Scroll reveal: only runs once JS adds .js to <html> */
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  
  /* Footer: deeper navy than the CTA band above, two compact rows */
  .site-footer { background: var(--navy-deep); color: rgba(255,255,255,.72); padding: 48px 0 28px; font-size: .875rem; }
  .site-footer p { margin: 0; }
  .site-footer a { color: rgba(255,255,255,.85); text-decoration: none; transition: color .2s var(--ease); }
  .site-footer a:hover { color: var(--gold); }
  .footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
  .footer-top { padding-bottom: 28px; }
  .footer-brand-block { display: flex; align-items: center; gap: 1rem; }
  .footer-logo {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--bg); box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px rgba(195,148,78,.18);
    transition: transform .3s var(--ease);
  }
  .footer-logo img { width: 40px; height: 40px; object-fit: contain; }
  .footer-brand-block:hover .footer-logo { transform: scale(1.04); }
  .footer-brand { display: block; font: 600 1.25rem/1.2 var(--font-head); color: var(--white); margin-bottom: .35rem; }
  .footer-license { display: block; font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
  .footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
  .footer-nav a { font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
  .footer-bottom { padding: 22px 0; border-top: 1px solid rgba(255,255,255,.12); }
  .footer-dot { margin: 0 .6rem; color: var(--gold); }
  .footer-copy { color: rgba(255,255,255,.55); }
  .disclosure { font-size: .75rem; color: rgba(255,255,255,.45); }
  @media (max-width: 700px) {
    .footer-row { flex-direction: column; align-items: center; }
  }
  
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }