/* ==========================================================
   合同会社en LP — style.css
   規定: design-rules-ja.md（landing-page-design Part B 翻案）
   トークン: tokens.json → :root（HEX直書き禁止）
   ========================================================== */

:root {
  --ink: #15181d;
  --ink-2: #1b1f26;
  --ink-3: #22262e;
  --ink-4: #2a2f38;
  --paper: #f1eee7;
  --white: #ffffff;
  --text: #1b1f26;
  --text-on-dark: #f1eee7;
  --muted: #6b6f76;
  --muted-on-dark: #a9adb4;
  --line: #d9d5cc;
  --line-on-dark: #3a404a;
  --accent: #a8884d;
  --accent-on-dark: #c9a765;
  --error: #e0a89a;

  --font: "IBM Plex Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /* spacing (13 steps only) */
  --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px;
  --s-300: 24px; --s-400: 32px; --s-500: 40px; --s-600: 48px;
  --s-700: 64px; --s-800: 80px; --s-900: 96px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  --container: 1120px;
  --pad: 24px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-layout: 500ms;
  --t-color: 300ms;
}

/* ---------- reset (minimal) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--text);
  background: var(--white);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
em { font-style: normal; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- utilities ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.container--narrow { max-width: 800px; }
.skip {
  position: absolute; left: var(--s-200); top: -100px; z-index: 100;
  padding: var(--s-100) var(--s-200); background: var(--ink); color: var(--text-on-dark);
  border-radius: var(--r-sm);
}
.skip:focus { top: var(--s-200); }
.br-pc { display: none; }
.br-sp { display: inline; }
@media (min-width: 768px) { .br-sp { display: none; } }

/* type scale (和文調整版) */
.h2 {
  font-size: 32px; line-height: 1.4; font-weight: 700; letter-spacing: 0.02em;
  text-wrap: balance; margin-bottom: var(--s-500);
}
.h2--sm { font-size: 24px; line-height: 1.5; margin-bottom: var(--s-300); }
.h3 { font-size: 20px; line-height: 1.6; font-weight: 600; letter-spacing: 0.02em; text-wrap: balance; margin-bottom: var(--s-100); }
p { text-wrap: pretty; }
.prose { max-width: 38em; }
.prose p + p { margin-top: var(--s-300); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--s-100) var(--s-300);
  font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: 0.02em;
  border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--t-color) var(--ease), color var(--t-color) var(--ease), transform var(--t-color) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--paper); }
.btn--dark { background: var(--ink); color: var(--text-on-dark); }
.btn--dark:hover { background: var(--ink-4); }
.btn--sm { font-size: 14px; padding: var(--s-75) var(--s-200); }
.link { font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: var(--s-25); transition: opacity var(--t-color) var(--ease); }
.link:hover { opacity: 0.7; }
.link--on-dark { color: var(--text-on-dark); }

