/* ============================================================
   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;
}
.on-moss .sec-title { color: var(--ivory); }

.sec-lede { margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.09rem; max-width: 58ch; }
.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;
}

.hero-stage { position: absolute; inset: 0; z-index: 0; }
.hero-stage canvas { position: relative; width: 100%; height: 100%; }
/* the grove is present from the very first paint: an SVG understudy of the
   twilight canvas scene (dark boughs + gold motes over the dusk light-field)
   sits beneath it, so the hero is never a flat void — with JS, without JS,
   hidden tab or not */
.hero-stage {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%230a140c' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M-30 90 C160 150 300 130 420 250' stroke-width='12'/%3E%3Cpath d='M240 155 C300 240 310 330 260 430' stroke-width='6'/%3E%3Cpath d='M420 250 C480 330 470 420 400 500' stroke-width='7'/%3E%3Cpath d='M330 120 C420 90 500 100 560 60' stroke-width='5'/%3E%3Cpath d='M1470 90 C1280 150 1140 130 1020 250' stroke-width='12'/%3E%3Cpath d='M1200 155 C1140 240 1130 330 1180 430' stroke-width='6'/%3E%3Cpath d='M1020 250 C960 330 970 420 1040 500' stroke-width='7'/%3E%3Cpath d='M1110 120 C1020 90 940 100 880 60' stroke-width='5'/%3E%3Cpath d='M180 -20 C200 120 170 260 220 380' stroke-width='5'/%3E%3Cpath d='M1260 -20 C1240 120 1270 260 1220 380' stroke-width='5'/%3E%3C/g%3E%3Cg fill='none' stroke='%23566549' stroke-width='1.4' opacity='.55'%3E%3Cpath d='M250 260 q4 30 -2 60'/%3E%3Cpath d='M300 300 q-4 34 2 66'/%3E%3Cpath d='M410 330 q4 30 -3 62'/%3E%3Cpath d='M1190 260 q-4 30 2 60'/%3E%3Cpath d='M1140 300 q4 34 -2 66'/%3E%3Cpath d='M1030 330 q-4 30 3 62'/%3E%3C/g%3E%3Cg fill='%23e8ca7c' opacity='.75'%3E%3Ccircle cx='200' cy='300' r='3'/%3E%3Ccircle cx='330' cy='420' r='2.4'/%3E%3Ccircle cx='120' cy='520' r='2'/%3E%3Ccircle cx='480' cy='180' r='2.2'/%3E%3Ccircle cx='620' cy='520' r='2'/%3E%3Ccircle cx='760' cy='300' r='2.6'/%3E%3Ccircle cx='900' cy='480' r='2'/%3E%3Ccircle cx='1060' cy='340' r='2.4'/%3E%3Ccircle cx='1240' cy='250' r='3'/%3E%3Ccircle cx='1320' cy='520' r='2.2'/%3E%3Ccircle cx='540' cy='640' r='2.4'/%3E%3Ccircle cx='1010' cy='640' r='2'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    radial-gradient(ellipse 85% 60% at 50% 36%, rgba(212, 174, 96, 0.5), rgba(150, 120, 62, 0.14) 55%, transparent 75%),
    radial-gradient(ellipse 40% 22% at 50% 14%, rgba(232, 202, 124, 0.32), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 50%, rgba(4, 9, 6, 0.55) 100%),
    linear-gradient(180deg, #0b150d 0%, #152418 45%, #1e3020 80%, #243a26 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(920px, 92vw);
  /* clears the absolutely-positioned masthead (~200px tall on desktop) */
  padding: clamp(14.5rem, 30vh, 17rem) 0 clamp(3.5rem, 8vh, 5.5rem);
}

.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);
  text-shadow: 0 1px 6px rgba(6, 12, 8, 0.5);
}
.hero .eyebrow {
  color: var(--gold-bright);
  text-shadow: 0 1px 6px rgba(6, 12, 8, 0.5);
}

/* 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 {
  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; }

/* ---------- 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 { 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; }

  .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 { 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; }
}