/* ============================================================
   Savannah Capital Group — savannahcapitalgroup.com
   Southern heritage meets future finance.
   Ivory paper · moss green · brushed gold.
   ============================================================ */

:root {
  --ivory: #f5f0e6;
  --ivory-2: #efe8d6;
  --paper: #eadfc8;
  --moss: #3d5a3c;
  --moss-deep: #2c4530;
  --moss-dark: #24382a;
  --moss-ink: #1c2b1f;
  --ink: #26311f;
  --ink-soft: #55604a;
  --gold: #b58f3e;
  --gold-bright: #d6b568;
  --gold-pale: #e7d3a1;
  --gold-deep: #8f6f2a;
  --hairline: rgba(143, 111, 42, 0.35);
  --hairline-light: rgba(214, 181, 104, 0.32);
  --serif: 'Playfair Display', 'Georgia', serif;
  --sans: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-lift: 0 18px 40px -18px rgba(38, 49, 31, 0.35);
}

/* ---------- reset / base ---------- */

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

html { scroll-behavior: smooth; }
/* hidden first as a fallback for older engines, clip where supported */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  background: var(--ivory);
  color: var(--ink);
  font: 400 1.0625rem/1.68 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* cinematic paper grain over the whole page — a barely-there tooth that
   kills the "flat digital cream" feel; static, so reduced-motion safe */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

::selection { background: var(--gold-bright); color: var(--moss-ink); }

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

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--moss-ink); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--moss-ink); color: var(--ivory);
  padding: 0.7rem 1.4rem; font-size: 0.85rem; letter-spacing: 0.08em;
}
.skip:focus { left: 0; }

.wrap { width: min(1160px, 92vw); margin-inline: auto; }
.wrap-narrow { width: min(820px, 92vw); margin-inline: auto; }

/* ---------- typographic parts ---------- */

