/* ============================================================
   The Builders — promo site v2
   Design language: poster / editorial clean-industrial.
   Oversized Oswald type (solid / outline / orange), sharp
   corners, steel panels with rivets, warning-tape dividers,
   numbered spec-sheet sections, one inverted warm-sand block.
   ============================================================ */

:root {
  /* "Industrial construction site" palette:
     60% graphite concrete / matte black metal,
     20% dark wood, 20% construction-yellow #FFCC00 accent */
  --bg: #17191B;
  --charcoal: #22262A;
  --graphite: #2F3538;
  --wood: #43362A;
  --sand: #A9855B;
  --warm-sand: #D8BC8A;
  --accent: #FFCC00;
  --steel: #8E949A;
  --white: #F1F2EE;
  --line: #343A3F;

  /* procedural concrete: fine grain + large mottled stains (seamless SVG noise) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23m)' opacity='0.09'/%3E%3C/svg%3E");

  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Manrope", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --pad: clamp(20px, 4vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  background-image: var(--grain), var(--mottle);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.wrap--narrow { max-width: 860px; }

.dim { color: var(--steel); }

/* ============ Warning tape divider ============ */

.tape {
  height: 10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 18px,
    var(--bg) 18px 36px
  );
  opacity: 0.85;
}

/* ============ Typography ============ */

h1, h2, h3, .statement {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.005em;
}

.statement {
  font-size: clamp(40px, 6vw, 84px);
  margin-bottom: clamp(32px, 4vw, 56px);
  max-width: 19ch;
}
.statement em {
  font-style: normal;
  color: var(--accent);
}
.statement--dark { color: var(--white); }
.statement--dark em { color: var(--accent); }
.statement--center { margin-left: auto; margin-right: auto; text-align: center; }

/* section header — spec-sheet style */
.sechead {
  display: flex;
  align-items: baseline;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.sechead__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--bg);
  background: var(--accent);
  padding: 2px 10px;
}
.sechead__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel);
}
.section--sand .sechead { border-top-color: rgba(241, 242, 238, 0.22); }
.section--sand .sechead__label { color: rgba(241, 242, 238, 0.55); }

/* huge ghost word behind sections */
.section { position: relative; }
.ghostword {
  position: absolute;
  right: -0.05em;
  bottom: -0.18em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(120px, 22vw, 320px);
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ghostword--orange { -webkit-text-stroke-color: rgba(255, 204, 0, 0.25); }
.section > .wrap { position: relative; z-index: 1; }

/* ============ Buttons ============ */

.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: 0;                 /* sharp, industrial */
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn--primary {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 4px 4px 0 rgba(255, 204, 0, 0.25);
}
.btn--primary:hover {
  background: var(--white);
  box-shadow: 4px 4px 0 var(--accent);
}
.btn--ghost {
  background: transparent;
  color: var(--warm-sand);
  border-color: var(--sand);
}
.btn--ghost:hover { background: rgba(200, 164, 106, 0.12); }
.btn--dark {
  background: var(--bg);
  color: var(--white);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}
.btn--dark:hover { background: var(--accent); color: var(--bg); }
.btn--lg { padding: 17px 38px; font-size: 17px; }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--block { width: 100%; }

/* ============ Nav ============ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(23, 25, 27, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px;
  padding: 0 var(--pad);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav__logo {
  height: 42px;
  width: 42px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.nav__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.1em;
  line-height: 1;
}
.nav__name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.3em;
  color: var(--sand);
  margin-top: 4px;
}
.nav__loc {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--steel);
  border-left: 1px solid var(--line);
  padding-left: 10px;
}
.nav__links {
  display: flex;
  gap: 24px;
  margin-left: auto;
}
.nav__links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--steel);
  transition: color 0.15s;
}
.nav__links a i {
  font-style: normal;
  color: var(--accent);
  margin-right: 6px;
}
.nav__links a:hover { color: var(--white); }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.nav__burger span { width: 24px; height: 2px; background: var(--white); }
.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 20px var(--pad) 28px;
  border-top: 1px solid var(--line);
}
.nav__mobile a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
}
.nav__mobile .btn { font-family: var(--font-head); }
.nav__mobile.is-open { display: flex; }

@media (max-width: 1020px) {
  .nav__links, .nav__join, .nav__loc { display: none; }
  .nav__burger { display: flex; }
}

/* ============ Hero ============ */

.hero {
  position: relative;
  min-height: calc(100svh - 74px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
/* Pinned to the viewport height, NOT the .hero element's height — .hero
   can grow taller than one screen when the headline wraps to extra
   lines (small phones), and if the video inherited that stretched
   height, object-fit:cover would zoom in hard to fill it, cropping
   the shot down to one eye. Fixed to 100svh keeps the crop sane
   regardless of how much text sits below the fold. */
.hero__video { position: absolute; top: 0; left: 0; right: 0; height: 100svh; }
.yt-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.85) contrast(1.05);
}
.yt-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  pointer-events: none;
}
/* Narrow/portrait screens still crop some width out of the 16:9
   source even at the correct (viewport-height) scale — bias slightly
   toward the face rather than dead-center. */
