/* ==========================================================================
   Kwita Izina 21 — Volcanoes National Park landing page

   Visual system taken from the FY27 AWF.org Rebuild Figma library
   (file wLAkZtq0EYAZJg1LrF4Jy5). Token names below mirror the Figma
   variable names so they can be traced back to the source.
   ========================================================================== */

:root {

  /* --- Colour ------------------------------------------------------------
     Color/Base/Black, Background/What We Do BG, Color/Green/100,
     Color/Orange/100, Surface/action-hover, Color/Green/Highlight,
     Border/Color/Section Header Rule, Grayscale/Gray/Gray-2 */
  --awf-black:      #020511;
  --awf-maroon:     #250904;
  --awf-green:      #0a3713;
  --awf-orange:     #e97200;
  --awf-orange-hi:  #f09c4c;
  --awf-green-hi:   #32be7f;
  --awf-white:      #ffffff;
  --awf-gray-2:     #e0e0e0;
  --awf-rule:       #808288;

  /* --- Type families ---------------------------------------------------- */
  --font-raleway: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Source Sans 3", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-bitter:  "Bitter", Georgia, "Times New Roman", serif;
  /* Bebas Neue stands in for Bebas Neue Pro; Jost stands in for
     Futura Now Text — neither original is web-licensable here. */
  --font-display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-metric:  "Jost", "Futura", "Century Gothic", sans-serif;

  /* --- Font sizes / line heights ---------------------------------------- */
  --size-14: 14px;  --lh-20: 20px;
  --size-16: 16px;  --lh-22: 22px;
  --size-18: 18px;  --lh-28: 28px;
  --size-20: 20px;  --lh-30: 30px;
  --size-28: 28px;  --lh-32: 32px;
  --size-50: 50px;  --lh-55: 55px;
  --size-60: 60px;  --lh-84: 84px;

  /* --- Spacing (var(--padding-*) in Figma) ------------------------------ */
  --pad-none:    0;
  --pad-xs:      4px;
  --pad-sm:      8px;
  --pad-md:      12px;
  --pad-md-lg:   16px;
  --pad-md-lg-2: 20px;
  --pad-lg:      24px;
  --pad-xl:      32px;
  --pad-xl-2xl:  60px;
  --pad-3xl:     108px;

  /* --- Layout (Width/*) ------------------------------------------------- */
  --container-max: 1320px;
  --w-3col: 312px;
  --w-4col: 424px;
  --w-5col: 534px;

  /* --- Borders & effects ------------------------------------------------ */
  --bw-hair:   1px;   /* Border/Width/ex-ex-sm */
  --bw-thin:   2px;   /* Border/Width/ex-sm */
  --bw-dashed: 3px;   /* Border/Width/sm-dotted */
  --radius-full: 9999px;
  --shadow-overlay: 0 4px 24px rgba(2, 5, 17, 0.3);  /* Overlay Dropshadow */

  --gutter: clamp(1.25rem, 5vw, var(--pad-xl-2xl));
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--awf-black);
  color: var(--awf-white);
  font-family: var(--font-body);
  font-size: var(--size-20);
  font-weight: 500;
  line-height: var(--lh-30);
  overflow-x: hidden;
}

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

::selection { background: var(--awf-orange); color: var(--awf-white); }

:focus-visible {
  outline: var(--bw-thin) solid var(--awf-orange-hi);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Background stack
   Photo layers crossfade per stage; a brand-colour wash multiplies over the
   top so each stage reads in an AWF background colour; the organic ribbon
   pattern sits above that, masked so its colour comes from CSS.
   -------------------------------------------------------------------------- */

.bg-stack {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --wash: var(--awf-maroon);
}

/* Wash colour per stage — set by script.js */
.bg-stack.stage-1 { --wash: var(--awf-white); }
.bg-stack.stage-2 { --wash: var(--awf-green); }
.bg-stack.stage-3 { --wash: var(--awf-maroon); }
.bg-stack.stage-4 { --wash: var(--awf-black); }
.bg-stack.stage-5 { --wash: var(--awf-green); }

.bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: scale(1.06);
  /* Pulled down so the brand colour wash above reads decisively */
  filter: saturate(0.4) contrast(1.06);
  transition: opacity 1.15s var(--ease), transform 2.4s var(--ease);
  will-change: opacity, transform;
}