.eyebrow {
  font: 600 0.72rem/1.4 var(--sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.on-moss .eyebrow, .eyebrow.light { color: var(--gold-bright); }

.sec-head { max-width: 720px; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.sec-head.centered { margin-inline: auto; text-align: center; }

.sec-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.15;
  margin-top: 0.85rem;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.on-moss .sec-title { color: var(--ivory); }

.sec-lede { margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.09rem; max-width: 58ch; text-wrap: pretty; }
.sec-head.centered .sec-lede { margin-inline: auto; }
.on-moss .sec-lede { color: rgba(241, 234, 217, 0.78); }

/* the gold rule that draws itself under section titles */
.rule {
  display: block;
  width: 76px; height: 2px;
  margin-top: 1.15rem;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out) 0.35s;
}
.sec-head.centered .rule { margin-inline: auto; transform-origin: center; }
.in .rule, .rule.in { transform: scaleX(1); }

/* drop cap flourish */
.dropcap::first-letter {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.4em;
  line-height: 0.78;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--gold-deep);
}

/* ---------- buttons & links ---------- */

.btn {
  position: relative;
  display: inline-block;
  padding: 1rem 2rem;
  font: 600 0.78rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
              border-color 0.45s, background-position 0.9s var(--ease-out), color 0.45s;
}

.btn-gold {
  color: var(--moss-ink);
  background-image: linear-gradient(105deg,
    #9a7a2e 0%, #c29b45 30%, #ecd28f 48%, #c29b45 66%, #9a7a2e 100%);
  background-size: 240% 100%;
  background-position: 92% 0;
  border-color: rgba(143, 111, 42, 0.4);
}
.btn-gold:hover, .btn-gold:focus-visible {
  background-position: 8% 0;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.btn-ghost {
  color: var(--moss-ink);
  border-color: var(--hairline);
  background-image: linear-gradient(105deg,
    transparent 30%, rgba(214, 181, 104, 0.35) 50%, transparent 70%);
  background-size: 260% 100%;
  background-position: 115% 0;
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: var(--gold);
  background-position: -15% 0;
  transform: translateY(-2px);
}

.btn-ghost-light {
  color: var(--ivory);
  border-color: var(--hairline-light);
  background-image: linear-gradient(105deg,
    transparent 30%, rgba(214, 181, 104, 0.28) 50%, transparent 70%);
  background-size: 260% 100%;
  background-position: 115% 0;
}
.btn-ghost-light:hover, .btn-ghost-light:focus-visible {
  border-color: var(--gold-bright);
  background-position: -15% 0;
  transform: translateY(-2px);
}

/* gold-leaf sweep on inline links */
.a-gold {
  position: relative;
  color: var(--gold-deep);
  font-weight: 600;
  background-image: linear-gradient(100deg,
    transparent 32%, rgba(214, 181, 104, 0.45) 50%, transparent 68%);
  background-size: 300% 100%;
  background-position: 115% 0;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--hairline);
  transition: background-position 0.9s var(--ease-out), border-color 0.4s, color 0.4s;
}
.a-gold:hover, .a-gold:focus-visible {
  background-position: -15% 0;
  border-color: var(--gold);
  color: var(--moss-ink);
}
.on-moss .a-gold { color: var(--gold-bright); border-color: var(--hairline-light); }
.on-moss .a-gold:hover { color: var(--ivory); }

/* ---------- masthead ---------- */

.site-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding-top: clamp(1.2rem, 3vw, 2.2rem);
}
.site-top.solid { position: relative; background: var(--ivory); border-bottom: 1px solid var(--hairline); padding-bottom: 1.4rem; }

.mast { text-align: center; }

.crest {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  color: var(--gold-deep);
}
.crest svg { width: 58px; height: 58px; transition: transform 0.8s var(--ease-out); }
.crest:hover svg { transform: rotate(4deg); }

.wordmark { display: flex; flex-direction: column; align-items: center; gap: 0.18rem; }
.wm-top {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.42rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* optically re-center tracked caps */
  text-transform: uppercase;
  color: var(--moss-ink);
}
.wm-sub {
  font: 600 0.62rem/1 var(--sans);
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.mast-nav {
  margin-top: 1.4rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  background: rgba(245, 240, 230, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.nl {
  position: relative;
  font: 600 0.73rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.35rem 0.1rem;
  background-image: linear-gradient(100deg,
    transparent 32%, rgba(214, 181, 104, 0.45) 50%, transparent 68%);
  background-size: 300% 100%;
  background-position: 115% 0;
  background-repeat: no-repeat;
  transition: background-position 0.9s var(--ease-out), color 0.4s;
}
.nl::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right 0.5s var(--ease-out);
}
.nl:hover, .nl:focus-visible { color: var(--moss-deep); background-position: -15% 0; }
.nl:hover::after, .nl:focus-visible::after { right: 0; }

.nl-apply {
  color: var(--gold-deep);
  border: 1px solid var(--hairline);
  padding: 0.6rem 1.3rem;
}
.nl-apply:hover { border-color: var(--gold); color: var(--moss-ink); }

.menu-btn {
  display: none;
  position: absolute;
  top: clamp(1.2rem, 3vw, 2.2rem);
  right: 4vw;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--moss-ink);
  font: 600 0.68rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.65rem 1.05rem;
  cursor: pointer;
}

/* over the twilight hero (index only — inner pages use .site-top.solid),
   the masthead turns to ivory and lit gold */
.site-top:not(.solid) .crest { color: var(--gold-bright); }
.site-top:not(.solid) .wm-top { color: #f6f0dd; text-shadow: 0 1px 8px rgba(6, 12, 8, 0.55); }
.site-top:not(.solid) .wm-sub { color: var(--gold-bright); text-shadow: 0 1px 6px rgba(6, 12, 8, 0.55); }
.site-top:not(.solid) .mast-nav {
  border-top-color: rgba(214, 181, 104, 0.3);
  border-bottom-color: rgba(214, 181, 104, 0.3);
  background: rgba(10, 20, 12, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.site-top:not(.solid) .nl { color: rgba(241, 234, 217, 0.88); }
.site-top:not(.solid) .nl:hover,
.site-top:not(.solid) .nl:focus-visible { color: var(--gold-bright); }
.site-top:not(.solid) .nl::after { background: var(--gold-bright); }
.site-top:not(.solid) .nl-apply {
  color: var(--gold-bright);
  border-color: rgba(214, 181, 104, 0.45);
}
.site-top:not(.solid) .nl-apply:hover { border-color: var(--gold-bright); color: #fffdf4; }
.site-top:not(.solid) .menu-btn {
  color: var(--ivory);
  border-color: rgba(214, 181, 104, 0.45);
  background: rgba(10, 20, 12, 0.35);
}

/* mobile overlay nav */
.mnav {
  position: fixed; inset: 0; z-index: 120;
  background: linear-gradient(180deg, var(--moss-dark), var(--moss-ink));
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 1.9rem;
  text-align: center;
}
.mnav[hidden] { display: none; }
.mnav a {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  color: var(--ivory);
  letter-spacing: 0.04em;
}
.mnav a:hover { color: var(--gold-bright); }
.mnav .mnav-apply { color: var(--gold-bright); border-bottom: 1px solid var(--hairline-light); padding-bottom: 0.3rem; }
.mnav-close {
  position: absolute; top: 1.6rem; right: 5vw;
  background: none; border: 1px solid var(--hairline-light);
  color: var(--ivory);
  font: 600 0.68rem/1 var(--sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.65rem 1.05rem; cursor: pointer;
}
body.menu-open { overflow: hidden; }

/* sticky mini-bar (appears after the hero) */
.stickybar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 4vw;
  background: rgba(245, 240, 230, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(-102%);
  transition: transform 0.55s var(--ease-out);
}
.stickybar.show { transform: none; }
.sb-brand { display: flex; align-items: center; gap: 0.6rem; color: var(--gold-deep); }
.sb-brand svg { width: 30px; height: 30px; }
.sb-brand span {
  font-family: var(--serif); font-weight: 600;
  font-size: 0.92rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--moss-ink);
}
.sb-apply {
  font: 600 0.7rem/1 var(--sans);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--moss-ink);
  background-image: linear-gradient(105deg, #9a7a2e, #c29b45 35%, #ecd28f 50%, #c29b45 65%, #9a7a2e);
  background-size: 240% 100%; background-position: 92% 0;
  padding: 0.7rem 1.4rem;
  transition: background-position 0.9s var(--ease-out);
}
.sb-apply:hover { background-position: 8% 0; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: max(680px, 100svh);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* An engraved plate border inset into the frame — the convention of a
   printed title page, and the thing that makes the photograph read as
   something the house had made rather than something it found. */
.hero::after {
  content: '';
  position: absolute;
  inset: clamp(14px, 2.2vw, 30px);
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(214, 181, 104, 0.22);
  box-shadow: inset 0 0 0 1px rgba(6, 12, 8, 0.18);
}

.hero-stage { position: absolute; inset: 0; z-index: 0; }
.hero-stage canvas {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  /* The WebGL plate cross-fades in once the photograph has decoded and been
     uploaded. Until then — and forever, if WebGL or the image is unavailable —
     the CSS understudy below is what the visitor sees: the same photograph,
     the same duotone. The fold is never empty and never changes subject. */
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
.hero-stage canvas.is-lit { opacity: 1; }
/* THE UNDERSTUDY.
   The hero's subject is a photograph — the live-oak avenue, moss hanging in
   the canopy, light at the far end of the road. That photograph is present
   from the very first paint, graded here in CSS to the house duotone: moss
   in the shadows, brushed gold in the light. The WebGL plate then cross-fades
   over the top of it and takes over the lighting.

   This is deliberately the SAME image at rest. If WebGL is unavailable, if
   the shader fails to compile, or if the tab never runs a frame, the visitor
   still gets the composed photograph — never a void, never a different
   subject. Stacking order is top layer first. */
.hero-stage {
  background-color: #0a130c;
  background-image:
    /* legibility scrim over the copy column */
    radial-gradient(ellipse 60% 48% at 50% 50%, rgba(6, 12, 8, 0.80), rgba(6, 12, 8, 0.46) 52%, rgba(6, 12, 8, 0) 88%),
    /* masthead band + seat into the section below */
    linear-gradient(180deg, rgba(6, 12, 8, 0.62) 0%, rgba(6, 12, 8, 0) 26%, rgba(6, 12, 8, 0) 84%, rgba(9, 17, 11, 0.72) 100%),
    /* the light at the end of the avenue — kept at the same screen height the
       shader now puts its vanishing point, so the cross-fade does not move it */
    radial-gradient(ellipse 40% 24% at 50% 86%, rgba(228, 192, 118, 0.42), rgba(228, 192, 118, 0) 72%),
    /* hold the plate back so the lit canvas reads as the lights coming up */
    linear-gradient(180deg, rgba(8, 15, 10, 0.46), rgba(8, 15, 10, 0.52)),
    /* the house duotone */
    linear-gradient(148deg, #2c4530 0%, #4a6247 46%, #8f6f2a 100%),
    /* the plate */
    url("img/oak-avenue.webp"),
    linear-gradient(180deg, #0b150d 0%, #152418 45%, #1e3020 80%, #243a26 100%);
  background-size: cover;
  background-position: center center, center center, center center, center center, center center, 50% 42%, center center;
  background-repeat: no-repeat;
  background-blend-mode: normal, normal, screen, normal, color, normal, normal;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(920px, 92vw);
  /* clears the absolutely-positioned masthead (measured 239px tall at 1440) */
  padding: clamp(14.5rem, 27vh, 16.5rem) 0 clamp(3rem, 6.5vh, 4.6rem);
}

.hero h1 {
  font-size: clamp(3.4rem, 7.5vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 1.3rem auto 0;
  max-width: 15ch;
  color: #f6f0dd;
  text-shadow: 0 2px 8px rgba(6, 12, 8, 0.35), 0 18px 70px rgba(6, 12, 8, 0.5);
}
.hero h1 em {
  font-style: italic;
  color: var(--gold-bright);
}

.hero-sub {
  margin: 1.7rem auto 0;
  max-width: 54ch;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: rgba(238, 231, 212, 0.82);
  text-shadow: 0 1px 6px rgba(6, 12, 8, 0.4);
}

.hero-cta {
  margin-top: 2.6rem;
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.hero .btn-ghost {
  color: var(--ivory);
  border-color: rgba(214, 181, 104, 0.45);
}
.hero .btn-ghost:hover, .hero .btn-ghost:focus-visible {
  border-color: var(--gold-bright);
  color: #fffdf4;
}

.hero-note {
  margin-top: 2.4rem;
  font: 600 0.7rem/1.7 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-bright);
  /* this line sits over the brightest part of the road; a tight dark halo as
     well as the soft one is what keeps tracked gold caps readable there */
  text-shadow: 0 1px 2px rgba(6, 12, 8, 0.85), 0 2px 12px rgba(6, 12, 8, 0.7);
}
.hero .eyebrow {
  color: var(--gold-bright);
  text-shadow: 0 1px 6px rgba(6, 12, 8, 0.5);
}

/* SHORT VIEWPORTS: close the plate border inside the fold.
   .hero is min-height 100svh, but its CONTENT was taller than that on a
   laptop — measured 996.7px in a 900px viewport — which pushed .hero-note
   and, worse, the bottom edge of the engraved ::after border below the fold.
   The printed-title-page conceit then reads as an open-bottomed, three-sided
   frame, i.e. as a bug. Nothing here changes the composition; the stack just
   stops assuming 900+ vertical pixels of room it does not have. */
@media (min-width: 900px) and (max-height: 940px) {
  /* the masthead is the largest single claim on the fold — measured 239px of
     a 900px viewport — so it gives back first, in proportion */
  .site-top { padding-top: 1.2rem; }
  .crest { gap: 0.45rem; }
  .crest svg { width: 44px; height: 44px; }
  .mast-nav { margin-top: 0.95rem; padding: 0.65rem 0; }

  .hero-inner { padding-top: clamp(13rem, 25vh, 15.5rem); padding-bottom: clamp(2.4rem, 5vh, 3.6rem); }
  .hero h1 { font-size: clamp(3.2rem, 6.1vw, 5.2rem); }
  .hero-sub { margin-top: 1.35rem; }
  .hero-cta { margin-top: 1.9rem; }
  .hero-note { margin-top: 1.5rem; }
}

/* staged hero entrance */
.hero-inner > * { opacity: 0; transform: translateY(22px); animation: heroUp 1.2s var(--ease-out) forwards; }
.hero-inner > *:nth-child(1) { animation-delay: 0.15s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.3s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.5s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.68s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.85s; }
@keyframes heroUp { to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */

.section {
  position: relative;
  padding: clamp(4.5rem, 10vw, 7.5rem) 0;
  overflow: hidden;
  /* no flat cream expanses: every ivory section carries warm light in one
     corner and a whisper of moss in the other */
  background:
    radial-gradient(110% 70% at 12% -5%, rgba(214, 181, 104, 0.16), transparent 55%),
    radial-gradient(90% 60% at 95% 105%, rgba(61, 90, 60, 0.1), transparent 60%),
    linear-gradient(180deg, #f6f1e7 0%, #f1ebdd 100%);
}

.on-moss {
  background:
    radial-gradient(120% 80% at 50% -15%, rgba(214, 181, 104, 0.16), transparent 55%),
    radial-gradient(110% 75% at 50% 115%, rgba(20, 32, 22, 0.5), transparent 70%),
    linear-gradient(180deg, var(--moss-deep) 0%, var(--moss-dark) 100%);
  color: rgba(241, 234, 217, 0.88);
}
.on-moss h2, .on-moss h3 { color: var(--ivory); }

.section-paper {
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(214, 181, 104, 0.2), transparent 55%),
    radial-gradient(90% 60% at 8% 108%, rgba(61, 90, 60, 0.09), transparent 60%),
    linear-gradient(180deg, var(--ivory-2) 0%, #e8ddc4 100%);
}

/* faint parallax branch motif inside sections */
.motif {
  position: absolute;
  pointer-events: none;
  color: var(--gold-deep);
  opacity: 0.13;
  z-index: 0;
  will-change: transform;
}
.on-moss .motif { color: var(--gold-bright); opacity: 0.11; }
.motif svg { width: 100%; height: 100%; }
.motif-tr { top: -60px; right: -110px; width: clamp(280px, 34vw, 520px); }
.motif-bl { bottom: -80px; left: -120px; width: clamp(280px, 34vw, 520px); transform: scaleX(-1); }

.section > .wrap, .section > .wrap-narrow { position: relative; z-index: 1; }

/* ---------- manifesto ---------- */

.manifesto {
  text-align: center;
  padding-top: clamp(5rem, 12vw, 8.5rem);
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(232, 202, 124, 0.26), transparent 62%),
    radial-gradient(90% 60% at 95% 105%, rgba(61, 90, 60, 0.1), transparent 60%),
    linear-gradient(180deg, #f4eee1 0%, #f2ecdf 100%);
}
.manifesto-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  line-height: 1.3;
  color: var(--moss-deep);
  max-width: 22ch;
  margin: 1.2rem auto 0;
}
.manifesto-line em { font-style: italic; color: var(--gold-deep); }
.manifesto-body {
  margin: 2.4rem auto 0;
  max-width: 60ch;
  text-align: left;
  color: var(--ink-soft);
  font-size: 1.09rem;
}

/* ---------- products ledger ---------- */

.ledger {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2.5rem, 6vw, 5rem);
}

.ledger-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.3rem;
  padding: 1.9rem 0.4rem 1.9rem 0;
  border-top: 1px solid var(--hairline-light);
  transition: background-color 0.5s, transform 0.5s var(--ease-out);
}
.ledger-item:hover { background-color: rgba(214, 181, 104, 0.05); transform: translateX(4px); }

.ledger-no {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: 0.12em;
  padding-top: 0.3rem;
  white-space: nowrap;
}

.ledger-item h3 { font-size: 1.28rem; line-height: 1.25; }
.ledger-item p { margin-top: 0.55rem; font-size: 0.99rem; color: rgba(241, 234, 217, 0.72); }
.ledger-meta {
  margin-top: 0.85rem;
  font: 600 0.68rem/1.6 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

/* ---------- process timeline ---------- */

.tl { list-style: none; position: relative; max-width: 900px; margin-inline: auto; }
.tl::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
  background: linear-gradient(180deg, transparent, var(--gold) 8%, var(--gold) 92%, transparent);
  opacity: 0.55;
}

.tl-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 1.6rem 0; }

.tl-node {
  position: absolute;
  top: 1.85rem; left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--ivory);
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--gold-deep);
  box-shadow: 0 0 0 8px var(--ivory);
  z-index: 2;
}

.tl-body { padding: 0 clamp(3rem, 7vw, 4.6rem); }
.tl-item:nth-child(odd) .tl-body { grid-column: 1; text-align: right; }
.tl-item:nth-child(even) .tl-body { grid-column: 2; text-align: left; }

.tl-body h3 { font-size: 1.42rem; }
.tl-body p { margin-top: 0.5rem; color: var(--ink-soft); font-size: 1rem; max-width: 40ch; }
.tl-item:nth-child(odd) .tl-body p { margin-left: auto; }

.tl-kicker {
  display: block;
  font: 600 0.64rem/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.55rem;
}

/* ---------- why savannah (framed facts) ---------- */

.framed {
  position: relative;
  border: 1px solid rgba(214, 181, 104, 0.5);
  padding: clamp(2.2rem, 6vw, 4rem);
}
.framed::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(214, 181, 104, 0.25);
  pointer-events: none;
}

.why-line {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.45;
  color: var(--ivory);
  max-width: 34ch;
}
.why-line strong { color: var(--gold-bright); font-weight: 600; }

.facts {
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.6rem;
  border-top: 1px solid var(--hairline-light);
  padding-top: clamp(1.8rem, 4vw, 2.6rem);
}

.fact-val {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--gold-bright);
  line-height: 1.1;
}
.fact-label {
  margin-top: 0.55rem;
  font: 600 0.67rem/1.55 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(241, 234, 217, 0.68);
}

.why-note { margin-top: 2.2rem; color: rgba(241, 234, 217, 0.75); max-width: 68ch; font-size: 1.02rem; }

/* ---------- industries ---------- */

.ind-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.ind-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.ind {
  border: 1px solid var(--hairline);
  padding: 1.7rem 1.5rem 1.8rem;
  background: rgba(255, 253, 247, 0.45);
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out), border-color 0.4s;
}
.ind:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold);
}
.ind h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--moss-deep);
}
.ind h3::after {
  content: '';
  display: block;
  width: 26px; height: 1px;
  margin-top: 0.7rem;
  background: var(--gold);
}
.ind p { margin-top: 0.85rem; font-size: 0.94rem; color: var(--ink-soft); line-height: 1.55; }

