/* ============================================================
   The Right Path Educational Consulting — shared design system
   Multi-page build, September 2026
   ============================================================ */
:root {
  --ink: #0D0A1A;
  --ink-soft: #141024;
  --ink-lift: #1B1533;
  --paper: #F6F3EC;
  --paper-soft: #EFEAE0;
  --text-on-dark: rgba(246,243,236,0.92);
  --text-on-dark-2: rgba(246,243,236,0.55);
  --text-on-light: #1A1428;
  --text-on-light-2: rgba(26,20,40,0.62);
  --accent: #673de6;
  --accent-soft: #8c85ff;
  --dawn: #E8A33D;
  --gold: #EDD9AE;
  --hairline-dark: rgba(246,243,236,0.10);
  --hairline-light: rgba(26,20,40,0.12);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --navh: 74px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--text-on-dark);
  font-size: 17px; line-height: 1.65; font-weight: 300;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }
.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; }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

/* ---------------- NAV ---------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; gap: 20px;
  padding: 16px 40px; min-height: var(--navh);
  background: rgba(13,10,26,0);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease;
}
.nav.solid {
  background: rgba(13,10,26,0.92);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--hairline-dark);
}
.nav .wordmark {
  font-family: var(--serif); font-weight: 500; font-size: 18px;
  letter-spacing: .01em; text-decoration: none; color: #F6F3EC;
  line-height: 1.1; white-space: nowrap; flex: 0 0 auto;
}
.nav .wordmark span {
  font-family: var(--sans); font-weight: 300; font-size: 9.5px;
  letter-spacing: .3em; text-transform: uppercase;
  display: block; opacity: .6; margin-top: 2px;
}
.nav .spacer { flex: 1 1 auto; }
.nav .links { display: flex; align-items: center; gap: 22px; font-size: 13px; letter-spacing: .04em; }
.nav .links a { text-decoration: none; color: rgba(246,243,236,.78); transition: color .25s; white-space: nowrap; }
.nav .links a:hover { color: #fff; }
.nav .links a.current { color: #fff; border-bottom: 1px solid var(--accent-soft); padding-bottom: 2px; }
.nav .divider { width: 1px; height: 18px; background: rgba(246,243,236,.18); flex: 0 0 auto; }
.nav .links a.ext { color: rgba(246,243,236,.55); }
.nav .links a.ext:hover { color: rgba(246,243,236,.95); }
.nav .links a.ext::after { content: '\2197'; font-size: 9px; margin-left: 3px; vertical-align: super; opacity: .75; }
.nav .book {
  flex: 0 0 auto; border: 1px solid rgba(246,243,236,.42); padding: 9px 20px;
  border-radius: 100px; text-decoration: none; font-size: 12.5px; letter-spacing: .06em;
  color: #F6F3EC; white-space: nowrap; transition: background .25s, color .25s;
}
.nav .book:hover { background: #F6F3EC; color: var(--ink); }
.nav .burger {
  display: none; flex: 0 0 auto; width: 42px; height: 36px; border: 1px solid rgba(246,243,236,.3);
  border-radius: 6px; background: none; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.nav .burger i { display: block; width: 17px; height: 1.5px; background: #F6F3EC; transition: transform .3s, opacity .3s; }
.nav.open .burger i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav.open .burger i:nth-child(2) { opacity: 0; }
.nav.open .burger i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: var(--navh) 0 0 0; z-index: 190;
  background: rgba(10,8,20,.98);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: 30px 26px 40px; overflow-y: auto;
  display: none; flex-direction: column; gap: 2px;
}
.drawer.show { display: flex; }
.drawer a {
  text-decoration: none; color: rgba(246,243,236,.86); font-size: 19px;
  font-family: var(--serif); font-weight: 400; padding: 15px 0;
  border-bottom: 1px solid rgba(246,243,236,.08);
}
.drawer a.current { color: var(--accent-soft); }
.drawer a.ext::after { content: '\2197'; font-size: 11px; margin-left: 6px; vertical-align: super; opacity: .7; }
.drawer .grp { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(246,243,236,.34); margin-top: 26px; margin-bottom: 4px; }
.drawer .btn { margin-top: 26px; text-align: center; background: var(--paper); color: var(--ink); border: none; font-family: var(--sans); font-size: 15px; }

/* Embed mode: page is framed inside his site, whose own header already
   carries Services / Blog / Podcasts / Resources. Hide our duplicates. */