.bg.is-active {
  opacity: 1;
  transform: scale(1);
}

.bg--1 {
  background-image: url("images/volcanoes-1.jpg");
  background-position: 50% 46%;
}

.bg--2 {
  background-image: url("images/gorilla-family.jpg");
  background-position: 68% 55%;
}

.bg--3 {
  background-image: url("images/gorilla-landscape.jpg");
  background-position: 32% 78%;
  background-size: 145%;
}

.bg--4 {
  background-image: url("images/gorilla-forest.jpg");
  background-position: 40% 40%;
}

.bg--5 {
  background-image: url("images/gorilla-solo.jpg");
  background-position: 58% 30%;
  background-size: 125%;
}

/* Brand colour wash — pulls the photography into the AWF palette.
   `color` blend takes hue + saturation from the token and keeps the photo's
   luminance, so the image stays readable; a multiply pass over the top adds
   the depth the Figma backgrounds have. */
.bg-wash {
  position: absolute;
  inset: 0;
  background-color: var(--wash);
  mix-blend-mode: color;
  opacity: 0.92;
  transition: background-color 1.15s var(--ease);
}

/* Deepen the image in the brand hue. Multiplying with the wash token rather
   than neutral black is what keeps the maroon/green from going grey. */
.bg-scrim {
  position: absolute;
  inset: 0;
  background-color: var(--wash);
  mix-blend-mode: multiply;
  opacity: 0.62;
  transition: background-color 1.15s var(--ease);
}

/* Legibility gradient, mirroring the hero's Color Adjustment layer. It sits
   inside .bg-scrim, so it rides along in that element's multiply group —
   hence the low alphas; anything heavier crushes the photo to black. */
.bg-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(-66deg, rgba(2, 5, 17, 0.3) 4%, rgba(2, 5, 17, 0) 53%),
    linear-gradient(180deg,
      rgba(2, 5, 17, 0.5) 0%,
      rgba(2, 5, 17, 0.1) 32%,
      rgba(2, 5, 17, 0.18) 66%,
      rgba(2, 5, 17, 0.72) 100%);
}

/* Organic ribbon motif (exported from the Figma pattern library) */
.bg-pattern {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bg-pattern::before,
.bg-pattern::after {
  content: "";
  position: absolute;
  background-color: var(--awf-white);
  opacity: 0.11;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

.bg-pattern::before {
  width: 46vw;
  height: 150vh;
  top: -22vh;
  right: -8vw;
  transform: rotate(18deg);
  mask-image: url("images/pattern-ribbon-a.svg");
  -webkit-mask-image: url("images/pattern-ribbon-a.svg");
}

.bg-pattern::after {
  width: 38vw;
  height: 140vh;
  bottom: -26vh;
  left: -12vw;
  transform: rotate(-24deg);
  mask-image: url("images/pattern-ribbon-b.svg");
  -webkit-mask-image: url("images/pattern-ribbon-b.svg");
}

/* --------------------------------------------------------------------------
   Scroll progress — Button Gradient (#E97200)
   -------------------------------------------------------------------------- */

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bw-dashed);
  z-index: 60;
  background: rgba(255, 255, 255, 0.14);
}

.progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--awf-orange), var(--awf-orange-hi));
  transition: width 0.12s linear;
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.topbar {
  position: fixed;
  top: var(--bw-dashed); left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pad-md);
  padding: var(--pad-md-lg) var(--gutter);
  background: linear-gradient(180deg, rgba(2, 5, 17, 0.7), transparent);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease);
}

