/* ============================================================
   Elizabeth's Train to be a Barber — style.css
   Dark, cinematic poster. Display: Cabinet Grotesk · Text: General Sans.
   See ART-DIRECTION.md / DESIGN.md. After tokens.css + skeleton.css + texture.css.
   ============================================================ */

/* ---- Fonts (self-hosted woff2) ----------------------------- */
@font-face{font-family:"Cabinet Grotesk";font-weight:700;font-style:normal;font-display:swap;
  src:url("/static/fonts/cabinet-grotesk-700.woff2") format("woff2");}
@font-face{font-family:"Cabinet Grotesk";font-weight:800;font-style:normal;font-display:swap;
  src:url("/static/fonts/cabinet-grotesk-800.woff2") format("woff2");}
@font-face{font-family:"Cabinet Grotesk";font-weight:900;font-style:normal;font-display:swap;
  src:url("/static/fonts/cabinet-grotesk-900.woff2") format("woff2");}
@font-face{font-family:"General Sans";font-weight:400;font-style:normal;font-display:swap;
  src:url("/static/fonts/general-sans-400.woff2") format("woff2");}
@font-face{font-family:"General Sans";font-weight:500;font-style:normal;font-display:swap;
  src:url("/static/fonts/general-sans-500.woff2") format("woff2");}
@font-face{font-family:"General Sans";font-weight:600;font-style:normal;font-display:swap;
  src:url("/static/fonts/general-sans-600.woff2") format("woff2");}

/* ---- Brand tokens (override the scaffold values) ----------- */
:root{
  --espresso:#17110D; --espresso-2:#1F1812; --espresso-3:#2A2018;
  --bone:#F2E7D5; --bone-2:#E9DBC4;
  --brand:#CB4332; --brand-deep:#A12E20; --brand-soft:#E7B5AC;
  --brass:#C9A14E; --brass-deep:#A07E34;
  --ink:#1A140F; --ink-soft:#6E6253;
  --cream:#ECE2D2; --cream-soft:#B4A793;
  --line-d:rgba(236,226,210,.13); --line-l:#D9C9AE;

  /* map scaffold tokens */
  --c-bg:var(--espresso); --c-surface:var(--espresso-2);
  --c-ink:var(--cream); --c-ink-soft:var(--cream-soft);
  --c-line:var(--line-d); --c-brand:var(--brand);
  --c-accent:var(--brass); --c-accent-ink:var(--espresso);
  --f-display:"Cabinet Grotesk", Georgia, serif;
  --f-text:"General Sans", system-ui, sans-serif;

  --maxw:80rem; --nav-h:74px;
  --pole:repeating-linear-gradient(118deg,
      var(--brand) 0 13px, var(--bone) 13px 26px,
      var(--brass) 26px 39px, var(--bone) 39px 52px);
}

html{ overflow-x:hidden; }   /* clip the off-canvas mobile drawer */
body{ background:var(--espresso); color:var(--cream); }
h1,h2,h3,h4{ font-weight:800; letter-spacing:-.02em; }
strong{ font-weight:600; }
.wrap{ max-width:var(--maxw); }

/* fine grain over dark */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
main, header, footer{ position:relative; z-index:1; }

/* ---- Type helpers ------------------------------------------ */
.display{ font-family:var(--f-display); font-weight:900; line-height:.96;
  letter-spacing:-.025em; text-transform:uppercase; }
.kicker{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:var(--step--1); letter-spacing:.2em; color:var(--brass);
}
.kicker::before{ content:""; width:26px; height:3px; background:var(--brass);
  display:inline-block; clip-path:polygon(0 0,100% 0,85% 100%,0 100%); }
.lede{ font-size:var(--step-1); line-height:1.45; color:var(--cream-soft);
  max-width:40rem; font-weight:400; }
.text-brass{ color:var(--brass); }
.text-brand{ color:var(--brand); }