/* ---------- faq ---------- */

.faq-list { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--hairline); }

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

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.5rem 0.2rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--moss-ink);
  transition: color 0.4s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-deep); }

.faq-x {
  flex: none;
  position: relative;
  width: 14px; height: 14px;
  margin-top: 0.2rem;
}
.faq-x::before, .faq-x::after {
  content: '';
  position: absolute;
  background: var(--gold-deep);
  transition: transform 0.5s var(--ease-out);
}
.faq-x::before { left: 0; right: 0; top: 6.5px; height: 1px; }
.faq-x::after { top: 0; bottom: 0; left: 6.5px; width: 1px; }
.faq[open] .faq-x::after { transform: scaleY(0); }
.faq[open] .faq-x::before { transform: rotate(180deg); }

.faq-a { padding: 0 2.6rem 1.7rem 0.2rem; color: var(--ink-soft); max-width: 68ch; }
.faq-a p + p { margin-top: 0.8rem; }

/* ---------- cta band ---------- */

.cta-band {
  position: relative;
  text-align: center;
  padding: clamp(5rem, 11vw, 8rem) 0;
  background:
    radial-gradient(ellipse 70% 90% at 50% 118%, rgba(214, 181, 104, 0.24), transparent 62%),
    radial-gradient(ellipse 55% 45% at 50% -5%, rgba(214, 181, 104, 0.1), transparent 60%),
    linear-gradient(180deg, var(--moss-dark), var(--moss-ink));
  color: rgba(241, 234, 217, 0.85);
  overflow: hidden;
}
.cta-band h2 {
  color: var(--ivory);
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  margin-top: 0.9rem;
}
.cta-band p.cta-sub { margin: 1.2rem auto 0; max-width: 46ch; }
.cta-actions { margin-top: 2.5rem; display: flex; justify-content: center; gap: 1.1rem; flex-wrap: wrap; }
.cta-tel { margin-top: 1.9rem; font-size: 0.95rem; color: rgba(241, 234, 217, 0.7); }

