/* ==========================================================================
   Diwa Win - site.css
   --------------------------------------------------------------------------
   SYSTEM: "Reel"
   Cinematic and immersive. Full-bleed imagery carries the page; text sits on
   soft tinted surfaces over it. Grouping is done with tint and space, never
   with hairline rules.

   Type      : Archivo (display, variable width) + Instrument Sans (body)
   Surface   : warm near-black. No pure #000.
   Accent    : ONE. Vermilion. #C03A22 fills, #E86A50 text tint (both AA).
               Ivory is a text colour, not a second accent.
   Shape     : ALL SOFT. --r: 12px on every bounded surface, buttons included.
               Documented exceptions, applied consistently and nowhere else:
                 - full-bleed bands touch the viewport edge, so no corners exist
                 - 2px caps on 2px-tall bars (nav underline, burger) and the
                   focus ring, where 12px would swallow the shape
                 - 50% on the two round marks: the FAQ toggle and the list dot
   Rail      : every bounded CONTENT element shares max-width 1200px + 1.5rem.
               Only decorative imagery breaks out to full width.
   Motion    : hero entry (hierarchy), scroll reveal (sequence), press/hover
               (feedback), disclosure (state). Nothing else. No scroll events.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Warm near-black surfaces */
  --bg:    #0A0806;
  --bg-2:  #13100B;
  --bg-3:  #1B1710;
  --bg-4:  #242019;

  /* Text */
  --paper: #F4EDE1;
  --tx:    #DCD4C6;
  --tx-2:  #9C9384;
  --tx-3:  #8A8172;
  --tx-on-accent: #FFF6F2;

  /* Single locked accent */
  --accent:      #C03A22;   /* fills. 5.10:1 with --tx-on-accent */
  --accent-lift: #E86A50;   /* link + eyebrow tint. 6.29:1 on --bg */
  --accent-deep: #942C19;
  --accent-wash: rgba(192, 58, 34, 0.16);

  --line: rgba(244, 237, 225, 0.10);

  /* Type */
  --f-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --f-body:    'Instrument Sans', system-ui, -apple-system, sans-serif;

  /* Shape - one system, all soft */
  --r: 12px;

  /* Rail + rhythm */
  --rail: 1200px;
  --gut:  1.5rem;
  --nav-h: 4.5rem;
  --bay: clamp(4.5rem, 3rem + 5vw, 7.5rem);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.66;
  color: var(--tx);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent-lift); text-decoration: none; }
a:hover { color: #F49279; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--paper);
  margin: 0 0 0.5em;
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-weight: 700;
  font-variation-settings: 'wdth' 108;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 3rem); }
h3 {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  font-variation-settings: 'wdth' 100;
}
h4 { font-size: 0.95rem; font-variation-settings: 'wdth' 100; }

p, ul, ol { margin: 0 0 1.1rem; }
ul, ol { padding-left: 1.15rem; }
li { margin-bottom: 0.5rem; }
strong { font-weight: 600; color: var(--paper); }

::selection { background: var(--accent); color: var(--tx-on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--accent); color: var(--tx-on-accent);
  padding: 0.7rem 1.1rem; border-radius: var(--r); font-weight: 600;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 1rem; color: var(--tx-on-accent); }

/* --------------------------------------------------------------------------
   3. RAIL + BLEED
   Bounded content shares the rail. Only imagery breaks out.
   -------------------------------------------------------------------------- */
