/* Amjad Jilani for Mayor — homepage
   Official brand (2026 identity book): Matte Black #28282B 60% · Ivory White #faf4e8 30% · Electric Cyan #0ff0fc 10%
   Headlines: Eveleth Slant (licensed — Archivo Black stands in on web) · Body: IBM Plex Sans */

@font-face {
  font-family: "Eveleth Slant";
  src: url("../fonts/EvelethSlant.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #28282B;
  --ink-2: #222225;
  --panel: #2E2E33;
  --panel-edge: rgba(15, 240, 252, 0.16);
  --cyan: #0ff0fc;
  --cyan-deep: #0aaeb6;
  --red: #ff6b6b;
  --leaf: #0ff0fc;
  --paper: #faf4e8;
  --mut: #a9a395;
  --disp: "Eveleth Slant", "Archivo Black", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --rad: 18px;
  --wrap: 1120px;
  --sec-pad: clamp(64px, 9vw, 110px);
  /* live height of the sticky nav — JS measures it and overwrites this */
  --nav-h: 84px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  overflow-x: clip;
  background:
    radial-gradient(1100px 720px at 10% -6%, rgba(13, 90, 78, 0.55), transparent 62%),
    radial-gradient(950px 760px at 104% 104%, rgba(13, 90, 78, 0.42), transparent 62%),
    radial-gradient(640px 480px at 88% 12%, rgba(15, 240, 252, 0.05), transparent 60%),
    #070a09;
  color: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- ambient canvas ----
   Every page gets the brand mark. Only the landing page also gets the glows and
   drifting lines below — chaos is right for the front door and wrong behind a
   page someone is trying to read. Which layers a page carries is decided by its
   markup, not by a class on the body. */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-mark {
  position: absolute; left: 50%; top: 50%;
  /* Sized against the WIDTH, capped by the height. vmin was the trap: on a
     desktop vmin is the height, so the mark sat at ~68% of the screen width and
     read as a watermark — but on a phone vmin is the width, so the same number
     blew it up past the edges and it read as a giant shape covering everything.
     Driving off vw keeps the same proportion on every display; the svh cap stops
     a landscape phone from overflowing top and bottom instead.
     Alpha is the dial if this ever needs to be quieter or louder. */
  width: min(68vw, 92vh, 1000px);
  width: min(68vw, 92svh, 1000px);
  aspect-ratio: 219 / 178;
  translate: -46% -52%; rotate: -8deg;
  background: linear-gradient(150deg, rgba(15, 240, 252, 0.10), rgba(13, 90, 78, 0.08) 60%);
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
  mask: url("../img/mark.svg") center / contain no-repeat;
  animation: markDrift 70s ease-in-out infinite alternate;
}
@keyframes markDrift {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(-3.5deg) scale(1.05); }
}

/* The loud half of the canvas — three breathing cyan glows and two drifting
   line layers. Deliberately only rendered where the MARKUP asks for them, which
   today is index alone: the landing page wants chaos and pull, every other page
   wants the copy to be the loudest thing on screen. Adding the spans back to a
   page is all it takes to turn this on there. */
.bg-lines {
  position: absolute; inset: -22%;
  background: url("../img/bg-lines.svg") repeat;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, transparent 18%, #000 72%);
  mask-image: radial-gradient(120% 90% at 50% 40%, transparent 18%, #000 72%);
}
.bg-lines-1 { background-size: 900px; animation: bgDrift1 90s ease-in-out infinite alternate; }
.bg-lines-2 { background-size: 1500px; opacity: 0.55; background-position: 400px 250px; animation: bgDrift2 130s ease-in-out infinite alternate; }
@keyframes bgDrift1 { from { transform: translate3d(-1.5%, -1%, 0); } to { transform: translate3d(1.5%, 1.6%, 0); } }
@keyframes bgDrift2 { from { transform: translate3d(1.2%, 0.6%, 0); } to { transform: translate3d(-1.4%, -1.2%, 0); } }

.bg-glow {
  position: absolute; width: 58vmax; height: 58vmax; border-radius: 50%;
  /* the long gradient fade IS the blur — a filter here re-rasterizes a huge
     layer and murders older GPUs for an identical look */
  background: radial-gradient(circle, rgba(38, 155, 255, 0.22), rgba(15, 240, 252, 0.12) 38%, rgba(13, 90, 120, 0.06) 56%, rgba(13, 90, 120, 0.02) 72%, transparent 86%);
  mix-blend-mode: screen; will-change: transform, opacity;
}
.bg-glow-1 { top: -22%; left: -14%; animation: glowDrift1 17s ease-in-out infinite alternate; }
.bg-glow-2 { bottom: -26%; right: -16%; animation: glowDrift2 23s ease-in-out infinite alternate; }
.bg-glow-3 {
  width: 42vmax; height: 42vmax; top: 34%; left: 28%;
  background: radial-gradient(circle, rgba(30, 120, 255, 0.18), rgba(15, 240, 252, 0.09) 42%, rgba(15, 240, 252, 0.03) 66%, transparent 84%);
  animation: glowDrift3 28s ease-in-out infinite alternate;
}
@keyframes glowDrift1 {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.65; }
  50%  { opacity: 1; }
  to   { transform: translate3d(12%, 9%, 0) scale(1.28); opacity: 0.75; }
}
@keyframes glowDrift2 {
  from { transform: translate3d(0, 0, 0) scale(1.16); opacity: 1; }
  50%  { opacity: 0.55; }
  to   { transform: translate3d(-11%, -12%, 0) scale(0.9); opacity: 1; }
}
@keyframes glowDrift3 {
  from { transform: translate3d(-6%, 4%, 0) scale(0.92); opacity: 0.5; }
  50%  { opacity: 0.95; }
  to   { transform: translate3d(8%, -7%, 0) scale(1.2); opacity: 0.6; }
}

/* ---- loading screen ---- */
.loader { display: none; }
html.js .loader {
  position: fixed; inset: 0; z-index: 200;
  background: #050807;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
html.js .loader.done { opacity: 0; visibility: hidden; }
html.is-loading { overflow: hidden; }
.loader-leaf {
  width: 46px; height: 38px;
  background: var(--cyan);
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
  mask: url("../img/mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 18px rgba(15, 240, 252, 0.55));
  animation: loaderPulse 1.2s ease-in-out infinite;
}
.loader-track {
  width: min(240px, 56vw); height: 2px; border-radius: 2px;
  background: rgba(250, 244, 232, 0.12); overflow: hidden;
}
.loader-track span {
  display: block; height: 100%; width: 100%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
  transform: translateX(-100%);
  animation: loaderFill 1.7s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}
@keyframes loaderFill { to { transform: translateX(0); } }
@keyframes loaderPulse { 50% { opacity: 0.55; } }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.sec { padding: calc(var(--sec-pad) / 2) 0; position: relative; }
.grid-2 { display: grid; gap: 44px; align-items: center; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--cyan); color: var(--ink); padding: 10px 16px; font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }
.hp { display: none; }

/* ---- type ---- */
h1, h2, h3 { font-family: var(--disp); text-transform: uppercase; line-height: 1.04; letter-spacing: 0.01em; }
/* display headlines: paper fill with fine internal grain (matches the small motto's texture) */
h1, h2 {
  color: transparent;
  background:
    url("../img/grain.svg") repeat,
    linear-gradient(180deg, var(--paper), var(--paper));
  background-size: 150px 150px, 100% 100%;
  background-blend-mode: multiply, normal;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 26px rgba(250, 244, 232, 0.3));
}
h1 { font-size: clamp(2.1rem, 8.4vw, 4.2rem); }
h2 { font-size: clamp(1.55rem, 5vw, 2.5rem); margin-bottom: 0.55em; }
h3 { font-size: 1rem; letter-spacing: 0.05em; }
.center { text-align: center; }
.glow { color: var(--cyan); text-shadow: 0 0 28px rgba(15, 240, 252, 0.5); }

.eyebrow {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 14px;
}
.sublabel {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mut); margin-top: 18px;
}
.sec-copy > p { color: var(--mut); max-width: 46ch; }