/* ---------- nav (floating) ---------- */
.nav {
  position: fixed; top: var(--s-200); left: 0; right: 0; z-index: 10;
  display: flex; justify-content: center; padding: 0 var(--s-200);
  pointer-events: none;
}
.nav__bar {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-300);
  padding: var(--s-75) var(--s-75) var(--s-75) var(--s-300);
  background: rgba(21, 24, 29, 0.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-pill);
  color: var(--text-on-dark);
  width: 100%; max-width: 760px; justify-content: space-between;
}
.nav__brand { font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: 0.02em; display: inline-flex; align-items: baseline; gap: var(--s-50); }
.nav__brand-sub { font-size: 13px; font-weight: 500; color: var(--muted-on-dark); }
.nav__links { display: none; }
.nav__links a { font-size: 14px; font-weight: 500; padding: var(--s-75) var(--s-100); border-radius: var(--r-pill); transition: background-color var(--t-color) var(--ease); }
.nav__links a:hover { background: var(--ink-4); }
.nav__links a.is-current { background: var(--ink-4); }
.nav__links a.nav__cta { padding: var(--s-75) var(--s-200); }
.nav__links a.nav__cta:hover { background: var(--paper); }
.nav__toggle {
  width: 40px; height: 40px; border-radius: var(--r-pill); border: 0; background: var(--ink-4);
  display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer;
}
.nav__toggle-line { display: block; width: 16px; height: 2px; background: var(--text-on-dark); transition: transform var(--t-layout) var(--ease); }
.nav.is-open .nav__toggle-line:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav.is-open .nav__toggle-line:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* mobile menu panel */
@media (max-width: 1023px) {
  .nav__links {
    position: fixed; inset: 0; z-index: -1;
    display: flex; flex-direction: column; justify-content: center; gap: var(--s-200);
    padding: var(--s-900) var(--s-400) var(--s-400);
    background: rgba(21, 24, 29, 0.96);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-layout) var(--ease), visibility 0s linear var(--t-layout);
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transition: opacity var(--t-layout) var(--ease); }
  .nav__links a { font-size: 24px; font-weight: 600; padding: var(--s-100) var(--s-200); opacity: 0; transform: translateY(24px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
  .nav.is-open .nav__links a { opacity: 1; transform: none; }
  .nav.is-open .nav__links a:nth-child(1) { transition-delay: 0ms; }
  .nav.is-open .nav__links a:nth-child(2) { transition-delay: 60ms; }
  .nav.is-open .nav__links a:nth-child(3) { transition-delay: 120ms; }
  .nav.is-open .nav__links a:nth-child(4) { transition-delay: 180ms; }
  .nav.is-open .nav__links a:nth-child(5) { transition-delay: 240ms; }
  .nav__links a.nav__cta { align-self: flex-start; margin-top: var(--s-200); background: var(--white); color: var(--ink); font-size: 16px; }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 1024px) {
  .nav__links { display: flex; align-items: center; gap: var(--s-50); }
  .nav__toggle { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; background: var(--ink); color: var(--text-on-dark);
  display: flex; flex-direction: column;
}
.hero__media { order: 2; position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.hero__media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@supports not (aspect-ratio: 4 / 5) {
  .hero__media { height: 0; padding-top: 125%; }
}
.hero__inner { order: 1; padding-top: 112px; padding-bottom: var(--s-600); }
.hero__copy { max-width: 680px; }
.hero__eyebrow { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--accent-on-dark); margin-bottom: var(--s-200); }
.hero__title {
  font-size: 40px; line-height: 1.25; font-weight: 700; letter-spacing: 0.02em;
  background: linear-gradient(90deg, #ffffff 0%, #b4b4b4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: var(--s-300);
}
.hero__sub { font-size: 20px; line-height: 1.6; font-weight: 600; margin-bottom: var(--s-200); text-wrap: balance; }
.hero__lead { font-size: 16px; color: var(--text-on-dark); opacity: 0.84; max-width: 32em; margin-bottom: var(--s-400); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-200) var(--s-300); margin-bottom: var(--s-400); }
.hero__proof { font-size: 13px; line-height: 1.7; color: var(--muted-on-dark); padding-left: var(--s-200); border-left: 2px solid var(--accent); }
.hero__proof strong { font-weight: 700; color: var(--text-on-dark); }

/* hero load animation (one orchestrated moment) */
.hero__copy > * { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.hero__media { opacity: 0; transition: opacity 900ms var(--ease); }
.is-loaded .hero__copy > * { opacity: 1; transform: none; }
.is-loaded .hero__media { opacity: 1; }
.is-loaded .hero__copy > :nth-child(1) { transition-delay: 100ms; }
.is-loaded .hero__copy > :nth-child(2) { transition-delay: 180ms; }
.is-loaded .hero__copy > :nth-child(3) { transition-delay: 260ms; }
.is-loaded .hero__copy > :nth-child(4) { transition-delay: 340ms; }
.is-loaded .hero__copy > :nth-child(5) { transition-delay: 420ms; }
.is-loaded .hero__copy > :nth-child(6) { transition-delay: 500ms; }

/* hero video (PC only) */
.hero__video { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* SP: 静止画と同じ枠（4:5）の中に重ねる */
  .hero__video {
    display: block; position: absolute; top: 0; left: 0; z-index: 1;
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
    opacity: 0; transition: opacity 900ms var(--ease);
  }
  .hero__video.is-playing { opacity: 1; }
  .hero__media { position: relative; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .hero { position: relative; }
  .hero__video { top: auto; bottom: 0; height: auto; aspect-ratio: 4 / 5; }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero__video { top: 0; right: 0; bottom: 0; left: 0; z-index: 0; height: 100%; aspect-ratio: auto; object-position: 25% 50%; }
  .hero__inner { z-index: 2; }
}
@media (min-width: 1800px) and (prefers-reduced-motion: no-preference) { .hero__video { object-position: 50% 50%; } }

@media (min-width: 768px) {
  .br-pc { display: inline; }
  .hero { min-height: min(85vh, 47vw); display: block; }
  .hero__media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; aspect-ratio: auto; overflow: visible; }
  .hero__media img { object-position: 25% 50%; }
  /* 可読性のためのスクリム（動画の上、コピーの下）。背景グラデ禁止の例外として意図的に使用 */
  .hero::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 62%; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(21,24,29,0.88) 0%, rgba(21,24,29,0.72) 38%, rgba(21,24,29,0.35) 52%, rgba(21,24,29,0) 100%); }
  @supports not (aspect-ratio: 4 / 5) { .hero__media { height: auto; padding-top: 0; } }
  .hero__inner { position: relative; min-height: min(85vh, 47vw); display: flex; align-items: center; padding-top: 112px; padding-bottom: var(--s-700); }
  .hero__title { font-size: 64px; line-height: 1.15; }
  .hero__lead { font-size: 18px; line-height: 1.8; }
}
@media (min-width: 1800px) {
  .hero__media img { object-position: 50% 50%; }
}

/* ---------- sections ---------- */
.section { padding: var(--s-700) 0; }
.section--paper { background: var(--paper); }
.section--ink { background: var(--ink); color: var(--text-on-dark); }
.section--ink .h2 { color: var(--text-on-dark); }
@media (min-width: 768px) { .section { padding: var(--s-900) 0; } }

/* problem */
.prose--2col p + p { margin-top: var(--s-300); }
@media (min-width: 1024px) {
  .prose--2col { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-600); }
  .prose--2col p + p { margin-top: 0; }
  .prose--2col p { max-width: 30em; }
}