.topbar.is-stuck {
  background: var(--awf-black);
  padding-block: var(--pad-md);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--pad-md);
  text-decoration: none;
}

.topbar__logos {
  display: flex;
  align-items: center;
  gap: var(--pad-md);
  background: var(--awf-white);
  padding: var(--pad-xs) var(--pad-md);
  border-radius: 999px;
}

.topbar__logo {
  display: block;
  width: auto;
}

.topbar__logo--rdb { height: 22px; }
.topbar__logo--awf { height: 26px; }

.topbar__logo-divider {
  align-self: stretch;
  width: var(--bw-thin);
  background: var(--awf-gray-2);
}

@media (max-width: 720px) {
  .topbar .topbar__cta { display: none; }
  .topbar__logo--rdb { height: 18px; }
  .topbar__logo--awf { height: 21px; }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

main { position: relative; z-index: 10; }

.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(6rem, 14vh, var(--pad-3xl)) 0;
}

.panel--hero { padding-block: clamp(5rem, 11vh, 8rem); }

.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap--narrow { max-width: 860px; }

.wrap--split {
  display: grid;
  grid-template-columns: 1fr var(--w-5col);
  gap: clamp(var(--pad-xl), 5vw, var(--pad-xl-2xl));
  align-items: start;
}

@media (max-width: 980px) {
  .wrap--split { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Type — token-for-token from the Figma text styles
   -------------------------------------------------------------------------- */

/* Headers/Section Title — Raleway Medium 18/22, +0.13em, uppercase */
.section-title {
  margin: 0 0 var(--pad-md);
  font-family: var(--font-raleway);
  font-weight: 500;
  font-size: var(--size-18);
  line-height: var(--lh-22);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--awf-white);
}

/* Headers/H1 — Raleway Bold 50/55, fluid above the token size */
h1 {
  margin: 0 0 var(--pad-lg);
  font-family: var(--font-raleway);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.55rem + 2.6vw, 4rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}

/* Headers/H3 — Raleway Bold 28/32, fluid */
h2 {
  margin: 0 0 var(--pad-lg);
  font-family: var(--font-raleway);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.16;
  text-wrap: balance;
}

/* Headers/H5 — Bitter SemiBold 16/20 */
h3 {
  margin: 0 0 var(--pad-md);
  font-family: var(--font-bitter);
  font-weight: 600;
  font-size: var(--size-16);
  line-height: var(--lh-20);
}

p { margin: 0 0 var(--pad-lg); }

/* Body/B1 — Source Sans 3 Medium 20/30 */
.lede {
  max-width: 32ch;
  font-size: clamp(var(--size-20), 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.4;
  color: var(--awf-white);
}

.body-lg {
  max-width: 58ch;
  font-size: var(--size-20);
  line-height: var(--lh-30);
  color: var(--awf-gray-2);
}

.prose {
  max-width: 62ch;
  margin-top: var(--pad-xl-2xl);
}

.prose p {
  font-size: var(--size-20);
  line-height: var(--lh-30);
  color: var(--awf-gray-2);
}

.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--awf-white); font-weight: 700; }

.statement {
  max-width: 46ch;
  padding-left: var(--pad-lg);
  border-left: var(--bw-dashed) solid var(--awf-orange);
  margin-bottom: var(--pad-xl-2xl);
  font-size: clamp(1.25rem, 1.05rem + 0.95vw, 1.85rem);
  line-height: 1.28;
}

.pullquote {
  max-width: 44ch;
  margin: var(--pad-xl-2xl) 0 var(--pad-xl);
  padding: 0;
  font-family: var(--font-raleway);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.22;
  color: var(--awf-white);
}

.pullquote::before { content: "\201C"; }
.pullquote::after  { content: "\201D"; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: var(--w-5col) 1fr;
  gap: var(--pad-lg);
  align-items: center;
}

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
}

.hero__text { max-width: var(--w-4col); }