/* ---- Buttons ----------------------------------------------- */
.btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--f-text);
  font-weight:600; font-size:1rem; line-height:1; padding:1.05em 1.7em;
  border-radius:var(--r-pill); border:2px solid transparent; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out-soft),
    color var(--dur-fast) var(--ease-out-soft),
    border-color var(--dur-fast) var(--ease-out-soft),
    transform var(--dur-fast) var(--ease-out-soft); white-space:nowrap; }
.btn svg{ width:1.15em; height:1.15em; }
.btn--primary{ background:var(--brand); color:#fff; }
.btn--primary:hover{ background:var(--brand-deep); transform:translateY(-2px); }
.btn--brass{ background:var(--brass); color:var(--espresso); }
.btn--brass:hover{ background:var(--brass-deep); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line-d); color:var(--cream); }
.btn--ghost:hover{ border-color:var(--brass); color:var(--brass); }
.btn--ghost-ink{ border-color:var(--line-l); color:var(--ink); }
.btn--ghost-ink:hover{ border-color:var(--brand); color:var(--brand); }
.btn--lg{ padding:1.2em 2.1em; font-size:1.06rem; }
.btn--block{ width:100%; justify-content:center; }

/* ---- Sections / bands -------------------------------------- */
.section{ padding-block:clamp(3.5rem,8vw,7rem); }
.section--light{ background:var(--bone); color:var(--ink); }
.section--light .lede{ color:var(--ink-soft); }
.section--light .kicker{ color:var(--brand-deep); }
.section--light .kicker::before{ background:var(--brand-deep); }
.section--bone2{ background:var(--bone-2); color:var(--ink); }
.section-head{ max-width:54rem; margin-bottom:clamp(2rem,4vw,3.2rem); }
.section-head h2{ font-size:var(--step-4); margin-top:.35em; }
.section-head .lede{ margin-top:1rem; }

/* barber-pole rule ------------------------------------------- */
.pole-rule{ height:10px; background:var(--pole); }
.pole-rule--thin{ height:6px; }

/* ============================================================
   Announcement marquee (barber-pole)
   ============================================================ */
.marquee{ background:var(--espresso-2); border-bottom:1px solid var(--line-d);
  overflow:hidden; }
.marquee__inner{ display:inline-flex; white-space:nowrap; padding:.62rem 0;
  will-change:transform; }
.marquee__inner span{ display:inline-flex; align-items:center;
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; font-size:.78rem; color:var(--cream); padding:0 1.6rem; }
.marquee__inner span::after{ content:"✂"; color:var(--brass); margin-left:1.6rem;
  font-size:.9rem; }

/* ============================================================
   Header / nav
   ============================================================ */
.nav{ position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(23,17,13,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-d); }
.nav__bar{ display:flex; align-items:center; gap:1.5rem; height:var(--nav-h); }
.brand{ display:inline-flex; align-items:center; gap:.6rem; margin-right:auto;
  color:var(--cream); }
.brand__seal{ width:38px; height:38px; flex:none; }
.brand__name{ font-family:var(--f-display); font-weight:800; line-height:1;
  font-size:1.06rem; letter-spacing:.01em; text-transform:uppercase; }
.brand__name small{ display:block; font-size:.58rem; letter-spacing:.34em;
  color:var(--brass); font-weight:700; margin-top:3px; }
.nav__links{ display:flex; align-items:center; gap:1.7rem; }
.nav__links a{ font-weight:500; font-size:.98rem; color:var(--cream);
  position:relative; padding:.3em 0; transition:color var(--dur-fast); }
.nav__links a:hover{ color:var(--brass); }
.nav__links a.active{ color:var(--brass); }
.nav__cta{ display:flex; align-items:center; gap:.8rem; }
.nav__toggle{ display:none; width:46px; height:46px; border:1px solid var(--line-d);
  border-radius:12px; color:var(--cream); align-items:center; justify-content:center; }
.nav__toggle svg{ width:22px; height:22px; }

