/* =============================================================================
   incite — landing page

   Visual language from the client's own deck (incite_deck.pdf): Spectral
   display serif in solid ink, bracketed vermilion mono kickers, grainy tinted
   grounds (mint cover, cool paper, pale blue), numbered ruled pillars with
   mono metric callouts, and the "incite." wordmark with a vermilion period.
   Tokens come from the design system in `tokens/`; fonts are self-hosted
   (fonts/fonts.css). The dark wave closer is unchanged by request.
   ========================================================================== */

@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/effects.css";

/* ------------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  font-size: clamp(15px, 0.4vw + 14px, 17px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--accent-strong); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-deep); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
::selection { background: var(--accent-tint); color: var(--accent-deep); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--btn-dark); color: var(--on-dark-1);
  font-size: 13px; font-weight: var(--weight-medium);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip:focus { top: 12px; color: var(--on-dark-1); }

/* ------------------------------------------------------------- shared atoms */

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; }

/* Deck kicker: mono, tracked uppercase, vermilion bracketed index. */
.kicker {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.kicker__n { color: var(--pop); white-space: nowrap; }
.kicker--dark { color: var(--on-dark-2); }
.kicker--dark .kicker__n { color: var(--pop); }

/* Display type: Spectral, regular weight, tight, solid ink — as on the deck. */
.h2 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(32px, 3.9vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-heading);
  text-wrap: balance;
}

