/* =========================================================================
   Joseph Ruiz, Mortgage Loan Officer at The Lending Pros.
   The whole design system. Hand-written, no build step.

   Brand values come from PART 1 of Brett's build spec. The aesthetic is the
   Erica Iriarte system the client named as the reference: warm white and
   cream, serif display type, generous space, restrained motion. The one
   departure the client asked for is a blue accent.

   Every rule tagged [CHECKLIST n] is an acceptance criterion from PART 2 of
   that spec. Each one is a defect a previous Appomark build shipped. Do not
   "simplify" them away.
   ========================================================================= */

/* [CHECKLIST 4] FIRST rule in the sheet, deliberately. Without it iOS Safari
   paints button text in system blue while desktop renders black, so the bug is
   invisible in desktop testing. */
button {
  color: inherit;
  font: inherit;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --paper: #FFFFFF;
  --cream: #FBF9F7;                  /* page background */
  --sand: #F0EDE8;                   /* alternating sections */
  --line: #E2DED6;
  --ink: #101418;
  --ink-soft: rgba(16, 20, 24, .66);
  --ink-faint: rgba(16, 20, 24, .44);

  /* THE ACCENT IS SAMPLED FROM HIS OWN LOGO, not invented.
     The spec shipped a placeholder navy (#1F5FA8) pending the client's hex
     codes. His logo arrived afterwards and carries the real brand blue in its
     ring: #47A5CD, hue 198 degrees. That raw colour is far too light for text
     (2.65:1 on cream, 2.79:1 for white on it, both well under the 4.5:1 floor),
     so the tokens below hold HIS HUE AND SATURATION darkened to a usable
     lightness. Measured, not guessed:
       --blue on --cream  6.81:1     --blue on --sand  6.12:1
       white on --blue    7.15:1
     If he sends exact hexes, swap these three and RE-CHECK those three numbers
     before shipping. Say so if his supplied blue fails; do not ship it quietly. */
  --blue: #215E78;
  --blue-deep: #1A4A5E;
  --blue-wash: #EDF6FA;              /* tinted panel, calculators and callouts */

  /* [CHECKLIST] Neutral near black RGB triplet for photo overlays. NEVER a
     brand colour: a tinted scrim colours every photograph on the site and costs
     a full revision round to trace back. */
  --scrim: 10, 9, 8;

  --display: 'Noto Serif Display', 'Times New Roman', serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --nav-h: 88px;
  --wrap: 1240px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* The vertical rhythm is ONE scale, here and nowhere else. Every section pays
     the gap twice, once as its own bottom padding and once as the next
     section's top, so 56px a side is the 112px desktop budget the responsive
     check enforces. Never hard-code a fat literal padding on a section; if a
     section needs more air, raise this and re-run the check. */
  --gap-section: 56px;
  --gap-tight: 40px;
  --gap-head: 24px;
}

@media (max-width: 860px) {
  :root {
    --nav-h: 72px;
    --gap-section: 36px;
    --gap-tight: 28px;
  }
}

/* -------------------------------------------------------------------- base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Any anchored target lands with its heading clear of the fixed nav. */
:target,
section[id] {
  scroll-margin-top: 104px;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

/* `height: auto` is NOT cosmetic here, it is what makes `aspect-ratio` work.
   An <img> carrying width and height ATTRIBUTES (which it should, so the
   browser can reserve the space and avoid a layout shift) gets a presentational
   height, and a height that is not `auto` makes the browser ignore
   `aspect-ratio` entirely. The About portrait shipped 562px wide and 1750px
   tall because of exactly that, which then pushed the bio beside it a thousand
   pixels down the page and out of the first screen. Nothing in the responsive
   check can see this: it causes no horizontal overflow, no blank section and no
   rhythm breach. It was found by looking at the page. */
img[width][height] {
  height: auto;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  color: var(--blue-deep);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--gap-tight) 0;
}

.container {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}

@media (max-width: 560px) {
  .container {
    width: calc(100% - 32px);
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- type kit */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.14;
  margin: 0;
  letter-spacing: -.01em;
}

/* [CHECKLIST 10] No trailing heading periods anywhere on this site. */

.eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}