/* ---------- footer ---------- */

.footer {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(214, 181, 104, 0.09), transparent 60%),
    var(--moss-ink);
  color: rgba(241, 234, 217, 0.72);
  padding: clamp(3.5rem, 7vw, 5rem) 0 2.5rem;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.8rem;
  padding-bottom: 2.8rem;
  border-bottom: 1px solid rgba(214, 181, 104, 0.2);
}

.f-brand .crest { color: var(--gold-bright); }
.f-brand .crest svg { width: 44px; height: 44px; }
.f-brand .crest { flex-direction: row; gap: 0.9rem; align-items: center; }
.f-brand .wordmark { align-items: flex-start; }
.f-brand .wm-top { color: var(--ivory); font-size: 1.02rem; letter-spacing: 0.24em; text-indent: 0; }
.f-brand .wm-sub { text-indent: 0; letter-spacing: 0.4em; color: var(--gold-bright); }
.f-tag { margin-top: 1.2rem; font-family: var(--serif); font-style: italic; color: rgba(241, 234, 217, 0.6); }

.f-head {
  font: 600 0.68rem/1 var(--sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1.2rem;
}
.f-col ul { list-style: none; }
.f-col li + li { margin-top: 0.55rem; }
.f-col a { color: rgba(241, 234, 217, 0.72); transition: color 0.35s; }
.f-col a:hover { color: var(--gold-bright); }

.f-contact address { font-style: normal; line-height: 1.8; }
.f-contact a { color: rgba(241, 234, 217, 0.85); }
.f-contact a:hover { color: var(--gold-bright); }

.disclosure {
  margin-top: 2.4rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(241, 234, 217, 0.55);
  max-width: 90ch;
}
.disclosure strong { color: rgba(241, 234, 217, 0.8); }

.f-bottom {
  margin-top: 1.8rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: rgba(241, 234, 217, 0.45);
}
.f-bottom a { color: rgba(241, 234, 217, 0.6); }
.f-bottom a:hover { color: var(--gold-bright); }

/* ---------- inner pages (apply / legal) ---------- */

.page-head {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-top: 1rem; line-height: 1.12; }
.page-head .sec-lede { margin-inline: auto; }

.prose { padding-bottom: clamp(4rem, 9vw, 6.5rem); }
.prose h2 {
  font-size: 1.45rem;
  margin: 2.6rem 0 0.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
}
.prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1rem; }
.prose p { margin-top: 0.9rem; color: var(--ink-soft); }
.prose ul { margin: 0.9rem 0 0 1.3rem; color: var(--ink-soft); }
.prose li + li { margin-top: 0.4rem; }
.prose .updated {
  font: 600 0.7rem/1 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---------- apply page ---------- */

.apply-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
  padding-bottom: clamp(4rem, 9vw, 6.5rem);
}