/* mobile drawer */
.navdrawer{ position:fixed; inset:0; z-index:var(--z-overlay);
  background:var(--espresso); display:flex; flex-direction:column;
  padding:1.1rem var(--gutter) 2rem; transform:translateX(100%);
  transition:transform var(--dur) var(--ease-out-expo); visibility:hidden; }
.navdrawer[data-open]{ transform:none; visibility:visible; }
.navdrawer__top{ display:flex; align-items:center; height:var(--nav-h); }
.navdrawer__close{ margin-left:auto; width:46px; height:46px; color:var(--cream);
  border:1px solid var(--line-d); border-radius:12px; display:flex;
  align-items:center; justify-content:center; }
.navdrawer__close svg{ width:22px; height:22px; }
.navdrawer__links{ display:flex; flex-direction:column; gap:.2rem; margin-top:1.5rem; }
.navdrawer__links a{ font-family:var(--f-display); font-weight:800;
  text-transform:uppercase; font-size:2rem; letter-spacing:-.01em; color:var(--cream);
  padding:.5rem 0; border-bottom:1px solid var(--line-d); }
.navdrawer__links a:last-child{ border-bottom:0; }
.navdrawer .btn{ margin-top:1.6rem; }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding-block:clamp(3rem,8vw,6.5rem); }
.hero__glow{ position:absolute; inset:-30% -10% auto auto; width:60vw; height:60vw;
  max-width:760px; max-height:760px; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 70% 30%, rgba(203,67,50,.28), transparent 60%); }
.hero__grid{ position:relative; z-index:1; display:grid;
  grid-template-columns:1.35fr .9fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.hero__title{ font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  line-height:.92; letter-spacing:-.03em; font-size:clamp(3rem,8.5vw,6.6rem); margin:.2em 0 0; }
.hero__title .l2{ color:var(--brass); display:block; }
.hero__sub{ margin-top:1.4rem; font-size:var(--step-1); line-height:1.45;
  color:var(--cream-soft); max-width:34rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero__trust{ display:flex; align-items:center; gap:1.1rem 1.6rem; margin-top:1.9rem;
  flex-wrap:wrap; color:var(--cream-soft); font-size:.9rem; }
.hero__trust span{ display:inline-flex; align-items:center; gap:.5em; }
.hero__trust svg{ width:18px; height:18px; flex:none; color:var(--brass); }
.hero__trust b{ color:var(--cream); }

/* enrol card */
.enrolcard{ background:var(--espresso-2); border:1px solid var(--line-d);
  border-radius:var(--r-l); padding:1.7rem; box-shadow:var(--shadow-3);
  position:relative; }
.enrolcard__top{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; }
.enrolcard__price{ font-family:var(--f-display); font-weight:900; font-size:3.4rem;
  line-height:1; color:var(--cream); }
.enrolcard__price small{ font-size:.95rem; font-weight:600; color:var(--cream-soft);
  display:block; letter-spacing:.04em; text-transform:none; }
.seal{ width:64px; height:64px; flex:none; }
.enrolcard ul{ list-style:none; margin:1.3rem 0; display:flex; flex-direction:column;
  gap:.7rem; }
.enrolcard li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.97rem;
  color:var(--cream); }
.enrolcard li svg{ width:20px; height:20px; color:var(--brass); flex:none; margin-top:1px; }
.enrolcard__note{ font-size:.82rem; color:var(--cream-soft); text-align:center;
  margin-top:1rem; }

/* ============================================================
   Paths (the promise)
   ============================================================ */
.paths{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.5rem; }
.path{ position:relative; background:var(--bone-2); border-radius:var(--r-l);
  padding:1.5rem 1.3rem 1.4rem; overflow:hidden; min-height:200px;
  display:flex; flex-direction:column; }
.path::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:var(--pole); }
.path__ico{ width:38px; height:38px; color:var(--brand-deep); margin-bottom:auto; }
.path h3{ font-size:1.32rem; margin-top:1rem; color:var(--ink); }
.path p{ font-size:.93rem; color:var(--ink-soft); margin-top:.4rem; line-height:1.5; }

