/* Engela VO₂ — styles translated from the Claude Design export */
:root {
  --ink: #0F1115;
  --ink-2: #16181C;
  --card: #1A1C21;
  --card-2: #1F2126;
  --concrete: #2A2C30;
  --cream: #F5F2ED;
  --cream-2: #D9D3CA;
  --warm-grey: #A8A29A;
  --steel: #8A96A3;
  --amber: #E8A87C;
  --copper: #C07858;
  --rust: #9A5A3E;
  --teal: #4FC6B0;
  --rule: rgba(245, 242, 237, .08);
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box }
html { scroll-snap-type: y proximity; scroll-behavior: smooth; scroll-padding-top: 72px }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden }
a { color: var(--amber); text-decoration: none }
a:hover { color: var(--cream) }
button { font-family: inherit }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px }
img { max-width: 100% }
[hidden] { display: none !important }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { transition: none !important; animation: none !important }
}

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--cream); color: var(--ink); padding: 10px 16px; border-radius: 8px }
.skip:focus { left: 8px }

/* ---------- primitives ---------- */
.serif { font-family: var(--serif); font-weight: 400 }
.mono { font-family: var(--mono); font-weight: 500 }
.wrap { max-width: 1360px; margin: 0 auto }
.section { padding: clamp(80px, 10vw, 140px) var(--gutter) }
.snap { scroll-snap-align: start }
.light { background: var(--cream); color: var(--ink) }
.center { display: flex; flex-direction: column; align-items: center; text-align: center }
.stack-0, .stack-2, .stack-4, .stack-6, .stack-8, .stack-10, .stack-12, .stack-14, .stack-20, .stack-24, .stack-28, .stack-40, .stack-48, .stack-56 { display: flex; flex-direction: column }
.stack-2 { gap: 2px } .stack-4 { gap: 4px } .stack-6 { gap: 6px } .stack-8 { gap: 8px } .stack-10 { gap: 10px } .stack-12 { gap: 12px }
.stack-14 { gap: 14px } .stack-20 { gap: 20px } .stack-24 { gap: 24px } .stack-28 { gap: 28px } .stack-40 { gap: 40px } .stack-48 { gap: 48px } .stack-56 { gap: 56px }
.row-12 { display: flex; gap: 12px; flex-wrap: wrap }
.row-40 { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-end }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px }
.spread-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px }
.wrap-row { flex-wrap: wrap }
.baseline-8 { display: flex; align-items: baseline; gap: 8px }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.split-end { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px 64px; align-items: end }
.split-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px; align-items: start }

.eyebrow { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amber) }
.eyebrow.dark { color: var(--rust) }
.mono-label { font: 500 11px var(--mono); letter-spacing: .1em; color: var(--steel); text-transform: uppercase }
.mono-label.wide { letter-spacing: .14em }
.mono-val { font: 500 15px var(--mono); color: var(--cream) }
.mono-xs { font: 400 11px var(--mono); color: var(--steel) }
.muted-sm { font-size: 13px; color: var(--warm-grey) }
.small-muted { font-size: 12px; color: var(--warm-grey) }
.k { font-size: 12px; color: var(--steel) }
.dim { color: var(--steel) }