.h-display {
  font-size: clamp(38px, 6.4vw, 78px);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.h-section {
  font-size: clamp(28px, 3.6vw, 44px);
}

.h-card {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 300;
}

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-soft);
  max-width: 62ch;
}

.muted {
  color: var(--ink-soft);
}

.small {
  font-size: 13px;
  line-height: 1.6;
}

/* A TEXT column capped for reading length is deliberate typography, not dead
   space. The responsive check's FILL pass skips these on purpose. */
.section-head {
  max-width: 760px;
  margin-bottom: var(--gap-head);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.prose {
  max-width: 68ch;
}

.prose p,
.prose ul,
.prose ol {
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.prose h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 34px 0 12px;
}

.prose h3 {
  font-size: 20px;
  margin: 26px 0 8px;
}

.prose li {
  margin-bottom: 8px;
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* [CHECKLIST 1] inline-flex + nowrap, so a CTA never wraps to two lines and
     shoves the nav bar taller. */
  white-space: nowrap;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.btn-solid {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.btn-solid:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--cream);
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}

.btn-ghost:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}

.link-more::after {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width .25s var(--ease);
}

.link-more:hover::after {
  width: 34px;
}

/* -------------------------------------------------------------- navigation */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  border-bottom: 1px solid transparent;
}

/* [CHECKLIST 2] Solid cream with a hairline past 80px of scroll. Transition
   only, never a layout change, or the page jumps under the reader. */
.nav.is-solid {
  background: var(--cream);
  border-bottom-color: var(--line);
}

/* Interior pages have a light header behind the bar, so the bar is solid from
   the first frame. Only the home hero is dark enough for transparent chrome. */
.nav.is-static {
  background: var(--cream);
  border-bottom-color: var(--line);
}

.nav-inner {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

/* 1.3 The wordmark. No logo was supplied at spec time; one arrived later, so
   the mark is an image with the typographic lockup beside it. One class, so a
   replacement logo is a single swap. */
.nav-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}

.nav-wordmark img {
  width: 40px;
  height: 40px;
  flex: none;
}

.wordmark-text {
  display: block;
}

