:root {
  --ink: #211b1a;
  --ink-soft: #2f2523;
  --cream: #f4efe6;
  --paper: #f7f0e7;
  --wine: #7b2f3d;
  --wine-deep: #5c2330;
  --copper: #c87b55;
  --sand: #e6d4c4;
  --line: rgba(33, 27, 26, 0.12);
  --max: 1260px;
  --radius: 28px;
  --shadow: 0 24px 70px rgba(0,0,0,.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display:block; max-width:100%; }
button, input, textarea { font: inherit; }
button { cursor:pointer; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 18px max(24px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid rgba(244,239,230,.08);
  background: rgba(25, 20, 19, 0.82);
  backdrop-filter: blur(14px);
  color: var(--cream);
}
.brand {
  font-family: Georgia, serif;
  font-size: 30px;
  letter-spacing: -.04em;
}
.brand span { color: var(--copper); }
.nav { display: flex; gap: 22px; justify-self: center; }
.nav a { font-size: 14px; color: rgba(244,239,230,.78); }
.nav a:hover, .footer__links a:hover, .text-link:hover { color: #fff; }
.menu { display: none; background: none; border: 0; color: inherit; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #8a3244, #702b37);
  color: #fff;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(123,47,61,.32); }
.button--small { min-height: 44px; padding: 0 20px; font-size: 14px; }
.button--full { width: 100%; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(244,239,230,.84);
}
.text-link span { font-size: 18px; }

.hero {
  position: relative;
  overflow: clip;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 438px);
  gap: clamp(56px, 7.6vw, 132px);
  align-items: center;
  max-width: none;
  min-height: calc(100svh - 82px);
  padding: 78px max(24px, calc((100vw - var(--max)) / 2)) 78px;
  background:
    radial-gradient(circle at 18% 18%, rgba(200,123,85,.18), transparent 36%),
    radial-gradient(circle at 84% 12%, rgba(123,47,61,.22), transparent 32%),
    linear-gradient(125deg, #140f10 0%, #1c1416 30%, #221619 62%, #231313 100%);
  color: var(--cream);
}
.hero__noise {
  position: absolute;
  inset: 0;
  opacity: .42;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 94% 12%, transparent 0 18px, rgba(255,255,255,.055) 18px 19px),
    repeating-radial-gradient(ellipse at 18% 110%, transparent 0 20px, rgba(200,123,85,.05) 20px 21px),
    linear-gradient(120deg, transparent 0 42%, rgba(200,123,85,.08) 42% 43%, transparent 43% 100%),
    linear-gradient(150deg, transparent 0 58%, rgba(255,255,255,.04) 58% 59%, transparent 59% 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.35));
}
.hero__copy { position: relative; z-index: 2; max-width: 780px; }
.eyebrow {
  margin: 0 0 26px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(244,239,230,.58);
}
.eyebrow--dark { color: rgba(33,27,26,.48); }
.hero h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(64px, 7.5vw, 110px);
  line-height: .9;
  letter-spacing: -.06em;
  font-weight: 400;
}
.hero h1 em {
  font-style: italic;
  color: var(--copper);
  white-space: nowrap;
}
.hero__lead {
  max-width: 520px;
  margin: 28px 0 0;
  font-size: clamp(28px, 2.3vw, 36px);
  line-height: 1.1;
  color: rgba(244,239,230,.92);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 28px;
  align-items: center;
  margin-top: 40px;
}
.hero__card {
  position: sticky;
  top: 104px;
  z-index: 2;
  width: 100%;
  justify-self: end;
  margin-right: -10px;
  padding: 0;
  border-radius: 28px;
  border: 1px solid rgba(244,239,230,.14);
  background: rgba(244,239,230,.08);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.hero__quote {
  margin: 0 0 14px;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(24px, 1.95vw, 30px);
  line-height: 1.22;
  font-weight: 500;
  color: rgba(255,255,255,.96);
}
.hero__quote--accent {
  margin-top: 8px;
  color: #ffd3bf;
  font-weight: 700;
}
.hero__card-inner {
  padding: 34px 34px 28px;
  animation: cardFloat 9s ease-in-out infinite;
}
.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(244,239,230,.14);
}
.hero__facts strong {
  display:block;
  font-size: 28px;
  line-height: 1;
}
.hero__facts span {
  display:block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(244,239,230,.66);
}
.hero__orbit {
  position: absolute;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
}
.hero__orbit--one { width: 410px; height: 410px; right: -130px; top: -110px; }
.hero__orbit--two { width: 620px; height: 620px; right: -280px; top: -210px; }

.strip {
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid var(--line);
  background: #f0e6da;
}
.strip__track {
  display: flex;
  gap: 18px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(33,27,26,.62);
}
.strip__track i { font-style: normal; color: var(--copper); }

.section { position: relative; overflow: hidden; isolation: isolate; max-width: var(--max); margin: 0 auto; padding: 110px 24px; }
.section > * { position: relative; z-index: 1; }
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .9;
  background:
    repeating-radial-gradient(ellipse at 110% -10%, transparent 0 22px, rgba(123,47,61,.04) 22px 23px),
    repeating-radial-gradient(ellipse at -10% 120%, transparent 0 24px, rgba(200,123,85,.05) 24px 25px);
}
.section__label {
  margin-bottom: 56px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(33,27,26,.44);
}
.section__label--light { color: rgba(244,239,230,.48); }

.intro__grid, .result__grid, .terms, .apply {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(8vw, 100px);
}
.intro h2, .result h2, .faq h2, .leaders h2, .program__head h2, .terms__main h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(44px, 5.6vw, 78px);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 400;
}
.intro__text .large, .result__copy .large {
  margin: 0 0 24px;
  font-family: Georgia, serif;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
}
.intro__text p, .result__copy p, .program__head p {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(33,27,26,.68);
}

.mirror {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  max-width: none;
  padding: 96px max(24px, calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: minmax(280px, 440px) minmax(0, 1fr);
  gap: min(8vw, 110px);
  background: linear-gradient(180deg, #efe3d6 0%, #ecdfd3 100%);
}
.mirror > * { position: relative; z-index: 1; }
.mirror::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 100% 8%, transparent 0 18px, rgba(123,47,61,.05) 18px 19px),
    linear-gradient(135deg, transparent 0 34%, rgba(200,123,85,.06) 34% 35%, transparent 35% 100%);
}

.mirror__intro { position: sticky; top: 110px; align-self: start; }
.mirror__intro h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(42px,5vw,72px); line-height: .95; font-weight: 400; letter-spacing: -.05em; }
.mirror__list { display: grid; gap: 14px; }
.mirror__item {
  display:grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.mirror__item span { color: var(--copper); font-family: Georgia, serif; font-size: 30px; }
.mirror__item p { margin: 0; font-size: 22px; line-height: 1.35; }

.statement {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 100px 24px;
  text-align: center;
  background: linear-gradient(180deg, #140f10, #231717);
  color: var(--cream);
}
.statement > * { position: relative; z-index: 1; }
.statement::before {
  content: "";
  position: absolute;
  inset: -24% -10% -30%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(0,0,0,.85) 0 8%, transparent 20%),
    repeating-radial-gradient(ellipse at 50% 54%, rgba(228,170,141,.26) 0 1px, transparent 1px 22px),
    radial-gradient(ellipse at 50% 54%, rgba(123,47,61,.35), transparent 58%);
  opacity: .9;
}

.statement__small {
  margin: 0 0 18px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(244,239,230,.54);
}
.statement__big {
  max-width: 980px;
  margin: 0 auto;
  font-family: Georgia, serif;
  font-size: clamp(42px, 5vw, 74px);
  line-height: .98;
  letter-spacing: -.04em;
}
.statement__big em { font-style: italic; color: #e4aa8d; }

.program__head {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}
.program__head p { margin: 0; max-width: 560px; }
.program__cards { border-top: 1px solid var(--line); }
.session {
  display:grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 30px;
  padding: 42px 0;
  border-bottom: 1px solid var(--line);
}
.session__num { font-family: Georgia, serif; font-size: 56px; color: rgba(111,40,50,.32); }
.session__kicker { margin: 4px 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wine); }
.session h3 { margin: 0; font-family: Georgia, serif; font-size: clamp(32px, 4vw, 54px); line-height: 1.02; font-weight: 400; letter-spacing: -.04em; }
.session p:last-child { max-width: 780px; margin: 20px 0 0; font-size: 16px; line-height: 1.66; color: rgba(33,27,26,.65); }

.result { padding-top: 90px; }
.result__tiles { display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 72px; background: var(--line); border: 1px solid var(--line); }
.tile { min-height: 220px; padding: 26px; background: var(--paper); }
.tile span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--wine); font-weight: 700; }
.tile p { margin: 55px 0 0; font-size: 17px; line-height: 1.45; }

