/* Horizon Mortgage Group - site stylesheet
   Built from _src/house.css by _src/palette.py. Never edit assets/css/site.css by hand. */

:root {
/* == GENERATED PALETTE - DO NOT EDIT BY HAND == */
  /* seeds: teal ink #012C33 + brand cerulean #008DBA + call ink #012C33 */
  --ink: #012C33;
  --ink-2: #0F3942;
  --ink-3: #1D4652;
  --gold: #008DBA;
  --gold-ink: #63B9D5;
  --gold-light: #00779D;
  --accent: #00779D;
  --accent-dark: #006281;
  --accent-ink: #FFFFFF;
  --emerg: #012C33;
  --emerg-dark: #01242A;
  --emerg-ink: #7D9397;
  --brand-cyan: #008DBA;
  --brand-magenta: #012C33;
  --brand-green: #10E3A3;
  --brand-yellow: #FFE23D;
  --paper: #FFFFFF;
  --cream: #F1F9FB;
  --mist: #EDF5F7;
  --line: #DBE1E2;
  --line-ink: #014353;
  --text: #10393F;
  --muted: #637072;
  --muted-ink: #8DA0A3;
/* == END GENERATED PALETTE == */
  --r-card: 18px;
  --r-btn: 12px;
  --r-pill: 999px;
  --shadow: 0 20px 50px -24px rgba(14, 12, 10, .45);
  --shadow-sm: 0 10px 26px -18px rgba(14, 12, 10, .5);
  --container: 1180px;
  --gutter: 20px;
  --nav-h: 74px;
  --sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --head: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- fonts (self-hosted: a double-clicked file has no internet) ---------- */
@font-face { font-family: "Sora"; src: url("../fonts/Sora.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/PlusJakartaSans.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
svg:not([class]) { width: 1.12em; height: 1.12em; flex: none; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--head); font-weight: 700; line-height: 1.14;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 .5em;
  overflow-wrap: break-word; hyphens: manual;
}
h1 { font-size: clamp(34px, 5.4vw, 58px); font-weight: 800; }
h2 { font-size: clamp(27px, 3.4vw, 40px); }
h3 { font-size: clamp(20px, 2.1vw, 25px); }
h4 { font-size: 18px; }
p { margin: 0 0 1.1em; }
blockquote, figure { margin: 0 0 14px; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin: 0 0 .4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: clamp(52px, 7vw, 88px) 0; background-color: var(--paper); }
.section--mist { background-color: var(--mist); }
.section--cream { background-color: var(--cream); }
.section--ink { background-color: var(--ink); color: #fff; }
.section--tight { padding: clamp(34px, 4vw, 52px) 0; }
.lede { font-size: clamp(17px, 1.7vw, 20px); color: var(--muted); max-width: 68ch; }
.eyebrow {
  font-family: var(--head); font-size: 12.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light);
  margin: 0 0 12px; display: block;
}
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
.stack > * + * { margin-top: 14px; }
.max-70 { max-width: 70ch; }

/* Grids stretch every card to the tallest in the row: size to content instead. */
.grid { display: grid; gap: 22px; align-items: stretch; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* Quoted copy in QUANTITY goes in real CSS columns, which pack with no gap at all.
   A two-column GRID leaves the last row half empty whenever the count is odd, and an
   odd count in an even grid reads as broken. Columns have no rows to leave ragged. */
.cols { columns: 2; column-gap: 24px; }
.cols > * { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  display: inline-block; width: 100%; margin: 0 0 24px; }
@media (max-width: 900px) { .cols { columns: 1; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 24px; border-radius: var(--r-btn);
  font-family: var(--head); font-weight: 700; font-size: 16px; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.btn--primary { background-color: var(--accent); color: #fff; box-shadow: 0 14px 30px -16px var(--accent); }
.btn--primary:hover { background-color: var(--accent-dark); transform: translateY(-2px); }
.btn--ghost { background-color: transparent; color: var(--accent); border-color: var(--accent); }
.btn--ghost:hover { background-color: var(--accent); color: #fff; transform: translateY(-2px); }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.btn-row--center { justify-content: center; }
@media (max-width: 560px) { .btn-row { flex-direction: column; } .btn-row .btn { width: 100%; } }

/* ---------- topbar ---------- */
.topbar {
  background-color: var(--ink); color: #fff;
  font-size: 13.5px; padding: 0; border-bottom: 1px solid var(--line-ink);
}
.topbar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.topbar__list { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.topbar__list li { margin: 0; display: flex; align-items: center; gap: 7px; min-height: 44px; }
.topbar a { color: #fff; text-decoration: none; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.topbar__list li { min-height: 44px; }
.topbar a:hover { text-decoration: underline; }
@media (max-width: 820px) {
  .topbar__in { justify-content: center; text-align: center; }
  .topbar__list li.is-long { display: none; }
}

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background-color: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.hdr.is-stuck { box-shadow: 0 10px 30px -22px rgba(14, 12, 10, .55); }
.hdr__in { display: flex; align-items: center; gap: 18px; min-height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand img { width: 46px; height: 46px; display: block; background: none; }
.brand__name { display: block; line-height: 1.05; }
.brand__name b {
  display: block; font-family: var(--head); font-weight: 800;
  font-size: 21px; color: var(--ink); letter-spacing: 0;
}
.brand__name span {
  display: block; font-family: var(--head); font-size: 9.5px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--gold-light);
}
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  font-family: var(--head); font-size: 15px; font-weight: 600; color: var(--ink);
  text-decoration: none; padding: 12px 11px; border-radius: 9px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.nav a:hover { background-color: var(--mist); color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); }
.hdr__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.langlink {
  font-family: var(--head); font-size: 13px; font-weight: 700; letter-spacing: .08em;
  color: var(--ink); text-decoration: none; border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 10px 13px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.langlink:hover { border-color: var(--accent); color: var(--accent); }
.burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line);
  border-radius: 11px; background-color: var(--paper); cursor: pointer;
  align-items: center; justify-content: center; margin-left: auto;
}
.burger svg { width: 22px; height: 22px; }
@media (max-width: 1090px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: inline-flex; }
}

/* ---------- mobile panel (a SIBLING of header: a backdrop-filtered ancestor
   would become the containing block for position:fixed) ---------- */
.mpanel {
  position: fixed; inset: 0 0 auto 0; height: 100dvh; z-index: 90;
  background-color: var(--ink); color: #fff;
  padding: 18px var(--gutter) 30px; overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px); transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.mpanel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.mpanel__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.mpanel__close {
  width: 46px; height: 46px; min-width: 46px; border-radius: 11px; cursor: pointer;
  background-color: var(--ink-2); border: 1px solid var(--line-ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.mpanel__links { list-style: none; margin: 0 0 18px; padding: 0; }
.mpanel__links li { margin: 0; border-bottom: 1px solid var(--line-ink); }
.mpanel__links a {
  display: flex; align-items: center; min-height: 54px; padding: 12px 2px;
  font-family: var(--head); font-size: 18px; font-weight: 600;
  color: #fff; text-decoration: none;
}
.mpanel .btn-row { flex-direction: column; margin-top: 0; }
.mpanel .btn { width: 100%; }
.mpanel__meta { margin-top: 20px; font-size: 14.5px; color: var(--muted-ink); }
.mpanel__meta a { display: inline-flex; align-items: center; min-height: 44px; }
.mpanel .brand { min-height: 46px; }

/* ---------- hero ---------- */
.hero { position: relative; background-color: var(--ink); color: #fff; overflow: hidden; padding: 0; }
.hero__rings {
  position: absolute; right: -180px; top: 50%; transform: translateY(-50%);
  width: 760px; height: 760px; opacity: .5; pointer-events: none;
}
.hero__glow {
  position: absolute; left: -140px; top: -160px; width: 620px; height: 620px;
  background-color: transparent;
  background-image: radial-gradient(closest-side, rgba(207, 163, 82, .30), rgba(207, 163, 82, 0));
  pointer-events: none;
}
.hero__glow--b { left: auto; right: -120px; top: auto; bottom: -220px; width: 560px; height: 560px; opacity: .8; }
.hero__in {
  position: relative; z-index: 2; display: grid; gap: 40px;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center; padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(44px, 6vw, 76px);
}
.hero h1 { color: #fff; }
.hero h1 em { font-family: var(--head); font-style: normal; font-weight: 800; color: var(--gold-ink); }
.hero__sub { font-size: clamp(17px, 1.7vw, 19.5px); color: var(--muted-ink); max-width: 54ch; }
.hero__panel {
  position: relative; border: 1px solid var(--line-ink); border-radius: var(--r-card);
  overflow: hidden; background-color: var(--ink-2); box-shadow: var(--shadow);
}
.hero__panel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 88% center; aspect-ratio: 4 / 3.1; animation: kb 22s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero__chip {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  background-color: var(--ink-2); border: 1px solid var(--line-ink);
  border-radius: var(--r-pill); padding: 8px 15px;
  font-family: var(--head); font-size: 13px; font-weight: 600; color: #fff;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--gold); flex: none; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@media (max-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero__rings { display: none; }
  .hero__panel img { aspect-ratio: 16 / 11; }
}

/* ---------- the action band under the hero ---------- */
.actionband { background-color: var(--ink-2); border-top: 1px solid var(--line-ink); color: #fff; padding: 18px 0; }
.actionband__in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; justify-content: space-between; }
.actionband .btn-row { margin: 0; }
.rating { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.stars { color: var(--gold-light); letter-spacing: 2px; font-size: 16px; }
.rating b { font-family: var(--head); }

/* ---------- trust strip ---------- */
.trust { border-bottom: 1px solid var(--line); background-color: var(--paper); padding: 22px 0; }
.trust__list { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.trust__list li {
  margin: 0; display: flex; align-items: center; gap: 9px;
  font-family: var(--head); font-size: 14px; font-weight: 600; color: var(--ink);
}
.trust__list svg { color: var(--gold-light); }

/* ---------- cards ---------- */
.card {
  background-color: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 26px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: 10px; }
.card p:last-of-type { margin-bottom: 16px; }
.card__cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 10px 0; font-family: var(--head); font-weight: 700;
  font-size: 15px; color: var(--accent); text-decoration: none;
}
.card__cta:hover { text-decoration: underline; }
.card__media { border-radius: 13px; overflow: hidden; margin: -4px 0 18px; background-color: var(--mist); }
.card__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.card--flat { box-shadow: none; }
.icard { display: flex; gap: 15px; align-items: flex-start; }
.icard__ico {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  background-color: var(--mist); color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
}
.icard__ico svg { width: 22px; height: 22px; }

/* A component that draws its own frame, nested inside one that draws a frame,
   is stripped to nothing. The OUTER container owns the frame. */
.panel {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background-color: var(--paper); overflow: hidden; box-shadow: var(--shadow-sm);
}
.panel__head {
  background-color: var(--mist); border-bottom: 1px solid var(--line);
  padding: 16px 22px; font-family: var(--head); font-weight: 700; font-size: 18px; color: var(--ink);
}
.panel__body { padding: 4px 22px 10px; }
.panel .card, .panel .pricewrap, .panel .panel {
  border: 0; border-radius: 0; background-color: transparent;
  box-shadow: none; margin: 0; padding-left: 0; padding-right: 0;
}

/* ---------- tables / prices ---------- */
.pricewrap {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background-color: var(--paper); overflow: hidden;
}
table { width: 100%; border-collapse: collapse; font-size: 16px; }
thead th {
  text-align: left; font-family: var(--head); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  background-color: var(--mist); padding: 12px 16px; border-bottom: 1px solid var(--line);
}
tbody td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
tbody tr:last-child td { border-bottom: 0; }
.td-price {
  text-align: right; font-family: var(--head); font-weight: 700; color: var(--ink);
  white-space: normal; overflow-wrap: anywhere; min-width: 108px;
}
thead th.td-price { text-align: right; }
.td-note { color: var(--muted); font-size: 14.5px; }
@media (max-width: 700px) {
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  tbody tr:last-child { border-bottom: 0; }
  tbody td { border-bottom: 0; padding: 6px 16px; }
  tbody td::before {
    content: attr(data-label); display: block;
    font-family: var(--head); font-size: 11.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
  }
  .td-price { text-align: left; }
}

/* ---------- jump chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 26px; padding: 0; }
.chips li { margin: 0; }
.chips a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background-color: var(--paper);
  font-family: var(--head); font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.chips a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- steps ---------- */
.steps { counter-reset: s; }
.step__n {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background-color: var(--ink); color: var(--gold-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 800; font-size: 17px; margin-bottom: 14px;
}
.stepcard { text-align: center; }
.stepcard__num {
  display: inline-flex; width: 42px; height: 42px; border-radius: 50%;
  background-color: var(--ink); color: var(--gold-ink);
  align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 800; font-size: 17px; margin-bottom: 14px;
}

/* ---------- quotes / reviews ---------- */
.quote {
  background-color: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 28px 30px; box-shadow: var(--shadow-sm);
}
.quote p { font-size: 16.5px; max-width: 62ch; }
.quote blockquote { margin: 0 0 16px; }
.quote__stars { color: var(--gold-light); letter-spacing: 2px; font-size: 16px; margin-bottom: 10px; }
.quote__by { font-family: var(--head); font-weight: 700; font-size: 15px; color: var(--ink); margin: 0; }
.quote__src { font-size: 13.5px; color: var(--muted); margin: 2px 0 0; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 17px 40px 17px 0; position: relative;
  min-height: 44px; display: flex; align-items: center;
  font-family: var(--head); font-weight: 600; font-size: 17.5px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 24px; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq__a { padding: 0 0 18px; color: var(--muted); }
.faq__a p:last-child { margin-bottom: 0; }

/* ---------- forms ---------- */
.formcard {
  background-color: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 26px; box-shadow: var(--shadow);
}
.field { margin-bottom: 15px; }
.field label { display: block; font-family: var(--head); font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--text);
  background-color: var(--paper); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 14px; min-height: 50px;
}
.field textarea { min-height: 120px; resize: vertical; }
.formnote { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; }
.formmsg { margin: 14px 0 0; padding: 13px 15px; border-radius: 11px; font-size: 15px; display: none; }
.formmsg.is-ok { display: block; background-color: var(--mist); border: 1px solid var(--line); color: var(--ink); }
.formmsg.is-err { display: block; background-color: #FDECEC; border: 1px solid #F3C4C4; color: #7A1F1F; }
.hp { position: absolute; left: -9999px; }

/* ---------- CTA band ---------- */
.ctaband { background-color: var(--ink); color: #fff; }
.ctaband h2 { color: #fff; }
.ctaband .lede { color: var(--muted-ink); }

/* ---------- pagehead ---------- */
.pagehead { background-color: var(--ink); color: #fff; padding: clamp(38px, 5vw, 62px) 0 clamp(30px, 4vw, 48px); }
.pagehead h1 { color: #fff; margin-bottom: 12px; }
.pagehead .lede { color: var(--muted-ink); }
.crumbs { font-size: 13.5px; margin: 0 0 16px; color: var(--muted-ink); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }

.crumbs a { color: var(--gold-ink); text-decoration: none; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- footer ---------- */
.ftr { background-color: var(--ink); color: #fff; padding: 54px 0 24px; }
.ftr__grid { display: grid; gap: 34px; grid-template-columns: 1.35fr 1fr 1fr 1.2fr; align-items: start; }
@media (max-width: 900px) { .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ftr__grid { grid-template-columns: minmax(0, 1fr); } }
.ftr h4 {
  color: #fff; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 14px; font-weight: 700;
}
.ftr ul { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.ftr li { margin: 0 0 7px; }
.ftr a { color: #fff; text-decoration: none; }
.ftr a:hover { text-decoration: underline; color: var(--gold-ink); }
.ftr__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.ftr__brand img { width: 52px; height: 52px; background: none; }
.ftr__brand b { font-family: var(--head); font-size: 20px; letter-spacing:-0.01em; display: block; line-height: 1.1; }
.ftr__brand span { font-family: var(--head); font-size: 9.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--gold-ink); display: block; }
.ftr__hours { font-size: 15px; }
.ftr__hours div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line-ink); padding: 6px 0; }
.ftr__hours span:first-child { color: var(--muted-ink); }
.ftr__legal {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-ink);
  font-size: 13px; color: var(--muted-ink);
}
.ftr__legal p { margin: 0 0 8px; }
.ftr__legal a { color: var(--gold-ink); }
.ftr__credit { margin-top: 4px; }
.ftr__credit a { text-decoration: underline; }

/* ---------- sticky mobile bar ---------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background-color: var(--ink); border-top: 1px solid var(--line-ink);
  display: none; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
}
.stickybar .btn { flex: 1; min-height: 50px; }
@media (max-width: 820px) { .stickybar { display: flex; } }

/* ---------- LIGHT-ON-DARK: every dark surface, written as one group ---------- */
.section--ink, .hero, .pagehead, .mpanel, .ctaband, .stickybar, .ftr, .topbar, .actionband { color: #fff; }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4,
.hero h1, .hero h2, .hero h3, .hero h4,
.pagehead h1, .pagehead h2, .pagehead h3,
.mpanel h1, .mpanel h2, .mpanel h3, .mpanel h4,
.ctaband h2, .ctaband h3, .ftr h2, .ftr h3, .ftr h4, .actionband h2, .actionband h3 { color: #fff; }
.section--ink p, .hero p, .pagehead p, .mpanel p, .ctaband p, .ftr p, .actionband p { color: var(--muted-ink); }

/* ---- v5.9: A PHOTOGRAPH IS NOT A FLAT INK PANEL -------------------------------
   `.hero p` is (0,1,1) and `.fhero__sub` is (0,1,0), so every photo-hero subhead was
   losing its own #EAF1F6 to --muted-ink - a value computed to clear 4.6:1 against the
   FLAT ink color, which a photo hero never sits on. Over a lit frame it read as gray
   on gray: the headline carried and the sentence under it did not.
   Photo-hero copy is near-white, and carries its own shadow so it holds over the bright
   patches of the frame no scrim can flatten without killing the picture. */
.fhero .fhero__sub,
.fhero .fhero__copy p,
.hero p.fhero__sub,
.fhero__copy .lede { color: #EDF3F8; }
.fhero__copy p, .fhero__copy h1 {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .9),
    0 2px 8px rgba(0, 0, 0, .8),
    0 4px 20px rgba(0, 0, 0, .7),
    0 0 40px rgba(1, 44, 51, .8),
    0 0 80px rgba(1, 44, 51, .5);
}
.fhero__cred, .fhero__now, .fhero .pills a { text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 2px 10px rgba(0, 0, 0, .6); }
.fhero .pills a { background-color: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .42); }
/* ------------------------------------------------------------------------------ */

.section--ink .lede, .hero .lede, .pagehead .lede, .ctaband .lede, .mpanel .lede { color: var(--muted-ink); }
.section--ink .eyebrow, .hero .eyebrow, .pagehead .eyebrow, .mpanel .eyebrow,
.ctaband .eyebrow, .ftr .eyebrow, .actionband .eyebrow { color: var(--gold-ink); }
.section--ink .btn--ghost, .hero .btn--ghost, .pagehead .btn--ghost, .mpanel .btn--ghost,
.ctaband .btn--ghost, .stickybar .btn--ghost, .ftr .btn--ghost, .actionband .btn--ghost {
  color: var(--gold-ink); border-color: var(--gold-ink); background-color: transparent;
}
.section--ink .btn--ghost:hover, .hero .btn--ghost:hover, .pagehead .btn--ghost:hover,
.mpanel .btn--ghost:hover, .ctaband .btn--ghost:hover, .stickybar .btn--ghost:hover,
.ftr .btn--ghost:hover, .actionband .btn--ghost:hover { background-color: var(--gold-ink); color: var(--ink); }
.section--ink a:not(.btn):not(.card__cta), .hero a:not(.btn), .pagehead a:not(.btn),
.mpanel a:not(.btn), .ctaband a:not(.btn), .ftr a:not(.btn), .actionband a:not(.btn) { color: var(--gold-ink); }
.section--ink .stars, .hero .stars, .ctaband .stars, .actionband .stars, .ftr .stars { color: var(--gold-ink); }
.section--ink table th, .section--ink thead th { background-color: var(--ink-3); color: #fff; border-bottom-color: var(--line-ink); }
.section--ink tbody td { border-bottom-color: var(--line-ink); color: #fff; }
.section--ink tbody td::before, .section--ink .td-note { color: var(--muted-ink); }

.mpanel .brand__name b, .section--ink .brand__name b, .hero .brand__name b { color: #fff; }
.mpanel .brand__name span, .section--ink .brand__name span { color: var(--gold-ink); }

/* A card whose background is decided in its own base rule must have that decision
   re-made for every surface it can land on: on ink it becomes a LIFTED DARK surface. */
.section--ink .card:not(.is-light), .section--ink .quote:not(.is-light),
.section--ink .panel:not(.is-light), .section--ink .pricewrap:not(.is-light),
.hero .card:not(.is-light), .ctaband .card:not(.is-light),
.section--ink .icard__ico, .ctaband .icard__ico {
  background-color: var(--ink-2); border-color: var(--line-ink); box-shadow: none; color: #fff;
}
.section--ink .card:not(.is-light) h3, .section--ink .quote:not(.is-light) .quote__by,
.section--ink .panel:not(.is-light) .panel__head, .ctaband .card:not(.is-light) h3 { color: #fff; }
.section--ink .card:not(.is-light) p, .section--ink .quote:not(.is-light) p,
.section--ink .quote:not(.is-light) .quote__src, .ctaband .card:not(.is-light) p { color: var(--muted-ink); }
.section--ink .card:not(.is-light) .card__cta, .section--ink .card:not(.is-light) .card__media,
.ctaband .card:not(.is-light) .card__cta { color: var(--gold-ink); }
.section--ink .panel:not(.is-light) .panel__head { background-color: var(--ink-3); border-bottom-color: var(--line-ink); }
.section--ink .card:not(.is-light) .card__media, .section--ink .icard__ico { background-color: var(--ink-3); color: var(--gold-ink); }
.section--ink .quote:not(.is-light) .quote__stars { color: var(--gold-ink); }

/* ...and the inverse, which is just as invisible: a deliberately LIGHT component
   dropped inside a dark section keeps every one of its light-surface colors. */
.section--ink .is-light, .hero .is-light, .ctaband .is-light, .pagehead .is-light {
  background-color: var(--paper); color: var(--text); border-color: var(--line);
}
.section--ink .is-light h1, .section--ink .is-light h2, .section--ink .is-light h3,
.section--ink .is-light h4, .hero .is-light h3, .hero .is-light h4,
.ctaband .is-light h3, .ctaband .is-light h4 { color: var(--ink); }
.section--ink .is-light p, .hero .is-light p, .ctaband .is-light p { color: var(--muted); }
.section--ink .is-light .eyebrow, .hero .is-light .eyebrow, .ctaband .is-light .eyebrow { color: var(--gold-light); }
.section--ink .is-light .quote__stars, .hero .is-light .quote__stars,
.section--ink .is-light .stars, .hero .is-light .stars { color: var(--gold-light); }
.section--ink .is-light a:not(.btn), .hero .is-light a:not(.btn), .ctaband .is-light a:not(.btn) { color: var(--accent); }
.section--ink .is-light label, .hero .is-light label, .ctaband .is-light label { color: var(--ink); }
.section--ink .is-light .btn--ghost, .hero .is-light .btn--ghost, .ctaband .is-light .btn--ghost {
  color: var(--accent); border-color: var(--accent);
}
.section--ink .is-light .td-note, .hero .is-light .td-note { color: var(--muted); }

/* ---------- media fallback keyed to the surface it lands on ---------- */
.card__media, .hero__panel, .figure { background-color: var(--mist); }
.section--ink .card__media, .section--ink .figure, .hero .hero__panel, .ctaband .figure { background-color: var(--ink-3); }

/* ---------- figures ---------- */
.figure { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); }
.section--ink .figure, .hero .figure { border-color: var(--line-ink); }
.figure img { display: block; width: 100%; height: auto; }
.split { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
@media (max-width: 860px) {
  .split, .split--wide-left { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* A portrait next to four lines of copy leaves a column of empty space beside it.
   Crop the figure to a fixed ratio so the two halves carry the same weight. */
.split .figure img { aspect-ratio: 5 / 4.6; object-fit: cover; object-position: 50% 22%; }
.split .figure--tall img { aspect-ratio: 5 / 5.4; object-position: 50% 14%; }
.split .figure--square img { aspect-ratio: 1 / 1; object-position: 50% 50%; }
.split .figure--band img { aspect-ratio: 5 / 4.6; object-position: 44% 26%; }
@media (max-width: 860px) {
  .split .figure img, .split .figure--tall img { aspect-ratio: 16 / 11; object-position: 50% 18%; }
  .split .figure--square img { aspect-ratio: 1 / 1; }
}

/* the small run of facts that gives a short copy column some mass */
.factrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 26px; margin: 22px 0 0; padding: 0; list-style: none; }
.factrow li { margin: 0; display: flex; gap: 9px; align-items: flex-start; font-size: 15px; line-height: 1.5; padding: 7px 0; }
.factrow svg { flex: none; margin-top: 3px; color: var(--gold-light); }
.section--ink .factrow svg, .hero .factrow svg, .ctaband .factrow svg { color: var(--gold-ink); }
@media (max-width: 520px) { .factrow { grid-template-columns: minmax(0, 1fr); } }

/* a compact contact block, so the column beside a tall form is not mostly air */
.deflist { margin: 20px 0 0; padding: 0; }
.deflist div { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.deflist div:last-child { border-bottom: 0; }
.deflist dt { font-family: var(--head); font-weight: 700; color: var(--ink); margin: 0; }
.deflist dd { margin: 0; color: var(--muted); text-align: right; }
.section--ink .deflist div, .ctaband .deflist div { border-bottom-color: var(--line-ink); }
.section--ink .deflist dt, .ctaband .deflist dt { color: #fff; }
.section--ink .deflist dd, .ctaband .deflist dd { color: var(--muted-ink); }

/* ---------- reveal (never gate content on JS) ---------- */
html.js .reveal { opacity: 0; transform: translateY(14px); }
html.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Travel additions - full-bleed photographic hero, destination tiles
   ========================================================================== */

/* The header is the brand ground on every page: solid navy under the topbar,
   so white nav text is measurable rather than dependent on the photo behind it. */
.hdr {
  background-color: var(--ink); border-bottom-color: var(--line-ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hdr .brand__name b { color: #fff; }
.hdr .brand__name span { color: var(--gold-ink); }
.hdr .nav a { color: #fff; }
.hdr .nav a:hover { background-color: rgba(255, 255, 255, .13); color: #fff; }
.hdr .nav a[aria-current="page"] { color: var(--gold-ink); }
.hdr .burger { background-color: rgba(255, 255, 255, .11); border-color: var(--line-ink); color: #fff; }
.topbar { border-bottom-color: rgba(255, 255, 255, .12); }

/* an hours table on a LIGHT panel is not the footer's hours table */
.hourlist { display: grid; gap: 2px 18px; font-size: 15px; }
.hourlist div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hourlist div:last-child { border-bottom: 0; }
.hourlist span:first-child { color: var(--ink); font-weight: 600; }
.hourlist span:last-child { color: var(--muted); }

.fhero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--ink); color: #fff;
  min-height: min(84vh, 740px); display: flex; align-items: stretch;
  padding: 0;
}
.fhero__frames { position: absolute; inset: 0; z-index: 0; }
.fhero__frame {
  position: absolute; inset: 0; opacity: 0;
  animation: fheroFade 28s linear infinite both;
}
.fhero__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 34% 58%; display: block;
  animation: fheroPan 16s ease-in-out infinite alternate;
}
.fhero__frame:nth-child(1) { animation-delay: -1s; }
.fhero__frame:nth-child(2) { animation-delay: 6s; }
.fhero__frame:nth-child(3) { animation-delay: 13s; }
.fhero__frame:nth-child(4) { animation-delay: 20s; }
.fhero__frame:nth-child(4) img { animation-delay: -12s; }
.fhero__frame:nth-child(2) img { animation-delay: -5s; }
.fhero__frame:nth-child(3) img { animation-delay: -10s; }
@keyframes fheroFade {
  0%    { opacity: 0; }
  2.6%  { opacity: 1; }
  25%   { opacity: 1; }
  27.6% { opacity: 0; }
  100%  { opacity: 0; }
}
@keyframes fheroPan {
  from { transform: scale(1.015) translate3d(-1.2%, 0.6%, 0); }
  to   { transform: scale(1.13) translate3d(1.4%, -1.1%, 0); }
}

.fhero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(180deg,
      rgba(1, 44, 51, .38) 0%,
      rgba(0, 0, 0, .22) 35%,
      rgba(0, 0, 0, .50) 72%,
      rgba(0, 0, 0, .78) 100%),
    linear-gradient(90deg,
      rgba(1, 44, 51, .82) 0%,
      rgba(1, 44, 51, .58) 30%,
      transparent 60%);
}
.fhero__glow {
  position: absolute; z-index: 1; pointer-events: none;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 141, 186, .10), transparent);
  top: 18%; left: -8%;
}

/* frosted glass card: readability comes from the card, not the scrim */
.fhero__glass {
  background: rgba(1, 44, 51, .68);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  padding: clamp(28px, 4vw, 48px);
  max-width: 620px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
}
.fhero__glass .fhero__cred { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.fhero__glass .pills a { background-color: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .22); }

/* Glass Explorer variant (Concept B) */
.fhero--glass .fhero__scrim {
  background-image:
    linear-gradient(180deg, rgba(1, 44, 51, .12) 0%, rgba(0, 0, 0, .04) 40%,
                    rgba(0, 0, 0, .18) 72%, rgba(0, 0, 0, .50) 100%);
}
.fhero__in.fhero__in--glass { grid-template-rows: 1fr auto; justify-items: center; text-align: center; }
.fhero__glasscard {
  background: rgba(1, 44, 51, .52); backdrop-filter: blur(36px); -webkit-backdrop-filter: blur(36px);
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 28px;
  padding: clamp(28px, 4vw, 42px); width: 100%; max-width: 820px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55);
}
.fhero__glasscard .fhero__cred { margin-bottom: 14px; }
.fhero__gl-proglist {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 20px 0 0; padding: 0; list-style: none;
}
.fhero__gl-proglist li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--head); font-size: 13.5px; font-weight: 600; color: #fff;
}
.fhero__gl-proglist li svg { width: 16px; height: 16px; color: var(--gold-ink); flex: none; }
.fhero__gl-foot {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .10);
  display: flex; justify-content: center; flex-wrap: wrap; gap: 18px;
}
.fhero__gl-badge {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--head); font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .50);
}
.fhero__gl-badge svg { width: 15px; height: 15px; color: var(--gold-ink); flex: none; }

/* Info card variant (Concept C) */
.fhero__infocard {
  background: rgba(1, 44, 51, .55);
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 24px; padding: 34px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6);
}
.fhero__ic-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center;
  margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.fhero__ic-stat .num {
  display: block; font-family: var(--head); font-size: 28px; font-weight: 800; color: #fff;
  line-height: 1.15;
}
.fhero__ic-stat .lbl {
  display: block; font-family: var(--head); font-size: 11.5px; font-weight: 600;
  color: rgba(255, 255, 255, .50); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px;
}
.fhero__ic-programs { display: none; }
.fhero__ic-programs h4 {
  font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .55);
  text-transform: uppercase; letter-spacing: .1em; margin: 0 0 14px;
}
.fhero__ic-proglist {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px;
  margin: 0; padding: 0; list-style: none;
}
.fhero__ic-proglist li {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--head); font-size: 12.5px; font-weight: 600; color: #fff;
}
.fhero__ic-proglist li svg { width: 16px; height: 16px; color: var(--gold-ink); flex: none; }

/* live rates inside the infocard */
.fhero__ic-rates {
  display: flex; gap: 12px; margin-top: 6px;
}
.fhero__ic-rate {
  flex: 1; text-align: center; padding: 14px 10px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
}
.fhero__ic-rate-label {
  display: block; font-family: var(--head); font-size: 11.5px; font-weight: 700;
  color: rgba(255, 255, 255, .55); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 4px;
}
.fhero__ic-rate-val {
  font-family: var(--head); font-size: clamp(24px, 2.5vw, 32px); font-weight: 800;
  color: #fff; letter-spacing: -.02em;
}
.fhero__ic-rate-src {
  text-align: center; margin: 10px 0 0; font-size: 11px;
  color: rgba(255, 255, 255, .40);
}
.fhero__ic-rate-src a { color: rgba(255, 255, 255, .50); text-decoration: underline; }
.fhero__ic-rate-src a:hover { color: #fff; }

.fhero__ic-cta,
.hero a.fhero__ic-cta {
  display: block; margin-top: 20px; padding: 16px 24px;
  background: var(--gold); color: #fff; text-align: center;
  border-radius: 14px; font-family: var(--head); font-size: 16px; font-weight: 800;
  text-decoration: none; transition: background .2s;
  box-shadow: 0 4px 20px rgba(0, 141, 186, .35);
  letter-spacing: .02em;
}
.fhero__ic-cta:hover,
.hero a.fhero__ic-cta:hover { background: #007aaa; color: #fff; }
.fhero__ic-badges {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.fhero__ic-badge {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--head); font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .45);
}
.fhero__ic-badge svg { width: 14px; height: 14px; color: var(--gold-ink); flex: none; }

/* badge row inside the glass card */
.fhero__badges {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; gap: 20px; flex-wrap: wrap;
}
.fhero__badge {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--head); font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .55);
}
.fhero__badge svg { width: 17px; height: 17px; color: var(--gold-ink); flex: none; }

/* motion: the slow push on the photograph itself, and nothing else.
   No rain layer: the hero photograph is a clear blue-sky day, and streaks over it read as
   a scratched lens rather than as weather. */
.fhero__in {
  position: relative; z-index: 3; width: 100%;
  display: grid; grid-template-rows: 1fr auto; gap: 26px;
  padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(26px, 4vw, 40px);
}
.fhero__copy { max-width: 660px; align-self: center; }
.fhero h1 { font-size: clamp(36px, 5.8vw, 62px); margin-bottom: .38em; text-wrap: balance; }
.fhero h1 em { font-family: var(--head); font-style: normal; font-weight: 800; color: var(--gold-ink); }
.fhero__sub { font-size: clamp(16.5px, 1.75vw, 20px); color: #F4F8FB; max-width: 52ch; margin-bottom: 4px; }
.fhero .btn-row { margin-top: 26px; }

/* the destination name, changing with the frame it belongs to */
.fhero__cred {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px;
  margin-bottom: 20px; padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r-pill);
  background-color: rgba(1, 26, 31, .5);
  font-family: var(--head); font-size: 13.5px; font-weight: 600; color: #fff;
}
.fhero__cred .stars { color: var(--gold-ink); letter-spacing: 1.5px; font-size: 14px; line-height: 1; }
.fhero__cred b { font-weight: 800; }

/* the dispatch readout: three bars that fill like a crew being sent */
.fhero__now {
  align-self: end; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .28); background-color: rgba(1, 26, 31, .55);
  font-family: var(--head); color: #fff;
}
.dispatch { display: flex; gap: 6px; }
.dispatch i {
  display: block; width: 26px; height: 4px; border-radius: 3px;
  background-color: rgba(255, 255, 255, .28); position: relative; overflow: hidden;
}
.dispatch i::after {
  content: ""; position: absolute; inset: 0; background-color: var(--gold-ink);
  transform: scaleX(0); transform-origin: left center;
  animation: dispatchFill 2.4s ease-in-out infinite both;
}
.dispatch i:nth-child(2)::after { animation-delay: .3s; }
.dispatch i:nth-child(3)::after { animation-delay: .6s; }
@keyframes dispatchFill {
  0%   { transform: scaleX(0); }
  38%  { transform: scaleX(1); }
  78%  { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
.fhero__dispatch { display: flex; align-items: baseline; gap: 9px; }
.fhero__dispatch b { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.fhero__dispatch span {
  font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: #DDEAF2;
}

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.pills li { margin: 0; }
.fhero .pills a, .pills a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px;
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .3);
  background-color: rgba(255, 255, 255, .09); color: #fff; text-decoration: none;
  font-family: var(--head); font-size: 14px; font-weight: 600;
}
.pills a:hover { background-color: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); }

@media (max-width: 900px) {
  .fhero { min-height: min(88vh, 660px); }
  .fhero__in { padding-bottom: 88px; padding-top: 56px; gap: 18px; }
  .fhero__now { font-size: 11.5px; gap: 12px; }
  .tick { width: 28px; }
  .fhero h1 { font-size: clamp(31px, 8.4vw, 44px); }
  .fhero__sub { font-size: 16px; }
  .pills { gap: 7px; margin-top: 20px; }
  .pills a { font-size: 13px; padding: 7px 12px; min-height: 36px; }
  .fhero__scrim {
    background-image:
      linear-gradient(180deg, rgba(1, 44, 51, .78) 0%, rgba(0, 0, 0, .62) 34%,
                      rgba(0, 0, 0, .76) 72%, rgba(0, 0, 0, .92) 100%);
  }
  .fhero__copy p, .fhero__copy h1 {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 1),
      0 2px 4px rgba(0, 0, 0, 1),
      0 4px 12px rgba(0, 0, 0, .95),
      0 0 24px rgba(0, 0, 0, .9),
      0 0 50px rgba(1, 44, 51, .7);
  }
  .fhero__cred, .fhero__now, .fhero .pills a {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 2px 6px rgba(0, 0, 0, .9);
  }
  .fhero__sub { color: rgba(255, 255, 255, .95); }
  .fhero__glow { display: none; }
  .fhero__glass { padding: clamp(22px, 5vw, 36px); max-width: 100%; border-radius: 18px; }
  .fhero__infocard { border-radius: 18px; padding: clamp(24px, 5vw, 34px); }
  .fhero__glasscard { border-radius: 20px; }
  .fhero__gl-proglist { gap: 6px; }
  .fhero__gl-proglist li { font-size: 12px; padding: 7px 11px; }
  .fhero--glass .fhero__scrim {
    background-image:
      linear-gradient(180deg, rgba(1, 44, 51, .18) 0%, rgba(0, 0, 0, .08) 34%,
                      rgba(0, 0, 0, .28) 72%, rgba(0, 0, 0, .58) 100%);
  }
  .fhero__now { gap: 10px; padding: 8px 13px; }
  .dispatch i { width: 18px; }
  .fhero__dispatch b { font-size: 17px; }
  .fhero__dispatch span { font-size: 10.5px; letter-spacing: .1em; }
  @keyframes fheroPan {
    from { transform: scale(1.02) translate3d(-2%, 1%, 0); }
    to   { transform: scale(1.18) translate3d(2.4%, -1.8%, 0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .fhero__frame, .fhero__frame img,
  .dispatch i::after, .dot { animation: none !important; }
  .fhero__frame:nth-child(1) { opacity: 1; }
  .dispatch i::after { transform: scaleX(1); }
}

/* ---------- destination tiles ---------- */
.dgrid {
  display: grid; gap: 16px; margin-top: 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dcard {
  position: relative; display: block; min-width: 0; overflow: hidden;
  border-radius: var(--r-card); background-color: var(--ink);
  text-decoration: none; color: #fff; box-shadow: var(--shadow-sm);
}
.dcard img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 4 / 5; transition: transform .5s ease;
}
@media (min-width: 720px) { .dcard img { aspect-ratio: 4 / 4.4; } }
.dcard:hover img { transform: scale(1.06); }
.dcard__cap {
  position: absolute; inset: auto 0 0 0; padding: 46px 16px 15px;
  background-image: linear-gradient(180deg, rgba(1, 26, 31, 0) 0%, rgba(1, 26, 31, .82) 62%, rgba(1, 26, 31, .95) 100%);
}
.dcard__cap b {
  display: block; font-family: var(--head); font-size: 17px; font-weight: 700; color: #fff;
}
.dcard__cap span { display: block; font-size: 13.5px; color: #DCE6EE; margin-top: 3px; }

/* ---------- the pledge list ---------- */
.pledge { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
@media (min-width: 760px) { .pledge { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pledge .card { display: flex; flex-direction: column; min-width: 0; }
.pledge blockquote {
  margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--gold-light);
  font-family: var(--head); font-size: 17px; font-weight: 700; color: var(--ink);
}
.pledge p:last-child { margin-bottom: 0; }

/* ---------- media card (image over authored copy) ---------- */
.mcard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.mcard .card__media { margin: -4px 0 18px; }
.mcard .card__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mcard .card__cta { margin-top: auto; }

.deflist span, .deflist a, .ftr li, .panel__body a { overflow-wrap: anywhere; }

/* seven cards in three columns: the FIRST one spans the row as a deliberate lead card,
   with two even rows of three behind it. Matches only at 7, 10, 13 items. */
@media (min-width: 900px) {
  .grid-3 > .mcard:first-child:nth-last-child(3n + 1) {
    grid-column: 1 / -1;
    display: grid; align-content: center;
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 30px;
  }
  .grid-3 > .mcard:first-child:nth-last-child(3n + 1) .card__media {
    grid-column: 1; grid-row: 1 / -1; margin: 0; align-self: stretch;
  }
  .grid-3 > .mcard:first-child:nth-last-child(3n + 1) .card__media img {
    height: auto; aspect-ratio: 4 / 3; min-height: 0;
  }
  .grid-3 > .mcard:first-child:nth-last-child(3n + 1) > h3 { grid-column: 2; grid-row: 1; align-self: end; }
  .grid-3 > .mcard:first-child:nth-last-child(3n + 1) > p { grid-column: 2; grid-row: 2; max-width: 62ch; }
  .grid-3 > .mcard:first-child:nth-last-child(3n + 1) > .card__cta { grid-column: 2; grid-row: 3; align-self: start; margin-top: 0; }
}


/* ================= house components carried from the previous build ================= */

/* the emergency button: their own magenta, used only where urgency is real */
.btn--emerg { background-color: var(--emerg); color: #fff; box-shadow: 0 14px 30px -16px var(--emerg); }
.btn--emerg:hover { background-color: var(--emerg-dark); color: #fff; transform: translateY(-2px); }
.section--ink .btn--emerg, .fhero .btn--emerg, .ctaband .btn--emerg { color: #fff; }

/* their icon language: a heavy ring, a solid brand fill, a white glyph */
.svcico {
  display: inline-flex; width: 54px; height: 54px; margin: 0 0 16px; flex: none;
  border-radius: 50%; border: 3px solid var(--ink); align-items: center; justify-content: center;
}
.svcico__svg { width: 100%; height: 100%; display: block; }
.svcico--cyan    { background-color: #22C3EE; }
.svcico--magenta { background-color: #ED2AA6; }
.svcico--green   { background-color: #12CE96; }
.svcico--yellow  { background-color: #F2B705; }
.section--ink .svcico { border-color: rgba(255, 255, 255, .85); }
.pagehead--svc .svcico { width: 64px; height: 64px; margin-bottom: 18px; }

/* Cards written to one shape ARE stretched to the row, because they were authored to
   the same length on purpose and margin-top:auto pins the CTA to the bottom. Quoted
   copy of uneven length still goes in .cols, never here. */
.grid-2, .grid-3, .grid-4 { align-items: stretch; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.grid .card, .grid .mcard { height: 100%; }
.grid .mcard .card__cta, .grid .mcard .card__soon { margin-top: auto; }
/* eight service tiles: one up on a phone, two on a tablet, four on a desk - every row full */
@media (min-width: 620px)  { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* a plain chip list: facts, not links */
.chips--plain { list-style: none; }
.chips--plain li {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background-color: var(--paper); color: var(--text);
  font-family: var(--head); font-size: 14px; font-weight: 600;
}
.chips--plain a {
  border: none; border-radius: 0; background: none; padding: 0; min-height: 0;
  color: inherit; font: inherit; font-size: inherit; font-weight: inherit;
}
.section--ink .chips--plain li,
.section--ink .chips--plain li a { border-color: var(--line-ink); background-color: var(--ink-2); color: #fff; }

/* the safety notice on the checklist page */
.alertband {
  border-radius: var(--r-card); border: 1px solid var(--emerg);
  border-left-width: 6px; background-color: var(--paper);
  padding: 18px 22px; box-shadow: var(--shadow-sm);
}
.alertband p { margin: 0; }
.alertband b { color: var(--emerg); }

/* the rating row on the reviews page */
.ratingrow {
  display: grid; gap: 14px; grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) { .ratingrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ratingrow__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background-color: var(--paper); padding: 18px 20px;
}
.ratingrow__item b { font-family: var(--head); font-size: 34px; font-weight: 800; line-height: 1; color: var(--ink); }
.ratingrow__item .stars { color: var(--gold-light); letter-spacing: 2px; font-size: 15px; line-height: 1; }
.ratingrow__item span:last-child { color: var(--muted); font-size: 14.5px; }

/* the team */
.people {
  display: grid; gap: 18px; margin-top: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .people { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.person { margin: 0; min-width: 0; text-align: center; }
.person img {
  display: block; width: 100%; max-width: 210px; height: auto; margin: 0 auto 12px;
  border-radius: 50%; background-color: var(--paper);
}
.person figcaption b { display: block; font-family: var(--head); font-weight: 700; color: var(--ink); }
.person figcaption span { display: block; color: var(--muted); font-size: 14.5px; }

/* a check mark that sits above a card heading */
.tickico {
  display: inline-flex; width: 34px; height: 34px; margin-bottom: 12px; flex: none;
  align-items: center; justify-content: center; border-radius: 50%;
  background-color: var(--mist); color: var(--accent);
}
.section--ink .tickico { background-color: var(--ink-2); color: var(--gold-ink); }

/* the phone number block on contact */
.callout {
  border-radius: var(--r-card); border: 1px solid var(--line);
  background-color: var(--mist); padding: 24px; margin-bottom: 26px;
}
.callout h2 { font-size: clamp(28px, 4.6vw, 40px); margin: 6px 0 8px; }
.callout h2 a { text-decoration: none; }
.callout p { margin: 0; color: var(--muted); }

/* long-form legal copy */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(21px, 2.4vw, 26px); margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }

/* plain link lists */
.linklist { list-style: none; padding: 0; margin: 12px 0 0; }
.linklist li { margin: 0 0 8px; }
.linklist a { font-family: var(--head); font-weight: 600; }
.linklist--two { columns: 2; column-gap: 28px; }
@media (max-width: 560px) { .linklist--two { columns: 1; } }

.excerptnote { margin-top: 22px; color: var(--muted); font-size: 14.5px; }
.ftr__note { font-size: 13.5px; opacity: .8; }

.card__soon {
  display: inline-flex; align-items: center; margin-top: auto; padding-top: 12px;
  font-family: var(--head); font-size: 14px; font-weight: 600; color: var(--muted);
}
.pull {
  font-family: var(--head); font-size: clamp(18px, 2.2vw, 21px); font-weight: 700;
  color: var(--ink); border-left: 4px solid var(--accent); padding-left: 16px; margin-top: 26px;
}
.quote--feature { margin: 0; }
.quote--feature blockquote p { font-size: clamp(17px, 2vw, 19px); }

/* A caption inside a bordered figure sits on the figure, not on the section, so it
   gets its own surface and a color cleared against THAT rather than against the band. */
.figure figcaption {
  margin: 0; padding: 11px 16px; font-size: 14.5px;
  background-color: var(--mist); color: var(--text); border-top: 1px solid var(--line);
}
.section--ink .figure figcaption {
  background-color: var(--ink-2); color: #E3EEF5; border-top-color: var(--line-ink);
}

/* the language toggle sits on the solid ink header, so it is a light control */
.hdr .langlink { color: #fff; border-color: rgba(255, 255, 255, .38); background-color: transparent; }
.hdr .langlink:hover { color: var(--ink); background-color: #fff; border-color: #fff; }


/* ---------- an even split: the art column matches the height of the copy ---------- */
.split--even { align-items: stretch; }
.split--even > .figure { height: 100%; }
.split--even > .figure img { height: 100%; width: 100%; object-fit: cover; aspect-ratio: auto; min-height: 320px; }
.split .formcard { align-self: stretch; }

/* ---------- quote cards on an even row: three across, all ending on one line ---------- */
.grid.quotes { align-items: stretch; }
.grid.quotes .quote { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.grid.quotes .quote blockquote { flex: 1 1 auto; }
.grid.quotes .quote figcaption { margin-top: auto; }

/* ---------- the brand lockup ---------- */
.brand { gap: 13px; }
.brand__name b { line-height: 1.16; letter-spacing: -0.005em; }
.brand__name span { margin-top: 2px; }
.ftr__brand span b { line-height: 1.16; }

/* ---------- the docked hero lead card ---------- */
.fhero__in.fhero__in--card {
  grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  column-gap: 48px; align-items: center;
}
.fhero__in--card > .fhero__copy { grid-column: 1; grid-row: 1; }
.fhero__in--card > .leadcard { grid-column: 2; grid-row: 1; align-self: center; }
.fhero__in--card > .fhero__infocard { grid-column: 2; grid-row: 1; align-self: center; }
.fhero__in--card > .fhero__now { grid-column: 1; grid-row: 2; justify-self: start; }
.leadcard {
  background-color: var(--paper); color: var(--text);
  border-radius: var(--r-card); border: 1px solid var(--line);
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, .85);
  padding: 24px; width: 100%; max-width: 430px; justify-self: end;
}
.leadcard h2 {
  font-size: 21px; margin: 0 0 4px; color: var(--ink); letter-spacing: -0.015em;
}
.leadcard .leadcard__note { margin: 0 0 16px; font-size: 14.5px; color: var(--muted); }
.leadcard .field { margin-bottom: 12px; }
.leadcard .field:last-of-type { margin-bottom: 16px; }
.leadcard label {
  display: block; font-family: var(--head); font-size: 12.5px; font-weight: 700;
  color: var(--ink); margin-bottom: 5px; letter-spacing: .02em;
}
.leadcard input, .leadcard select {
  width: 100%; min-height: 48px; padding: 11px 13px; font-size: 16px;
  font-family: var(--sans); color: var(--text); background-color: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-btn);
}
.leadcard input:focus, .leadcard select:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.leadcard .btn { width: 100%; }
.leadcard__foot {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted); text-align: center;
}
.leadcard__foot a { font-family: var(--head); font-weight: 700; text-decoration: none; }
.leadcard .hp { position: absolute; left: -9999px; }
@media (max-width: 980px) {
  .fhero__in.fhero__in--card { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .fhero__in--card > .fhero__copy,
  .fhero__in--card > .leadcard,
  .fhero__in--card > .fhero__infocard,
  .fhero__in--card > .fhero__now { grid-column: 1; }
  .fhero__in--card > .fhero__copy { grid-row: 1; }
  .fhero__in--card > .leadcard { grid-row: 2; justify-self: stretch; max-width: none; }
  .fhero__in--card > .fhero__infocard { grid-row: 2; justify-self: stretch; max-width: none; }
  .fhero__in--card > .fhero__now { grid-row: 3; }
  .fhero--card { min-height: 0; }
  .fhero__ic-programs { display: none; }
  .fhero__ic-proglist { grid-template-columns: 1fr; }
  .fhero__ic-rates { gap: 10px; margin-top: 4px; }
  .fhero__ic-rate { padding: 10px 8px; border-radius: 10px; }
  .fhero__ic-rate-val { font-size: 22px; }
  .fhero__ic-rate-src { font-size: 10px; margin-top: 6px; }
}

/* the lead card in a body column fills it; only the hero dock is width-capped */
.leadcard--col { max-width: none; justify-self: stretch; }
.split--even > .leadcard, .split--even > .stackcol { height: 100%; }
.split--even > .stackcol { display: flex; flex-direction: column; gap: 20px; }
.split--even > .stackcol > .quote { margin: 0; }
.carriers {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background-color: var(--mist); padding: 20px; margin-top: auto;
}
.carriers h3 { font-size: 15px; margin: 0 0 12px; }
.carriers .chips { margin: 0; }

/* In an even split the two columns end on the same line: the lead card grows with its
   foot pinned, and a copy column that ends in a button row pins that row. */
.leadcard--col { display: flex; flex-direction: column; }
.leadcard--col form { display: flex; flex-direction: column; }
.leadcard--col form .btn { margin-top: auto; }
.leadcard--col .leadcard__foot { margin-top: 14px; }
.split--even > div:not(.leadcard):not(.stackcol) { display: flex; flex-direction: column; }
.split--even > div:not(.leadcard):not(.stackcol) > .btn-row:last-child { margin-top: auto; }
.split--even > div:not(.leadcard):not(.stackcol) > p:last-child { margin-bottom: 0; }

/* the sticky bar has two thumb targets and no room for a wrapped label */
.stickybar .btn { white-space: nowrap; font-size: 15px; padding-left: 14px; padding-right: 14px; }
@media (max-width: 400px) { .stickybar .btn { font-size: 14px; gap: 7px; } }


/* ================= Horizon Mortgage Group ================= */

/* The logo contains the name, so it stands alone: no chip behind it and no name typed
   beside it. The reversed version (white wordmark, light bar) is the one that reads on
   the solid ink header, the dark mobile panel and the footer. */
.brand .brand__logo { display: block; height: 110px; width: auto; max-width: 340px; background: none; }
.ftr__brand .brand__logo { height: 110px; width: auto; max-width: 340px; }
@media (max-width: 400px) { .brand .brand__logo { height: 76px; max-width: 230px; } }

/* The call button is the brand ink on light surfaces and a white button on dark ones.
   One accent on the site, and it belongs to the application. */
.btn--emerg { background-color: var(--ink); color: #fff; box-shadow: 0 14px 30px -18px rgba(1, 26, 31, .9); }
.btn--emerg:hover { background-color: var(--ink-2); color: #fff; }
.section--ink .btn--emerg, .fhero .btn--emerg, .ctaband .btn--emerg, .pagehead .btn--emerg,
.mpanel .btn--emerg, .stickybar .btn--emerg, .ftr .btn--emerg {
  background-color: #fff; color: var(--ink); box-shadow: none;
}
.section--ink .btn--emerg:hover, .fhero .btn--emerg:hover, .ctaband .btn--emerg:hover,
.pagehead .btn--emerg:hover, .mpanel .btn--emerg:hover { background-color: #E6F3F7; color: var(--ink); }
.is-light .btn--emerg { background-color: var(--ink); color: #fff; }

/* the frame indicator: four ticks that fill in time with the photograph behind them */
.fhero__now { gap: 12px; }
.frameticks { display: flex; gap: 6px; }
.frameticks i {
  display: block; width: 26px; height: 4px; border-radius: 3px; position: relative; overflow: hidden;
  background-color: rgba(255, 255, 255, .28);
}
.frameticks i::after {
  content: ""; position: absolute; inset: 0; background-color: #fff;
  transform: scaleX(0); transform-origin: left center;
  animation: tickFill 28s linear infinite both;
}
.frameticks i:nth-child(1)::after { animation-delay: -1s; }
.frameticks i:nth-child(2)::after { animation-delay: 6s; }
.frameticks i:nth-child(3)::after { animation-delay: 13s; }
.frameticks i:nth-child(4)::after { animation-delay: 20s; }
@keyframes tickFill {
  0%   { transform: scaleX(0); }
  25%  { transform: scaleX(1); }
  27%  { transform: scaleX(1); }
  27.6%, 100% { transform: scaleX(0); }
}
.fhero__nowtext { font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #E3EEF2; }
@media (max-width: 900px) { .frameticks i { width: 18px; } .fhero__nowtext { font-size: 10.5px; letter-spacing: .1em; } }
@media (prefers-reduced-motion: reduce) { .frameticks i::after { animation: none !important; transform: scaleX(0); } .frameticks i:first-child::after { transform: scaleX(1); } }

/* the Equal Housing Opportunity mark: a house with an equals sign, set in the footer */
.eho { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 10px; font-family: var(--head); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.eho svg { width: 34px; height: 34px; flex: none; }

/* the licensing line under every page */
.ftr__nmls { font-size: 14px; color: var(--muted-ink); }
.ftr__nmls b { color: #fff; font-family: var(--head); }

/* the apply panel: the one action the site exists for */
.applybox {
  border: 1px solid var(--line); border-radius: var(--r-card); background-color: var(--paper);
  padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px;
}
.applybox h3 { margin: 0; }
.applybox .btn { width: 100%; margin-top: 14px; }
.applybox p { margin: 0; color: var(--muted); }
.applybox__or { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; text-align: center; }
.applybox__or a { font-family: var(--head); font-weight: 700; text-decoration: none; }

/* the document checklist on the apply page: authored to one shape, so an equal grid */
.doclist .card h3 { font-size: 19px; }

/* the who-we-finance row, a list rather than a paragraph */
.wholist { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wholist li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.wholist b { font-family: var(--head); font-size: 16.5px; color: var(--ink); }
.wholist span { font-size: 15px; color: var(--muted); }
.wholist a { font-family: var(--head); font-weight: 700; font-size: 16.5px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 560px) { .wholist { grid-template-columns: minmax(0, 1fr); } }

/* the loan officer card on About */
.lofacts { margin-top: 22px; }

/* article body */
.article { max-width: 72ch; }
.article h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 1.5em; }
.article h2:first-child { margin-top: 0; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14.5px; color: var(--muted-ink); margin-top: 6px; }
.postcard .card__cta { margin-top: auto; }

/* A PICTURE MUST NEVER DECIDE THE ROW HEIGHT. A split figure gets an EXPLICIT height and
   the row centers on it; only a figure--tall, deliberately stretched to its copy column,
   takes the height of the copy instead. Explicit, not aspect-ratio, so a photograph that
   fails to load cannot collapse the box and hide an imbalance. */
.split > .figure:not(.figure--tall) { align-self: center; height: auto; }
.split > .figure:not(.figure--tall) img,
.split--even > .figure:not(.figure--tall) img { height: 400px; min-height: 0; aspect-ratio: auto; object-fit: cover; }
.split > .figure--tall img { object-position: 50% 40%; }
@media (max-width: 860px) {
  .split > .figure:not(.figure--tall) img,
  .split--even > .figure:not(.figure--tall) img,
  .split > .figure--tall img { height: 280px; min-height: 0; aspect-ratio: auto; }
}
/* the copy column's figure on a service page sits inside the text flow */
.split > div > .figure { margin: 22px 0 8px; }
.split > div > .figure img { height: 240px; width: 100%; object-fit: cover; aspect-ratio: auto; }

/* A three-field card beside a long copy column is not stretched into a white slab: it
   sits at the top of its column and stays in view while the copy scrolls past. */
@media (min-width: 861px) {
  .split--even > .leadcard--col { height: auto; align-self: start; position: sticky; top: 104px; }
}
.applybox__list { list-style: none; margin: 16px 0 0; padding: 0; }
.applybox__list li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--text); }
.applybox__list li:last-child { border-bottom: 0; }
.applybox__list svg { flex: none; margin-top: 3px; color: var(--accent); }
.split--even > .applybox { align-self: start; }

/* team training: password card + video grid */
.hdr .nav a { white-space: nowrap; }
.gate { max-width: 460px; }
.gate[hidden] { display: none; }
.gate h2 { margin-bottom: 14px; }
.gate__msg { min-height: 1.4em; color: #A12A2A; font-weight: 600; }
.vidgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vidgrid[hidden] { display: none; }
.vid__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background-color: #000; margin-bottom: 16px; }
a.vid__thumb { position: relative; display: block; overflow: hidden; background-color: #000; }
.vid__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.vid__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background-color: var(--accent); color: #fff; font-family: var(--head); font-weight: 700; font-size: 15px; }
a.vid__thumb:hover .vid__play { background-color: var(--accent-dark); }
@media (max-width: 760px) { .vidgrid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Accessibility menu
   The visitor's choices live on <html> as data-a11y-* attributes, written by
   the inline script in <head> before first paint, so someone who came back
   with high contrast on never sees the default page flash first.
   ========================================================================== */
.a11y { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 95; }
@media (max-width: 820px) { .a11y { top: auto; transform: none; bottom: calc(78px + env(safe-area-inset-bottom)); } }
.mpanel.is-open ~ .a11y { display: none; }
.a11y__btn {
  width: 56px; height: 56px; padding: 0; border-radius: 999px;
  border: 2px solid #fff; background-color: var(--ink); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 16px 34px -14px rgba(1, 26, 31, .75);
}
.a11y__btn:hover { background-color: var(--accent); }
.a11y__btn svg { width: 30px; height: 30px; }
.a11y__panel {
  position: absolute; left: 0; bottom: 70px; display: none;
  width: min(332px, calc(100vw - 32px));
  max-height: min(74vh, 620px); overflow-y: auto; overscroll-behavior: contain;
  background-color: var(--paper); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 18px;
}
.a11y.is-open .a11y__panel { display: block; }
.a11y__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a11y__head h2 { font-size: 18px; margin: 0; }
.a11y__close {
  flex: none; width: 44px; height: 44px; margin: -10px -10px -10px 0; padding: 0;
  border: 0; border-radius: 10px; background-color: transparent; color: var(--text); cursor: pointer;
}
.a11y__close:hover { background-color: var(--mist); }
.a11y__close svg { width: 20px; height: 20px; }
.a11y__note { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 8px 0 4px; }
.a11y__row { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.a11y__label { display: block; font-family: var(--head); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.a11y__steps { display: flex; gap: 10px; align-items: center; }
.a11y__step {
  flex: none; width: 48px; height: 48px; padding: 0; border-radius: 12px;
  border: 1px solid var(--line); background-color: var(--mist); color: var(--text);
  font-family: var(--head); font-size: 20px; font-weight: 700; cursor: pointer;
}
.a11y__step:hover { border-color: var(--accent); background-color: var(--cream); }
.a11y__meter { flex: 1; text-align: center; font-family: var(--head); font-size: 16px; font-weight: 700; color: var(--text); }
.a11y__opt {
  display: flex; width: 100%; min-height: 48px; align-items: center; gap: 11px;
  margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background-color: var(--paper); color: var(--text);
  font-family: var(--sans); font-size: 15px; line-height: 1.35; text-align: left; cursor: pointer;
}
.a11y__opt:last-child { margin-bottom: 0; }
.a11y__opt:hover { border-color: var(--accent); background-color: var(--cream); }
.a11y__opt[aria-pressed="true"] { border-color: var(--accent); background-color: var(--cream); font-weight: 700; }
.a11y__tick { flex: none; width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 6px; display: grid; place-items: center; color: #fff; }
.a11y__opt[aria-pressed="true"] .a11y__tick { background-color: var(--accent); border-color: var(--accent); }
.a11y__tick svg { width: 13px; height: 13px; opacity: 0; }
.a11y__opt[aria-pressed="true"] .a11y__tick svg { opacity: 1; }
.a11y__foot { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; display: grid; gap: 12px; justify-items: start; }
.a11y__reset {
  width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--ink);
  background-color: var(--ink); color: #fff; font-family: var(--head); font-size: 15px; font-weight: 700; cursor: pointer;
}
.a11y__reset:hover { background-color: var(--accent); border-color: var(--accent); }
.a11y__link { font-size: 14px; color: var(--accent); }

/* ---------- what the menu actually changes ---------- */
:root[data-a11y-text="1"] body { zoom: 1.12; }
:root[data-a11y-text="2"] body { zoom: 1.25; }
:root[data-a11y-text="3"] body { zoom: 1.4; }

:root[data-a11y-space="1"] body :is(p, li, dd, dt, td, th, figcaption, blockquote, .lede, .prose) { line-height: 1.9 !important; }
:root[data-a11y-space="2"] body :is(p, li, dd, dt, td, th, figcaption, blockquote, .lede, .prose) { line-height: 2.15 !important; letter-spacing: .05em !important; word-spacing: .14em !important; }

:root[data-a11y-font="1"] body,
:root[data-a11y-font="1"] body * { font-family: Verdana, "DejaVu Sans", Tahoma, Geneva, sans-serif !important; letter-spacing: .012em; }

:root[data-a11y-links="1"] body a { text-decoration: underline !important; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:root[data-a11y-links="1"] body a:not(.btn):not(.brand):not(.a11y__btn) { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }

:root[data-a11y-motion="1"] *,
:root[data-a11y-motion="1"] *::before,
:root[data-a11y-motion="1"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-a11y-motion="1"] .reveal { opacity: 1 !important; transform: none !important; }
:root[data-a11y-motion="1"] .fhero__frame:nth-child(1) { opacity: 1 !important; }
:root[data-a11y-motion="1"] .fhero__frame img { transform: none !important; }
:root[data-a11y-motion="1"] .dispatch i::after,
:root[data-a11y-motion="1"] .frameticks i:first-child::after { transform: scaleX(1) !important; }

/* high contrast: the photographs come out from under the type rather than being
   dimmed, because a scrim that reads at 4.5:1 is not what this mode is for */
:root[data-a11y-contrast] body .fhero__frames,
:root[data-a11y-contrast] body .fhero__scrim,
:root[data-a11y-contrast] body .hero__art { display: none !important; }

:root[data-a11y-contrast="dark"] body,
:root[data-a11y-contrast="dark"] body * {
  background-color: #000 !important; background-image: none !important;
  color: #fff !important; border-color: #fff !important;
  box-shadow: none !important; text-shadow: none !important;
}
:root[data-a11y-contrast="dark"] body a { color: #FFE23D !important; text-decoration: underline !important; }
:root[data-a11y-contrast="dark"] body :is(.btn, .a11y__btn, .a11y__reset, .a11y__step, .vid__play) {
  background-color: #FFE23D !important; color: #000 !important; border: 2px solid #FFE23D !important;
}
:root[data-a11y-contrast="dark"] body :is(input, select, textarea) { background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important; }
:root[data-a11y-contrast="dark"] body :is(img, iframe) { filter: grayscale(1) contrast(1.15); }
:root[data-a11y-contrast="dark"] body .a11y__tick { border: 2px solid #fff !important; }
:root[data-a11y-contrast="dark"] body .a11y__opt[aria-pressed="true"] .a11y__tick { background-color: #FFE23D !important; color: #000 !important; }

:root[data-a11y-contrast="light"] body,
:root[data-a11y-contrast="light"] body * {
  background-color: #fff !important; background-image: none !important;
  color: #000 !important; border-color: #000 !important;
  box-shadow: none !important; text-shadow: none !important;
}
:root[data-a11y-contrast="light"] body a { color: #00415A !important; text-decoration: underline !important; }
:root[data-a11y-contrast="light"] body :is(.btn, .a11y__btn, .a11y__reset, .a11y__step, .vid__play) {
  background-color: #00415A !important; color: #fff !important; border: 2px solid #00415A !important;
}
:root[data-a11y-contrast="light"] body :is(input, select, textarea) { background-color: #fff !important; color: #000 !important; border: 2px solid #000 !important; }
:root[data-a11y-contrast="light"] body :is(img, iframe) { filter: grayscale(1) contrast(1.15); }
:root[data-a11y-contrast="light"] body .a11y__tick { border: 2px solid #000 !important; }
:root[data-a11y-contrast="light"] body .a11y__opt[aria-pressed="true"] .a11y__tick { background-color: #00415A !important; color: #fff !important; }

:root[data-a11y-cursor="1"] body,
:root[data-a11y-cursor="1"] body * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'><path d='M5 2.2 18.4 12.6l-6.1.5 3.3 6.6-2.9 1.4-3.3-6.6-4.4 4.2z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/></svg>") 4 2, auto !important;
}
:root[data-a11y-cursor="1"] body :is(a, button, summary, label, [role="button"], input[type="submit"]),
:root[data-a11y-cursor="1"] body :is(a, button, summary, label) * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'><path d='M9 11.5V4.8a1.6 1.6 0 0 1 3.2 0v5.4h.6V8.6a1.5 1.5 0 0 1 3 0v1.9h.6V9.3a1.5 1.5 0 0 1 3 0v6.4c0 3-2 5.3-5 5.3h-2c-2 0-3-.9-3.9-2.4l-2.5-4a1.5 1.5 0 0 1 2.3-1.8z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/></svg>") 12 2, pointer !important;
}

/* ---------- resources page ---------- */
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .res-grid { grid-template-columns: 1fr; gap: 40px; } }

.ratewidget { background: var(--mist); border-radius: var(--r-card); padding: 28px; margin: 18px 0 22px; }
.ratewidget__loading { color: var(--muted); font-style: italic; }
.ratewidget__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; }
.ratewidget__item { text-align: center; }
.ratewidget__label { display: block; font-family: var(--head); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ratewidget__value { font-family: var(--head); font-size: clamp(28px, 3vw, 36px); font-weight: 800; color: var(--ink); }
.ratewidget__date { text-align: center; margin-top: 14px; font-size: 14px; color: var(--muted); }

.calccard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 32px; }
.calc__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 26px; }
@media (max-width: 600px) { .calc__fields { grid-template-columns: 1fr; } }
.calc__result { text-align: center; padding: 22px 0 8px; border-top: 1px solid var(--line); }
.calc__amount { font-family: var(--head); font-size: clamp(32px, 4vw, 48px); font-weight: 800;
  color: var(--accent); margin: 8px 0; }
.calc__detail { color: var(--muted); font-size: 15px; margin-bottom: 14px; }