/* ---- per-clip comments: labeled, float in beside the centered reel ---- */
.reel-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.reel-col { display: flex; flex-direction: column; align-items: center; }
.reel-comments {
  width: min(300px, 82vw);
  display: flex; flex-direction: column; gap: 9px;
}
/* label so it reads clearly as comments, not floating words */
.rc-head {
  display: flex; align-items: center; gap: 7px; margin: 0 0 3px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cyan);
}
.rc-ic { display: inline-flex; }
.rc-ic svg { width: 15px; height: 15px; fill: none; stroke: var(--cyan); stroke-width: 1.7; stroke-linejoin: round; }
.rc-bub {
  background: rgba(22, 22, 25, 0.72); border: 1px solid var(--panel-edge);
  border-radius: 4px 14px 14px 14px; padding: 12px 15px; text-align: left;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rc-txt { color: var(--paper); font-size: 0.9rem; line-height: 1.45; margin: 0; }
/* entrance: header, then each bubble, rise and settle one after another.
   JS never touches these — driven purely by the slide's .is-active class. */
.reel-comments > * {
  opacity: 0; transform: translateY(18px) scale(0.96);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rslide.is-active .reel-comments > * { opacity: 1; transform: none; }
.rslide.is-active .reel-comments > *:nth-child(1) { transition-delay: 0.12s; }
.rslide.is-active .reel-comments > *:nth-child(2) { transition-delay: 0.26s; }
.rslide.is-active .reel-comments > *:nth-child(3) { transition-delay: 0.40s; }
.rslide.is-active .reel-comments > *:nth-child(4) { transition-delay: 0.54s; }
/* settled idle drift on the bubbles so they feel alive */
.rslide.is-active .rc-bub { animation: rcFloat 7s ease-in-out infinite; }
.rslide.is-active .rc-bub:nth-of-type(2) { animation-delay: -2.3s; }
.rslide.is-active .rc-bub:nth-of-type(3) { animation-delay: -4.6s; }
@keyframes rcFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* desktop: video stays centered; comments float into the right margin as an
   overlay, so the video never shifts across slides. */
@media (min-width: 980px) {
  .reel-carousel.reveal { max-width: 900px; }
  .reel-comments {
    position: absolute; top: 46%; transform: translateY(-50%);
    left: calc(50% + 168px); width: 250px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reel-comments > * { transition: opacity 0.3s ease; transform: none; }
  .rslide.is-active .rc-bub { animation: none; }
}

/* ---- WhatsApp slide-in prompt (built by main.js) ---- */
.wa-pop {
  position: fixed; z-index: 60; right: 20px; bottom: 20px; width: min(320px, calc(100vw - 40px));
  background: rgba(20, 24, 23, 0.92); border: 1px solid rgba(37, 211, 102, 0.4);
  border-radius: 18px; padding: 16px 18px 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translateY(160%); opacity: 0; pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.wa-pop.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.wa-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wa-pop-ic {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; background: rgba(37, 211, 102, 0.14);
}
.wa-pop-ic svg { width: 20px; height: 20px; fill: none; stroke: #25d366; stroke-width: 1.6; stroke-linejoin: round; }
.wa-pop-ic svg .fill { fill: #25d366; stroke: none; }
.wa-pop-t { font-weight: 700; font-size: 0.95rem; color: var(--paper); }
.wa-pop-close {
  margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--mut);
  font-size: 1.3rem; line-height: 1; padding: 2px 4px; border-radius: 8px;
}
.wa-pop-close:hover { color: var(--paper); }
.wa-pop-sub { color: var(--mut); font-size: 0.85rem; line-height: 1.5; margin: 0 0 14px; }
.wa-pop .btn-wa { width: 100%; padding: 11px 18px; font-size: 0.78rem; }
@media (prefers-reduced-motion: reduce) {
  .wa-pop { transition: opacity 0.3s ease; transform: none; }
}

a { color: var(--cyan); }

/* ---- buttons ---- */
.btn {
  display: inline-block; font-family: var(--body); font-weight: 800;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 13px 24px; cursor: pointer;
  text-decoration: none; text-align: center; border: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-solid {
  background: var(--cyan); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(15, 240, 252, 0.4), 0 6px 28px rgba(15, 240, 252, 0.22);
}
.btn-solid:hover { box-shadow: 0 0 0 1px var(--cyan), 0 8px 34px rgba(15, 240, 252, 0.4); }
.btn-line {
  background: transparent; color: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--panel-edge);
}
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--cyan); color: var(--cyan); }
.btn-off { opacity: 0.45; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---- nav ---- */
.nav-wrap { position: sticky; top: 0; z-index: 50; padding: 12px 16px; }
.nav {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(170deg, rgba(26, 34, 32, 0.55), rgba(10, 14, 13, 0.62));
  backdrop-filter: blur(12px) saturate(1.35); -webkit-backdrop-filter: blur(12px) saturate(1.35);
  border: 1px solid rgba(15, 240, 252, 0.18); border-radius: 999px; padding: 9px 12px 9px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 44px rgba(0, 0, 0, 0.38);
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--paper); }
.leaf {
  width: 30px; height: 25px; flex: none; display: inline-block;
  background: var(--leaf);
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
  mask: url("../img/mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(15, 240, 252, 0.45));
}
.nav-name {
  font-family: var(--disp); font-size: 0.6rem; line-height: 1.15;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.nav-cta { padding: 11px 18px; font-size: 0.7rem; }
.nav-links { display: flex; gap: clamp(9px, 2.4vw, 26px); }
.nav-links a {
  font-family: var(--mono); font-size: clamp(0.6rem, 2.5vw, 0.72rem); letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; color: var(--mut);
  white-space: nowrap; transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--paper); }
.nav-links a[aria-current="page"] { color: var(--cyan); }
/* Narrow phones: four links + brand + the Join button cannot share one row at a
   legible size — shrinking the type to ~8.3px to make it fit is unreadable for a
   good share of voters. Two rows instead: brand and the Join CTA on top, links
   below. The pill softens to a rounded block so the second row doesn't look broken. */
@media (max-width: 559px) {
  .nav {
    flex-wrap: wrap; justify-content: space-between;
    row-gap: 9px; padding: 10px 14px; border-radius: 22px;
  }
  .nav-brand { gap: 8px; }
  .leaf { width: 26px; height: 22px; }
  /* pushed past the CTA so it takes the second row on its own */
  .nav-links {
    order: 2;
    width: 100%; justify-content: space-between;
    gap: 4px; padding-top: 8px;
    border-top: 1px solid rgba(15, 240, 252, 0.12);
  }
  .nav-links a { letter-spacing: 0.04em; }
  .nav-cta { padding: 9px 15px; font-size: 0.64rem; }
}

/* ---- hero ---- */
.hero { position: relative; padding: 42px 0 30px; }
.hero-grid { display: grid; gap: 44px; align-items: center; position: relative; }
.hero-sub { color: var(--mut); font-size: 1rem; max-width: 40ch; margin: 20px 0 28px; }
.hero-claim { display: block; margin-top: 16px; }

.capture { display: flex; gap: 10px; flex-wrap: wrap; }
.sec-copy .capture { margin-top: 22px; }
.capture .cf-turnstile { flex-basis: 100%; }
.capture input[type="email"] {
  flex: 1 1 190px; min-width: 0;
  background: rgba(10, 16, 15, 0.7); color: var(--paper);
  border: 1px solid var(--panel-edge); border-radius: 999px;
  padding: 13px 20px; font: 500 0.95rem var(--body);
}
.capture input::placeholder { color: var(--mut); }
.capture input:focus { border-color: var(--cyan); outline: none; }

.fineprint { font-family: var(--mono); font-size: 0.7rem; color: var(--mut); margin-top: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.fineprint a { color: var(--mut); }
.proof { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 0.85rem; color: var(--mut); }
.proof strong { color: var(--cyan); font-variant-numeric: tabular-nums; }
.proof-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---- reels ---- */
.reel { max-width: 290px; margin: 0 auto; animation: floatY 8s ease-in-out infinite; }
.reel-screen {
  position: relative; aspect-ratio: 9 / 15.5; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--panel-edge);
  background:
    radial-gradient(220px 200px at 70% 25%, rgba(15, 240, 252, 0.16), transparent 70%),
    linear-gradient(160deg, #1d2724, #101614 60%, #0a0f0d);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6), 0 0 46px rgba(15, 240, 252, 0.08);
  display: flex; align-items: center; justify-content: center;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease;
  will-change: transform;
}
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.reel-handle {
  position: absolute; top: 12px; left: 12px;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
  background: rgba(22, 22, 25, 0.72); border: 1px solid var(--panel-edge);
  border-radius: 999px; padding: 4px 10px 4px 4px; color: var(--cyan);
  text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease;
}
a.reel-handle:hover { border-color: var(--cyan); background: rgba(22, 22, 25, 0.9); }
.reel-avatar {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(140deg, var(--cyan), var(--cyan-deep));
}
.reel-title {
  position: absolute; bottom: 20px; left: 16px; right: 16px;
  font-weight: 700; font-size: 0.95rem; line-height: 1.3;
}
.reel-caption {
  position: absolute; bottom: 14px; left: 16px; right: 16px;
  font-family: var(--mono); font-size: 0.66rem; color: var(--mut); letter-spacing: 0.04em;
}
.reel-play {
  width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(22, 22, 25, 0.55); backdrop-filter: blur(6px); cursor: pointer;
  display: grid; place-items: center; transition: transform 0.15s ease;
}
.reel-play:hover { transform: scale(1.06); }
.reel-play span {
  width: 0; height: 0; margin-left: 4px;
  border: 10px solid transparent; border-left: 17px solid var(--paper); border-right: 0;
}
.reel-tilt { animation: floatTilt 10s ease-in-out infinite; }
@keyframes floatTilt {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(-2.1deg); }
}
.dots { display: flex; gap: 7px; justify-content: center; margin-top: 18px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(169, 163, 149, 0.35); }
.dot.is-on { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

/* ---- receipt ---- */
.receipt-col { max-width: 470px; width: 100%; margin: 0 auto; }
.receipt {
  font-family: var(--mono);
  background: linear-gradient(170deg, rgba(23, 31, 29, 0.96), rgba(9, 13, 12, 0.96));
  border: 1px solid var(--panel-edge); border-radius: 20px;
  padding: 32px 26px 26px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 50px rgba(15, 240, 252, 0.05);
  position: relative;
  rotate: -1.4deg;
  transition: rotate 0.35s ease;
}
.receipt:hover { rotate: 0deg; }
.receipt::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: -9px; height: 9px;
  background:
    linear-gradient(135deg, var(--paper) 25%, transparent 25%) -5px 0 / 10px 10px repeat-x,
    linear-gradient(-135deg, var(--paper) 25%, transparent 25%) -5px 0 / 10px 10px repeat-x;
  opacity: 0.9;
}
.receipt-head { font-weight: 600; font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }
.receipt-subhead { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: var(--mut); margin: 5px 0 18px; }
.receipt-lines { list-style: none; }
.receipt-lines li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 0.82rem; padding: 11px 16px; margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(15, 240, 252, 0.07);
  border-radius: 10px; color: var(--paper);
}
.receipt-lines b { color: var(--red); font-weight: 600; white-space: nowrap; }
.receipt-total {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  border-top: 1.5px dashed rgba(169, 163, 149, 0.4); margin-top: 12px; padding: 12px 2px 0;
}
.receipt-note { font-size: 0.7rem; color: var(--mut); margin-top: 14px; line-height: 1.6; }

.chip {
  display: inline-block; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan);
  border: 1px dashed rgba(15, 240, 252, 0.45); border-radius: 999px;
  padding: 7px 14px; margin-top: 18px; line-height: 1.6;
}
.chip-center { display: table; margin: 0 auto 36px; }

/* ---- actions ---- */
.actions-sec h2 { margin-bottom: 40px; }
.cards { display: grid; gap: 18px; }
.card {
  background: linear-gradient(170deg, rgba(24, 33, 31, 0.5), rgba(9, 13, 12, 0.55));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(15, 240, 252, 0.14); border-radius: var(--rad);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 54px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-5px); border-color: rgba(15, 240, 252, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 64px rgba(0, 0, 0, 0.45), 0 0 34px rgba(15, 240, 252, 0.1);
}
.card-head { display: flex; align-items: center; gap: 12px; }
.card p { color: var(--mut); font-size: 0.9rem; flex: 1; }
.card .btn { align-self: center; min-width: 60%; }
.card-ico {
  color: var(--cyan); width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--panel-edge); background: rgba(15, 240, 252, 0.06);
}
.card-ico svg { width: 20px; height: 20px; stroke: var(--cyan); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-off { opacity: 0.55; }

/* ---- clips ---- */
.comment {
  margin-top: 22px; background: rgba(10, 16, 15, 0.75);
  border: 1px solid var(--panel-edge); border-radius: 16px; padding: 16px 18px;
  max-width: 380px;
}
.comment-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.comment-user { font-family: var(--mono); font-size: 0.7rem; color: var(--cyan); letter-spacing: 0.06em; }
.comment-body { font-size: 0.92rem; }

.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font: 700 0.62rem var(--body); color: var(--ink); letter-spacing: 0.02em;
  background: linear-gradient(140deg, var(--cyan), var(--cyan-deep));
}

/* ---- who ---- */
.who-sec { overflow: clip; }
.who-grid { align-items: center; }
.qmark {
  position: absolute; font-family: var(--disp); line-height: 1;
  pointer-events: none; user-select: none; z-index: 0;
  background:
    linear-gradient(120deg, rgba(255, 90, 180, 0.14), rgba(80, 220, 255, 0.16) 38%, rgba(255, 220, 90, 0.12) 68%, rgba(180, 120, 255, 0.12)),
    linear-gradient(150deg, #fbfbf7 4%, #9aa09c 24%, #eef1ee 40%, #454b48 58%, #e6eae7 74%, #6f7572 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 26px rgba(15, 240, 252, 0.08));
}
.qmark-l { font-size: clamp(9rem, 20vw, 16rem); left: -0.04em; bottom: -0.1em; rotate: -14deg; }
.qmark-r { font-size: clamp(8rem, 17vw, 14rem); right: -0.03em; top: -0.08em; rotate: 12deg; }
.qmark-s {
  font-size: clamp(3.4rem, 7vw, 5.5rem); left: 13%; top: 6%; rotate: 24deg; opacity: 0.85;
  filter: blur(1.5px) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.4));
  animation: qFloat 7s ease-in-out infinite;
}
.qmark-f {
  font-size: clamp(10rem, 24vw, 19rem); right: 12%; bottom: -18%; rotate: -8deg; opacity: 0.5;
  filter: blur(7px);
  animation: qFloat 13s ease-in-out infinite reverse;
}
@keyframes qFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.who-sec .wrap { position: relative; z-index: 1; }