.rail {
  width: 100%;
  max-width: var(--rail);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* Nothing below may set a narrower max-width of its own. */
.f-tiles, .f-flow, .f-stack, .f-split, .f-strip, .f-table, .f-prose,
.f-checks, .faq, .stats, .head { width: 100%; max-width: none; }

.bay { padding-block: var(--bay); }
.bay--tight { padding-block: clamp(2.75rem, 2rem + 2.5vw, 4rem); }

/* Section header: no eyebrow, no rule. Type and space only. */
.head { margin-bottom: 2.75rem; }
.head h2 { margin-bottom: 0; }
.head .lede {
  margin: 1.15rem 0 0;
  color: var(--tx-2);
  font-size: 1.06rem;
  max-width: 62ch;   /* section-head measure, permitted inside the rail */
}
.head .lede + .lede { margin-top: 0.85rem; }

.eyebrow {
  display: block;
  font-family: var(--f-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-lift);
  margin-bottom: 1.1rem;
  font-variation-settings: 'wdth' 100;
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn, .btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.92rem 1.7rem;
  border-radius: var(--r);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.14s cubic-bezier(.2,.8,.3,1), background 0.2s ease,
              color 0.2s ease, border-color 0.2s ease;
}
.btn { background: var(--accent); color: var(--tx-on-accent); }
.btn:hover { background: var(--accent-deep); color: var(--tx-on-accent); }
.btn:active { transform: translateY(1px); }

.btn-line {
  background: rgba(244, 237, 225, 0.06);
  border-color: rgba(244, 237, 225, 0.28);
  color: var(--paper);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-line:hover { background: rgba(244, 237, 225, 0.14); color: var(--paper); border-color: var(--paper); }
.btn-line:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   5. HEADER - transparent over the opening image, solid once scrolled
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.28s ease, border-color 0.28s ease;
}
.site-header.is-stuck {
  background: rgba(10, 8, 6, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}

.header-row {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 40px; width: auto; object-fit: contain; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.7rem; }
.nav a {
  position: relative;
  font-size: 0.925rem;
  font-weight: 500;
  color: rgba(244, 237, 225, 0.72);
  padding-block: 0.35rem;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.26s cubic-bezier(.2,.8,.3,1);
}
.nav a:hover, .nav a.active { color: var(--paper); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

.header-cta { flex: none; }
.header-cta .btn { padding: 0.62rem 1.25rem; font-size: 0.875rem; }

.burger {
  display: none; flex: none; margin-left: auto;
  width: 44px; height: 44px;
  background: rgba(244, 237, 225, 0.07);
  border: 1px solid rgba(244, 237, 225, 0.2);
  border-radius: var(--r);
  cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 2px; border-radius: 2px; background: var(--paper);
  transform: translate(-50%, -50%);
  transition: transform 0.26s cubic-bezier(.5,.1,.3,1.2), opacity 0.16s ease;
}
.burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 5.5px)); }
.burger span:nth-child(3) { transform: translate(-50%, calc(-50% + 5.5px)); }
body.nav-open .burger span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg);
  padding: calc(var(--nav-h) + 2rem) var(--gut) 2.5rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity 0.24s ease, visibility 0.24s;
}
body.nav-open .mobile-nav { opacity: 1; visibility: visible; }
.mobile-nav-inner { max-width: var(--rail); margin-inline: auto; }
.mobile-nav a {
  display: block;
  font-family: var(--f-display);
  font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--paper);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:hover { color: var(--accent); }
.mobile-nav .btn { margin-top: 1.8rem; width: 100%; }
.mobile-nav-label {
  font-family: var(--f-display);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--tx-3);
  margin: 2rem 0 0.6rem;
}

/* --------------------------------------------------------------------------
   6. HERO - full-bleed cinematic image, content bottom-left on the rail
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--nav-h));
  padding-top: calc(var(--nav-h) + clamp(3rem, 2rem + 6vw, 7rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  min-height: min(88svh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-art img {
  width: 100%; height: 100%; object-fit: cover;
  /* The generated frame holds its deep black on the right; mirror it so the
     headline sits over the darkest part of the picture. */
  transform: scaleX(-1);
}
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,8,6,0.95) 0%, rgba(10,8,6,0.80) 46%, rgba(10,8,6,0.18) 80%, rgba(10,8,6,0.42) 100%),
    linear-gradient(0deg, var(--bg) 2%, rgba(10,8,6,0.12) 46%, rgba(10,8,6,0.55) 100%);
}
.hero-inner { max-width: 61rem; }
.hero h1 {
  font-size: clamp(2rem, 1.3rem + 2.3vw, 3.05rem);
  margin-bottom: 1.25rem;
}
.hero h1 .em { color: var(--accent-lift); }
.hero-lede {
  font-size: clamp(1.06rem, 1rem + 0.4vw, 1.22rem);
  color: rgba(244, 237, 225, 0.82);
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Stat strip rides the bottom edge of the hero, on the rail */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.stats > div {
  background: rgba(19, 16, 11, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.35rem 1.4rem;
}
.stats .v {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 112;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem);
  letter-spacing: -0.03em;
  color: var(--paper);
  line-height: 1;
}
.stats .k {
  display: block;
  font-size: 0.82rem;
  color: var(--tx-3);
  margin-top: 0.45rem;
}

/* --------------------------------------------------------------------------
   7. PAGE HEAD (inner pages) - same cinematic opening, shorter
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--nav-h));
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 1.8rem + 3vw, 4.5rem));
  padding-bottom: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem);
}
.page-head-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.page-head-art img { width: 100%; height: 100%; object-fit: cover; }
.page-head::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,8,6,0.95) 0%, rgba(10,8,6,0.80) 55%, rgba(10,8,6,0.55) 100%),
    linear-gradient(0deg, var(--bg) 1%, rgba(10,8,6,0.35) 60%);
}
.crumb { font-size: 0.85rem; color: var(--tx-3); margin-bottom: 1.1rem; }
.crumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crumb li { margin: 0; display: inline-flex; gap: 0.5rem; }
.crumb li + li::before { content: '/'; color: var(--tx-3); }
.crumb a { color: var(--tx-2); }
.crumb a:hover { color: var(--accent); }

.page-head h1 { max-width: 24ch; margin-bottom: 1.1rem; }
.page-head .lede { color: rgba(244,237,225,0.82); font-size: 1.08rem; max-width: 60ch; margin-bottom: 1.4rem; }
.byline {
  margin: 0;
  font-size: 0.85rem;
  color: var(--tx-3);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
}
.byline b { font-weight: 600; color: var(--tx-2); }

/* --------------------------------------------------------------------------
   8. FULL-BLEED IMAGE BAND - the chapter break of this design
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  isolation: isolate;
  min-height: clamp(18rem, 12rem + 20vw, 27rem);
}
.band-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.band-art img { width: 100%; height: 100%; object-fit: cover; }
.band::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, var(--bg) 1%, rgba(10,8,6,0.10) 34%, rgba(10,8,6,0.10) 66%, var(--bg) 99%);
}

/* --------------------------------------------------------------------------
   9. LAYOUT FAMILIES
   Grouped by tint and space. No hairline rules anywhere.
   -------------------------------------------------------------------------- */

/* 9a. TILES - soft tinted panels, varied spans */
.f-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}
.f-tiles > article {
  grid-column: span 2;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.9rem 1.75rem;
  transition: background 0.24s ease, transform 0.24s ease;
}
.f-tiles > article:hover { background: var(--bg-3); transform: translateY(-3px); }
.f-tiles > article.wide { grid-column: span 3; }
.f-tiles > article.full { grid-column: 1 / -1; }
.f-tiles > article.lit {
  background: linear-gradient(158deg, var(--accent-wash), var(--bg-2) 58%);
  border-color: rgba(216, 69, 47, 0.3);
}
.f-tiles > article.shot { padding: 0; overflow: hidden; min-height: 15rem; position: relative; }
.f-tiles > article.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f-tiles h3 { margin-bottom: 0.65rem; }
.f-tiles p { color: var(--tx-2); margin: 0; font-size: 0.98rem; }
.f-tiles p + p { margin-top: 0.7rem; }