body.embed .nav .links a.ext,
body.embed .nav .divider,
body.embed .drawer .grp,
body.embed .drawer a.ext { display: none; }
body.embed .hero { height: auto; min-height: 0; padding: calc(var(--navh) + 90px) 0 110px; }
body.embed .hero .down { display: none; }

@media (max-width: 1180px) {
  .nav .links, .nav .divider, .nav .book { display: none; }
  .nav .burger { display: flex; }
  .nav { padding: 14px 22px; }
}
@media (min-width: 1181px) { .drawer { display: none !important; } }

/* ---------------- PAGE HERO (interior pages) ---------------- */
.phero { position: relative; padding: calc(var(--navh) + 92px) 0 78px; overflow: hidden; background: var(--ink-soft); }
.phero .pbg { position: absolute; inset: 0; }
.phero .pbg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.phero .pbg::after { content:''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,10,26,.72), rgba(13,10,26,.93)); }
.phero .inner { position: relative; z-index: 2; }
.phero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.03; letter-spacing: -.03em; color: #F6F3EC; max-width: 16ch; }
.phero h1 em { font-style: italic; font-weight: 300; color: var(--gold); }
.phero p.lede { margin-top: 22px; max-width: 56ch; color: var(--text-on-dark-2); font-size: 17px; }

/* ---------------- SECTION PRIMITIVES ---------------- */
.section { position: relative; }
.inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 860px) { .inner { padding: 0 22px; } }
.kicker { font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 20px; font-weight: 500; }
.light .kicker { color: var(--accent); }
h2.display { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -.03em; }
h2.display em { font-style: italic; font-weight: 300; }
.pad { padding: 120px 0; }
.pad-sm { padding: 84px 0; }
.light { background: var(--paper); color: var(--text-on-light); }
.light h2.display, .light h3 { color: var(--text-on-light); }
.light p { color: var(--text-on-light-2); }

/* ---------------- BUTTONS ---------------- */
.btn { display: inline-block; text-decoration: none; font-size: 14px; letter-spacing: .05em; padding: 15px 32px; border-radius: 100px; transition: transform .25s, background .25s, color .25s, border-color .25s; font-weight: 400; }
.btn:hover { transform: translateY(-2px); }
.btn.solid { background: var(--paper); color: var(--ink); }
.btn.solid:hover { background: #fffdf7; }
.btn.ghost { border: 1px solid rgba(246,243,236,.35); color: var(--text-on-dark); }
.btn.ghost:hover { border-color: rgba(246,243,236,.85); }
.btn.dark { background: var(--ink); color: var(--paper); }
.btn.dark:hover { background: #241c3f; }

/* ---------------- HOME HERO ---------------- */
.hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#stars { position: absolute; inset: 0; z-index: 1; }
.hero .road { position: absolute; left: 0; right: 0; bottom: 0; height: 72%; z-index: 2; }
.hero .road img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
  -webkit-mask-image: linear-gradient(to top, black 62%, transparent 100%); mask-image: linear-gradient(to top, black 62%, transparent 100%); }
.hero .veil { position: absolute; inset: 0; z-index: 3; background: linear-gradient(to top, rgba(13,10,26,.25) 0%, rgba(13,10,26,0) 40%, rgba(13,10,26,.62) 100%); }
.hero .core { position: relative; z-index: 4; text-align: center; padding: 0 24px; transform: translateY(-4vh); }
.hero .eyebrow { font-size: 11.5px; letter-spacing: .38em; text-transform: uppercase; color: var(--text-on-dark-2); margin-bottom: 24px; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 10.5vw, 9.5rem); line-height: .98; letter-spacing: -.035em; color: #F6F3EC; }
.hero h1 em { font-style: italic; font-weight: 300; color: var(--gold); }
.hero .sub { max-width: 520px; margin: 28px auto 0; font-size: 16.5px; color: var(--text-on-dark-2); line-height: 1.7; }
.hero .ctas { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .down { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-on-dark-2); }
.hero .down::after { content: ''; display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(246,243,236,.5), transparent); margin: 11px auto 0; }

/* ---------------- STATEMENT BAND ---------------- */
.statement { position: relative; overflow: hidden; padding: 150px 0; }
.statement .sbg { position: absolute; inset: 0; }
.statement .sbg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.statement .sbg::after { content:''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(13,10,26,.2), rgba(13,10,26,.9) 76%); }
.statement .inner { position: relative; z-index: 2; text-align: center; }
.statement .stm { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.22; letter-spacing: -.02em; max-width: 900px; margin: 0 auto; color: #F6F3EC; }
.statement .stm strong { font-weight: 500; color: var(--gold); }
.statement .stm + .stm { margin-top: 54px; }
.statement .src { margin-top: 18px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-on-dark-2); }

