/* GENERATED by scripts/fetch-fonts.mjs — do not edit by hand.
   Self-hosted so the page makes no request to fonts.googleapis.com or
   fonts.gstatic.com. Both families are OFL-1.1; see fonts/OFL-*.txt.
   build.mjs prepends this file to site.css, so it costs no extra request. */

/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/crimson-text-v19-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/crimson-text-v19-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/crimson-text-v19-600-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/crimson-text-v19-600-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/crimson-text-v19-700-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/crimson-text-v19-700-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/crimson-text-v19-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/crimson-text-v19-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/crimson-text-v19-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/crimson-text-v19-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/crimson-text-v19-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/crimson-text-v19-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/jost-v20-300-800-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/jost-v20-300-800-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/jost-v20-300-800-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/jost-v20-300-800-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   R&D Advantage — design tokens
   Brand palette lifted from the live site. Change a token here and it
   propagates everywhere.
   ========================================================================== */
:root {
  --navy: #002f44;
  --navy-heading: #002e45;   /* live uses this for h2s — 1 unit from --navy */
  --navy-deep: #001b30;
  /* The header rule is NOT the same navy as the band rule below the hero — it is
     darker and much less saturated. Measured off production; see the style guide. */
  --navy-rule: #021d32;
  --navy-rule-mid: #0b3448;
  --navy-mid: #255967;
  --blue: #004987;
  --blue-dark: #003868;
  --green: #417769;
  --green-deep: #002e44;
  --green-on-navy: #679287;  /* brand green lifted for dark grounds — 2.73:1 fails AA */
  --off-white: #f9f6f1;
  --white: #fff;
  --ink: #252525;
  --rule: rgba(65, 119, 105, 0.28);

  --font-display: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Crimson Text', Georgia, 'Times New Roman', serif;

  --wrap: 1200px;          /* content width — matches the live site exactly */
  --gutter: 20px;          /* breathing room OUTSIDE the content box */
  --gap-col: clamp(32px, 4vw, 64px);  /* gutter between paired columns */
  /* Production uses a flat 50px on every content band — not a responsive clamp.
     The replica ran clamp(48px, 7vw, 92px), which matched at mobile but was
     nearly double at desktop. */
  --band-y: 50px;
  --radius-pill: 100px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--green);
  font-family: var(--font-body);
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
/* Inline links inside body copy are bold green. Scoped to main: the header nav,
   the footer and card components style their own links. */