.qa { max-width: 520px; width: 100%; margin: 0 auto; }
.qa-deck { position: relative; }
.qa-deck::before, .qa-deck::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--rad);
  background: rgba(24, 33, 31, 0.5); border: 1px solid rgba(15, 240, 252, 0.08);
  z-index: 0;
}
.qa-deck::before { transform: translate(10px, -10px) rotate(1.2deg); }
.qa-deck::after { transform: translate(20px, -20px) rotate(2.4deg); opacity: 0.5; }
.qa-card {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(170deg, rgba(25, 34, 32, 0.92), rgba(9, 13, 12, 0.94));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 240, 252, 0.16); border-radius: var(--rad);
  padding: 28px 26px; min-height: 190px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 26px 60px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(36px) rotate(3.5deg) scale(0.96);
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.33, 1, 0.4, 1), transform 0.6s cubic-bezier(0.33, 1, 0.4, 1);
}
.qa-card.is-active {
  position: relative; opacity: 1; transform: none; pointer-events: auto;
}
.qa-card.is-leaving {
  opacity: 0; transform: translateY(-36px) rotate(-3.5deg) scale(0.96);
}
.qa-card h3 {
  display: inline-block; background: var(--cyan); color: var(--ink);
  padding: 7px 13px; border-radius: 9px; margin-bottom: 14px;
}
.qa-card p { color: var(--mut); }
.qa-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.qa-btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--cyan); font-size: 1rem;
  border: 1.5px solid rgba(15, 240, 252, 0.4); transition: border-color 0.15s ease, background 0.15s ease;
}
.qa-btn:hover { border-color: var(--cyan); background: rgba(15, 240, 252, 0.08); }