.display { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 8.4vw, 128px); line-height: .92; letter-spacing: -.025em; text-wrap: balance }
.display em, .h2 em { color: var(--amber) }
.light .h2 em { color: var(--rust) }
.display-2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 6.4vw, 96px); line-height: .95; letter-spacing: -.025em; text-wrap: balance }
.h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -.02em; text-wrap: balance }
.h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.05 }
.lede { margin: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--cream-2); max-width: 520px; text-wrap: pretty }
.body-lg { margin: 0; font-size: 18px; line-height: 1.6; color: var(--warm-grey); max-width: 520px; text-wrap: pretty }
.body-md { margin: 0; font-size: 17px; line-height: 1.55; color: var(--warm-grey) }
.body-md.dark { color: #4A4640; max-width: 560px }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 500; padding: 14px 22px; border-radius: 999px; border: 0; cursor: pointer; transition: box-shadow .3s, transform .3s, background .2s, color .2s, border-color .2s, opacity .2s }
.btn-lg { font-size: 16px; padding: 16px 26px }
.btn-sm { font-size: 14px; padding: 10px 18px }
.btn-block { width: 100%; padding: 15px }
.btn-amber { background: var(--amber); color: var(--ink) }
.btn-amber:hover { color: var(--ink) }
.glow:hover { box-shadow: 0 0 40px rgba(232, 168, 124, .45); transform: translateY(-1px) }
.btn-light { background: var(--cream); color: var(--ink) }
.btn-light:hover { background: var(--amber); color: var(--ink) }
.btn-dark { background: var(--ink); color: var(--cream) }
.btn-dark:hover { opacity: .88; color: var(--cream) }
.btn-ghost { border: 1px solid rgba(245, 242, 237, .35); color: var(--cream); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.btn-ghost:hover { border-color: var(--cream); color: var(--cream) }
.btn-outline-dark { border: 1px solid rgba(15, 17, 21, .25); color: var(--ink) }
.btn-outline-dark:hover { border-color: var(--ink); color: var(--ink) }
.btn[disabled] { opacity: .6; cursor: progress }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--gutter); background: rgba(15, 17, 21, 0); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: background .35s, padding .35s, border-color .35s }
.nav.scrolled { padding-top: 14px; padding-bottom: 14px; background: rgba(15, 17, 21, .78); border-bottom-color: var(--rule) }
.brand { display: flex; align-items: center; gap: 12px; color: var(--cream); line-height: 1 }
.brand:hover { color: var(--cream); opacity: .85 }
.mark { display: block; flex: none }
.brand-word { font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: -.01em; color: var(--cream) }
.brand-tag { font: 500 10px var(--mono); letter-spacing: .14em; color: var(--steel); text-transform: uppercase }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); flex-wrap: wrap; justify-content: flex-end }
.nav-links > a:not(.btn) { color: var(--cream-2); font-size: 14px }
.nav-links > a:not(.btn):hover { color: var(--cream) }
@media (max-width: 860px) {
  .nav-links > a:not(.btn) { display: none }
  .brand-tag { display: none }
}

/* ---------- full-bleed image sections ---------- */
.bleed { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform }
.shade { position: absolute; inset: 0 }
.hero, .quote, .final { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex }

.hero { align-items: flex-end; padding: 140px var(--gutter) 56px }
.hero-grid { position: relative; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: end }
.hero-side { display: flex; flex-direction: column; gap: 14px; justify-self: end; max-width: 340px; width: 100% }
.live-card { background: rgba(26, 28, 33, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(245, 242, 237, .12); border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px }
.rec { display: flex; align-items: center; gap: 6px; font: 500 11px var(--mono); color: var(--teal) }
.rec span { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: pulse 1.6s ease-in-out infinite }
@keyframes pulse { 50% { opacity: .3 } }
#sp-x, #sp-dot { transition: all .15s }

.quote { align-items: center; padding: 80px var(--gutter) }
.quote figure { position: relative; margin: 0; max-width: 680px; display: flex; flex-direction: column; gap: 28px }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: clamp(32px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance }

.final { align-items: center; justify-content: center; text-align: center; padding: 100px var(--gutter) }
.final-in { position: relative; align-items: center; max-width: 820px }

/* ---------- logo strip ---------- */
.logos { padding: 36px var(--gutter); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px }
.logo { font-family: var(--serif); font-size: 24px; color: var(--warm-grey); letter-spacing: .01em }

/* ---------- why cards ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px }
.card { background: var(--card); border: 1px solid rgba(245, 242, 237, .07); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 18px }
.lift { transition: transform .3s }
.lift:hover { transform: translateY(-3px) }
.big-num { font-size: 88px; line-height: .9; color: var(--amber) }
.card-p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--cream-2) }
.cite { margin-top: auto; font: 400 11px var(--mono); color: var(--steel) }

.decline { display: flex; align-items: flex-end; gap: 10px; height: 120px }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; --p: 0; --s: 1 }
.bar-v { font: 500 12px var(--mono); color: var(--amber); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .25s }
.bar-fill { width: 100%; height: var(--h); background: linear-gradient(180deg, #8A96A3, #2A2C30); border-radius: 6px 6px 2px 2px; transform-origin: bottom; transform: scaleY(calc(var(--p) * var(--s))); transition: transform .3s var(--ease), opacity .2s, background .2s }
.bar-age { font: 400 11px var(--mono); color: var(--steel) }
.decline.hovering .bar { --s: .94 }
.decline.hovering .bar-fill { opacity: .45 }
.decline .bar.on { --s: 1.06 }
.decline .bar.on .bar-fill { opacity: 1; background: linear-gradient(180deg, #E8A87C, #C07858) }
.decline .bar.on .bar-v { opacity: 1; transform: none }

/* ---------- how it works ---------- */
.sticky { position: sticky; top: 96px }
.photo { border-radius: 20px; overflow: hidden }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.steps li { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 36px 0; border-top: 1px solid rgba(15, 17, 21, .14) }
.step-n { font-size: 48px; line-height: 1; color: var(--rust) }
.steps h3 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.01em }
.steps p { margin: 0; font-size: 17px; line-height: 1.55; color: #4A4640; text-wrap: pretty }
.pill { align-self: flex-start; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: rgba(15, 17, 21, .06); padding: 6px 10px; border-radius: 999px }
@media (max-width: 920px) { .sticky { position: static } }

/* ---------- segmented controls ---------- */
.seg { display: flex; gap: 4px; background: var(--card); padding: 4px; border-radius: 999px; border: 1px solid var(--rule) }
.seg button { border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px; font-size: 14px; background: transparent; color: var(--cream-2); transition: background .2s, color .2s }
.seg.lg button { padding: 12px 22px; font-size: 15px }
.seg button.on { background: var(--cream); color: var(--ink) }

/* ---------- report / feature block ---------- */
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; align-items: stretch }
.feats { display: flex; flex-direction: column; gap: 8px }
.feat { text-align: left; cursor: pointer; border: 1px solid var(--rule); background: transparent; color: var(--cream); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; transition: background .25s, border-color .25s }
.feat:hover { border-color: rgba(232, 168, 124, .5) }
.feat.open { background: var(--card-2); border-color: rgba(232, 168, 124, .45) }
.feat-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; font-size: 19px; font-weight: 500 }
.feat .sign { font: 500 14px var(--mono); color: var(--amber) }
.feat-d { display: none; font-size: 15px; line-height: 1.55; color: var(--warm-grey); text-wrap: pretty }
.feat.open .feat-d { display: block }

.panel { min-height: 560px; background: var(--ink-2); border: 1px solid var(--rule); border-radius: 24px; padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 24px; box-shadow: 0 40px 120px -40px rgba(192, 120, 88, .35) }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--concrete); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--cream-2) }
.tag { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); border: 1px solid rgba(245, 242, 237, .12); padding: 6px 10px; border-radius: 999px }
.pane { display: flex; flex-direction: column; gap: 20px; flex: 1 }
.pane[data-pane="0"] { gap: 28px }
.pane[data-pane="3"] { gap: 14px }
.note { margin: auto 0 0; font-size: 14px; line-height: 1.5; color: var(--warm-grey) }
.note.sm { font-size: 13px; color: var(--steel) }

.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; align-items: center }
.ring { position: relative; width: 200px; height: 200px; justify-self: center; cursor: crosshair }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg) }
#ring-arc { transition: stroke-dashoffset .35s var(--ease), stroke .3s }
.ring.anim #ring-arc { transition: stroke .3s }
.ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none }
.scale { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px }
.scale div { flex: 1 }

.zones { display: flex; flex-direction: column; gap: 12px }
.zone { display: grid; grid-template-columns: 44px 1fr 92px; gap: 14px; align-items: center; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; transition: all .25s var(--ease); --p: 0 }
.zone .z { font: 500 13px var(--mono); color: var(--c) }
.zone .spread { font-size: 14px }
.zbar { height: 8px; background: var(--concrete); border-radius: 999px; overflow: hidden; transition: height .25s }
.zbar div { height: 100%; width: calc(var(--w) * var(--p) * 1%); background: var(--c); border-radius: 999px; transition: width .4s var(--ease) }
.zhr { font: 500 13px var(--mono); text-align: right; color: var(--cream-2) }
.zones.hovering .zone { opacity: .4 }
.zones .zone.on { opacity: 1; background: var(--card-2); transform: translateX(6px) }
.zones .zone.on .zbar { height: 12px }

