/* ==========================================================================
   Flagstick Financial — home page
   Ported from the "Flagstick Home" Claude Design composition.
   ========================================================================== */

:root {
  /* Brand */
  --gold: #C9A96A;
  --gold-ink: #8A6F32;      /* gold, darkened enough to read on cream */
  --green-deep: #0E211A;
  --green: #1C3A2F;
  --cream: #F6F3EA;
  --cream-alt: #EFEBDD;
  --field: #FFFDF7;

  /* Text */
  --ink: #22271F;
  --ink-soft: #2C332A;
  --ink-body: #3D453A;
  --ink-muted: #5E675B;

  /* Hairlines */
  --line-dark: rgba(28, 58, 47, 0.18);
  --line-dark-soft: rgba(28, 58, 47, 0.1);
  --line-light: rgba(246, 243, 234, 0.24);

  /* Type */
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Metrics */
  --header-h: clamp(70px, 8vw, 92px);
  /* Clear space an interior banner leaves below the header before its first
     line of text, so the expanded logo never lands on the copy. Paired with
     the brand scale below — the smaller logo needs less room. */
  --banner-lead: 92px;
  --gutter: clamp(18px, 4vw, 88px);
  --header-gutter: clamp(18px, 3.6vw, 88px);
  /* Sized for modern desktops. A hard 1440 cap left ~300px of dead margin on
     each side of a 2056px viewport; this keeps growing to a point and then
     holds, so the frame stays deliberate instead of sprawling. Long-form
     reading (articles, legal) sets its own narrower measure and is unaffected. */
  --shell: min(1880px, 100%);

  --ease-brand: cubic-bezier(0.2, 0.7, 0.25, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-menu-open { overflow: hidden; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--gold-ink); }

img { max-width: 100%; }

::selection { background: var(--gold); color: #12261E; }

input, select, textarea, button { font: inherit; color: inherit; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Shared bits ------------------------------------------------------------- */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.rule {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--gold);
}

.eyebrow {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.section-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--green);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 clamp(24px, 3vw, 38px);
  font-size: 11.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn--gold {
  background: var(--gold);
  color: var(--green-deep);
  font-weight: 600;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.btn--gold:hover {
  color: var(--green-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.btn--ghost {
  border: 1px solid rgba(246, 243, 234, 0.34);
  color: var(--cream);
  font-weight: 500;
  transition: border-color 220ms ease, background 220ms ease;
}
.btn--ghost:hover {
  color: var(--cream);
  border-color: var(--cream);
  background: rgba(246, 243, 234, 0.06);
}
.apply-chip {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 34px;
   padding: 0 16px;
   border: 1px solid var(--gold);
   color: var(--gold-ink);
   font-family: var(--sans);
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   white-space: nowrap;
   transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.apply-chip:hover {
   background: var(--gold);
   border-color: var(--gold);
   color: var(--green-deep);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(14, 33, 26, 0);
  transition: background 480ms ease;
}

/* Condensed: flat --green-deep, no border and no texture. It is the same
   colour as the wash over the hero photograph, so the bar reads as a
   continuation of the hero rather than a separate strip pinned on top. */
.site-header.is-condensed {
  background: var(--green-deep);
}

/* Scrim keeps the transparent-state nav legible over the hero photo. */
.site-header__scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 230px;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(180deg,
    rgba(14, 33, 26, 0.9) 0%,
    rgba(14, 33, 26, 0.58) 44%,
    rgba(14, 33, 26, 0) 100%);
  transition: opacity 480ms ease;
}
.site-header.is-condensed .site-header__scrim { opacity: 0; }

.site-header__inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--header-gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(24px, 4vw, 64px);
}

/* Brand mark ---------------------------------------------------------------
   One source image cropped two ways. Expanded: the full stacked lockup.
   Condensed: just the flagstick, scaled up out of the same sprite. The two
   crops are laid on top of each other and cross-faded so the transition reads
   as the lockup collapsing into the mark.
   -------------------------------------------------------------------------- */

.brand {
  position: absolute;
  left: var(--header-gutter);
  top: 30px;
  z-index: 2;
  display: block;
  overflow: hidden;
  width: 205px;
  height: 136px;
  transition:
    width 620ms var(--ease-brand),
    height 620ms var(--ease-brand),
    top 620ms var(--ease-brand),
    transform 620ms var(--ease-brand);
}

/* Centred in whatever the header currently measures. A fixed 24px only
   balanced at the 92px desktop height — at the 70px mobile height it left
   24px above the mark and 2px below, which is what made it look dropped. */
.site-header.is-condensed .brand {
  top: calc((var(--header-h) - 44px) / 2);
  width: 25px;
  height: 44px;
}

/* The full lockup is drawn at a fixed 205px and would eat a phone screen —
   and land on the banner copy. Scale the expanded state only; the condensed
   mark is already small enough to stay at its native size. */
@media (max-width: 759.98px) {
  .brand { transform: scale(0.62); transform-origin: top left; }
  .site-header.is-condensed .brand { transform: none; }
}

.brand__stack,
.brand__mark {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform 620ms var(--ease-brand), opacity 420ms ease;
}

/* These are sprite crops: an oversized image positioned inside a small window.
   The global img max-width would scale them down and break the framing. */
.brand__stack img,
.brand__mark img { max-width: none; }

.brand__stack {
  width: 205px;
  height: 136px;
  transform-origin: 91px 3px;
  transform: translate(0, 0) scale(1);
  opacity: 1;
}
.brand__stack img {
  position: absolute;
  width: 256px;
  height: 256px;
  left: -26px;
  top: -54px;
}

.brand__mark {
  width: 25px;
  height: 44px;
  transform-origin: top left;
  transform: translate(91px, 3px) scale(1.57);
  opacity: 0;
}
.brand__mark img {
  position: absolute;
  width: 163px;
  height: 163px;
  left: -74px;
  top: -36px;
}

.site-header.is-condensed .brand__stack {
  transform: translate(-91px, -3px) scale(0.637);
  opacity: 0;
}
.site-header.is-condensed .brand__mark {
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

/* Desktop nav -------------------------------------------------------------- */

.site-nav {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 3.4vw, 66px);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.site-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(246, 243, 234, 0.72);
}
.site-nav a:hover { color: var(--gold); }

.site-nav a[aria-current='page'] {
  color: var(--cream);
  box-shadow: inset 0 -1px 0 var(--gold);
  padding-bottom: 5px;
}

.header-actions {
  display: none;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex-shrink: 0;
}

.header-actions__tel {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgba(246, 243, 234, 0.8);
}
.header-actions__tel:hover { color: var(--gold); }

.header-actions__cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 220ms ease, color 220ms ease;
}
.header-actions__cta:hover {
  background: var(--gold);
  color: var(--green-deep);
}

/* Hamburger ---------------------------------------------------------------- */

.menu-toggle {
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 0 0 12px;
}
.menu-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--cream);
}
.menu-toggle span:last-child {
  width: 18px;
  background: var(--gold);
}

@media (min-width: 1040px) {
  .site-nav,
  .header-actions { display: flex; }
  .menu-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   Mobile menu
   -------------------------------------------------------------------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--green-deep);
  display: flex;
  flex-direction: column;
  padding: 0 24px 40px;
}