/* ---- voices ---- */
.voice { display: flex; flex-direction: column; gap: 14px; }
.quote {
  position: relative; flex: 1;
  background: linear-gradient(170deg, rgba(24, 33, 31, 0.8), rgba(9, 13, 12, 0.85));
  border: 1px solid var(--panel-edge); border-radius: var(--rad);
  padding: 24px 22px;
}
.quote p { font-size: 0.9rem; }
.qg {
  position: absolute; top: 2px; right: 14px;
  font-family: var(--disp); font-size: 3rem; line-height: 1; color: var(--cyan); opacity: 0.55;
}
.voice-by { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.voice-name { display: flex; flex-direction: column; line-height: 1.25; }
.voice-name b { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.voice-name i { font-style: normal; font-family: var(--mono); font-size: 0.68rem; color: var(--mut); text-transform: uppercase; letter-spacing: 0.08em; }
.check { width: 18px; height: 18px; margin-left: auto; fill: var(--cyan); }
.check circle { fill: var(--cyan); }
.check .tick { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- final ---- */
.final-grid { align-items: start; }
/* final CTA: everything on the center line */
.final-wrap { max-width: 600px; margin: 0 auto; text-align: center; }
.final-wrap .sec-copy > p { margin-left: auto; margin-right: auto; }
.final-wrap .cd-grid { justify-content: center; }
.final-contact { font-size: 0.88rem; color: var(--mut); margin-top: 16px; }
.contact {
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(170deg, rgba(24, 33, 31, 0.45), rgba(9, 13, 12, 0.5));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(15, 240, 252, 0.14); border-radius: var(--rad); padding: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 54px rgba(0, 0, 0, 0.35);
}
.field { position: relative; }
.field svg {
  position: absolute; left: 15px; top: 15px; width: 17px; height: 17px;
  stroke: var(--mut); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.field input, .field textarea {
  width: 100%; background: rgba(10, 16, 15, 0.75); color: var(--paper);
  border: 1px solid var(--panel-edge); border-radius: 14px;
  padding: 13px 16px 13px 44px; font: 500 0.95rem var(--body);
}
.field input::placeholder, .field textarea::placeholder { color: var(--mut); }
.field input:focus, .field textarea:focus { border-color: var(--cyan); outline: none; }
.field textarea { resize: vertical; }
.contact .btn { margin-top: 4px; }

/* ---- footer ---- */
.foot {
  position: relative; overflow: clip;
  border-top: 1px solid var(--panel-edge); padding: 34px 0 40px;
  background: rgba(8, 12, 11, 0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.foot-badge {
  position: absolute; right: -40px; bottom: -70px; width: 260px; height: 260px;
  opacity: 0.07; pointer-events: none;
  transform: rotate(-12deg);
}
.foot-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.foot-badge text { font: 600 13.5px var(--mono); letter-spacing: 0.28em; fill: var(--paper); }
.badge-leaf {
  position: absolute; left: 50%; top: 50%; width: 96px; height: 78px;
  transform: translate(-50%, -50%);
  background: var(--paper);
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
  mask: url("../img/mark.svg") center / contain no-repeat;
}
.foot-grid { display: grid; gap: 20px; justify-items: center; text-align: center; position: relative; }
.foot-mid { display: grid; gap: 6px; }
.foot-auth { font-weight: 700; font-size: 0.85rem; }
.foot-contact { font-size: 0.85rem; color: var(--mut); }
.foot-contact a { font-weight: 600; }
.foot-legal { font-family: var(--mono); font-size: 0.68rem; color: var(--mut); letter-spacing: 0.05em; }
.foot-social { display: flex; gap: 10px; }
.foot-social a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--panel-edge); color: var(--cyan); transition: border-color 0.15s ease;
}
.foot-social a:hover { border-color: var(--cyan); }
.foot-social svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- confirmation toast ---- */
.toast {
  max-width: var(--wrap); margin: 14px auto 0;
  background: rgba(15, 240, 252, 0.1); color: var(--cyan);
  border: 1px solid rgba(15, 240, 252, 0.5); border-radius: 14px;
  padding: 14px 18px; font-weight: 600; font-size: 0.92rem;
}
@media (max-width: 1160px) { .toast { margin-left: 22px; margin-right: 22px; } }

/* ---- donate page ---- */
.banner {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.7; color: #ffd97a;
  border: 1px dashed rgba(255, 217, 122, 0.5); border-radius: 14px;
  padding: 12px 16px; margin-top: 8px;
}
.donate-hero { padding-bottom: 10px; }
.donate-hero .hero-sub { max-width: 52ch; }
/* strategy intro: center the block so it reads across the page instead of
   as a narrow column pinned to the left */
.strategy-hero { text-align: center; }
.strategy-hero .hero-sub { max-width: 66ch; margin-left: auto; margin-right: auto; }
.donate-wrap { display: grid; gap: 22px; max-width: 760px; padding-top: 20px; padding-bottom: 30px; }
.step {
  background: linear-gradient(170deg, rgba(24, 33, 31, 0.6), rgba(9, 13, 12, 0.7));
  border: 1px solid var(--panel-edge); border-radius: var(--rad);
  padding: 26px 22px;
}
.step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.step-head h2 { font-size: 1.15rem; margin: 0; }
.step-num {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 0.85rem var(--mono); color: var(--cyan);
  border: 1.5px solid rgba(15, 240, 252, 0.45);
}
.step-note { color: var(--mut); font-size: 0.85rem; margin-bottom: 18px; max-width: 60ch; }

.amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.amt {
  font: 800 1.05rem var(--body); color: var(--paper); cursor: pointer;
  background: rgba(10, 16, 15, 0.7); border: 1.5px solid var(--panel-edge);
  border-radius: 14px; padding: 13px 10px 10px; text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.amt i {
  display: block; font: 500 0.66rem var(--mono); font-style: normal;
  color: var(--mut); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px;
}
.amt:hover { border-color: rgba(15, 240, 252, 0.5); }
.amt.is-on { border-color: var(--cyan); background: rgba(15, 240, 252, 0.1); }
.amt.is-on i { color: var(--cyan); }

.amt-custom label, .f label {
  display: block; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); margin-bottom: 6px;
}
.f label i { font-style: normal; opacity: 0.7; text-transform: none; letter-spacing: 0.04em; }
.amt-field { position: relative; max-width: 240px; }
.amt-field span {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--cyan); font-weight: 700;
}
.amt-field input, .f input, .f select {
  width: 100%; background: rgba(10, 16, 15, 0.75); color: var(--paper);
  border: 1px solid var(--panel-edge); border-radius: 12px;
  padding: 12px 14px; font: 500 0.95rem var(--body);
}
.amt-field input { padding-left: 32px; }
.amt-field input:focus, .f input:focus, .f select:focus { border-color: var(--cyan); outline: none; }
.field-err { color: var(--red); font-size: 0.85rem; margin-top: 8px; line-height: 1.5; }

/* A field the user has to fix gets a red edge and a soft halo — the message
   alone is easy to miss on a phone, and pointing at the box is what actually
   tells someone WHERE the problem is. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.18);
}
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3);
}
.chk.chk-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.14);
}
.chk.chk-invalid input { border-color: var(--red); }
.rebate-line { color: var(--cyan); font-size: 0.88rem; font-weight: 600; margin: 14px 0 12px; }

.rules { list-style: none; display: grid; gap: 8px; }
.rules li {
  position: relative; padding-left: 20px;
  color: var(--mut); font-size: 0.8rem; line-height: 1.55;
}
.rules li::before { content: "—"; position: absolute; left: 0; color: var(--cyan); }
.todo { color: #ffd97a; }

.fgrid { display: grid; gap: 14px; grid-template-columns: repeat(6, 1fr); }
.f { grid-column: span 6; }
.f input::placeholder { color: rgba(169, 163, 149, 0.6); }

.checks { display: grid; gap: 12px; }
.chk {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: rgba(10, 16, 15, 0.55); border: 1px solid var(--panel-edge);
  border-radius: 14px; padding: 14px 16px;
}
.chk input {
  appearance: none; -webkit-appearance: none; flex: none; cursor: pointer;
  width: 22px; height: 22px; margin-top: 1px; border-radius: 7px;
  border: 1.5px solid rgba(15, 240, 252, 0.5); background: transparent;
  display: grid; place-items: center;
}
.chk input:checked { background: var(--cyan); border-color: var(--cyan); }
.chk input:checked::after {
  content: ""; width: 11px; height: 6px; margin-top: -2px;
  border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  transform: rotate(-45deg);
}
.chk span { font-size: 0.85rem; color: var(--paper); line-height: 1.55; }
.chk span i { color: var(--mut); font-style: normal; }
.chk span b { color: var(--cyan); }

.pays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.pay {
  position: relative; cursor: pointer; text-align: center;
  background: rgba(10, 16, 15, 0.7); border: 1.5px solid var(--panel-edge);
  border-radius: 14px; padding: 14px 8px 12px;
  display: grid; gap: 6px; justify-items: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pay input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pay svg { width: 22px; height: 22px; stroke: var(--mut); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pay span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.pay:has(input:checked) { border-color: var(--cyan); background: rgba(15, 240, 252, 0.1); }
.pay:has(input:checked) svg { stroke: var(--cyan); }
.pay:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 3px; }

.summary {
  background: rgba(10, 16, 15, 0.75); border: 1px solid var(--panel-edge);
  border-radius: 14px; padding: 18px; margin-bottom: 18px;
}
.summary-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 0.78rem; padding: 5px 0;
  color: var(--mut); text-transform: uppercase; letter-spacing: 0.06em;
}
.summary-row b { color: var(--paper); }
.summary-net { border-top: 1.5px dashed rgba(169, 163, 149, 0.35); margin-top: 6px; padding-top: 12px; }
.summary-net b { color: var(--cyan); }
.summary-fine { font-size: 0.78rem; color: var(--mut); margin-top: 12px; line-height: 1.6; }

.donate-submit { width: 100%; padding: 16px; }
.donate-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.donate-legal { padding-top: 10px; }
.donate-legal .chip { margin: 0 0 18px; }

@media (min-width: 700px) {
  .step { padding: 30px 30px; }
  .amounts { grid-template-columns: repeat(4, 1fr); }
  .f { grid-column: span 3; }
  .f-sm { grid-column: span 2; }
  .f-lg { grid-column: span 4; }
}

/* ---- stat cards (strategy mandate pages) ---- */
.stat {
  background: linear-gradient(170deg, rgba(24, 33, 31, 0.75), rgba(9, 13, 12, 0.8));
  border: 1px solid var(--panel-edge); border-radius: var(--rad);
  padding: 22px 22px 18px;
}
.stat b {
  display: block; font-family: var(--disp); font-size: clamp(2rem, 6vw, 2.8rem);
  color: var(--cyan); text-shadow: 0 0 24px rgba(15, 240, 252, 0.35); line-height: 1;
}
.stat-unit { font-size: 0.45em; font-style: normal; letter-spacing: 0.05em; }
.stat span { display: block; color: var(--mut); font-size: 0.85rem; margin-top: 10px; line-height: 1.5; }
.stat-src {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cyan); opacity: 0.8;
}
.plank-cta { text-align: center; }
.plank-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

/* ---- volunteer ---- */
.f textarea {
  width: 100%; background: rgba(10, 16, 15, 0.75); color: var(--paper);
  border: 1px solid var(--panel-edge); border-radius: 12px;
  padding: 12px 14px; font: 500 0.95rem var(--body); resize: vertical;
}
.f textarea:focus { border-color: var(--cyan); outline: none; }
.consent-chk { margin: 18px 0; }
@media (min-width: 700px) {
  .help-checks { grid-template-columns: 1fr 1fr; }
}

/* strategy content reads denser than the rest of the site — nudge stat copy
   up a notch so the numbers stay legible next to long-form prose */
.md-stats .stat span { font-size: 0.9rem; }

/* ---- real reels + per-clip comments ---- */
.voices-sec { overflow: clip; }
.voices-intro { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.voices-intro h2 { margin-bottom: 0.4em; }
.voices-intro > p { max-width: none; color: var(--mut); }
/* floaty reel carousel */
.reel-carousel { max-width: 340px; margin: 0 auto; }
.reel-viewport { overflow: hidden; touch-action: pan-y; }
.reel-track { display: flex; will-change: transform; transition: transform 0.7s cubic-bezier(0.33, 1, 0.4, 1); }
.rslide {
  flex: 0 0 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; padding: 8px 6px 0;
  opacity: 0.28; transform: scale(0.88);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.33, 1, 0.4, 1);
}
.rslide.is-active { opacity: 1; transform: none; }
.rslide .reel { width: min(290px, 80vw); margin: 0 auto; }
.reel-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.reel-nav .dots { margin-top: 0; }
.reel-nav .dot { cursor: pointer; border: 0; padding: 0; }
.reel-nav .dot { width: 8px; height: 8px; }
/* coming-soon slide */
.reel-soon {
  flex-direction: column; gap: 14px; text-align: center; padding: 26px;
}
.reel-soon .soon-mark {
  width: 56px; height: 46px; background: var(--cyan); opacity: 0.65;
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
  mask: url("../img/mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(15, 240, 252, 0.4));
}
.reel-soon .soon-t { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.reel-soon .soon-s { font-size: 0.82rem; color: var(--mut); max-width: 22ch; line-height: 1.5; }
.reel-static { animation: none; }
.reel-screen.has-video { display: block; transform: none; }
.reel-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; background: #000; border-radius: 26px;
}
/* fullscreen: show the whole frame (portrait pillarboxed), never a crop */
.reel-vid:fullscreen { object-fit: contain; border-radius: 0; }
.reel-vid:-webkit-full-screen { object-fit: contain; border-radius: 0; }
.reel-screen .reel-handle { z-index: 2; }
.reel-cap {
  margin-top: 20px; max-width: 340px; text-align: center;
  color: var(--mut); font-size: 0.9rem; line-height: 1.5;
}
.reel-tag {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cyan); text-decoration: none;
  border: 1px solid var(--panel-edge); border-radius: 999px; padding: 8px 15px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.reel-tag:hover { border-color: var(--cyan); background: rgba(15, 240, 252, 0.08); }

/* ---- election countdown ---- */
.countdown { margin: 28px 0 22px; }
.countdown-head {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 12px;
}
.cd-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.cd-unit {
  flex: 1 1 62px; min-width: 62px; text-align: center;
  background: rgba(10, 16, 15, 0.7); border: 1px solid var(--panel-edge);
  border-radius: 14px; padding: 12px 8px 10px;
}
.cd-num {
  display: block; font-family: var(--disp); font-size: clamp(1.7rem, 5vw, 2.3rem);
  color: var(--cyan); line-height: 1; text-shadow: 0 0 20px rgba(15, 240, 252, 0.35);
  font-variant-numeric: tabular-nums;
}
.cd-lab {
  display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mut); margin-top: 9px;
}

/* ---- two-way join (email / whatsapp): one clean stack ---- */
.join-split { display: grid; gap: 14px; }
.join-split .capture { margin-top: 0; }
.join-or {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--mut);
}
/* hairlines either side turn the orphan "or" into a real divider */
.join-or::before, .join-or::after {
  content: ""; flex: 1; height: 1px; background: var(--panel-edge);
}
.btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; color: var(--paper);
  background: transparent; box-shadow: inset 0 0 0 1.5px rgba(37, 211, 102, 0.5);
}
.btn-wa:hover { box-shadow: inset 0 0 0 1.5px #25d366; color: #25d366; }
.btn-wa svg {
  width: 19px; height: 19px; color: #25d366; fill: none;
  stroke: #25d366; stroke-width: 1.6; stroke-linejoin: round;
}

/* ---- contact page ---- */
.contact-hero { text-align: center; padding-top: 30px; }
.contact-hero .eyebrow,
.contact-hero .hero-sub { margin-left: auto; margin-right: auto; }
.contact-hero .hero-sub { max-width: 56ch; }
/* the official brand mark, front and centre */
.contact-logo {
  display: block; width: 64px; height: 52px; margin: 0 auto 22px;
  background: var(--cyan);
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
  mask: url("../img/mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(15, 240, 252, 0.5));
}
.contact-sec { padding-top: 8px; }
/* single clean stack on phones, a balanced 3-across row on laptops/desktops.
   higher specificity than the generic .cards 2-col rule so it never squeezes. */
.contact-sec .contact-cards {
  grid-template-columns: 1fr; max-width: 460px; margin: 0 auto;
  align-items: stretch;
}
@media (min-width: 860px) {
  .contact-sec .contact-cards {
    grid-template-columns: repeat(3, 1fr); max-width: 1080px; gap: 22px;
  }
}
.contact-card { height: 100%; }
.contact-card .card-head { align-items: flex-start; gap: 14px; }
.card-titles { display: grid; gap: 3px; }
.card-titles h3 { font-size: 1.05rem; line-height: 1.2; }
.card-handle {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--cyan); word-break: break-word;
}
.contact-card .btn { align-self: stretch; min-width: 0; margin-top: 4px; }
.card-ico-wa {
  color: #25d366; border-color: rgba(37, 211, 102, 0.35);
  background: rgba(37, 211, 102, 0.08);
}
.card-ico-wa svg { stroke: #25d366; }
.card-ico-wa svg .wa-fill { fill: #25d366; stroke: none; }
.contact-close {
  text-align: center; max-width: 46ch; margin: 40px auto 0;
  font-size: 1.05rem; color: var(--paper);
}

/* ---- strategy hub: the wheel ----
   Scroll-driven, not tap-driven. All six panels are ordinary flow content in
   document order, so the page scrolls normally on a phone and nothing is ever
   trapped behind a swipe. The dial is a STICKY indicator that turns to whatever
   mandate is currently under the reading line; the panel under that line is the
   only one held at full strength, the rest sink back. With JS off every panel
   sits at full opacity and the whole thing degrades to a plain stacked list. */
.wh-sec.sec { padding-top: clamp(16px, 3.5vw, 40px); }
/* the strategy hero is a lead-in to the wheel, not a standalone section */
.strategy-hero.hero { padding-bottom: 12px; }

/* Phones/tablets: BLOCK layout on purpose. A sticky item inside a grid is
   confined to its own grid area, and in a single-column grid that area is only
   as tall as the item itself — it would never stick. As a block child of the
   wrapper it can travel the full height of the section. */
.wh-wrap { display: block; }

/* ---- the dial ---- */
/* phone: a compact sticky bar that parks under the nav and reads out position */
.wh-stage {
  position: sticky; top: calc(var(--nav-h) + 8px); z-index: 20;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: clamp(18px, 4vw, 28px);
  padding: 9px 16px 9px 9px;
  border: 1px solid var(--panel-edge); border-radius: 999px;
  background: linear-gradient(170deg, rgba(26, 34, 32, 0.82), rgba(10, 14, 13, 0.88));
  backdrop-filter: blur(14px) saturate(1.35); -webkit-backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.45);
}
.wh-dial { position: relative; flex: none; width: clamp(58px, 15vw, 78px); }
.wh { display: block; width: 100%; height: auto; overflow: visible; }

/* scroll progress around the outside — the continuous half of the readout,
   under the stepped marker that snaps segment to segment */
.wh-prog-track { fill: none; stroke: rgba(250, 244, 232, 0.09); stroke-width: 9; }
.wh-prog {
  fill: none; stroke: var(--cyan); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--wh-p, 0));
  transform-box: view-box; transform-origin: 180px 180px; transform: rotate(-90deg);
  filter: drop-shadow(0 0 8px rgba(15, 240, 252, 0.45));
}