.safety {
  max-width:none;
  padding-left:max(24px, calc((100vw - var(--max)) / 2));
  padding-right:max(24px, calc((100vw - var(--max)) / 2));
  background: linear-gradient(180deg, #ece2d5 0%, #e8dbcf 100%);
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:min(8vw,110px);
}
.safety__panel h2 { font-size: clamp(42px,5vw,72px); }
.safety__panel > p:last-child { max-width: 650px; margin: 30px 0 0; font-size: 18px; line-height: 1.65; color: rgba(33,27,26,.68); }
.safety__principles { border-top: 1px solid var(--line); }
.safety__principles article { padding: 28px 0; border-bottom: 1px solid var(--line); }
.safety__principles strong { font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
.safety__principles p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: rgba(33,27,26,.62); }

.leaders__grid { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 70px; }
.leader {
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.28);
}
.leader__portrait {
  width: 180px;
  aspect-ratio: 1 / 1.16;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius: 20px;
  background: linear-gradient(145deg, var(--wine), #a86161);
  color:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.leader__portrait span { font-family: Georgia, serif; font-size: 44px; }
.leader__portrait--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
}
.leader h3 { margin: 6px 0 5px; font-family: Georgia, serif; font-size: 34px; font-weight: 400; letter-spacing: -.03em; }
.leader__role { margin: 0 0 20px !important; color: var(--wine) !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.leader p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(33,27,26,.62); }

.terms {
  max-width:none;
  background: linear-gradient(180deg, #181313 0%, #241919 100%);
  color: var(--cream);
  gap: min(8vw, 110px);
  padding-left:max(24px, calc((100vw - var(--max)) / 2));
  padding-right:max(24px, calc((100vw - var(--max)) / 2));
}
.terms__main h2 em { color: #e5b39e; font-style: italic; }
.terms__main > p { margin: 30px 0 0; font-size: 17px; color: rgba(244,239,230,.58); }
.terms__card {
  align-self:center;
  padding: 30px;
  border: 1px solid rgba(244,239,230,.14);
  border-radius: 20px;
  background: rgba(244,239,230,.05);
}
.terms__row { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid rgba(244,239,230,.12); }
.terms__row span { font-size:13px; color:rgba(244,239,230,.5); }
.terms__row strong { font-size:14px; }
.terms__price { padding:30px 0 26px; }
.terms__price span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:rgba(244,239,230,.5); }
.terms__price strong { display:block; margin-top:8px; font-family:Georgia,serif; font-size:56px; font-weight:400; }

.faq h2 { margin-bottom: 56px; }
.faq__items { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { list-style:none; cursor:pointer; padding:25px 48px 25px 0; position:relative; font-size:20px; font-weight:700; }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; position:absolute; right:4px; top:20px; font-size:28px; font-weight:300; color:var(--wine); transition:transform .2s ease; }
details[open] summary::after { transform:rotate(45deg); }
details p { max-width:760px; margin:-6px 0 28px; font-size:15px; line-height:1.65; color:rgba(33,27,26,.62); }

.apply {
  max-width:none;
  gap:min(8vw,110px);
  padding:110px max(24px, calc((100vw - var(--max)) / 2));
  background: linear-gradient(180deg, #742f3c 0%, #692834 100%);
  color:#fff;
}
.apply h2 { margin:0; font-family: Georgia, serif; font-size:clamp(46px,5.8vw,78px); line-height:.98; letter-spacing: -.05em; }
.apply h2 em { color:#e8b29c; font-style: italic; }
.apply__copy > p:last-child { max-width:580px; margin:30px 0 0; font-size:16px; line-height:1.65; color:rgba(255,255,255,.7); }
.form {
  align-self:start;
  padding:30px;
  border-radius:20px;
  background:var(--paper);
  color:var(--ink);
}
.form label:not(.check) { display:block; margin-bottom:20px; }
.form label > span { display:block; margin-bottom:8px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(33,27,26,.52); }
.form input, .form textarea {
  width:100%;
  border:0;
  border-bottom:1px solid rgba(33,27,26,.2);
  background:transparent;
  padding:13px 0;
  font-size:16px;
  border-radius:0;
  outline:none;
}
.form input:focus, .form textarea:focus { border-bottom-color:var(--wine); }
.form textarea { resize:vertical; min-height: 112px; }
.check { display:flex; gap:10px; align-items:flex-start; margin:18px 0; }
.check input { width:16px; height:16px; margin-top:2px; accent-color:var(--wine); }
.check span {
  margin:0 !important;
  font-size:11px !important;
  line-height:1.45;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:400 !important;
}
.check a, .cookie a, .legal a { text-decoration: underline; text-underline-offset: 3px; }
.form__note { margin:12px 0 0; font-size:10px; line-height:1.4; color:rgba(33,27,26,.46); text-align:center; }

.footer {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:30px max(24px, calc((100vw - var(--max)) / 2));
  background:#171313;
  color:rgba(244,239,230,.58);
  font-size:11px;
}
.brand--footer { color:var(--cream); }
.footer p { margin: 10px 0 0; }
.footer__links {
  display: grid;
  gap: 10px;
  font-size: 12px;
}
.footer__links a { color: rgba(244,239,230,.78); }

.cookie {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(23,19,19,.96);
  color: var(--cream);
  box-shadow: 0 18px 52px rgba(0,0,0,.32);
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.cookie.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie__text strong { display:block; margin-bottom: 6px; font-size: 15px; }
.cookie__text p { margin: 0; max-width: 840px; font-size: 13px; line-height: 1.5; color: rgba(244,239,230,.76); }
.cookie__actions { display:flex; gap: 12px; align-items:center; white-space: nowrap; }
.cookie__link { border:0; background:none; color: rgba(244,239,230,.76); padding: 0; }

.legal-shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.legal-hero {
  padding: 58px max(24px, calc((100vw - var(--max)) / 2)) 42px;
  background: linear-gradient(135deg, #171313 0%, #251a18 100%);
  color: var(--cream);
}
.legal-hero h1 {
  margin: 14px 0 0;
  font-family: Georgia, serif;
  font-size: clamp(42px, 5vw, 74px);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 400;
}
.legal-hero p { max-width: 720px; margin: 20px 0 0; color: rgba(244,239,230,.7); line-height: 1.6; }
.legal {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 54px 24px 90px;
}
.legal__back {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--wine);
  font-weight: 700;
}
.legal h2 {
  margin: 38px 0 14px;
  font-family: Georgia, serif;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 400;
}
.legal p, .legal li {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(33,27,26,.78);
}
.legal ul { padding-left: 22px; }
.legal .muted {
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(123,47,61,.08);
  color: rgba(33,27,26,.72);
}
.thanks {
  min-height: calc(100svh - 160px);
  display: grid;
  place-items: center;
  padding: 40px 24px 80px;
}
.thanks__card {
  max-width: 760px;
  padding: 40px;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.thanks__card h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(44px, 5vw, 74px); line-height: .94; font-weight: 400; letter-spacing: -.05em; }
.thanks__card p { margin: 22px 0 0; font-size: 18px; line-height: 1.65; color: rgba(33,27,26,.72); }
.thanks__actions { display:flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .75s ease, transform .75s ease; }
.reveal--delay { transition-delay:.12s; }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .topbar { grid-template-columns:1fr auto; }
  .nav, .topbar > .button { display:none; }
  .menu { display:block; justify-self:end; cursor:pointer; }
  .topbar.is-open { height:auto; min-height:72px; grid-template-columns:1fr auto; align-items:start; padding-top:26px; padding-bottom:22px; }
  .topbar.is-open .nav { grid-column:1/-1; display:flex; flex-direction:column; gap:16px; padding-top:18px; }
  .hero { grid-template-columns: 1fr; min-height:auto; padding-top: 64px; }
  .hero__card { position: relative; top: auto; margin-right: 0; }
  .hero__card-inner { animation: none; }
  .hero__copy { max-width: none; }
  .hero__card { max-width: 620px; }
  .intro__grid, .result__grid, .program__head, .mirror, .safety, .terms, .apply { grid-template-columns:1fr; }
  .mirror__intro { position:static; }
  .result__tiles { grid-template-columns:1fr 1fr; }
  .leaders__grid { grid-template-columns:1fr; }
  .terms__card { max-width:620px; width:100%; }
  .cookie { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .section { padding-top:78px; padding-bottom:78px; }
  .section__label { margin-bottom:40px; }
  .hero { padding-left:20px; padding-right:20px; }
  .hero h1 { font-size: clamp(48px, 15.2vw, 72px); }
  .hero h1 em { white-space: normal; }
  .hero__lead { font-size: 22px; }
  .hero__actions { align-items:flex-start; flex-direction:column; gap:20px; }
  .hero__card { padding:0; }
  .hero__quote { font-size: 24px; }
  .hero__facts { grid-template-columns:1fr; gap:10px; }
  .hero__facts div { display:flex; align-items:baseline; gap:10px; }
  .hero__facts span { margin-top:0; }
  .intro__text .large, .result__copy .large { font-size:22px; }
  .mirror { padding-top:78px; padding-bottom:78px; }
  .mirror__item { grid-template-columns:34px 1fr; }
  .mirror__item p { font-size:18px; }
  .statement { padding:84px 20px; }
  .program__head { margin-bottom:42px; }
  .session { grid-template-columns:1fr; gap:10px; padding:34px 0; }
  .session__num { font-size:42px; }
  .result__tiles { grid-template-columns:1fr; }
  .tile { min-height:170px; }
  .tile p { margin-top:35px; }
  .safety, .terms, .apply { padding-top:82px; padding-bottom:82px; }
  .leader { grid-template-columns:1fr; }
  .leader__portrait { width:100%; max-width: 240px; }
  .terms__price strong { font-size:46px; }
  .footer { flex-direction:column; align-items:flex-start; }
  .cookie { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
  .thanks__card { padding: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
  .reveal { opacity:1; transform:none; }
}


.program, .result, .leaders, .faq, .safety, .terms, .apply { position: relative; overflow: hidden; isolation: isolate; }
.program > *, .result > *, .leaders > *, .faq > *, .safety > *, .terms > *, .apply > * { position: relative; z-index: 1; }
.program::before, .result::before, .leaders::before, .faq::before, .safety::before, .terms::before, .apply::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 100% 0%, transparent 0 22px, rgba(200,123,85,.04) 22px 23px),
    repeating-radial-gradient(ellipse at 0% 100%, transparent 0 24px, rgba(123,47,61,.05) 24px 25px);
}
.terms::before, .apply::before {
  background:
    repeating-radial-gradient(ellipse at 100% 0%, transparent 0 20px, rgba(255,255,255,.05) 20px 21px),
    linear-gradient(145deg, transparent 0 60%, rgba(255,255,255,.04) 60% 61%, transparent 61% 100%);
}
.nowrap { white-space: nowrap; }
.apply-gap { display: block; height: .5em; }
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}

.hero__card-inner::after { content:""; position:absolute; inset:auto 18px 16px auto; width:72px; height:72px; border-radius:50%; background: radial-gradient(circle, rgba(200,123,85,.18), transparent 68%); pointer-events:none; }
.hero__card-inner { position: relative; }

/* Desktop hero geometry fix: title and card must never overlap */
@media (min-width: 981px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 438px;
    column-gap: clamp(72px, 6vw, 104px);
  }

  .hero__copy {
    min-width: 0;
    max-width: 100%;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(62px, 6.35vw, 92px);
  }

  .hero h1 em {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    font-size: .98em;
  }

  .hero__card {
    width: 438px;
    max-width: 100%;
    margin-right: 0;
    justify-self: end;
  }
}

/* Extra breathing room on large desktop screens */
@media (min-width: 1440px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 430px;
    column-gap: 96px;
  }
  .hero h1 {
    font-size: clamp(72px, 6.1vw, 92px);
  }
}

/* User tweaks 2026-08-31: hero word size, card shift, quote sizing */
.hero__quote {
  margin: 0 !important;
  font-size: clamp(21.6px, 1.75vw, 27px);
  line-height: 1.22;
}
.hero__quote + .hero__quote {
  margin-top: .5em !important;
}
.hero__facts {
  margin-top: calc(1.5em + 10px);
}

@media (min-width: 981px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: clamp(96px, 8vw, 160px);
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(62px, 6.2vw, 92px);
  }

  .hero h1 em {
    display: block;
    white-space: nowrap;
    font-size: .85em;
  }

  .hero__card {
    width: 420px;
    max-width: 100%;
    justify-self: end;
    margin-right: 0;
    transform: translateX(10%);
  }
}

@media (max-width: 980px) {
  .hero__card {
    transform: none;
  }
}


/* 2026-09-02 branding update: full logo, hero photo overlay, infographic */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
.brand__mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
.brand__text {
  display: inline-block;
  max-width: 300px;
  line-height: 1.05;
  color: currentColor;
}
.brand--footer { align-items: flex-start; }
.brand--footer .brand__text { max-width: 360px; }
.brand span { color: inherit; }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/hero-sea-sunset.webp') center center / cover no-repeat;
  opacity: .15;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.hero__lead { max-width: 580px; }
.hero__quote {
  font-weight: 400;
  letter-spacing: -.01em;
}

.infographic__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(8vw, 100px);
  align-items: end;
  margin-bottom: 56px;
}
.infographic__head .large {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.18;
}
.infographic__wrap {
  padding: 46px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.25));
  box-shadow: 0 16px 50px rgba(33,27,26,.08);
}
.infographic__core {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
}
.infographic__core::before {
  content: "";
  position: absolute;
  width: min(72vw, 540px);
  height: min(72vw, 540px);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(200,123,85,.18) 0 12%, transparent 28%),
    repeating-radial-gradient(circle at center, rgba(123,47,61,.10) 0 1px, transparent 1px 30px);
  opacity: .8;
}
.infographic__logo {
  position: relative;
  width: min(34vw, 220px);
  z-index: 2;
}
.infographic__rings { position: absolute; inset: 0; }
.node {
  position: absolute;
  width: 230px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(33,27,26,.1);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(33,27,26,.06);
}
.node strong {
  display: block;
  margin-bottom: 8px;
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}
.node span {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(33,27,26,.66);
}
.node::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, rgba(123,47,61,.35), rgba(123,47,61,0));
}
.node--power { top: 34px; left: 7%; }
.node--power::after { top: 58px; right: -64px; }
.node--money { top: 150px; right: 4%; }
.node--money::after { top: 58px; left: -64px; transform: rotate(180deg); }
.node--sex { bottom: 26px; left: 18%; }
.node--sex::after { top: -20px; right: 28px; width: 1px; height: 56px; background: linear-gradient(180deg, rgba(123,47,61,0), rgba(123,47,61,.35)); }