/* Taller than the site header — this is the top of a full-screen overlay, so
   the lockup gets room to be shown whole rather than squeezed into a bar
   sized for the condensed mark. */
.mobile-menu__bar {
  min-height: calc(var(--header-h) + 38px);
  padding-block: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(246, 243, 234, 0.12);
}

/* The full lockup — flag mark and wordmark — not just the wordmark. The old
   crop started 75px down the sprite, which sliced the flagstick clean off.
   Every value here is the header's geometry scaled by 130/205, so the framing
   is identical to the desktop lockup rather than a second guess at the crop. */
.mobile-menu__logo {
  display: block;
  position: relative;
  width: 130px;
  height: 86.2px;
  overflow: hidden;
  flex-shrink: 0;
}
.mobile-menu__logo img {
  position: absolute;
  width: 162.3px;
  height: 162.3px;
  left: -16.5px;
  top: -34.2px;
  max-width: none;
}

.mobile-menu__close {
  width: 48px;
  height: 48px;
  background: none;
  border: 0;
  color: var(--cream);
  font-size: 26px;
  font-family: var(--serif);
  line-height: 1;
  cursor: pointer;
}

/* The menu now carries the full program list, so the middle scrolls while the
   bar and the CTA stay pinned. */
.mobile-menu__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
}
.mobile-menu__nav a {
  display: flex;
  align-items: center;
  min-height: 60px;
  font-family: var(--serif);
  font-size: 28px;
  color: var(--cream);
  border-bottom: 1px solid rgba(246, 243, 234, 0.1);
}

.mobile-menu__programs {
  padding: 30px 0 8px;
}

.mobile-menu__heading {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.mobile-menu__program-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
.mobile-menu__program-links a {
  font-size: 15px;
  color: rgba(246, 243, 234, 0.72);
}

.mobile-menu__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 32px;
}

.mobile-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  background: var(--gold);
  color: var(--green-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mobile-menu__cta:hover { color: var(--green-deep); }

.mobile-menu__tel {
  text-align: center;
  font-family: var(--serif);
  font-size: 20px;
  color: rgba(246, 243, 234, 0.75);
}

@media (min-width: 1040px) {
  .mobile-menu { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--green-deep);
  /* Pull up under the transparent header so the photo runs full-bleed. */
  margin-top: calc(-1 * var(--header-h));
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero__photo {
  position: absolute;
  inset: 0;
  background-image: var(--img-hero);
  background-size: cover;
  background-position: 62% 28%;
  filter: saturate(0.62) brightness(0.9);
}

.hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg,
    rgba(14, 33, 26, 0.97) 0%,
    rgba(14, 33, 26, 0.92) 34%,
    rgba(14, 33, 26, 0.62) 66%,
    rgba(14, 33, 26, 0.42) 100%);
}

.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(14, 33, 26, 0) 0%, rgba(14, 33, 26, 0.9) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(192px, 20.5vw, 300px) var(--gutter) clamp(56px, 7vw, 116px);
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(26px, 3.4vw, 42px);
}
.hero__meta-rule {
  display: block;
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: var(--gold);
}
.hero__meta-text {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(246, 243, 234, 0.62);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .hero__meta { gap: 10px; }
}
.hero__meta-dot {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(33px, 7.2vw, 102px);
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--cream);
}
.hero__title-line {
  display: block;
  white-space: nowrap;
}
.hero__title-sub {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: rgba(246, 243, 234, 0.58);
  margin-top: 0.12em;
}

/* Lede left, actions hard right. On a wide screen this is what stops the hero
   huddling in the left third — the two anchors hold opposite edges of the
   frame and the space between them is the point, not waste. */
.hero__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 80px);
  margin-top: clamp(40px, 5vw, 76px);
}

.hero__lede {
  margin: 0;
  flex: 0 1 52ch;
  max-width: 52ch;
  font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.68;
  color: rgba(246, 243, 234, 0.8);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  flex-shrink: 0;
}

/* Full-bleed marquee across the foot of the hero. Runs edge to edge rather
   than sitting inside the shell, so the programs read as a continuous band
   under the composition instead of a wrapped list. */
.hero__ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-top: 1px solid rgba(246, 243, 234, 0.14);
  padding: clamp(18px, 2vw, 26px) 0 clamp(28px, 3.4vw, 46px);
  /* Fades the band — and its rule — into the edges of the viewport so items
     arrive and leave instead of being clipped. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.hero__ticker-track {
  display: flex;
  width: max-content;
  animation: hero-ticker 78s linear infinite;
}
.hero__ticker:hover .hero__ticker-track { animation-play-state: paused; }

.hero__ticker-run {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.4vw, 44px);
  padding-right: clamp(22px, 2.4vw, 44px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(246, 243, 234, 0.5);
}

.hero__ticker-dot {
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

@keyframes hero-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Why choose Flagstick
   -------------------------------------------------------------------------- */