.wh-ring { fill: none; stroke: rgba(15, 240, 252, 0.05); stroke-width: 70; }
.wh-wedge {
  fill: rgba(24, 33, 31, 0.85); stroke: var(--panel-edge); stroke-width: 1;
  transition: fill 0.25s ease;
}
/* One cyan wedge that ROTATES to the live segment. A single element travelling
   the ring reads as one deliberate movement; six wedges each flicking their own
   colour reads as noise. */
.wh-marker {
  fill: var(--cyan); stroke: var(--cyan); stroke-width: 1;
  transform-box: view-box; transform-origin: 180px 180px;
  filter: drop-shadow(0 0 14px rgba(15, 240, 252, 0.45));
  transition: transform 0.62s cubic-bezier(0.34, 1.24, 0.5, 1);
  pointer-events: none;
}
.wh-num {
  font: 600 15px var(--mono); fill: var(--cyan); letter-spacing: 0.08em;
  text-anchor: middle; pointer-events: none; transition: fill 0.3s ease;
}
.wh-num.is-on { fill: var(--ink); }
.wh-hub { fill: rgba(9, 13, 12, 0.94); stroke: var(--panel-edge); stroke-width: 1; }
.wh-hit { fill: transparent; stroke: none; cursor: pointer; }
.wh-hit:hover { fill: rgba(15, 240, 252, 0.1); }