/* ---------------- GUIDE ROWS ---------------- */
.guide { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 64px 0; border-top: 1px solid var(--hairline-dark); }
.guide:last-of-type { border-bottom: 1px solid var(--hairline-dark); }
.guide .pic { overflow: hidden; border-radius: 3px; aspect-ratio: 4/3; }
.guide .pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1.4s cubic-bezier(.25,1,.5,1); }
.guide:hover .pic img { transform: scale(1); }
.guide.flip .pic { order: 2; }
.guide .who .role { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--text-on-dark-2); margin-bottom: 14px; }
.guide .who h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -.02em; line-height: 1.12; }
.guide .who .cred { margin-top: 8px; font-size: 13.5px; color: var(--accent-soft); letter-spacing: .03em; }
.guide .who p.bio { margin-top: 18px; color: var(--text-on-dark-2); max-width: 48ch; }
.guide .who p.bio + p.bio { margin-top: 14px; }
.inlink { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(246,243,236,.28); padding-bottom: 2px; transition: border-color .25s; }
.inlink:hover { border-bottom-color: var(--accent-soft); }
@media (max-width: 860px) { .guide { grid-template-columns: 1fr; gap: 26px; } .guide.flip .pic { order: 0; } }

/* ---------------- FRAMEWORK CHAPTERS ---------------- */
.chapter { position: relative; min-height: 86svh; overflow: hidden; display: flex; align-items: flex-end; }
.chapter .img { position: absolute; inset: 0; }
/* Anchor high in the frame: centred cropping was cutting off subjects' heads. */
.chapter .img img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.chapter .img::after { content:''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,10,26,.88) 0%, rgba(13,10,26,.26) 48%, rgba(13,10,26,.44) 100%); }
.chapter .word { position: absolute; top: 40%; left: 0; width: 100%; transform: translateY(-50%); z-index: 2; overflow: hidden; pointer-events: none; }
.chapter .word span { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(3.2rem, 14vw, 14rem); line-height: 1; letter-spacing: -.02em; color: rgba(246,243,236,.94); white-space: nowrap; padding-left: 5vw; }
.chapter .cap { position: relative; z-index: 3; padding: 0 40px 68px; max-width: 760px; }
.chapter .cap .n { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--gold); margin-bottom: 12px; }
.chapter .cap p { font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.58; color: var(--text-on-dark); font-weight: 300; }
@media (max-width: 860px) { .chapter .cap { padding: 0 22px 52px; } .chapter { min-height: 72svh; } }

/* ---------------- TIMELINE (journey) ---------------- */
.timeline { position: relative; margin-top: 20px; }
.timeline::before { content:''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(to bottom, var(--accent), rgba(140,133,255,.15)); }
.tstep { position: relative; padding: 0 0 58px 62px; }
.tstep:last-child { padding-bottom: 0; }
.tstep .node { position: absolute; left: 8px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); border: 1.5px solid var(--accent); }
.tstep .yr { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--gold); }
.tstep h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.02em; margin: 8px 0 12px; }
.tstep p { font-size: 15px; color: var(--text-on-dark-2); line-height: 1.7; max-width: 62ch; }
@media (max-width: 560px) { .tstep { padding-left: 46px; } .timeline::before { left: 10px; } .tstep .node { left: 3px; } }

/* ---------------- APP CARDS ---------------- */
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 26px; margin-top: 56px; }
.appcard {
  display: flex; flex-direction: column; border: 1px solid var(--hairline-dark);
  border-radius: 4px; overflow: hidden; background: var(--ink-soft);
  text-decoration: none; transition: transform .35s cubic-bezier(.25,1,.5,1), border-color .35s, background .35s;
  min-width: 0;
}
.appcard:hover { transform: translateY(-5px); border-color: rgba(140,133,255,.5); background: var(--ink-lift); }
.appcard .shot { aspect-ratio: 16/9; overflow: hidden; background: var(--ink-lift); position: relative; }
.appcard .shot img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .35s, transform .8s cubic-bezier(.25,1,.5,1); }
.appcard:hover .shot img { opacity: 1; transform: scale(1.04); }
.appcard .body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.appcard .tag { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 12px; }
.appcard h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.2; color: #F6F3EC; }
.appcard p { margin-top: 12px; font-size: 14.5px; color: var(--text-on-dark-2); line-height: 1.65; flex: 1; }
.appcard .go { margin-top: 20px; font-size: 13px; letter-spacing: .06em; color: #F6F3EC; display: flex; align-items: center; gap: 7px; }
.appcard .go .arw { transition: transform .3s; }
.appcard:hover .go .arw { transform: translateX(5px); }
.appcard .go .free { margin-left: auto; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-dark-2); }

