/* ==========================================================================
   Flite Society — pre-launch
   Type locked in brand-identity-v3. Palette sampled from the Movetic final
   logo artwork (2026-07-25), which supersedes the v3 hexes. Do not introduce
   new colors.
   ========================================================================== */

/* --- self-hosted fonts: Google CDN + preload are mutually exclusive because
       the hashed gstatic URLs rotate without notice. --------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-var.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
/* Metric-matched fallbacks so the serif swap causes no reflow and no visible flash. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Times New Roman"), local("Times");
  size-adjust: 106%; ascent-override: 92%; descent-override: 28%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 101%; ascent-override: 103%; descent-override: 28%; line-gap-override: 0%;
}

/* Palette re-synced 2026-07-25 to the Movetic final logo artwork. Every value
   moved off the brand-v3 "locked" spec — the artwork is the physical thing that
   gets printed, so the page follows it rather than the other way round. Sampled
   from sources/brand/lockup-gold-cream.svg (the hero lockup) so the FS monogram's
   gold and the wordmark's cream are literally the same ink as the hairlines,
   eyebrows and buttons sitting next to them.

     was (v3)          now (final artwork)
     --ground  #0F241E  ->  #152720
     --shadow  #09140F  ->  #0E1613
     --brass   #C9A15B  ->  #B99151   (contrast on ground 6.8:1 -> 5.4:1, still AA)
     --cream   #F2EBDD  ->  #EBE1CF
     --sand    #D9C8AE  ->  #CCB99B                                              */
:root {
  --ground:  #152720;
  --shadow:  #0E1613;
  --brass:   #B99151;
  --champ:   #D2AE73;
  --cream:   #EBE1CF;
  --sand:    #CCB99B;

  --brass-metal: linear-gradient(135deg, #8E6E3C 0%, #D6B57E 50%, #8E6E3C 100%);

  --display: "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", serif;
  --body:    "Manrope", "Manrope Fallback", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(1.5rem, 5vw, 4rem);
  --sec: clamp(4.5rem, 11vw, 9rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 760px; }

.section { padding: var(--sec) 0; }
.section--ground { background: var(--ground); }
.section--shadow { background: var(--shadow); }

/* --- brass hairline: a recurring brand element ---------------------------
   Default state is VISIBLE. Only when JS is present do we collapse it so it
   can draw in. If JS fails or the observer never fires, the line is simply
   there — never permanently invisible. -------------------------------- */
.hairline {
  display: block; width: 56px; height: 1px; background: var(--brass);
  transform-origin: left center;
}
.hairline--wide { width: 100%; margin: 3rem 0; opacity: .35; }
.js .hairline { transform: scaleX(0); transition: transform 600ms ease; }
.js .hairline.is-drawn { transform: scaleX(1); }

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 2.25rem;
  display: flex; align-items: center; gap: 1.25rem;
}

.index {
  font-size: 14px; letter-spacing: .22em; color: var(--sand);
  opacity: .5; margin: 3.5rem 0 0;
}

.prose { max-width: 65ch; }
.prose p { margin: 0 0 1.5rem; }
.prose p:last-child { margin-bottom: 0; }
.prose--lead { color: var(--sand); }

/* The flip-book story carries the page, so it gets a shape rather than a slab:
   a display-serif opening line, body prose through the middle, and a brass
   closing line. Both ends are set by position, so editing content/copy.json
   never leaves a stranded style. */
.prose--legacy p:first-child {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.3;
  color: var(--cream); margin-bottom: 2rem;
}
.prose--legacy p:last-child {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.35;
  color: var(--brass); margin-top: 2.25rem;
}
/* A one-paragraph legacy block would match both rules and collide. */
.prose--legacy p:only-child { color: var(--cream); margin: 0; }

.building__lead { margin: 0 0 4rem; }

/* The flip book. It breaks the narrow measure the prose is set to, because the
   object is the evidence for the paragraph above it and should read as larger
   than the text. Warm-toned already, so it needs no scrim — just a brass hairline
   under the caption to tie it to the rest of the page. */
.relic { margin: 3.5rem 0 0; }
.relic img { width: 100%; height: auto; }
.relic figcaption {
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sand); opacity: .7; margin: 1.1rem 0 0;
}
@media (min-width: 900px) {
  /* Pull it wider than .wrap--narrow's 760px measure, without escaping the gutter. */
  .relic { width: calc(100% + 8rem); margin-left: -4rem; }
  .relic figcaption { margin-left: 4rem; }
}