/* --------------------------------------------------------------------------
   Why It Matters — Background/Impact band with green dashed rules
   -------------------------------------------------------------------------- */

.impact {
  background: var(--awf-green);
  box-shadow: var(--shadow-overlay);
  padding: var(--pad-xl-2xl) clamp(var(--pad-lg), 4vw, var(--pad-xl-2xl));
  position: relative;
  overflow: hidden;
}

/* Ribbon motif inside the band, as in the Figma BG Graphic - Impact */
.impact::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -6%;
  width: 26%;
  height: 190%;
  background-color: var(--awf-green-hi);
  opacity: 0.09;
  transform: rotate(22deg);
  mask-image: url("images/pattern-ribbon-a.svg");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-image: url("images/pattern-ribbon-a.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  pointer-events: none;
}

/* Impact Metrics/H1 Impact — Bebas 60/84, +0.02em, uppercase */
.impact__title {
  position: relative;
  margin: 0 0 var(--pad-md);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, var(--size-60));
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.impact__row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pad-lg);
  padding-top: var(--pad-lg);
  border-top: var(--bw-dashed) dashed var(--awf-green-hi);
}

.metric {
  flex: 1 1 240px;
  padding-right: var(--pad-lg);
}

.metric + .metric {
  padding-left: var(--pad-lg);
  border-left: var(--bw-dashed) dashed var(--awf-green-hi);
}

@media (max-width: 640px) {
  .metric + .metric {
    padding-left: 0;
    padding-top: var(--pad-lg);
    border-left: 0;
    border-top: var(--bw-dashed) dashed var(--awf-green-hi);
  }
}

/* Impact Metrics/Number Medium — Futura Now Text XBold 50/55 (Jost stand-in) */
.metric__num {
  margin: 0 0 var(--pad-md);
  font-family: var(--font-metric);
  font-weight: 800;
  font-size: clamp(2.25rem, 1.6rem + 2vw, var(--size-50));
  line-height: 1.1;
  color: var(--awf-white);
}

.metric__unit {
  font-size: 0.62em;
  vertical-align: 0.28em;
}

/* Body/B2 — Source Sans 3 Medium 18/22 */
.metric__label {
  margin: 0;
  font-size: var(--size-18);
  line-height: var(--lh-22);
  color: var(--awf-gray-2);
}

/* --------------------------------------------------------------------------
   Program pillars — dashed-divider metric row, per the impact pattern
   -------------------------------------------------------------------------- */

.pillars {
  list-style: none;
  margin: 0;
  padding: var(--pad-lg) 0 0;
  border-top: var(--bw-dashed) dashed var(--awf-rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--pad-lg);
}

.pillar {
  padding-right: var(--pad-lg);
  border-right: var(--bw-dashed) dashed var(--awf-rule);
}

.pillar:last-child { border-right: 0; }

@media (max-width: 1080px) {
  .pillar:nth-child(2n) { border-right: 0; }
}

@media (max-width: 560px) {
  .pillar { border-right: 0; }
}

.pillar__figure {
  display: block;
  margin-bottom: var(--pad-md);
  font-family: var(--font-metric);
  font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 1.6vw, var(--size-50));
  line-height: 1.1;
  color: var(--awf-orange-hi);
}

.pillar__unit {
  font-size: 0.5em;
  vertical-align: 0.4em;
  margin-left: 0.04em;
}

.pillar p {
  margin: 0;
  font-size: var(--size-18);
  line-height: var(--lh-22);
  color: var(--awf-gray-2);
}

.pillar strong { color: var(--awf-white); font-weight: 700; }

/* --------------------------------------------------------------------------
   Media placeholders — square-ish frame with the Overlay Dropshadow
   -------------------------------------------------------------------------- */

.media {
  margin: 0;
  max-width: 100%;
}

.media--wide { margin-top: var(--pad-xl); }