@media (max-aspect-ratio: 4/5) {
  .yt-bg video { object-position: 42% 30%; }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(23,25,27,0.72) 0%, rgba(23,25,27,0.35) 40%, rgba(23,25,27,0.05) 68%, transparent 88%),
    linear-gradient(0deg, rgba(23,25,27,0.6) 0%, rgba(23,25,27,0.15) 25%, transparent 48%);
}
/* The desktop scrim is a diagonal fade tuned for the wide 16:9 frame,
   where the face sits off to one side. On a narrow portrait crop the
   face fills the whole width, so that fade leaves the top two-thirds
   of the screen (where the headline sits) almost untouched — text
   was unreadable against skin tone there. Overlay a flat, even scrim
   instead so legibility doesn't depend on where the face lands. */
@media (max-aspect-ratio: 4/5) {
  .hero__scrim {
    background: linear-gradient(0deg, rgba(15,14,12,0.88) 0%, rgba(15,14,12,0.8) 78%, rgba(15,14,12,0.45) 100%);
  }
}
.hero__sound {
  position: absolute;
  right: 1.5rem;
  bottom: calc(var(--specbar-h, 94px) + 1.5rem);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #17191B;
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.hero__sound:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.hero__sound-ico { font-size: 1.25rem; line-height: 1; }
.hero__sound.is-muted { animation: heroSoundPulse 1.8s ease-in-out infinite; }
.hero__sound:not(.is-muted) {
  color: var(--white);
  background: rgba(23,25,27,0.6);
  border-color: rgba(241,242,238,0.4);
}
@keyframes heroSoundPulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 0 0 rgba(255,204,0,0.55); }
  50%      { box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 0 12px rgba(255,204,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__sound.is-muted { animation: none; }
}
@media (max-width: 640px) {
  /* Bottom-right collides with the body copy once the headline wraps
     to 3 lines on a narrow screen — pin it under the nav instead,
     clear of the text column entirely. */
  .hero__sound { top: 1rem; right: 1rem; bottom: auto; padding: 0.6rem 0.95rem; font-size: 0.85rem; }
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: 120px var(--pad) 48px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.hero__pretitle {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-sand);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.chip {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  padding: 3px 10px;
  letter-spacing: 0.14em;
}

.hero__title {
  display: flex;
  flex-direction: column;
  margin-bottom: 36px;
}
.hero__line {
  font-size: clamp(46px, 8vw, 116px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.6);
}
.hero__line--solid { color: var(--white); }
.hero__line--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--warm-sand);
}
.hero__line--orange { color: var(--accent); }

.hero__lower {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 680px;
}
.hero__sub { font-size: 17px; color: var(--white); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__micro {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--sand);
}

/* Small phones: the 3-line display headline plus body copy plus the
   2-row specbar easily overshoots one screen (was measured pushing the
   hero to 1160px+ on a 640px-tall viewport). Tighten everything so the
   whole hero actually fits above the fold instead of forcing a scroll
   before the visitor sees any of it. */
@media (max-width: 480px) {
  .hero__content { padding-top: 84px; padding-bottom: 32px; }
  .hero__pretitle { margin-bottom: 14px; }
  .hero__title { margin-bottom: 20px; }
  .hero__line { font-size: clamp(32px, 10vw, 46px); }
  .hero__lower { gap: 14px; }
  .hero__sub { font-size: 15px; }
  .hero__micro { display: none; }
}
@media (max-height: 700px) {
  .hero__content { padding-top: 76px; padding-bottom: 24px; }
  .hero__title { margin-bottom: 16px; }
  .hero__lower { gap: 12px; }
}