main p a:not(.btn), main li a:not(.btn) { color: var(--green); font-weight: 700; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-family: var(--font-display); color: var(--navy); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .45em; }
strong { font-weight: 700; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 20px;
  font-family: var(--font-display); text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  /* Not sticky — the header scrolls away with the page. `relative` still has to
     stay: the mobile nav panel is `position:absolute; top:100%` and needs the
     header as its containing block. */
  position: relative; z-index: 100;
  background: var(--white);
}
.site-header__inner {
  width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto;
  padding: 2px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-header__logo { display: block; flex: 0 0 auto; line-height: 0; }
.site-header__logo img { width: 115px; height: auto; }

/* flex:1 + the auto margins below put equal space either side of the link list,
   which is how the live header distributes logo | links | button. */
.site-nav { flex: 1; display: flex; align-items: center; }

.nav { display: flex; align-items: stretch; gap: 30px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav__item { position: relative; display: flex; align-items: center; margin: 0; }

.nav__link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: uppercase;
  color: var(--blue); text-decoration: none;
  padding: 20px 0; background: none; border: 0; cursor: pointer;
  transition: color .18s ease;
}
.nav__item.is-active > .nav__link { color: var(--blue); font-weight: 700; }

/* One indicator serves both hover and the current page: a 6px bar above the item
   that grows from the centre. The current page simply parks it at full width.
   Hover does not change the link colour — the bar is the whole effect. */
.nav__item::before {
  content: ''; position: absolute; left: 50%;
  /* Sits flush with the header's top edge. The item starts 7px below it, so a
     larger negative offset clips the bar against the top of the viewport. */
  top: -7px;
  transform: translateX(-50%);
  width: 0; height: 6px; background: var(--green);
  transition: width .25s ease;
}
.nav__item:hover::before,
.nav__item--has-menu.is-open::before,
.nav__item.is-active::before { width: 100%; }
.nav__chevron { width: 11px; height: 8px; flex: 0 0 auto; transition: transform .2s ease; }
.nav__item--has-menu.is-open .nav__chevron { transform: rotate(180deg); }

/* Aligned to the trigger's left edge rather than centred — a 240px panel centred
   under a short label reads as though it belongs to nothing. */
.nav__submenu {
  position: absolute; top: 100%; left: 0;
  min-width: 240px; margin: 0; padding: 6px 0; list-style: none;
  background: var(--white); border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 47, 68, .18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__item--has-menu.is-open .nav__submenu,
.nav__item--has-menu:hover .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__submenu li { margin: 0; }
.nav__sublink {
  display: block; padding: 11px 22px;
  font-family: var(--font-display); font-size: 15px; font-weight: 400;
  letter-spacing: normal; text-transform: uppercase;
  color: #404040; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.nav__sublink:hover, .nav__sublink[aria-current='page'] { background: var(--off-white); color: var(--green); }

/* Drawer chrome — the drawer's own header bar, its close button, the scrim and
   the contact block exist only under 900px. */
.site-nav__head, .site-nav__contact, .nav-scrim { display: none; }

.nav-burger { display: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-burger span { display: block; width: 26px; height: 2px; margin: 5px 0; background: var(--navy); transition: transform .2s ease, opacity .2s ease; }
.nav-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The two navy rules are 20px and use DIFFERENT gradients — they look alike at a
   glance but production sets them separately, and collapsing them into one rule
   makes the header band read too teal. */

/* Directly beneath the header. Darker, muted. */
.header-rule {
  height: 20px;
  background: linear-gradient(to right, var(--navy-rule), var(--navy-rule-mid), var(--navy-rule));
}

/* Below the hero and between full-bleed bands. Brighter, more teal in the centre. */
.band-rule {
  height: 20px;
  background: linear-gradient(to right, var(--navy-deep), var(--navy-mid), var(--navy-deep));
}

/* ==========================================================================
   Buttons

   Both variants are built the way the original is: the element itself is
   transparent with `z-index: 0` (its own stacking context), the resting fill
   lives on ::before at z-index -1, and the hover fill is a second pill on
   ::after that wipes across. Text sits above both automatically.
   ========================================================================== */
.btn {
  position: relative; z-index: 0; overflow: hidden;
  display: inline-block; text-decoration: none; text-align: center;
  background: none; border: 0; cursor: pointer; color: #fff;
  font-family: var(--font-display); font-weight: 500; letter-spacing: 1px;
}
.btn::before,
.btn::after { content: ''; position: absolute; z-index: -1; top: 50%; }
.btn::before {
  left: 50%; width: 100%; height: 100%;
  transform: translate(-50%, -50%);
}
.btn::after {
  left: 100%; width: 100%; height: 105%;
  transform: translate(50%, -50%);
  transition: left .6s ease-in-out, width 0ms .6s linear;
  will-change: left, width;
}
.btn:hover::after { left: -125%; width: 200%; transition: left 0ms, width .4s ease-in-out; }

/* Green gradient pill — the primary CTA everywhere. */
.btn--bubble {
  padding: 20px 34px; min-width: 160px;
  font-size: 1rem; line-height: 1.4;
  border-radius: var(--radius-pill);
}
.btn--bubble::before {
  border-radius: var(--radius-pill);
  background: linear-gradient(to bottom, var(--green), var(--green-deep));
}
.btn--bubble::after { border-radius: var(--radius-pill); background: var(--green-deep); }

/* Oversized pill — the home page's closing "Schedule a Call". */
.btn--large { font-size: 28px; min-width: 300px; }

/* The calculator readout's CTA is set in the body serif on the live site — its
   markup has no inner label element, so it never picks up Jost. Replicated for
   parity; delete this rule to make it match every other button. */
.btn--serif { font-family: var(--font-body); font-weight: 600; letter-spacing: normal; line-height: 1.25; }

/* Rounded rectangle — the header "Contact Us" button. Not a pill. */
.btn--solid {
  padding: 10px 24px;
  font-size: 14px; line-height: 1.43; text-transform: uppercase; letter-spacing: normal;
  border-radius: 12px;
}
.btn--solid::before { border-radius: 12px; background: var(--blue); }
.btn--solid::after { border-radius: 12px; background: var(--blue-dark); }

.site-nav__cta { flex: 0 0 auto; margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
  .btn--bubble:hover::before { background: var(--green-deep); }
  .btn--solid:hover::before { background: var(--blue-dark); }
}

/* ==========================================================================
   Bands, wedges, headings
   ========================================================================== */
.band { position: relative; padding-block: var(--band-y); }
.band--lg-copy { font-size: clamp(21px, 1.8vw, 25px); }
.band--white { background: var(--white); }
.band--off-white { background: var(--off-white); }
.band--navy { background: var(--navy); color: #fff; }
.band--navy h2, .band--navy h3 { color: #fff; }
.band--flush { padding-block: 0; }
.band--tight { padding-block: 30px; }
.band--closer { background: var(--white); text-align: center; padding-bottom: 0; }

/* The artwork is ~14.8:1, so the edge scales with the viewport exactly as the
   original full-width <img> does — roughly 116px tall at 1724px. */
.wedge {
  display: block; width: 100%; aspect-ratio: 504 / 34;
  /* The wedge overlaps the band padding above and below: its top half is already
     the colour of the band above and its strip the colour of the band below, so
     the overlap is invisible, and it reclaims dead space at a band transition.
     Percentages (which resolve against width, like the wedge's own height) keep
     the overlap proportional — fixed pixels would swallow the whole wedge on
     mobile, where it is only ~29px tall. */
  margin-top: -2%;
  margin-bottom: -2.1%;
  position: relative; z-index: 2;

  /* Seam guard — and the reason the ground is a gradient rather than a flat
     colour.

     The path is filled in the ABOVE colour and its top edge sits exactly on
     y=0 of the viewBox. The element's height is `width * 34/504`, so it is
     almost always fractional and that edge lands on a half device pixel. The
     rasteriser then antialiases the path's first row, letting the ground show
     through as a 1px hairline — and the ground used to be the BELOW colour,
     so the hairline read as an off-white line drawn across the white band.

     Painting the top 2px of the ground in the ABOVE colour makes that
     bleed-through invisible: it is now the same colour as both the path over
     it and the band above it. Safe because all three paths span the full width
     at y=0, so their top rows are ABOVE-coloured anyway.

     The bottom shadow guards the matching edge, where the band below meets the
     wedge; `box-shadow` paints outside the border box and takes no layout
     space, so the overlap percentages above are untouched. */
  background: linear-gradient(
    to bottom,
    var(--wedge-above, transparent) 0,
    var(--wedge-above, transparent) 2px,
    var(--wedge-below, transparent) 2px
  );
  box-shadow: 0 1px 0 var(--wedge-below, transparent);
}
.wedge--soft { aspect-ratio: 2000 / 135; }

.bar-heading {
  position: relative;
  font-size: clamp(28px, 3.6vw, 45px);
  font-weight: 600; text-transform: uppercase; letter-spacing: normal; line-height: 1;
  color: var(--navy-heading);
  margin-bottom: .6em;
}
.bar-heading--green { color: var(--green); }
.bar-heading::before {
  content: ''; position: absolute; left: -25px; top: .04em; bottom: .04em;
  width: 8px; background: var(--green);
}

.section-lede { max-width: 62ch; }
/* Slightly larger intro copy used above forms and the calculator. */
.lead { font-size: clamp(21px, 1.8vw, 25px); }
.lead strong { font-weight: 600; letter-spacing: 1px; }
/* Contact's intro paragraphs are semibold throughout, not just their strongs. */
.lead--strong { font-weight: 600; letter-spacing: 1px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; background: var(--white); overflow: hidden; }

/* The photo is sized as a percentage of the hero width and pinned right, exactly
   as the original does — not stretched to cover.

   This is an <img>, not a background-image, so the preload scanner can request it
   from the initial HTML: it is the LCP element on every page that has one. The
   geometry below reproduces what `background-size: <pct> auto` and
   `background-position: 100% 50%` used to do — width a percentage of the hero,
   height proportional, pinned to the right edge and vertically centred. The hero's
   own `overflow: hidden` does the cropping. */
.hero__photo {
  position: absolute; z-index: 0;
  top: 50%; right: 0;
  width: var(--hero-bg-size, 50%); height: auto;
  transform: translateY(-50%);
}
/* Full-width white wash that dissolves the photo into the copy. */
.hero__fade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, #fff 50%, rgba(255, 255, 255, 0) 68%);
}
/* Cut-out portrait standing in the hero, cropped by the hero's own overflow. */
.hero__person {
  position: absolute; top: 0; z-index: 2;
  height: 500px; width: auto;
  right: 50%; transform: translateX(150%);
}
.hero__inner { position: relative; z-index: 3; }

.hero--inner { --hero-bg-size: 50%; }
.hero--home  { --hero-bg-size: 60%; }

.hero__text { max-width: 743px; padding-block: 50px; }
.hero--home .hero__text { max-width: 595px; padding-block: 65px 45px; }
.hero--none .hero__text { max-width: 760px; }

.hero__title {
  font-size: clamp(34px, 4.4vw, 55px); font-weight: 500; text-transform: uppercase;
  line-height: 1; letter-spacing: normal; margin-bottom: .38em;
}
.hero__lede { max-width: none; }
.hero__cta { margin: 1.5em 0 0; }
.hero__note { margin-top: 1em; font-style: italic; color: var(--ink); font-size: 22px; }

/* ==========================================================================
   Split rows
   ========================================================================== */
/* Column ratios follow the live site (copy 2 : media 1, and 460/690 for the photo
   row) but the gutter is ours: the original runs an 11px column gap, which leaves
   video and copy almost touching. */
.split { display: grid; align-items: center; }
.split--text { grid-template-columns: 2fr 1fr; gap: var(--gap-col); }
.split--text.split--reverse { grid-template-columns: 1fr 2fr; }
.split--photo { grid-template-columns: 460fr 690fr; gap: var(--gap-col); }
.split--start { align-items: start; }
.split--reverse .split__text { order: 2; }
.split--reverse .split__media { order: 1; }
.split__media img { display: block; width: 100%; }

/* ==========================================================================
   Video
   ========================================================================== */
.video {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: var(--navy); line-height: 0; overflow: hidden;
}
.video__poster { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s ease, opacity .3s ease; }
.video:hover .video__poster { transform: scale(1.03); opacity: .88; }
.video__play {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.video__play svg { width: 82px; height: 82px; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5)); }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* ==========================================================================
   Framed photo (team portraits)
   ========================================================================== */
.framed {
  margin: 0 0 0 auto; border: 1px solid var(--green); padding: 0;
  background: var(--white); width: 100%;
}
.framed img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* ==========================================================================
   Value cards ("What makes it work")
   ========================================================================== */
.value-band {
  position: relative;
  background: var(--photo-bg) center / cover no-repeat;
  padding: clamp(44px, 6vw, 82px) 0 clamp(70px, 9vw, 150px);
}
.bracket {
  display: block; width: 100%; aspect-ratio: 500 / 33;
  position: absolute; left: 0; bottom: -1px; z-index: 2;
}
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(40px, 5vw, 72px); align-items: stretch; }
.value-card {
  display: flex; flex-direction: column; text-align: center;
  background: var(--off-white); border: 5px solid var(--green); outline: 15px solid var(--off-white);
}
.value-card__title {
  margin: 0; padding: 6px 10px 9px;
  font-family: var(--font-display); font-size: 19px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .7px; line-height: 1;
  color: #fff; background: var(--green);
}
.value-card__body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 18px 30px; }
.value-card__icon { width: 88px; height: 88px; }
.value-card__body p { font-size: 19px; line-height: 1.3; letter-spacing: -.3px; color: #002e45; }

/* ==========================================================================
   Quote
   ========================================================================== */
.quote { margin-inline: auto; max-width: 1120px; }
.quote__body { font-style: italic; font-weight: 600; letter-spacing: 1px; color: var(--green); }
.quote__cite { display: block; margin-top: 1em; font-style: italic; color: var(--ink); font-size: 22px; }

/* ==========================================================================
   Closer
   ========================================================================== */
.closer__title {
  font-size: clamp(26px, 3.1vw, 38.5px); font-weight: 600;
  letter-spacing: 1px; line-height: 1;
  margin-bottom: .7em;
}
.closer__note { margin-top: 1em; font-style: italic; color: var(--green); }

/* ==========================================================================
   FAQs
   ========================================================================== */
.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 70px); }
.faq-group__rule { border: 0; border-top: 1px solid var(--rule); margin: 0 0 8px; }
.faq { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 25.3px; font-weight: 700; letter-spacing: 1px; color: #000;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { flex: 0 0 auto; color: var(--green); transition: transform .2s ease; }
.faq__icon svg { width: 14px; height: 9px; display: block; }
.faq[open] .faq__icon { transform: rotate(180deg); }
.faq__a { padding: 0 0 24px; color: #757575; }

/* ==========================================================================
   Phases (The Process)
   ========================================================================== */
.phase + .phase { margin-top: clamp(56px, 6vw, 96px); }
.phase__title { margin-bottom: 0; }
/* The generous line box is what gives this line air under the big Jost title —
   the live site sets 1.9 here. Dropping it to a normal line-height makes the
   phase and role headings look cramped. */
.phase__sub {
  font-family: var(--font-body); font-style: italic; font-weight: 600;
  font-size: clamp(22px, 2.3vw, 30px); line-height: 1.9; letter-spacing: 1px;
  color: var(--navy);
  margin: 0 0 .55em;
}

/* ==========================================================================
   Criteria (Four Criteria)
   ========================================================================== */
/* margin (not padding) so the text column stays 750px wide whatever the indent */
.criterion__body { margin-left: var(--indent, 68px); max-width: 750px; }
@media (max-width: 900px) { .criterion__body { margin-left: 0; max-width: none; } }
.criterion__body--display {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 1px;
  font-size: clamp(19px, 1.6vw, 22px); line-height: 1.4;
}
ul.criterion__body--display { font-weight: 400; letter-spacing: normal; }
.cols-3 { columns: 3; column-gap: 40px; list-style: none; padding: 0; }
.cols-3 li { break-inside: avoid; padding-left: 1.1em; position: relative; }
.cols-3 li::before { content: '•'; position: absolute; left: 0; }
.callout {
  background: var(--navy); color: #fff; padding: clamp(28px, 4vw, 46px);
  max-width: 880px; margin-inline: auto;
}
.callout .bar-heading { color: var(--green-on-navy); }
.callout .bar-heading::before { background: #fff; }
.callout p { font-family: var(--font-display); font-weight: 400; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-rows { display: grid; gap: 40px; max-width: 640px; }
.contact-row { display: grid; grid-template-columns: 46px 1fr; gap: 22px; align-items: start; }
.contact-row img { width: 34px; height: 34px; margin-top: 6px; }
.contact-row__label {
  font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 40px); font-weight: 400;
  text-transform: uppercase; color: var(--navy); margin: 0 0 .1em;
}
.contact-row a { color: var(--green); font-weight: 700; font-size: 24px; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: 26px; max-width: 620px; }
.form--wide { max-width: 100%; }
.field { display: grid; gap: 9px; }
.field > label {
  font-family: var(--font-body); font-size: 16px; font-weight: 700;
  letter-spacing: normal; color: var(--ink);
}
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 18px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: 4px; background: #fff;
  width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(65,119,105,.15); }
/* Consent row — the checkbox sits beside its label rather than stacked above it,
   and the label drops to 400 so it reads as a sentence, not a field name. */
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.field--check input[type='checkbox'] {
  width: 20px; height: 20px; margin: 3px 0 0; padding: 0;
  accent-color: var(--green);
}
.field--check > label { font-weight: 400; line-height: 1.4; }
.field__optional { font-weight: 400; font-style: italic; color: #666; }

/* Honeypot. Moved off-screen rather than `display: none`, which some bots detect
   and skip; Formspree discards any submission that fills `_gotcha`. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.form__note { font-size: 16px; color: var(--ink); font-style: italic; }
.form__status { font-family: var(--font-display); font-weight: 600; }
/* The status line is empty until a submission happens; without this it still
   occupies a grid row and opens a gap above the note. */
.form__status:empty { display: none; }
.form__status[data-state='error'] { color: #b3261e; }
.form__status[data-state='ok'] { color: var(--green); }

/* ==========================================================================
   Calculator
   ========================================================================== */
.calc {
  background: #fff; padding: 32px; border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08); max-width: 780px; margin-inline: auto;
}
.calc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.calc__field label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15.2px; color: #444; margin-bottom: 7px;
}
.calc__input { display: flex; border: 1px solid #d9d9d9; border-radius: 4px; overflow: hidden; }
.calc__prefix {
  display: grid; place-items: center; width: 42px; background: #ececec;
  font-family: var(--font-body); color: #6d6d6d; font-size: 18px;
}
.calc__input input {
  flex: 1; border: 0; padding: 13px 14px; font-family: var(--font-body); font-size: 18px;
  background: #fafafa; color: var(--ink); min-width: 0;
}
.calc__input input:focus { outline: none; background: #fff; }
.tip { position: relative; display: inline-block; }
.tip__badge {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  border: 1px solid var(--green); border-radius: 50%; color: var(--green);
  font-family: var(--font-body); font-size: 13px; font-style: italic;
  line-height: 1; cursor: help; background: none; padding: 0;
}
.tip__body {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 270px; z-index: 20;
  background: var(--navy); color: #fff; padding: 12px 14px; border-radius: 6px;
  font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0, 47, 68, .25);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.tip__body::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--navy);
}
.tip:hover .tip__body,
.tip__badge:focus-visible + .tip__body {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.calc__result {
  margin-top: 26px; padding: 24px; text-align: center;
  background: #f0fdf4; border: 2px solid #34805e; border-radius: 10px;
}
/* Jost, not the body serif — and green, not navy. The value below it is the
   serif. The two greens differ on purpose. */
.calc__result-label {
  margin: 0 0 12.8px;
  font-family: var(--font-display);
  font-size: 17.6px; font-weight: 600; line-height: 1; letter-spacing: normal;
  color: #166534;
}
.calc__result-value { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 33.6px; color: #15803d; }
/* Deliberately plain: this control is styled by the calculator, not the
   site button system. Matches the live page. */
.calc__submit {
  display: block; appearance: none; -webkit-appearance: none;
  width: 100%; margin-top: 24px; padding: 16px 32px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: #34805e; color: #fff;
  font-family: Arial, Helvetica, sans-serif; font-size: 17.6px; font-weight: 600;
  letter-spacing: normal; transition: background .2s;
}
.calc__submit:hover { background: #2b6b4e; }
/* The readout lives INSIDE the green result panel, as a white card. It must
   collapse completely when empty — otherwise it leaves a stray rule under the
   result. */
.calc__readout {
  margin-top: 0; padding: 24px; border-radius: 15px;
  background: #fff; text-align: left;
  font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--ink);
}
.calc__readout:empty { display: none; padding: 0; margin: 0; }
.calc__readout p { margin: 0; }
.calc__readout strong { font-weight: 600; }
.calc__readout-cta { text-align: center; margin-top: 1.6em !important; }
.calc__disclaim { text-align: center; font-size: 15px; color: var(--ink); margin-top: 14px; }
p.calc__disclaim a:not(.btn) { text-decoration: none; color: var(--ink); font-weight: 400; }
p.calc__disclaim a:not(.btn):hover { text-decoration: underline; }

.fineprint { font-size: 13px; line-height: 1.5; color: var(--ink); }
.fineprint h2, .fineprint h3 {
  font-family: var(--font-body); text-transform: none;
  font-weight: 600; letter-spacing: 1px; color: var(--ink);
}
.fineprint h2 { font-size: 15px; }
.fineprint h3 { font-size: 13px; }
.fineprint strong { font-weight: 600; letter-spacing: 1px; }

/* ==========================================================================
   Article (blog)
   ========================================================================== */
.breadcrumbs { font-family: var(--font-display); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--green); margin-bottom: 1.4em; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.article { max-width: 860px; }
.article__meta { font-family: var(--font-display); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--green); margin-bottom: 1.6em; }
.article h2 { font-size: clamp(24px, 2.6vw, 32px); text-transform: none; margin-top: 1.6em; }
.post-list { display: grid; gap: 30px; list-style: none; padding: 0; max-width: 860px; }
.post-card { padding: 28px 0; border-top: 1px solid var(--rule); }
.post-card h2 { font-size: clamp(22px, 2.4vw, 30px); text-transform: none; margin-bottom: .3em; }
.post-list .post-card a { color: var(--navy); font-weight: 600; text-decoration: none; }
.post-list .post-card a:hover { color: var(--green); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { position: relative; background: var(--green-deep); color: #fff; margin-top: 0; }
.site-footer__wave {
  display: block; width: 100%;
  height: clamp(52px, 6.4vw, 118px);
  margin-bottom: -1px;
}
.site-footer__inner {
  position: relative;
  padding: 0 var(--gutter) clamp(34px, 4vw, 54px);
  text-align: center;
}
.site-footer::before {
  content: ''; position: absolute; inset: 0;
  background: url('/images/blueprint-background-header-banner.jpg') center / cover no-repeat;
  opacity: .16; pointer-events: none;
}
.site-footer > * { position: relative; z-index: 1; }
.site-footer__legal, .site-footer__partner {
  font-family: var(--font-body); font-size: 14px; font-weight: 400;
  letter-spacing: normal; margin: 0;
}
.site-footer__partner { margin-top: .7em; }
.site-footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: #a8c9bd; }
.footer__sep { margin-inline: 8px; opacity: .7; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.text-center { text-align: center; }
.text-center .display-heading { max-width: 800px; margin-inline: auto; }
.stack > * + * { margin-top: 1em; }
.mt-lg { margin-top: clamp(28px, 3.4vw, 48px); }
.narrow { max-width: none; }
.narrow-center { max-width: 900px; margin-inline: auto; }
.display-heading {
  font-family: var(--font-display); font-weight: 600; color: var(--navy);
  font-size: clamp(26px, 3.1vw, 38.5px); line-height: 1; letter-spacing: 1px;
}
.subhead {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(24px, 2.6vw, 33px); letter-spacing: .5px; margin-bottom: .25em;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); row-gap: 52px; }
  .cols-3 { columns: 2; }
}

@media (max-width: 900px) {
  .nav-burger { display: block; }

  /* Scrim. Only actually seen on tablets, where the drawer is narrower than the
     viewport; on phones the drawer covers it. Tapping it closes the menu. */
  .nav-scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 27, 48, .55);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
  }
  .site-header.is-open .nav-scrim { opacity: 1; visibility: visible; }

  /* A drawer fixed to the viewport, NOT hung off the bottom of the header.
     The header is `position: relative` and scrolls away, so anchoring the panel
     to it would place the menu wherever the header happened to be. */
  .site-nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(100%, 380px);
    flex: none; margin: 0; padding: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility .28s;
    box-shadow: -12px 0 40px rgba(0, 47, 68, .18);
  }
  .site-header.is-open .site-nav { transform: translateX(0); visibility: visible; }

  /* The drawer covers the site header, so it carries its own bar in the same
     place — logo left, close right, where the burger just was. */
  .site-nav__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 8px var(--gutter); border-bottom: 1px solid var(--rule);
  }
  .site-nav__logo { display: block; line-height: 0; }
  .site-nav__logo img { width: 104px; height: auto; }
  .nav-close {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 48px; height: 48px; margin-right: -12px;
    padding: 0; background: none; border: 0; cursor: pointer; color: var(--navy);
  }
  .nav-close svg { width: 24px; height: 24px; }

  /* `margin: 0` matters: the desktop rule is `margin: 0 0 0 auto`, which pushed
     the whole list into a narrow column against the right edge. */
  .nav { flex-direction: column; gap: 0; margin: 0; padding: 6px 0 0; }
  .nav__item { display: block; margin: 0; border-bottom: 1px solid var(--rule); }
  .nav__item::before { display: none; }

  .nav__link {
    width: 100%; justify-content: space-between;
    padding: 16px var(--gutter); min-height: 56px;
    font-size: 16px; letter-spacing: .06em;
  }
  /* Current page gets the green left bar — the same motif barHeading() uses,
     rather than a new device invented for the drawer. */
  .nav__item.is-active > .nav__link {
    color: var(--green); font-weight: 700;
    box-shadow: inset 4px 0 0 var(--green);
  }
  .nav__chevron { width: 13px; height: 9px; }

  /* Accordion. `visibility` is carried alongside the height so collapsed links
     leave the tab order — with height alone they stay focusable but invisible. */
  .nav__submenu {
    position: static; transform: none; opacity: 1;
    background: var(--off-white); border-radius: 0; box-shadow: none;
    min-width: 0; margin: 0; padding: 0; display: block;
    max-height: 0; visibility: hidden; overflow: hidden;
    transition: max-height .28s ease, visibility .28s;
  }
  /* A generous cap, not an exact one: the menu holds two items (~100px), and an
     over-large cap only makes the tail of the ease imperceptibly quick. */
  .nav__item--has-menu.is-open .nav__submenu { max-height: 320px; visibility: visible; }
  .nav__sublink {
    display: flex; align-items: center; min-height: 48px;
    padding: 12px var(--gutter) 12px calc(var(--gutter) + 16px);
    font-size: 14px; letter-spacing: .05em;
  }
  .nav__sublink[aria-current='page'] { background: none; color: var(--green); font-weight: 700; }

  .site-nav__cta {
    display: block; margin: 24px var(--gutter) 0; padding: 15px 24px;
    font-size: 15px;
  }

  /* `margin-top: auto` parks this at the foot of the drawer when the list is
     short, and lets it sit right under the CTA when the list is tall. */
  .site-nav__contact {
    display: flex; flex-direction: column; align-items: flex-start;
    margin: auto var(--gutter) 0; padding: 26px 0 28px;
    font-family: var(--font-display);
  }
  .site-nav__contact-label {
    margin: 0 0 8px; font-size: 11px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--green);
  }
  .site-nav__contact a {
    padding: 5px 0; font-size: 15px; color: var(--navy); text-decoration: none;
  }
  .site-nav__contact a:hover { color: var(--green); }

  /* On narrow screens the photo sits behind the copy rather than beside it. */
  /* Behind the copy rather than beside it — the <img> equivalent of `cover`. */
  .hero__photo {
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transform: none; opacity: .28;
  }
  .hero__fade { background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, .6) 100%); }
  .hero__person { display: none; }
  .hero__text, .hero--home .hero__text { max-width: none; }

  .split, .split--text, .split--text.split--reverse, .split--photo {
    grid-template-columns: 1fr; gap: 32px;
  }
  .split--reverse .split__text, .split--reverse .split__media { order: 0; }
  .calc__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .value-grid { grid-template-columns: 1fr; }
  .cols-3 { columns: 1; }
  .contact-row { grid-template-columns: 34px 1fr; gap: 14px; }
}

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