.apply-pitch h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); line-height: 1.12; margin-top: 1rem; }
.apply-pitch .sec-lede { margin-top: 1.3rem; }

.apply-points { list-style: none; margin-top: 2.2rem; border-top: 1px solid var(--hairline); }
.apply-points li {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 1.05rem 0.2rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.apply-points .pt {
  font-family: var(--serif); font-weight: 600;
  color: var(--gold-deep); white-space: nowrap; font-size: 1rem;
}

.next-steps { margin-top: 2.6rem; }
.next-steps h2 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.next-steps ol { list-style: none; counter-reset: nstep; }
.next-steps li { counter-increment: nstep; display: flex; gap: 1rem; padding: 0.7rem 0; color: var(--ink-soft); }
.next-steps li::before {
  content: counter(nstep, upper-roman);
  font-family: var(--serif);
  font-weight: 600;
  color: var(--gold-deep);
  flex: none;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  font-size: 0.85rem;
}

/* the form */
.form-frame { background: rgba(255, 253, 247, 0.55); }

.apply-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem 1.2rem; }

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field-full { grid-column: 1 / -1; }

.field label {
  font: 600 0.68rem/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss-deep);
}
.field label .req { color: var(--gold-deep); }

.field input,
.field select,
.field textarea {
  font: 400 1rem/1.5 var(--sans);
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--hairline);
  padding: 0.85rem 1rem;
  border-radius: 0;
  width: 100%;
  transition: border-color 0.35s, box-shadow 0.35s, background-color 0.35s;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 116px; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238f6f2a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(181, 143, 62, 0.18);
  background: #fffdf7;
}

.apply-form.attempted input:invalid,
.apply-form.attempted select:invalid {
  border-color: #a3502e;
  box-shadow: 0 0 0 3px rgba(163, 80, 46, 0.12);
}
.form-error {
  grid-column: 1 / -1;
  display: none;
  font-size: 0.92rem;
  color: #a3502e;
}
.apply-form.attempted.has-errors .form-error { display: block; }

/* per-field guidance: what happened and how to fix it, next to the field */
.f-err {
  display: none;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #a3502e;
}
.apply-form.attempted input:invalid ~ .f-err,
.apply-form.attempted select:invalid ~ .f-err,
.apply-form.attempted textarea:invalid ~ .f-err { display: block; }

.form-submit { grid-column: 1 / -1; margin-top: 0.4rem; }
.form-submit .btn { width: 100%; padding: 1.15rem 2rem; }
.form-fine {
  grid-column: 1 / -1;
  font-size: 0.83rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* honeypot — invisible to humans, present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-success { text-align: center; padding: clamp(2rem, 5vw, 3rem) 1rem; }
.form-success[hidden] { display: none; }
.form-success .seal {
  width: 66px; height: 66px;
  margin: 0 auto 1.4rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold-deep);
}
.form-success h2 { font-size: 1.7rem; }
.form-success p { margin-top: 0.9rem; color: var(--ink-soft); max-width: 44ch; margin-inline: auto; }

/* ---------- photography: moss-and-gold duotone ----------
   Photographs are stored desaturated; the brand tint is laid over them
   here so the imagery reads as the house's world — moss shadows,
   gold light — never as stock color dropped onto the page. */

.photo-band {
  position: relative;
  overflow: hidden;
  height: clamp(240px, 38vw, 440px);
  background: var(--moss-dark);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.94) contrast(1.03);
}
/* the duotone wash: moss in the shadows, brushed gold in the light */
.photo-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, var(--moss-deep) 0%, #4a6247 45%, var(--gold-deep) 100%);
  mix-blend-mode: color;
  pointer-events: none;
}
/* depth + warmth: a gold breath at the crown, moss settling at the edges */
.photo-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(90% 75% at 50% 32%, rgba(214, 181, 104, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(28, 43, 31, 0.44) 0%, rgba(28, 43, 31, 0.1) 42%, rgba(28, 43, 31, 0.52) 100%);
  pointer-events: none;
}

