/* ============================================================================
   Civilization Idle — site styles
   Palette taken from the game's codex tokens (tailwind.config.js) so the site
   and the product read as one object. One type scale, one spacing scale, one
   icon grid.
   ========================================================================== */

@font-face{font-family:Cinzel;src:url(../fonts/cinzel-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Cinzel;src:url(../fonts/cinzel-latin-600-normal.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Cinzel;src:url(../fonts/cinzel-latin-700-normal.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hanken-grotesk-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hanken-grotesk-latin-500-normal.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hanken-grotesk-latin-600-normal.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../fonts/hanken-grotesk-latin-700-normal.woff2)format("woff2");font-weight:700;font-display:swap}

:root{
  --ink:#33261A;
  --ink-soft:#5A4632;
  --sepia:#6E5A3E;
  --faint:#7A6640;
  --parchment:#E6DABC;
  --vellum:#EFE6CD;
  --vellum-hi:#F6F0DE;
  --line:rgba(122,92,46,.22);
  --line-strong:rgba(122,92,46,.42);
  --bronze:#A5824A;
  --gild:#C9A24A;
  --oxblood:#8A3A2A;
  --oxblood-deep:#6E2C20;
  --leaf:#4E7A32;
  --rust:#A6462F;
  --night:#1B120A;
  --night-2:#241810;
  --cream:#F1E6CB;
  --cream-dim:#BFAE8B;

  /* One spacing scale. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --shell:1200px;
  --radius:16px;
  --radius-sm:10px;
  --display:Cinzel,ui-serif,Georgia,serif;
  --body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.68;
  color:var(--ink);
  background:var(--parchment);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--oxblood);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--oxblood-deep)}
b,strong{font-weight:650}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--s5)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico,.cell-ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--vellum-hi);color:var(--ink);padding:var(--s3) var(--s5);border-radius:0 0 var(--radius-sm) 0;font-weight:600}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--gild);outline-offset:3px;border-radius:6px}

/* ── Type scale ──────────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--oxblood);margin:0 0 var(--s4);
  display:flex;align-items:center;gap:var(--s3);
}
.eyebrow::after{content:"";flex:0 0 56px;height:1px;background:var(--line-strong)}

.h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4.6vw,52px);line-height:1.1;letter-spacing:-.005em;
  margin:0 0 var(--s5);color:var(--ink);text-wrap:balance;
}
.h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.6vw,28px);line-height:1.22;margin:0 0 var(--s4);color:var(--ink)}
.lede{font-size:19px;line-height:1.7;color:var(--ink-soft);max-width:56ch;margin:0 0 var(--s5)}
.lede-wide{max-width:68ch;margin-bottom:var(--s7)}
.quiet{font-size:15.5px;color:var(--sepia)}

.section{padding:var(--s9) 0;position:relative}
.band-parchment{background:var(--parchment)}
.band-vellum{background:var(--vellum)}
.band-dark{background:var(--night-2);color:var(--cream)}
.band-night{background:var(--night);color:var(--cream)}
.band-dark .h2,.band-night .h2{color:var(--cream)}
.band-dark .lede,.band-night .lede{color:var(--cream-dim)}
.band-dark .eyebrow,.band-night .eyebrow{color:var(--gild)}
.band-dark .eyebrow::after,.band-night .eyebrow::after{background:rgba(201,162,74,.45)}

/* Hairline between adjacent light bands. */
.band-parchment + .band-vellum,.band-vellum + .band-parchment{box-shadow:inset 0 1px 0 var(--line)}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .3s,box-shadow .3s}
.site-header.scrolled{background:rgba(20,13,7,.9);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(201,162,74,.22)}
.header-inner{display:flex;align-items:center;gap:var(--s5);min-height:78px}
/* The hero already carries the wordmark at full size; a second copy directly
   above it just reads as a mistake. It fades in once the hero is behind you. */
.brand{flex:0 0 auto;line-height:0;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .3s,transform .3s}
.site-header.scrolled .brand{opacity:1;transform:none;pointer-events:auto}
.brand img{width:clamp(128px,13vw,168px)}

.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s1)}
.nav a{
  font-size:14.5px;font-weight:600;color:var(--cream);text-decoration:none;
  padding:9px 14px;border-radius:9px;transition:background .18s,color .18s;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.nav a:hover{background:rgba(241,230,203,.13)}
.nav .nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(160deg,#2A5B7E,#16394F);
  margin-left:var(--s3);text-shadow:none;color:#EAF6FF;
  box-shadow:inset 0 1px 0 rgba(160,215,245,.26);
}
.nav .nav-cta .ico{width:16px;height:16px;color:#8FD3F6}
.nav .nav-cta:hover{background:linear-gradient(160deg,#35719C,#1D4A67);color:#fff}

.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--cream);border-radius:2px;margin:5px 0;transition:transform .25s,opacity .25s}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{display:none;flex-direction:column;background:rgba(20,13,7,.97);border-top:1px solid rgba(201,162,74,.2);padding:var(--s2) var(--s5) var(--s4)}
.mobile-nav a{color:var(--cream);text-decoration:none;font-weight:600;padding:13px 2px;border-bottom:1px solid rgba(201,162,74,.12)}
.mobile-nav a:last-child{border-bottom:0}
@media (max-width:900px){
  .nav{display:none}
  .nav-toggle{display:block}
  .mobile-nav[hidden]{display:none}
  .mobile-nav:not([hidden]){display:flex}
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--night)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 44%;transform:scale(1.05)}
/* Enough contrast for the copy on the left, while the town on the right stays
   bright — the render is the reason anyone stops on this page. */
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(18,11,6,.94) 0%,rgba(18,11,6,.8) 28%,rgba(18,11,6,.14) 58%,rgba(18,11,6,.34) 100%),
    linear-gradient(to top,rgba(18,11,6,.94) 0%,rgba(18,11,6,.06) 42%);
}
.hero-vignette{position:absolute;inset:0;background:radial-gradient(120% 92% at 64% 42%,transparent 46%,rgba(12,7,3,.5) 100%)}
/* Narrow screens have no clear side to hide the copy on, so the scrim goes
   top-to-bottom instead of left-to-right. */