/* benefits */
.benefits { display: grid; gap: var(--s-500); }
.benefits__item { padding-top: var(--s-300); border-top: 1px solid var(--line); }
.benefits__item p { color: var(--muted); max-width: 30em; }
@media (min-width: 768px) {
  .benefits { grid-template-columns: 1fr 1fr; gap: var(--s-600) var(--s-700); }
}

/* tagline reveal */
.tagline { background: var(--ink); color: var(--text-on-dark); padding: var(--s-800) 0; }
.tagline__text {
  font-size: 40px; line-height: 1.3; font-weight: 700; letter-spacing: 0.02em; max-width: 680px;
}
.tagline__chunk { display: inline-block; color: var(--text-on-dark); opacity: 0.3; transition: opacity var(--t-layout) var(--ease); }
.tagline__chunk.is-on { opacity: 1; }
@media (min-width: 768px) {
  .tagline { padding: var(--s-900) 0; }
  .tagline__text { font-size: 64px; line-height: 1.15; max-width: 900px; }
}
@media (min-width: 1024px) { .tagline__text { font-size: 80px; line-height: 1.1; max-width: 1000px; } }

/* steps */
.steps { display: grid; gap: var(--s-500); counter-reset: step; }
.steps .h3 { margin-bottom: var(--s-200); }
.steps__item { position: relative; padding-left: var(--s-600); }
.steps__num {
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--text-on-dark); font-size: 14px; font-weight: 600;
}
.steps__note { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: var(--s-50); }
.steps__item p { color: var(--muted); max-width: 26em; }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-600); }
  .steps__item { padding-left: 0; padding-top: var(--s-600); }
}

/* proof */
.proof { display: grid; gap: var(--s-500); }
.proof__item { padding-top: var(--s-300); border-top: 1px solid var(--line); }
.proof__item dt { margin-bottom: var(--s-100); }
.proof__item dd { color: var(--muted); font-size: 14px; line-height: 1.8; max-width: 30em; }
.proof__figure { font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.proof__unit { font-size: 16px; font-weight: 600; margin-left: var(--s-75); }
.proof__text { font-size: 20px; line-height: 1.5; font-weight: 600; }
@media (min-width: 768px) {
  .proof { grid-template-columns: repeat(2, 1fr); gap: var(--s-600) var(--s-500); }
  .proof__item--main { grid-column: 1 / -1; }
  .proof__item--main .proof__figure { font-size: 80px; }
  .proof__item--main dd { max-width: 40em; font-size: 16px; }
}

@media (min-width: 1024px) {
  .proof { grid-template-columns: repeat(4, 1fr); }
}

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-100); margin-top: var(--s-400); }
.chips li {
  padding: var(--s-75) var(--s-200); border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); font-size: 14px; line-height: 1.7; font-weight: 500;
}