.risk { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; background: var(--card-2); border-radius: 14px }
.chip { font: 500 12px var(--mono); color: var(--c); border: 1px solid var(--c); padding: 5px 10px; border-radius: 999px; white-space: nowrap }

.stat { background: var(--card-2); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px }
.stat > span:last-child { font-size: 26px; font-weight: 500 }
.team { display: flex; flex-direction: column; gap: 10px }
.trow { display: grid; grid-template-columns: 120px 1fr 48px; gap: 12px; align-items: center; font-size: 14px; cursor: default; opacity: var(--fade, 1); transition: opacity .2s; --p: 0; --s: 1 }
.tn { color: var(--cream-2) }
.tbar { height: 22px; background: var(--card-2); border-radius: 6px; overflow: hidden }
.tbar div { height: 100%; width: calc(var(--w) * 1%); background: linear-gradient(90deg, #C07858, #E8A87C); border-radius: 6px; transform-origin: left; transform: scaleX(calc(var(--p) * var(--s))); transition: transform .35s var(--ease), box-shadow .25s }
.tv { font: 500 13px var(--mono); text-align: right; transition: color .2s }
.team.hovering .trow { opacity: .4 }
.team .trow.on { opacity: 1; --s: 1.04 }
.team .trow.on .tbar div { box-shadow: 0 0 18px rgba(232, 168, 124, .55) }
.team .trow.on .tv { color: var(--amber) }
@media (max-width: 480px) { .trow { grid-template-columns: 90px 1fr 40px } .zone { grid-template-columns: 34px 1fr 70px; gap: 10px } }

/* ---------- audiences ---------- */
.aud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px }
.aud-img { border-radius: 24px; overflow: hidden; min-height: 420px; position: relative }
.aud-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.aud-card { background: var(--card); border: 1px solid rgba(245, 242, 237, .07); border-radius: 24px; padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 24px }
.aud-card .btn { margin-top: auto; align-self: flex-start }
.dash-list { list-style: none; margin: 0; padding: 0 }
.dash-list li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 16px; color: var(--cream-2) }
.dash-list li::before { content: "—"; color: var(--amber) }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px }
.plan { background: #fff; color: var(--ink); border: 1px solid rgba(15, 17, 21, .1); border-radius: 24px; padding: 36px 32px; display: flex; flex-direction: column; gap: 24px; --tick: var(--rust); --plan-rule: rgba(15, 17, 21, .1) }
.plan:hover { transform: translateY(-4px) }
.plan-featured { background: var(--ink); color: var(--cream); --tick: var(--amber); --plan-rule: rgba(245, 242, 237, .12) }
.plan-name { font-size: 18px; font-weight: 500 }
.badge { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--amber); color: var(--ink); padding: 5px 10px; border-radius: 999px }
.price { font-size: 72px; line-height: 1 }
.unit { font-size: 14px; opacity: .7 }
.plan-desc { margin: 0; font-size: 15px; line-height: 1.5; opacity: .75 }
.ticks { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--plan-rule); display: flex; flex-direction: column; gap: 12px }
.ticks li { display: flex; gap: 12px; font-size: 15px }
.ticks li::before { content: "✓"; color: var(--tick) }
.plan .btn { margin-top: auto }

/* ---------- experts ---------- */
.experts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px }
.expert { display: flex; flex-direction: column; gap: 16px }
.portrait { aspect-ratio: 4/5; border-radius: 18px; background: repeating-linear-gradient(135deg, #1A1C21 0 12px, #1F2126 12px 24px); border: 1px solid rgba(245, 242, 237, .07); display: flex; align-items: flex-end; padding: 16px; overflow: hidden }
.portrait span { font: 400 11px var(--mono); color: var(--steel) }
.portrait img { width: 100%; height: 100%; object-fit: cover; margin: -16px; width: calc(100% + 32px); height: calc(100% + 32px) }
.profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(28px, 5vw, 72px); align-items: center }
.profile-photo { aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; max-width: 520px; border: 1px solid rgba(245, 242, 237, .07) }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block }
.profile-name { font-size: clamp(40px, 4vw, 56px); line-height: 1 }
.partners { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(32px, 6vw, 96px) }
a.logo:hover { color: var(--cream) }
@media (max-width: 700px) { .logos { flex-direction: column; align-items: flex-start; gap: 16px } .partners { gap: 12px 28px } }
.ex-name { font-size: 18px; font-weight: 500 }
.ex-role { font-size: 14px; color: var(--amber) }
.ex-bio { font-size: 14px; line-height: 1.5; color: var(--warm-grey) }