/* promise split */
.promise{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:start; }
.promise__big{ font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:var(--step-4); line-height:.98; color:var(--ink); }
.promise__big em{ color:var(--brand-deep); font-style:normal; }

/* ============================================================
   Curriculum (the spine)
   ============================================================ */
.curriculum{ border-top:1px solid var(--line-d); }
.lesson{ display:grid; grid-template-columns:auto 1fr auto; gap:1.4rem;
  align-items:baseline; padding:1.6rem 0; border-bottom:1px solid var(--line-d);
  transition:padding-left var(--dur-fast) var(--ease-out-soft); }
.lesson:hover{ padding-left:.6rem; }
.lesson__no{ font-family:var(--f-display); font-weight:800; color:var(--brass);
  font-size:1.05rem; letter-spacing:.05em; min-width:2.4rem; }
.lesson__body h3{ font-size:1.5rem; color:var(--cream); }
.lesson__body p{ color:var(--cream-soft); margin-top:.4rem; max-width:46rem; font-size:.97rem; }
.lesson__skills{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; }
.tag{ font-size:.74rem; font-weight:600; letter-spacing:.02em; color:var(--cream-soft);
  border:1px solid var(--line-d); border-radius:var(--r-pill); padding:.32em .8em; }
.lesson__ico{ width:30px; height:30px; color:var(--brass); opacity:.8; }
.curriculum--light .lesson{ border-color:var(--line-l); }
.curriculum--light .lesson__body h3{ color:var(--ink); }
.curriculum--light .lesson__body p{ color:var(--ink-soft); }
.curriculum--light .lesson__no{ color:var(--brand-deep); }
.curriculum--light .lesson__ico{ color:var(--brand-deep); }
.curriculum--light .tag{ color:var(--ink-soft); border-color:var(--line-l); }

/* ============================================================
   How it works (steps)
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.5rem; }
.step{ position:relative; padding:2rem 1.5rem 1.6rem; border:1px solid var(--line-d);
  border-radius:var(--r-l); background:var(--espresso-2); }
.step__n{ font-family:var(--f-display); font-weight:900; font-size:1.1rem;
  width:46px; height:46px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
.step h3{ font-size:1.3rem; color:var(--cream); }
.step p{ color:var(--cream-soft); margin-top:.5rem; font-size:.96rem; }

/* ============================================================
   Perks band
   ============================================================ */
.perks{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; }
.perk{ text-align:left; }
.perk__ico{ width:40px; height:40px; color:var(--brass); margin-bottom:.9rem; }
.perk h3{ font-size:1.08rem; color:var(--ink); font-weight:800; letter-spacing:0; }
.perk p{ font-size:.88rem; color:var(--ink-soft); margin-top:.3rem; line-height:1.45; }

/* ============================================================
   Price feature
   ============================================================ */
.price{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem);
  align-items:center; background:var(--espresso-2); border:1px solid var(--line-d);
  border-radius:var(--r-l); padding:clamp(1.8rem,4vw,3rem); position:relative;
  overflow:hidden; }
.price::after{ content:""; position:absolute; right:-60px; top:-60px; width:240px;
  height:240px; background:radial-gradient(circle,rgba(201,161,78,.16),transparent 70%); }
.price__tag{ font-family:var(--f-display); font-weight:900; font-size:clamp(3.4rem,8vw,5rem);
  line-height:1; color:var(--cream); }
.price__tag span{ color:var(--brass); }
.price ul{ list-style:none; display:flex; flex-direction:column; gap:.75rem; margin:1.5rem 0; }
.price li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--cream); }
.price li svg{ width:21px; height:21px; color:var(--brass); flex:none; margin-top:2px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ border-top:1px solid var(--line-l); max-width:52rem; }
.faq__item{ border-bottom:1px solid var(--line-l); }
.faq__q{ display:flex; align-items:center; gap:1rem; width:100%; text-align:left;
  padding:1.25rem 0; font-family:var(--f-display); font-weight:800; font-size:1.2rem;
  color:var(--ink); }