.wordmark-name {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

.wordmark-role {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 5px;
  white-space: nowrap;
}

.nav.is-transparent .wordmark-name {
  color: #fff;
}

.nav.is-transparent .wordmark-role {
  color: rgba(255, 255, 255, .72);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.nav-link {
  position: relative;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  /* [CHECKLIST] A desktop nav item holds ONE line, always. Wrap adds height,
     not width, so a sweep cannot see it. */
  white-space: nowrap;
}

.nav.is-transparent .nav-link {
  color: #fff;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .28s var(--ease);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  width: 100%;
}

.nav-cta {
  display: flex;
  justify-content: flex-end;
}

.nav-cta .btn {
  padding: 12px 20px;
  font-size: 10px;
}

.nav.is-transparent .nav-cta .btn-solid {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.nav.is-transparent .nav-cta .btn-solid:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  /* The burger belongs hard right. See the mobile grid redeclaration below,
     which is what actually keeps it there. */
  justify-self: end;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}

.nav.is-transparent .nav-toggle span {
  background: #fff;
}

.nav-toggle[aria-expanded="true"] span {
  background: var(--ink);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ------------------------------------------------------------ mobile panel */
/* [CHECKLIST 1] The burger breakpoint is 1150px. THE GRID IS REDECLARED HERE,
   and that is the whole point of this block. Below the breakpoint the links and
   the CTA go display:none, which takes them OUT of the parent grid, so with a
   `1fr auto 1fr` template the two survivors fall into columns one and two and
   the burger lands DEAD CENTRE. `margin-left:auto` cannot rescue it, because an
   `auto` column is shrink-to-fit and offers no free space to push into. This
   shipped centred on a previous build at every width from 320 to 1150 and
   survived a 91 screenshot contact sheet, because nobody looked at that corner. */
@media (max-width: 1150px) {
  .nav-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
    justify-self: end;
  }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  /* [CHECKLIST 3] Solid background while open, and the top padding reserves the
     bar height so the first item is never under the burger. */
  background: var(--cream);
  padding: calc(var(--nav-h) + 24px) 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .4s var(--ease), visibility .4s;
  overflow-y: auto;
}

.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
}

/* [CHECKLIST 3] No scroll behind the open panel. */
body.menu-open {
  overflow: hidden;
}

.mobile-menu a:not(.btn) {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 300;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.mobile-menu .btn {
  margin-top: 22px;
  align-self: flex-start;
}

.mobile-contact {
  margin-top: auto;
  padding-top: 28px;
  font-size: 13px;
  color: var(--ink-soft);
}

.mobile-contact a {
  display: block;
  color: var(--ink);
  padding: 3px 0;
  font-family: var(--body);
  font-size: 13px;
  border: 0;
}

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  /* [CHECKLIST 5] 100dvh, so mobile browser chrome does not crop the buttons. */
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  /* The bottom padding is part of the RHYTHM BUDGET, not just breathing room:
     it is paid once here and again as the next section's top padding, so a
     viewport-relative value that looks harmless at 1440 blows the phone budget
     on a tall screen. The first build ran clamp(48px, 8vh, 96px) and the check
     caught 108px against a 96px mobile ceiling. Keep the ceiling low enough
     that this plus --gap-section stays inside the budget at every height. */
  padding: calc(var(--nav-h) + 40px) 0 clamp(44px, 6vh, 78px);
  overflow: hidden;
}

@media (max-width: 860px) {
  .hero {
    padding-bottom: 44px;
  }
}

.hero-media {
  position: absolute;
  inset: 0;
  /* [CHECKLIST 8] No z-index:-1 decorations. The media is a sibling behind the
     content by document order and a positive stack, never a negative one, which
     on some Safari versions drops it behind the page background entirely. */
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The bias keeps the porch and door in frame on a tall phone viewport, where
     a centred crop pushes the house out of the top. */
  object-position: 50% 62%;
}

/* TWO gradients, and the horizontal one is the load-bearing half.
   The hero photograph is a bright cream house in morning light, so a purely
   vertical scrim leaves the text column sitting on the lightest part of the
   frame: the first build shipped "MORTGAGE LOAN OFFICER, THE LENDING PROS" in
   11px white at .82 over white siding, which was effectively invisible. The
   left-to-right pass gives the words their own ground without dimming the
   whole picture, which is what a heavier vertical scrim would have done. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(var(--scrim), .74) 0%, rgba(var(--scrim), .58) 34%, rgba(var(--scrim), .18) 66%, rgba(var(--scrim), 0) 92%),
    linear-gradient(to top, rgba(var(--scrim), .72) 0%, rgba(var(--scrim), .34) 45%, rgba(var(--scrim), .16) 72%, rgba(var(--scrim), .34) 100%);
}

/* On a phone the copy runs the full width, so a left-weighted gradient would
   leave the right end of every line unprotected. Below the burger breakpoint
   the scrim goes back to one even vertical wash, weighted harder. */
@media (max-width: 1150px) {
  .hero-scrim {
    background:
      linear-gradient(to top, rgba(var(--scrim), .80) 0%, rgba(var(--scrim), .58) 46%, rgba(var(--scrim), .40) 74%, rgba(var(--scrim), .46) 100%);
  }
}

.hero .container {
  position: relative;
  z-index: 1;
  color: #fff;
}

.hero-lockup {
  margin-bottom: 20px;
}

.hero-name {
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.05;
  color: #fff;
}

.hero-role {
  display: block;
  font-size: clamp(9px, 1vw, 11px);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  /* .92, not .82: at 11px with .34em tracking this line has very little ink,
     so it loses legibility over a photograph long before the headline does. */
  color: rgba(255, 255, 255, .92);
  margin-top: 14px;
}

.hero-sub {
  font-size: clamp(16px, 1.7vw, 21px);
  color: rgba(255, 255, 255, .9);
  max-width: 56ch;
  margin: 0 0 30px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .26);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

/* ------------------------------------------------------------ page headers */
/* [CHECKLIST 5] Interior headers are 44svh with the bar height cleared. */
.page-header {
  position: relative;
  min-height: 44svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 16px) 0 40px;
  overflow: hidden;
  background: var(--sand);
}