@media (min-width: 981px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 400px;
    column-gap: clamp(110px, 10vw, 180px);
  }
  .hero h1 {
    font-size: clamp(74px, 7vw, 106px);
  }
  .hero h1 em {
    display: block;
    white-space: nowrap;
    font-size: 1.15em;
  }
  .hero__card {
    width: 400px;
    transform: translateX(10%);
  }
}

@media (max-width: 1260px) {
  .brand__text {
    max-width: 220px;
    font-size: 13px;
  }
}

@media (max-width: 980px) {
  .brand__text {
    max-width: 160px;
    font-size: 12px;
  }
  .infographic__head { grid-template-columns: 1fr; margin-bottom: 34px; }
  .infographic__wrap { padding: 26px; }
  .infographic__core { min-height: 620px; }
  .infographic__logo { width: 170px; }
  .node { width: min(100%, 260px); }
  .node--power { top: 22px; left: 50%; transform: translateX(-50%); }
  .node--money { top: 220px; right: 50%; transform: translateX(50%); }
  .node--sex { bottom: 20px; left: 50%; transform: translateX(-50%); }
  .node::after { display: none; }
}

@media (max-width: 620px) {
  .brand__mark { width: 34px; height: 34px; flex-basis: 34px; }
  .brand__text { max-width: 140px; font-size: 11px; }
  .hero__lead { max-width: 420px; }
}


/* 2026-09-02 final pass: previous-task compliance */
:root {
  --hero-title-scale: 1.15;
}

.hero h1 {
  font-size: clamp(72px, 8vw, 118px);
  line-height: .88;
}
.hero h1 em {
  display: block;
  font-size: 1.15em;
  white-space: nowrap;
}
.hero__lead {
  max-width: 620px;
  font-size: clamp(26px, 2.45vw, 38px);
  line-height: 1.08;
}
.hero__quote {
  font-weight: 300;
  font-size: clamp(21px, 1.72vw, 27px);
  line-height: 1.24;
}
.hero__quote + .hero__quote {
  margin-top: .5em !important;
}
.hero__quote--accent {
  font-weight: 500;
}
.hero__facts {
  margin-top: calc(1.5em + 10px);
}
.brand {
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
.brand__mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.brand__text {
  max-width: 330px;
  font-size: 14px;
  line-height: 1.05;
}

@media (min-width: 981px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 400px;
    column-gap: clamp(118px, 11vw, 190px);
  }
  .hero__copy {
    max-width: 860px;
  }
  .hero__card {
    width: 400px;
    max-width: 100%;
    justify-self: end;
    margin-right: 0;
    transform: translateX(10%);
  }
}

@media (max-width: 1260px) {
  .brand__text {
    max-width: 260px;
    font-size: 13px;
  }
}

@media (max-width: 980px) {
  .brand__text {
    max-width: 160px;
    font-size: 12px;
  }
  .hero__card {
    transform: none;
  }
  .hero h1 {
    font-size: clamp(52px, 15vw, 84px);
  }
  .hero h1 em {
    white-space: normal;
    font-size: 1.1em;
  }
}

/* 2026-09-02 header/logo cleanup */
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: auto;
  min-width: 0;
  line-height: 1;
}
.brand__mark {
  display: block;
  width: 56px;
  height: 56px;
  max-height: 80px;
  flex: 0 0 56px;
  object-fit: contain;
}
.brand--footer .brand__mark {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
}
.brand__text { display: none !important; }

.topbar {
  grid-template-columns: 80px 1fr auto auto;
  min-height: 76px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.topbar .brand { width: 80px; }
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 44px);
}
.nav a { white-space: nowrap; }

/* The infographic keeps its logic, but not the brand mark. */
.infographic__symbol {
  position: relative;
  z-index: 2;
  width: min(34vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(123,47,61,.34);
  box-shadow: inset 0 0 0 22px rgba(200,123,85,.05), 0 18px 55px rgba(33,27,26,.10);
}
.infographic__symbol::before,
.infographic__symbol::after,
.infographic__symbol span,
.infographic__symbol i,
.infographic__symbol b {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  box-sizing: border-box;
}
.infographic__symbol::before {
  width: 78%;
  height: 34%;
  border: 2px solid rgba(200,123,85,.72);
  transform: translate(-50%,-50%) rotate(18deg);
}
.infographic__symbol::after {
  width: 34%;
  height: 78%;
  border: 2px solid rgba(123,47,61,.78);
  transform: translate(-50%,-50%) rotate(-12deg);
}
.infographic__symbol span {
  width: 58%;
  height: 58%;
  border: 2px solid rgba(229,179,158,.78);
  transform: translate(-50%,-50%) rotate(52deg) scaleY(.55);
}
.infographic__symbol i {
  width: 18%;
  height: 18%;
  background: radial-gradient(circle at 35% 30%, #f8ddc7, #c87b55 52%, #7b2f3d 100%);
  box-shadow: 0 0 28px rgba(200,123,85,.35);
}
.infographic__symbol b {
  width: 5px;
  height: 82%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(200,123,85,0), rgba(200,123,85,.85), rgba(200,123,85,0));
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 64px auto;
  }
  .topbar .brand { width: 64px; }
  .brand__mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }
  .brand--footer .brand__mark {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }
  .infographic__symbol { width: 170px; }
}

/* 2026-09-02 first-screen final tuning */
:root {
  --hero-ticker-height: 58px;
}

.hero {
  position: relative;
  padding-bottom: calc(78px + var(--hero-ticker-height));
}

.hero__copy,
.hero__card {
  top: calc(-1 * var(--hero-ticker-height));
}

.hero h1 em {
  font-size: .85em !important;
}

.hero__lead {
  line-height: 1.12;
}

.hero__card {
  position: relative !important;
  top: calc(-1 * var(--hero-ticker-height)) !important;
  transform: translate(var(--float-x, 0px), var(--float-y, 0px)) rotate(var(--float-r, 0deg)) !important;
  transition: transform 11s cubic-bezier(.45,.08,.32,1), box-shadow .35s ease;
  will-change: transform;
}

.hero__card:hover {
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
}

.hero-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  height: var(--hero-ticker-height);
  display: flex;
  align-items: center;
  overflow: visible;
  border-top: 1px solid rgba(244,239,230,.10);
  background: rgba(123,47,61,.88);
  backdrop-filter: blur(8px);
}

.hero-ticker__track {
  display: flex;
  width: max-content;
  min-width: max-content;
  animation: heroTickerMarquee 42s linear infinite;
  will-change: transform;
}

.hero-ticker__group {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  white-space: nowrap;
}

.hero-ticker__group span {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);
  transform-origin: center center;
  transition: transform .38s cubic-bezier(.18,.82,.2,1), text-shadow .38s ease, color .38s ease;
  cursor: default;
}

.hero-ticker__group i {
  font-style: normal;
  font-size: 13px;
  color: rgba(255,255,255,.52);
}

.hero-ticker:hover .hero-ticker__track {
  animation-play-state: paused;
}

.hero-ticker__group span:hover {
  z-index: 40;
  transform: translateY(-.72em) scale(5);
  background: transparent;
  color: #fff;
  text-shadow: 0 10px 40px rgba(0,0,0,.42);
}

@keyframes heroTickerMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (min-width: 981px) {
  .hero {
    align-items: center;
  }
  .hero__copy {
    position: relative;
    top: calc(-1 * var(--hero-ticker-height));
  }
  .hero__card {
    justify-self: end;
    margin-right: 0;
  }
}

@media (max-width: 980px) {
  :root { --hero-ticker-height: 52px; }
  .hero {
    padding-bottom: calc(64px + var(--hero-ticker-height));
  }
  .hero__copy,
  .hero__card {
    top: -20px !important;
  }
  .hero__card {
    transform: none !important;
    transition: none;
  }
  .hero-ticker__group span:hover {
    transform: translateY(-.55em) scale(2.6);
  }
}

@media (max-width: 620px) {
  .hero-ticker__group {
    gap: 14px;
  }
  .hero-ticker__group span {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ticker__track {
    animation: none !important;
  }
  .hero__card {
    transform: none !important;
    transition: none !important;
  }
}
.hero__card-inner { animation: none !important; }

/* 2026-09-02 overview screen + moving infographic */
.overview {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  max-width: var(--max);
  margin: 0 auto;
  min-height: calc(100svh - 82px);
  padding: 54px 24px 42px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 24px;
}
.overview::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .9;
  background:
    repeating-radial-gradient(ellipse at 100% 0%, transparent 0 22px, rgba(123,47,61,.04) 22px 23px),
    repeating-radial-gradient(ellipse at 0% 100%, transparent 0 24px, rgba(200,123,85,.05) 24px 25px);
}
.overview > * { position: relative; z-index: 1; }
.overview__row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr);
  gap: clamp(42px, 6vw, 110px);
  align-items: start;
}
.overview__panel h2,
.overview__logic h3 {
  margin: 0;
  color: var(--ink);
}
.overview__panel h2 {
  font-family: Georgia, serif;
  font-size: clamp(50px, 4.4vw, 72px);
  line-height: .94;
  letter-spacing: -.045em;
}
.overview__logic h3 {
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(28px, 2.05vw, 40px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.03em;
}
.overview__copy {
  max-width: 560px;
}
.overview__copy .large {
  margin: 0 0 14px;
  font-family: Georgia, serif;
  font-size: clamp(28px, 2.4vw, 44px);
  line-height: 1.04;
  color: rgba(33,27,26,.86);
}
.overview__copy p:last-child {
  margin: 0;
  font-size: 16px;
  line-height: 1.58;
  color: rgba(33,27,26,.72);
}
.overview-graphic {
  min-height: 320px;
  padding: 0;
}
.overview-graphic__stage {
  position: relative;
  min-height: 320px;
  height: 100%;
  border-radius: 26px;
  border: 1px solid rgba(33,27,26,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.38));
  box-shadow: 0 18px 50px rgba(33,27,26,.06);
  overflow: hidden;
}
.overview-graphic__rings {
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(123,47,61,.1) 0 1px, transparent 1px 28px),
    radial-gradient(circle at 50% 50%, rgba(200,123,85,.12) 0 12%, transparent 25%);
  opacity: .9;
}
.overview-graphic__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(112px, 14vw, 176px);
  transform: translate(-50%, -50%);
  z-index: 2;
  filter: drop-shadow(0 10px 22px rgba(98,58,47,.12));
}
.overview-graphic__node {
  position: absolute;
  z-index: 3;
  width: 210px;
  padding: 16px 18px 14px;
  border-radius: 18px;
  border: 1px solid rgba(33,27,26,.1);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(33,27,26,.08);
  transition: transform 10s ease-in-out;
  will-change: transform;
}
.overview-graphic__node strong {
  display: block;
  margin-bottom: 6px;
  font-family: Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}