.why { background: var(--cream); }

.why__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 196px) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.why__portrait {
  display: block;
  width: clamp(168px, 21vw, 268px);
  height: clamp(168px, 21vw, 268px);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.why__portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.why__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vw, 30px);
  margin-top: clamp(38px, 5vw, 64px);
  width: 100%;
}

.why__lede {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 35px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--green);
  text-wrap: pretty;
}

.why__sub {
  margin: 0;
  max-width: 68ch;
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.72;
  color: var(--ink-body);
  text-wrap: pretty;
}

.why__points {
  width: 100%;
  margin-top: clamp(20px, 3vw, 38px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid rgba(28, 58, 47, 0.16);
  text-align: left;
}

.why__points ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(8px, 1vw, 14px) clamp(36px, 5vw, 80px);
}

.why__points li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: clamp(16px, 1.9vw, 26px) 0;
  font-size: clamp(19px, 1.85vw, 26px);
  line-height: 1.4;
  color: var(--ink-soft);
}

.tick {
  color: var(--gold);
  font-size: 17px;
  flex-shrink: 0;
}

@media (min-width: 620px) {
  .why__points ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .why__points ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Blog rail — recent articles, home page
   Dark ground: it breaks the run of cream sections either side of it, and
   photographs carry far better on deep green than on paper. The head sits in
   the shell; the track runs full-bleed so cards scroll off the edge rather
   than stopping at a margin.
   -------------------------------------------------------------------------- */

.blog-rail {
  background: var(--green-deep);
  padding: clamp(72px, 9vw, 152px) 0 clamp(72px, 9vw, 152px);
  overflow: hidden;
}

.blog-rail__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.blog-rail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px clamp(32px, 4vw, 72px);
  margin-bottom: clamp(44px, 5.2vw, 76px);
}
.blog-rail__head .rule { margin-bottom: 28px; }

.blog-rail__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.blog-rail__lead {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  max-width: 46ch;
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.7;
  color: rgba(246, 243, 234, 0.6);
  text-wrap: pretty;
}

.blog-rail__controls {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.6vw, 40px);
  flex-shrink: 0;
  padding-bottom: 4px;
}

.blog-rail__all {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 6px;
  white-space: nowrap;
  transition: color 200ms ease;
}
.blog-rail__all:hover { color: var(--gold); }

.blog-rail__arrows { display: flex; gap: 10px; }
.blog-rail__arrows[hidden] { display: none; }

.blog-rail__arrow {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(246, 243, 234, 0.28);
  color: var(--cream);
  font-size: 15px;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease,
    opacity 200ms ease;
}
.blog-rail__arrow:hover:not(:disabled) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-deep);
}
.blog-rail__arrow:disabled { opacity: 0.25; cursor: default; }

.blog-rail__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.blog-rail__track::-webkit-scrollbar { display: none; }
.blog-rail__track:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Aligns to the shell's left edge, then lets the last card run to the screen
   edge so a scrollable rail reads as continuing rather than ending. */
.blog-rail__lane {
  display: flex;
  flex-wrap: nowrap;
  min-width: 100%;
  gap: clamp(20px, 2.2vw, 44px);
  padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}

/* Grow, don't shrink: a handful of posts spread to fill the full width
   instead of huddling left, and once there are enough to overflow the lane
   scrolls and the arrows appear. */
.blog-card {
  flex: 1 0 clamp(280px, 26vw, 520px);
  max-width: 620px;
  scroll-snap-align: start;
}

.blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--cream);
}

.blog-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #0a1712;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.7) brightness(0.9);
  transition: transform 900ms var(--ease-brand), filter 500ms ease;
}
.blog-card__link:hover .blog-card__media img {
  transform: scale(1.05);
  filter: saturate(0.85) brightness(1);
}

/* A whisper of brand green over every photo so a set of unrelated
   photographs still reads as one family. */
.blog-card__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(14, 33, 26, 0.22) 0%,
    rgba(14, 33, 26, 0.04) 45%,
    rgba(14, 33, 26, 0.38) 100%);
  pointer-events: none;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: clamp(24px, 2.6vw, 34px);
}

.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 243, 234, 0.5);
}
.blog-card__meta span[aria-hidden] { color: var(--gold); }

.blog-card__title {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.1vw, 31px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--cream);
  text-wrap: balance;
  transition: color 200ms ease;
}
.blog-card__link:hover .blog-card__title { color: var(--gold); }

.blog-card__sub {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.68;
  color: rgba(246, 243, 234, 0.62);
  text-wrap: pretty;
}

.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: clamp(22px, 2.4vw, 32px);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.blog-card__arrow { transition: transform 260ms var(--ease-brand); }
.blog-card__link:hover .blog-card__arrow { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   Loan programs
   -------------------------------------------------------------------------- */

.programs {
  background: var(--cream-alt);
  border-top: 1px solid var(--line-dark-soft);
  scroll-margin-top: 92px;
}

.programs__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 172px) var(--gutter);
}

.programs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 4.6vw, 60px);
}
.programs__head .rule { margin-bottom: 26px; }

.link-more {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 6px;
  white-space: nowrap;
}
.link-more:hover { color: var(--gold-ink); }

.programs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(30px, 4.2vw, 104px);
  border-bottom: 1px solid var(--line-dark);
}

.program-link {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 10px 16px;
   border-top: 1px solid var(--line-dark);
}
.programs__grid .program-link { min-height: clamp(62px, 5.4vw, 76px); padding: clamp(14px, 1.6vw, 20px) 0; }

.program-link__label {
   display: flex;
   align-items: baseline;
   gap: 16px;
   color: var(--green);
   font-family: var(--serif);
   letter-spacing: -0.016em;
   line-height: 1.2;
   transition: color 200ms ease;
}
.program-link__label:hover { color: var(--gold-ink); }
.programs__grid .program-link__label { font-size: clamp(21px, 2vw, 27px); }