@media (max-width:900px){
  .hero-scrim{background:linear-gradient(to bottom,rgba(18,11,6,.88) 0%,rgba(18,11,6,.72) 38%,rgba(18,11,6,.95) 100%)}
}

.hero-inner{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:var(--s10);padding-bottom:var(--s6);max-width:calc(var(--shell));width:100%}

/* Status pills: what it is, and where it's going. */
.pills{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s5)}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 11px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;
  border:1px solid rgba(241,230,203,.28);background:rgba(20,13,7,.5);
  color:var(--cream);backdrop-filter:blur(4px);white-space:nowrap;
}
.pill .ico{width:15px;height:15px}
.pill-steam{border-color:rgba(102,192,244,.5);background:rgba(23,42,58,.62);color:#BFE6FA}
.pill-steam .ico{color:#66C0F4}
.pill-new{border-color:rgba(201,162,74,.55);background:rgba(60,42,18,.55);color:#F0DCAC}
.pill-new .ico{color:var(--gild);fill:currentColor;stroke:none}

.hero-headline{
  font-family:var(--display);font-weight:700;color:var(--cream);
  font-size:clamp(44px,7.6vw,92px);line-height:.98;letter-spacing:-.015em;
  margin:0 0 var(--s5);text-shadow:0 4px 30px rgba(0,0,0,.85);
}
.hero-headline em{font-style:normal;color:var(--gild)}
.hero-lede{font-size:clamp(17px,1.9vw,20px);line-height:1.66;color:#DCCFB4;max-width:46ch;margin:0 0 var(--s6);text-shadow:0 2px 16px rgba(0,0,0,.8)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 28px;border-radius:11px;border:0;cursor:pointer;text-decoration:none;color:var(--cream);
  transition:transform .16s,box-shadow .16s,background .16s;
}
.btn .ico{width:16px;height:16px;transition:transform .18s}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ico{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(160deg,var(--oxblood),var(--oxblood-deep));box-shadow:inset 0 1px 0 rgba(255,220,180,.32),0 14px 32px -18px #000}
.btn-primary:hover{background:linear-gradient(160deg,#9C4433,#7C3325);color:var(--cream)}
.btn-ghost{background:rgba(241,230,203,.08);border:1px solid rgba(241,230,203,.4);backdrop-filter:blur(3px)}
.btn-ghost:hover{background:rgba(241,230,203,.17);color:#FFF6E4}
/* Steam's own blue, so the button is recognisable as a Steam link. */
.btn-steam{background:linear-gradient(160deg,#2A5B7E,#16394F);color:#EAF6FF;box-shadow:inset 0 1px 0 rgba(160,215,245,.28),0 14px 32px -18px #000}
.btn-steam:hover{background:linear-gradient(160deg,#35719C,#1D4A67);color:#fff}
.btn-steam .ico{width:19px;height:19px;color:#8FD3F6}
.btn-lg{padding:19px 34px;font-size:14.5px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* Wordmark sits at the foot of the hero, numbers alongside it. */
.hero-foot{
  position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s5) var(--s7);padding-top:var(--s5);padding-bottom:var(--s6);
}
.hero-foot::before{content:"";position:absolute;left:var(--s5);right:var(--s5);top:0;height:1px;background:rgba(201,162,74,.3)}
.hero-logo{width:clamp(190px,22vw,300px);filter:drop-shadow(0 6px 24px rgba(0,0,0,.85))}
.stat-strip{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);margin:0}
.stat-strip>div{display:flex;flex-direction:column-reverse;gap:2px}
.stat-strip dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#A9977A}
.stat-strip dd{margin:0;font-family:var(--display);font-size:clamp(22px,2.6vw,30px);line-height:1;color:var(--gild)}
@media (max-width:760px){
  .hero-foot{flex-direction:column;align-items:flex-start}
  .stat-strip{gap:var(--s4) var(--s5)}
}

/* ── Split (opening) ─────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:var(--s8);align-items:center}
.split-text .lede{margin-bottom:var(--s4)}
.split-text p{color:var(--ink-soft)}
.ticks{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s3)}
.ticks li{position:relative;padding-left:26px;font-size:16px;color:var(--ink-soft)}
.ticks li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;background:var(--gild);transform:rotate(45deg);border-radius:2px}
@media (max-width:920px){.split{grid-template-columns:1fr;gap:var(--s6)}}

/* ── Frames ──────────────────────────────────────────────────────────────── */
.frame-world,.frame-screen{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--night);border:1px solid var(--line-strong);box-shadow:0 30px 60px -34px rgba(27,18,10,.8)}
.frame-world img,.frame-screen img{width:100%}
.frame-world figcaption,.frame-screen figcaption{
  padding:var(--s3) var(--s4);font-size:13.5px;color:var(--cream-dim);
  background:var(--night-2);border-top:1px solid rgba(201,162,74,.18);
}
/* A plaque of fixed height, with the crop centred inside it and never cut.
   The crops come at wildly different aspect ratios (a 2.4:1 worker strip next
   to a 0.6:1 technology card); a fixed media area is what keeps the grid from
   looking accidental. */
/* The plaque shrink-wraps a size-capped crop. Capping the IMAGE rather than the
   plaque keeps every crop as large as it can be while still landing every
   plaque within ~20px of the same height — the crops arrive at wildly different
   aspect ratios (a 2.4:1 worker strip beside a 0.6:1 technology card). */

/* ── Arc ─────────────────────────────────────────────────────────────────── */
.arc-rail{margin-bottom:0}
/* 10 cells: 5 columns wide, 2 columns narrow — no orphan row either way. */
.arc{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:rgba(201,162,74,.2);border:1px solid rgba(201,162,74,.2);border-radius:var(--radius);overflow:hidden;grid-template-columns:repeat(2,1fr)}
@media (min-width:1000px){.arc{grid-template-columns:repeat(5,1fr)}}

.arc-item{background:var(--night-2);padding:var(--s5) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2);transition:background .25s}
.arc-item:hover{background:#2C1E13}
.arc-num{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--gild)}
.arc-item h3{font-family:var(--display);font-size:17px;font-weight:600;margin:0;color:var(--cream)}
.arc-item p{margin:0;font-size:14px;line-height:1.55;color:var(--cream-dim);flex:1}
.arc-gate{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#8E7B5B;margin-top:var(--s2)}

.arc-item.is-veiled{background:#1E140C}
.arc-item.is-veiled .arc-num{color:#7E6A46}
.arc-item.is-veiled h3{color:#9C8C6E}
.arc-item.is-veiled p{color:#7D6E54}

/* The tenth cell states the spoiler policy and closes the grid. */
.arc-item.is-terminal{background:rgba(201,162,74,.07);box-shadow:inset 1px 0 0 rgba(201,162,74,.28)}
.arc-item.is-terminal:hover{background:rgba(201,162,74,.1)}
.arc-item.is-terminal .ico{width:20px;height:20px;color:var(--gild)}
.arc-item.is-terminal h3{color:var(--gild)}
.arc-item.is-terminal p{color:var(--cream-dim)}

/* ── Lead feature ────────────────────────────────────────────────────────── */
.feature-lead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s7);align-items:center;margin-bottom:var(--s8)}
.feature-lead-body p{color:var(--ink-soft);margin:0 0 var(--s4)}
@media (max-width:920px){.feature-lead{grid-template-columns:1fr;gap:var(--s5)}}

/* ── Bento ───────────────────────────────────────────────────────────────── */
/* 12 uniform text cells: 4 rows of 3, 2 rows of 6, then a single column. No
   images live here. Mixing card crops of different sizes, backgrounds and
   internal type scales into a grid is what made this read as assembled rather
   than designed — the crops now have their own band, at their real size. */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.bento{grid-template-columns:1fr}}

.cell{
  display:flex;flex-direction:column;
  background:var(--vellum-hi);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s5);transition:border-color .25s,transform .25s,box-shadow .25s;
}
.cell:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(27,18,10,.6)}
.cell h3{font-family:var(--display);font-size:19px;font-weight:700;line-height:1.28;margin:var(--s4) 0 var(--s2);color:var(--ink)}
.cell p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-soft)}
.cell-ico{width:26px;height:26px;stroke-width:1.5;color:var(--oxblood)}

/* ── Interface showcase ──────────────────────────────────────────────────── */
/* Every crop was captured at 3x and is displayed at exactly one third of that,
   so the game's own type renders at the same size in all of them.
   Two explicit grid rows — images, then captions — so the CARDS line up on a
   shared baseline. Bottom-aligning the whole <figure> instead lets a caption
   that wraps to three lines push its card upward, which is what made this look
   misaligned. */
.plinth{
  display:grid;grid-auto-flow:column;grid-template-rows:auto auto;
  justify-content:center;align-items:end;
  column-gap:var(--s8);row-gap:var(--s4);
  padding:var(--s8) var(--s5) var(--s7);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(241,230,203,.05),rgba(241,230,203,.02));
  border:1px solid rgba(201,162,74,.16);
}
.plinth + .plinth{margin-top:var(--s5)}

.card-shot{display:contents}
.card-shot img{
  width:var(--w);max-width:100%;height:auto;border-radius:10px;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.9),0 0 0 1px rgba(201,162,74,.14);
}
.card-shot figcaption{
  align-self:start;
  font-size:13.5px;line-height:1.5;color:var(--cream-dim);
  text-align:center;max-width:34ch;margin-inline:auto;
}

@media (max-width:900px){
  .plinth{grid-auto-flow:row;grid-template-rows:none;row-gap:var(--s3);justify-items:center;padding:var(--s6) var(--s4)}
  .card-shot figcaption{margin-bottom:var(--s6)}
  .card-shot:last-child figcaption{margin-bottom:0}
}

/* ── Seasons ─────────────────────────────────────────────────────────────── */
.season{overflow:hidden;padding-block:var(--s10)}
.season-bg{position:absolute;inset:0}
.season-bg img{width:100%;height:100%;object-fit:cover;object-position:64% 50%}
.season-scrim{position:absolute;inset:0;background:linear-gradient(94deg,rgba(16,10,5,.96) 0%,rgba(16,10,5,.9) 38%,rgba(16,10,5,.42) 72%,rgba(16,10,5,.7) 100%)}
.season-inner{position:relative;max-width:var(--shell)}
.season-inner .lede{max-width:52ch}
.season-list{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:1px;background:rgba(201,162,74,.22);border:1px solid rgba(201,162,74,.22);border-radius:var(--radius);overflow:hidden;max-width:640px}
.season-list li{background:rgba(20,13,7,.72);padding:var(--s4) var(--s5);display:flex;gap:var(--s4);align-items:baseline;backdrop-filter:blur(2px)}
.season-list b{font-family:var(--display);font-size:15px;color:var(--gild);flex:0 0 92px}
.season-list span{font-size:15px;color:var(--cream-dim);line-height:1.5}
@media (max-width:560px){.season-list li{flex-direction:column;gap:var(--s1)}.season-list b{flex:none}}

/* ── Steam band ──────────────────────────────────────────────────────────── */
.steam-band{
  background:
    radial-gradient(120% 140% at 12% 0%,rgba(38,86,120,.5) 0%,transparent 62%),
    var(--night-2);
}
.steam-band{padding-block:var(--s9);overflow:hidden}
.steam-bg{position:absolute;inset:0}
.steam-bg img{width:100%;height:100%;object-fit:cover;object-position:56% 46%}
.steam-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 120% at 50% 50%,rgba(16,10,5,.82) 0%,rgba(16,10,5,.94) 62%,rgba(16,10,5,.99) 100%),
    linear-gradient(160deg,rgba(30,66,92,.4),transparent 55%);
}
.steam-inner{position:relative;max-width:800px;display:flex;flex-direction:column;align-items:center;text-align:center}
.steam-inner .pill{margin-bottom:var(--s5)}
.steam-inner .lede{max-width:58ch;margin-bottom:var(--s6)}
.steam-actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center}
.steam-note{margin:var(--s5) 0 0;font-size:13.5px;color:#8E7C5C}

/* ── Feedback ────────────────────────────────────────────────────────────── */
.feedback-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start}
@media (max-width:940px){.feedback-wrap{grid-template-columns:1fr;gap:var(--s6)}}

.hints{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s4)}
.hints li{display:flex;gap:var(--s3);align-items:flex-start;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.hints .ico{width:20px;height:20px;color:var(--oxblood);margin-top:3px}
.hints b{color:var(--ink)}

.form{background:var(--vellum-hi);border:1px solid var(--line-strong);border-radius:var(--radius);padding:var(--s6);box-shadow:0 24px 50px -34px rgba(27,18,10,.55)}
.form-note{margin:0 0 var(--s5);font-size:13px;letter-spacing:.06em;color:var(--sepia);padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.form-note b{color:var(--ink);word-break:break-word}

.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sepia);margin-bottom:var(--s2)}
.field .opt{font-weight:500;text-transform:none;letter-spacing:.02em;color:var(--faint)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--vellum);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:13px 14px;transition:border-color .18s,box-shadow .18s,background .18s;
}
.field textarea{resize:vertical;min-height:140px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--vellum-hi);border-color:rgba(138,58,42,.6);box-shadow:0 0 0 3px rgba(138,58,42,.12);
}
.field.invalid input,.field.invalid textarea{border-color:var(--rust);box-shadow:0 0 0 3px rgba(166,70,47,.1)}