/* ========================================================== HERO ========= */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center;
        overflow: hidden; padding: var(--sec) var(--gut); text-align: center; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,22,19,.62) 0%, rgba(14,22,19,.46) 45%, rgba(14,22,19,.85) 100%);
}
.hero__inner { position: relative; max-width: 720px; }

/* The lockup is artwork now, not type. Width is capped at 300px because the
   brand minimum for the stacked lockup is 160px wide and the SOCIETY tracking
   goes to mush much below that on a phone. */
.mark { position: relative; width: clamp(168px, 26vw, 300px); margin: 0 auto 3rem; }
.mark__lockup { width: 100%; height: auto; animation: fade 1.2s ease both; }

/* One-time brass shimmer, masked to the artwork.
   Two elements on purpose: the mask has to sit on a STATIC parent while the
   gradient moves inside it. Masking and translating the same element drags the
   mask along with the gradient and nothing sweeps.

   Longhands rather than the `mask` shorthand: WebKit's prefixed shorthand has
   never parsed position/size reliably, and getting it wrong tiles the mask.
   Hidden by default and only switched on behind @supports, so a browser without
   masking gets no shimmer instead of a bare rectangle sweeping the photo. */
.mark__shine { display: none; }
@supports ((mask-image: url("#m")) or (-webkit-mask-image: url("#m"))) {
  .mark__shine {
    display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    -webkit-mask-image: url("/assets/img/brand/lockup-gold-cream.svg");
            mask-image: url("/assets/img/brand/lockup-gold-cream.svg");
    -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
    -webkit-mask-position: center;   mask-position: center;
    -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
  }
}
.mark__shine i {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(210,174,115,.55) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: shimmer 1.5s ease-out 1.2s 1 forwards;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { to { transform: translateX(120%); } }

.hero__h1 {
  font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.9rem, 5.2vw, 3.4rem); letter-spacing: .12em; line-height: 1.22;
  margin: 0 0 1.5rem; color: var(--cream);
}
.hero__sub {
  font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sand); margin: 0;
}
/* The what-you-get line under the sub: bays · bar · cap. This is the line that
   does the "it's a simulator club" work for anyone who doesn't parse the photo. */
.hero__stats {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); opacity: .85; margin: 1.1rem 0 0;
}

/* Compact lockup: the hero now also holds a form, so the mark cedes room. */
.mark--compact { width: clamp(120px, 17vw, 190px); margin-bottom: 2rem; }

.btn--fit { width: auto; flex: 0 0 auto; }
.hero__note { font-size: 13px; letter-spacing: .06em; color: var(--sand);
  margin: 1rem 0 0; opacity: .85; }
.hero .ifm__msg { text-align: center; margin-top: .6rem; }
.hero .enter { margin-top: 3rem; }

.enter { display: inline-grid; justify-items: center; gap: .6rem; margin-top: 4.5rem;
         text-decoration: none; color: var(--brass); }
.enter__chev {
  width: 12px; height: 12px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); animation: nudge 2.4s ease-in-out infinite;
}
.enter__word { font-size: 13px; font-weight: 600; letter-spacing: .22em; }
.enter:hover { color: var(--champ); }
@keyframes nudge { 0%,100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(3px,3px); } }