.program-link .apply-chip { flex-shrink: 0; }

.programs__arrow {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 13px;
  flex-shrink: 0;
}

@media (min-width: 560px) {
  .programs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 820px) {
  .programs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .programs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   The Flagstick Approach
   -------------------------------------------------------------------------- */

.approach {
  background: var(--green);
  position: relative;
  overflow: hidden;
}

.approach__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 196px) var(--gutter);
}

.approach__head { margin-bottom: clamp(48px, 6.4vw, 88px); }
.approach__head .rule { margin-bottom: 30px; }

.approach__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--cream);
  white-space: nowrap;
}

.approach__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 148px);
  row-gap: clamp(38px, 4.4vw, 66px);
}

@media (min-width: 760px) {
  .approach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.step {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-light);
  padding-top: clamp(20px, 2.2vw, 28px);
}

.step__num {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--gold);
  line-height: 1;
}

.step__title {
  margin: clamp(18px, 2vw, 26px) 0 0;
  /* Reserved height keeps the paragraphs aligned across a row when one
     heading wraps to two lines and its neighbour doesn't. */
  min-height: 2.4em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(23px, 2.3vw, 31px);
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--cream);
}

.step__body {
  margin: clamp(6px, 0.8vw, 12px) 0 0;
  max-width: 44ch;
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  line-height: 1.7;
  color: rgba(246, 243, 234, 0.66);
  text-wrap: pretty;
}
/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.reviews {
     background: var(--green-deep);
     padding: clamp(72px, 9vw, 152px) 0 clamp(72px, 9vw, 152px);
     overflow: hidden;
}

.reviews__inner {
     max-width: var(--shell);
     margin: 0 auto;
     padding-inline: var(--gutter);
}

.reviews__head {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;
     justify-content: space-between;
     gap: 28px clamp(32px, 4vw, 72px);
     margin-bottom: clamp(44px, 5.2vw, 76px);
}
.reviews__head .rule { margin-bottom: 28px; }

.reviews__title {
     margin: 0;
     font-family: var(--serif);
     font-weight: 500;
     font-size: clamp(28px, 3.8vw, 52px);
     line-height: 1.08;
     letter-spacing: -0.02em;
     color: var(--cream);
}

.reviews__arrows { display: flex; gap: 10px; flex-shrink: 0; padding-bottom: 4px; }
.reviews__arrows[hidden] { display: none; }

.reviews__arrow {
     width: 48px;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: none;
     border: 1px solid rgba(246, 243, 234, 0.28);
     color: var(--cream);
     font-size: 15px;
     cursor: pointer;
     transition: background 200ms ease, color 200ms ease, border-color 200ms ease,
            opacity 200ms ease;
}
.reviews__arrow:hover:not(:disabled) {
     background: var(--gold);
     border-color: var(--gold);
     color: var(--green-deep);
}
.reviews__arrow:disabled { opacity: 0.25; cursor: default; }

.reviews__track {
     overflow-x: auto;
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.reviews__lane {
     display: flex;
     flex-wrap: nowrap;
     min-width: 100%;
     gap: clamp(20px, 2.2vw, 44px);
     padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}

.review-card {
     flex: 1 0 clamp(280px, 26vw, 400px);
     max-width: 420px;
     display: flex;
     flex-direction: column;
     border: 1px solid rgba(246, 243, 234, 0.14);
     padding: clamp(28px, 2.8vw, 36px);
}

.review-card__stars {
     color: var(--gold);
     font-size: 15px;
     letter-spacing: 0.16em;
}

.review-card__quote {
     margin: clamp(16px, 1.8vw, 22px) 0 0;
     font-family: var(--serif);
     font-size: clamp(16.5px, 1.35vw, 18.5px);
     line-height: 1.6;
     color: var(--cream);
     text-wrap: pretty;
     flex: 1;
}

.review-card__meta {
     display: flex;
     flex-direction: column;
     gap: 2px;
     margin-top: clamp(20px, 2.2vw, 28px);
     padding-top: clamp(16px, 1.8vw, 20px);
     border-top: 1px solid rgba(246, 243, 234, 0.16);
}

.review-card__name {
     font-size: 13.5px;
     font-weight: 500;
     color: var(--cream);
}

.review-card__location {
     font-size: 12.5px;
     color: rgba(246, 243, 234, 0.56);
}

.review-card__source {
     margin-top: 4px;
     font-size: 10.5px;
     font-weight: 500;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--gold);
}

/* --------------------------------------------------------------------------
   Course band
   -------------------------------------------------------------------------- */

.course-band {
  position: relative;
  height: clamp(220px, 32vw, 420px);
  background: var(--green-deep);
  overflow: hidden;
}
.course-band__photo {
  position: absolute;
  inset: 0;
  background-image: var(--img-course);
  background-size: cover;
  background-position: center 38%;
  filter: saturate(0.78);
}
.course-band__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(14, 33, 26, 0.5) 0%,
    rgba(14, 33, 26, 0.12) 45%,
    rgba(14, 33, 26, 0.55) 100%);
}

/* --------------------------------------------------------------------------
   Get pre-approved
   -------------------------------------------------------------------------- */

.contact {
  background: var(--cream);
  scroll-margin-top: 92px;
}

.contact__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 184px) var(--gutter);
}
.contact__inner .rule { margin-bottom: 30px; }

.contact__title {
  margin: 0 0 clamp(38px, 4.8vw, 68px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--green);
  white-space: nowrap;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 146px);
  row-gap: clamp(38px, 4.6vw, 64px);
  align-items: start;
}

@media (min-width: 900px) {
  .contact__grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
}

.contact__details {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--line-dark);
}

.detail {
  padding: clamp(16px, 1.8vw, 22px) 0;
  border-top: 1px solid var(--line-dark);
}
.detail .eyebrow { display: block; margin-bottom: 9px; }