.sechead { max-width: 680px; margin-bottom: clamp(44px, 6vh, 72px); }
.sechead--wide { max-width: 980px; }
.sechead--wide .h2 { text-wrap: balance; }
.sechead__sub {
  margin-top: 18px;
  font-size: clamp(16px, 0.8vw + 14px, 18px);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* "incite." — the period is part of the mark. */
.wordmark {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 21px;
  letter-spacing: -0.03em;
  color: var(--ink-1);
}
.wordmark:hover { color: var(--ink-1); }
.wordmark__dot { color: var(--pop); }
.wordmark--light, .wordmark--light:hover { color: var(--on-dark-1); }

/* buttons — mirrors components/actions/Button.jsx */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn--sm { height: var(--control-h-sm); padding: 0 18px; font-size: 13px; }
.btn--lg { height: var(--control-h-lg); padding: 0 30px; font-size: 15px; }

.btn--primary { background: var(--btn-dark); color: var(--on-dark-1); border: 1px solid var(--btn-dark); }
.btn--primary:hover { color: var(--on-dark-1); transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.btn--primary:active { transform: none; box-shadow: none; }

.btn--quiet { background: rgba(255,255,255,.34); color: var(--ink-1); border: 1px solid var(--line-2); }
.btn--quiet:hover { color: var(--ink-1); background: rgba(255,255,255,.78); border-color: var(--line-3); }

.btn--light { background: var(--on-dark-1); color: var(--dark-1); border: 1px solid var(--on-dark-1); }
.btn--light:hover { color: var(--dark-1); transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(0,0,0,.6); }
.btn--light:active { transform: none; box-shadow: none; }

/* Lucide replaces each <i data-lucide> with an <svg>. Size both forms so the
   layout is identical before, during, and after that swap. */
[data-lucide], svg[class*="lucide"] {
  width: var(--icon-size, 18px); height: var(--icon-size, 18px);
  flex: none; stroke-width: 1.5;
}
i[data-lucide] { display: inline-block; }

/* Deck grain: a subtle noise wash over the tinted grounds. */
.grain { position: relative; }
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .38; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
.grain > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------- nav */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
/* Scrolled state stays transparent — just a blur and a hairline, so the page
   shows through. Legibility is handled by inverting over dark sections
   (`data-on-dark`, set from main.js) rather than by painting a bar. */
/* A scrim, not a bar. It runs taller than the 72px bar so it can be opaque
   behind the links and still fade to nothing — no hard edge, no text ghosting
   through. Painted behind the nav's own content via z-index. */
.nav[data-scrolled] { border-bottom-color: transparent; }
/* The tint is light and the blur is masked with the same ramp, so the blurred
   layer ends where the tint ends — no blurred band hanging below the bar, no
   text ghosting through a heavy white wash. */
.nav[data-scrolled]::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 100px; z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(248,250,250,.62) 0%,
    rgba(248,250,250,.5) 62%,
    rgba(248,250,250,0) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
/* Over the dark closer the scrim and the ink both flip. */
.nav[data-on-dark][data-scrolled]::before {
  background: linear-gradient(180deg,
    rgba(23,32,25,.62) 0%,
    rgba(23,32,25,.46) 62%,
    rgba(23,32,25,0) 100%);
}
.nav[data-on-dark] .wordmark { color: var(--on-dark-1); }
.nav[data-on-dark] .nav__link { color: rgba(239,243,239,.68); }
.nav[data-on-dark] .nav__link:hover { color: var(--white); }
.nav[data-on-dark] .lang__on { color: var(--white); }
.nav[data-on-dark] .lang__off { color: rgba(239,243,239,.45); }
.nav[data-on-dark] .lang__off:hover { color: var(--white); }
.nav[data-on-dark] .lang__sep { color: rgba(239,243,239,.3); }
.nav[data-on-dark] .nav__burger { color: var(--on-dark-1); }
.nav[data-on-dark] .nav__cta {
  background: var(--on-dark-1); color: var(--dark-1); border-color: var(--on-dark-1);
}
.nav[data-on-dark] .nav__cta:hover { color: var(--dark-1); box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); }
/* While the full-screen menu is open the bar sits on top of it, so its ink
   flips to light whatever the page behind is doing. */
.nav[data-menu-open] .wordmark,
.nav[data-menu-open] .nav__burger { color: var(--on-dark-1); }
.nav[data-menu-open] .lang__on { color: var(--white); }
.nav[data-menu-open] .lang__off { color: rgba(239,243,239,.45); }
.nav[data-menu-open] .lang__sep { color: rgba(239,243,239,.3); }
.nav[data-menu-open][data-scrolled]::before { opacity: 0; }

.nav__inner {
  position: relative; z-index: 2;
  max-width: 1400px; margin-inline: auto; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: clamp(20px, 4vw, 56px);
}
.nav__links ul { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 34px); }
.nav__link { font-size: 14px; font-weight: var(--weight-medium); color: rgba(28,36,32,.62); }
.nav__link:hover { color: var(--ink-1); }
.nav__end { display: flex; align-items: center; gap: 18px; }

.lang { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; }
.lang__on { color: var(--ink-1); }
.lang__off { color: rgba(28,36,32,.42); }
.lang__off:hover { color: var(--ink-1); }
.lang__sep { color: rgba(28,36,32,.28); }

/* Drawn in CSS on purpose: the mobile menu is the only way to navigate on a
   small screen, so it must not depend on the icon CDN being reachable. */