/* fit (向いている企業) */
.fit { display: grid; gap: var(--s-200); max-width: 800px; }
.fit li { position: relative; padding: var(--s-200) 0 var(--s-200) var(--s-500); border-top: 1px solid var(--line); font-size: 18px; line-height: 1.7; font-weight: 500; }
.fit li:last-child { border-bottom: 1px solid var(--line); }
.fit li::before { content: ""; position: absolute; left: var(--s-75); top: 28px; width: 12px; height: 12px; border-radius: var(--r-pill); background: var(--accent); }
.fit__note { margin-top: var(--s-300); color: var(--muted); }
@media (min-width: 768px) { .fit { grid-template-columns: 1fr 1fr; gap: 0 var(--s-600); } .fit li:nth-last-child(2) { border-bottom: 1px solid var(--line); } }

/* deliverables */
.deliverables { display: grid; gap: var(--s-500); }
.deliverables__copy .h2 { margin-bottom: var(--s-300); }
.deliverables__groups { display: grid; gap: var(--s-400); counter-reset: dl; }
.deliverables__group-title { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent); margin-bottom: var(--s-100); }
.deliverables__list { display: grid; gap: var(--s-200); }
.deliverables__list li { display: grid; gap: var(--s-25); padding: var(--s-200) 0 var(--s-200) var(--s-600); border-top: 1px solid var(--line); position: relative; counter-increment: dl; }
.deliverables__list li::before { content: counter(dl, decimal-leading-zero); position: absolute; left: 0; top: var(--s-200); font-size: 14px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.9; }
.deliverables__list strong { font-weight: 600; }
.deliverables__list span { font-size: 14px; color: var(--muted); line-height: 1.7; }
@media (min-width: 1024px) { .deliverables { grid-template-columns: 2fr 3fr; gap: var(--s-800); } }

/* before / after */
.ba { display: grid; gap: var(--s-400); margin-top: var(--s-400); }
.ba__col { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-400); }
.ba__col--after { border-color: var(--ink); }
.ba__label { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: var(--s-75); }
.ba__col--after .ba__label { color: var(--accent); }
.ba__time { font-size: 32px; line-height: 1.2; font-weight: 700; margin-bottom: var(--s-300); font-variant-numeric: tabular-nums; }
.ba__time span { display: block; font-size: 14px; font-weight: 500; color: var(--muted); margin-top: var(--s-50); }
.ba__steps { display: grid; gap: var(--s-100); counter-reset: ba; }
.ba__steps li { position: relative; padding-left: var(--s-400); color: var(--muted); counter-increment: ba; }
.ba__steps li::before { content: counter(ba); position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin-top: 4px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.ba__col--after .ba__steps li { color: var(--text); }
.ba__note { margin-top: var(--s-300); font-size: 12px; color: var(--muted); }
@media (min-width: 768px) { .ba { grid-template-columns: 1fr 1fr; gap: var(--s-400); } }

/* flows (業務例) */
.flows { display: grid; gap: var(--s-400); margin-top: var(--s-500); }
.flow { padding-top: var(--s-300); border-top: 1px solid var(--line); }
.flow__steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-75); }
.flow__steps li { font-size: 14px; font-weight: 500; padding: var(--s-50) var(--s-100); background: var(--paper); border-radius: var(--r-sm); line-height: 1.7; }
.flow__steps li + li::before { content: "→"; margin-right: var(--s-75); color: var(--muted); font-weight: 400; }
.flow__steps li + li { background: none; padding-left: 0; }
.flow__steps li + li { background: var(--paper); padding-left: var(--s-100); position: relative; margin-left: var(--s-300); }
.flow__steps li + li::before { position: absolute; left: calc(-1 * var(--s-300) + 4px); top: 50%; transform: translateY(-50%); margin: 0; }
@media (min-width: 1024px) { .flows { grid-template-columns: 1fr 1fr; gap: var(--s-600); } }
.chips__lead { margin-top: var(--s-500); font-size: 14px; font-weight: 600; color: var(--muted); }
.chips { margin-top: var(--s-200); }
.scope-note { display: grid; gap: var(--s-400); margin-top: var(--s-600); padding-top: var(--s-400); border-top: 1px solid var(--line); }
.scope-note p { color: var(--muted); max-width: 28em; }
@media (min-width: 768px) { .scope-note { grid-template-columns: 1fr 1fr; gap: var(--s-600); } }