/* At bar size the 15px numerals render around 3px and the 60° wedges are a
   ~24px tap target — both worse than useless. The dial is display-only here and
   the .wh-meta read-out carries the words. */
.wh-nums, .wh-center { display: none; }
.wh-hits { pointer-events: none; }

.wh-meta { min-width: 0; }
.wh-step {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mut); line-height: 1;
}
.wh-step b { color: var(--cyan); font-size: 0.76rem; }
.wh-meta-lab {
  font-family: var(--disp); font-size: clamp(0.7rem, 3.2vw, 0.92rem);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--paper);
  line-height: 1.15; margin-top: 5px;
}
/* both read-outs cross-fade rather than snapping */
.wh-center-lab, .wh-meta-lab { transition: opacity 0.22s ease; }
.wh-center-lab.is-swapping, .wh-meta-lab.is-swapping { opacity: 0; }
.wh-hint { display: none; }

/* ---- the panels ---- */
.wh-panels { display: grid; gap: clamp(22px, 5vw, 44px); }
.wh-panel {
  position: relative;
  /* clears the nav AND the sticky bar when a segment click jumps here */
  scroll-margin-top: calc(var(--nav-h) + var(--wh-stage-h, 0px) + 22px);
  background: linear-gradient(170deg, rgba(24, 33, 31, 0.7), rgba(9, 13, 12, 0.8));
  border: 1px solid var(--panel-edge); border-radius: var(--rad);
  padding: 26px 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 54px rgba(0, 0, 0, 0.35);
  transition: opacity 0.45s ease, filter 0.45s ease, border-color 0.45s ease,
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
/* .wh-live is set by JS — without it every panel stays plainly readable */
.wh-live .wh-panel {
  opacity: 0.17; filter: blur(2.5px); transform: scale(0.975) translateY(8px);
}
.wh-live .wh-panel.is-on {
  opacity: 1; filter: none; transform: none;
  border-color: rgba(15, 240, 252, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 26px 60px rgba(0, 0, 0, 0.45),
              0 0 40px rgba(15, 240, 252, 0.09);
}
.wh-panel-num {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 10px;
}
.wh-panel h3 { font-size: clamp(1.15rem, 4.4vw, 1.35rem); line-height: 1.15; margin-bottom: 10px; }
.wh-panel-lede { color: var(--paper); font-size: 1rem; margin-bottom: 14px; }
.wh-panel-stats {
  display: flex; flex-wrap: wrap; gap: 7px 20px;
  border-top: 1px solid var(--panel-edge); border-bottom: 1px solid var(--panel-edge);
  padding: 11px 0; margin-bottom: 16px;
}
.wh-panel-stats span {
  flex: 1 1 190px; font-family: var(--mono); font-size: 0.72rem;
  line-height: 1.5; color: var(--mut);
}
.wh-panel-stats b {
  font-family: var(--disp); font-size: 1rem; color: var(--cyan);
  text-shadow: 0 0 18px rgba(15, 240, 252, 0.35);
}
.wh-panel .rules li { font-size: 0.88rem; }
.wh-panel .rules li b { color: var(--paper); }

/* ---- desktop: dial back to full size in its own sticky column ---- */
@media (min-width: 900px) {
  .wh-wrap { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 52px; align-items: start; }
  /* align-self:start keeps the grid AREA the full height of the row, which is
     what the sticky offset travels within */
  .wh-stage {
    align-self: start; margin-bottom: 0;
    /* Centred in the space below the nav, not parked at the top of it. Pinned
       high, the dial drifted away from the panel it is describing as soon as
       the section stuck; centred, the two stay level the whole way down. The
       max() is the floor for short viewports, where the centred offset would
       otherwise push the dial up under the nav. */
    top: max(calc(var(--nav-h) + 20px),
             calc(var(--nav-h) + (100vh - var(--nav-h) - var(--wh-stage-h, 400px)) / 2));
    display: block; padding: 0;
    background: none; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .wh-dial { width: 100%; max-width: 360px; margin: 0 auto; }
  .wh-prog-track, .wh-prog { stroke-width: 3; }
  .wh-nums { display: block; }
  .wh-hits { pointer-events: auto; }
  .wh-meta { display: none; }
  /* hub contents sit in HTML over the SVG so the leaf can use the same CSS mask
     as every other mark on the site */
  .wh-center {
    display: grid; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: 40%; gap: 7px; justify-items: center; pointer-events: none;
  }
  .wh-center .wh-leaf {
    width: 34px; height: 28px; background: var(--cyan);
    -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
    mask: url("../img/mark.svg") center / contain no-repeat;
    filter: drop-shadow(0 0 10px rgba(15, 240, 252, 0.5));
  }
  .wh-center-lab {
    font-family: var(--mono); font-size: 0.66rem; line-height: 1.35;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper);
    text-align: center; text-wrap: balance;
  }
  .wh-hint {
    display: block; margin-top: 18px; text-align: center;
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--mut);
  }
  .wh-panel { padding: 30px 28px; scroll-margin-top: calc(var(--nav-h) + 32px); }
  .wh-panels { gap: clamp(34px, 6vh, 64px); }
}

/* short viewports (landscape phones, small laptops): the sticky bar would eat
   the screen, so drop it back into the flow and let the panels carry it */
@media (max-width: 899px) and (max-height: 520px) {
  .wh-stage { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .wh-marker, .wh-wedge, .wh-num { transition: none; }
  /* keep the dimming — it is the whole point of the section — but drop the
     blur and the movement */
  .wh-panel { transition: opacity 0.2s ease; }
  .wh-live .wh-panel { opacity: 0.45; filter: none; transform: none; }
  .wh-live .wh-panel.is-on { transform: none; }
}

/* ---- a single mandate page ----
   Long-form reading is the whole job here: bigger body copy, a hard cap on
   line length, and the stats parked in a rail so they never break the prose. */
.md-hero { padding-bottom: 6px; }
.md-hero .eyebrow a { color: var(--cyan); text-decoration: none; }
.md-hero .eyebrow a:hover { text-decoration: underline; }
.md-hero h1 { font-size: clamp(1.85rem, 6.4vw, 3.2rem); }
.md-hero .hero-sub { font-size: 1.1rem; color: var(--paper); max-width: 48ch; }

.md-grid { display: grid; gap: 30px; align-items: start; }
.md-stats { display: grid; gap: 14px; align-content: start; }
.md-body h2 { font-size: clamp(1.2rem, 3.4vw, 1.6rem); margin-bottom: 0.5em; }
.md-body h2 + p { margin-bottom: 34px; }
.md-lead { color: var(--mut); font-size: 1.08rem; line-height: 1.7; max-width: 62ch; }

.md-plan { list-style: none; counter-reset: plan; display: grid; gap: 22px; }
.md-plan li {
  counter-increment: plan; position: relative;
  padding-left: 52px; max-width: 62ch;
}
.md-plan li::before {
  content: counter(plan, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  font: 600 0.78rem var(--mono); color: var(--cyan); letter-spacing: 0.06em;
  border: 1.5px solid rgba(15, 240, 252, 0.45); background: rgba(15, 240, 252, 0.05);
}
.md-plan h3 {
  font-family: var(--body); font-size: 1.02rem; font-weight: 700;
  text-transform: none; letter-spacing: 0; line-height: 1.35;
  color: var(--paper); margin-bottom: 6px;
}
.md-plan p { color: var(--mut); font-size: 0.98rem; line-height: 1.7; }

@media (min-width: 880px) {
  .md-grid { grid-template-columns: 300px 1fr; gap: 52px; }
  .md-stats { position: sticky; top: 92px; }
}

/* prev / all / next */
/* the sticky stat rail leaves its column short, so the default section padding
   reads as a dead hole above the pager — close it up from both sides */
.md-sec.sec { padding-bottom: calc(var(--sec-pad) * 0.55); }
.md-navsec.sec { padding-top: 0; padding-bottom: calc(var(--sec-pad) * 0.2); }
.md-nav { display: grid; gap: 12px; }
.md-nav-a {
  display: grid; gap: 4px; text-decoration: none;
  border: 1px solid var(--panel-edge); border-radius: 14px; padding: 16px 18px;
  background: rgba(10, 16, 15, 0.5);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.md-nav-a:hover { border-color: var(--cyan); background: rgba(15, 240, 252, 0.06); }
.md-nav-dir {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cyan);
}
.md-nav-t { color: var(--paper); font-size: 0.92rem; font-weight: 600; }
.md-nav-next { text-align: right; }
.md-nav-all {
  align-self: center; justify-self: center; text-align: center;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mut); text-decoration: none; padding: 10px;
}
.md-nav-all:hover { color: var(--cyan); }
@media (min-width: 700px) {
  .md-nav { grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
}

/* ---- join funnel (/join — the QR landing page) ----
   Single-action page: no nav, no side doors, form visible without scrolling on
   a phone. Every rule here exists to keep the eye moving straight down to the
   submit button. */
.jn { padding: 26px 0 40px; }
.jn-wrap { max-width: 560px; }
.jn-top { text-align: center; margin-bottom: 20px; }
.jn-mark {
  display: block; width: 52px; height: 43px; margin: 0 auto 16px;
  background: var(--cyan);
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
  mask: url("../img/mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(15, 240, 252, 0.5));
}
.jn-top h1 { font-size: clamp(1.8rem, 7.4vw, 2.7rem); }

/* the "you'll forget this" note — reads as a spoken aside, not marketing */
.jn-real {
  color: var(--mut); font-size: 0.95rem; line-height: 1.65;
  border-left: 2px solid rgba(15, 240, 252, 0.4);
  padding: 2px 0 2px 16px; margin: 0 auto 26px; max-width: 52ch;
}
.jn-real strong { color: var(--paper); font-weight: 600; }

.jn-form {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
  background: linear-gradient(170deg, rgba(24, 33, 31, 0.6), rgba(9, 13, 12, 0.72));
  border: 1px solid var(--panel-edge); border-radius: var(--rad);
  padding: 24px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 54px rgba(0, 0, 0, 0.4);
}
/* the global `.f { grid-column: span 6 }` (written for .fgrid) would otherwise
   conjure a 6-column implicit grid here and lay the whole form out sideways */
.jn-form > * { grid-column: 1; }
.jn-reach { border: 0; padding: 0; min-width: 0; }
.jn-reach legend {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mut); margin-bottom: 10px; padding: 0;
}
.jn-reach legend i { font-style: normal; color: var(--cyan); letter-spacing: 0.04em; }
.jn-form .fgrid { gap: 14px; }
.jn-postal { max-width: 220px; }

.jn-label {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mut); margin-bottom: 10px;
}
.jn-label i { font-style: normal; opacity: 0.7; text-transform: none; letter-spacing: 0.04em; }
.jn-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.jn-chip { cursor: pointer; }
.jn-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.jn-chip span {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; color: var(--mut);
  background: rgba(10, 16, 15, 0.6); border: 1.5px solid var(--panel-edge);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.jn-chip:hover span { border-color: rgba(15, 240, 252, 0.5); color: var(--paper); }
.jn-chip input:checked + span {
  border-color: var(--cyan); color: var(--cyan); background: rgba(15, 240, 252, 0.1);
}
.jn-chip input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 3px; }

.jn-asks { gap: 10px; }
.jn-form .consent-chk { margin: 0; }
.jn-submit { width: 100%; padding: 17px; font-size: 0.86rem; }
.jn-fine {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mut); text-align: center; margin-top: -6px;
}
.jn-fine a { color: var(--mut); }
/* the mark doubles as the way home */
.jn-mark-link { display: block; width: max-content; margin: 0 auto; }
.jn-mark-link .jn-mark { transition: filter 0.2s ease, transform 0.2s ease; }
.jn-mark-link:hover .jn-mark {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 22px rgba(15, 240, 252, 0.75));
}