/* ====================================================== FEATURES ========= */
/* Four items: 2x2 on tablet, one row of four on wide screens. */
.features { list-style: none; margin: 0; padding: 0;
            display: grid; gap: 3.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .features { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }
@media (min-width: 1100px) { .features { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }
.feature__num { display: block; font-family: var(--display); font-size: 1.5rem;
                color: var(--brass); margin-bottom: 1rem; }
.feature__title { font-size: 13px; font-weight: 600; letter-spacing: .22em;
                  text-transform: uppercase; color: var(--brass); margin: 0 0 .9rem; }
.feature__body { margin: 0; color: var(--cream); opacity: .88; }

/* ========================================================== WALL ========= */
.wall { position: relative; min-height: 88svh; display: grid; align-items: end;
        overflow: hidden; }
.wall__bg { position: absolute; inset: 0; }
.wall__bg img { width: 100%; height: 100%; object-fit: cover; }
.wall__scrim { position: absolute; inset: 0;
               background: linear-gradient(180deg, rgba(14,22,19,.10) 40%, rgba(14,22,19,.80) 100%); }
.wall__text { position: relative; padding: var(--gut); padding-bottom: clamp(3rem, 8vw, 6rem);
              max-width: 620px; }
.wall__seal { width: clamp(56px, 9vw, 84px); height: auto; margin: 0 0 1.5rem; }
.wall__over { font-size: 13px; font-weight: 600; letter-spacing: .22em;
              text-transform: uppercase; color: var(--brass); margin: 0 0 1rem; }
.wall__body { font-family: var(--display); font-size: clamp(1.3rem, 3.4vw, 2rem);
              line-height: 1.35; margin: 0; color: var(--cream); }
.wall__legal { font-size: 11px; letter-spacing: .04em; color: var(--sand);
               opacity: .55; margin: 1.25rem 0 0; }
/* Ken Burns: 30s, 5%, once, rests at the end state. Gated by JS so it doesn't
   burn its 30 seconds before the section is ever seen. */
.kenburns img { transform: scale(1); }
.js .kenburns.is-running img { animation: kb 30s ease-in-out 1 forwards; }
@keyframes kb { to { transform: scale(1.05); } }

/* ========================================================== FORMS ======== */
.ifm { display: flex; gap: .75rem; flex-wrap: wrap; margin: 2.5rem 0 0; }
/* Hero variant AFTER the base rule — the auto margins must win the cascade
   (defining this before .ifm is exactly the off-center bug of 2026-07-30). */
.ifm--hero { justify-content: center; max-width: 560px; margin: 2.5rem auto 0; }
/* List-section variant: email + optional phone stack, button below. */
.ifm--stack { max-width: 560px; }
.ifm__consent { font-size: 13px; color: var(--sand); opacity: .7; margin: .9rem 0 0;
  max-width: 58ch; }
.ifm__input, .ffm__input {
  flex: 1 1 260px; min-width: 0;
  background: transparent; color: var(--cream);
  border: 1px solid rgba(185,145,81,.45); border-radius: 0;
  padding: .95rem 1.1rem; font-family: var(--body); font-size: 16px;
  transition: border-color 200ms ease;
}
.ifm__input::placeholder, .ffm__input::placeholder { color: rgba(204,185,155,.55); }
.ifm__input:focus, .ffm__input:focus { outline: none; border-color: var(--brass); }

/* ---- multi-step interest capture (email -> mobile -> texted code) ---------
   The form is a column of steps; only one is unhidden at a time. Each step is
   itself a flex row (input + button) so it lays out like the original form. */
.ifm--steps { flex-direction: column; align-items: stretch; }
.ifm__step { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; width: 100%; }
.ifm__step[hidden] { display: none; }
.ifm__steplead { flex-basis: 100%; margin: 0 0 .2rem; font-size: 15px; line-height: 1.5;
  color: var(--sand); max-width: 58ch; }
.ifm--steps .ifm__consent { flex-basis: 100%; }
.ifm__input--code { flex: 0 0 auto; width: 9.5rem; text-align: center;
  letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.ifm__input--code::placeholder { letter-spacing: normal; }
/* quiet secondary action (skip / resend) — a text link, not a .btn */
.ifm__link { flex-basis: 100%; align-self: flex-start; background: none; border: 0;
  padding: .1rem 0; margin: 0; font-family: var(--body); font-size: 14px;
  color: var(--sand); opacity: .8; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; text-align: left; }
.ifm__link:hover { opacity: 1; color: var(--brass); }

.btn { font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .18em;
       text-transform: uppercase; padding: .95rem 2rem; border-radius: 0; cursor: pointer;
       transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.btn--outline { background: transparent; color: var(--brass); border: 1px solid var(--brass); }
.btn--outline:hover { background: var(--brass); color: var(--shadow); }
.btn--solid { background: var(--brass); color: var(--shadow); border: 1px solid var(--brass); width: 100%; }
.btn--solid:hover { background: var(--champ); border-color: var(--champ); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.ifm__msg, .ffm__msg { min-height: 1.4rem; margin: .9rem 0 0; font-size: 15px; color: var(--sand); }
.ifm__msg.is-err, .ffm__msg.is-err { color: #E8A0A0; }

.bridge { margin: 3rem 0 0; font-size: 15px; color: var(--sand); }
.bridge a { color: var(--brass); text-decoration: none; border-bottom: 1px solid rgba(185,145,81,.4);
            transition: color 200ms ease, border-color 200ms ease; }
.bridge a:hover { color: var(--champ); border-color: var(--champ); }

/* ==================================================== FOUNDING CARD ====== */
.card { border: 1px solid rgba(185,145,81,.28); padding: clamp(1.75rem, 5vw, 3.25rem); }
.card__cap { font-family: var(--display); font-size: clamp(1.25rem, 3vw, 1.7rem);
             line-height: 1.4; margin: 0 0 2rem; color: var(--cream); }
.card__inc, .card__save { font-size: 15px; color: var(--sand); margin: 1.25rem 0 0; }
.card__save { color: var(--cream); opacity: .9; }

/* ---- pre-lease founding block ------------------------------------------
   Deliberately quieter than the live card. This one is not selling anything —
   there is nothing to buy until the lease is signed — so it reads as a notice
   rather than an offer. Lighter border, no price display, no form. */
.card--quiet { border-color: rgba(185,145,81,.18); }
.card--quiet .prose { margin: 0; color: var(--cream); }

.gets__label { font-size: 13px; font-weight: 600; letter-spacing: .22em;
               text-transform: uppercase; color: var(--brass); margin: 0 0 1.25rem; }
.gets { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.gets li { position: relative; padding-left: 1.6rem; color: var(--cream); opacity: .9; }
/* Brass tick rather than a bullet — the hairline is the brand's mark, not a dot. */
.gets li::before {
  content: ""; position: absolute; left: 0; top: .8em;
  width: 10px; height: 1px; background: var(--brass);
}

.pending { border-left: 1px solid var(--brass); padding-left: 1.5rem; margin: 3rem 0 0; }
.pending__label { font-size: 13px; font-weight: 600; letter-spacing: .22em;
                  text-transform: uppercase; color: var(--brass); margin: 0 0 .75rem; }
.pending__note { font-size: 15px; color: var(--sand); margin: 0 0 1.75rem; max-width: 58ch; }
/* The button here is an anchor, not a submit — it scrolls to the list. */
.pending .btn { display: inline-block; text-decoration: none; }

.counter { margin: 0 0 2.25rem; }

/* ====================================================== WAVE LADDER ======
   The 160-cap chart: one segment per wave, widths stamped inline by build.js
   from facts (never typed), ticks at the cumulative thresholds, one terms row
   per wave. The founding segment holds #ladder-fill, which the live Stripe
   counter scales on flip day — until then it sits at zero. */
.ladder { margin: 2.5rem 0 0; }
.ladder__track { display: flex; height: 10px; gap: 2px; }
.ladder__seg { position: relative; background: rgba(185,145,81,.16); overflow: hidden; }
.ladder__seg--founding { background: rgba(185,145,81,.34); }
.ladder__seg--early { background: rgba(185,145,81,.28); }
.ladder__seg--third { background: rgba(185,145,81,.22); }
.ladder__seg--fourth { background: rgba(185,145,81,.16); }
.ladder__fill { position: absolute; inset: 0; background: var(--brass-metal);
  transform: scaleX(0); transform-origin: left center; transition: transform 900ms ease; }
.ladder__ticks { position: relative; height: 1.5rem; margin-top: .45rem;
  font-size: 12px; letter-spacing: .08em; color: var(--sand); }
.ladder__tick { position: absolute; transform: translateX(-100%); opacity: .7; }
.ladder__tick--zero { transform: none; }
.ladder__rows { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .8rem; }
.ladder__row { display: grid; grid-template-columns: 5.2rem 1fr; gap: 1rem;
  align-items: baseline; font-size: 15px; }
.ladder__range { font-family: var(--display); font-size: 1.05rem; letter-spacing: .06em;
  color: var(--brass); white-space: nowrap; }
.ladder__row--founding .ladder__terms { color: var(--cream); }
.ladder__row--early .ladder__terms { color: var(--cream); opacity: .85; }
.ladder__row--third .ladder__terms,
.ladder__row--fourth .ladder__terms,
.ladder__row--open .ladder__terms { color: var(--sand); opacity: .8; }
.ladder__note { font-size: 13px; color: var(--sand); opacity: .75; margin: 1.4rem 0 0;
  max-width: 58ch; }
.counter__line { display: flex; align-items: baseline; gap: .55rem; margin: 0 0 .85rem;
                 font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--sand); }
.counter__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brass);
                align-self: center; }
.counter__n { font-family: var(--display); font-size: 1.6rem; letter-spacing: .04em; color: var(--brass); }
.bar { height: 2px; background: rgba(185,145,81,.18); overflow: hidden; }
.bar__fill { height: 100%; background: var(--brass-metal); transform-origin: left center;
             transform: scaleX(0); transition: transform 900ms ease; }
.counter__rem { font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
                color: var(--sand); margin: .85rem 0 0; }

.price { display: flex; align-items: baseline; gap: .4rem; margin: 0; }
.price__amt { font-family: var(--display); font-size: clamp(3rem, 9vw, 4.5rem); line-height: 1;
              color: var(--cream); }
.price__per { font-size: 15px; color: var(--sand); }
.price__note { font-size: 15px; color: var(--sand); margin: .85rem 0 0; }

.dep { border-left: 1px solid var(--brass); padding-left: 1.5rem; margin: 0 0 2rem; }
.dep__label { font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
              color: var(--brass); margin: 0 0 .5rem; }
.dep__amt { font-family: var(--display); font-size: 2.25rem; line-height: 1; margin: 0 0 .75rem;
            color: var(--cream); }
.dep__note { font-size: 15px; color: var(--sand); margin: 0; }

.gift { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 0;
        border-top: 1px solid rgba(185,145,81,.2); border-bottom: 1px solid rgba(185,145,81,.2);
        margin: 0 0 2rem; }
/* height:auto, not a square box — the monogram's ink is 0.97:1, and forcing it
   square is a 3% horizontal stretch on a mark whose own rules forbid stretching. */
.gift__img img { width: 64px; height: auto; flex: none; opacity: .9; }
.gift__label { font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
               color: var(--brass); margin: 0 0 .3rem; }
.gift__title { font-family: var(--display); font-size: 1.4rem; margin: 0 0 .3rem; color: var(--cream); }
.gift__desc { font-size: 15px; color: var(--sand); margin: 0; }

.ffm { display: grid; gap: .75rem; margin: 0; }

/* ========================================================== FAQ ========== */
.accordion__item { border-bottom: 1px solid rgba(185,145,81,.2); }
.accordion__h { margin: 0; }
.accordion__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  background: none; border: 0; padding: 1.6rem 0; cursor: pointer; text-align: left;
  font-family: var(--display); font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--cream);
  transition: color 200ms ease;
}
.accordion__btn:hover { color: var(--brass); }
.accordion__icon { position: relative; width: 12px; height: 12px; flex: none; }
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; background: var(--brass); transition: transform 200ms ease;
}
.accordion__icon::before { inset: 5px 0 auto; height: 1px; }
.accordion__icon::after  { inset: 0 5px auto; width: 1px; height: 100%; }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { transform: scaleY(0); }
.accordion__panel { overflow: hidden; max-height: 0; transition: max-height 300ms ease; }
.accordion__inner { padding: 0 0 1.6rem; }
.accordion__inner p { margin: 0; color: var(--sand); max-width: 65ch; }
/* No-JS: every answer is open and readable. */
html:not(.js) .accordion__panel { max-height: none; }

/* ========================================================= FOOTER ======== */
.footer { background: var(--shadow); text-align: center; padding: var(--sec) var(--gut);
          border-top: 1px solid rgba(185,145,81,.15); }
.footer__mark { width: 48px; height: auto; margin: 0 auto 1.75rem; opacity: .85; }
.footer__line { font-size: 13px; font-weight: 600; letter-spacing: .22em; color: var(--brass); margin: 0 0 .9rem; }
.footer__mail { margin: 0 0 .9rem; font-size: 15px; }
.footer__mail a { color: var(--sand); text-decoration: none; transition: color 200ms ease; }
.footer__mail a:hover { color: var(--brass); }
.footer__ig { display: inline-block; margin-bottom: .9rem; color: var(--brass); font-size: 14px; text-decoration: none; }
.footer__privacy { margin: 0 0 .9rem; font-size: 13px; }
.footer__privacy a { color: var(--sand); opacity: .7; text-decoration: none; }
.footer__privacy a:hover { color: var(--brass); opacity: 1; }
.footer__legal { font-size: 14px; color: var(--sand); opacity: .55; margin: 0; }

/* ============================================= PLATE VIEWER (3D) ========
   Embedded WebGL plate (public/plate.html) in a framed viewer. The frame's
   green interior (?panel=green = --ground) echoes The Wall above it. */
.plate3d {
  margin: 2.75rem 0 1.5rem;
  border: 1px solid rgba(185,145,81,.28);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ground);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
}
.plate3d__frame {
  display: block; width: 100%; aspect-ratio: 3 / 2; border: 0;
  background: var(--ground);
}
.pfm { display: flex; justify-content: center; margin: 0; }
.pfm__input {
  flex: 0 1 340px; min-width: 0; text-align: center;
  background: transparent; color: var(--cream);
  border: 1px solid rgba(185,145,81,.45); border-radius: 0;
  padding: .85rem 1.1rem; font-family: var(--body); font-size: 16px;
  transition: border-color 200ms ease;
}
.pfm__input::placeholder { color: rgba(204,185,155,.55); }
.pfm__input:focus { outline: none; border-color: var(--brass); }
.plate3d__note { margin: 1rem 0 0; font-size: 13px; color: var(--sand); opacity: .6;
  text-align: center; letter-spacing: .01em; }