.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:2px solid var(--sepia);border-bottom:2px solid var(--sepia);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select-wrap select{appearance:none;padding-right:38px}

.err{margin:6px 0 0;font-size:13.5px;color:var(--rust)}
.err:empty{display:none}
.counter{margin:6px 0 0;font-size:12.5px;color:var(--faint);text-align:right}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-status{margin:var(--s4) 0 0;font-size:15px;line-height:1.6}
.form-status.ok{color:var(--leaf);background:rgba(78,122,50,.09);border:1px solid rgba(78,122,50,.28);border-radius:var(--radius-sm);padding:13px 15px}
.form-status.bad{color:var(--rust);background:rgba(166,70,47,.08);border:1px solid rgba(166,70,47,.28);border-radius:var(--radius-sm);padding:13px 15px}
.form-status.busy{color:var(--sepia)}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer{background:var(--night);color:var(--cream-dim);padding:var(--s8) 0 var(--s7);border-top:1px solid rgba(201,162,74,.18)}
.footer-inner{display:grid;gap:var(--s5);justify-items:center;text-align:center}
.footer-brand img{width:148px;opacity:.94}
.footer-brand p{margin:var(--s3) 0 0;font-family:var(--display);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:#8B7A5B}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:center}
.footer-links a{color:var(--cream-dim);text-decoration:none;font-size:15px}
.footer-links a:hover{color:var(--gild)}
.footer-legal{margin:0;font-size:13.5px;color:#87765A;max-width:56ch}

/* ── Reveal ──────────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width:640px){
  body{font-size:16.5px}
  .shell{padding-inline:20px}
  .section{padding:var(--s8) 0}
  .header-inner{min-height:64px}
  .brand img{width:118px}
  .form{padding:var(--s5)}
  .hero-inner{padding-top:var(--s9)}
  .stat-strip{gap:var(--s4) var(--s6)}
}