.page-header-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-header-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-header-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--scrim), .74), rgba(var(--scrim), .30));
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.page-header.has-media .container {
  color: #fff;
}

.page-header.has-media .eyebrow {
  color: rgba(255, 255, 255, .84);
}

.page-header.has-media .lede {
  color: rgba(255, 255, 255, .9);
}

.page-header-title {
  font-size: clamp(32px, 5vw, 60px);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.page-header .lede {
  margin: 16px 0 0;
}

/* A header with no photo, used where doubling an image would break the
   one-image-per-slot rule. */
.page-header.plain {
  min-height: auto;
  padding: calc(var(--nav-h) + 48px) 0 var(--gap-tight);
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------- sections */
.section {
  padding: var(--gap-section) 0;
}

.section-sand {
  background: var(--sand);
}

.section-paper {
  background: var(--paper);
}

.section-ink {
  background: var(--ink);
  color: rgba(255, 255, 255, .84);
}

.section-ink h2,
.section-ink h3 {
  color: #fff;
}

.section-ink .eyebrow {
  color: rgba(255, 255, 255, .68);
}

/* --------------------------------------------------------- split, 2 column */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.split-media.portrait img {
  aspect-ratio: 4 / 5;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }

  /* [CHECKLIST 7] Explicit order on mobile: the words come first, the picture
     second. Source order alone leaves half the splits upside down. */
  .split-text {
    order: 1;
  }

  .split-media {
    order: 2;
  }
}

/* ------------------------------------------------------------- card grids */
/* [CHECKLIST] A component FILLS the column it is given. These grids are the
   full wrap width; a narrow one would trail dead space down its right. */
.card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}

.card-grid.two {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .card-grid,
  .card-grid.two {
    grid-template-columns: 1fr;
  }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 26px 24px 24px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

a.card {
  color: inherit;
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 14px 34px rgba(16, 20, 24, .07);
}

.card-num {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--blue);
  margin-bottom: 12px;
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0 0 18px;
}

.card .link-more {
  margin-top: auto;
}

/* Article cards carry a picture. One image per slot; the learn index uses a
   tinted plate rather than reusing a photo nine times. */
.article-card-plate {
  aspect-ratio: 16 / 10;
  background: var(--blue-wash);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -26px -24px 20px;
}

.article-card-plate span {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 300;
  color: var(--blue);
  opacity: .5;
}

.card-meta {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

/* ------------------------------------------------------------ steps / list */
.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.step-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  color: var(--ink-soft);
}

.step-list li::before {
  content: counter(step);
  counter-increment: step;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--blue);
  border-radius: 50%;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
}

.step-list {
  counter-reset: step;
}

.tick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.tick-list li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-soft);
}

.tick-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--blue);
  border-bottom: 1.5px solid var(--blue);
  transform: rotate(45deg);
}

/* ------------------------------------------------------------------- FAQ */
.faq {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
}

.faq-q::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--blue);
  border-bottom: 1.5px solid var(--blue);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .3s var(--ease);
}

.faq-q[aria-expanded="true"]::after {
  transform: rotate(225deg) translate(-3px, -3px);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease);
}

.faq-q[aria-expanded="true"] + .faq-a {
  grid-template-rows: 1fr;
}

.faq-a > div {
  overflow: hidden;
}

.faq-a p {
  color: var(--ink-soft);
  margin: 0 0 20px;
  max-width: 74ch;
}

/* --------------------------------------------------------- sticky split */
/* Heading holds the left column, the component fills the right. This is what
   stops a list capped narrow inside a wide wrap from trailing dead space. */