/* mid CTA */
.cta-mid { margin-top: var(--s-600); }

/* profile */
.profile { display: grid; gap: var(--s-600); }
.profile__who p + p { margin-top: var(--s-200); }
.profile__photo { width: 200px; }
.profile__photo img { border-radius: var(--r-lg); }
.profile__role { display: block; font-size: 14px; font-weight: 500; color: var(--muted); margin-top: var(--s-50); }
.profile__who p + p { margin-top: var(--s-200); }
.profile__certs { margin-top: var(--s-300); padding-top: var(--s-200); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.profile__certs-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: var(--s-75); }
.profile__certs p { margin-bottom: var(--s-100); }
.link--sm { font-size: 14px; }
.profile__style p { color: var(--muted); margin-bottom: var(--s-400); max-width: 28em; }
.profile__style p:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .profile { grid-template-columns: 240px 1fr; gap: var(--s-600); } .profile__photo { width: 100%; } .profile__style { grid-column: 2; } }
@media (min-width: 1024px) { .profile { grid-template-columns: 240px 1fr 1fr; gap: var(--s-800); } .profile__style { grid-column: auto; } }

/* faq */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: var(--s-300) var(--s-600) var(--s-300) 0;
  font-size: 18px; font-weight: 600; line-height: 1.6;
  transition: color var(--t-color) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before, .faq__item summary::after {
  content: ""; position: absolute; right: var(--s-100); top: 50%; width: 16px; height: 2px;
  background: var(--ink); transform: translateY(-50%); transition: transform var(--t-layout) var(--ease);
}
.faq__item summary::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] summary::after { transform: translateY(-50%) rotate(0deg); }
.faq__item summary:hover { color: var(--muted); }
.faq__body { padding: 0 var(--s-600) var(--s-300) 0; color: var(--muted); }

/* form */
.form-wrap { display: grid; gap: var(--s-600); }
.form-wrap__copy p { color: var(--muted-on-dark); max-width: 30em; }
.form-wrap__copy p + p { margin-top: var(--s-200); }
.form-wrap__note { font-size: 14px; }
.form { display: grid; gap: var(--s-300); }
.form__row { display: grid; gap: var(--s-75); }
.form label { font-size: 14px; font-weight: 600; }
.form__opt { font-size: 12px; font-weight: 500; color: var(--muted-on-dark); margin-left: var(--s-75); }
.form input, .form select, .form textarea {
  width: 100%; padding: var(--s-100) var(--s-200);
  background: var(--ink-3); border: 1px solid var(--line-on-dark); border-radius: var(--r-sm);
  color: var(--text-on-dark); line-height: 1.6;
  transition: border-color var(--t-color) var(--ease), background-color var(--t-color) var(--ease);
}
.form select { appearance: none; -webkit-appearance: none; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); background: var(--ink-4); }
.form input[aria-invalid="true"], .form select[aria-invalid="true"] { border-color: var(--error); }
.form textarea { resize: vertical; }
.form__error { font-size: 12px; line-height: 1.6; color: var(--error); min-height: 0; }
.form__submit { justify-self: start; }
.form__status { font-size: 14px; color: var(--muted-on-dark); }
.form__status.is-error { color: var(--error); }
@media (min-width: 1024px) {
  .form-wrap { grid-template-columns: 5fr 6fr; gap: var(--s-900); align-items: start; }
}

/* form extras */
.form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__turnstile:empty { display: none; }

/* footer */
.footer { background: var(--ink-2); color: var(--muted-on-dark); padding: var(--s-500) 0; font-size: 14px; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-200) var(--s-400); }
.footer__brand { color: var(--text-on-dark); font-weight: 600; }
.footer__links a { border-bottom: 1px solid var(--line-on-dark); transition: color var(--t-color) var(--ease); }
.footer__links a:hover { color: var(--text-on-dark); }
.footer__copy { margin-left: auto; }

/* ---------- reveal (opacity only, once) ---------- */
.reveal { opacity: 0; transition: opacity 800ms var(--ease); }
.reveal.is-visible { opacity: 1; }
.no-js .reveal, .no-js .hero__copy > *, .no-js .hero__media { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__copy > *, .hero__media, .reveal, .tagline__chunk, .nav__links a, .btn, .faq__item summary::before, .faq__item summary::after {
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  .hero__copy > * { transform: none; }
  .nav__links a { transform: none; }
}