.faq__q .pm{ margin-left:auto; width:24px; height:24px; flex:none; color:var(--brand-deep);
  transition:transform var(--dur-fast) var(--ease-out-soft); }
.faq__item[data-open] .pm{ transform:rotate(45deg); }
.faq__a{ overflow:hidden; max-height:0; transition:max-height var(--dur) var(--ease-out-soft); }
.faq__a p{ padding:0 0 1.3rem; color:var(--ink-soft); max-width:46rem; }
.faq__cat{ font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--brand-deep); font-size:.95rem; margin:2rem 0 .4rem; }

/* ============================================================
   CTA band
   ============================================================ */
.ctaband{ position:relative; text-align:center; overflow:hidden; }
.ctaband__inner{ position:relative; z-index:1; max-width:46rem; margin-inline:auto; }
.ctaband h2{ font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:var(--step-5); line-height:.96; color:var(--cream); }
.ctaband p{ margin:1.1rem auto 2rem; color:var(--cream-soft); max-width:34rem; font-size:var(--step-1); }
.ctaband__glow{ position:absolute; inset:auto 0 -40% 0; height:80%;
  background:radial-gradient(ellipse at 50% 100%, rgba(203,67,50,.3), transparent 70%); }

/* ============================================================
   Forms (enrol / contact)
   ============================================================ */
.formwrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem);
  align-items:start; }
.form{ display:flex; flex-direction:column; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-weight:600; font-size:.92rem; color:var(--cream); }
.field .req{ color:var(--brand); }
.input, .select, .textarea{ background:var(--espresso); border:1px solid var(--line-d);
  border-radius:12px; padding:.9em 1em; color:var(--cream); font-size:1rem;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast); width:100%; }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(201,161,78,.22); }
.textarea{ min-height:120px; resize:vertical; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A14E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1em center; padding-right:2.6em; }
.field--hp{ position:absolute; left:-9999px; }

/* goal chips */
.goals{ display:flex; flex-wrap:wrap; gap:.5rem; }
.goal{ position:relative; }
.goal input{ position:absolute; opacity:0; }
.goal span{ display:inline-flex; padding:.6em 1em; border:1px solid var(--line-d);
  border-radius:var(--r-pill); font-size:.9rem; font-weight:500; color:var(--cream);
  cursor:pointer; transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast); }
.goal input:checked + span{ background:var(--brand); border-color:var(--brand); color:#fff; }
.goal span:hover{ border-color:var(--brass); }
.goal input:focus-visible + span{ outline:2px solid var(--brass); outline-offset:2px; }

/* form aside */
.formaside{ background:var(--espresso-2); border:1px solid var(--line-d);
  border-radius:var(--r-l); padding:1.8rem; }
.formaside h3{ color:var(--cream); font-size:1.4rem; }
.formaside ul{ list-style:none; margin-top:1.2rem; display:flex; flex-direction:column; gap:.9rem; }
.formaside li{ display:flex; gap:.7rem; color:var(--cream); font-size:.96rem; }
.formaside li svg{ width:20px; height:20px; color:var(--brass); flex:none; margin-top:1px; }

/* flashes */
.flash{ padding:.9em 1.1em; border-radius:12px; font-size:.95rem; margin-bottom:.4rem; }
.flash--error{ background:rgba(203,67,50,.16); border:1px solid var(--brand); color:var(--brand-soft); }
.flash--ok{ background:rgba(201,161,78,.16); border:1px solid var(--brass); color:var(--brass); }

/* ============================================================
   Page header (interior)
   ============================================================ */
.pagehead{ padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3rem); }
.pagehead h1{ font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:var(--step-5); line-height:.95; margin-top:.3em; }
.pagehead .lede{ margin-top:1.1rem; }