.sticky-split {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.sticky-split > .section-head {
  position: sticky;
  top: 120px;
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .sticky-split {
    grid-template-columns: 1fr;
  }

  .sticky-split > .section-head {
    position: static;
    margin-bottom: var(--gap-head);
  }
}

/* ------------------------------------------------------------------ forms */
/* [CHECKLIST 6] Every field gets min-width:0, every input is width:100%, the
   button lives in its own cell, 2 columns at 860 and 1 at 560, and there is
   zero horizontal scroll at 390px. THE CALCULATOR SUITE IS THE HIGHEST RISK
   COMPONENT FOR THIS, so it is built under exactly these rules below. */
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.field.full {
  grid-column: 1 / -1;
}

.field label,
.field > .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.field textarea {
  min-height: 132px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(33, 94, 120, .16);
}

.field .hint {
  font-size: 12px;
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.field-error {
  color: #A3242B;
  font-size: 12px;
}

.consent {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
}

.consent input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--blue);
}

.consent label {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* The submit sits in its OWN cell, never sharing a grid track with a field. */
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.form-note {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--ink-faint);
}

.form-status {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--blue-wash);
  font-size: 14px;
  display: none;
}

.form-status.is-shown {
  display: block;
}

.form-status.is-error {
  background: #FBF0F0;
  border-color: #E4C8C8;
  color: #8C1F26;
}

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 860px) {
  .form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------- calculator suite */
.calc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--gap-head);
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.calc-tab {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.calc-tab:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.calc-tab[aria-selected="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.calc-panel[hidden] {
  display: none;
}

/* The calculator is a FORM and obeys every form rule above. */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

@media (max-width: 1024px) {
  .calc {
    grid-template-columns: minmax(0, 1fr);
  }
}

.calc-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 560px) {
  .calc-inputs {
    grid-template-columns: minmax(0, 1fr);
  }
}

.calc-results {
  position: sticky;
  top: 116px;
  background: var(--blue-wash);
  border: 1px solid #D4E6EE;
  padding: 26px 24px;
}

@media (max-width: 1024px) {
  .calc-results {
    position: static;
  }
}

.calc-headline {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 300;
  color: var(--blue);
  line-height: 1.1;
}

.calc-headline-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.calc-rows {
  list-style: none;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #D4E6EE;
  display: grid;
  gap: 11px;
}

.calc-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--ink-soft);
}

.calc-rows li b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-rows li.is-total {
  border-top: 1px solid #D4E6EE;
  padding-top: 12px;
  margin-top: 4px;
  font-size: 15px;
  color: var(--ink);
}

.calc-flag {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 2px;
  font-size: 13px;
  line-height: 1.5;
}

.calc-flag.ok {
  background: #EAF3EC;
  color: #1F5130;
}

.calc-flag.warn {
  background: #FBF2E4;
  color: #7A5312;
}

.calc-flag.bad {
  background: #FBF0F0;
  color: #8C1F26;
}

/* A pair of range + number that stay in step. */
.calc-range {
  display: grid;
  gap: 8px;
}

.calc-range input[type="range"] {
  width: 100%;
  accent-color: var(--blue);
  padding: 0;
  border: 0;
  background: transparent;
}

.calc-sub {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.calc-sub button {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}

.calc-sub button[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* PART 6: required beneath EVERY calculator. */
.calc-disclaimer {
  margin-top: var(--gap-head);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 88ch;
}

.calc-cta {
  margin-top: 20px;
}

/* ------------------------------------------------------- the quote wizard */
.wizard {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(22px, 3vw, 38px);
}

.wizard-progress {
  height: 3px;
  background: var(--line);
  margin-bottom: 22px;
}

.wizard-bar {
  height: 100%;
  width: 10%;
  background: var(--blue);
  transition: width .35s var(--ease);
}

.wizard-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.wizard-step[hidden] {
  display: none;
}

.wizard-q {
  font-family: var(--display);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 300;
  margin: 0 0 6px;
}

.wizard-help {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 20px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
}

.choice {
  padding: 18px 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  text-align: left;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  min-width: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}

.choice:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.choice[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue-wash);
}

.choice small {
  display: block;
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: 12.5px;
}

.wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.wizard-actions .spacer {
  flex: 1 1 auto;
}

.btn-quiet {
  background: none;
  border: 0;
  padding: 12px 4px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.btn-quiet:hover {
  color: var(--ink);
}

.wizard-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--blue-wash);
  font-size: 13px;
  color: var(--ink-soft);
}