.media__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-content: center;
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--shadow-overlay);
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.05) 0 12px,
      transparent 12px 24px),
    rgba(2, 5, 17, 0.45);
}

.media__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .media__frame { aspect-ratio: 1 / 1; }

@media (max-width: 1080px) {
  .hero .media__frame { aspect-ratio: 16 / 9; }
}

.media__play {
  width: 72px;
  height: 72px;
  border: var(--bw-thin) solid var(--awf-white);
  border-radius: var(--radius-full);
  position: relative;
}

.media__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: 16px solid var(--awf-white);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* Caption/Caption 2 — Source Sans 3 Regular 14/20 */
.media__label {
  margin-top: var(--pad-md);
  font-size: var(--size-14);
  font-weight: 400;
  line-height: var(--lh-20);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--awf-gray-2);
}

/* --------------------------------------------------------------------------
   Buttons — Button-Inputs/BTN 1: Raleway ExtraBold 18/22, +0.10em, pill
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: var(--pad-md-lg) var(--pad-xl);
  font-family: var(--font-raleway);
  font-weight: 800;
  font-size: var(--size-18);
  line-height: var(--lh-22);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: var(--bw-hair) solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease),
              border-color 0.28s var(--ease), transform 0.28s var(--ease);
}

.btn--sm {
  padding: var(--pad-sm) var(--pad-md-lg-2);
  font-size: var(--size-14);
  line-height: var(--lh-20);
}

.btn--solid {
  background: var(--awf-orange);
  color: var(--awf-white);
  border-color: var(--awf-orange);
}

.btn--solid:hover {
  background: var(--awf-orange-hi);
  border-color: var(--awf-orange-hi);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--awf-white);
  border-color: var(--awf-white);
}

.btn--ghost:hover {
  background: var(--awf-white);
  color: var(--awf-black);
  transform: translateY(-2px);
}

.btn--block { width: 100%; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pad-md-lg);
}

/* BTN 1 at its token size wraps on narrow screens — step it down instead */
@media (max-width: 560px) {
  .btn {
    padding: var(--pad-md) var(--pad-lg);
    font-size: var(--size-16);
    line-height: var(--lh-20);
    letter-spacing: 0.08em;
  }
}

/* --------------------------------------------------------------------------
   Scroll cue
   -------------------------------------------------------------------------- */

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--pad-lg);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pad-sm);
  font-family: var(--font-raleway);
  font-weight: 500;
  font-size: var(--size-14);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--awf-gray-2);
}

.scroll-cue span {
  width: var(--bw-thin);
  height: 42px;
  background: linear-gradient(180deg, transparent, var(--awf-orange-hi));
  animation: cue 2.4s var(--ease) infinite;
  transform-origin: top;
}

@keyframes cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* --------------------------------------------------------------------------
   Form — dark surface with white hairline inputs, per the Figma footer form
   -------------------------------------------------------------------------- */

.split__intro { max-width: 52ch; }

.split__intro p {
  font-size: var(--size-18);
  line-height: var(--lh-28);
  color: var(--awf-gray-2);
}

.split__intro .note {
  padding-left: var(--pad-md-lg);
  border-left: var(--bw-dashed) dashed var(--awf-orange);
  color: var(--awf-white);
}

.form {
  background: var(--awf-green);
  box-shadow: var(--shadow-overlay);
  padding: clamp(var(--pad-lg), 3vw, var(--pad-xl-2xl)) clamp(var(--pad-lg), 3vw, var(--pad-xl));
}

.form__title {
  margin-bottom: var(--pad-lg);
  padding-bottom: var(--pad-md);
  border-bottom: var(--bw-dashed) dashed var(--awf-green-hi);
  font-family: var(--font-raleway);
  font-weight: 700;
  font-size: var(--size-28);
  line-height: var(--lh-32);
}

.field { margin-bottom: var(--pad-md-lg); }