/* long-form / legal prose */
.prose{ max-width:44rem; }
.prose h2{ font-size:1.5rem; color:var(--cream); margin:2.2rem 0 .6rem; }
.prose p, .prose li{ color:var(--cream-soft); }
.prose p{ margin-top:.9rem; max-width:none; }
.prose ul{ margin:.6rem 0 0 1.1rem; display:flex; flex-direction:column; gap:.5rem; }
.prose a{ color:var(--brass); text-decoration:underline; }
.prose .muted{ color:var(--cream-soft); font-size:.9rem; opacity:.8; }
.crumbs{ color:var(--cream-soft); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; }
.crumbs a{ color:var(--brass); }

/* about */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:start; }
.about__body p{ margin-top:1rem; color:var(--cream); max-width:none; }
.about__body p:first-child{ margin-top:0; }
.signature{ font-family:var(--f-display); font-weight:800; color:var(--brass);
  font-size:1.4rem; margin-top:1.6rem; }

/* thank you */
.thanks{ max-width:40rem; margin-inline:auto; text-align:center; }
.thanks .seal{ width:88px; height:88px; margin:0 auto 1.5rem; }
.thanks h1{ font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:var(--step-4); }
.refbox{ display:inline-flex; gap:.6rem; align-items:center; margin-top:1.5rem;
  background:var(--espresso-2); border:1px solid var(--line-d); border-radius:var(--r-pill);
  padding:.6em 1.2em; color:var(--cream-soft); font-size:.95rem; }
.refbox b{ color:var(--brass); font-family:var(--f-display); letter-spacing:.05em; }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--espresso-2); border-top:1px solid var(--line-d);
  padding-top:clamp(3rem,6vw,4.5rem); }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2rem;
  padding-bottom:3rem; }
.footer .brand{ margin-bottom:1.2rem; }
.footer__about{ color:var(--cream-soft); max-width:26rem; font-size:.95rem; }
.footer h4{ font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:.82rem; color:var(--brass); margin-bottom:1rem; }
.footer__links{ display:flex; flex-direction:column; gap:.6rem; }
.footer__links a{ color:var(--cream-soft); font-size:.95rem; transition:color var(--dur-fast); }
.footer__links a:hover{ color:var(--brass); }
.footer__bot{ border-top:1px solid var(--line-d); padding:1.4rem 0;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  color:var(--cream-soft); font-size:.82rem; }
.footer__bot a{ color:var(--cream-soft); } .footer__bot a:hover{ color:var(--brass); }

/* ============================================================
   Cookie banner — [hidden] must beat display (house bug)
   ============================================================ */
.cookie{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:var(--z-toast);
  max-width:30rem; background:var(--espresso-2); border:1px solid var(--line-d);
  border-radius:var(--r-l); padding:1.2rem 1.3rem; box-shadow:var(--shadow-3);
  display:flex; flex-direction:column; gap:.9rem; }
.cookie[hidden]{ display:none; }
.cookie p{ font-size:.9rem; color:var(--cream-soft); }
.cookie a{ color:var(--brass); text-decoration:underline; }
.cookie__row{ display:flex; gap:.7rem; }

/* preloader */
.preloader{ position:fixed; inset:0; z-index:var(--z-modal); background:var(--espresso);
  display:flex; align-items:center; justify-content:center; }
.preloader__mark{ font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  color:var(--cream); font-size:1.4rem; letter-spacing:.1em; }
.preloader__mark span{ color:var(--brand); }

/* sticky mobile enrol bar */
.mbar{ display:none; }

/* ============================================================
   Auth pages (login / register extras / forgot / reset)
   ============================================================ */