/* spec bar */
.specbar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  background: rgba(23, 25, 27, 0.92);
}
.specbar__cell {
  padding: 16px var(--pad);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--warm-sand);
  border-left: 1px solid var(--line);
}
.specbar__cell:first-child { border-left: 0; }
.specbar__cell b {
  display: block;
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--steel);
  margin-bottom: 3px;
}
@media (max-width: 760px) {
  .specbar { grid-template-columns: repeat(2, 1fr); }
  .specbar__cell:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .specbar__cell:nth-child(4) { border-top: 1px solid var(--line); }
}

/* ============ Sections ============ */

.section {
  padding: clamp(72px, 9vw, 130px) 0;
  overflow: hidden;
}
.section--charcoal {
  background-color: var(--charcoal);
  background-image: var(--grain);
}

/* ============ 01 · Why ============ */

.why {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 860px) { .why { grid-template-columns: 1fr; } }

.why__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.why__list li {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 40px);
  text-transform: uppercase;
  line-height: 1.15;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.why__no {
  color: var(--steel);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 204, 0, 0.7);
  text-decoration-thickness: 3px;
}
.why__yes { color: var(--accent); border-bottom: 0; }
.why__yes::after { content: " ▮"; animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.why__copy p { max-width: 46ch; margin-bottom: 16px; font-size: 17px; }

/* ============ 02 · What (inverted sand) ============ */

/* dark-wood block: warm counterpoint to the concrete (bar / tables vibe) */
.section--sand {
  background-color: var(--wood);
  background-image:
    var(--grain),
    /* subtle vertical plank streaks */
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 28px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 35%);
  color: var(--white);
}
.what {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 900px) { .what { grid-template-columns: 1fr; } }

.what .statement { margin-bottom: 32px; }

/* spec sheet list with dotted leaders */
.spec { margin-bottom: 36px; }
.spec > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px dashed rgba(241, 242, 238, 0.28);
  align-items: baseline;
}
.spec dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(241, 242, 238, 0.6);
}
.spec dd { font-weight: 600; font-size: 15.5px; }

/* ============ Steel panels (video frames) ============ */

.panel {
  position: relative;
  margin: 0;
  background: var(--charcoal);
  border: 1px solid var(--line);
  padding: 10px;
}
/* rivets in the corners */
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--steel);
  box-shadow: 0 1px 1px rgba(0,0,0,0.6) inset;
}
.panel::before { top: 3px; left: 3px; }
.panel::after  { bottom: 3px; right: 3px; }
.panel figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  padding: 10px 4px 2px;
}
.panel--dark { border-color: rgba(23, 25, 27, 0.5); background: var(--bg); }

/* ============ Video embeds (lazy) ============ */

.yt-lazy {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
  filter: saturate(0.9);
}
.yt-lazy video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-lazy.is-playing .yt-lazy__play { display: none; }

.yt-lazy__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border: 1px solid rgba(244, 239, 230, 0.8);
  background: rgba(23, 25, 27, 0.65);
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s, border-color 0.15s;
}
.yt-lazy__play::before {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 15px solid var(--white);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.yt-lazy:hover .yt-lazy__play {
  background: var(--accent);
  border-color: var(--accent);
}

/* ============ 03 · Sessions (editorial rows) ============ */

.row {
  display: grid;
  grid-template-columns: auto 1fr 1.15fr;
  gap: clamp(20px, 3.5vw, 56px);
  align-items: center;
  padding: clamp(32px, 4vw, 56px) 0;
  border-top: 1px solid var(--line);
}
.row--flip .row__text { order: 3; }
.row--flip .panel { order: 2; }
.row--flip .row__index { order: 1; }

.row__index {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}
.row__text h3 {
  font-size: clamp(26px, 3vw, 38px);
  margin-bottom: 12px;
}
.row__text p { color: var(--steel); max-width: 44ch; margin-bottom: 18px; }
.row__link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid rgba(255, 204, 0, 0.4);
  padding-bottom: 3px;
  transition: border-color 0.15s;
}
.row__link:hover { border-color: var(--accent); }