/* ================================================ SHOWCASE FIGURE =======
   Inline concept renders in "What We're Building". Mirrors the flip-book relic
   treatment: shown as objects, lightly bordered. */
.showcase { margin: 2.75rem 0 1rem; }
.showcase img { display: block; width: 100%; height: auto;
  border: 1px solid rgba(185,145,81,.18); border-radius: 2px; }
.showcase figcaption { margin: .95rem 0 0; font-family: var(--display);
  font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--sand); text-align: center;
  letter-spacing: .01em; }
/* ================================================ TODAY / THE VISION =====
   Before/after pairs: the real site photo beside the render of the same spot.
   Each pair's two images share a forced aspect so the row reads as one unit
   despite different source crops. */
.vision { display: grid; gap: 3.5rem; margin-top: 3.5rem; }
.vision__pair { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .vision__pair { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.vision__cell { position: relative; margin: 0; }
.vision__cell img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border: 1px solid rgba(185,145,81,.18); border-radius: 2px; }
.vision__pair--portrait .vision__cell img { aspect-ratio: 3 / 4; }
.vision__tag { position: absolute; top: .9rem; left: .9rem; z-index: 1;
  font-size: 11px; font-weight: 700; letter-spacing: .22em;
  padding: .35rem .7rem; background: rgba(14,22,19,.72); color: var(--sand); }
.vision__tag--vision { color: var(--champ); }
.vision__cell figcaption { margin: .8rem 0 0; font-family: var(--display);
  font-size: clamp(1rem, 2.2vw, 1.15rem); color: var(--sand); letter-spacing: .01em; }
.vision__legal { font-size: 12px; color: var(--sand); opacity: .55; margin: 2rem 0 0; }

/* ================================================ THE FOUNDING KIT ======= */
.kit { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); margin-top: 3.5rem; }
@media (min-width: 800px) { .kit { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }
.kit__item { margin: 0; }
.kit__item img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border: 1px solid rgba(185,145,81,.18); border-radius: 2px; }
.kit__item figcaption { margin: .8rem 0 0; }
.kit__item strong { display: block; font-family: var(--display); font-weight: 500;
  font-size: 1.05rem; color: var(--cream); }
.kit__item span { display: block; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass); margin-top: .25rem; }

/* ================================================ STICKY MOBILE CTA ======
   Paid-traffic affordance: on phones, the ask stays one thumb away once the
   hero form has scrolled off. site.js shows/hides it; desktop never sees it. */
.stickybar {
  display: none;
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50;
  padding: 1rem; text-align: center; text-decoration: none;
  background: var(--brass); color: var(--shadow);
  font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6);
}
@media (max-width: 799px) { .stickybar:not([hidden]) { display: block; } }

/* ================================================ REDUCED MOTION =========
   Must neutralize INITIAL states too, not just animations. A blanket
   `animation: none` on an element whose starting state is scaleX(0) leaves it
   permanently invisible — an accessibility regression that only affects
   reduced-motion users, so it ships undetected. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .hairline { transform: scaleX(1) !important; }
  .kenburns img { animation: none !important; transform: none !important; }
  .mark__shine { display: none !important; }
  .enter__chev { animation: none !important; }
  .bar__fill { transition: none !important; }
}