.detail__value {
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.2;
  color: var(--green);
}
.detail__value--lg { font-size: clamp(22px, 2.3vw, 29px); }
.detail__value--break { word-break: break-word; }
a.detail__value:hover { color: var(--gold-ink); }

/* Form --------------------------------------------------------------------- */

.lead-form {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(26px, 3vw, 38px);
}

.lead-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}

.lead-form label {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  background: var(--field);
  border: 1px solid rgba(28, 58, 47, 0.2);
  border-radius: 0;
  font-size: 15.5px;
}

.lead-form input,
.lead-form select {
  height: 52px;
  padding: 0 15px;
}

.lead-form select { appearance: none; }

.lead-form textarea {
  padding: 14px 15px;
  line-height: 1.6;
  resize: vertical;
}

.lead-form__submit {
  margin-top: 4px;
  min-height: 58px;
  background: var(--green);
  color: var(--cream);
  border: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms ease;
}
.lead-form__submit:hover { background: var(--green-deep); }
.lead-form__submit[disabled] { cursor: default; opacity: 0.85; }

.lead-form__fine {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--green-deep);
  color: rgba(246, 243, 234, 0.7);
}

.site-footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 132px) var(--gutter) clamp(28px, 3.4vw, 52px);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(28px, 3.4vw, 72px);
  row-gap: clamp(40px, 4.4vw, 68px);
  align-items: start;
}

/* Centred as a block: the lockup carries the column, so the copy and the
   social row align to it rather than to a left edge that nothing else uses. */
.site-footer__brand {
  min-width: 0;
  /* No asymmetric padding here — it would shift the centred lockup off the
     column's true axis by half its value. */
  padding-right: 0;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Brand block + four link columns. Below the widest breakpoint the brand takes
   its own full-width row so the link columns keep a usable measure. The tracks
   are deliberately unequal — Resources and Legal carry long labels, Explore
   holds only short words — so nothing wraps mid-phrase. */
@media (min-width: 560px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 880px) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  /* Four equal link tracks. Unequal ones sized to their content left gaps of
     different widths between the columns, which read as arbitrary rather than
     composed. */
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
    align-items: start;
  }
  .site-footer__brand {
    grid-column: auto;
  }
}

/* One hairline across the link columns, which hang beneath it — the same
   rule-above-content structure the programs grid and the contact details use,
   giving four columns of different lengths a shared top edge.
   The brand block is deliberately outside that system: no rule, no top
   padding, so the lockup starts higher than the column headings and reads as
   the anchor rather than a fifth column. */
.site-footer__col {
  border-top: 1px solid rgba(246, 243, 234, 0.18);
  padding-top: clamp(22px, 2.2vw, 30px);
}
.site-footer__brand p {
  margin: 0;
  /* Without a floor the blurb wraps every three or four words in a narrow
     track and reads as a ribbon. */
  min-width: 26ch;
  max-width: 40ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(246, 243, 234, 0.6);
  text-wrap: pretty;
}

/* Scaled up from the earlier 152px so the mark carries real weight, and with
   no rule above it the top of the lockup sits higher than the column headings
   opposite. Sprite offsets are the header's, multiplied through by the same
   factor so the crop stays identical. */
.site-footer__logo {
  display: block;
  position: relative;
  width: 198px;
  height: 131px;
  overflow: hidden;
  margin: 0 0 clamp(22px, 2.2vw, 30px);
}
.site-footer__logo img {
  position: absolute;
  width: 247px;
  height: 247px;
  left: -25px;
  top: -52px;
  max-width: none;
}

.site-footer__heading {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.site-footer__links a {
  font-size: 15px;
  color: rgba(246, 243, 234, 0.72);
}
.site-footer__links a:hover { color: var(--cream); }
/* The email address is the only footer link that can't be shortened. Break it
   only as a last resort, and at the @ first — see the <wbr> in the markup. */
.site-footer__links .is-breakable {
  overflow-wrap: break-word;
  font-size: 14.5px;
}

/* No second hairline here — the column already has one at its top, and two
   rules in one column reads as clutter. Spacing does the separating. */
.site-footer__social {
  margin-top: clamp(28px, 3vw, 40px);
}

.site-footer__social-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.site-footer__social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}

.site-footer__social-link {
  font-size: 14px;
  color: rgba(246, 243, 234, 0.72);
  padding-bottom: 2px;
  box-shadow: inset 0 -1px 0 rgba(201, 169, 106, 0.35);
  transition: color 200ms ease, box-shadow 200ms ease;
}
.site-footer__social-link:hover {
  color: var(--cream);
  box-shadow: inset 0 -1px 0 var(--gold);
}

/* Legal bar ---------------------------------------------------------------- */

.site-footer__legal {
  background: var(--cream);
  border-top: 1px solid rgba(28, 58, 47, 0.14);
}

.site-footer__legal-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(13px, 1.4vw, 17px) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6vw, 44px);
  align-items: center;
  justify-content: space-between;
}