/* ---------- Engela Health ---------- */
.clin-list { display: flex; flex-direction: column }
.clin { display: grid; grid-template-columns: 64px 1fr 24px; gap: 18px; align-items: start; padding: 28px 0; border-top: 1px solid rgba(15, 17, 21, .14); color: var(--ink) }
.clin:hover { color: var(--ink) }
.clin:hover .clin-arrow { transform: translate(3px, -3px); color: var(--rust) }
.clin-n { font-size: 40px; line-height: 1; color: var(--rust) }
.clin-t { font-size: 21px; font-weight: 500; letter-spacing: -.01em }
.clin-d { font-size: 16px; line-height: 1.55; color: #4A4640 }
.clin-arrow { font-size: 18px; color: #4A4640; transition: transform .25s, color .25s }

/* ---------- lead form ---------- */
#contact { border-top: 1px solid var(--rule) }
.contact-lines { display: flex; flex-direction: column; gap: 10px; font-size: 16px }
.lead { background: var(--card); border: 1px solid rgba(245, 242, 237, .07); border-radius: 24px; padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 24px; box-shadow: 0 40px 120px -40px rgba(192, 120, 88, .25) }
.interest { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px }
.interest legend { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin-bottom: 12px; padding: 0 }
.interest label { position: relative; cursor: pointer }
.interest input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.interest span { display: block; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; font-size: 15px; color: var(--cream-2); transition: border-color .2s, background .2s, color .2s }
.interest label:hover span { border-color: rgba(232, 168, 124, .5) }
.interest input:checked + span { background: var(--card-2); border-color: rgba(232, 168, 124, .6); color: var(--cream) }
.interest input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--warm-grey) }
.field.full { grid-column: 1 / -1 }
.field em { font-style: normal; color: var(--steel); font-size: 12px }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; color: var(--cream); background: var(--ink-2); border: 1px solid rgba(245, 242, 237, .12); border-radius: 12px; padding: 13px 14px; width: 100%; transition: border-color .2s }
.field textarea { resize: vertical; min-height: 110px }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8A96A3 50%), linear-gradient(135deg, #8A96A3 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--amber) }
.field input[aria-invalid="true"] { border-color: #E07A6A }
.hint { margin: -8px 0 0; font-size: 14px; line-height: 1.5; color: var(--amber) }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--warm-grey); cursor: pointer }
.consent input { accent-color: var(--amber); width: 18px; height: 18px; margin: 2px 0 0; flex: none }
.lead .btn { align-self: flex-start }
.form-msg { margin: 0; font-size: 15px; line-height: 1.5; min-height: 1.5em }
.form-msg.ok { color: var(--teal) }
.form-msg.err { color: #E07A6A }
.lead.sent .interest, .lead.sent .fields, .lead.sent .consent, .lead.sent .btn, .lead.sent .hint { display: none }
.lead.sent .form-msg { font-family: var(--serif); font-size: 32px; line-height: 1.15; color: var(--cream) }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 48px 80px; align-items: start }
.faqs { display: flex; flex-direction: column }
.faqs details { border-top: 1px solid rgba(245, 242, 237, .1) }
.faqs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: 18px; color: var(--cream) }
.faqs summary::-webkit-details-marker { display: none }
.faqs .sign::before { content: "+"; font: 400 20px var(--mono); color: var(--amber) }
.faqs details[open] .sign::before { content: "−" }
.faqs details p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--warm-grey); max-width: 620px }

/* ---------- footer ---------- */
.footer { scroll-snap-align: end; padding: 48px var(--gutter); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: baseline }
.footer .brand { gap: 14px }
.foot-links { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px }
.foot-links a { color: var(--warm-grey) }
.foot-links a:hover { color: var(--cream) }

/* reveal-on-scroll (set by app.js) */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease) }
.reveal.in { opacity: 1; transform: none }