/* Utility/Label — Source Sans 3 Medium 16/20 */
.field label,
.field legend {
  display: block;
  margin-bottom: var(--pad-sm);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--size-16);
  line-height: var(--lh-20);
  color: var(--awf-white);
}

.field abbr {
  color: var(--awf-orange-hi);
  text-decoration: none;
  border: 0;
}

.field .opt {
  font-weight: 400;
  color: var(--awf-gray-2);
}

/* Button-Inputs/Input Text — Source Sans 3 SemiBold 18/28 */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  padding: var(--pad-md) var(--pad-md-lg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-18);
  line-height: var(--lh-28);
  color: var(--awf-white);
  background: rgba(2, 5, 17, 0.4);
  border: var(--bw-hair) solid var(--awf-white);
  border-radius: var(--radius-full);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field input::placeholder { color: rgba(255, 255, 255, 0.5); }

.field input:focus {
  outline: none;
  border-color: var(--awf-orange-hi);
  box-shadow: 0 0 0 var(--bw-dashed) rgba(240, 156, 76, 0.3);
}

.field input[aria-invalid="true"] {
  border-color: var(--awf-orange);
  box-shadow: 0 0 0 var(--bw-dashed) rgba(233, 114, 0, 0.28);
}

.field--group {
  margin: 0 0 var(--pad-md-lg);
  padding: 0;
  border: 0;
}

.error {
  margin: var(--pad-sm) 0 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--size-14);
  line-height: var(--lh-20);
  color: var(--awf-orange-hi);
}

/* Scoped to beat the `.field label` rule above */
.field .check,
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--pad-md);
  margin-bottom: var(--pad-sm);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-16);
  line-height: var(--lh-22);
  letter-spacing: normal;
  text-transform: none;
  color: var(--awf-gray-2);
  cursor: pointer;
}

.check input {
  flex: 0 0 auto;
  width: var(--pad-md-lg-2);
  height: var(--pad-md-lg-2);
  margin-top: 1px;
  accent-color: var(--awf-orange);
}

.check--optin {
  margin: var(--pad-md-lg) 0;
  padding-top: var(--pad-md-lg);
  border-top: var(--bw-dashed) dashed var(--awf-rule);
  color: var(--awf-white);
}

/* Footer/F2 — Source Sans 3 Regular 14/20 */
.consent {
  margin: 0 0 var(--pad-lg);
  font-weight: 400;
  font-size: var(--size-14);
  line-height: var(--lh-20);
  color: var(--awf-gray-2);
}

.consent a {
  color: var(--awf-orange-hi);
  text-underline-offset: 2px;
}

.form__status {
  margin: var(--pad-md-lg) 0 0;
  font-size: var(--size-16);
  line-height: var(--lh-22);
  color: var(--awf-orange-hi);
}

.form__status:empty { margin: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 10;
  padding: var(--pad-xl-2xl) 0;
  background: var(--awf-black);
  border-top: var(--bw-dashed) dashed var(--awf-rule);
}

.footer .wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--pad-lg);
  flex-wrap: wrap;
}

.footer__mark {
  font-family: var(--font-raleway);
  font-weight: 800;
  font-size: var(--size-18);
  letter-spacing: 0.1em;
  padding: var(--pad-xs) var(--pad-sm);
  border: var(--bw-thin) solid var(--awf-white);
}

/* Footer/F2 */
.footer p {
  margin: 0;
  max-width: 70ch;
  font-weight: 400;
  font-size: var(--size-14);
  line-height: var(--lh-20);
  color: var(--awf-gray-2);
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.pillar:nth-child(1) { transition-delay: 0.05s; }
.pillar:nth-child(2) { transition-delay: 0.15s; }
.pillar:nth-child(3) { transition-delay: 0.25s; }
.pillar:nth-child(4) { transition-delay: 0.35s; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bg {
    transform: none;
    transition: opacity 0.3s linear;
  }

  .scroll-cue span { animation: none; }
  .btn:hover { transform: none; }
}