.site-footer__legal-text {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-footer__legal-line {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.site-footer__legal-line--muted {
  color: var(--ink-muted);
  text-wrap: pretty;
}

.site-footer__seals {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.8vw, 36px);
}
.site-footer__seals img {
  height: clamp(36px, 3.2vw, 42px);
  width: auto;
  display: block;
}
.site-footer__seal--tall { height: clamp(38px, 3.4vw, 44px) !important; }

/* --------------------------------------------------------------------------
   Sticky mobile CTA
   -------------------------------------------------------------------------- */

/* Hidden until the hero has been scrolled past — main.js adds .is-visible.
   Over the hero it just repeats the two calls to action already on screen,
   which is noise rather than help. Deliberately smaller than the in-page
   buttons: this is a persistent utility, not a headline. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 65;
  background: rgba(14, 33, 26, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(246, 243, 234, 0.14);
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 10px;
  transform: translateY(115%);
  transition: transform 420ms var(--ease-brand);
  will-change: transform;
}

.sticky-cta.is-visible { transform: translateY(0); }

.sticky-cta__call,
.sticky-cta__apply {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sticky-cta__call {
  flex: 1;
  border: 1px solid rgba(246, 243, 234, 0.34);
  color: var(--cream);
  font-weight: 500;
}
.sticky-cta__call:hover { color: var(--cream); }

.sticky-cta__apply {
  flex: 2;
  background: var(--gold);
  color: var(--green-deep);
  font-weight: 600;
}
.sticky-cta__apply:hover { color: var(--green-deep); }

/* Keeps the foot of the page clear of the fixed bar, which is only ever
   visible down here. */
.sticky-cta__spacer {
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  background: var(--green-deep);
}

@media (min-width: 1040px) {
  .sticky-cta,
  .sticky-cta__spacer { display: none; }
}

/* --------------------------------------------------------------------------
   Interior page banner
   Same construction as the home hero — photograph running up behind the
   transparent header — at roughly a third the height.
   -------------------------------------------------------------------------- */

.banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--green-deep);
  margin-top: calc(-1 * var(--header-h));
  /* The cap is set just above the tallest natural banner content (breadcrumb,
     rule, title and a two-line kicker) so every interior banner lands on the
     same height on a desktop viewport instead of some being floored and some
     being content-driven. Below the cap, banners size to their content —
     forcing a tall header onto a phone would just waste the screen. */
  min-height: clamp(320px, 38vw, 540px);
  display: flex;
  /* Anchored to the top, not the bottom. Bottom-aligning made the breadcrumb,
     rule and title sit at a different height on every page depending on
     whether that page had a kicker under the title — Resources, which has
     none, dropped the furthest. Anchoring to the top puts them at the same
     y on every page; only the space below varies. */
  align-items: flex-start;
}

.banner--tall { min-height: clamp(460px, 60vw, 680px); }

.banner__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 60% 42%;
  filter: saturate(0.68) brightness(0.92);
}
.banner--coast .banner__photo { background-image: var(--img-coast); }

/* Cliffside green above the Pacific. Positioned low so the green, the cliff
   edge and the water hold the band; the empty sky above is cropped out. */
.banner--programs .banner__photo {
  background-image: var(--img-programs);
  /* Centred on the cliff edge, the green and the water, and pushed right so
     the subject sits where the gradient wash is lightest. */
  background-position: 64% 47%;
  filter: saturate(0.6) brightness(0.86);
}

/* Surf at golden hour. Sits high to keep the breaking wave and the bluff in
   frame rather than the foreground foam. */
.banner--contact .banner__photo {
  background-image: var(--img-contact);
  background-position: 46% 34%;
  filter: saturate(0.66) brightness(0.9);
}

/* The turf shot is square and the emboss sits low-left, so it needs a
   different crop than the landscape banner to keep the logo in frame. */
.banner--turf .banner__photo {
  background-image: var(--img-turf);
  background-position: 62% 62%;
  filter: saturate(0.72) brightness(0.78);
}

.banner__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(14, 33, 26, 0.95) 0%,
      rgba(14, 33, 26, 0.86) 38%,
      rgba(14, 33, 26, 0.5) 72%,
      rgba(14, 33, 26, 0.32) 100%),
    linear-gradient(180deg,
      rgba(14, 33, 26, 0.55) 0%,
      rgba(14, 33, 26, 0) 40%,
      rgba(14, 33, 26, 0.6) 100%);
}

.banner__inner {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--banner-lead)) var(--gutter) clamp(44px, 5.4vw, 76px);
}

@media (min-width: 760px) {
  :root { --banner-lead: 120px; }
}

.banner__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.banner__crumb a { color: rgba(246, 243, 234, 0.62); }
.banner__crumb a:hover { color: var(--gold); }
.banner__crumb span[aria-hidden] { color: rgba(246, 243, 234, 0.3); }
.banner__crumb > span:last-child { color: var(--gold); }

.banner__rule {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--gold);
  margin-bottom: clamp(22px, 2.6vw, 32px);
}

.banner__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 5.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--cream);
  max-width: 20ch;
  text-wrap: balance;
}

.banner__kicker {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  /* Two lines are reserved whether the copy fills them or not, so a one-line
     kicker doesn't shorten its banner relative to a two-line one. */
  min-height: 2.84em;
  max-width: 56ch;
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.42;
  color: rgba(246, 243, 234, 0.72);
  text-wrap: pretty;
}

.banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3.2vw, 40px);
}

/* --------------------------------------------------------------------------
   Prose intro
   -------------------------------------------------------------------------- */

.prose-intro { background: var(--cream); }

.prose-intro__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(48px, 6.4vw, 124px) var(--gutter) clamp(12px, 2vw, 34px);
}

.prose-intro__heading {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--green);
}

.prose-intro__body {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  max-width: 72ch;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.72;
  color: var(--ink-body);
  text-wrap: pretty;
}
.prose-intro__body:last-child { margin-bottom: 0; }

.prose-intro__body--lead {
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 31px);
  line-height: 1.36;
  letter-spacing: -0.018em;
  color: var(--green);
}

.btn--dark {
  margin-top: clamp(18px, 2.4vw, 30px);
  background: var(--green);
  color: var(--cream);
  font-weight: 600;
  transition: background 220ms ease;
}
.btn--dark:hover { background: var(--green-deep); color: var(--cream); }

/* --------------------------------------------------------------------------
   Benefit panels
   -------------------------------------------------------------------------- */

.panels { background: var(--cream); }

.panels__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(44px, 5.4vw, 104px) var(--gutter) clamp(56px, 7vw, 136px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(38px, 4.6vw, 96px);
}

@media (min-width: 760px) {
  .panels__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
  .panels__inner { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

.panel__rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 22px;
}

.panel__heading {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(23px, 2.4vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.016em;
  color: var(--green);
  text-wrap: balance;
}

.panel__lead {
  margin: -8px 0 clamp(14px, 1.6vw, 20px);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.65;
  color: var(--ink-muted);
}

.panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}

.panel__list li {
  position: relative;
  padding: clamp(14px, 1.5vw, 19px) 0 clamp(14px, 1.5vw, 19px) 30px;
  border-bottom: 1px solid var(--line-dark);
  font-size: clamp(16px, 1.4vw, 18.5px);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.panel__list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: clamp(14px, 1.5vw, 19px);
  color: var(--gold);
  font-size: 15px;
  line-height: 1.5;
}

.panels__note {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 7vw, 104px);
}
.panels__note p {
  margin: 0;
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line-dark);
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Closing CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--green);
  position: relative;
  overflow: hidden;
}