/* Exits, placed AFTER the form so they never compete with the submit button:
   by the time you reach them you've either signed up or you're leaving anyway. */
.jn-exit { text-align: center; margin-top: 30px; }
.jn-exit-note { color: var(--mut); font-size: 0.9rem; margin-bottom: 14px; }
.jn-exit-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.jn-exit-btns .btn { font-size: 0.72rem; padding: 11px 20px; }

.jn-foot { text-align: center; margin-top: 28px; display: grid; gap: 6px; }
.jn-foot .foot-auth { font-size: 0.72rem; color: var(--mut); font-weight: 600; }

@media (min-width: 700px) {
  .jn { padding: 46px 0 60px; }
  .jn-form { padding: 30px 28px; }
  .jn-form .f-half { grid-column: span 3; }
}

/* ---- reveal ---- */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }
/* directional variants — sections slide in from the sides as you scroll */
.reveal.reveal-l { transform: translateX(-52px); }
.reveal.reveal-r { transform: translateX(52px); }
.reveal.reveal-l.in, .reveal.reveal-r.in { transform: none; }
/* action cards stagger */
.cards .card.reveal:nth-child(2) { transition-delay: 0.12s; }
.cards .card.reveal:nth-child(3) { transition-delay: 0.24s; }
/* hero entrance: page opens on just the background, then each element slides
   in from alternating sides and wobbles into place */