.overview-graphic__node span {
  display: block;
  font-size: 13px;
  line-height: 1.38;
  color: rgba(33,27,26,.62);
}
.overview-graphic__node--power { left: 58px; top: 42px; }
.overview-graphic__node--money { right: 46px; top: 108px; }
.overview-graphic__node--sex { left: 122px; bottom: 34px; }

@media (max-width: 980px) {
  .overview {
    min-height: auto;
    grid-template-rows: auto;
    gap: 28px;
  }
  .overview__row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .overview__copy .large {
    font-size: clamp(26px, 6vw, 36px);
  }
  .overview-graphic {
    min-height: 520px;
  }
  .overview-graphic__stage {
    min-height: 520px;
  }
  .overview-graphic__node--power { left: 24px; top: 24px; }
  .overview-graphic__node--money { right: 24px; top: 168px; }
  .overview-graphic__node--sex { left: 24px; bottom: 24px; }
}

/* 2026-09-02 typography system after hero ticker + overview semantic grouping */
:root {
  --font-screen-title: "Bodoni 72", Didot, "Times New Roman", serif;
  --font-content: Inter, Arial, Helvetica, sans-serif;
}

/* Everything after the first screen defaults to sans-serif. */
.overview,
.mirror,
.statement,
.program,
.result,
.safety,
.leaders,
.terms,
.faq,
.apply,
.footer {
  font-family: var(--font-content);
}

/* Only actual screen titles use the thin serif face. */
.overview__title,
.mirror__intro h2,
.statement__big,
.program__head h2,
.result h2,
.safety__panel h2,
.leaders > h2,
.terms__main h2,
.faq > h2,
.apply h2 {
  font-family: var(--font-screen-title);
  font-weight: 400;
}

/* Non-screen headings stay sans-serif. */
.session h3,
.safety__principles strong,
.leader h3,
.overview-graphic__node strong,
.terms__price strong,
.tile,
summary {
  font-family: var(--font-content);
}

/* Second screen: two self-contained semantic groups in one viewport. */
.overview {
  height: calc(100svh - 82px);
  min-height: 660px;
  max-height: 920px;
  padding: 38px 24px 34px;
  grid-template-rows: auto minmax(250px, 1fr);
  gap: 22px;
}
.overview__groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(54px, 7vw, 118px);
  align-items: start;
}
.overview__group {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(260px, 1.2fr);
  grid-template-areas:
    "label label"
    "title text";
  column-gap: clamp(28px, 3vw, 52px);
  row-gap: 12px;
  align-items: start;
}
.overview__group .section__label {
  grid-area: label;
  margin: 0 0 4px;
}
.overview__title {
  grid-area: title;
  margin: 0;
  font-size: clamp(39px, 3.25vw, 56px);
  line-height: .96;
  letter-spacing: -.035em;
  color: var(--ink);
}
.overview__text {
  grid-area: text;
  margin: 2px 0 0;
  font-family: var(--font-content);
  font-size: 16px;
  line-height: 1.48;
  font-weight: 400;
  color: rgba(33,27,26,.72);
}
.overview__text strong {
  font-family: inherit;
  font-weight: 700;
  color: rgba(33,27,26,.9);
}
.overview-graphic {
  min-height: 0;
  height: 100%;
}
.overview-graphic__stage {
  min-height: 250px;
  height: 100%;
}
.overview-graphic__node strong {
  font-size: 20px;
  font-weight: 500;
}
.overview-graphic__node span {
  font-family: var(--font-content);
}

@media (max-width: 1180px) and (min-width: 981px) {
  .overview__groups {
    gap: 42px;
  }
  .overview__group {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "text";
    row-gap: 10px;
  }
  .overview__title {
    font-size: 42px;
  }
}

@media (max-width: 980px) {
  .overview {
    height: auto;
    min-height: auto;
    max-height: none;
    padding-top: 58px;
    padding-bottom: 58px;
    gap: 34px;
  }
  .overview__groups {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .overview__group {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "text";
    row-gap: 12px;
  }
  .overview__title {
    font-size: clamp(42px, 10vw, 58px);
  }
  .overview__text {
    max-width: 680px;
    font-size: 16px;
  }
}

/* Enforce the two-font rule for all content after the hero ticker. */
.mirror__item span,
.session__num,
.session h3,
.result__copy .large,
.safety__principles strong,
.leader__portrait span,
.leader h3,
.terms__price strong,
.overview-graphic__node strong,
.overview-graphic__node span,
.tile,
.tile span,
.tile p,
summary,
details p,
.program__head p,
.result__copy p,
.safety__panel > p:last-child,
.safety__principles p,
.leader p,
.terms__row,
.faq__items,
.apply__copy > p:last-child,
.form,
.section__label,
.statement__small {
  font-family: var(--font-content);
}

.mirror__item span,
.session__num,
.safety__principles strong,
.leader__portrait span,
.leader h3,
.terms__price strong,
.overview-graphic__node strong {
  font-weight: 500;
}


/* 2026-09-02 overview tightening pass */
.overview__panel h2,
.overview__logic h3 {
  font-size: 90% !important;
}

.overview__row .overview__copy {
  padding-top: 1.2em;
}

.overview-graphic {
  min-height: 240px !important;
}

.overview-graphic__stage {
  min-height: 240px !important;
}

@media (max-width: 980px) {
  .overview__row .overview__copy {
    padding-top: .8em;
  }

  .overview-graphic {
    min-height: 390px !important;
  }

  .overview-graphic__stage {
    min-height: 390px !important;
  }
}

/* 2026-09-02 explicit fix for overview screen per user screenshot */
.overview__title {
  font-size: clamp(35px, 2.95vw, 50px) !important;
  line-height: .96 !important;
}

.overview__text {
  margin-top: 1.15em !important;
  font-family: var(--font-content) !important;
  font-size: 16px !important;
  line-height: 1.48 !important;
}

.overview-graphic {
  height: clamp(300px, 34vh, 360px) !important;
  min-height: clamp(300px, 34vh, 360px) !important;
}

.overview-graphic__stage {
  height: clamp(300px, 34vh, 360px) !important;
  min-height: clamp(300px, 34vh, 360px) !important;
}

@media (max-width: 980px) {
  .overview__title {
    font-size: clamp(38px, 8.6vw, 52px) !important;
  }

  .overview__text {
    margin-top: .95em !important;
  }

  .overview-graphic {
    height: 390px !important;
    min-height: 390px !important;
  }

  .overview-graphic__stage {
    height: 390px !important;
    min-height: 390px !important;
  }
}

/* 2026-09-02 overview micro-fix per latest request */
.overview__title {
  font-size: clamp(33px, 2.8vw, 47px) !important;
  line-height: .96 !important;
}

.overview__text {
  margin-top: 0.42em !important;
}

.overview-graphic {
  height: clamp(225px, 25.5vh, 270px) !important;
  min-height: clamp(225px, 25.5vh, 270px) !important;
}

.overview-graphic__stage {
  height: clamp(225px, 25.5vh, 270px) !important;
  min-height: clamp(225px, 25.5vh, 270px) !important;
}

@media (max-width: 980px) {
  .overview__title {
    font-size: clamp(36px, 8vw, 49px) !important;
  }

  .overview__text {
    margin-top: 0.36em !important;
  }

  .overview-graphic {
    height: 292px !important;
    min-height: 292px !important;
  }

  .overview-graphic__stage {
    height: 292px !important;
    min-height: 292px !important;
  }
}

/* 2026-09-02 remove dead space after overview + align third screen typography */
.overview {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 38px !important;
  padding-bottom: 38px !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
}

/* Third screen: same title system as the overview screen. */
.mirror__intro h2 {
  font-family: var(--font-screen-title) !important;
  font-size: clamp(33px, 2.8vw, 47px) !important;
  line-height: .96 !important;
  font-weight: 400 !important;
  letter-spacing: -.035em !important;
}

.mirror__intro .eyebrow {
  font-family: var(--font-content) !important;
}

/* Everything to the right uses the same sans-serif body text as overview__text. */
.mirror__list {
  gap: 0 !important;
}

.mirror__item {
  grid-template-columns: 42px 1fr !important;
  gap: 18px !important;
  padding: 20px 0 !important;
}

.mirror__item span {
  font-family: var(--font-content) !important;
  font-size: 14px !important;
  line-height: 1.48 !important;
  font-weight: 500 !important;
  color: var(--copper) !important;
  padding-top: 2px;
}

.mirror__item p {
  margin: 0 !important;
  font-family: var(--font-content) !important;
  font-size: 16px !important;
  line-height: 1.48 !important;
  font-weight: 400 !important;
  color: rgba(33,27,26,.72) !important;
}

@media (max-width: 980px) {
  .overview {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .mirror__intro h2 {
    font-size: clamp(36px, 8vw, 49px) !important;
  }

  .mirror__item p {
    font-size: 16px !important;
  }
}


/* 2026-09-02 unified typography and compact sections from 03 onward */
:root {
  --post-hero-title-size: clamp(33px, 2.8vw, 47px);
  --post-hero-title-font: var(--font-screen-title);
  --post-hero-body-font: var(--font-content);
  --compact-section-y: 38px;
}

/* All main screen titles from 03 onward match “Я могу больше…” exactly. */
.program__head h2,
.result h2,
.safety__panel h2,
.leaders > h2,
.terms__main h2,
.faq > h2,
.apply h2 {
  margin-top: 0 !important;
  font-family: var(--post-hero-title-font) !important;
  font-size: var(--post-hero-title-size) !important;
  line-height: .96 !important;
  font-weight: 400 !important;
  letter-spacing: -.035em !important;
}

/* Everything else from 03 onward uses the same sans-serif system as overview text. */
.program,
.result,
.safety,
.leaders,
.terms,
.faq,
.apply,
.program p,
.program span,
.program strong,
.program h3,
.result p,
.result span,
.result strong,
.safety p,
.safety span,
.safety strong,
.leaders p,
.leaders span,
.leaders strong,
.leaders h3,
.terms p,
.terms span,
.terms strong,
.faq p,
.faq span,
.faq strong,
.faq summary,
.apply p,
.apply span,
.apply strong,
.apply label,
.apply input,
.apply textarea,
.apply button {
  font-family: var(--post-hero-body-font) !important;
}

/* Body copy matches the second screen. */
.program__head p,
.session p:last-child,
.result__copy .large,
.result__copy p,
.safety__panel > p:last-child,
.safety__principles p,
.leader p,
.terms__main > p,
.faq details p,
.apply__copy > p:last-child {
  font-size: 16px !important;
  line-height: 1.48 !important;
  font-weight: 400 !important;
}

/* Subheadings stay sans-serif, subordinate to the main screen heading. */
.session h3 {
  font-size: clamp(24px, 2vw, 32px) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -.025em !important;
}
.session__num {
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}
.session__kicker,
.leader__role,
.section__label,
.statement__small {
  font-family: var(--post-hero-body-font) !important;
}

/* Compact inter-screen spacing, same vertical rhythm as screen 02. */
.program,
.result,
.safety,
.leaders,
.terms,
.faq,
.apply {
  padding-top: var(--compact-section-y) !important;
  padding-bottom: var(--compact-section-y) !important;
}

.program__head {
  margin-bottom: 26px !important;
}
.program__head .section__label,
.result > .section__label,
.leaders > .section__label,
.faq > .section__label,
.terms .section__label {
  margin-bottom: 18px !important;
}

.program__cards {
  margin-top: 0 !important;
}
.session {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

.result__grid {
  gap: min(5vw, 64px) !important;
}
.result__tiles {
  margin-top: 28px !important;
}
.tile {
  min-height: 170px !important;
  padding: 24px !important;
}
.tile span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}
.tile p {
  margin-top: 34px !important;
  font-size: 16px !important;
  line-height: 1.48 !important;
}

.safety {
  gap: min(5vw, 70px) !important;
}
.safety__panel > p:last-child {
  margin-top: 22px !important;
}
.safety__principles article {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
.safety__principles strong {
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

.leaders__grid {
  margin-top: 26px !important;
}
.leader h3 {
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
}

.terms {
  gap: min(5vw, 72px) !important;
}
.terms__main > p {
  margin-top: 22px !important;
}
.terms__price strong {
  font-size: 40px !important;
  line-height: 1 !important;
}

.faq > h2 {
  margin-bottom: 24px !important;
}
summary {
  padding-top: 19px !important;
  padding-bottom: 19px !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}
summary::after {
  top: 14px !important;
}

.apply {
  gap: min(5vw, 72px) !important;
}
.apply-gap {
  height: .5em !important;
}

/* The thank-you page is a destination, not a navigation item. */
.footer__links a[href="thanks.html"] {
  display: none !important;
}

@media (max-width: 980px) {
  :root {
    --post-hero-title-size: clamp(36px, 8vw, 49px);
    --compact-section-y: 34px;
  }

  .program__head,
  .result__grid,
  .safety,
  .terms,
  .apply {
    gap: 26px !important;
  }

  .result__tiles {
    margin-top: 24px !important;
  }
}


/* 2026-09-02 title span font corrections */
.program__head h2 .nowrap,
.safety__panel h2 .nowrap {
  font-family: var(--post-hero-title-font) !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}


/* 2026-09-02 leaders photo unification */
.leader {
  align-items: center;
}
.leader__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}
.leader__role {
  margin: 0 !important;
}
.leader__portrait--photo img {
  object-position: center center;
}

/* 2026-09-02 interactive leader profile */
.leader--interactive {
  cursor: pointer;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.leader--interactive:hover,
.leader--interactive:focus-visible {
  border-color: var(--wine) !important;
  box-shadow: 0 14px 38px rgba(123,47,61,.14);
  outline: none;
}
.leader--interactive:focus-visible {
  box-shadow: 0 0 0 3px rgba(123,47,61,.16), 0 14px 38px rgba(123,47,61,.14);
}

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.profile-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.profile-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22,17,17,.72);
  backdrop-filter: blur(6px);
}
.profile-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  max-height: min(86vh, 820px);
  overflow-y: auto;
  padding: 34px 38px 36px;
  border-radius: 24px;
  border: 1px solid rgba(123,47,61,.24);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0,0,0,.32);
  color: var(--ink);
  transform: translateY(18px) scale(.985);
  transition: transform .22s ease;
}
.profile-modal.is-open .profile-modal__dialog {
  transform: translateY(0) scale(1);
}
.profile-modal__close {
  position: absolute;
  right: 18px;
  top: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wine);
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
}
.profile-modal__close:hover,
.profile-modal__close:focus-visible {
  background: rgba(123,47,61,.08);
  outline: none;
}
.profile-modal__head {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 24px;
  align-items: center;
  padding-right: 44px;
  margin-bottom: 28px;
}
.profile-modal__photo {
  width: 132px;
  height: 154px;
  object-fit: cover;
  object-position: center center;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.1);
}
.profile-modal__head h2 {
  margin: 0 0 10px;
  font-family: var(--post-hero-title-font, Georgia, serif);
  font-size: clamp(34px, 4vw, 50px);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -.035em;
}
.profile-modal__subtitle {
  margin: 0;
  max-width: 610px;
  font-family: var(--post-hero-body-font, Inter, Arial, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--wine);
}
.profile-modal__body {
  display: grid;
  gap: 16px;
}
.profile-modal__body p {
  margin: 0;
  font-family: var(--post-hero-body-font, Inter, Arial, sans-serif);
  font-size: 16px;
  line-height: 1.62;
  color: rgba(33,27,26,.78);
}
body.modal-open {
  overflow: hidden;
}