/* photograph beneath a moss section — heavy scrim keeps AA contrast */
.photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.85) contrast(1.05);
}
.photo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--moss-deep), var(--gold-deep));
  mix-blend-mode: color;
}
.photo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% -15%, rgba(214, 181, 104, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(44, 69, 48, 0.9) 0%, rgba(36, 56, 42, 0.93) 100%);
}

/* ---------- reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }
.reveal.d4 { transition-delay: 0.4s; }

.no-js .reveal { opacity: 1; transform: none; }
.no-js .rule { transform: scaleX(1); }

/* ---------- responsive ---------- */

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

@media (max-width: 768px) {
  .mast-nav { display: none; }
  .menu-btn { display: block; }

  .photo-band { height: clamp(200px, 52vw, 300px); }

  .hero { min-height: max(640px, 100svh); }
  .hero-inner { padding-top: clamp(10rem, 22vh, 12.5rem); }
  .hero h1 { max-width: 12ch; }

  .ledger { grid-template-columns: 1fr; }

  .tl::before { left: 26px; }
  .tl-item { grid-template-columns: 1fr; }
  .tl-node { left: 26px; width: 44px; height: 44px; font-size: 0.92rem; }
  .tl-body,
  .tl-item:nth-child(odd) .tl-body,
  .tl-item:nth-child(even) .tl-body {
    grid-column: 1;
    text-align: left;
    padding: 0 0 0 4.6rem;
  }
  .tl-item:nth-child(odd) .tl-body p { margin-left: 0; }

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

  .ind-grid, .ind-grid.cols-3 { grid-template-columns: 1fr; }
  .ind { min-width: 0; }

  .apply-layout { grid-template-columns: 1fr; }
  .apply-form { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .stickybar .sb-brand span { display: none; }
}

/* ---------- reduced motion: stillness with dignity ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .hero-inner > * { opacity: 1; transform: none; animation: none; }
  .reveal { opacity: 1; transform: none; }
  .rule { transform: scaleX(1); }
  .motif { transform: none !important; }
}

/* ---------- inline icon set (lucide) — engraved hairline marks ---------- */

.lci {
  width: 21px; height: 21px;
  display: block;
  flex: none;
  stroke-width: 1.5;
  color: var(--gold-deep);
}
.on-moss .lci { color: var(--gold-bright); }
.ledger-no .lci { width: 19px; height: 19px; margin-top: 0.7rem; }
.ind .lci { margin-bottom: 1rem; }
.fact .lci { width: 19px; height: 19px; margin-bottom: 0.85rem; }
.tl-kicker .lci { display: inline-block; width: 15px; height: 15px; vertical-align: -0.3em; margin-right: 0.5rem; }

/* ============================================================
   Correspondence — the house writes letters.
   Letter measure, letterhead rules, hanging numerals, postscript.
   ============================================================ */

.wrap-letter { width: min(720px, 92vw); margin-inline: auto; position: relative; z-index: 1; }

.letter { position: relative; }

.letter-head {
  text-align: center;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--hairline);
  position: relative;
}
.letter-head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--hairline);
}
.lh-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss-ink);
}
.lh-line {
  margin-top: 0.6rem;
  font: 600 0.66rem/1.5 var(--sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.letter-meta {
  margin-top: 2rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.letter-meta p { font-size: 0.98rem; color: var(--ink); }
.letter-meta p span {
  display: inline-block;
  width: 3.2rem;
  font: 600 0.68rem/1.6 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.letter-open { margin-top: 2.1rem; color: var(--ink-soft); font-size: 1.06rem; max-width: 62ch; text-wrap: pretty; }

.letter-steps { list-style: none; margin-top: 2.4rem; }
.letter-steps li {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 0 1rem;
  padding: 1.25rem 0;
}
.letter-steps li + li { border-top: 1px solid rgba(143, 111, 42, 0.16); }
.ls-no {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--gold-deep);
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-align: right;
  padding-right: 0.4rem;
}
.ls-body h3 { font-size: 1.3rem; line-height: 1.25; }
.ls-body p { margin-top: 0.4rem; color: var(--ink-soft); font-size: 1rem; max-width: 52ch; }

.letter-sign {
  margin-top: 2.6rem;
  text-align: right;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}
.letter-signature {
  display: inline-block;
  margin-top: 0.3rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--moss-deep);
}

.letter-ps {
  margin-top: 2.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: 62ch;
}
.letter-ps strong { font-family: var(--serif); color: var(--gold-deep); letter-spacing: 0.06em; }

/* the cc: register — a letter's distribution list */
.cc-list { list-style: none; margin-top: 0.5rem; border-top: 1px solid var(--hairline); }
.cc-list li {
  display: grid;
  grid-template-columns: 3rem minmax(15rem, 17rem) 1fr;
  gap: 0 1.2rem;
  align-items: baseline;
  padding: 1.15rem 0.2rem;
  border-bottom: 1px solid var(--hairline);
}
.cc-tag {
  font: 600 0.68rem/1.6 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.cc-name {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font: 600 0.78rem/1.4 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss-deep);
}
.cc-name .lci { width: 18px; height: 18px; }
.cc-list p { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; max-width: 46ch; }

/* the enclosures — services enclosed with the file */
.encl-list { list-style: none; margin-top: 0.5rem; border-top: 1px solid var(--hairline); }
.encl-list li {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0 1.2rem;
  padding: 1.15rem 0.2rem;
  border-bottom: 1px solid var(--hairline);
}
.encl-no {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold-deep);
  letter-spacing: 0.1em;
  padding-top: 0.15rem;
  white-space: nowrap;
}
.encl-list h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--moss-deep);
}
.encl-list h3 .lci { width: 18px; height: 18px; margin: 0; }
.encl-list p { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; max-width: 56ch; }

/* the postscript CTA */
.cta-ps {
  margin: 2.2rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline-light);
  max-width: 52ch;
  font-size: 0.98rem;
  color: rgba(241, 234, 217, 0.75);
}
.cta-ps strong { font-family: var(--serif); color: var(--gold-bright); letter-spacing: 0.06em; }

@media (max-width: 768px) {
  .letter-steps li { grid-template-columns: 2.6rem 1fr; }
  .ls-no { text-align: left; padding-right: 0; }
  .cc-list li { grid-template-columns: 2.4rem 1fr; grid-template-rows: auto auto; }
  .cc-list p { grid-column: 2; margin-top: 0.45rem; }
  .encl-list li { grid-template-columns: 1fr; }
  .encl-list h3 { margin-top: 0.2rem; }
}

