/* Homepage skin: dark, editorial, image-led. Loaded after site.css on the homepage only. */

:root {
  --ink: #0c0b0c;
  --ink-2: #141315;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.1);
  --fog: #a6a2a9;
  --flame: #e73825;
  --flame-2: #ff7a3d;
  --violet: #7b5ce0;
  --lilac: #edc5fc;

  --paper: var(--ink);
  --card: var(--ink-2);
  --ash: #232125;
  --rule: var(--line);
  --coal: #f4f2f5;
  --seam: var(--fog);
  --ember: var(--flame);
  --ember-ink: #ff8a65;
  --ember-soft: rgba(231, 56, 37, 0.14);
  --sulphur-soft: rgba(226, 176, 7, 0.14);
  --steel-soft: rgba(63, 110, 140, 0.22);
  --moss-soft: rgba(79, 115, 67, 0.22);
  --steel: #8fb8d6;
  --body: "Wix Madefor Display", "Barlow", "Segoe UI", system-ui, sans-serif;
  --narrow: "Wix Madefor Display", "Barlow", "Segoe UI", system-ui, sans-serif;
  --serif: "Tiro Kannada", Georgia, "Times New Roman", serif;
  --wide: 1240px;
}

html { background: var(--ink); }
body { background: var(--ink); color: var(--coal); overflow-x: clip; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; }
em.serif, h1 em, h2 em, .mission-text em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
a { color: var(--steel); }
a:hover { color: #fff; }
::selection { background: var(--flame); color: #fff; }

/* Buttons: rounded pills, light on dark */
.btn { border-radius: 1.1rem; padding: 12px 22px; border: 1px solid var(--line); background: var(--glass-2); color: #fff; font-weight: 600; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
.btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.btn-go, .btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-go:hover, .btn-light:hover { background: var(--lilac); border-color: var(--lilac); color: var(--ink); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Navigation: floating, transparent over the hero, frosted once scrolled */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; background: transparent; transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(12, 11, 12, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.nav .wrap { min-height: 72px; }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.nav-brand::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd27a, var(--flame) 60%, #7a1408); box-shadow: 0 0 14px rgba(231, 56, 37, 0.8); }
.nav-links a { color: rgba(255, 255, 255, 0.78); }
.nav .btn-go { padding: 9px 18px; }
.nav-links a.btn-go, .nav-links a.btn-go:hover { color: var(--ink); }

/* 1. Impact hero */
.impact-hero { position: relative; min-height: min(100svh, 1000px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; isolation: isolate; color: #fff; }
.ih-slides { position: absolute; inset: 0; z-index: -3; background: var(--ink); }
.ih-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s ease; }
.ih-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: saturate(0.85) contrast(1.05); }
.ih-slide.on { opacity: 1; }
.ih-slide.on img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.12) translate3d(1%, 1%, 0); } to { transform: scale(1.0) translate3d(0, 0, 0); } }
.ih-shade { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(180deg, rgba(12, 11, 12, 0.7) 0%, rgba(12, 11, 12, 0.25) 30%, rgba(12, 11, 12, 0.45) 62%, var(--ink) 100%),
  radial-gradient(ellipse at 50% 55%, rgba(12, 11, 12, 0.15), rgba(12, 11, 12, 0.6) 80%); }
.ih-glow { position: absolute; z-index: -1; left: 50%; bottom: -38vh; width: 90vw; height: 60vh; transform: translateX(-50%); filter: blur(90px); opacity: 0.55; background: linear-gradient(78deg, #4a494b 17%, var(--flame) 48%, var(--violet) 72%, #4a494b); border-radius: 50%; pointer-events: none; mix-blend-mode: screen; }
.ih-body, .ih-foot { width: 100%; }
.ih-body { align-self: center; text-align: center; padding-top: 120px; padding-bottom: 40px; }
.ih-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(12, 11, 12, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 14px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.86); }
.ih-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--flame-2); box-shadow: 0 0 0 4px rgba(255, 122, 61, 0.25); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 122, 61, 0); } }
.impact-hero h1 { font-size: clamp(44px, 8.6vw, 132px); line-height: 0.98; font-weight: 500; letter-spacing: -0.035em; max-width: 13ch; margin: 0 auto; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45); }
.impact-hero h1 em { display: block; background: linear-gradient(90deg, #ffd8a8, var(--flame-2) 40%, #ff5a3c 70%, var(--lilac)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em; }
.ih-lead { max-width: 40em; margin: 28px auto 34px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, 0.84); text-wrap: balance; }
.ih-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ih-actions .btn { padding: 15px 26px; font-size: 16px; }
.ih-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 28px; }
.ih-cap { margin: 0; max-width: 34em; font-size: 14px; color: rgba(255, 255, 255, 0.82); min-height: 2.6em; transition: opacity 0.5s; }
.ih-cap small { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.ih-cap small a { color: inherit; }
.ih-dots { display: flex; gap: 6px; }
.ih-dots button { width: 26px; height: 3px; padding: 8px 0; border: 0; background: none; cursor: pointer; position: relative; }
.ih-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); }
.ih-dots button::after { content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; width: 0; border-radius: 2px; background: #fff; }
.ih-dots button.on::after { animation: dotfill var(--slide-ms, 6000ms) linear forwards; }
.ih-dots.paused button.on::after { animation: none; width: 100%; }
@keyframes dotfill { to { width: 100%; } }
.ih-scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.ih-scroll::after { content: ""; width: 1px; height: 38px; background: linear-gradient(#fff, transparent); animation: drip 2s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* 2. Mission statement, numbers, photo reel */
.mission { position: relative; padding-block: 120px 80px; overflow: hidden; }
.mission-eyebrow, .eyebrow { display: inline-block; margin-bottom: 22px; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fog); }
.mission-text { font-size: clamp(28px, 4.1vw, 58px); line-height: 1.18; letter-spacing: -0.025em; font-weight: 500; max-width: 22ch; margin: 0; color: #fff; text-wrap: balance; }
.mission-text em { color: var(--lilac); }
.mission-text .dim { color: rgba(255, 255, 255, 0.38); }
.stats { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stats li { padding: 28px 24px 4px 0; }
.stats li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.stats b { display: block; font-size: clamp(40px, 5vw, 72px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: #fff; }
.stats b sup { font-size: 0.45em; vertical-align: 0.9em; letter-spacing: 0; }
.stats span { display: block; margin-top: 12px; font-size: 15px; color: var(--fog); max-width: 18em; }
.stats li:first-child b { background: linear-gradient(90deg, var(--flame-2), var(--flame)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.reel { margin-top: 88px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reel-track { display: flex; gap: 18px; width: max-content; animation: reel 70s linear infinite; }
.reel:hover .reel-track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(calc(-50% - 9px)); } }
.reel figure { margin: 0; flex: none; width: clamp(240px, 26vw, 380px); }
.reel img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; filter: grayscale(0.35) contrast(1.05); transition: filter 0.4s, transform 0.4s; }
.reel figure:hover img { filter: none; transform: translateY(-4px); }
.reel figcaption { margin-top: 10px; font-size: 13px; color: var(--fog); }
.reel figcaption small { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.38); }
.reel-note { margin: 18px auto 0; font-size: 12px; color: rgba(255, 255, 255, 0.4); }

/* How it works: a flowchart that pins while you scroll and steps through one card per screen */
.flow { position: relative; border-top: 1px solid var(--line); overflow-x: clip; }
.flow::before { content: ""; position: absolute; z-index: -1; left: -15vw; top: 30%; width: 55vw; height: 40%; border-radius: 50%; filter: blur(120px); opacity: 0.28; background: linear-gradient(120deg, var(--flame), var(--violet)); pointer-events: none; }
.flow-sticky { padding-block: 96px; }
.flow-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.flow-head h2 { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.035em; max-width: 16ch; }
.flow-head h2 em { color: var(--flame-2); }
.flow-count { margin: 0; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog); white-space: nowrap; }
.flow-grid { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.6fr); gap: 48px; align-items: start; }

.fc-wrap { position: relative; }
.fc-wrap::before, .fc-fill { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; }
.fc-wrap::before { background: var(--line); }
.fc-fill { bottom: auto; height: calc((100% - 44px) * var(--fill, 0)); background: linear-gradient(180deg, var(--flame-2), var(--flame), var(--violet)); box-shadow: 0 0 12px rgba(255, 122, 61, 0.6); transition: height 0.6s cubic-bezier(.2, .7, .2, 1); }
.fc { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; }
.fc button { display: flex; align-items: center; gap: 16px; width: 100%; padding: 0; border: 0; background: none; color: var(--fog); font: 500 16px/1.2 var(--body); text-align: left; cursor: pointer; }
.fc-dot { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink-2); border: 1px solid var(--line); transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s; }
.fc-dot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fc-label { transition: color 0.3s, transform 0.3s; }
.fc button:hover .fc-label { color: #fff; }
.fc li.done .fc-dot { background: rgba(231, 56, 37, 0.18); border-color: rgba(255, 122, 61, 0.55); color: var(--flame-2); }
.fc li.done .fc-label { color: rgba(255, 255, 255, 0.72); }
.fc li.on .fc-dot { background: linear-gradient(135deg, var(--flame-2), var(--flame)); border-color: transparent; color: #fff; box-shadow: 0 0 0 6px rgba(231, 56, 37, 0.18), 0 0 28px rgba(255, 122, 61, 0.55); transform: scale(1.08); }
.fc li.on .fc-label { color: #fff; font-weight: 600; transform: translateX(4px); }
.fc button:focus-visible { outline: none; }
.fc button:focus-visible .fc-dot { outline: 2px solid #fff; outline-offset: 3px; }

.flow-cards { position: relative; display: grid; gap: 20px; }
.flow-card { background: var(--glass); border: 1px solid var(--line); border-radius: 26px; padding: 34px 36px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
.fc-num { display: block; font-size: clamp(54px, 6vw, 88px); font-weight: 500; line-height: 0.9; letter-spacing: -0.05em; background: linear-gradient(120deg, var(--flame-2), var(--flame) 55%, var(--lilac)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; }
.flow-card h3 { font-size: clamp(24px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 14px; }
.flow-card > p { color: rgba(255, 255, 255, 0.78); font-size: 17px; line-height: 1.6; max-width: 40em; }
.fc-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fc-chips li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-2); font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.flow-card .fc-out { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: #fff; }
.fc-out b { display: inline-block; margin-right: 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--flame-2); }

/* Pinned, one card at a time (only once the script is running) */
.flow.ready .flow-track { height: calc(var(--steps, 8) * 75vh + 100vh); }
.flow.ready .flow-sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding-block: 88px 40px; }
.flow.ready .flow-sticky > .wrap { width: 100%; }
.flow.ready .flow-cards { display: block; min-height: 440px; }
.flow.ready .flow-card { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(48px) scale(0.97); pointer-events: none; transition: opacity 0.55s ease, transform 0.7s cubic-bezier(.2, .7, .2, 1); }
.flow.ready .flow-card.past { transform: translateY(-48px) scale(0.97); }
.flow.ready .flow-card.on { opacity: 1; transform: none; pointer-events: auto; }
.flow.ready .flow-card.on .fc-chips li { animation: chip 0.5s cubic-bezier(.2, .7, .2, 1) both; }
.flow.ready .flow-card.on .fc-chips li:nth-child(2) { animation-delay: 0.06s; }
.flow.ready .flow-card.on .fc-chips li:nth-child(3) { animation-delay: 0.12s; }
.flow.ready .flow-card.on .fc-chips li:nth-child(4) { animation-delay: 0.18s; }
.flow.ready .flow-card.on .fc-chips li:nth-child(5) { animation-delay: 0.24s; }
@keyframes chip { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .flow-grid { grid-template-columns: 1fr; gap: 22px; }
  .flow-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 22px; }
  .fc-wrap::before, .fc-fill { left: 18px; right: 18px; top: 18px; bottom: auto; width: auto; height: 2px; }
  .fc-fill { right: auto; height: 2px; width: calc((100% - 36px) * var(--fill, 0)); transition: width 0.6s cubic-bezier(.2, .7, .2, 1); }
  .fc { display: flex; justify-content: space-between; gap: 0; }
  .fc-dot { width: 36px; height: 36px; }
  .fc-dot svg { width: 17px; height: 17px; }
  .fc-label { display: none; }
  .flow-card { padding: 24px 22px; border-radius: 22px; }
  .flow-card > p { font-size: 15px; line-height: 1.55; }
  .fc-num { font-size: 46px; margin-bottom: 10px; }
  .flow.ready .flow-sticky { padding-block: 76px 20px; }
  .flow.ready .flow-cards { min-height: 470px; }
}
@media (max-width: 560px) {
  .flow-head .eyebrow { display: none; }
  .flow-head h2 { font-size: 28px; }
  .flow-count { font-size: 12px; }
  .flow.ready .flow-sticky { padding-block: 70px 12px; }
  .flow-card { padding: 20px 18px; }
  .flow-card h3 { font-size: 21px; margin-bottom: 10px; }
  .flow-card > p { font-size: 14px; line-height: 1.5; }
  .fc-num { font-size: 38px; margin-bottom: 8px; }
  .fc-chips { margin-top: 12px; gap: 6px; }
  .fc-chips li { font-size: 12px; padding: 4px 9px; }
  .flow-card .fc-out { margin-top: 12px; padding-top: 12px; font-size: 13px; }
}
@media (max-width: 420px) {
  .nav-links a[href="/help"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flow.ready .flow-card, .fc-fill, .fc-dot { transition: none; }
  .flow.ready .flow-card.on .fc-chips li { animation: none; }
}

/* 3. Live status (the old hero) */
.now { position: relative; padding-block: 90px; overflow-x: clip; }
.now::before { content: ""; position: absolute; z-index: -1; right: -20vw; top: 10%; width: 60vw; height: 70%; border-radius: 50%; filter: blur(110px); opacity: 0.32; background: linear-gradient(120deg, var(--violet), var(--flame) 70%); pointer-events: none; }
.now .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.now h2 { font-size: clamp(38px, 5.4vw, 78px); line-height: 1.02; letter-spacing: -0.035em; }
.now h2 em { color: var(--flame-2); }
.now .lead { color: rgba(255, 255, 255, 0.72); font-size: 19px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.live { background: var(--glass); border: 1px solid var(--line); border-radius: 26px; padding: 26px 26px 24px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.live-head { color: var(--fog); }
.live-badge { background: var(--glass-2); }
.live-date { font-size: 34px; font-weight: 500; letter-spacing: -0.02em; }
.live-nums div { background: var(--glass); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.live-nums dd { font-size: 40px; font-weight: 500; letter-spacing: -0.03em; }

.view-switch { display: flex; width: fit-content; gap: 4px; margin-bottom: 22px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); }
.view-switch a { padding: 8px 16px; border-radius: 999px; color: var(--fog); text-decoration: none; font-size: 14px; font-weight: 600; }
.view-switch a small { font-weight: 500; opacity: 0.7; margin-left: 4px; }
.view-switch a:hover { color: #fff; }
.view-switch a.on { background: #fff; color: var(--ink); }

/* Section rhythm and headings */
.section { position: relative; padding-block: 96px; }
.section-head { margin-bottom: 40px; max-width: 900px; }
.section-head h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -0.035em; }
.section-head p { font-size: 18px; margin-top: 14px; color: var(--fog); }
.look, .sim, .demo { padding-bottom: 40px; }

/* Cards and panels go glass */
.place, .sim-panel, .roads-box, .path, .part, .faq details { background: var(--glass); border-color: var(--line); border-radius: 22px; }
.path { padding: 26px; transition: background 0.25s, border-color 0.25s, transform 0.25s; }
.path:hover { background: var(--glass-2); border-color: rgba(255, 255, 255, 0.24); color: #fff; transform: translateY(-3px); }
.path h3 { font-size: 24px; }
.path-icon { border-radius: 16px; }
.i-road { color: #ff9a7a; }
.i-officer { color: #f4cf55; }
.i-tour { color: #9cc6e4; }
.i-learn { color: #a7cf98; }
.compare-frame, .sim-stage { border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); border: 1px solid var(--line); }
.player { background: var(--ink-2); border: 1px solid var(--line); border-radius: 26px; padding: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.stage { border-radius: 16px; }
.cap-step { background: #fff; color: var(--ink); }
.big-play { background: rgba(255, 255, 255, 0.95); }
.big-play svg { fill: var(--ink); }
.scrub-fill, .chapters button.on { background: var(--flame-2); border-top-color: var(--flame-2); }
.chapters button.on { background: transparent; }
.chapters b { color: var(--flame-2); }

.sim-banner { color: #1e2326; }
.sim-banner small { color: #5a636a; }
.sim-tag.dist { color: #1e2326; }
.presets button { background: var(--glass); border-color: var(--line); border-radius: 999px; padding: 6px 13px; }
.presets button.on { background: #fff; border-color: #fff; color: var(--ink); }
.presets.real button { background: var(--ember-soft); border-color: rgba(231, 56, 37, 0.4); }
.presets.real button.on { background: var(--flame); border-color: var(--flame); color: #fff; }
.ctl-row output { color: var(--flame-2); }
.meters { border-top-color: var(--line); }
.place-try button { background: var(--glass); border-color: var(--line); border-radius: 999px; }
.place-form input, .road-search { background: rgba(255, 255, 255, 0.06); color: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; }
.place-form input::placeholder, .road-search::placeholder { color: rgba(255, 255, 255, 0.42); }
.place-form .btn { border-radius: 14px; }
.cmp-line span::before { border-right-color: #1e2326; }
.cmp-line span::after { border-left-color: #1e2326; }
.cmp-pin::before { border-color: var(--ink); }
.cmp-pin span { background: var(--ink); }
.cmp-key i { border-color: rgba(255, 255, 255, 0.7); }
.roads-top { border-bottom-color: var(--line); }
.roads-top strong { font-size: 24px; font-weight: 500; }
.road-list li { border-top-color: var(--line); }
.roads-foot { background: transparent; border-top-color: var(--line); }

.impact { background: transparent; border-top: 0; }
#sink-svg { border-color: var(--line); border-radius: 22px; }
.sink-steps button { background: var(--glass); border-color: var(--line); border-top-color: var(--line); border-radius: 16px; color: #fff; }
.sink-steps button[aria-pressed="true"] { background: var(--glass-2); border-color: rgba(255, 255, 255, 0.3); border-top-color: var(--flame); }
.sink-steps button b::before { color: var(--flame-2); }
.area { background: var(--glass); border: 1px solid var(--line); border-radius: 22px; padding: 26px; }
.area-bars .track { background: rgba(255, 255, 255, 0.06); }
.area-bars i { background: linear-gradient(90deg, var(--flame), var(--flame-2)); }
.area-bars .ours .yr { color: #f4cf55; }

.how { background: transparent; border-block: 1px solid var(--line); }
.how-steps li::before { background: #fff; color: var(--ink); font-weight: 600; }
.how-steps li:not(:last-child)::after { border-top-color: var(--line); }
.how-steps h3 { font-size: 22px; }

/* Closing call to action */
.closer { position: relative; overflow: hidden; padding-block: 140px 120px; text-align: center; border-top: 1px solid var(--line); }
.closer::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 40%; width: 80vw; height: 50vh; transform: translateX(-50%); border-radius: 50%; filter: blur(100px); opacity: 0.45; background: linear-gradient(78deg, #4a494b 10%, var(--flame) 45%, var(--violet) 75%, #4a494b); pointer-events: none; }
.closer h2 { font-size: clamp(40px, 7vw, 108px); line-height: 1; letter-spacing: -0.04em; max-width: 14ch; margin: 0 auto 30px; }
.closer h2 em { color: var(--lilac); }
.closer .ih-actions { margin-top: 8px; }

.foot { border-top: 1px solid var(--line); color: var(--fog); }
.linkish { color: var(--steel); }
.linkish:hover { color: #fff; }

dialog.about { background: #18171a; border: 1px solid var(--line); border-radius: 22px; }
.ctl-x { background: var(--glass); border-color: var(--line); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(.2, .7, .2, 1), transform 0.9s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.ih-body > * { animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.ih-body > :nth-child(2) { animation-delay: 0.12s; }
.ih-body > :nth-child(3) { animation-delay: 0.3s; }
.ih-body > :nth-child(4) { animation-delay: 0.45s; }
@keyframes rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .now .wrap { grid-template-columns: 1fr; gap: 32px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .nav .wrap { min-height: 62px; gap: 12px; }
  .nav-brand, .nav-links a { white-space: nowrap; }
  .nav-brand { font-size: 17px; }
  .nav-links { gap: 12px; }
  .nav .btn-go { padding: 8px 13px; font-size: 14px; }
  .ih-body { padding-top: 96px; }
  .ih-foot { flex-wrap: wrap; }
  .ih-scroll { display: none; }
  .ih-actions .btn { width: 100%; justify-content: center; }
  .mission { padding-block: 80px 56px; }
  .stats li { padding-right: 12px; }
  .stats li + li { padding-left: 12px; }
  .section { padding-block: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .ih-slide.on img, .reel-track, .ih-kicker i, .ih-scroll::after, .ih-body > *, .ih-dots button.on::after { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .reel { overflow-x: auto; }
}