.cta-band__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 158px) var(--gutter);
}

.cta-band__rule {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 30px;
}

.cta-band__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 22ch;
  text-wrap: balance;
}

.cta-band__body {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: rgba(246, 243, 234, 0.68);
  text-wrap: pretty;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(30px, 3.6vw, 46px);
}

/* --------------------------------------------------------------------------
   Card index (loan programs, resources)
   -------------------------------------------------------------------------- */

.index { background: var(--cream); }

.index__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(36px, 4.6vw, 88px) var(--gutter) clamp(60px, 8vw, 152px);
}

.index-group + .index-group {
  margin-top: clamp(52px, 6.4vw, 96px);
  padding-top: clamp(52px, 6.4vw, 96px);
  border-top: 1px solid var(--line-dark);
}

.index-group__head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.index-group__head .rule { margin-bottom: 24px; }

.index-group__title {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--green);
}

.index-group__intro {
  margin: 0 0 12px;
  max-width: 70ch;
  font-size: clamp(16px, 1.4vw, 18.5px);
  line-height: 1.72;
  color: var(--ink-body);
  text-wrap: pretty;
}

.index-group__label {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.index-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}

@media (min-width: 700px) {
  .index-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .index-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Hairline grid: cards sit on a 1px background that shows through the gaps,
   so the dividers stay a single pixel regardless of how the rows wrap. */
.index-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  padding: clamp(26px, 2.8vw, 38px);
  color: var(--green);
  transition: background 220ms ease, color 220ms ease;
}
.index-card:hover {
  background: var(--cream-alt);
  color: var(--green);
}
.index-card__link { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.index-card__cta { align-self: flex-start; margin-top: clamp(16px, 1.8vw, 24px); }

.index-card__title {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.18;
  letter-spacing: -0.016em;
  color: var(--green);
  text-wrap: balance;
}

.index-card__body {
  margin: 0 0 12px;
  font-size: clamp(15px, 1.25vw, 16.5px);
  line-height: 1.68;
  color: var(--ink-body);
  text-wrap: pretty;
}

.index-card__more {
  margin-top: auto;
  padding-top: clamp(16px, 1.8vw, 24px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.index-card__more span { transition: transform 220ms ease; display: inline-block; }
.index-card:hover .index-card__more span { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Related programs rail
   -------------------------------------------------------------------------- */

.related {
  background: var(--cream-alt);
  border-top: 1px solid var(--line-dark-soft);
}

.related__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(52px, 6.4vw, 124px) var(--gutter);
}

.related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: clamp(26px, 3vw, 40px);
}
.related__head .rule { flex: 0 0 100%; margin-bottom: 4px; }

.related__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.016em;
  color: var(--green);
}

.related__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(30px, 4.2vw, 104px);
  border-bottom: 1px solid var(--line-dark);
}

.related__grid .program-link { min-height: clamp(56px, 4.6vw, 66px); padding: clamp(12px, 1.4vw, 17px) 0; }
.related__grid .program-link__label { font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -0.014em; }

@media (min-width: 560px) { .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   About — why cards, Ted
   -------------------------------------------------------------------------- */

.why-grid {
  background: var(--cream-alt);
  border-top: 1px solid var(--line-dark-soft);
}

.why-grid__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 152px) var(--gutter);
}

.why-grid__head { margin-bottom: clamp(34px, 4.2vw, 56px); }
.why-grid__head .rule { margin-bottom: 26px; }

.why-grid__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}
@media (min-width: 640px) { .why-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .why-grid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.why-card {
  background: var(--cream-alt);
  padding: clamp(26px, 3vw, 40px);
}

.why-card__title {
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--green);
  text-wrap: balance;
}

.why-card__body {
  margin: 0;
  font-size: clamp(15.5px, 1.3vw, 17px);
  line-height: 1.7;
  color: var(--ink-body);
  text-wrap: pretty;
}

.ted { background: var(--cream); }

.ted__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 158px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 4.6vw, 96px);
  align-items: start;
}

@media (min-width: 900px) {
  .ted__inner { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
  .ted__portrait { position: sticky; top: calc(var(--header-h) + 32px); }
}

.ted__portrait img {
  display: block;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.ted__caption {
  margin-top: clamp(20px, 2.2vw, 28px);
  max-width: 380px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
}

.ted__name {
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.2;
  color: var(--green);
}

.ted__role {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ted__copy .rule { margin-bottom: 26px; }

.ted__heading {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--green);
}

.ted__body {
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  max-width: 64ch;
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.74;
  color: var(--ink-body);
  text-wrap: pretty;
}

.ted__pull {
  margin: clamp(28px, 3.4vw, 44px) 0;
  padding: clamp(24px, 2.8vw, 36px) 0 clamp(24px, 2.8vw, 36px) clamp(24px, 2.8vw, 38px);
  border-left: 1px solid var(--gold);
}
.ted__pull p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: var(--green);
}
.ted__pull p:first-child {
  font-style: italic;
  color: var(--ink-muted);
  font-size: clamp(18px, 1.9vw, 24px);
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Numbered steps on a light ground (submission tips)
   -------------------------------------------------------------------------- */

.steps { background: var(--cream); }

.steps__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 142px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 148px);
  row-gap: clamp(34px, 4vw, 58px);
}

@media (min-width: 720px) { .steps__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.step--light {
  border-top-color: var(--line-dark);
}
.step--light .step__title { color: var(--green); min-height: 0; }
.step--light .step__body { color: var(--ink-body); }

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legal { background: var(--cream); }

.legal__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(52px, 7vw, 128px) var(--gutter) clamp(64px, 9vw, 164px);
}