/* ============================================================
   The application — five steps at a private desk.
   ============================================================ */

.apply-main { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4.5rem, 10vw, 7.5rem); }

.apply-head { text-align: center; max-width: 660px; margin-inline: auto; }
.apply-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); line-height: 1.1; margin-top: 1.1rem; text-wrap: balance; }
.apply-head .sec-lede { margin-top: 1.15rem; margin-inline: auto; }

.apply-desk {
  width: min(760px, 92vw);
  margin: clamp(2.6rem, 6vw, 3.8rem) auto 0;
}

/* progress */
.app-progress { margin-bottom: 2.2rem; }
.app-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font: 600 0.71rem/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.app-progress-label .apl-step { color: var(--ink-soft); }
.app-progress-track {
  margin-top: 0.8rem;
  height: 1px;
  background: rgba(143, 111, 42, 0.18);
  position: relative;
}
.app-progress-fill {
  position: absolute; left: 0; top: 0; bottom: -0.5px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  width: 20%;
  transition: width 0.45s var(--ease-out);
}

/* the desk frame — the house's double-ruled frame */
.app-frame {
  position: relative;
  border: 1px solid rgba(214, 181, 104, 0.5);
  background: rgba(255, 253, 247, 0.55);
  padding: clamp(1.8rem, 5vw, 3.4rem);
}
.app-frame::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(214, 181, 104, 0.25);
  pointer-events: none;
}
.app-frame > * { position: relative; }

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

.app-step-head { margin-bottom: 2rem; }
.app-step-head h2 { font-size: clamp(1.45rem, 2.6vw, 1.8rem); line-height: 1.2; }
.app-step-head p { margin-top: 0.6rem; color: var(--ink-soft); font-size: 0.98rem; }

/* fields */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.4rem; }
.fgrid .field { min-width: 0; }
.field .opt { color: var(--ink-soft); font-weight: 400; letter-spacing: 0.06em; text-transform: none; }
.field input:disabled { opacity: 0.45; background: var(--ivory-2); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: #a3502e;
  box-shadow: 0 0 0 3px rgba(163, 80, 46, 0.1);
}
.f-err.show { display: block; }
.field input { min-height: 48px; }

/* yes / no */
.yn { border: 0; display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.yn > legend {
  font: 600 0.68rem/1.45 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss-deep);
  margin-bottom: 0.55rem;
}
.yn-opts { display: flex; gap: 0.6rem; }
.yn-opts label { flex: 1; position: relative; display: block; cursor: pointer; }
.yn-opts input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  left: 0; top: 0;
  cursor: pointer;
}
.yn-opts span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--hairline);
  background: var(--ivory);
  font: 600 0.78rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}
.yn-opts input:checked + span {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: #fffdf7;
  box-shadow: inset 0 0 0 1px var(--gold);
}
.yn-opts input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.yn.invalid .yn-opts span { border-color: #a3502e; }

/* checkbox line (no website) */
.checkline { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; padding: 0.2rem 0; }
.checkline input {
  width: 19px; height: 19px;
  flex: none;
  accent-color: var(--gold);
  cursor: pointer;
}
.checkline span { font-size: 0.92rem; color: var(--ink-soft); letter-spacing: 0.02em; text-transform: none; font-weight: 400; }

/* documents */
.dz {
  border: 1px dashed var(--hairline);
  background: var(--ivory);
  padding: 1.8rem 1.6rem;
  text-align: center;
  transition: border-color 0.3s, background-color 0.3s;
}
.dz.dragover { border-color: var(--gold); background: #fffdf7; }
.dz-title {
  font: 600 0.72rem/1.5 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--moss-deep);
}
.dz-hint { margin-top: 0.55rem; font-size: 0.88rem; color: var(--ink-soft); }
.dz-browse {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--gold-deep);
  font: 600 0.88rem/1.3 var(--sans);
  cursor: pointer;
  padding: 0 0 1px;
}
.dz-browse:hover { color: var(--moss-ink); border-color: var(--gold); }

