/**
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16
 *
 * Webfont: ITC Founder's Caslon Std 12 Roman by ITC
 * URL: https://www.myfonts.com/collections/itc-foundry
 *
 * The font listed in this notice is subject to the End User License
 * Agreement entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfont.
 */
/* IM Fell English — SIL OFL, see assets/fonts/OFL-IMFellEnglish.txt.
   Self-hosted rather than served from Google Fonts because Google's subset
   omits U+017F, the long s, which the historical setting depends on. */
@font-face {
  font-family: "IM Fell English";
  src: url("/assets/fonts/im-fell-english-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IM Fell English";
  src: url("/assets/fonts/im-fell-english-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

@font-face {
  font-family: "Founders Caslon";
  src: url("/assets/fonts/itc-founders-caslon-12-roman.woff2") format("woff2"),
       url("/assets/fonts/itc-founders-caslon-12-roman.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Sincerity — withsincerity.com
   Aesthetic: Institutional Americana. Engraved navy, bone paper, antique gold.
   Type: EB Garamond (display) / Lato (text)
   ========================================================================== */

:root {
  /* Ink family */
  --ink:        #0A1726;
  --ink-2:      #0F2133;
  --ink-3:      #16304A;
  --ink-soft:   rgba(10, 23, 38, 0.64);
  --ink-faint:  rgba(10, 23, 38, 0.12);

  /* Paper family */
  --paper:      #F7F3EA;
  --paper-2:    #EFE8DA;
  --paper-3:    #E4DACA;

  /* Metal */
  --gold:       #B08A4A;
  --gold-lit:   #D9BE86;
  --gold-deep:  #8A6A33;

  /* Accent, used sparingly */
  --crimson:    #8E2230;

  --slate:      #48607A;

  /* Type */
  /* Founders Caslon 12 ships Roman only. Anything italic in display type is
     set in IM Fell English Italic (--display-italic) rather than left to the
     browser, which would otherwise slant the roman into a fake oblique. */
  --display:        "Founders Caslon", "IM Fell English", "Iowan Old Style", Georgia, serif;
  --display-italic: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --text:    "Lato", "Helvetica Neue", Helvetica, sans-serif;
  /* The wordmark only. IM Fell English is a 17th-century Oxford face — rough,
     letterpress-era colour — set as caps with an enlarged initial, the way a
     1790s trade card or broadside would set a house name. */
  --logo:    "IM Fell English", Georgia, serif;

  /* Colour the seal's knockout shapes take. Overridden on dark grounds. */
  --seal-bg: #F7F3EA;

  /* Measure */
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1320px;
  /* How far the hero copy is pulled out past the gutter — and with it the
     wordmark, so the two stay on one line. Bounded by the gutter: below
     about 1460px the 1320px container already reaches it and there is no
     slack outside to give away. */
  --hero-shift: min(64px, calc(var(--gutter) * 0.55));
  --rule: 1px solid var(--ink-faint);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* past 1460px the container is narrower than the viewport, so the dead space
   outside it absorbs the whole move */
@media (min-width: 1460px) { :root { --hero-shift: 64px; } }
/* and on a narrow viewport there is nothing to give: everything sits on the
   gutter, the same as the rest of the site */
@media (max-width: 1000px) { :root { --hero-shift: 0px; } }

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

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

/* Paper grain — sits above backgrounds, below content ------------------- */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 1;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------- Layout */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 880px; }
.wrap--mid { max-width: 1080px; }

section { position: relative; z-index: 2; }

.band { padding: clamp(72px, 10vw, 148px) 0; position: relative; }
/* the site is one page now; anchored bands have to clear the fixed masthead */
.band[id] { scroll-margin-top: 94px; }
.band--tight { padding: clamp(56px, 7vw, 96px) 0; }
.band--paper2 { background: var(--paper-2); }
.band--ink {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(176,138,74,0.16) 0%, transparent 58%),
    linear-gradient(174deg, var(--ink-2) 0%, var(--ink) 58%, #071220 100%);
  color: var(--paper);
}
.band--ink .eyebrow { color: var(--gold-lit); }
.band--ink a { color: var(--gold-lit); }

/* Engraved guilloche line-work for ink bands */
.band--ink::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.20;
  background-image:
    repeating-linear-gradient(115deg, rgba(217,190,134,0.22) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(65deg, rgba(217,190,134,0.14) 0 1px, transparent 1px 11px);
  mask-image: radial-gradient(90% 70% at 80% 10%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(90% 70% at 80% 10%, #000 0%, transparent 72%);
}

/* ------------------------------------------------------------ Typography */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.004em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.9rem, 7.4vw, 6.1rem);
  line-height: 1.06;
  letter-spacing: -0.008em;
}
.h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); }
.h2 { font-size: clamp(2rem, 3.9vw, 3.3rem); }
.h3 { font-size: clamp(1.45rem, 2.1vw, 1.95rem); line-height: 1.16; }
.h4 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.24; }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1.35rem;
  display: block;
}
/* the hairline sits under the label, the way a rule runs beneath a
   chapter heading in a set book */
.eyebrow::after {
  content: ""; display: block; width: 116px; height: 1px;
  margin-top: 0.7rem; background: currentColor; opacity: 0.4;
}
.eyebrow--plain::after { display: none; }

.lede {
  font-family: var(--display);
  font-size: clamp(1.28rem, 1.9vw, 1.66rem);
  line-height: 1.56;
  color: var(--ink-soft);
  font-weight: 400;
}
.band--ink .lede { color: rgba(247,243,234,0.80); }
h1 + .lede, h2 + .lede, h3 + .lede { margin-top: 0.75em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
.prose p { max-width: 68ch; }
.prose > * + h3 { margin-top: 2.6em; }
.prose h3 + p { margin-top: 0.85em; }

/* Real italics, never a synthesised slant */
.serif-em,
.display em, .hero__title em, .phero__title em, .pull em,
h1 em, h2 em, h3 em, h4 em, .lede em, .prose em, .offer__title em {
  font-family: var(--display-italic);
  font-style: italic;
}
h1, h2, h3, h4, .display, .lede, .hero__title, .hero__sub, .phero__title,
.phero__sub, .pull, .figure-num, .offer__title, .navlist__title, .tranche__n,
.faq summary, .contact-aside dd, .wordmark__type {
  font-synthesis: none;
}

/* Numeral / figure treatment */
.figure-num {
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.4vw, 3.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-deep);
}
.band--ink .figure-num { color: var(--gold-lit); }

/* Gold hairline with star, a banknote motif ------------------------------ */
.starrule {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 clamp(36px, 5vw, 64px);
  color: var(--gold);
}
.starrule::before, .starrule::after {
  content: ""; height: 1px; flex: 1; background: currentColor; opacity: 0.45;
}
.starrule svg { width: 11px; height: 11px; fill: currentColor; flex: none; }

/* ---------------------------------------------------------------- Header */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  /* --mast-p runs 0 -> 1 across the first stretch of scroll (set in site.js),
     so the paper backing washes in as soon as the page moves rather than
     waiting for the hero to clear. */
  --mast-p: 0;
  background: rgba(247, 243, 234, calc(0.94 * var(--mast-p)));
  backdrop-filter: saturate(calc(100% + 50% * var(--mast-p))) blur(calc(14px * var(--mast-p)));
  -webkit-backdrop-filter: saturate(calc(100% + 50% * var(--mast-p))) blur(calc(14px * var(--mast-p)));
}