.legal__effective {
  margin: 0 0 clamp(30px, 3.6vw, 48px);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.legal__body h2 {
  margin: clamp(38px, 4.4vw, 60px) 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(23px, 2.4vw, 31px);
  line-height: 1.18;
  letter-spacing: -0.016em;
  color: var(--green);
  padding-top: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid var(--line-dark);
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal__body p {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-size: clamp(16px, 1.3vw, 17.5px);
  line-height: 1.76;
  color: var(--ink-body);
  text-wrap: pretty;
}

.legal__body ul {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  padding: 0;
  list-style: none;
}
.legal__body li {
  position: relative;
  padding: 7px 0 7px 24px;
  font-size: clamp(16px, 1.3vw, 17.5px);
  line-height: 1.6;
  color: var(--ink-body);
}
.legal__body li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 5px;
  height: 1px;
  background: var(--gold);
}

.legal__contact {
  margin-top: 8px;
  padding: clamp(24px, 2.8vw, 34px);
  background: var(--cream-alt);
  border-left: 1px solid var(--gold);
  font-size: clamp(16px, 1.3vw, 17.5px);
  line-height: 1.9;
  color: var(--ink-body);
}

/* --------------------------------------------------------------------------
   Contact page tweaks
   -------------------------------------------------------------------------- */

.contact__inner--tight { padding-top: clamp(52px, 7vw, 100px); }

.lead-form__heading {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--green);
}

/* --------------------------------------------------------------------------
   Blog index
   -------------------------------------------------------------------------- */

.post-list { background: var(--cream); }

.post-list__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(48px, 6.4vw, 124px) var(--gutter) clamp(60px, 8vw, 152px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border-block: 1px solid var(--line-dark);
}

/* Reused inside the "keep reading" rail, where the section already has its
   own padding. */
.post-list__inner--compact {
  padding: 0;
  max-width: none;
}

@media (min-width: 820px) {
  .post-list__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .post-list__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .post-list__inner--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.post-card { background: var(--cream); }
.post-list__inner--compact .post-card { background: var(--cream-alt); }

.post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(28px, 3.2vw, 44px);
  color: var(--green);
  transition: background 220ms ease;
}
.post-card__link:hover {
  background: var(--cream-alt);
  color: var(--green);
}
.post-list__inner--compact .post-card__link:hover { background: var(--cream); }

.post-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(16px, 1.8vw, 22px);
}
.post-card__tags span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  border: 1px solid rgba(138, 111, 50, 0.28);
  padding: 5px 10px;
}

.post-card__title {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.1vw, 29px);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--green);
  text-wrap: balance;
}

.post-card__excerpt {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 16.5px);
  line-height: 1.68;
  color: var(--ink-body);
  text-wrap: pretty;
}

.post-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: clamp(20px, 2.2vw, 28px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.post-card__foot span[aria-hidden] { color: var(--gold); }

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */

.post { background: var(--cream); }

.post__inner {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 80px) var(--gutter) clamp(56px, 7vw, 96px);
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: clamp(28px, 3.2vw, 40px);
  margin-bottom: clamp(28px, 3.2vw, 40px);
  border-bottom: 1px solid var(--line-dark);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.post__meta span[aria-hidden] { color: var(--gold); }

/* Long-form measure: slightly larger and looser than the rest of the site,
   because these are read rather than scanned. */
.post__body {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.78;
  color: var(--ink-body);
}

.post__body > *:first-child { margin-top: 0; }

.post__body p {
  margin: 0 0 clamp(20px, 2.2vw, 28px);
  text-wrap: pretty;
}

.post__body h2 {
  margin: clamp(44px, 5vw, 68px) 0 clamp(16px, 1.8vw, 22px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(25px, 2.7vw, 36px);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--green);
  text-wrap: balance;
}

.post__body h3 {
  margin: clamp(34px, 3.8vw, 48px) 0 clamp(12px, 1.4vw, 18px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--green);
}

.post__body a {
  color: var(--green);
  box-shadow: inset 0 -1px 0 var(--gold);
  transition: color 200ms ease, box-shadow 200ms ease;
}
.post__body a:hover {
  color: var(--gold-ink);
  box-shadow: inset 0 -2px 0 var(--gold);
}

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

.post__body ul,
.post__body ol {
  margin: 0 0 clamp(20px, 2.2vw, 28px);
  padding: 0;
  list-style: none;
  counter-reset: post-ol;
}

.post__body li {
  position: relative;
  padding: 0 0 12px 30px;
  text-wrap: pretty;
}

.post__body ul > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.82em;
  width: 12px;
  height: 1px;
  background: var(--gold);
}

.post__body ol > li {
  counter-increment: post-ol;
}
.post__body ol > li::before {
  content: counter(post-ol) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--serif);
  color: var(--gold-ink);
}

.post__body blockquote {
  margin: clamp(28px, 3.2vw, 42px) 0;
  padding: clamp(4px, 0.6vw, 8px) 0 clamp(4px, 0.6vw, 8px) clamp(22px, 2.6vw, 34px);
  border-left: 1px solid var(--gold);
}
.post__body blockquote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.36;
  letter-spacing: -0.014em;
  color: var(--green);
}

.post__body hr {
  margin: clamp(38px, 4.4vw, 60px) 0;
  border: 0;
  border-top: 1px solid var(--line-dark);
}

.post__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--cream-alt);
  padding: 2px 6px;
}

/* The closing italic disclaimer some articles end with. */
.post__body em { color: var(--ink-muted); }

.post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(38px, 4.4vw, 56px);
  padding-top: clamp(24px, 2.8vw, 34px);
  border-top: 1px solid var(--line-dark);
}
.post__tags span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  border: 1px solid rgba(138, 111, 50, 0.28);
  padding: 5px 10px;
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

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

  /* Clearing the name stops the marquee outright. The blanket rule below only
     collapses the duration, which would snap it to its end state instead. */
  .hero__ticker-track { animation: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}