.dz-chips { list-style: none; margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; text-align: left; }
.dz-chips:empty { margin-top: 0; }
.dz-chip {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid rgba(143, 111, 42, 0.2);
  background: rgba(255, 253, 247, 0.75);
  padding: 0.55rem 0.7rem 0.55rem 0.95rem;
  font-size: 0.88rem;
  color: var(--ink);
}
.dz-chip .chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-chip .chip-size { color: var(--ink-soft); font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip-x {
  flex: none;
  width: 30px; height: 30px;
  background: none;
  border: 1px solid rgba(143, 111, 42, 0.25);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.chip-x:hover { color: #a3502e; border-color: #a3502e; }

.doc-note { margin-top: 1.3rem; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.55; }

/* signature */
.consent-line {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
  border-top: 1px solid rgba(143, 111, 42, 0.18);
  padding-top: 1.4rem;
  margin-top: 0.4rem;
}

.sig-wrap { margin-top: 1.4rem; }
.sig-pad {
  position: relative;
  border: 1px solid var(--hairline);
  background: #fffdf7;
  cursor: crosshair;
}
.sig-pad canvas { width: 100%; height: 180px; touch-action: none; display: block; }
.sig-pad::after {
  content: '';
  position: absolute;
  left: 1.2rem; right: 1.2rem; bottom: 2.2rem;
  height: 1px;
  background: var(--hairline);
  pointer-events: none;
}
.sig-x-mark {
  position: absolute;
  left: 1.2rem; bottom: 2.6rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  opacity: 0.7;
  pointer-events: none;
  font-size: 1rem;
}
.sig-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.7rem;
}
.sig-label { font-size: 0.82rem; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.sig-clear {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  font: 600 0.68rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.sig-clear:hover { color: var(--moss-ink); border-color: var(--gold); }

/* review */
.review {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1.6rem;
  font-size: 0.95rem;
  border-top: 1px solid rgba(143, 111, 42, 0.18);
  border-bottom: 1px solid rgba(143, 111, 42, 0.18);
  padding: 1.4rem 0.2rem;
  margin-bottom: 1.6rem;
}
.review dt {
  font: 600 0.68rem/1.8 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.review dd { color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* step nav */
.app-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.4rem;
  border-top: 1px solid rgba(143, 111, 42, 0.18);
  padding-top: 1.8rem;
}
.app-nav .btn { min-height: 48px; }
.btn-back { visibility: hidden; }
.btn-back.on { visibility: visible; }
.btn[disabled] { opacity: 0.55; cursor: default; }

.app-error {
  display: none;
  margin-top: 1.4rem;
  font-size: 0.93rem;
  color: #a3502e;
}
.app-error.show { display: block; }

.app-fine {
  margin-top: 1.6rem;
  font-size: 0.83rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---------- secure application link layer ---------- */

/* trust panel — a plate of assurances above the desk */
.trust-panel {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid rgba(143, 111, 42, 0.18);
  padding: 1.3rem 0 1.2rem;
  margin-bottom: 2.2rem;
}
.trust-title {
  font: 600 0.71rem/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.trust-list {
  list-style: none;
  margin-top: 0.85rem;
  display: grid;
  gap: 0.5rem;
}
.trust-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.trust-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 1px;
  background: var(--gold);
}
.trust-foot {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* restored-progress note — built by script only when it applies */
.resume-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid var(--hairline);
  background: #fffdf7;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.6rem;
}
.resume-note p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.resume-note-x {
  flex: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--gold-deep);
  font: 600 0.78rem/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 0 1px;
}
.resume-note-x:hover { color: var(--moss-ink); border-color: var(--gold); }

/* contact consent */
.consent-block {
  margin-top: 1.2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(143, 111, 42, 0.22);
  background: rgba(234, 223, 200, 0.28);
}
.consent-check { align-items: flex-start; }
.consent-check input { margin-top: 0.22rem; }
.consent-check span { line-height: 1.55; }
.consent-fine {
  margin-top: 0.6rem;
  padding-left: 1.6rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.consent-block .f-err { margin-top: 0.6rem; padding-left: 1.6rem; }

@media (max-width: 640px) {
  .fgrid { grid-template-columns: 1fr; }
  .resume-note { flex-direction: column; gap: 0.7rem; align-items: flex-start; }
  .consent-fine, .consent-block .f-err { padding-left: 0; }
}

/* ============================================================
   Motion layer — the page as a document being set and then lit.

   Every animated start-state below is gated behind .mo-on, a class that
   motion.js sets on <html> only after it has confirmed the visitor has not
   asked for reduced motion. With JS disabled, with motion.js failing to
   parse, or under prefers-reduced-motion, none of these selectors match and
   every element renders in its final, fully visible state. Nothing on this
   page can be trapped in a hidden start position by a script that never ran.

   Note also that nothing here animates opacity or transform on an element
   that already carries .reveal — main.js owns those. This layer animates
   children and pseudo-elements instead, so the two never fight.
   ============================================================ */

/* ---- words rise into place, the way type drops into a stick ---- */
.mo-on .moWord {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for Playfair's italic overhang and descenders, pulled back out of
     the layout so word spacing is unchanged */
  padding: 0.02em 0.05em 0.1em;
  margin: -0.02em -0.05em -0.1em;
}
.mo-on .moWordIn {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}
.mo-on .moIn .moWordIn { transform: none; }

/* ---- the plates: a curtain drawn down off a photograph ---- */
.mo-on .moPlate {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mo-on .moPlate.moIn { clip-path: inset(0 0 0 0); }

/* ---- the framed panel: the inner hairline box draws itself ---- */
.mo-on .moFrame::before {
  opacity: 0;
  transform: scale(0.965);
  transition: opacity 0.9s var(--ease-out) 0.25s, transform 1.2s var(--ease-out) 0.25s;
}
.mo-on .moFrame.moIn::before { opacity: 1; transform: none; }

/* ---- the ledger: a gold hairline rules across before the entry reads ---- */
.mo-on .moRule { position: relative; }
.mo-on .moRule::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-bright), rgba(214, 181, 104, 0.15));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.05s var(--ease-out) var(--moD, 0ms);
  pointer-events: none;
}
.mo-on .moRule.moIn::before { transform: scaleX(1); }

/* ---- the letter: each hanging numeral inks in from the margin ---- */
.mo-on .moStep .ls-no {
  display: inline-block;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.75s var(--ease-out) var(--moD, 0ms),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--moD, 0ms);
}
.mo-on .moStep.moIn .ls-no { opacity: 1; transform: none; }

/* ---- forced reveal: land on the finished frame, do not replay ----
   The unconditional 2.5s failsafe in motion.js marks anything it has to force
   with .moSnap. Without this, a tab that loaded in the background would wipe
   every plate and rise every heading simultaneously the instant it is fronted
   — on a page the visitor may already have scrolled. !important is required
   here: it is what overrides the per-word inline transition-delay. */
.mo-on .moSnap.moPlate,
.mo-on .moSnap .moWordIn,
.mo-on .moSnap .ls-no,
.mo-on .moSnap.moFrame::before,
.mo-on .moSnap.moRule::before { transition: none !important; }

/* ---- scroll progress: a hairline of gold leaf across the top ---- */
.moBar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 95;
  pointer-events: none;
  background: rgba(28, 43, 31, 0.14);
}
.moBar i {
  display: block;
  height: 100%; width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright) 60%, var(--gold-pale));
  transition: transform 0.12s linear;
}

/* ---- magnetic primary controls: a few pixels of lean, nothing more ---- */
.mo-on .moMag {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-position 0.9s var(--ease-out),
              border-color 0.3s, color 0.3s;
}

/* ---- lamplight: a warm pool follows the cursor across a row ---- */
.mo-on .moGlow { position: relative; }
.mo-on .moGlow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(214, 181, 104, 0.13), rgba(214, 181, 104, 0) 62%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.mo-on .moGlow:hover::after { opacity: 1; }
/* keep the row's own content above the lamplight */
.mo-on .moGlow > * { position: relative; z-index: 1; }

/* ---- reduced motion: a composed, fully visible, entirely still page ---- */
@media (prefers-reduced-motion: reduce) {
  .moBar { display: none; }
  .mo-on .moWord { overflow: visible; }
  .mo-on .moWordIn,
  .mo-on .moStep .ls-no,
  .mo-on .moFrame::before { opacity: 1; transform: none; }
  .mo-on .moPlate { clip-path: none; }
  .mo-on .moRule::before { transform: scaleX(1); }
  .mo-on .moGlow::after { display: none; }
}