/* Base reset */
body{margin:0;padding:0}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}


/* Layout: sticky top nav, three hash-routed views (home / videos / book), 1200px container. Single committed light look from the mockups. */
:root{
  --cream:#f9f5ef; --paper:#fdfbf7; --sand:#efe7d8; --frame:#f0dcb4;
  --forest:#244a35; --deep:#11251a; --gold:#d4ac58; --gold-ink:#b8913f;
  --ink:#1d2a22; --muted:#56615a; --line:#e6dfd3; --line-dark:#2b3d31; --err:#a63b2c;
  --display:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(12px,3vw,36px)}
h1,h2,h3{font-family:var(--display);color:var(--forest);text-wrap:balance;margin:0;letter-spacing:-.02em}

/* nav */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--cream);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:54px}
.logo{font-family:var(--display);font-weight:700;font-size:24px;color:var(--forest);text-decoration:none;letter-spacing:-.01em}
.logo span{color:var(--gold)}
nav.links{display:flex;gap:4px}
nav.links a{text-decoration:none;color:var(--muted);font-weight:500;padding:9px 14px;border-radius:749px;transition:background .15s,color .15s}
nav.links a:hover{color:var(--forest)}
nav.links a[aria-current="page"]{background:var(--sand);color:var(--forest)}
.top-r{display:flex;align-items:center;gap:14px}
nav.langs{display:flex;border:1px solid var(--line);border-radius:749px;padding:2px}
nav.langs a{text-decoration:none;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.04em;padding:5px 9px;border-radius:749px;transition:background .15s,color .15s}
nav.langs a:hover{color:var(--forest)}
nav.langs a[aria-current="true"]{background:var(--forest);color:var(--paper)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:749px;padding:10px 22px;font-weight:600;font-size:15.2px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--forest);color:var(--paper)}
.btn-primary:hover{background:#1c3b2a}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--paper)}
.btn-gold{background:var(--gold);color:var(--deep)}
.btn-gold:hover{background:#dcb565}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,72px);align-items:center;padding-block:clamp(24px,3.5vw,48px)}
.eyebrow{font-size:11.2px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 12px}
.hero h1{font-size:clamp(30px,3.6vw,48px);line-height:1.08;font-weight:700}
.lede{font-size:clamp(14.4px,1.2vw,16px);color:var(--muted);max-width:40ch;margin:16px 0 24px;line-height:1.6}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.facts{display:flex;flex-wrap:wrap;gap:28px;margin-top:32px}
.facts b{display:block;font-family:var(--display);font-weight:700;font-size:24px;color:var(--forest);line-height:1.1}
.facts span{color:var(--muted);font-size:12.8px}
.photo{position:relative;max-width:440px;justify-self:end;width:100%;padding:21px 22px 22px 24px;max-width:100%}
.photo::before{content:"";position:absolute;inset:0;background:var(--frame);border-radius:30px;transform:rotate(1.6deg)}
.photo img{position:relative;display:block;width:100%;aspect-ratio:560/637;object-fit:cover;border-radius:22px}

/* sessions band */
.band{background:var(--deep);color:var(--paper);padding-block:clamp(32px,4vw,56px)}
.band h2{color:var(--paper);font-size:clamp(32px,3.7vw,44.8px);font-weight:700;margin-bottom:clamp(24px,2.5vw,32px)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.card{position:relative;border:1px solid var(--line-dark);border-radius:21px;padding:24px 22px 22px;display:flex;flex-direction:column;min-width:0}
.card .dur{color:var(--gold);font-size:14.4px}
.card h3{color:var(--paper);font-size:21.6px;font-weight:600;margin:8px 0 10px;line-height:1.15}
.card p{color:#c9cfc8;margin:0 0 24px;font-size:13.6px;flex:1}
.card .price{font-weight:700;font-size:16.8px;margin-bottom:18px;font-variant-numeric:tabular-nums}
.card .book{border:1px solid var(--gold-ink);color:var(--gold);background:transparent;border-radius:749px;padding:10px;font-weight:600;font-size:14.4px;cursor:pointer;transition:background .15s}
.card .book:hover{background:rgba(212,172,88,.1)}
.badge{position:absolute;top:-17px;right:30px;background:var(--gold);color:var(--deep);font-weight:700;font-size:12px;padding:4px 14px;border-radius:749px}
.band .btn-gold{margin-top:clamp(24px,2.5vw,32px)}

/* how it works */
.how{padding-block:clamp(32px,4vw,56px) clamp(16px,2vw,24px)}
.how h2{font-size:clamp(26px,2.6vw,34px);font-weight:700;margin-bottom:clamp(20px,2.5vw,32px)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.steps .n{display:block;font-family:var(--display);font-weight:600;font-size:clamp(30px,2.8vw,38px);line-height:1;color:var(--gold-ink);font-variant-numeric:lining-nums;margin-bottom:10px}
.steps h3{color:var(--deep);font-size:clamp(17px,1.5vw,19.2px);font-weight:600;margin-bottom:8px}
.steps p{margin:0;color:var(--muted);font-size:14.4px;line-height:1.55;max-width:34ch}

footer{padding-block:28px;color:var(--muted);font-size:12px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}
footer .logo{font-size:19.2px}

/* videos */
.page-head{padding-block:clamp(36px,4vw,63px) 0}
.page-head h1{font-size:clamp(38.4px,4.8vw,60.8px);font-weight:700;line-height:1.05}
.page-head p{color:var(--muted);font-size:16.8px;margin:16px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:39px 0 45px}
.chip{border:1px solid var(--line);background:transparent;border-radius:749px;padding:8px 15px;font-size:15.2px;font-weight:500;cursor:pointer;transition:background .15s}
.chip:hover{background:var(--paper)}
.chip[aria-pressed="true"]{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:21px;padding-bottom:96px}
.vcard{text-decoration:none;display:flex;flex-direction:column;gap:10px;min-width:0}
.thumb{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--deep);display:flex;align-items:flex-end;padding:16px}
.thumb::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;border:26px solid var(--forest)}
.thumb .t{position:relative;z-index:1;font-family:var(--display);font-weight:600;color:var(--paper);font-size:19.2px;line-height:1.1;max-width:13ch}
.play{position:absolute;z-index:2;right:22px;bottom:22px;width:39px;height:39px;border-radius:50%;background:var(--gold);display:grid;place-items:center;transition:transform .15s}
.play::before{content:"";border-left:15px solid var(--deep);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.vcard:hover .play{transform:scale(1.08)}
.vmeta{display:flex;justify-content:space-between;gap:9px;color:var(--muted);font-size:12px}
.vmeta .tag{color:var(--gold-ink);font-weight:600}
.vcard h3{font-size:16.8px;font-weight:600;line-height:1.25}
.empty{border:1px dashed var(--line);background:var(--paper);border-radius:24px;text-align:center;padding:54px 18px 57px;margin-bottom:72px}
.empty h3{font-size:clamp(22.4px,2.4vw,28.8px);font-weight:600}
.empty p{color:var(--muted);font-size:16.8px;margin:10px 0 27px}
.note{font-size:11.2px;color:var(--muted);margin:-27px 0 21px}

/* booking */
.booking{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(21px,3vw,45px);align-items:start;padding-block:42px 72px}
.step{margin-bottom:42px}
.step-h{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.num{width:30px;height:30px;border-radius:50%;background:var(--gold);display:grid;place-items:center;font-weight:600;font-size:14.4px;flex:none}
.step-h h2{font-size:clamp(22.4px,2.4vw,30.4px);font-weight:600}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.opt{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:15px 15px;cursor:pointer;transition:border-color .15s,background .15s}
.opt b{display:block;font-weight:600;font-size:17.6px;margin-bottom:2px}
.opt span{color:var(--muted);font-size:15.2px;font-variant-numeric:tabular-nums}
.opt:hover{border-color:#c9bfae}
.opt[aria-pressed="true"]{background:var(--sand);border-color:var(--forest)}
.days{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:9px}
.day{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:10px 3px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.day small{font-size:12.8px;text-transform:uppercase}
.day b{font-size:20.8px;font-weight:600;font-variant-numeric:tabular-nums}
.day:hover{border-color:#c9bfae}
.day[aria-pressed="true"]{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.times{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-top:24px}
.time{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:10px 3px;font-size:15.2px;cursor:pointer;font-variant-numeric:tabular-nums}
.time:hover:not(:disabled){border-color:#c9bfae}
.time[aria-pressed="true"]{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.time:disabled{color:#b3aca0;text-decoration:line-through;cursor:not-allowed;background:transparent}
.hint{font-size:12.8px;color:var(--muted);margin:12px 0 0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fields .full{grid-column:1/-1}
.field input,.field textarea{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:16px;outline:none;transition:border-color .15s}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#8b918a}
.field input:focus,.field textarea:focus{border-color:var(--forest)}
.field.bad input{border-color:var(--err)}
.err{color:var(--err);font-size:11.2px;margin-top:4px;display:block}

aside.summary{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px);background:var(--deep);color:var(--paper);border-radius:24px;padding:24px 22px 22px}
.summary .lbl{color:var(--gold);font-size:15.2px}
.summary h3{color:var(--paper);font-size:27.2px;font-weight:600;margin:6px 0 4px;line-height:1.15}
.summary .when{color:#c9cfc8;font-size:15.2px}
.summary .amt{font-weight:700;font-size:28.8px;margin:21px 0 27px;font-variant-numeric:tabular-nums}
.summary .paylbl{color:#c9cfc8;font-size:15.2px;margin-bottom:9px}
.pay{display:flex;align-items:center;gap:10px;border:1px solid var(--line-dark);border-radius:12px;padding:14px 16px;margin-bottom:9px;cursor:pointer;font-size:15.2px}
.pay input{accent-color:var(--gold);width:14px;height:14px;margin:0}
.pay:has(input:checked){border-color:var(--gold-ink)}
.summary .fine{color:#a9b2aa;font-size:12px;margin:10px 0 22px;line-height:1.5}
.summary .btn-gold{width:100%;font-size:16.8px}
.summary .formerr{color:#f0b3a7;font-size:12px;margin:10px 0 0;text-align:center}

/* confirmation */
.done{max-width:640px;margin:54px auto 90px;text-align:center}
.done .tick{width:57px;height:57px;border-radius:50%;background:var(--forest);display:grid;place-items:center;margin:0 auto 21px}
.done .tick::before{content:"";width:21px;height:11px;border-left:4px solid var(--gold);border-bottom:4px solid var(--gold);transform:rotate(-45deg) translate(2px,-3px)}
.done h1{font-size:clamp(32px,4vw,46.4px);font-weight:700}
.done p{color:var(--muted);font-size:15.2px;margin:14px auto 0;max-width:46ch}
.receipt{margin:30px 0;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:8px 21px;text-align:left}
.receipt div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.6px}
.receipt div:last-child{border-bottom:0}
.receipt dt{color:var(--muted)}
.receipt dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.done .cta-row{justify-content:center}

.view{animation:fade .35s ease}
@keyframes fade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .booking{grid-template-columns:1fr}
  aside.summary{position:static}
  .days{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .photo{max-width:420px;justify-self:start}
}
@media (max-width:620px){
  header.top .wrap{height:auto;flex-wrap:wrap;row-gap:4px;padding-block:8px 6px}
  .top-r{display:contents}
  nav.langs{order:2}
  nav.links{order:3;flex-basis:100%;margin-inline:-8px}
  .logo{font-size:20px}
  nav.links a{padding:7px 8px;font-size:11.2px}
  nav.links{gap:0}
  .cards,.opts,.fields,.steps{grid-template-columns:1fr}
  .times{grid-template-columns:repeat(3,minmax(0,1fr))}
  .days{grid-template-columns:repeat(4,minmax(0,1fr))}
  .btn{padding:12px 21px;font-size:13.6px}
  .facts{gap:22px;margin-top:24px}
  .chip{font-size:12.8px;padding:8px 14px}
  .field input,.field textarea{font-size:13.6px}
}