.nav__burger {
  display: none; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: none; border: none; cursor: pointer; color: var(--ink-1);
}
.nav__burger-bars, .nav__burger-bars::before, .nav__burger-bars::after {
  display: block; width: 22px; height: 1.75px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__burger-bars { position: relative; }
.nav__burger-bars::before, .nav__burger-bars::after { content: ""; position: absolute; left: 0; }
.nav__burger-bars::before { top: -7px; }
.nav__burger-bars::after { top: 7px; }
.nav__burger[aria-expanded="true"] .nav__burger-bars { background: transparent; }
.nav__burger[aria-expanded="true"] .nav__burger-bars::before { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Full-screen on small screens: the bar stays above it (z-index above), so the
   same button opens and closes it. */
.menu {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px clamp(24px, 7vw, 56px) max(36px, env(safe-area-inset-bottom));
  background: var(--dark-1);
  overflow-y: auto; overscroll-behavior: contain;
  animation: menuIn var(--dur-base) var(--ease-out) both;
}
.menu[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.menu__link {
  display: block; padding: 20px 2px;
  font-size: clamp(26px, 7vw, 34px); font-weight: var(--weight-medium);
  letter-spacing: -0.02em; color: var(--on-dark-1);
  border-bottom: 1px solid var(--dark-line);
}
.menu__link:hover { color: var(--white); }
.menu__cta {
  width: 100%; margin-top: 32px;
  background: var(--on-dark-1); color: var(--dark-1); border-color: var(--on-dark-1);
}
html.menu-open, html.menu-open body { overflow: hidden; }

@media (max-width: 1000px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
}
@media (max-width: 460px) { .nav__cta { display: none; } }

/* --------------------------------------------------------------------- hero */

/* The deck cover as a fold: left-set on the mint ground, grain over it, a
   mono meta line pinned to the bottom like the slide footer. */
.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(140px, 19vh, 200px) clamp(20px, 4vw, 56px) clamp(84px, 11vh, 120px);
  background:
    radial-gradient(1100px 640px at 62% 30%, rgba(255,255,255,.55), transparent 62%),
    linear-gradient(150deg, #b9dfdb 0%, #d5eae7 42%, #e7f2f0 74%, #dfeeec 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .4; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
/* A slow drift across the mint ground: three soft fields on oversized
   background layers, moved by background-position. Killed by the
   reduced-motion block at the end of this file. */
.hero__aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(46% 58% at 22% 28%, rgba(255,255,255,.92), transparent 66%),
    radial-gradient(42% 54% at 76% 62%, rgba(47,143,119,.55), transparent 70%),
    radial-gradient(44% 46% at 58% 12%, rgba(79,159,178,.5), transparent 70%);
  background-size: 150% 150%, 160% 160%, 140% 140%;
  animation: heroDrift 13s var(--ease-inout) infinite alternate;
}
@keyframes heroDrift {
  0%   { background-position:  0% 10%, 100% 90%, 46%  0%; }
  50%  { background-position: 44% 74%,  54% 26%, 70% 44%; }
  100% { background-position:  6%  0%, 100% 100%, 10% 12%; }
}

.hero__body { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin-inline: auto; }
.hero__body .kicker { animation: rise .8s var(--ease-out) both; }

.hero__title {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(42px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-heading);
  animation: rise .9s var(--ease-out) .08s both;
}
.hero__sub {
  margin-top: 26px; max-width: 46ch;
  font-size: clamp(17px, .7vw + 15px, 20px);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  text-wrap: pretty;
  animation: rise .9s var(--ease-out) .24s both;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px;
  animation: rise .9s var(--ease-out) .38s both;
}
.hero__meta {
  position: absolute; left: 50%; bottom: 26px; z-index: 1; transform: translateX(-50%);
  display: flex; justify-content: space-between; gap: 20px;
  width: min(1240px, calc(100% - 2 * clamp(20px, 4vw, 56px)));
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(28,36,32,.45);
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__meta { display: none; }
}

/* -------------------------------------------------------------- proof strip */

/* ------------------------------------------------------------ section shells */

.band { padding: clamp(80px, 11vh, 148px) clamp(20px, 4vw, 56px); }
.band--build { background: #f8fafa; }
.band--work { background: var(--white); border-top: 1px solid var(--line-1); }
.band--team { background: linear-gradient(168deg, #cfdeed 0%, #e2ecf5 55%, #ecf2f8 100%); }
.band--faq { background: var(--paper-bright); border-top: 1px solid var(--line-1); }
.band--build, .band--team { position: relative; }
.band--build::before, .band--team::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .34; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
.band > .wrap { position: relative; z-index: 1; }

/* ---------------------------------------- what we build: the four pillars */

/* Deck slide 2: numbered items in a two-column ruled grid, vermilion mono
   numbers and metric callouts, hairline column divider. */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 5vw, 88px);
  border-top: 1px solid var(--line-2);
  position: relative;
}
.pillars::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: var(--line-1);
}
.pillar {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 18px;
  padding: clamp(28px, 4vh, 40px) 0;
  border-bottom: 1px solid var(--line-2);
}
/* Hover is the 2px nudge below and nothing else — no tinted ground. */
.pillar__body { transition: transform var(--dur-base) var(--ease-out); }
.pillar:hover .pillar__body { transform: translateX(2px); }
.pillar__n {
  font-family: var(--font-mono); font-size: 13px; line-height: 2.1;
  color: var(--pop);
}
.pillar__name {
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: clamp(18px, .6vw + 16px, 21px); letter-spacing: -0.014em; line-height: 1.3;
  color: var(--ink-1);
}
.pillar__desc { margin-top: 10px; font-size: 15px; line-height: var(--leading-normal); color: var(--text-secondary); text-wrap: pretty; }
.pillar__metric {
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pop);
}
@media (max-width: 820px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars::after { display: none; }
}

/* ------------------------------------------------------- work: a case index */

.cases { border-top: 1px solid var(--line-2); }
.case { border-bottom: 1px solid var(--line-2); }
.case__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px auto;
  align-items: center; gap: clamp(20px, 3vw, 44px);
  padding: clamp(26px, 3.4vh, 40px) 8px;
  color: inherit;
  transition: padding var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.case__link:hover { color: inherit; background: var(--paper-2); padding-inline: 18px; }

.case__name {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: clamp(26px, 2.4vw, 38px); line-height: 1.06; letter-spacing: -0.022em;
  color: var(--text-heading);
}
.case__type {
  margin-top: 9px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-label);
}
.case__go {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--accent-deep);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.case__link:hover .case__go {
  background: var(--btn-dark); border-color: var(--btn-dark); color: var(--on-dark-1);
  transform: translate(2px, -2px);
}
.case__logo { display: flex; align-items: center; justify-content: center; }
.case__logoimg { height: var(--logo-h, 44px); max-width: 100%; width: auto; object-fit: contain; object-position: center; }
/* If a logo file is missing the <img> falls back to a typeset name — but the
   row already carries that name, so collapse the slot instead. */
.case__logo:has(.logo-fallback) { display: none; }
.case__link:has(.logo-fallback) { grid-template-columns: minmax(0, 1fr) auto; }

@media (max-width: 860px) {
  .case__link,
  .case__link:has(.logo-fallback) {
    grid-template-columns: 1fr auto; gap: 14px 20px; align-items: start;
  }
  .case__id { grid-column: 1; }
  .case__go { grid-column: 2; grid-row: 1; }
  .case__logo { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .case__logoimg { object-position: left center; }
}

/* ------------------------------------------------------- team (deck slide 3) */

.team {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(32px, 4vw, 56px);
}
.member { display: flex; flex-direction: column; }
.member + .member { border-left: 1px solid rgba(28,36,32,.12); padding-left: clamp(24px, 3vw, 44px); }
@media (max-width: 860px) {
  .member + .member { border-left: none; padding-left: 0; border-top: 1px solid rgba(28,36,32,.12); padding-top: 28px; }
}
.member__photo, .member__avatar {
  width: 156px; height: 156px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 6px rgba(255,255,255,.85);
  margin-bottom: 24px;
}
.member__avatar {
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(199,216,202,.9), rgba(206,220,227,.9));
  font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 34px;
  letter-spacing: .02em; color: #1f4d40;
}
.member__head { display: flex; align-items: center; gap: 10px; }
.member__name {
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: 19px; letter-spacing: -0.015em; color: var(--ink-1);
}
.member__li { display: inline-flex; color: rgba(28,36,32,.42); }
.member__li:hover { color: var(--accent-deep); }
.member__role { margin-top: 4px; font-size: 13.5px; color: var(--text-muted); }
.member__meta {
  margin-top: 22px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px;
}
.member__meta dt {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-label);
  padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid rgba(28,36,32,.12);
}
.member__meta dd { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* ---------------------------------------------------------------------- faq */

.faq__wrap {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.sechead--sticky { margin-bottom: 0; position: sticky; top: 108px; }
@media (max-width: 860px) {
  .faq__wrap { grid-template-columns: minmax(0, 1fr); }
  .sechead--sticky { position: static; margin-bottom: 36px; }
}

.faq { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 2px; cursor: pointer; list-style: none; color: var(--accent-deep);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 {
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  font-size: clamp(16px, .6vw + 14px, 18px); line-height: 1.35; color: var(--text-heading);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__q:hover h3 { color: var(--accent-deep); }
/* CSS plus/cross — no CDN dependency for the open/closed affordance. */
.faq__mark { position: relative; flex: none; width: 16px; height: 16px; }
.faq__mark::before, .faq__mark::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; margin-top: -.75px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__mark::after { transform: rotate(90deg); }
.faq__item[open] .faq__mark::before { transform: rotate(135deg); }
.faq__item[open] .faq__mark::after { transform: rotate(45deg); }
.faq__a { padding: 0 44px 26px 2px; }
.faq__a p { font-size: 16px; line-height: var(--leading-relaxed); color: var(--text-secondary); text-wrap: pretty; }

/* --------------------------------------------------- closing block (dark) */

.closer {
  position: relative; overflow: hidden;
  background: var(--dark-1); color: var(--on-dark-1);
  padding-top: clamp(150px, 23vh, 270px);
}
.closer__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.closer__veil {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(900px 520px at 50% 30%, rgba(23,32,25,.86), rgba(23,32,25,.55) 55%, rgba(23,32,25,.2) 82%);
}
.closer__body {
  position: relative; z-index: 2;
  max-width: 780px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px);
  text-align: center;
  padding-bottom: clamp(140px, 20vh, 230px);
}
.closer__body .kicker { justify-content: center; }
.closer__title {
  margin-top: 22px;
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -0.024em;
  color: var(--white); text-wrap: balance;
}
.closer__sub {
  margin: 22px auto 0; max-width: 520px;
  font-size: clamp(16px, .7vw + 14px, 19px); line-height: var(--leading-normal);
  color: var(--on-dark-2); text-wrap: pretty;
}
.closer__actions { margin-top: 38px; display: flex; justify-content: center; }
.closer__note { margin-top: 18px; font-size: 13px; color: rgba(159,175,166,.8); }

/* ------------------------------------------------------------------- footer */

.footer {
  position: relative; z-index: 2;
  border-top: 1px solid var(--dark-line);
  padding: clamp(48px, 7vh, 72px) clamp(20px, 4vw, 56px) 40px;
  /* Opaque so the wave field stops at the rule — a soft cool gradient, not
     a second animated surface. */
  background:
    radial-gradient(1200px 420px at 18% 0%, rgba(47,143,119,.16), transparent 68%),
    linear-gradient(180deg, #1a2722 0%, #16211d 55%, #121b18 100%);
}
.footer__top { display: flex; flex-wrap: wrap; gap: 44px; justify-content: space-between; align-items: flex-start; }
.footer__brand { max-width: 300px; }
.footer__tagline {
  margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--on-dark-2);
}
.footer__cols { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 80px); }
.footer__h {
  margin-bottom: 16px;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: .14em; text-transform: uppercase; color: rgba(159,175,166,.72);
}
.footer__col ul { display: flex; flex-direction: column; gap: 12px; }
.footer__col a, .footer__col span { font-size: 14px; color: rgba(239,243,239,.72); }
.footer__col a:hover { color: var(--white); }
.footer__legal {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--dark-line);
  font-size: 12px; letter-spacing: .04em; color: rgba(159,175,166,.6);
}

/* ------------------------------------------------------------------ reveals */

.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  html.js .reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}