/* ---------------- PROOF ---------------- */
.proof .quote { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 3.4vw, 2.9rem); line-height: 1.3; letter-spacing: -.02em; max-width: 900px; color: var(--text-on-light); }
.proof .quote em { font-style: italic; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 86px; border-top: 1px solid var(--hairline-light); }
.stats .stat { padding: 32px 24px 0 0; border-right: 1px solid var(--hairline-light); min-width: 0; }
.stats .stat:last-child { border-right: none; }
.stats .num { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.2vw, 3.6rem); letter-spacing: -.03em; color: var(--text-on-light); }
.stats .lbl { margin-top: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-light-2); }
.partner { margin-top: 90px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.partner img { height: 78px; width: auto; }
.partner .ptxt { font-size: 13.5px; color: var(--text-on-light-2); max-width: 42ch; line-height: 1.6; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } .stats .stat { border-right: none; padding-top: 24px; } }

/* ---------------- FEATURE SPLIT ---------------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; }
.split .pic { overflow: hidden; border-radius: 3px; }
.split .pic img { width: 100%; height: auto; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* ---------------- PODCAST ---------------- */
.podhero { position: relative; border-radius: 4px; overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; }
.podhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.podhero::after { content:''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,10,26,.9), rgba(13,10,26,.12) 62%); }
.podhero .pc { position: relative; z-index: 2; padding: 38px; }
.podhero .pc .kicker { color: var(--gold); }
.podhero h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.02em; color: #F6F3EC; }
.podhero p { margin-top: 12px; font-size: 15px; color: var(--text-on-dark-2); max-width: 46ch; }
.plinks { margin-top: 24px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; letter-spacing: .06em; }
.plinks a { color: #F6F3EC; text-decoration: none; border-bottom: 1px solid rgba(246,243,236,.42); padding-bottom: 3px; transition: border-color .25s; }
.plinks a:hover { border-bottom-color: var(--gold); }
.eplist { margin-top: 56px; border-top: 1px solid var(--hairline-dark); }
.ep { display: grid; grid-template-columns: 76px 1fr auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--hairline-dark); }
.ep .no { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold); }
.ep h3 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.3; }
.ep p { margin-top: 6px; font-size: 14px; color: var(--text-on-dark-2); max-width: 60ch; }
.ep .meta { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-dark-2); white-space: nowrap; }
@media (max-width: 720px) { .ep { grid-template-columns: 1fr; gap: 8px; } .ep .meta { text-align: left; white-space: normal; } }

/* ---------------- DAWN / CONTACT ---------------- */
.dawn { position: relative; overflow: hidden; }
.dawn .dimg { position: absolute; inset: 0; }
.dawn .dimg img { width: 100%; height: 100%; object-fit: cover; }
.dawn .dimg::after { content:''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(246,243,236,.96) 0%, rgba(246,243,236,.86) 44%, rgba(246,243,236,.16) 100%); }
.dawn .inner { position: relative; z-index: 2; padding-top: 130px; padding-bottom: 130px; }
.dawn h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 5.2vw, 4.2rem); line-height: 1.05; letter-spacing: -.03em; max-width: 15ch; color: var(--text-on-light); }
.dawn h2 em { font-style: italic; font-weight: 300; }
.dawn p.dsub { margin-top: 24px; max-width: 46ch; color: var(--text-on-light-2); }
.form { margin-top: 40px; max-width: 470px; display: flex; flex-direction: column; gap: 12px; }
.form label { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-light-2); margin-bottom: -4px; }
.form input, .form textarea, .form select {
  font-family: var(--sans); font-size: 15px; padding: 14px 17px; width: 100%;
  border: 1px solid var(--hairline-light); background: rgba(255,255,255,.8);
  border-radius: 3px; color: var(--text-on-light); outline: none; transition: border-color .25s;
}
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--accent); }
.form textarea { min-height: 104px; resize: vertical; }
.form button {
  font-family: var(--sans); cursor: pointer; border: none; background: var(--ink); color: var(--paper);
  font-size: 14px; letter-spacing: .05em; padding: 16px 34px; border-radius: 100px;
  transition: transform .25s, background .25s; align-self: flex-start; margin-top: 6px;
}
.form button:hover { transform: translateY(-2px); background: #241c3f; }
.direct { margin-top: 24px; font-size: 14px; color: var(--text-on-light-2); }
.direct a { color: var(--text-on-light); text-decoration: none; border-bottom: 1px solid var(--hairline-light); }

/* ---------------- CTA BAND ---------------- */
.ctaband { padding: 110px 0; border-top: 1px solid var(--hairline-dark); text-align: center; }
.ctaband h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4vw, 3.1rem); letter-spacing: -.03em; line-height: 1.1; }
.ctaband h2 em { font-style: italic; font-weight: 300; color: var(--gold); }
.ctaband p { margin: 20px auto 0; max-width: 48ch; color: var(--text-on-dark-2); }
.ctaband .btn { margin-top: 34px; }