.wizard-done {
  text-align: center;
  padding: 20px 0;
}

.wizard-done h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

/* -------------------------------------------------------------- CTA band */
.cta-band {
  background: var(--sand);
  padding: var(--gap-section) 0;
  text-align: center;
}

.cta-band .section-head {
  margin-inline: auto;
}

.cta-band .btn {
  margin-top: 6px;
}

/* ------------------------------------------------------- contact details */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 26px 24px;
}

.contact-card h3 {
  font-size: 19px;
  margin-bottom: 16px;
}

.contact-row {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.contact-row:last-of-type {
  border-bottom: 0;
}

.contact-row .label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.contact-row a,
.contact-row span.v {
  color: var(--ink);
  font-size: 15px;
}

.contact-row a:hover {
  color: var(--blue);
}

/* ----------------------------------------------------------------- footer */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .74);
  padding: var(--gap-section) 0 0;
  font-size: 14px;
}

.footer a {
  color: rgba(255, 255, 255, .74);
}

.footer a:hover {
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 3vw, 48px);
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer h4 {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 14px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer-brand .nav-wordmark {
  color: #fff;
  margin-bottom: 14px;
}

.footer-brand .wordmark-name {
  color: #fff;
}

.footer-brand .wordmark-role {
  color: rgba(255, 255, 255, .55);
}

.footer-brand p {
  margin: 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, .6);
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.footer-social a {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.footer-social a:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
}

.footer-social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* PART 10. The identity line and the disclaimers are required, not styling. */
.footer-legal {
  margin-top: var(--gap-tight);
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding: 26px 0 30px;
}

.footer-identity {
  color: rgba(255, 255, 255, .88);
  font-size: 13.5px;
  margin: 0 0 4px;
}

.footer-identity .sep {
  color: rgba(255, 255, 255, .35);
  padding: 0 8px;
}

.footer-broker {
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  margin: 0 0 18px;
}

.footer-disclaimer {
  color: rgba(255, 255, 255, .45);
  font-size: 12px;
  line-height: 1.65;
  max-width: 96ch;
  margin: 0 0 16px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 20px;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 12.5px;
}

.footer-marks {
  display: flex;
  align-items: center;
  gap: 14px;
}

.eho {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .6);
}

.eho svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  flex: none;
}

.eho span {
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.25;
}

.footer-copy {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .45);
}

/* ------------------------------------------------------------------ reveal */
/* [CHECKLIST 13] The restrained set only: fade and rise on scroll with a
   reduced-motion guard, staggers capped, photo scale 1.04 to 1. Nothing heavier. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  /* `none`, not translateY(0): a reveal on an element that carries its own
     transform would otherwise have it cancelled here. */
  transform: none;
}

.js .reveal-photo img {
  transform: scale(1.04);
  transition: transform 1.1s var(--ease);
}

.js .reveal-photo.is-in img {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal],
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .reveal-photo img,
  .js .reveal-photo.is-in img {
    transform: none;
    transition: none;
  }

  .mobile-menu {
    transition: none;
  }
}

/* ------------------------------------------------------------ legal pages */
.legal {
  padding: var(--gap-section) 0;
}

.legal .prose h2 {
  font-size: 22px;
}

.legal-updated {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--gap-head);
}

/* --------------------------------------------------------- article layout */
.article {
  padding: var(--gap-section) 0;
}

.article .prose p:first-of-type {
  font-size: 18px;
  color: var(--ink);
}

.article-foot {
  margin-top: var(--gap-tight);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.article-foot .disclaimer {
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
  margin-bottom: 20px;
}

.related {
  margin-top: var(--gap-section);
  padding-top: var(--gap-tight);
  border-top: 1px solid var(--line);
}