.nav__login{ font-weight:600; font-size:.95rem; color:var(--cream); }
.nav__login:hover{ color:var(--brass); }
.authpage{ min-height:60vh; display:flex; align-items:center; padding-block:clamp(3rem,7vw,6rem); }
.authcard{ width:100%; max-width:32rem; margin-inline:auto; background:var(--espresso-2);
  border:1px solid var(--line-d); border-radius:var(--r-l); padding:clamp(1.6rem,4vw,2.4rem);
  box-shadow:var(--shadow-3); }
.authcard .seal{ width:56px; height:56px; margin:0 auto .8rem; }
.authcard h1{ font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:var(--step-3); text-align:center; }
.authcard .lede{ text-align:center; margin:.5rem auto 1.6rem; font-size:1rem; }
.authcard .form{ gap:1rem; }
.authmeta{ text-align:center; margin-top:1.3rem; font-size:.92rem; color:var(--cream-soft); }
.authmeta a{ color:var(--brass); }

/* ============================================================
   Payment / unlock
   ============================================================ */
.pay{ max-width:40rem; margin-inline:auto; }
.paycard{ background:var(--espresso-2); border:1px solid var(--line-d); border-radius:var(--r-l);
  padding:clamp(1.8rem,4vw,2.6rem); box-shadow:var(--shadow-3); text-align:center; }
.paycard .price__tag{ margin:.4rem 0 1rem; }
.paycard ul{ list-style:none; display:inline-flex; flex-direction:column; gap:.7rem;
  text-align:left; margin:1rem auto 1.6rem; }
.paycard li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--cream); }
.paycard li svg{ width:20px; height:20px; color:var(--brass); flex:none; margin-top:1px; }
.paynote{ margin-top:1.2rem; font-size:.9rem; color:var(--cream-soft); }
.manualpay{ background:rgba(201,161,78,.1); border:1px solid var(--brass);
  border-radius:var(--r-m); padding:1rem 1.2rem; color:var(--cream); font-size:.95rem; margin-top:1.2rem; }

/* ============================================================
   Learn — dashboard + lesson player
   ============================================================ */
.learnhead{ padding-block:clamp(2.5rem,5vw,4rem) clamp(1rem,3vw,2rem); }
.learnhead h1{ font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:var(--step-4); line-height:.96; }
.progress{ margin-top:1.2rem; max-width:34rem; }
.progress__bar{ height:10px; border-radius:99px; background:var(--espresso-3); overflow:hidden; }
.progress__fill{ height:100%; background:var(--pole); background-size:auto 100%; }
.progress__label{ margin-top:.5rem; font-size:.9rem; color:var(--cream-soft); }
.lessonlist{ display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; }
.lrow{ display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border-radius:var(--r-m);
  background:var(--espresso-2); border:1px solid var(--line-d); transition:border-color var(--dur-fast),transform var(--dur-fast); }
.lrow:hover{ border-color:var(--brass); transform:translateX(3px); }
.lrow__no{ font-family:var(--f-display); font-weight:800; color:var(--brass); min-width:2.2rem; }
.lrow__body{ flex:1; min-width:0; }
.lrow__body h3{ font-size:1.12rem; color:var(--cream); }
.lrow__body p{ font-size:.86rem; color:var(--cream-soft); margin-top:.15rem; }
.lrow__tick{ width:26px; height:26px; border-radius:50%; flex:none; display:flex;
  align-items:center; justify-content:center; border:2px solid var(--line-d); color:var(--cream-soft); }
.lrow__tick svg{ width:15px; height:15px; }
.lrow.done .lrow__tick{ background:var(--brass); border-color:var(--brass); color:var(--espresso); }
.lrow.locked{ opacity:.62; }
.lrow__lock{ width:22px; height:22px; color:var(--cream-soft); flex:none; }
.badge-free{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--espresso); background:var(--brass); border-radius:99px; padding:.2em .6em; }

