:root {
    color-scheme: light;
    --navy: #001851;
    --navy-2: #002D79;
    --navy-deep: #001240;
    --ink: #10203E;
    --muted: #4A5875;
    --green: #24870B;
    --green-dark: #1C6C08;
    --green-text: #1C6C08;
    --blue: #035CB7;
    --blue-soft: #3E8BE0;
    --lime: #88BE11;
    --paper: #FFFFFF;
    --mist: #F4F7FB;
    --line: #DCE4F0;
    --line-dark: rgba(255,255,255,0.14);
    --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
    --radius: 6px;
    --w: 1120px;
    --focus-ring: var(--green);
  }

  .hero, .esos, .contact, .statement, .page-hero, .site-footer { --focus-ring: var(--lime); }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  [id] { scroll-margin-top: 100px; }

  body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3 { line-height: 1.15; text-wrap: balance; letter-spacing: -0.015em; }

  a { color: var(--green); text-decoration: none; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }

  .skip-link { position: absolute; inset-inline-start: -999px; top: 16px; z-index: 100; }
  .skip-link:focus { inset-inline-start: 16px; background: var(--paper); color: var(--navy); padding: 10px 16px; border-radius: var(--radius); box-shadow: 0 2px 12px rgba(0,24,81,0.18); }

  /* visually hidden, still read by screen readers */
  .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;
  }

  .wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }

  .eyebrow {
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-text);
    display: block;
    margin-bottom: 16px;
  }
  /* small square marker, a spec-sheet detail borrowed from the card indices */
  .eyebrow::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background: currentColor;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }

  .btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition-property: background-color, border-color, color, scale;
    transition-duration: .18s;
    transition-timing-function: ease;
  }
  .btn:active { scale: 0.96; }
  .btn-green { background: var(--green); color: #fff; }
  @media (hover: hover) {
    .btn-green:hover { background: var(--green-dark); }
  }
  .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
  @media (hover: hover) {
    .btn-ghost:hover { border-color: #fff; }
  }

  /* ---------- header ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .nav {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 72px;
  }
  .brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
  .brand img { height: 42px; width: auto; display: block; }
  .brand-name { display: flex; flex-direction: column; line-height: 1.05; }
  .brand-name .b1 { font-weight: 700; font-size: 21px; color: var(--navy); letter-spacing: 0.02em; }
  .brand-name .b2 { font-family: var(--mono); font-weight: 500; font-size: 11px; color: var(--green); letter-spacing: 0.24em; text-transform: uppercase; margin-top: 2px; }
  .nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
  .nav-links a { color: var(--ink); font-size: 15.5px; font-weight: 500; }
  @media (hover: hover) {
    .nav-links a:hover { color: var(--green); }
  }
  .nav-links .btn { padding: 10px 20px; font-size: 15px; }
  .nav-links .btn-green { color: #fff; font-weight: 600; }
  .nav-toggle {
    display: none;
    background: none;
    border: none;
    width: 44px; height: 44px;
    cursor: pointer;
    position: relative;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: "";
    position: absolute;
    left: 10px;
    width: 24px; height: 2px;
    background: var(--navy);
    transition: transform .2s ease;
  }
  .nav-toggle span { top: 21px; }
  .nav-toggle span::before { top: -7px; left: 0; }
  .nav-toggle span::after { top: 7px; left: 0; }
  .nav-cta { display: none; padding: 8px 13px; font-size: 14px; white-space: nowrap; }

  /* ---------- hero ---------- */
  .hero {
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 52px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 52px),
      linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #fff;
    padding: 96px 0 104px;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: center;
  }
  .hero h1 {
    font-size: clamp(34px, 4.6vw, 54px);
    font-weight: 700;
    margin-bottom: 22px;
  }
  .hero h1 .accent { color: var(--lime); }
  .hero p.lede {
    font-size: 18.5px;
    line-height: 1.65;
    color: rgba(255,255,255,0.82);
    max-width: 56ch;
    margin-bottom: 34px;
  }
  .hero .eyebrow { color: var(--lime); }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

  .chart-card {
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--line-dark);
    border-radius: 10px;
    padding: 22px;
  }
  .chart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 14px;
  }
  .chart-head .chip {
    color: var(--lime);
    border: 1px solid rgba(136,190,17,0.45);
    border-radius: 99px;
    padding: 3px 10px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
  .chart-card svg { display: block; width: 100%; height: auto; }
  .bar { transform-box: fill-box; transform-origin: bottom; animation: grow .9s cubic-bezier(.2,.7,.3,1) backwards; }
  @keyframes grow { from { transform: scaleY(0); } }

  /* ---------- credential strip ---------- */
  .creds { border-bottom: 1px solid var(--line); background: var(--paper); }
  /* vertical padding only: this class shares its element with .wrap, and a
     padding shorthand here would wipe out the 24px gutter .wrap sets */
  .creds-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .cred { border-left: 3px solid var(--green); padding-left: 18px; }
  .cred .k {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 5px;
  }
  .cred .v { font-weight: 600; font-size: 16.5px; color: var(--navy); line-height: 1.35; }

  /* ---------- sections ---------- */
  .section { padding: 96px 0; }
  .section.mist { background: var(--mist); }
  .section h2 {
    font-size: clamp(27px, 3.3vw, 38px);
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 20px;
    max-width: 24ch;
  }
  .section p { color: var(--muted); max-width: 62ch; }

  /* triangle */
  .tri-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 72px;
    align-items: center;
  }
  .tri-figure svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
  .tri-copy p { margin-bottom: 18px; }
  .tri-defs { list-style: none; margin-top: 30px; border-top: 1px solid var(--line); }
  .tri-defs li {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
  }
  .tri-defs .term {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--navy);
    padding-top: 3px;
  }
  .tri-defs .def { color: var(--muted); font-size: 15.5px; line-height: 1.55; }

  /* services */
  .svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 48px;
  }
  .svc {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px 32px 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  @media (hover: hover) {
    .svc:hover { border-color: var(--green); box-shadow: 0 10px 28px rgba(0,24,81,0.08); }
  }
  /* photo header: navy duotone so the four read as one set inside the brand,
     with a lime rule tying them to the accent used elsewhere */
  .svc-img {
    position: relative;
    margin: -34px -32px 24px;
    aspect-ratio: 16 / 9;
    background: var(--navy);
    overflow: hidden;
  }
  .svc-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s ease;
  }
  .svc-img::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--lime); z-index: 1;
  }
  @media (hover: hover) {
    .svc:hover .svc-img img { transform: scale(1.04); }
  }
  .svc h3 { font-size: 21px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
  .svc .tag { color: var(--muted); font-size: 15.5px; margin-bottom: 18px; }
  .svc ul { list-style: none; margin-bottom: 22px; }
  .svc li {
    padding: 9px 0 9px 20px;
    border-top: 1px solid var(--line);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink);
    position: relative;
  }
  .svc li::before {
    content: "";
    position: absolute;
    left: 2px; top: 17px;
    width: 7px; height: 7px;
    background: var(--green);
    transform: rotate(45deg);
  }
  .svc .more {
    margin-top: auto;
    font-weight: 600;
    font-size: 15.5px;
  }
  @media (hover: hover) {
    .svc .more:hover { text-decoration: underline; }
  }

  /* reality */
  .leak-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 48px;
  }
  .leak {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: border-color .18s ease;
  }
  @media (hover: hover) {
    .leak:hover { border-color: var(--green); }
  }
  .leak .idx {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--green);
    display: block;
    margin-bottom: 14px;
  }
  .leak h3 { font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
  .leak p {
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 68ch;
    margin-bottom: 20px;
  }
  .leak .more { margin-top: auto; font-weight: 600; font-size: 15.5px; }
  @media (hover: hover) {
    .leak .more:hover { text-decoration: underline; }
  }

  /* sectors strip */
  .creds.sectors { border-top: 1px solid var(--line); }
  .sectors-head { padding-top: 56px; }
  .sectors-head h2 {
    font-size: clamp(27px, 3.3vw, 38px);
    font-weight: 700;
    color: var(--navy);
    max-width: 24ch;
  }
  .sectors .cred .k {
    font-family: var(--sans);
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--navy);
    margin-bottom: 6px;
  }
  .sectors .cred .v {
    font-weight: 400;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
    display: block;
  }

  /* esos band */
  .esos {
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 52px),
      linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #fff;
    padding: 88px 0;
  }
  .esos-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: center;
  }
  .esos h2 { color: #fff; font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; margin-bottom: 18px; max-width: 24ch; }
  .esos p { color: rgba(255,255,255,0.8); max-width: 58ch; margin-bottom: 26px; }
  .esos .eyebrow { color: var(--lime); }
  .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
  .chips span {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.08em;
    border: 1px solid var(--line-dark);
    border-radius: 99px;
    padding: 7px 15px;
    color: rgba(255,255,255,0.85);
  }
  .deadline-card {
    border: 1px solid var(--line-dark);
    border-radius: 10px;
    background: rgba(255,255,255,0.045);
    padding: 34px 34px 28px;
    text-align: center;
  }
  .deadline-card .big {
    font-family: var(--mono);
    font-weight: 600;
    font-size: clamp(34px, 4vw, 46px);
    letter-spacing: 0.04em;
    color: var(--lime);
    display: block;
  }
  .deadline-card .cap {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    display: block;
    margin-top: 8px;
  }
  /* tabular figures so a ticking day count does not shift width */
  .deadline-card .countdown { color: var(--lime); margin-top: 12px; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
  .deadline-card hr { border: none; border-top: 1px solid var(--line-dark); margin: 24px 0; }
  .deadline-card .small {
    font-family: var(--mono);
    font-size: 13.5px;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.75);
  }

  /* about */
  .about-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 72px;
    align-items: start;
  }
  .about-copy p { margin-bottom: 18px; }
  .about-copy .more { font-weight: 600; font-size: 16px; }
  @media (hover: hover) {
    .about-copy .more:hover { text-decoration: underline; }
  }
  .ledger {
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 30px;
  }
  .ledger .lh {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 14px;
    border-bottom: 2px solid var(--navy);
    margin-bottom: 4px;
  }
  .ledger ul { list-style: none; }
  .ledger li {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink);
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
  .ledger li:last-child { border-bottom: none; }
  .ledger li .ok { color: var(--green-text); font-weight: 600; white-space: nowrap; }

  /* contact cta */
  .contact {
    background: linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #fff;
    padding: 96px 0;
    text-align: center;
  }
  .contact h2 { color: #fff; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; margin: 0 auto 16px; }
  .contact p { color: rgba(255,255,255,0.8); max-width: 52ch; margin: 0 auto 36px; }
  .contact-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
  }
  .phone-link {
    font-family: var(--mono);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.45);
    border-radius: var(--radius);
    padding: 12px 24px;
    transition: border-color .18s ease;
  }
  @media (hover: hover) {
    .phone-link:hover { border-color: var(--lime); color: var(--lime); }
  }

  /* footer */
  .site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.75); font-size: 15px; }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    padding: 64px 0 48px;
  }
  .site-footer .brand img { height: 38px; }
  .site-footer .brand-name .b1 { color: #fff; font-size: 19px; }
  .site-footer .brand-name .b2 { color: var(--lime); }
  .site-footer .f-blurb { margin: 18px 0 20px; max-width: 34ch; line-height: 1.6; }
  .site-footer .f-contact { font-family: var(--mono); font-size: 14px; line-height: 2; overflow-wrap: break-word; }
  .site-footer .f-contact a { color: #fff; }
  @media (hover: hover) {
    .site-footer .f-contact a:hover { color: var(--lime); }
  }
  .site-footer h4 {
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 18px;
  }
  .site-footer ul { list-style: none; }
  .site-footer ul li { margin-bottom: 16px; }
  .site-footer ul a { color: rgba(255,255,255,0.85); }
  @media (hover: hover) {
    .site-footer ul a:hover { color: var(--lime); }
  }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: rgba(255,255,255,0.5);
  }

  /* reveal on scroll */
  @media (scripting: enabled) {
    .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  }
  .reveal.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .bar { animation: none; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    @media (hover: hover) {
      .svc:hover .svc-img img { transform: none; }
    }
  }

  /* ---------- responsive ---------- */
  @media (max-width: 960px) {
    /* minmax(0, 1fr) rather than 1fr: a plain 1fr track cannot shrink below the
       min-content of a fixed-width child (an SVG, an embedded widget), which
       would push the whole page wider than the viewport */
    .hero-grid, .esos-grid, .tri-grid, .about-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .svc-grid { grid-template-columns: 1fr; }
    .leak-grid { grid-template-columns: 1fr; }
    .creds-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .tri-figure { order: 2; }
    .section { padding: 68px 0; }
    .hero { padding: 64px 0 72px; }
  }

  /* the expanded nav stops fitting at about 1075px, so it collapses there */
  @media (max-width: 1079px) {
    .nav-toggle { display: block; }
    .nav-cta { display: inline-block; }
    .nav-links {
      display: none;
      position: absolute;
      top: 72px; left: 0; right: 0;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      flex-direction: column;
      align-items: flex-start;
      padding: 18px 24px 24px;
      gap: 18px;
    }
    .nav-links.open { display: flex; }
  }
  @media (max-width: 560px) {
    .creds-grid { grid-template-columns: 1fr 1fr; gap: 20px 18px; }
    .cred { padding-left: 14px; }
    .cred .k { font-size: 12px; }
    .cred .v { font-size: 15px; }
    .sectors .creds-grid { grid-template-columns: 1fr; }
    .hero { padding: 56px 0 64px; }
    .hero .eyebrow { font-size: 12px; letter-spacing: 0.12em; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-ctas .btn { width: 100%; text-align: center; }
    .contact-row { flex-direction: column; align-items: stretch; }
    .contact-row .btn, .contact-row .phone-link { width: 100%; text-align: center; }
    .tri-defs li { grid-template-columns: 84px 1fr; gap: 12px; }
    .section { padding: 60px 0; }
    .leak { padding: 24px 22px; }
    .deadline-card { padding: 28px 22px 24px; }
    .esos { padding: 64px 0; }
    .contact { padding: 72px 0; }
    body { font-size: 16px; }
    .nav { gap: 12px; }
    .nav-toggle { flex-shrink: 0; }
    .brand-name .b2 { letter-spacing: 0.16em; }
    .nav-cta { padding: 8px 11px; }
  }
  @media (max-width: 340px) {
    .nav-cta { display: none; }
  }

  /* ---------- inner pages ---------- */

  /* current page marker in the nav */
  .nav-links a.active { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--green); }

  /* inner page hero: same navy band and grid texture as the homepage hero */
  .page-hero {
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 52px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 52px),
      linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #fff;
    padding: 88px 0 80px;
  }
  .page-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
  }
  .page-hero .eyebrow { color: var(--lime); }
  .page-hero h1 {
    font-size: clamp(34px, 4.4vw, 52px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
  }
  .page-hero .lede {
    font-size: 18.5px;
    line-height: 1.65;
    color: rgba(255,255,255,0.82);
    max-width: 56ch;
    margin-bottom: 32px;
  }
  .page-hero-img {
    border: 1px solid var(--line-dark);
    border-bottom: 3px solid var(--lime);
    border-radius: 10px;
    overflow: hidden;
  }
  .page-hero-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  /* intro section wrapper */
  .intro-section { padding: 72px 0; }

  /* intro variant: copy on the left, photo on the right */
  .intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
    align-items: center;
  }
  .intro-copy h2 { margin-bottom: 20px; }
  .intro-copy p { max-width: 52ch; }
  .intro-copy p + p { margin-top: 16px; }
  .intro-img {
    border: 1px solid var(--line);
    border-bottom: 3px solid var(--green);
    border-radius: 10px;
    overflow: hidden;
  }
  .intro-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  /* intro variant: inline SVG figure card in place of the photo */
  .intro-figure {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 22px;
  }
  .intro-figure .fig-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
  }
  .intro-figure svg { display: block; width: 100%; height: auto; }
  /* keep each head phrase whole; the right one drops to its own line if both do not fit */
  .intro-figure .fig-head { flex-wrap: wrap; }
  .intro-figure .fig-head span { white-space: nowrap; }
  .intro-figure .fig-head span + span { margin-left: auto; }

  /* detail cards */
  .detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-top: 48px;
  }
  .detail {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    transition: border-color .18s ease;
  }
  @media (hover: hover) {
    .detail:hover { border-color: var(--green); }
  }
  .detail .idx {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--green);
    display: block;
    margin-bottom: 14px;
  }
  .detail h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
  .detail p {
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 68ch;
  }

  /* process: copy left, numbered rail right */
  .process-section { padding: 72px 0; }
  .process-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: start;
  }
  .process-copy p + p { margin-top: 14px; }
  .rail { list-style: none; margin: 6px 0 0; padding: 0; }
  .rail li {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 20px;
    padding-bottom: 26px;
  }
  .rail li:last-child { padding-bottom: 0; }
  /* connector runs from below one marker to the next, so the last item has none */
  .rail li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: var(--line);
  }
  .rail-n {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--navy);
    background: var(--paper);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--navy);
  }
  .rail-body h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
    margin: 8px 0 4px;
  }
  /* .section p caps at 62ch, too wide for the rail column */
  .rail-body p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
    max-width: 48ch;
    text-wrap: pretty;
  }

  /* closing statement band */
  .statement {
    background: linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #fff;
    padding: 96px 0;
    text-align: center;
  }
  .statement .eyebrow { color: var(--lime); }
  .statement-line {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #fff;
    max-width: 22ch;
    margin: 0 auto 18px;
  }
  .statement p {
    color: rgba(255,255,255,0.8);
    max-width: 52ch;
    margin: 0 auto 36px;
  }

  @media (max-width: 960px) {
    .page-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .page-hero { padding: 64px 0 68px; }
    .intro-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .process-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .intro-section, .process-section { padding: 56px 0; }
    .detail-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .page-hero { padding: 52px 0 56px; }
    .page-hero .eyebrow { font-size: 12px; letter-spacing: 0.12em; }
    .detail { padding: 24px 22px; }
    .intro-figure { padding: 16px; }
    .intro-figure .fig-head { font-size: 11px; flex-wrap: wrap; }
    .intro-figure .fig-head span { white-space: normal; }
    .intro-section, .process-section { padding: 48px 0; }
    .rail li { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
    .rail-n { width: 36px; height: 36px; font-size: 12px; }
    .rail li:not(:last-child)::before { left: 17px; top: 36px; }
    .statement { padding: 72px 0; }
  }

  /* lists inside detail cards */
  .detail ul { list-style: none; margin-top: 18px; }
  .detail li {
    padding: 9px 0 9px 20px;
    border-top: 1px solid var(--line);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink);
    position: relative;
  }
  .detail li::before {
    content: "";
    position: absolute;
    left: 2px; top: 17px;
    width: 7px; height: 7px;
    background: var(--green);
    transform: rotate(45deg);
  }

  /* single-column page hero (no image yet) */
  .page-hero.single .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero.single .page-hero-grid > div { max-width: 760px; }

  /* contact form: honeypot field and submission message */
  .hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
  }

  .form-msg {
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 22px;
  }
  .form-msg.ok {
    background: #EAF5E6;
    border: 1px solid #C3E2B8;
    color: var(--green-text);
  }
  .form-msg.bad {
    background: #FBECEC;
    border: 1px solid #EFC9C9;
    color: #8C1C1C;
  }

  /* shared form fields: used by the contact page form and the compact mini form */
  .form-field { margin-bottom: 18px; }
  .form-field label {
    display: block;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 7px;
  }
  .form-field input, .form-field select, .form-field textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid #7E8CA8;
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: border-color .18s ease;
  }
  .form-field textarea { min-height: 120px; resize: vertical; }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: 2px solid var(--green);
    outline-offset: 2px;
    border-color: var(--green);
  }
  @media (hover: hover) {
    .form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--muted); }
  }
  .req { color: var(--green); font-weight: 600; }
  .form-note { font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 46ch; }
  .form-req { margin-top: 0; margin-bottom: 14px; max-width: none; }

  /* orphan control on short intro-style lines */
  .hero .lede, .page-hero .lede, .svc .tag, .leak p, .detail p { text-wrap: pretty; }

  /* inline body links carry a real underline; buttons and card links do not */
  .section p a:not(.btn), .detail p a:not(.btn),
  .policy p a:not(.btn), .policy li a:not(.btn), .form-note a:not(.btn), .policy-close a:not(.btn) {
    text-decoration-line: underline;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
    text-decoration-skip-ink: auto;
    text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
    transition: text-decoration-color .18s ease;
  }
  @media (hover: hover) {
    .section p a:not(.btn):hover, .detail p a:not(.btn):hover,
    .policy p a:not(.btn):hover, .policy li a:not(.btn):hover, .form-note a:not(.btn):hover, .policy-close a:not(.btn):hover { text-decoration-color: currentColor; }
  }

  /* ---------- engagement steps ---------- */
  /* hairline divider only, the band keeps the standard white section padding */
  .engage-section { border-top: 1px solid var(--line); }
  .engage {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 48px;
    counter-reset: none;
  }
  .engage li {
    position: relative;
    padding: 28px 28px 28px 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .18s ease;
  }
  @media (hover: hover) {
    .engage li:hover { border-color: var(--green); }
  }
  .engage-n {
    display: block;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--green-text);
    margin-bottom: 14px;
  }
  .engage h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 10px;
  }
  /* .section p caps at 62ch, which is wrong inside a narrow card */
  .engage p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
    max-width: none;
    text-wrap: pretty;
  }
  .engage-note { margin-top: 28px; }

  /* ---------- engagement steps beside a compact contact form ---------- */
  /* only on .engage-split pages, the contact page keeps the 3-column .engage grid */
  .engage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: start;
  }
  .engage-split .engage {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 36px;
  }
  .engage-split .engage li { padding: 22px 24px; }

  /* plain variant: hairline rows with a large number, no card */
  .engage-plain .engage { gap: 0; margin-top: 28px; }
  .engage-plain .engage li {
    position: relative;
    padding: 22px 0 22px 64px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
  }
  .engage-plain .engage li:last-child { border-bottom: 1px solid var(--line); }
  .engage-plain .engage-n {
    position: absolute;
    left: 0;
    top: 22px;
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: var(--green);
  }
  .engage-plain .engage h3 { margin-bottom: 6px; }
  @media (hover: hover) {
    /* the card hover recolouring does not apply to the plain rows */
    .engage-plain .engage li:hover { border-color: var(--line); }
  }

  .engage-form {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
  }
  .mini-form h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
  }
  .mini-form .form-lede {
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.55;
    margin-bottom: 22px;
    max-width: none;
  }
  .mini-form .btn { width: 100%; text-align: center; }
  /* Turnstile builds a fixed 300px widget inside a shadow root, so it cannot
     shrink to fit a narrow card. The narrow-screen blocks at the foot of this
     file scale it down; this clip is the fallback where zoom is unsupported,
     and it stops a 300px widget ever widening the page. */
  .cf-turnstile { max-width: 100%; overflow: hidden; }
  .mini-form .cf-turnstile { margin: 2px 0 18px; }
  .mini-form .form-note { margin-top: 16px; }

  /* ---------- related services strip ---------- */
  .related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 48px;
  }
  .related.four { grid-template-columns: repeat(4, 1fr); }
  .related-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .18s ease;
  }
  @media (hover: hover) {
    .related-card:hover { border-color: var(--green); }
  }
  .related-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
  .related-k {
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-text);
  }
  .related-v {
    font-size: 16px;
    line-height: 1.55;
    color: var(--muted);
    text-wrap: pretty;
  }
  .related-more {
    margin-top: auto;
    padding-top: 8px;
    font-weight: 600;
    font-size: 15px;
    color: var(--green);
  }
  .related-more::after { content: " \2192"; }

  /* ---------- comparison table ---------- */
  /* the wrapper scrolls sideways on small screens, the table keeps its columns */
  .compare {
    margin-top: 48px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
  }
  .compare table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
  }
  .compare th, .compare td {
    text-align: left;
    vertical-align: top;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    font-size: 15.5px;
    line-height: 1.55;
  }
  .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
  .compare thead th {
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-text);
    background: var(--mist);
  }
  .compare tbody th {
    font-weight: 600;
    color: var(--navy);
    width: 22%;
    white-space: nowrap;
  }
  .compare td { color: var(--muted); }

  /* ---------- FAQ accordion ---------- */
  /* native details/summary, so it opens with no script and prints expanded */
  .faq { margin-top: 40px; max-width: 820px; border-top: 1px solid var(--line); }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--navy);
    text-wrap: balance;
  }
  /* strip the default disclosure triangle in both engine families */
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::marker { content: ""; }
  .faq-item summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 2px; }

  /* plus sign that loses its vertical stroke when the item is open */
  .faq-icon {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: border-color .18s ease;
  }
  .faq-icon::before, .faq-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--green);
    transform: translate(-50%, -50%);
  }
  .faq-icon::before { width: 12px; height: 2px; }
  .faq-icon::after { width: 2px; height: 12px; transition: transform .2s ease; }
  .faq-item[open] .faq-icon { border-color: var(--green); }
  .faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

  /* grid-row animation: the answer height is never hard-coded */
  .faq-a { display: grid; grid-template-rows: 1fr; }
  .faq-item[open] .faq-a { animation: faq-open .28s ease; }
  @keyframes faq-open {
    from { grid-template-rows: 0fr; opacity: 0; }
    to { grid-template-rows: 1fr; opacity: 1; }
  }
  .faq-inner { overflow: hidden; min-height: 0; }
  .faq-inner p { padding: 0 52px 22px 0; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
  @media (hover: hover) {
    .faq-item summary:hover .faq-icon { border-color: var(--green); }
  }

  @media (max-width: 960px) {
    .engage { grid-template-columns: 1fr; gap: 16px; }
    .engage-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .related { grid-template-columns: 1fr; gap: 16px; }
    .related.four { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .related.four { grid-template-columns: 1fr; }
    .compare th, .compare td { padding: 14px 16px; font-size: 15px; }
    .compare tbody th { white-space: normal; }
    .faq-item summary { font-size: 17px; padding: 18px 0; }
    .faq-inner p { padding-right: 40px; }
    .engage-form { padding: 24px 20px; }
    .engage-plain .engage li { padding-left: 52px; }
    .engage-plain .engage-n { font-size: 20px; }
  }

  /* ---------- inline SVG figures on small screens ---------- */
  /* Both figures scale with their container, so their labels shrink with it.
     Below roughly 540px the intro diagrams drop under 7px rendered, which is
     unreadable. Hold a legible minimum and let the card scroll sideways, the
     same behaviour the comparison table already has. */
  @media (max-width: 640px) {
    .intro-figure {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .intro-figure svg { min-width: 460px; }
    .tri-figure {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .tri-figure svg { min-width: 380px; }
  }

  /* ---------- Cloudflare Turnstile on narrow phones ---------- */
  /* The widget is a fixed 300px box. Inside the mini form card that leaves it
     wider than the card below about 390px, and on the contact page it passes
     the viewport below 350px. zoom shrinks the layout box as well as the paint,
     so the widget stays whole and the page keeps its width. */
  @media (max-width: 389px) {
    .engage-form { padding: 24px 16px; }
    .mini-form .cf-turnstile { zoom: 0.88; }
  }
  @media (max-width: 359px) {
    .cf-turnstile { zoom: 0.86; }
    .mini-form .cf-turnstile { zoom: 0.76; }
  }