@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; gap: 20px; }
  .row--flip .row__text, .row--flip .panel, .row--flip .row__index { order: 0; }
  .row__index { font-size: 48px; }
}

/* ============ 04 · Fleet ============ */

.fleet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 1100px) { .fleet { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fleet { grid-template-columns: 1fr; } }

.unit {
  background-color: var(--charcoal);
  background-image: var(--grain);
  padding: 0 0 26px;
  transition: background-color 0.2s;
}
.unit:hover { background-color: var(--graphite); }
.unit__media { border-bottom: 1px solid var(--line); }
.unit__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 20px 24px 10px;
}
.unit__head span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.unit__head h3 { font-size: 24px; }
.unit > p {
  padding: 0 24px;
  color: var(--steel);
  font-size: 14.5px;
}

/* ============ 05 · Founding ============ */

.section--founding {
  background-color: var(--bg);
  background-image:
    var(--grain),
    radial-gradient(70% 90% at 85% 20%, rgba(255, 204, 0, 0.08), transparent 60%);
}
.founding {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 900px) { .founding { grid-template-columns: 1fr; } }

.founding__copy { max-width: 48ch; margin-bottom: 28px; font-size: 17px; color: var(--warm-sand); }

.perks {
  list-style: none;
  counter-reset: perk;
}
.perks li {
  counter-increment: perk;
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 17px;
}
.perks li::before {
  content: counter(perk, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
}

/* ============ Proof ============ */

.section--proof {
  background-color: var(--charcoal);
  background-image: var(--grain);
  text-align: center;
}
.proof__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 22px;
}
.proof__copy {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--warm-sand);
  font-size: 17px;
}

/* ============ 06 · FAQ ============ */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color 0.15s;
}
.faq__item summary:hover { color: var(--warm-sand); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 22px;
  flex-shrink: 0;
}
.faq__item[open] summary::after { content: "−"; }
.faq__item p { padding: 0 0 24px; color: var(--steel); max-width: 68ch; }

/* ============ 07 · Join ============ */

.section--join {
  background-color: var(--bg);
  background-image:
    var(--grain),
    linear-gradient(200deg, rgba(255, 204, 0, 0.06), transparent 45%);
}
.join {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .join { grid-template-columns: 1fr; } }

.join__text p { max-width: 46ch; margin-bottom: 14px; font-size: 17px; }

.form {
  position: relative;
  background-color: var(--charcoal);
  background-image: var(--grain);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form__row { display: flex; flex-direction: column; gap: 7px; }
.form label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
}
.form label em { color: var(--accent); font-style: normal; }
.form .optional { color: var(--steel); text-transform: lowercase; letter-spacing: 0.04em; }
.form input,
.form select,
.form textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.form input:focus,
.form select:focus,
.form textarea:focus { border-color: var(--accent); }
.form textarea { resize: vertical; }
.form__micro {
  font-size: 12.5px;
  color: var(--steel);
  text-align: center;
}
.form__error {
  font-size: 13px;
  text-align: center;
  color: #FF7A66;
}
.form__error[hidden] { display: none; }
.form__success {
  position: absolute;
  inset: 0;
  background: var(--charcoal);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 32px;
  z-index: 3;
}
.form__success strong {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 36px;
  text-transform: uppercase;
  color: var(--accent);
}
.form__success p { color: var(--warm-sand); }
/* author display:flex overrides the UA [hidden] rule — restore it */
.form__success[hidden] { display: none; }

/* ============ Footer ============ */

.footer {
  border-top: 1px solid var(--line);
  background-color: var(--charcoal);
  background-image: var(--grain);
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 56px;
  padding-bottom: 44px;
}
.footer__logo {
  height: 120px;
  width: auto;
  border: 1px solid var(--line);
}
.footer__blurb {
  color: var(--steel);
  max-width: 42ch;
  margin-top: 18px;
  font-size: 14.5px;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--steel);
  transition: color 0.15s;
}
.footer__links a:hover { color: var(--white); }
.footer__legal {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--steel);
}

/* ============ Reveal ============ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* staggered hero lines */
.hero__title .reveal:nth-child(2) { transition-delay: 0.12s; }
.hero__title .reveal:nth-child(3) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .why__yes::after { animation: none; }
}