/* 9b. FLOW - heading with an accent stem, body running in two text columns */
.f-flow > article { margin-bottom: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem); }
.f-flow > article:last-child { margin-bottom: 0; }
.f-flow h3 {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
}
.f-flow .body { columns: 2; column-gap: 3rem; }
.f-flow .body h4 { break-after: avoid; }
.f-flow p { color: var(--tx-2); margin: 0 0 0.85rem; }
.f-flow .body > :last-child { margin-bottom: 0; }

/* 9c. STACK - big generous rows, heading held left, space only */
.f-stack { display: grid; gap: clamp(2.5rem, 1.8rem + 2vw, 4rem); }
.f-stack > article {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 1rem 3rem;
}
.f-stack h3 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  margin: 0;
  color: var(--paper);
}
.f-stack p { color: var(--tx-2); margin: 0; }
.f-stack p + p { margin-top: 0.8rem; }

/* 9d. SPLIT - copy plus a held image */
.f-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
}
.f-split .shot {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.f-split .shot img { width: 100%; height: 100%; object-fit: cover; }
.f-split .body > :last-child { margin-bottom: 0; }
.f-split p { color: var(--tx-2); }
.f-split h3 { margin: 1.75rem 0 0.6rem; }
.f-split h3:first-child { margin-top: 0; }

/* 9e. STRIP - horizontal scroll-snap cards, for lists longer than five */
.f-strip {
  list-style: none;
  padding: 0 0 1rem;
  margin: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.f-strip li {
  margin: 0;
  scroll-snap-align: start;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.4rem;
  color: var(--tx-2);
  font-size: 0.97rem;
}
.f-strip li strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--paper);
  margin-bottom: 0.4rem;
}

/* 9f. CHECKS - short list, accent dot, tinted rows */
.f-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.f-checks li {
  position: relative;
  margin: 0;
  padding: 1.05rem 1.3rem 1.05rem 3rem;
  background: var(--bg-2);
  border-radius: var(--r);
  color: var(--tx-2);
}
.f-checks li::before {
  content: '';
  position: absolute;
  left: 1.3rem; top: 1.55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.f-checks li strong { color: var(--paper); }

/* 9g. TABLE - tinted panel, zebra rows, no rules */
.f-table {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
}
.f-table table { width: 100%; border-collapse: collapse; min-width: 720px; }
.f-table th, .f-table td {
  padding: 0.95rem 1.1rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.94rem;
}
.f-table thead th {
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tx-3);
  line-height: 1.4;
  padding-block: 1.1rem;
}
.f-table tbody tr:nth-child(odd) { background: rgba(244, 237, 225, 0.028); }
.f-table tbody th { font-weight: 600; color: var(--paper); }
.f-table tbody td { color: var(--tx-2); }