.hero .reveal { transition: none; }
.hero .settle-l.in { animation: settleL 1.3s cubic-bezier(0.33, 1, 0.4, 1) both; }
.hero .settle-r.in { animation: settleR 1.3s cubic-bezier(0.33, 1, 0.4, 1) both; }
.hero-copy .reveal:nth-child(2) { animation-delay: 0.16s; }
.hero-copy .reveal:nth-child(3) { animation-delay: 0.3s; }
.hero-copy .reveal:nth-child(4) { animation-delay: 0.42s; }
.hero-copy .reveal:nth-child(5) { animation-delay: 0.52s; }
.hero-media.reveal.in { animation-delay: 0.24s; animation-duration: 1.5s; }
@keyframes settleL {
  0%   { opacity: 0; transform: translateX(-110px) rotate(-2.4deg); }
  55%  { opacity: 1; transform: translateX(16px) rotate(1.2deg); }
  78%  { transform: translateX(-7px) rotate(-0.6deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes settleR {
  0%   { opacity: 0; transform: translateX(110px) rotate(2.4deg); }
  55%  { opacity: 1; transform: translateX(-16px) rotate(-1.2deg); }
  78%  { transform: translateX(7px) rotate(0.6deg); }
  100% { opacity: 1; transform: none; }
}
/* nav drops in once the loader lifts */
.nav-wrap { transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
html.is-loading .nav-wrap { opacity: 0; transform: translateY(-14px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; animation: none !important; }
  .proof-dot { animation: none; }
  .bg-lines, .bg-glow, .bg-mark, .reel, .reel-tilt, .qmark, .loader-leaf, .loader-track span { animation: none; }
  .qa-card { transition: none; }
  .rslide, .reel-track { transition: none; }
  .rslide { opacity: 1; transform: none; }
  .nav-wrap { transition: none; }
  .reel-screen { transform: none; transition: none; }
  .receipt { rotate: 0deg; }
  .card, .card:hover { transform: none; }
}

/* ---- tablet ---- */
@media (min-width: 700px) {
  .sec { padding: calc(var(--sec-pad) * 0.78) 0; }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 56px; }
  .hero { padding: 80px 0 60px; }
  .hero-grid { grid-template-columns: 1.2fr 0.8fr; }
  .reel { margin: 0; }
  .hero-media .reel { margin-left: auto; }
  .clips-media .reel { margin-right: 44px; }
  .receipt-col { margin: 0; }
  .foot-grid { grid-template-columns: auto 1fr auto; align-items: center; text-align: left; justify-items: start; }
  .foot-mid { justify-self: center; text-align: center; }
  .foot-social { justify-self: end; }
}

/* contact page — tighten the desktop gap between hero and the cards.
   .*.sec / .*.hero double-class beats the generic desktop .sec/.hero padding. */
@media (min-width: 760px) {
  .contact-hero.hero { padding: 48px 0 6px; }
  .contact-hero .hero-sub { margin-bottom: 6px; }
  .contact-sec.sec { padding-top: 18px; }
}

/* contact page — fit the whole page in a single screen (no scroll) on laptops/desktops.
   main fills the viewport below the nav and vertically centres hero + cards + closing line;
   sizes are compacted and spacing uses vh so it stays clean on any monitor height. */
@media (min-width: 760px) {
  /* full-height flex column: nav + main + footer always sum to one screen,
     footer pinned to the bottom, main absorbs the slack and centres its content.
     flex:1 0 auto (no shrink) means very short windows scroll instead of clipping. */
  .contact-page { display: flex; flex-direction: column; min-height: 100dvh; }
  .contact-page main {
    flex: 1 0 auto;
    display: flex; flex-direction: column; justify-content: center;
    gap: clamp(14px, 3vh, 36px);
    padding-block: clamp(6px, 2vh, 22px);
  }
  .contact-page .foot { padding: clamp(14px, 2.4vh, 26px) 0; }
  .contact-hero.hero { padding: 0; }
  .contact-logo { width: 38px; height: 31px; margin-bottom: clamp(6px, 1.4vh, 12px); }
  .contact-hero .eyebrow { margin-bottom: clamp(6px, 1.2vh, 12px); }
  .contact-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.3rem); line-height: 1.03; }
  .contact-hero .hero-sub { font-size: 0.92rem; margin: clamp(8px, 1.4vh, 14px) auto 0; max-width: 62ch; }
  .contact-sec.sec { padding: 0; }
  .contact-sec .contact-cards { gap: clamp(16px, 1.6vw, 22px); }
  .contact-card { padding: clamp(16px, 2vh, 22px) 20px; gap: clamp(10px, 1.4vh, 14px); }
  .contact-card .card-ico { width: 38px; height: 38px; }
  .card-titles h3 { font-size: 1rem; }
  .contact-card p { font-size: 0.85rem; line-height: 1.45; }
  .contact-card .btn { padding: 11px 20px; margin-top: 0; }
  .contact-close { margin: clamp(12px, 2vh, 24px) auto 0; font-size: 0.95rem; }
}

/* ---- desktop ---- */
@media (min-width: 760px) {
  .cards { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
}

/* ── Site-wide announcement bar ───────────────────────────────────────
   Published from /ops and injected by main.js. Sits above the sticky
   nav in the flow rather than over it, so it can never cover the menu
   on a phone.                                                         */
.site-banner {
  position: relative; z-index: 60;
  background: var(--cyan); color: var(--ink);
  font-weight: 600; font-size: 0.92rem; line-height: 1.35;
  padding: 10px 44px 10px 16px; text-align: center;
}
.site-banner a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-banner .sb-x {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font-size: 1.3rem; line-height: 1; padding: 4px 9px; opacity: 0.65;
}
.site-banner .sb-x:hover { opacity: 1; }
@media (max-width: 560px) { .site-banner { font-size: 0.84rem; padding: 9px 40px 9px 12px; } }