/* player */
.player{ display:grid; grid-template-columns:1fr 320px; gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start; padding-block:clamp(1.5rem,3vw,2.5rem) clamp(3rem,6vw,5rem); }
.player__main video, .player__main .novideo{ width:100%; border-radius:var(--r-l);
  background:#000; aspect-ratio:16/9; }
.novideo{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.6rem;
  border:1px solid var(--line-d); color:var(--cream-soft); text-align:center; padding:2rem; }
.novideo svg{ width:44px; height:44px; color:var(--brass); }
.player__main h1{ font-family:var(--f-display); font-weight:900; font-size:var(--step-3);
  margin:1.2rem 0 .4rem; }
.player__nav{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem; align-items:center; }
.player__side{ position:sticky; top:90px; }
.player__side h4{ font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--brass); font-size:.78rem; margin-bottom:.8rem; }
.sidelessons{ display:flex; flex-direction:column; gap:.35rem; max-height:60vh; overflow:auto; }
.sidelesson{ display:flex; gap:.6rem; align-items:center; padding:.55rem .7rem; border-radius:10px;
  font-size:.9rem; color:var(--cream-soft); }
.sidelesson:hover{ background:var(--espresso-2); color:var(--cream); }
.sidelesson.current{ background:var(--espresso-2); color:var(--cream); }
.sidelesson .n{ font-family:var(--f-display); font-weight:800; color:var(--brass); min-width:1.6rem; }
.sidelesson .t{ width:16px; height:16px; color:var(--brass); flex:none; }
@media (max-width:900px){ .player{ grid-template-columns:1fr; } .player__side{ position:static; } }

/* account */
.accountgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.accountgrid .panel{ background:var(--espresso-2); border:1px solid var(--line-d);
  border-radius:var(--r-l); padding:1.6rem; }
.accountgrid .panel h3{ color:var(--cream); font-size:1.2rem; margin-bottom:1rem; }
.statuschip{ display:inline-flex; align-items:center; gap:.4em; font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; border-radius:99px; padding:.3em .8em; }
.statuschip.pending{ background:rgba(201,161,78,.16); color:var(--brass); }
.statuschip.active{ background:rgba(110,180,120,.16); color:#8fd49a; }
.statuschip.completed{ background:rgba(203,67,50,.16); color:var(--brand-soft); }
@media (max-width:760px){ .accountgrid{ grid-template-columns:1fr; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ order:-1; }
  .promise{ grid-template-columns:1fr; gap:1.5rem; }
  .price{ grid-template-columns:1fr; }
  .formwrap{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; gap:1.5rem; }
  .paths{ grid-template-columns:repeat(2,1fr); }
  .perks{ grid-template-columns:repeat(2,1fr); row-gap:2rem; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__about{ grid-column:1/-1; }
}
@media (max-width:760px){
  .nav__bar{ gap:.8rem; }
  .nav__links{ display:none; }
  .nav__cta .btn--ghost{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .steps{ grid-template-columns:1fr; }
  .lesson{ grid-template-columns:auto 1fr; }
  .lesson__ico{ display:none; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  /* sticky mobile enrol bar */
  .mbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky);
    background:rgba(23,17,13,.94); backdrop-filter:blur(10px);
    border-top:1px solid var(--line-d); padding:.7rem var(--gutter)
    calc(.7rem + env(safe-area-inset-bottom)); align-items:center; gap:.9rem; }
  .mbar__price{ font-family:var(--f-display); font-weight:900; color:var(--cream);
    font-size:1.3rem; line-height:1; }
  .mbar__price small{ display:block; font-size:.6rem; color:var(--cream-soft);
    letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
  .mbar .btn{ margin-left:auto; padding:.85em 1.4em; }
  body{ padding-bottom:74px; }
  .cookie{ bottom:84px; }
}
@media (max-width:460px){
  .paths{ grid-template-columns:1fr; }
  .perks{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__trust{ gap:1rem; }
  .brand__name{ font-size:.98rem; }
  /* drop the header Enrol pill — the toggle's drawer + the sticky bottom
     bar both carry a prominent Enrol, so brand + hamburger never clip. */
  .nav__cta .btn--primary{ display:none; }
}