/* ---------------- FOOTER ---------------- */
.footer { background: var(--ink); color: var(--text-on-dark-2); padding: 76px 40px 40px; border-top: 1px solid var(--hairline-dark); }
.footer .cols { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer .brand img { height: 48px; width: auto; opacity: .9; margin-bottom: 16px; filter: brightness(10); }
.footer .brand p { font-size: 13px; max-width: 34ch; line-height: 1.7; }
.footer h4 { font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: rgba(246,243,236,.42); margin-bottom: 15px; font-weight: 500; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 9px; }
.footer a { text-decoration: none; font-size: 14px; color: var(--text-on-dark-2); transition: color .25s; }
.footer a:hover { color: #F6F3EC; }
.footer a.ext::after { content: '\2197'; font-size: 9px; margin-left: 3px; vertical-align: super; opacity: .7; }
.footer .base { max-width: 1200px; margin: 58px auto 0; padding-top: 22px; border-top: 1px solid var(--hairline-dark); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12px; line-height: 1.6; }
@media (max-width: 860px) { .footer { padding: 60px 22px 36px; } .footer .cols { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 460px) { .footer .cols { grid-template-columns: 1fr; } }

/* ---------------- REVEAL ---------------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.25,1,.5,1), transform .8s cubic-bezier(.25,1,.5,1); }
.rv.in { opacity: 1; transform: none; }
body.no-anim .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .rv { opacity: 1 !important; transform: none !important; }
}

/* ---------------- VIDEO ---------------- */
.video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background: var(--ink-lift); }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------- GATE ---------------- */
.gate-btn {
  margin-top: 22px; align-self: flex-start; font-family: var(--sans); cursor: pointer;
  background: var(--paper); color: var(--ink); border: none; font-size: 13.5px;
  letter-spacing: .05em; padding: 13px 26px; border-radius: 100px;
  transition: transform .25s, background .25s;
}
.gate-btn:hover { transform: translateY(-2px); background: #fffdf7; }
.appcard.unlocked .gate-btn { background: transparent; color: var(--accent-soft); border: 1px solid var(--accent-soft); }

.modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.show { display: flex; }
.modal .veil2 { position: absolute; inset: 0; background: rgba(8,6,16,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal .box {
  position: relative; z-index: 2; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  background: var(--paper); color: var(--text-on-light); border-radius: 6px; padding: 34px 32px 30px;
}
.modal .box h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; letter-spacing: -.02em; color: var(--text-on-light); line-height: 1.15; }
.modal .box p.sub { margin-top: 10px; font-size: 14.5px; color: var(--text-on-light-2); }
.modal .box .form { margin-top: 22px; max-width: none; }
.modal .box .close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--text-on-light-2); padding: 6px; }
.modal .note { margin-top: 14px; font-size: 12.5px; color: var(--text-on-light-2); line-height: 1.5; }
.modal .done { display: none; }
.modal.done-state .form, .modal.done-state p.sub { display: none; }
.modal.done-state .done { display: block; }
.modal .done h4 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; margin-bottom: 10px; color: var(--text-on-light); }
.modal .done p { font-size: 14.5px; color: var(--text-on-light-2); }
.formerr { margin-top: 12px; font-size: 13px; color: #9b2226; display: none; }
.formerr.show { display: block; }