@media (max-width: 620px) {
  .profile-modal {
    padding: 12px;
  }
  .profile-modal__dialog {
    padding: 26px 22px 28px;
    border-radius: 20px;
  }
  .profile-modal__head {
    grid-template-columns: 92px 1fr;
    gap: 16px;
    padding-right: 30px;
    margin-bottom: 22px;
  }
  .profile-modal__photo {
    width: 92px;
    height: 112px;
    border-radius: 14px;
  }
  .profile-modal__head h2 {
    font-size: 34px;
  }
  .profile-modal__subtitle {
    font-size: 13px;
  }
  .profile-modal__body p {
    font-size: 15px;
    line-height: 1.58;
  }
}


/* 2026-09-02 modal title matches leader card name exactly */
.profile-modal__head h2 {
  margin: 6px 0 5px !important;
  font-family: var(--font-content) !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  letter-spacing: -.03em !important;
}
@media (max-width: 620px) {
  .profile-modal__head h2 {
    font-size: 24px !important;
  }
}

/* 2026-09-02 first-screen facts centering + smartphone hardening */
.hero__facts {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
}
.hero__facts > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  min-width: 0 !important;
}
.hero__facts strong,
.hero__facts span {
  width: 100% !important;
  text-align: center !important;
}
.hero__facts span {
  margin-top: 6px !important;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 980px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    height: min(11.5svh, 76px);
    min-height: 56px;
    max-height: 76px;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 14px !important;
  }

  .topbar .brand {
    width: auto !important;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .topbar .brand__mark {
    width: auto !important;
    height: min(8svh, 56px) !important;
    max-width: 64px !important;
    max-height: 56px !important;
    flex: 0 0 auto !important;
    object-fit: contain;
  }

  .topbar .menu {
    display: block !important;
    grid-column: 3;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 10px 2px !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .topbar > .button,
  .topbar > .nav {
    display: none !important;
  }

  .topbar.is-open {
    height: auto !important;
    max-height: none !important;
    min-height: 56px !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: start !important;
    padding: 8px 14px 14px !important;
  }

  .topbar.is-open .nav {
    display: flex !important;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 0 2px;
  }

  .hero {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero__copy,
  .hero__card,
  .overview,
  .mirror,
  .program,
  .result,
  .safety,
  .leaders,
  .terms,
  .faq,
  .apply {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .hero__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .hero__facts > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .hero__facts strong {
    font-size: 22px !important;
  }
  .hero__facts span {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  /* The logo / power-money-sexuality infographic is intentionally absent on smartphones. */
  .overview-graphic {
    display: none !important;
  }

  .overview {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 34px !important;
  }

  .nowrap {
    white-space: normal !important;
  }
}

@media (max-width: 620px) {
  .topbar {
    height: min(11svh, 68px);
    min-height: 54px;
    max-height: 68px;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .topbar .brand__mark {
    height: min(7.5svh, 50px) !important;
    max-width: 56px !important;
    max-height: 50px !important;
  }
  .topbar .menu {
    font-size: 14px !important;
  }
  .hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .hero-ticker__group span:hover {
    transform: none !important;
    text-shadow: none !important;
  }
}

/* Smartphone overflow safeguards */
@media (max-width: 620px) {
  .hero h1 {
    font-size: clamp(44px, 13vw, 62px) !important;
    line-height: .9 !important;
  }
  .hero h1 em {
    font-size: .85em !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .hero__lead {
    font-size: clamp(20px, 6vw, 26px) !important;
    max-width: 100% !important;
  }
  .hero__card {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero__card-inner {
    padding: 22px 18px 20px !important;
  }
  .hero__quote {
    font-size: clamp(17px, 4.8vw, 20px) !important;
    line-height: 1.28 !important;
  }
  .hero__facts {
    padding-top: 16px !important;
    margin-top: 18px !important;
  }
  .cookie,
  .cookie__text,
  .cookie__actions,
  .form,
  .leader,
  .terms__card,
  .profile-modal__dialog {
    max-width: 100% !important;
  }
  .cookie__actions {
    white-space: normal !important;
    flex-wrap: wrap !important;
  }
}

/* A1 finishing pass: unified section labels + balanced hero facts */
/* All section labels use exactly the same typographic system as "Заявка на участие". */
.section__label,
.mirror__intro .eyebrow,
.apply__copy > .eyebrow {
  font-family: var(--font-content) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}
.section__label {
  color: rgba(33,27,26,.48) !important;
}
.section__label--light {
  color: rgba(244,239,230,.58) !important;
}

/* Symmetrical first-screen fact row. Each pair stays internally centered,
   while the first and last groups sit at equal insets from the card edges. */
.hero__facts {
  grid-template-columns: 1fr 1fr 1fr !important;
  column-gap: 12px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.hero__facts > div {
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  text-align: center !important;
}
.hero__facts > div:nth-child(1) {
  justify-self: start !important;
}
.hero__facts > div:nth-child(2) {
  justify-self: center !important;
}
.hero__facts > div:nth-child(3) {
  justify-self: end !important;
}
.hero__facts strong,
.hero__facts span {
  width: auto !important;
  min-width: 0 !important;
  text-align: center !important;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .hero__facts {
    column-gap: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .hero__facts strong {
    font-size: 22px !important;
  }
  .hero__facts span {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
}


/* A1: remove decorative 01-05 numbering from mirror and program cards */
.mirror__item {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
.session {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

/* A1 micro-fix: visually equal spacing between the three hero facts */
.hero__facts {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
.hero__facts > div {
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: 32% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.hero__facts strong,
.hero__facts span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

@media (max-width: 980px) {
  .hero__facts {
    display: flex !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }
  .hero__facts > div {
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: 32% !important;
  }
}


/* ============================================================
   A1-2: first two screens rebuilt as fixed compositions
   Screen 1 = compact hero + leaders
   Screen 2 = ticker + overview copy + moving infographic
   ============================================================ */

.first-screen {
  position: relative;
}

@media (min-width: 981px) {
  /* Header stays outside this calculation, so the entire composition fits
     inside the visible viewport below the sticky menu. */
  .first-screen {
    height: calc(100svh - 81px);
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 58fr) minmax(0, 42fr);
    overflow: hidden;
    background: var(--paper);
  }

  .first-screen .hero {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    padding: clamp(22px, 3.2vh, 34px) max(24px, calc((100vw - var(--max)) / 2));
    padding-bottom: clamp(22px, 3.2vh, 34px) !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, 410px);
    gap: clamp(38px, 5vw, 86px);
    align-items: center;
  }

  .first-screen .hero__copy,
  .first-screen .hero__card {
    top: 0 !important;
  }

  .first-screen .hero .eyebrow {
    margin-bottom: 12px !important;
    font-size: 11px;
  }

  .first-screen .hero h1 {
    font-size: clamp(50px, 5.1vw, 78px) !important;
    line-height: .88 !important;
  }

  .first-screen .hero__lead {
    margin-top: 14px !important;
    font-size: clamp(19px, 1.65vw, 26px) !important;
    line-height: 1.08 !important;
  }

  .first-screen .hero__actions {
    margin-top: 18px !important;
    gap: 14px 22px !important;
  }

  .first-screen .hero__actions .button {
    min-height: 44px;
    padding: 0 22px;
    font-size: 14px;
  }

  .first-screen .hero__actions .text-link {
    font-size: 14px;
  }

  .first-screen .hero__card-inner {
    padding: 20px 22px 18px !important;
  }

  .first-screen .hero__quote {
    margin-bottom: 7px !important;
    font-size: clamp(15px, 1.22vw, 19px) !important;
    line-height: 1.2 !important;
  }

  .first-screen .hero__quote--accent {
    margin-top: 4px !important;
  }

  .first-screen .hero__facts {
    margin-top: 14px !important;
    padding-top: 12px !important;
  }

  .first-screen .hero__facts strong {
    font-size: 22px !important;
  }

  .first-screen .hero__facts span {
    margin-top: 4px !important;
    font-size: 10px !important;
  }

  /* Leaders are intentionally compact here: same content, smaller geometry. */
  .leaders--first-screen {
    width: 100%;
    height: 100%;
    max-width: var(--max) !important;
    margin: 0 auto !important;
    padding: clamp(12px, 1.8vh, 18px) 24px clamp(14px, 2vh, 20px) !important;
    overflow: hidden !important;
    display: block !important;
  }

  .leaders--first-screen > .section__label {
    margin: 0 0 5px !important;
    font-size: 11px !important;
  }

  .leaders--first-screen > h2 {
    margin: 0 !important;
    font-size: clamp(24px, 2vw, 32px) !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  .leaders--first-screen .leaders__grid {
    margin-top: clamp(10px, 1.5vh, 15px) !important;
    gap: 16px !important;
  }

  .leaders--first-screen .leader {
    grid-template-columns: clamp(92px, 8.3vw, 112px) 1fr !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    min-height: 0 !important;
  }

  .leaders--first-screen .leader__portrait {
    width: clamp(92px, 8.3vw, 112px) !important;
    height: clamp(108px, 9.7vw, 130px) !important;
    aspect-ratio: auto !important;
    border-radius: 13px !important;
  }

  .leaders--first-screen .leader h3 {
    margin: 0 0 5px !important;
    font-size: clamp(18px, 1.55vw, 22px) !important;
    line-height: 1.08 !important;
  }

  .leaders--first-screen .leader__role {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    letter-spacing: .07em !important;
  }

  /* Screen 2: the slider now belongs here, not to the hero. */
  .overview {
    height: calc(100svh - 81px) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 24px 18px !important;
    display: grid !important;
    grid-template-rows: 48px auto minmax(0, 1fr) !important;
    gap: clamp(10px, 1.5vh, 16px) !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  .overview > .hero-ticker--overview {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 48px !important;
    transform: translateX(-50%) !important;
    align-self: start;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(123,47,61,.18);
    background: rgba(123,47,61,.92);
    overflow: visible !important;
  }

  .overview .hero-ticker__group span {
    font-size: 12px;
  }

  .overview__groups {
    gap: clamp(34px, 5vw, 82px) !important;
  }

  .overview__group {
    grid-template-columns: minmax(160px, .78fr) minmax(220px, 1.22fr) !important;
    column-gap: clamp(18px, 2vw, 34px) !important;
    row-gap: 7px !important;
  }

  .overview__group .section__label {
    margin-bottom: 0 !important;
    font-size: 11px !important;
  }

  .overview__title {
    font-size: clamp(28px, 2.25vw, 38px) !important;
    line-height: .95 !important;
  }

  .overview__text {
    margin-top: .22em !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .overview-graphic,
  .overview-graphic__stage {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .overview-graphic {
    align-self: stretch;
    margin: 0 !important;
  }

  .overview-graphic__stage {
    min-height: 220px !important;
  }

  .overview-graphic__logo {
    width: clamp(118px, 12vw, 170px) !important;
  }

  .overview-graphic__node {
    padding: 12px 14px !important;
  }

  .overview-graphic__node strong {
    font-size: 17px !important;
  }

  .overview-graphic__node span {
    font-size: 11px !important;
  }
}

/* Short desktop screens need one more notch of compression to keep the
   first composition inside one viewport. */
@media (min-width: 981px) and (max-height: 800px) {
  .first-screen {
    grid-template-rows: minmax(0, 56fr) minmax(0, 44fr);
  }
  .first-screen .hero {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .first-screen .hero h1 {
    font-size: clamp(46px, 4.7vw, 68px) !important;
  }
  .first-screen .hero__lead {
    font-size: 18px !important;
    margin-top: 10px !important;
  }
  .first-screen .hero__actions {
    margin-top: 12px !important;
  }
  .first-screen .hero__quote {
    font-size: 14px !important;
  }
  .leaders--first-screen {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }
  .leaders--first-screen .leaders__grid {
    margin-top: 7px !important;
  }
  .leaders--first-screen .leader__portrait {
    width: 82px !important;
    height: 96px !important;
  }
  .leaders--first-screen .leader {
    grid-template-columns: 82px 1fr !important;
    padding: 8px 10px !important;
  }
  .overview__text {
    font-size: 13px !important;
  }
}

/* Mobile keeps the safe linear flow. The infographic remains hidden on
   smartphones as established in A1, while the slider appears above About. */
@media (max-width: 980px) {
  .first-screen {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .leaders--first-screen {
    padding-top: 26px !important;
    padding-bottom: 30px !important;
  }

  .leaders--first-screen > h2 {
    white-space: normal;
  }

  .overview > .hero-ticker--overview {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 48px !important;
    transform: translateX(-50%) !important;
    margin-bottom: 18px !important;
    overflow: hidden !important;
  }

  .overview {
    display: block !important;
    padding-top: 0 !important;
  }
}

/* A1-2 containment fix: only the ticker is full-bleed on screen 2. */
@media (min-width: 981px) {
  .overview__groups,
  .overview-graphic,
  .overview-graphic__stage {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Prevent the full-bleed ticker from widening the overview grid track. */
@media (min-width: 981px) {
  .overview {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ============================================================
   A-3: Screen 2 = ticker + About + Logic + Recognize yourself.
   Moving infographic lives below screen 2, immediately before "Суть группы".
   ============================================================ */
.topbar .nav a,
.topbar > .button,
.topbar .menu {
  text-transform: uppercase !important;
}

@media (min-width: 981px) {
  .overview {
    height: calc(100svh - 81px) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 24px clamp(20px, 3vh, 34px) !important;
    display: grid !important;
    grid-template-rows: 48px minmax(0, 1fr) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(18px, 2.4vh, 28px) !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  .overview__groups {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.05fr) minmax(0, 1.08fr) !important;
    gap: clamp(22px, 2.5vw, 42px) !important;
    align-items: start !important;
  }

  .overview__group {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-right: clamp(18px, 2vw, 30px) !important;
    border-right: 1px solid rgba(123,47,61,.14);
  }

  .overview__group:last-child {
    padding-right: 0 !important;
    border-right: 0;
  }

  .overview__group .section__label {
    margin: 0 0 clamp(12px, 1.5vh, 18px) !important;
  }

  .overview__title {
    margin: 0 !important;
    font-size: clamp(30px, 2.35vw, 40px) !important;
    line-height: .96 !important;
  }

  .overview__text {
    margin: clamp(16px, 2vh, 24px) 0 0 !important;
    font-size: clamp(13px, .92vw, 15px) !important;
    line-height: 1.43 !important;
  }

  .overview__title--mirror {
    font-size: clamp(29px, 2.2vw, 38px) !important;
    line-height: .98 !important;
  }

  .overview-mirror__list {
    width: 100%;
    margin-top: clamp(14px, 1.8vh, 22px);
    display: grid;
    gap: 0;
  }

  .overview-mirror__list p {
    margin: 0;
    padding: clamp(7px, 1vh, 10px) 0;
    border-top: 1px solid rgba(123,47,61,.12);
    font-family: var(--font-content);
    font-size: clamp(12px, .84vw, 14px);
    line-height: 1.32;
    color: rgba(33,27,26,.72);
  }

  .overview-graphic-section {
    max-width: var(--max) !important;
    margin: 0 auto !important;
    padding: clamp(24px, 3.5vh, 38px) 24px clamp(28px, 4vh, 44px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .overview-graphic-section .overview-graphic {
    width: 100% !important;
    height: clamp(300px, 42vh, 410px) !important;
    min-height: 300px !important;
    max-height: 410px !important;
    margin: 0 !important;
  }

  .overview-graphic-section .overview-graphic__stage {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

@media (min-width: 981px) and (max-height: 800px) {
  .overview {
    gap: 14px !important;
    padding-bottom: 16px !important;
  }

  .overview__groups {
    gap: 22px !important;
  }

  .overview__group {
    padding-right: 18px !important;
  }

  .overview__group .section__label {
    margin-bottom: 8px !important;
  }

  .overview__title,
  .overview__title--mirror {
    font-size: 28px !important;
  }

  .overview__text {
    margin-top: 10px !important;
    font-size: 12.5px !important;
    line-height: 1.34 !important;
  }

  .overview-mirror__list {
    margin-top: 8px !important;
  }

  .overview-mirror__list p {
    padding: 5px 0 !important;
    font-size: 11.8px !important;
    line-height: 1.24 !important;
  }
}

/* Mobile: screen 2 becomes a clean linear stack; the animated infographic
   stays hidden, preserving the established A1 smartphone rule. */
@media (max-width: 980px) {
  .overview__groups {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .overview__group {
    display: block !important;
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  .overview__title--mirror {
    margin-top: 0 !important;
  }

  .overview-mirror__list {
    margin-top: 18px;
    display: grid;
    gap: 0;
  }

  .overview-mirror__list p {
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid rgba(123,47,61,.12);
    font-family: var(--font-content);
    font-size: 16px;
    line-height: 1.4;
    color: rgba(33,27,26,.72);
  }

  .overview-graphic-section {
    display: none !important;
  }
}


/* ============================================================
   A-3 spacing pass: one compact vertical rhythm from leaders down.
   ============================================================ */
:root {
  --a3-flow-gap: clamp(18px, 2.2vh, 24px);
}

@media (min-width: 981px) {
  /* Do not keep an artificial empty remainder of the viewport below leaders. */
  .first-screen {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  .first-screen .hero {
    height: auto !important;
    min-height: 0 !important;
  }

  .leaders--first-screen {
    height: auto !important;
    padding-bottom: var(--a3-flow-gap) !important;
  }

  /* Slider starts immediately after leaders; its lower gap uses the same rhythm. */
  .overview {
    margin-top: 0 !important;
    gap: var(--a3-flow-gap) !important;
    padding-top: 0 !important;
  }

  /* The infographic no longer floats inside a large empty vertical field. */
  .overview-graphic-section {
    padding-top: var(--a3-flow-gap) !important;
    padding-bottom: var(--a3-flow-gap) !important;
  }

  /* The next semantic block begins at the same visual distance. */
  .statement {
    padding-top: var(--a3-flow-gap) !important;
  }
}

@media (max-width: 980px) {
  .leaders--first-screen {
    padding-bottom: 18px !important;
  }

  .overview > .hero-ticker--overview {
    margin-bottom: 18px !important;
  }
}


/* ============================================================
   A-3 r4: ticker replaces infographic near "Суть группы".
   Infographic moves to the bottom, immediately before the footer.
   ============================================================ */
@media (min-width: 981px) {
  .overview {
    grid-template-rows: minmax(0, 1fr) !important;
    padding-bottom: var(--a3-flow-gap) !important;
  }
}

.ticker-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.ticker-section .hero-ticker--overview {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 48px !important;
  transform: none !important;
  margin: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(123,47,61,.18);
  background: rgba(123,47,61,.92);
  overflow: hidden !important;
}

.ticker-section + .statement {
  padding-top: var(--a3-flow-gap) !important;
}

.overview-graphic-section--footer {
  margin-top: var(--a3-flow-gap) !important;
  padding-top: var(--a3-flow-gap) !important;
  padding-bottom: var(--a3-flow-gap) !important;
}

@media (max-width: 980px) {
  .ticker-section {
    margin: 0 !important;
    padding: 0 !important;
  }

  .ticker-section .hero-ticker--overview {
    display: flex !important;
    height: 48px !important;
  }

  .ticker-section + .statement {
    padding-top: 18px !important;
  }

  /* Keep the established mobile rule: no moving infographic on phones. */
  .overview-graphic-section--footer {
    display: none !important;
  }
}


/* ============================================================
   A4: vertical re-balance of the first two screens.
   Screen 1 = taller hero + leaders, with no dead space at the bottom.
   The overview ends naturally, so the gap to the ticker matches the
   ticker-to-statement gap.
   ============================================================ */
:root {
  --a4-flow-gap: 16px;
}

@media (min-width: 981px) {
  .first-screen {
    height: calc(100svh - 81px) !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: minmax(0, 62.1fr) minmax(0, 37.9fr) !important;
    overflow: hidden !important;
  }

  /* Hero is about 15% taller than in A-3, and its vertical rhythm grows with it. */
  .first-screen .hero {
    height: 100% !important;
    min-height: 0 !important;
    padding-top: clamp(32px, 4.6vh, 48px) !important;
    padding-bottom: clamp(32px, 4.6vh, 48px) !important;
    align-items: center !important;
  }

  .first-screen .hero .eyebrow {
    margin-bottom: 14px !important;
  }

  .first-screen .hero__lead {
    margin-top: 16px !important;
    line-height: 1.12 !important;
  }

  .first-screen .hero__actions {
    margin-top: 21px !important;
  }

  .first-screen .hero__card-inner {
    padding: 23px 22px 21px !important;
  }

  .first-screen .hero__quote {
    margin-bottom: 8px !important;
    line-height: 1.24 !important;
  }

  .first-screen .hero__quote--accent {
    margin-top: 5px !important;
  }

  .first-screen .hero__facts {
    margin-top: 16px !important;
    padding-top: 14px !important;
  }

  /* Use the smaller leaders row efficiently instead of leaving a blank tail. */
  .leaders--first-screen {
    height: 100% !important;
    min-height: 0 !important;
    padding-top: clamp(10px, 1.35vh, 14px) !important;
    padding-bottom: 8px !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  .leaders--first-screen > .section__label {
    margin-bottom: 5px !important;
  }

  .leaders--first-screen > h2 {
    font-size: clamp(26px, 2.15vw, 35px) !important;
  }

  .leaders--first-screen .leaders__grid {
    margin-top: clamp(10px, 1.35vh, 14px) !important;
    gap: 18px !important;
    height: 100% !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }

  .leaders--first-screen .leader {
    grid-template-columns: clamp(106px, 9.5vw, 129px) 1fr !important;
    gap: 18px !important;
    padding: 10px 14px !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .leaders--first-screen .leader__portrait {
    width: clamp(106px, 9.5vw, 129px) !important;
    height: 100% !important;
    max-height: 154px !important;
    min-height: 112px !important;
  }

  .leaders--first-screen .leader h3 {
    font-size: clamp(20px, 1.7vw, 24px) !important;
  }

  .leaders--first-screen .leader__role {
    font-size: 10.5px !important;
    line-height: 1.32 !important;
  }

  /* No fake viewport-height tail below "знакомый внутренний потолок". */
  .overview {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: clamp(30px, 4.2vh, 46px) 24px var(--a4-flow-gap) !important;
    display: block !important;
    overflow: visible !important;
  }

  .overview__groups {
    height: auto !important;
    align-items: start !important;
  }

  .ticker-section {
    margin: 0 !important;
    padding: 0 !important;
  }

  .ticker-section + .statement {
    padding-top: var(--a4-flow-gap) !important;
  }
}

/* Short notebook screens still keep both hero and leaders inside screen 1. */
@media (min-width: 981px) and (max-height: 800px) {
  .first-screen {
    grid-template-rows: minmax(0, 60fr) minmax(0, 40fr) !important;
  }

  .first-screen .hero {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .first-screen .hero .eyebrow { margin-bottom: 10px !important; }
  .first-screen .hero__lead { margin-top: 12px !important; }
  .first-screen .hero__actions { margin-top: 15px !important; }
  .first-screen .hero__card-inner { padding: 16px 20px 15px !important; }
  .first-screen .hero__quote { margin-bottom: 5px !important; line-height: 1.18 !important; }
  .first-screen .hero__facts { margin-top: 10px !important; padding-top: 9px !important; }

  .leaders--first-screen {
    padding-top: 7px !important;
    padding-bottom: 6px !important;
  }

  .leaders--first-screen .leaders__grid {
    margin-top: 7px !important;
  }

  .leaders--first-screen .leader {
    grid-template-columns: 100px 1fr !important;
    padding: 8px 11px !important;
  }

  .leaders--first-screen .leader__portrait {
    width: 100px !important;
    max-height: 124px !important;
    min-height: 100px !important;
  }

  .overview {
    padding-top: 22px !important;
    padding-bottom: var(--a4-flow-gap) !important;
  }
}

@media (max-width: 980px) {
  .first-screen,
  .overview {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .ticker-section + .statement {
    padding-top: 16px !important;
  }
}


/* ============================================================
   A4 r2: highlighted "Посмотреть программу" link on hero.
   ============================================================ */
.first-screen .hero__actions .text-link {
  color: #FFD166 !important;
  transform-origin: left center;
  transition:
    color .22s ease,
    transform .22s ease,
    text-shadow .22s ease;
}

.first-screen .hero__actions .text-link span {
  display: inline-block;
  transform-origin: center;
  transition: transform .22s ease, color .22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .first-screen .hero__actions .text-link:hover {
    color: #FFE8A3 !important;
    transform: scale(1.035);
    text-shadow: 0 0 16px rgba(255, 209, 102, .18);
  }

  .first-screen .hero__actions .text-link:hover span {
    transform: translateY(3px) scale(1.14);
  }
}

.first-screen .hero__actions .text-link:focus-visible {
  color: #FFF0B8 !important;
  transform: scale(1.035);
  outline: 2px solid rgba(255, 209, 102, .65);
  outline-offset: 5px;
}

.first-screen .hero__actions .text-link:focus-visible span {
  transform: translateY(3px) scale(1.14);
}


/* ============================================================
   A4 r3: secondary CTA inside "О группе".
   On desktop it sits on the same visual row as
   "Много учитесь и работаете..." in the third column.
   ============================================================ */
.overview__cta {
  margin-top: 20px;
  text-decoration: none;
}

@media (min-width: 981px) {
  .overview__groups {
    align-items: stretch !important;
  }

  .overview__group {
    height: 100% !important;
  }

  .overview__cta {
    margin-top: auto !important;
    align-self: flex-start;
    min-height: 42px;
    padding: 0 18px;
  }
}

@media (max-width: 980px) {
  .overview__cta {
    margin-top: 18px !important;
  }
}

/* ============================================================
   A4 r4: 5% tighter hero, leaders lifted, +5px before overview.
   ============================================================ */
@media (min-width: 981px) {
  .first-screen {
    grid-template-rows: minmax(0, 59fr) minmax(0, 41fr) !important;
  }

  /* Reduce only the vertical scale/rhythm of the hero by ~5%. */
  .first-screen .hero {
    padding-top: clamp(30px, 4.35vh, 46px) !important;
    padding-bottom: clamp(30px, 4.35vh, 46px) !important;
  }

  .first-screen .hero .eyebrow {
    margin-bottom: 13px !important;
  }

  .first-screen .hero__lead {
    margin-top: 15px !important;
  }

  .first-screen .hero__actions {
    margin-top: 20px !important;
  }

  .first-screen .hero__card-inner {
    padding-top: 22px !important;
    padding-bottom: 20px !important;
  }

  .first-screen .hero__quote {
    margin-bottom: 7px !important;
  }

  .first-screen .hero__facts {
    margin-top: 15px !important;
    padding-top: 13px !important;
  }

  /* The second screen begins 5px farther from the leader cards. */
  .overview {
    padding-top: calc(clamp(30px, 4.2vh, 46px) + 5px) !important;
  }
}

@media (min-width: 981px) and (max-height: 800px) {
  .first-screen {
    grid-template-rows: minmax(0, 57fr) minmax(0, 43fr) !important;
  }

  .first-screen .hero {
    padding-top: 19px !important;
    padding-bottom: 19px !important;
  }

  .first-screen .hero .eyebrow { margin-bottom: 9px !important; }
  .first-screen .hero__lead { margin-top: 11px !important; }
  .first-screen .hero__actions { margin-top: 14px !important; }
  .first-screen .hero__card-inner { padding-top: 15px !important; padding-bottom: 14px !important; }
  .first-screen .hero__quote { margin-bottom: 4px !important; }
  .first-screen .hero__facts { margin-top: 9px !important; padding-top: 8px !important; }

  .overview {
    padding-top: 27px !important;
  }
}


/* ============================================================
   A4 r5: +10px between "Знакомый внутренний потолок" and ticker.
   ============================================================ */
@media (min-width: 981px) {
  .overview {
    padding-bottom: calc(var(--a4-flow-gap) + 10px) !important;
  }
}


/* ============================================================
   A4 r6: white program link; hero -10px, leaders area +10px.
   ============================================================ */
.first-screen .hero__actions .text-link,
.first-screen .hero__actions .text-link:visited,
.first-screen .hero__actions .text-link:hover,
.first-screen .hero__actions .text-link:focus-visible,
.first-screen .hero__actions .text-link:active {
  color: #FFFFFF !important;
  text-shadow: none !important;
}

.first-screen .hero__actions .text-link:focus-visible {
  outline-color: rgba(255,255,255,.72) !important;
}

@media (min-width: 981px) {
  /* Move exactly 10px from hero height into the leaders row.
     This lifts the leaders and adds the same 10px below their cards. */
  .first-screen {
    grid-template-rows:
      minmax(0, calc(59% - 10px))
      minmax(0, calc(41% + 10px)) !important;
  }
}

@media (min-width: 981px) and (max-height: 800px) {
  .first-screen {
    grid-template-rows:
      minmax(0, calc(57% - 10px))
      minmax(0, calc(43% + 10px)) !important;
  }
}


/* ============================================================
   A5: native Web3Forms application form, no iframe.
   ============================================================ */
.form__status {
  min-height: 18px;
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(33,27,26,.58);
  text-align: center;
}

.form__status.is-error {
  color: #9f3348;
}

.form .button[disabled] {
  opacity: .62;
  cursor: wait;
}


/* ============================================================
   A5 r3: compact leader cards and safe gap before the next block.
   Reduce the stretched card height by 20px total and keep at least
   10px of clean space below the cards.
   ============================================================ */
@media (min-width: 981px) {
  .leaders--first-screen {
    padding-bottom: 10px !important;
  }

  .leaders--first-screen .leaders__grid {
    align-items: start !important;
  }

  .leaders--first-screen .leader {
    height: calc(100% - 20px) !important;
    align-self: start !important;
  }
}

@media (min-width: 981px) and (max-height: 800px) {
  .leaders--first-screen {
    padding-bottom: 10px !important;
  }

  .leaders--first-screen .leader {
    height: calc(100% - 20px) !important;
  }
}


/* ============================================================
   A7: useful information hub and SEO article pages.
   ============================================================ */
.nav a.is-active { color:#fff; }

.useful-section { padding-top: 86px; padding-bottom: 94px; }
.useful-section__head { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:end; margin-bottom:42px; }
.useful-section__head h2 { margin:0; font-family:Georgia,serif; font-size:clamp(38px,4.6vw,64px); line-height:1; font-weight:400; letter-spacing:-.045em; }
.useful-section__head p { margin:0; max-width:620px; font-size:18px; line-height:1.6; color:rgba(33,27,26,.66); }
.useful-section__more { margin-top:34px; }

.info-shell { background:var(--paper); }
.info-hero { position:relative; overflow:hidden; color:var(--cream); background:radial-gradient(circle at 14% 22%, rgba(200,123,85,.19), transparent 34%), linear-gradient(125deg,#140f10,#241619 68%,#1c1113); }
.info-hero::before { content:""; position:absolute; inset:0; background:url('assets/hero-sea-sunset.webp') center/cover no-repeat; opacity:.11; mix-blend-mode:screen; pointer-events:none; }
.info-hero__inner { position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:70px 24px 74px; }
.info-hero--hub .info-hero__inner { padding-bottom:82px; }
.info-hero h1 { max-width:960px; margin:14px 0 0; font-family:Georgia,serif; font-size:clamp(48px,6vw,82px); line-height:.97; letter-spacing:-.055em; font-weight:400; }
.info-hero__lead { max-width:850px; margin:28px 0 0; font-size:clamp(20px,2.1vw,28px); line-height:1.38; color:rgba(244,239,230,.84); }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:38px; font-size:12px; color:rgba(244,239,230,.58); }
.breadcrumbs a:hover { color:#fff; }

.info-layout { display:grid; grid-template-columns:minmax(0,760px) minmax(230px,310px); gap:72px; max-width:1120px; margin:0 auto; padding:72px 24px 96px; align-items:start; }
.info-article { min-width:0; }
.info-article > h2 { margin:56px 0 18px; font-family:Georgia,serif; font-size:clamp(30px,3.4vw,44px); line-height:1.08; letter-spacing:-.035em; font-weight:400; }
.info-article > h2:first-child { margin-top:0; }
.info-article p, .info-article li { font-size:18px; line-height:1.76; color:rgba(33,27,26,.78); }
.info-article ul { padding-left:24px; margin:20px 0; }
.info-article li + li { margin-top:8px; }
.info-callout { margin:38px 0; padding:28px 30px; border:1px solid rgba(123,47,61,.14); border-radius:20px; background:rgba(123,47,61,.06); }
.info-callout strong { display:block; margin-bottom:8px; font-family:Georgia,serif; font-size:26px; font-weight:400; color:var(--wine); }
.info-callout p { margin:0; }
.info-aside { position:sticky; top:108px; }
.info-aside__box { display:flex; flex-direction:column; gap:0; padding:22px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.42); }
.info-aside__box strong { margin-bottom:12px; font-size:12px; text-transform:uppercase; letter-spacing:.11em; color:var(--wine); }
.info-aside__box a { padding:10px 0; border-top:1px solid var(--line); font-size:14px; line-height:1.35; color:rgba(33,27,26,.7); }
.info-aside__box a:hover { color:var(--wine); }
.info-faq { margin-top:72px; }
.info-faq .section__label { margin-bottom:18px; }
.info-faq h2 { margin:0 0 24px; font-family:Georgia,serif; font-size:42px; font-weight:400; }
.info-faq details { padding:20px 0; border-top:1px solid var(--line); }
.info-faq details:last-child { border-bottom:1px solid var(--line); }
.info-faq summary { cursor:pointer; font-size:18px; font-weight:700; }
.info-faq details p { margin:12px 0 0; font-size:16px; }
.info-cta { margin-top:64px; padding:34px; border-radius:24px; color:var(--cream); background:linear-gradient(145deg,var(--wine-deep),#311a20); }
.info-cta p { margin:0 0 24px; color:rgba(244,239,230,.86); }
.info-related { padding-top:18px; padding-bottom:92px; }
.info-related .section__label { margin-bottom:28px; }
.info-hub { padding-top:70px; padding-bottom:54px; }
.info-hub__intro { padding-top:48px; }
.info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.info-grid--hub { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.info-card { display:flex; flex-direction:column; min-height:310px; padding:30px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.42); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.info-card:hover { transform:translateY(-3px); border-color:rgba(123,47,61,.28); box-shadow:0 14px 36px rgba(33,27,26,.08); }
.info-card span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; color:var(--wine); }
.info-card h2, .info-card h3 { margin:18px 0 14px; font-family:Georgia,serif; font-size:clamp(28px,2.4vw,36px); line-height:1.06; font-weight:400; letter-spacing:-.035em; }
.info-card h3 { font-size:28px; }
.info-card p { margin:0; font-size:15px; line-height:1.58; color:rgba(33,27,26,.65); }
.info-card b { margin-top:auto; padding-top:24px; color:var(--wine); font-size:13px; }
.info-card--small { min-height:250px; }
.info-card--home { min-height:270px; }

@media (max-width:1180px) and (min-width:981px) {
  .topbar { gap:14px; }
  .nav { gap:12px; }
  .nav a { font-size:12px; }
}

@media (max-width:980px) {
  .useful-section__head, .info-layout { grid-template-columns:1fr; }
  .useful-section__head { gap:22px; }
  .info-layout { gap:34px; padding-top:52px; }
  .info-aside { position:static; }
  .info-grid, .info-grid--hub { grid-template-columns:1fr 1fr; }
  .info-card { min-height:250px; }
}

@media (max-width:620px) {
  .info-hero__inner { padding-top:52px; padding-bottom:56px; }
  .breadcrumbs { margin-bottom:26px; }
  .info-layout { padding:42px 18px 70px; }
  .info-article p, .info-article li { font-size:17px; line-height:1.7; }
  .info-callout { padding:22px; }
  .info-grid, .info-grid--hub { grid-template-columns:1fr; }
  .info-card, .info-card--home, .info-card--small { min-height:0; }
  .useful-section { padding-top:70px; }
}


/* A7 sitemap: human-readable HTML site map. */
.sitemap-page { padding-top: clamp(34px, 5vw, 72px); padding-bottom: clamp(56px, 8vw, 110px); }
.sitemap-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.sitemap-group { padding:clamp(24px,3vw,38px); border:1px solid rgba(33,27,26,.12); border-radius:18px; background:rgba(255,255,255,.72); box-shadow:0 14px 40px rgba(33,27,26,.045); }
.sitemap-group h2 { margin:8px 0 22px; font-family:var(--serif); font-weight:400; font-size:clamp(27px,3vw,42px); line-height:1; }
.sitemap-list { list-style:none; margin:0; padding:0; }
.sitemap-list li { padding:14px 0; border-top:1px solid rgba(33,27,26,.09); }
.sitemap-list li:first-child { border-top:0; padding-top:0; }
.sitemap-list a { display:inline-block; color:var(--wine); font-weight:650; text-decoration:none; transition:transform .18s ease,color .18s ease; }
.sitemap-list a:hover,.sitemap-list a:focus-visible { color:var(--copper); transform:translateX(3px); }
.sitemap-list span { display:block; margin-top:5px; color:rgba(33,27,26,.62); font-size:13px; line-height:1.55; }
@media (max-width:900px){ .sitemap-grid{grid-template-columns:1fr;} }

/* ============================================================
   A8 r2: restore proportions of the infographic before the footer.
   The optimized WebP logo has explicit 512x512 HTML attributes, so height
   must be reset to auto when CSS changes its rendered width.
   ============================================================ */
@media (min-width: 981px) {
  .overview-graphic-section--footer .overview-graphic {
    height: clamp(290px, 34vh, 340px) !important;
    min-height: 290px !important;
    max-height: 340px !important;
  }

  .overview-graphic-section--footer .overview-graphic__stage {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 340px !important;
  }

  .overview-graphic-section--footer .overview-graphic__logo {
    width: clamp(132px, 11.5vw, 158px) !important;
    height: auto !important;
    max-height: 72% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
  }

  .overview-graphic-section--footer .overview-graphic__node {
    width: 210px !important;
    max-width: calc(100% - 24px) !important;
  }
}