/* 9h. PROSE - spans the rail as two text columns */
.f-prose { columns: 2; column-gap: 3.5rem; }
.f-prose h3 { break-after: avoid; margin-top: 0; }
.f-prose p { color: var(--tx-2); margin: 0 0 1.05rem; }
.f-prose p:first-child { color: var(--tx); font-size: 1.12rem; }
.f-prose > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10. FAQ - tinted disclosure cards
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0.6rem; }
.faq details {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.faq details[open] { background: var(--bg-3); border-color: rgba(216, 69, 47, 0.28); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 1.5rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .q {
  font-family: var(--f-display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--paper);
}
.faq .sign {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--tx-on-accent);
  display: grid; place-items: center;
  font-size: 1rem; line-height: 1; font-weight: 600;
  transition: transform 0.26s cubic-bezier(.2,.8,.3,1);
}
.faq details[open] .sign { transform: rotate(135deg); }
.faq .a { padding: 0 1.5rem 1.45rem; }
.faq .a p { color: var(--tx-2); margin: 0; }

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { margin-top: var(--bay); background: var(--bg-2); }

.foot-cta {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem;
  align-items: center;
  background: linear-gradient(120deg, var(--accent-wash), var(--bg-3) 60%);
  border: 1px solid rgba(216, 69, 47, 0.28);
  border-radius: var(--r);
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  margin-top: calc(-1 * var(--bay) / 2);
}
.foot-cta h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); margin-bottom: 0.6rem; }
.foot-cta p { color: var(--tx-2); margin: 0; }
.foot-cta .acts { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: flex-end; }

.foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr));
  gap: 2.5rem 2rem;
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.foot-brand img { height: 46px; width: auto; object-fit: contain; }
.foot-brand p { color: var(--tx-3); font-size: 0.92rem; margin-top: 1.1rem; }
.foot-col h3 {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--tx-3); margin-bottom: 1.15rem;
  font-variation-settings: 'wdth' 100;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: 0.65rem; }
.foot-col a { color: var(--tx-2); font-size: 0.95rem; }
.foot-col a:hover { color: var(--accent); }

.foot-pay { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-bottom: 2rem; }
.foot-pay span {
  font-size: 0.78rem;
  color: var(--tx-3);
  background: var(--bg-3);
  border-radius: var(--r);
  padding: 0.42rem 0.85rem;
}
.foot-base {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  justify-content: space-between;
  padding-block: 1.6rem 2.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--tx-3);
}
.foot-base p { margin: 0; }

/* --------------------------------------------------------------------------
   12. 404
   -------------------------------------------------------------------------- */
.err { padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.err .code {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 118;
  font-size: clamp(5rem, 3rem + 15vw, 14rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--accent-lift);
  margin-bottom: 1.5rem;
}
.err p { color: var(--tx-2); max-width: 52ch; }
.err .acts { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

/* --------------------------------------------------------------------------
   13. MOTION
   -------------------------------------------------------------------------- */
.rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(.2,.8,.3,1), transform 0.6s cubic-bezier(.2,.8,.3,1);
  transition-delay: var(--d, 0ms);
}
.rise.in { opacity: 1; transform: none; }

.hero .lift { animation: lift 0.8s cubic-bezier(.2,.8,.3,1) backwards; }
.hero .lift:nth-child(1) { animation-delay: 0.06s; }
.hero .lift:nth-child(2) { animation-delay: 0.15s; }
.hero .lift:nth-child(3) { animation-delay: 0.24s; }
.hero .lift:nth-child(4) { animation-delay: 0.33s; }
@keyframes lift { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .rise { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav { gap: 1.2rem; }
  .nav a { font-size: 0.875rem; }
  .f-tiles > article, .f-tiles > article.wide { grid-column: span 3; }
}

@media (max-width: 900px) {
  :root { --gut: 1.25rem; }

  .nav, .header-cta { display: none; }
  .burger { display: block; }

  .hero { min-height: min(80svh, 640px); }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(10,8,6,0.92), rgba(10,8,6,0.72)),
      linear-gradient(0deg, var(--bg) 4%, rgba(10,8,6,0.3) 60%);
  }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .f-flow .body { columns: 1; }
  .f-prose { columns: 1; }
  .f-stack > article { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .f-split { grid-template-columns: minmax(0, 1fr); }
  .f-split .shot { position: static; aspect-ratio: 16 / 9; order: -1; }

  .foot-cta { grid-template-columns: minmax(0, 1fr); }
  .foot-cta .acts { justify-content: flex-start; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .f-tiles { grid-template-columns: minmax(0, 1fr); }
  .f-tiles > article,
  .f-tiles > article.wide,
  .f-tiles > article.full { grid-column: 1 / -1; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn, .hero-actions .btn-line { width: 100%; }
  .band { min-height: 16rem; }
}

@media (max-width: 420px) {
  body { font-size: 1rem; }
  .foot-base { flex-direction: column; }
}