/* Bottom border: the double gold rule tooled onto the spine of a bound book.
   One background layer is the leaf itself — an uneven run of warm golds, not a
   flat colour, because beaten leaf never lies evenly — and a second, finer
   layer breaks it up the way tooling skips. A mask cuts the band into two
   rules with a gap: the lower one heavier, as a binder would run it. */
.masthead::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px;
  pointer-events: none;
  opacity: var(--mast-p);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(40, 26, 4, 0.13) 0 1px, rgba(40, 26, 4, 0) 1px 7px),
    repeating-linear-gradient(90deg,
      rgba(255, 248, 226, 0.16) 0 1px, rgba(255, 248, 226, 0) 1px 11px),
    repeating-linear-gradient(90deg,
      rgba(40, 26, 4, 0.10) 0 2px, rgba(40, 26, 4, 0) 2px 19px),
    linear-gradient(90deg,
      #7E5E2A 0%,  #C2A469 5%,  #8B6A31 12%, #D0B27C 19%, #7A5A27 27%,
      #BE9F62 35%, #916F35 43%, #D5B884 51%, #83632C 59%, #C7A96F 67%,
      #8D6C33 75%, #D2B47F 84%, #7C5C29 92%, #BB9C5E 100%);
  -webkit-mask-image: linear-gradient(to bottom,
      #000 0 1.4px, transparent 1.4px 3.8px, #000 3.8px 6px);
  mask-image: linear-gradient(to bottom,
      #000 0 1.4px, transparent 1.4px 3.8px, #000 3.8px 6px);
}
/* The wordmark sits on the same line as the hero headline, which is pulled
   --hero-shift out past the gutter; opening the masthead's own padding by the
   same amount puts it there, and carries Contact/Menu the same distance the
   other way so the bar stays symmetrical. */
.masthead__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 calc(var(--gutter) - var(--hero-shift));
  height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.masthead--solid .wordmark, .masthead--solid .menu-btn { color: var(--ink); }
.masthead--solid .btn--ghost { color: var(--ink); border-color: rgba(10,23,38,0.30); }
.masthead--solid .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* over-hero state */
.masthead--over .wordmark, .masthead--over .menu-btn { color: var(--paper); }
.masthead--over .btn--ghost { color: var(--paper); border-color: rgba(247,243,234,0.46); }
.masthead--over .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Contact, in the masthead. Its own border is given up to two drawn layers:
   a frame struck in gold leaf, and a set of corner flutes set just outside it
   — the tick marks an engraver leaves where a plate is trimmed. Both wash in
   on --mast-p with the paper backing, so over the hero the word stands alone. */
.masthead .btn--ghost {
  position: relative;
  border-color: transparent;
  /* mid-tone leaf: it has to read on the hero's ink and on paper both */
  --leaf-line:   linear-gradient(90deg,  #8A6A33 0%, #D8BC85 21%, #96743A 44%, #E2C795 68%, #8D6C33 88%, #B8975A 100%);
  --leaf-line-v: linear-gradient(180deg, #8A6A33 0%, #D8BC85 21%, #96743A 44%, #E2C795 68%, #8D6C33 88%, #B8975A 100%);
}
.masthead .btn--ghost::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid transparent;
  border-image: var(--leaf-line) 1;
  opacity: var(--mast-p);
}
/* Corner filigree. Rather than a second set of straight rules, the ornament
   is drawn as a mask over a single sheet of leaf: a quarter-round arc sweeping
   across each corner — the cartouche an engraver turns at the corner of a
   plate — with a small lozenge struck at the midpoint of every side and a
   hairline flourish running out from it. Leaf shows only where the mask lets
   it through, so the whole ornament is one gradient and stays in register. */
.masthead .btn--ghost::after {
  content: ""; position: absolute; inset: -5px; pointer-events: none;
  opacity: calc(0.9 * var(--mast-p));
  background-image: var(--leaf-line);
  background-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image:
    /* four corner arcs, each struck about a centre on the inner side */
    radial-gradient(circle at 100% 100%, transparent 0 6.4px, #000 6.4px 7.4px, transparent 7.4px),
    radial-gradient(circle at 0    100%, transparent 0 6.4px, #000 6.4px 7.4px, transparent 7.4px),
    radial-gradient(circle at 100% 0,    transparent 0 6.4px, #000 6.4px 7.4px, transparent 7.4px),
    radial-gradient(circle at 0    0,    transparent 0 6.4px, #000 6.4px 7.4px, transparent 7.4px),
    /* a lozenge at the midpoint of each side */
    radial-gradient(circle at 50% 50%, #000 0 1.5px, transparent 1.9px),
    radial-gradient(circle at 50% 50%, #000 0 1.5px, transparent 1.9px),
    radial-gradient(circle at 50% 50%, #000 0 1.5px, transparent 1.9px),
    radial-gradient(circle at 50% 50%, #000 0 1.5px, transparent 1.9px),
    /* and the hairline flourish that runs out either way from the top and
       bottom lozenges, stopping well short of the arcs */
    linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle at 100% 100%, transparent 0 6.4px, #000 6.4px 7.4px, transparent 7.4px),
    radial-gradient(circle at 0    100%, transparent 0 6.4px, #000 6.4px 7.4px, transparent 7.4px),
    radial-gradient(circle at 100% 0,    transparent 0 6.4px, #000 6.4px 7.4px, transparent 7.4px),
    radial-gradient(circle at 0    0,    transparent 0 6.4px, #000 6.4px 7.4px, transparent 7.4px),
    radial-gradient(circle at 50% 50%, #000 0 1.5px, transparent 1.9px),
    radial-gradient(circle at 50% 50%, #000 0 1.5px, transparent 1.9px),
    radial-gradient(circle at 50% 50%, #000 0 1.5px, transparent 1.9px),
    radial-gradient(circle at 50% 50%, #000 0 1.5px, transparent 1.9px),
    linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-size:
    11px 11px, 11px 11px, 11px 11px, 11px 11px,
    6px 6px, 6px 6px, 6px 6px, 6px 6px,
    34px 1px, 34px 1px;
  mask-size:
    11px 11px, 11px 11px, 11px 11px, 11px 11px,
    6px 6px, 6px 6px, 6px 6px, 6px 6px,
    34px 1px, 34px 1px;
  -webkit-mask-position:
    left top, right top, left bottom, right bottom,
    center top, center bottom, left center, right center,
    center 2.5px, center calc(100% - 2.5px);
  mask-position:
    left top, right top, left bottom, right bottom,
    center top, center bottom, left center, right center,
    center 2.5px, center calc(100% - 2.5px);
}
/* the flourish and the lozenges lift a little when the button is live */
.masthead .btn--ghost:hover::after { opacity: var(--mast-p); }

.wordmark {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--ink);
  transition: color 0.4s var(--ease), opacity 0.3s var(--ease);
}
.wordmark:hover { opacity: 0.74; }
/* The house mark is the Continental dollar device — fine engraved linework,
   so it needs roughly twice the footprint of a solid mark to hold up beside
   the wordmark, and sits a touch high against the caps. */
.wordmark__seal { width: 54px; height: 54px; flex: none; transform: translateY(-4%); }
.wordmark__type {
  font-family: var(--logo);
  font-size: 1.16rem; font-weight: 400;
  -webkit-text-stroke: 0.4px currentColor;
  letter-spacing: 0.185em; text-transform: uppercase;
  line-height: 1;
}
/* Enlarged initial — the historical "versal" setting */
.wordmark__cap { font-size: 1.5em; line-height: 1; letter-spacing: 0.12em; }
.wordmark__type sup {
  font-family: var(--text); font-size: 0.42rem; letter-spacing: 0.18em;
  font-weight: 700; vertical-align: super; opacity: 0.6; margin-left: 4px;
}

.masthead__right { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--text); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.17em; text-transform: uppercase;
  padding: 0.95em 1.6em; border-radius: 1px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 0.32s var(--ease), color 0.32s var(--ease),
              border-color 0.32s var(--ease), transform 0.32s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn--ghost { background: transparent; border-color: rgba(10,23,38,0.30); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { background: var(--ink-3); border-color: var(--ink-3); }
.btn--gold { background: var(--gold); color: #17110322; color: #1B1204; border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-lit); border-color: var(--gold-lit); }
.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--paper:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
/* The label sits in Caslon caps, whose optical centre is well above the centre
   of the em box — so centring the line box leaves the word riding high against
   the arrow. Nudge the label alone back down onto the arrow's axis. */
.btn__label { display: inline-block; transform: translateY(3px); }
.btn__arrow { transition: transform 0.32s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Menu trigger ----------------------------------------------------------- */
.menu-btn {
  display: flex; align-items: center; gap: 0.7em;
  background: none; border: 0; padding: 8px 2px; cursor: pointer;
  color: var(--ink); font-family: var(--text); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.17em; text-transform: uppercase;
  transition: color 0.4s var(--ease), opacity 0.3s var(--ease);
}
.menu-btn:hover { opacity: 0.72; }
.menu-btn__bars { display: grid; gap: 5px; width: 22px; }
.menu-btn__bars i { display: block; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease), opacity 0.3s var(--ease); }
.menu-btn__bars i:nth-child(2) { width: 68%; margin-left: auto; }
.menu-btn:hover .menu-btn__bars i:nth-child(2) { width: 100%; }
.menu-btn__label { display: inline; }
@media (max-width: 560px) { .menu-btn__label { display: none; } }

/* ------------------------------------------------------------ Nav drawer */
.drawer {
  position: fixed; inset: 0; z-index: 100;
  visibility: hidden; pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(7,18,32,0.55);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(760px, 100%);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(176,138,74,0.20) 0%, transparent 60%),
    linear-gradient(200deg, var(--ink-2) 0%, var(--ink) 55%, #06101C 100%);
  color: var(--paper);
  transform: translateX(100%);
  transition: transform 0.62s var(--ease-out);
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-shadow: -40px 0 90px rgba(6,16,28,0.42);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head .wordmark { color: var(--paper); }
.drawer__panel, .footer, .band--ink, .hero, .phero { --seal-bg: #0A1726; }
.masthead--over { --seal-bg: #0A1726; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  height: 94px; flex: none;
  padding: 0 clamp(24px, 4vw, 56px);
  border-bottom: 1px solid rgba(217,190,134,0.18);
}
.drawer__close {
  background: none; border: 0; cursor: pointer; color: var(--paper);
  font-family: var(--text); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.17em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.7em; padding: 8px 2px;
  transition: opacity 0.3s var(--ease);
}
.drawer__close:hover { opacity: 0.7; }
.drawer__close span[aria-hidden] { font-size: 1.15rem; line-height: 1; }

.drawer__body { padding: clamp(28px, 4vw, 54px) clamp(24px, 4vw, 56px) 40px; flex: 1; }

.navlist { list-style: none; margin: 0; padding: 0; }
.navlist li { border-bottom: 1px solid rgba(217,190,134,0.16); }
.navlist a {
  display: block; padding: clamp(20px, 2.6vw, 30px) 0;
  text-decoration: none; color: var(--paper);
  position: relative;
  transform: translateY(14px); opacity: 0;
}
.drawer.is-open .navlist a { animation: navIn 0.66s var(--ease-out) forwards; }
.drawer.is-open .navlist li:nth-child(1) a { animation-delay: 0.10s; }
.drawer.is-open .navlist li:nth-child(2) a { animation-delay: 0.17s; }
.drawer.is-open .navlist li:nth-child(3) a { animation-delay: 0.24s; }
@keyframes navIn { to { transform: none; opacity: 1; } }

.navlist__idx {
  font-family: var(--text); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.24em; color: var(--gold-lit); opacity: 0.85;
  display: block; margin-bottom: 0.7em;
}
.navlist__aud {
  display: block; font-family: var(--text); font-weight: 400;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(247,243,234,0.62); margin-bottom: 0.45em;
}
.navlist__title {
  display: block; font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.04;
  letter-spacing: -0.015em;
  transition: color 0.35s var(--ease), transform 0.45s var(--ease);
}
.navlist a:hover .navlist__title { color: var(--gold-lit); transform: translateX(10px); }
.navlist__desc {
  margin: 0.7em 0 0; font-size: 0.94rem; line-height: 1.6;
  color: rgba(247,243,234,0.58); max-width: 46ch;
}

.drawer__minor {
  margin-top: clamp(30px, 4vw, 46px);
  display: flex; flex-wrap: wrap; gap: 8px 30px;
}
.drawer__minor a {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.17em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(247,243,234,0.72); padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.drawer__minor a:hover { color: var(--gold-lit); border-bottom-color: var(--gold-lit); }

.drawer__foot {
  padding: 26px clamp(24px, 4vw, 56px) clamp(28px, 4vw, 44px);
  border-top: 1px solid rgba(217,190,134,0.18);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 0.78rem; color: rgba(247,243,234,0.55);
}

/* ------------------------------------------------------------------ Hero */
.hero {
  position: relative;
  min-height: 100svh;
  /* The height the film has to fit into: the hero less the rail. site.js
     measures it; this default is the same figure assuming a two-line rail,
     so the framing is close even before the script runs. */
  --hero-film-h: calc(100svh - 122px);
  display: flex; flex-direction: column;
  overflow: clip;
  color: var(--paper);
  background: linear-gradient(168deg, #123049 0%, #0A1726 52%, #06101C 100%);
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* The film box spans the hero at every width; what changes is how the frame
   sits inside it. Narrow viewports fill it — the hero is taller than the frame
   there, so cover crops the sides and the shot stays centred. */
.hero__film { position: absolute; inset: 0; }
.hero__film video,
.hero__film img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
@media (min-width: 1001px) {
  /* Shown whole, and the box is the frame rather than the hero. That matters
     for the mask: a fade written against the hero starts at the hero's left
     edge, so by the time it reaches the frame's edge it is already half
     opaque and the frame ends on a visible seam. Against the frame's own box
     it starts at zero exactly where the picture starts, and there is nothing
     to see.

     Width is the one free-ish dimension: take the frame's width at the hero's
     height, or the full width, whichever is smaller, and let aspect-ratio
     derive the height from it. Pinning height instead leaves aspect-ratio
     nothing to resolve against and the frame crops. */
  .hero__film {
    inset: auto; right: 0; top: 0;
    /* Sized to the space above the rail, and pinned to the top of it, so the
       frame clears the rail entirely and sits into the upper right — which
       also walks the centre-framed shots further off the headline.

       The left edge runs all the way out to nothing, because that is where
       the gap is and the edge would otherwise be obvious against it. The
       bottom only softens: a long, shallow ramp stopping around half, enough
       to lose the edge against the dark foot of the scrim without washing out
       the picture. The top is not masked at all — it sits under the masthead
       and needs no help. */
    width: min(100%, calc(var(--hero-film-h) * 16 / 9));
    aspect-ratio: 16 / 9;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, transparent 5%, #000 40%),
      linear-gradient(to bottom, #000 0%, #000 84%, rgba(0, 0, 0, 0.5) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, transparent 5%, #000 40%),
      linear-gradient(to bottom, #000 0%, #000 84%, rgba(0, 0, 0, 0.5) 100%);
    mask-composite: intersect;
  }
}
/* the poster frame stands in until the first frame has decoded */
.hero__film video { opacity: 0; transition: opacity 0.9s var(--ease-out); }
.hero__film video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__film video { transition: none; }
}

/* The blue behind the film, and what the film's edges dissolve into. Flat
   gradient only: the drifting line grid that used to sit here showed through
   the fade as a screen door over the footage. The guilloche on the ink bands
   and the page heroes is untouched. */
.hero__placeholder {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 22% 78%, rgba(176,138,74,0.30) 0%, transparent 62%),
    radial-gradient(60% 50% at 82% 18%, rgba(72,128,168,0.34) 0%, transparent 60%),
    linear-gradient(168deg, #17395A 0%, #0A1726 55%, #050D18 100%);
}

.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* a heavier wash on the left, where the headline sits over the shop floor */
    linear-gradient(to right, rgba(5,13,24,0.88) 0%, rgba(5,13,24,0.74) 34%, rgba(5,13,24,0.34) 62%, rgba(5,13,24,0.22) 100%),
    linear-gradient(to top, rgba(5,13,24,0.92) 0%, rgba(5,13,24,0.46) 34%, rgba(5,13,24,0.18) 62%, rgba(5,13,24,0.48) 100%);
}
.hero__vignette {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(4,10,19,0.55) 100%);
}

.hero__inner {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  /* the rail sits at the foot of the first screen, so the copy takes whatever
     height is left over between the masthead and it */
  flex: 1 1 auto; min-height: 0;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  /* top padding clears the fixed masthead when the hero content is taller
     than the viewport (short laptop screens, landscape phones) */
  padding: clamp(104px, 13vh, 142px) var(--gutter) clamp(34px, 5vh, 62px);
}
/* The copy holds the left half so it never runs across the subject, and is
   pulled further left still — the footage is moving right, so the two open
   away from each other and the gap between them widens twice as fast.
   The pull is bounded by the gutter: below about 1460px the 1320px container
   already reaches the gutters, so there is no slack outside it and a flat 10%
   would put the headline against the edge of the screen. */
.hero__copy {
  min-width: 0; max-width: 54%;
  transform: translateX(calc(-1 * var(--hero-shift)));
}
@media (max-width: 1000px) {
  /* Narrower than this the frame is full bleed and simply centred, which is
     what these mostly-centred face shots want. The copy stops moving too:
     there is no room left to give it. */
  .hero__copy { max-width: 72%; }
}
@media (max-width: 620px) {
  .hero__copy { max-width: none; }
}
.hero__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 5.2vw, 4.9rem);
  line-height: 1.05; letter-spacing: -0.008em;
  margin: 0; max-width: 18ch;
  text-shadow: 0 2px 40px rgba(4,10,19,0.42);
}
.hero__title em { font-style: italic; color: var(--gold-lit); }
/* the headline is broken by hand into its three lines; on a narrow phone the
   breaks come out and the measure takes over */
@media (max-width: 460px) { .hero__br { display: none; } }
/* Founders Caslon carries ct and long-s (ſh, ſi, ſt) discretionary ligatures.
   The long s itself is set by hand in the markup, per 18th-century practice:
   long in initial and medial positions, round at the end of a word. */
.hero__title, .phero__title { font-feature-settings: "dlig" 1, "liga" 1; }
.hero__sub {
  font-family: var(--display); font-size: clamp(1.15rem, 1.75vw, 1.55rem);
  line-height: 1.52; color: rgba(247,243,234,0.80);
  max-width: 46ch; margin: clamp(18px, 2.4vw, 30px) 0 clamp(24px, 3vw, 38px);
}
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }

/* staged hero entrance */
.hero__title, .hero__sub, .hero__cta, .hero__rail {
  opacity: 0; transform: translateY(22px);
  animation: riseIn 1.05s var(--ease-out) forwards;
}
.hero__title   { animation-delay: 0.18s; }
.hero__sub     { animation-delay: 0.34s; }
.hero__cta     { animation-delay: 0.48s; }
.hero__rail    { animation-delay: 0.66s; }
@keyframes riseIn { to { opacity: 1; transform: none; } }

/* Hero bottom rail: the three offers, ticker-style */
.hero__rail {
  position: relative; z-index: 3; flex: none;
  border-top: 1px solid rgba(217,190,134,0.26);
  background: rgba(5,13,24,0.42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero__rail-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.hero__rail a {
  display: block; padding: 22px 0; text-decoration: none; color: rgba(247,243,234,0.82);
  border-left: 1px solid rgba(217,190,134,0.18);
  padding-left: clamp(16px, 2vw, 28px); padding-right: 12px;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.hero__rail a:first-child { border-left: 0; padding-left: 0; }
.hero__rail a:hover { color: var(--gold-lit); }
.hero__rail b {
  display: block; text-transform: uppercase;
  line-height: 1.3;
  /* the three audience lines run to different lengths — reserving two lines
     keeps the track names on one baseline across the rail */
  min-height: 2.6em;
  color: var(--gold); margin-bottom: 0.55em;
}
.hero__rail span { font-family: var(--display); font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.22; }
@media (max-width: 860px) {
  .hero__rail-inner { grid-template-columns: 1fr; }
  .hero__rail a { border-left: 0; padding-left: 0; border-top: 1px solid rgba(217,190,134,0.16); }
  .hero__rail a:first-child { border-top: 0; }
  .hero__rail a { padding: 15px 0; }
  .hero__rail span { display: none; }
  .hero__rail b { margin: 0; color: rgba(247,243,234,0.85); }
}

/* Page hero (interior pages) -------------------------------------------- */
.phero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(85% 75% at 88% 6%, rgba(176,138,74,0.22) 0%, transparent 58%),
    linear-gradient(172deg, #143352 0%, var(--ink) 58%, #06101C 100%);
  color: var(--paper);
  padding: clamp(150px, 20vh, 230px) 0 clamp(64px, 9vw, 110px);
}
.phero::before {
  content: ""; position: absolute; inset: 0; opacity: 0.22; pointer-events: none;
  background-image:
    repeating-linear-gradient(118deg, rgba(217,190,134,0.22) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(58deg, rgba(217,190,134,0.12) 0 1px, transparent 1px 13px);
  mask-image: radial-gradient(75% 85% at 92% 15%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(75% 85% at 92% 15%, #000 0%, transparent 70%);
}
.phero__inner { position: relative; z-index: 2; }
.phero__aud {
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold-lit); margin: 0 0 1.3rem; display: flex; align-items: center; gap: 0.9rem;
}
.phero__aud::before { content: ""; width: clamp(28px, 5vw, 64px); height: 1px; background: currentColor; opacity: 0.7; }
.phero__title { font-size: clamp(2.5rem, 6vw, 4.9rem); max-width: 18ch; }
.phero__title em { font-style: italic; color: var(--gold-lit); }
.phero__sub {
  font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.55;
  color: rgba(247,243,234,0.78); max-width: 58ch; margin-top: clamp(20px, 2.6vw, 30px);
}
.phero__inner > * { opacity: 0; transform: translateY(18px); animation: riseIn 0.9s var(--ease-out) forwards; }
.phero__inner > *:nth-child(1) { animation-delay: 0.12s; }
.phero__inner > *:nth-child(2) { animation-delay: 0.24s; }
.phero__inner > *:nth-child(3) { animation-delay: 0.38s; }
.phero__inner > *:nth-child(4) { animation-delay: 0.50s; }

/* ----------------------------------------------------------- Section bits */
.sechead { margin-bottom: clamp(38px, 5vw, 66px); max-width: 60ch; }
.sechead--wide { max-width: none; }
.sechead__split {
  display: grid; gap: clamp(22px, 4vw, 60px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: end;
}
@media (max-width: 900px) { .sechead__split { grid-template-columns: 1fr; align-items: start; } }

/* Offer cards ------------------------------------------------------------ */
.offers { display: grid; gap: 1px; background: var(--ink-faint); border-top: var(--rule); border-bottom: var(--rule); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .offers { grid-template-columns: 1fr; } }

.offer {
  position: relative; background: var(--paper);
  padding: clamp(30px, 3.2vw, 48px) clamp(24px, 2.4vw, 38px) clamp(34px, 3.4vw, 50px);
  display: flex; flex-direction: column; gap: 1.05rem;
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: background 0.42s var(--ease), color 0.42s var(--ease), transform 0.42s var(--ease);
}
.offer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.52s var(--ease-out);
}
.offer:hover { background: var(--ink); color: var(--paper); }
.offer:hover::before { transform: scaleX(1); }
.offer:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.offer__idx {
  font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.16em;
  color: var(--gold-deep); transition: color 0.42s var(--ease);
}
.offer:hover .offer__idx { color: var(--gold-lit); }
.offer__aud {
  font-weight: 700; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 0.42s var(--ease);
}
.offer:hover .offer__aud { color: rgba(247,243,234,0.66); }
.offer__title { font-family: var(--display); font-size: clamp(1.7rem, 2.4vw, 2.25rem); line-height: 1.08; }
.offer__body { font-size: 0.97rem; line-height: 1.68; color: var(--ink-soft); transition: color 0.42s var(--ease); margin: 0; }
.offer:hover .offer__body { color: rgba(247,243,234,0.76); }
.offer__more {
  margin-top: auto; padding-top: 0.6rem;
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.17em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.65em;
  color: var(--gold-deep); transition: color 0.42s var(--ease);
}
.offer:hover .offer__more { color: var(--gold-lit); }
.offer__more svg { transition: transform 0.4s var(--ease); }
.offer:hover .offer__more svg { transform: translateX(5px); }

/* Generic grid + panel --------------------------------------------------- */
.grid { display: grid; gap: clamp(22px, 3vw, 44px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.panel {
  background: var(--paper);
  border: var(--rule); border-top: 2px solid var(--gold);
  padding: clamp(24px, 2.6vw, 38px);
}
.band--ink .panel {
  background: rgba(247,243,234,0.045);
  border-color: rgba(217,190,134,0.22);
  border-top-color: var(--gold);
}
.panel h3 { margin-bottom: 0.7rem; }
.panel p { font-size: 0.96rem; color: var(--ink-soft); }
.band--ink .panel p { color: rgba(247,243,234,0.72); }

/* Numbered steps --------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 34px);
  padding: clamp(24px, 3vw, 38px) 0;
  border-top: var(--rule);
}
.band--ink .step { border-top-color: rgba(217,190,134,0.2); }
.step:last-child { border-bottom: var(--rule); }
.band--ink .step:last-child { border-bottom-color: rgba(217,190,134,0.2); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--gold-deep); line-height: 1;
}
.band--ink .step::before { color: var(--gold-lit); }
.step h3 { margin-bottom: 0.55rem; }
.step p { color: var(--ink-soft); font-size: 0.99rem; max-width: 62ch; }
.band--ink .step p { color: rgba(247,243,234,0.72); }
@media (max-width: 620px) { .step { grid-template-columns: 1fr; gap: 10px; } }

/* Stat row --------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(217,190,134,0.26); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px); background: var(--ink); }
.band--paper2 .stat, .band--paper .stat { background: var(--paper-2); }
.stat__k { display: block; margin-bottom: 0.5rem; }
.stat__v {
  font-size: 0.79rem; line-height: 1.5; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(247,243,234,0.62);
}
.band--paper2 .stat__v, .band--paper .stat__v { color: var(--ink-soft); }

/* Capital stack diagram -------------------------------------------------- */
.stack { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .stack { grid-template-columns: 1fr; } }
.stackcol__label {
  font-weight: 700; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 1rem; color: rgba(247,243,234,0.66);
}
.stackcol--ours .stackcol__label { color: var(--gold-lit); }
.tranche {
  border: 1px solid rgba(217,190,134,0.26);
  border-bottom: 0;
  padding: clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px;
}
.tranche:last-child { border-bottom: 1px solid rgba(217,190,134,0.26); }
.tranche__n { font-family: var(--display); font-size: clamp(1.02rem, 1.4vw, 1.25rem); }
.tranche__d { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: rgba(247,243,234,0.55); }
.tranche--equity { background: rgba(247,243,234,0.06); }
.tranche--senior { background: rgba(72,128,168,0.16); }
.tranche--mezz { background: rgba(142,34,48,0.30); }
.tranche--ours {
  background: linear-gradient(100deg, rgba(176,138,74,0.42), rgba(217,190,134,0.22));
  border-color: var(--gold);
  position: relative;
}
.tranche--ours .tranche__d { color: rgba(247,243,234,0.78); }

/* Quote / pull ----------------------------------------------------------- */
.pull {
  font-family: var(--display); font-size: clamp(1.6rem, 3.1vw, 2.65rem);
  line-height: 1.24; letter-spacing: -0.014em; max-width: 24ch; margin: 0;
}
.pull em { font-style: italic; color: var(--gold-deep); }
.band--ink .pull em { color: var(--gold-lit); }

/* Roles list (careers) --------------------------------------------------- */
.role {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 28px;
  align-items: center; padding: clamp(22px, 2.6vw, 32px) 0;
  border-top: var(--rule); text-decoration: none; color: inherit;
  transition: padding 0.4s var(--ease), color 0.3s var(--ease);
}
.role:last-of-type { border-bottom: var(--rule); }
.role:hover { padding-left: 14px; color: var(--gold-deep); }
.role__meta { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin-top: 0.5rem; }
.role__cta { font-size: 0.72rem; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); white-space: nowrap; }
@media (max-width: 620px) { .role { grid-template-columns: 1fr; } }

/* FAQ / disclosure ------------------------------------------------------- */
.faq { border-top: var(--rule); }
.faq details { border-bottom: var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: clamp(20px, 2.4vw, 28px) 44px clamp(20px, 2.4vw, 28px) 0;
  font-family: var(--display); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.3;
  position: relative; transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-deep); }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--text); font-weight: 300; font-size: 1.5rem; color: var(--gold-deep);
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding-bottom: clamp(20px, 2.4vw, 28px); color: var(--ink-soft); max-width: 72ch; }

/* -------------------------------------------------------------- Contact */
.form { display: grid; gap: clamp(16px, 2vw, 22px); }
.form__row { display: grid; gap: clamp(16px, 2vw, 22px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) { .form__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label {
  font-weight: 700; font-size: 0.67rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  font-family: var(--text); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid rgba(10,23,38,0.22);
  border-radius: 1px; padding: 0.92em 1em; width: 100%;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176,138,74,0.18);
}
.field select { appearance: none; 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='%230A1726' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.6em; }
.form__note { font-size: 0.82rem; color: var(--ink-soft); }
.form__status {
  font-size: 0.9rem; line-height: 1.6; padding: 1em 1.15em;
  border-left: 3px solid var(--gold); background: var(--paper-2);
  display: none;
}
.form__status.is-shown { display: block; }
.form__status.is-error { border-left-color: var(--crimson); }
.form__status a { color: var(--crimson); }

.contact-aside { border-top: 2px solid var(--gold); padding-top: clamp(22px, 2.6vw, 32px); }
.contact-aside dl { margin: 0; display: grid; gap: 1.35rem; }
.contact-aside dt {
  font-weight: 700; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.35rem;
}
.contact-aside dd { margin: 0; font-family: var(--display); font-size: 1.2rem; line-height: 1.4; }
.contact-aside a { text-decoration: none; border-bottom: 1px solid var(--gold); }
.contact-aside a:hover { color: var(--gold-deep); }

/* -------------------------------------------------------------- CTA band */
.cta { text-align: center; }
.cta .h2 { max-width: 20ch; margin: 0 auto; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: clamp(28px, 3.5vw, 42px); }

/* ---------------------------------------------------------------- Footer */
.footer {
  background: #06101C; color: rgba(247,243,234,0.70);
  padding: clamp(56px, 7vw, 92px) 0 34px;
  position: relative; z-index: 2;
  font-size: 0.9rem;
}
.footer a { color: rgba(247,243,234,0.70); text-decoration: none; transition: color 0.3s var(--ease); }
.footer a:hover { color: var(--gold-lit); }
.footer__grid {
  display: grid; gap: clamp(30px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand .wordmark { color: var(--paper); }
.footer__blurb { margin-top: 1.4rem; max-width: 38ch; color: rgba(247,243,234,0.56); font-size: 0.92rem; }
.footer h4 {
  font-family: var(--text); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.72rem; }
.footer__base {
  margin-top: clamp(40px, 5vw, 66px); padding-top: 26px;
  border-top: 1px solid rgba(217,190,134,0.18);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  font-size: 0.78rem; color: rgba(247,243,234,0.44);
}

/* ---------------------------------------------------------- Display labels
   Every small capitalised label on the site — eyebrows, audience lines,
   buttons, form labels, footer headings — is set in Founders Caslon rather
   than Lato. The face ships Roman only, so the weight comes from a hairline
   stroke, the same trick the wordmark uses; letter-spacing comes in a little
   because Caslon caps are wider than Lato's. */
.eyebrow, .btn, .menu-btn__label, .drawer__close, .drawer__minor a,
.navlist__idx, .navlist__aud, .hero__rail b, .phero__aud,
.offer__aud, .offer__more, .stat__v, .stackcol__label, .tranche__d,
.role__meta, .role__cta, .field label, .contact-aside dt, .footer h4 {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  -webkit-text-stroke: 0.34px currentColor;
}
.eyebrow, .btn, .menu-btn__label, .drawer__close, .drawer__minor a,
.navlist__aud, .hero__rail b, .phero__aud, .offer__aud, .offer__more,
.stackcol__label, .role__meta, .role__cta, .field label,
.contact-aside dt, .footer h4 {
  letter-spacing: 0.16em;
  font-size: 0.8rem;
}
.hero__rail b, .offer__aud, .footer h4, .contact-aside dt, .field label { font-size: 0.76rem; }
.hero__rail b { letter-spacing: 0.13em; font-size: 0.72rem; }
/* same two-line reservation on the cards, so the three titles share a baseline */
.offer__aud { line-height: 1.3; min-height: 2.6em; }
@media (max-width: 900px) { .offer__aud { min-height: 0; } }
@media (max-width: 860px) { .hero__rail b { min-height: 0; } }

/* ------------------------------------------------------------- Utilities */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.09s; }
.reveal[data-delay="2"] { transition-delay: 0.18s; }
.reveal[data-delay="3"] { transition-delay: 0.27s; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 20px;
  font-weight: 700; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

.u-gold { color: var(--gold-deep); }
.band--ink .u-gold { color: var(--gold-lit); }
.u-center { text-align: center; }
.u-mt { margin-top: clamp(28px, 3.4vw, 44px); }
.u-mt-sm { margin-top: 1.5rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.fineprint { font-size: 0.78rem; line-height: 1.6; color: var(--ink-soft); }
.band--ink .fineprint { color: rgba(247,243,234,0.5); }