/* ==========================================================================
   Zainab Zifnaas Qur'an Academy — Design System
   Direction C · Modern Tech Bento
   Built by Loopwork
   ========================================================================== */

/* ----------------------------------------------------------- 1. TOKENS */
:root{
  /* Brand — sampled from the academy logo */
  --green:        #36641C;   /* Academy Green  — brand, light surfaces      */
  --green-cta:    #43781F;   /* CTA green on dark (AA with white text)      */
  --green-hover:  #4E8A2A;
  --pine:         #33553A;   /* Mihrab Pine                                  */
  --emerald:      #0E2317;   /* Midnight Emerald                             */
  --ink-900:      #07160D;   /* page base                                    */
  --ink-800:      #0B1E13;
  --ink-700:      #102A1B;
  --gold:         #B08D3F;   /* Antique Gold — accent, ~1% of surface        */
  --gold-l:       #D8BE7E;
  --sage:         #B7CEC6;   /* Sage Mist                                    */
  --mist:         #E8F0EC;   /* Pale Mint                                    */
  --ivory:        #FAF8F3;   /* Warm Ivory                                   */
  --ink:          #10231A;   /* body text on light                           */
  --slate:        #5E6B62;   /* secondary text on light                      */

  /* Dark-theme text */
  --tx:           #EAF2EC;
  --tx-2:         #A9C2B0;
  --tx-3:         #7E9686;

  /* Glass surfaces */
  --glass:        rgba(255,255,255,.055);
  --glass-2:      rgba(255,255,255,.085);
  --stroke:       rgba(183,206,198,.18);
  --stroke-2:     rgba(183,206,198,.32);
  --gold-stroke:  rgba(216,190,126,.34);

  /* Type */
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing — 8pt scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --wrap: 1600px;
  --gutter: 44px;
  --hdr-h: 84px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .32s;

  --shadow: 0 18px 50px rgba(3,12,7,.45);
  --shadow-lg: 0 30px 80px rgba(3,12,7,.55);
}

/* ----------------------------------------------------------- 2. RESET */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-size:17px; line-height:1.7; font-weight:400;
  color:var(--tx);
  background:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }
ul,ol{ list-style:none; }
table{ border-collapse:collapse; width:100%; }

::selection{ background:var(--gold); color:#0B1E13; }

:focus-visible{
  outline:2px solid var(--gold-l);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--gold-l); color:#0B1E13; padding:14px 22px;
  font-weight:600; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

/* ----------------------------------------------------------- 3. LAYOUT */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--s7); position:relative; }
.section--tight{ padding-block:var(--s6); }
.center{ text-align:center; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.mxw{ max-width:660px; }
.mxw.center{ margin-inline:auto; }

.grid{ display:grid; gap:24px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split--wide{ grid-template-columns:1.15fr .85fr; }

/* Background texture — faint technical grid */
.gridbg::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(183,206,198,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,206,198,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(110% 80% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(110% 80% at 50% 0%, #000 0%, transparent 78%);
}
.section > .wrap{ position:relative; z-index:1; }

/* ----------------------------------------------------------- 4. TYPE */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.16; letter-spacing:-.01em; }
h1{ font-size:clamp(2rem, 1.35rem + 2.9vw, 3.5rem); line-height:1.1; letter-spacing:-.02em; }
h2{ font-size:clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); line-height:1.15; }
h3{ font-size:clamp(1.2rem, 1.08rem + .55vw, 1.5rem); line-height:1.28; }
h4{ font-size:1.0625rem; line-height:1.35; }
h1 em,h2 em,h3 em{ font-style:italic; color:var(--gold-l); }
p{ margin-bottom:1rem; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.75rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-l); margin-bottom:18px;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold); flex:0 0 26px; }
.eyebrow--plain::before{ display:none; }

.lede{ font-size:clamp(1rem,.96rem + .2vw,1.125rem); color:var(--tx-2); }
.small{ font-size:.9375rem; color:var(--tx-2); }
.tiny{ font-size:.8125rem; color:var(--tx-3); }

.sec-head{ margin-bottom:var(--s5); }
.sec-head .lede{ max-width:620px; }
.sec-head.center .lede{ margin-inline:auto; }

/* Gold hairline that draws in on scroll — the signature detail */
.hair{ height:1px; background:var(--gold); width:0; transition:width 1.1s var(--ease); margin-top:20px; }
.reveal.in .hair{ width:88px; }

/* ----------------------------------------------------------- 5. BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 30px;
  font-size:.9375rem; font-weight:500; letter-spacing:.02em;
  border-radius:var(--radius-pill);
  background:var(--green-cta); color:#fff;
  border:1px solid transparent;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  text-align:center;
}
.btn:hover{ background:var(--green-hover); transform:translateY(-2px); box-shadow:0 10px 26px rgba(67,120,31,.34); }
.btn:active{ transform:translateY(0); }

.btn--ghost{ background:transparent; color:var(--tx); border-color:var(--stroke-2); }
.btn--ghost:hover{ background:var(--glass-2); border-color:var(--sage); box-shadow:none; }

.btn--gold{ background:var(--gold-l); color:#0B1E13; }
.btn--gold:hover{ background:#E6CF95; box-shadow:0 10px 26px rgba(216,190,126,.26); }

.btn--light{ background:var(--green); color:#fff; }
.btn--light:hover{ background:#2C5316; }

.btn--wide{ width:100%; }
.btn--sm{ min-height:44px; padding:10px 22px; font-size:.875rem; }

.tlink{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.9375rem; font-weight:500; color:var(--gold-l);
  border-bottom:1px solid var(--gold-stroke); padding-bottom:4px;
  transition:gap var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tlink:hover{ gap:14px; border-color:var(--gold-l); }

.btns{ display:flex; flex-wrap:wrap; gap:14px; }

/* ----------------------------------------------------------- 6. HEADER */
.hdr{
  position:fixed; inset:0 0 auto; z-index:900;
  background:rgba(9,26,16,.72);
  border-bottom:1px solid var(--stroke);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hdr__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  min-height:var(--hdr-h);
  display:flex; align-items:center; gap:26px;
  padding-inline:var(--gutter);
}
.hdr.stuck{ background:rgba(6,19,12,.95); box-shadow:0 10px 34px rgba(3,12,7,.42); }

.brand{ display:flex; align-items:center; gap:13px; flex:0 0 auto; }
.brand__mark{
  width:48px; height:48px; border-radius:50%; background:#fff;
  display:grid; place-items:center; overflow:hidden; flex:0 0 48px;
}
.brand__mark img{ width:46px; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{
  font-family:var(--serif); font-size:1.0625rem; font-weight:600; color:#fff;
  white-space:nowrap; letter-spacing:.01em;
}
.brand__sub{
  font-size:.5625rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-l); white-space:nowrap; margin-top:3px;
}

.nav{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.nav a{
  position:relative; padding:11px 15px; font-size:.9375rem; color:var(--tx-2);
  border-radius:8px; white-space:nowrap;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav a:hover{ color:#fff; background:var(--glass); }
.nav a[aria-current="page"]{ color:#fff; }
.nav a[aria-current="page"]::after{
  content:''; position:absolute; left:15px; right:15px; bottom:2px; height:2px;
  background:var(--gold); border-radius:2px;
}
.hdr__cta{ min-height:46px; padding:12px 26px; font-size:.9375rem; flex:0 0 auto; margin-left:12px; }

.has-sub{ position:relative; }
.has-sub > a::after{ content:'\25be'; font-size:.7em; margin-left:6px; opacity:.7; }
.sub{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-8px);
  min-width:280px; padding:10px; margin-top:6px;
  background:rgba(8,23,14,.98); border:1px solid var(--stroke); border-radius:14px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transition:all var(--dur) var(--ease);
}
.has-sub:hover .sub, .has-sub:focus-within .sub{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.sub a{ display:block; padding:9px 14px; border-radius:8px; font-size:.875rem; color:var(--tx-2); }
.sub a:hover{ background:var(--glass-2); color:#fff; }
.sub__all{ margin-top:6px; border-top:1px solid var(--stroke); padding-top:10px; color:var(--gold-l)!important; }

.burger{ display:none; width:46px; height:46px; margin-left:auto; place-items:center; border-radius:10px; }
.burger span{ display:block; width:22px; height:1.6px; background:var(--tx); margin:4.5px 0; transition:all var(--dur) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mnav{
  position:fixed; inset:0; z-index:890; background:rgba(6,19,12,.99);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:calc(var(--hdr-h) + 20px) 0 40px; overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease), visibility var(--dur);
}
.mnav.open{ opacity:1; visibility:visible; }
.mnav__in{ padding-inline:var(--gutter); max-width:var(--wrap); margin-inline:auto; }
.mnav a{ display:block; padding:15px 0; font-family:var(--serif); font-size:1.3125rem; border-bottom:1px solid var(--stroke); }
.mnav .sub-list{ padding:6px 0 10px; }
.mnav .sub-list a{ font-family:var(--sans); font-size:.9375rem; color:var(--tx-2); padding:10px 0 10px 18px; border-bottom:none; }
.mnav .btn{ margin-top:26px; width:100%; }
.mnav__meta{ margin-top:30px; display:grid; gap:6px; }
.mnav__meta a{ font-family:var(--sans); font-size:.9375rem; padding:6px 0; border:none; color:var(--gold-l); }

/* ----------------------------------------------------------- 7. HERO */
.hero{ position:relative; padding:calc(var(--hdr-h) + 92px) 0 92px; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg video,.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(7,22,13,.96) 0%, rgba(7,22,13,.90) 42%, rgba(11,30,19,.72) 100%),
    radial-gradient(80% 70% at 78% 12%, rgba(54,100,28,.30) 0%, transparent 62%);
}
.hero__inner{ position:relative; z-index:2; }
.hero h1{ max-width:15ch; }
.hero .lede{ max-width:52ch; margin-top:22px; }
.hero .btns{ margin-top:34px; }
.hero__grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center; }

.badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 18px; border:1px solid var(--gold-stroke); border-radius:var(--radius-pill);
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-l);
  margin-bottom:22px;
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-l); }

/* ----------------------------------------------------------- 8. BENTO */
.bento{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

.card{
  position:relative; overflow:hidden;
  background:var(--glass);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:24px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card::before{
  content:''; position:absolute; top:0; left:0; height:1px; width:0;
  background:linear-gradient(90deg, var(--gold-l), transparent);
  transition:width .55s var(--ease);
}
.card:hover{ transform:translateY(-3px); border-color:var(--stroke-2); background:var(--glass-2); box-shadow:var(--shadow); }
.card:hover::before{ width:100%; }
.card--span2{ grid-column:span 2; }
.card--flat:hover{ transform:none; box-shadow:none; }

.card__label{ font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-l); margin-bottom:12px; }
.card__big{ font-family:var(--serif); font-size:2.25rem; line-height:1; color:#fff; margin-bottom:8px; }
.card__t{ font-family:var(--serif); font-size:1.25rem; color:#fff; margin-bottom:6px; }
.card__d{ font-size:.875rem; color:var(--tx-2); line-height:1.6; }

.card--person{ display:flex; gap:16px; align-items:center; }
.card--person img{ width:84px; height:84px; border-radius:12px; object-fit:cover; object-position:center 22%; flex:0 0 84px; }

/* course card */
.ccard{ display:flex; flex-direction:column; height:100%; }
.ccard .ico{ width:40px; height:40px; margin-bottom:16px; color:var(--gold-l); }
.ccard .ico svg{ width:100%; height:100%; }
.ccard h3{ color:#fff; margin-bottom:8px; }
.ccard p{ font-size:.9375rem; color:var(--tx-2); flex:1; margin-bottom:16px; }
.ccard__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tag{
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sage); border:1px solid var(--stroke); border-radius:var(--radius-pill); padding:5px 12px;
}
.arrow{ color:var(--gold-l); font-size:1.1rem; transition:transform var(--dur) var(--ease); }
.card:hover .arrow{ transform:translateX(5px); }

/* ----------------------------------------------------------- 9. LIGHT SECTION */
.light{ background:var(--ivory); color:var(--ink); }
.light h1,.light h2,.light h3,.light h4{ color:var(--ink); }
.light h1 em,.light h2 em,.light h3 em{ color:var(--green); }
.light .lede,.light .small{ color:var(--slate); }
.light .eyebrow,.mint .eyebrow{ color:var(--gold-dark); }
.light .card,.mint .card{ background:#fff; border-color:#DDE5DF; backdrop-filter:none; }
.light .card:hover,.mint .card:hover{ background:#fff; border-color:var(--sage); }
.light .card__t,.light .card__big,.mint .card__t,.mint .card__big{ color:var(--ink); }
.light .card__d,.mint .card__d{ color:var(--slate); }
.light .card__label,.mint .card__label{ color:var(--gold-dark); }
.light .tag,.mint .tag{ color:var(--pine); border-color:var(--sage); }
.light .tlink,.mint .tlink{ color:var(--green); border-color:rgba(176,141,63,.5); }
.light .btn--ghost,.mint .btn--ghost{ color:var(--pine); border-color:var(--pine); }
.light .btn--ghost:hover,.mint .btn--ghost:hover{ background:var(--mist); }
.light .arrow,.mint .arrow{ color:var(--green); }
.light .ccard h3,.mint .ccard h3{ color:var(--ink); }
.light .ccard p,.mint .ccard p{ color:var(--slate); }
.mint{ background:var(--mist); color:var(--ink); }
.mint h1,.mint h2,.mint h3,.mint h4{ color:var(--ink); }
.mint .lede,.mint .small,.mint .tiny{ color:var(--slate); }

.light .tiny,.mint .tiny{ color:var(--slate); }

/* ----------------------------------------------------------- 10. TRUST STRIP */
.trust{ border-block:1px solid var(--stroke); background:rgba(255,255,255,.025); }
.trust__row{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust__i{ padding:26px 18px; text-align:center; border-right:1px solid var(--stroke); }
.trust__i:last-child{ border-right:none; }
.trust__n{ font-family:var(--serif); font-size:1.5rem; color:#fff; line-height:1.1; }
.trust__l{ font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-3); margin-top:7px; }

/* ----------------------------------------------------------- 11. STEPS */
.steps{ counter-reset:st; display:grid; gap:20px; }
.step{ display:flex; gap:18px; align-items:flex-start; }
.step__n{
  flex:0 0 44px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(216,190,126,.12); color:var(--gold-l);
  font-size:.875rem; font-weight:600; border:1px solid var(--gold-stroke);
}
.light .step__n,.mint .step__n{ background:var(--mist); color:var(--green); border-color:var(--sage); }
.step h3{ font-family:var(--sans); font-size:1.0625rem; font-weight:600; letter-spacing:0; margin-bottom:4px; }
.step p{ font-size:.9375rem; color:var(--tx-2); }
.light .step p{ color:var(--slate); }

/* ----------------------------------------------------------- 12. PRICING */
.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tier{ position:relative; display:flex; flex-direction:column; }
.tier--best{ border-color:var(--gold-stroke); background:rgba(216,190,126,.055); }
.tier__flag{
  position:absolute; top:-1px; right:16px;
  font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
  background:var(--gold-l); color:#0B1E13; padding:5px 12px; border-radius:0 0 8px 8px; font-weight:600;
}
.tier__name{ font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-l); }
.tier__price{ font-family:var(--serif); font-size:2.5rem; line-height:1; color:#fff; margin:14px 0 4px; }
.light .tier__price{ color:var(--ink); }
.tier__per{ font-size:.8125rem; color:var(--tx-3); }
.tier__list{ margin:20px 0; display:grid; gap:9px; }
.tier__list li{ font-size:.875rem; color:var(--tx-2); padding-left:22px; position:relative; }
.tier__list li::before{
  content:''; position:absolute; left:0; top:.55em; width:7px; height:7px;
  border:1px solid var(--gold); transform:rotate(45deg);
}
.light .tier__list li,.mint .tier__list li{ color:var(--slate); }
.light .tier__list li::before,.mint .tier__list li::before{ border-color:var(--gold-dark); }
.light .tier__name,.mint .tier__name{ color:var(--gold-dark); }
.light .tier__per,.mint .tier__per{ color:var(--slate); }
.tier .btn{ margin-top:auto; }

/* ----------------------------------------------------------- 13. TESTIMONIALS */
.quote{ display:flex; flex-direction:column; height:100%; }
.stars{ color:var(--gold-l); letter-spacing:.22em; font-size:.8125rem; margin-bottom:14px; }
.quote blockquote{ font-family:var(--serif); font-size:1.0625rem; line-height:1.62; color:var(--tx); flex:1; }
.light .quote blockquote{ color:var(--ink); }
.quote figcaption{ margin-top:18px; padding-top:16px; border-top:1px solid var(--stroke); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3); }
.light .quote figcaption,.mint .quote figcaption{ border-color:#DDE5DF; color:var(--slate); }
.light .stars,.mint .stars{ color:var(--gold-dark); }

.rail{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; -webkit-overflow-scrolling:touch; }
.rail > *{ scroll-snap-align:start; flex:0 0 min(400px, 82vw); }
.rail::-webkit-scrollbar{ height:5px; }
.rail::-webkit-scrollbar-thumb{ background:var(--stroke-2); border-radius:4px; }
.rail::-webkit-scrollbar-track{ background:var(--stroke); border-radius:4px; }

/* ----------------------------------------------------------- 14. MEDIA / ARCH */
.arch{ border-radius:50vw 50vw 14px 14px; overflow:hidden; }
.frame{ position:relative; border:1px solid var(--gold-stroke); border-radius:var(--radius); overflow:hidden; }
.frame img{ width:100%; height:100%; object-fit:cover; }
.media-note{
  position:absolute; left:16px; bottom:14px;
  background:rgba(7,22,13,.78); backdrop-filter:blur(8px);
  padding:8px 14px; border-radius:var(--radius-pill);
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage);
}
.ratio{ position:relative; overflow:hidden; }
.ratio > img,.ratio > iframe,.ratio > video,.ratio > picture{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.ratio > picture > img{ width:100%; height:100%; object-fit:cover; }
.r-4x3{ padding-top:75%; } .r-16x9{ padding-top:56.25%; } .r-1x1{ padding-top:100%; } .r-3x4{ padding-top:133.33%; }

/* video block */
.vplayer{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--stroke); }
.vplayer video{ width:100%; display:block; background:#07160D; }
.vplayer__btn{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(7,22,13,.42); transition:background var(--dur) var(--ease);
}
.vplayer__btn:hover{ background:rgba(7,22,13,.26); }
.vplayer__btn span{
  width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
  background:rgba(216,190,126,.94); color:#0B1E13; font-size:1.4rem; padding-left:5px;
  box-shadow:0 10px 34px rgba(0,0,0,.4);
  transition:transform var(--dur) var(--ease);
}
.vplayer__btn:hover span{ transform:scale(1.07); }
.vplayer.playing .vplayer__btn{ opacity:0; visibility:hidden; }

/* ----------------------------------------------------------- 15. GALLERY */
.gal{ columns:3; column-gap:16px; }
.gal figure{ break-inside:avoid; margin-bottom:16px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--stroke); position:relative; cursor:zoom-in; }
.gal img{ width:100%; transition:transform .6s var(--ease); }
.gal figure:hover img{ transform:scale(1.045); }
.gal figcaption{
  position:absolute; inset:auto 0 0; padding:26px 16px 14px;
  background:linear-gradient(transparent, rgba(7,22,13,.9));
  font-size:.8125rem; color:var(--sage);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.gal figure:hover figcaption{ opacity:1; }

.lb{ position:fixed; inset:0; z-index:1000; background:rgba(4,13,8,.96); display:none; place-items:center; padding:34px; }
.lb.open{ display:grid; }
.lb img{ max-width:min(1100px,92vw); max-height:82vh; border-radius:12px; object-fit:contain; }
.lb__cap{ text-align:center; margin-top:16px; font-size:.875rem; color:var(--sage); }
.lb__x,.lb__p,.lb__n{
  position:absolute; width:52px; height:52px; border-radius:50%;
  background:var(--glass-2); border:1px solid var(--stroke); color:#fff;
  display:grid; place-items:center; font-size:1.2rem;
}
.lb__x{ top:24px; right:24px; } .lb__p{ left:24px; top:50%; margin-top:-26px; } .lb__n{ right:24px; top:50%; margin-top:-26px; }
.lb__x:hover,.lb__p:hover,.lb__n:hover{ background:var(--gold-l); color:#0B1E13; }

/* filters */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.chip{
  padding:9px 20px; border-radius:var(--radius-pill); font-size:.8125rem;
  border:1px solid var(--stroke); color:var(--tx-2); background:transparent;
  transition:all var(--dur) var(--ease); min-height:40px;
}
.chip:hover{ border-color:var(--sage); color:var(--tx); }
.chip.on{ background:var(--green-cta); border-color:var(--green-cta); color:#fff; }
.light .chip{ border-color:var(--sage); color:var(--slate); }
.light .chip.on{ background:var(--green); border-color:var(--green); color:#fff; }

/* ----------------------------------------------------------- 16. FORMS */
.form{ display:grid; gap:18px; }
.field label{ display:block; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); margin-bottom:8px; }
.light .field label{ color:var(--slate); }
.light .field .req{ color:var(--gold-dark); }
.light .field .hint,.light .form__note{ color:var(--slate); }
.field .req{ color:var(--gold-l); }
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:14px 16px;
  background:rgba(0,0,0,.22); border:1px solid var(--stroke);
  border-radius:var(--radius-sm); color:var(--tx); font-size:1rem;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.light .field input,.light .field select,.light .field textarea{ background:#fff; border-color:#DDE5DF; color:var(--ink); }
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--gold-l); background:rgba(0,0,0,.32); outline:none; }
.light .field input:focus,.light .field select:focus,.light .field textarea:focus{ background:#fff; }
.field input::placeholder,.field textarea::placeholder{ color:var(--tx-3); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B7CEC6' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; }
.field .hint{ font-size:.8125rem; color:var(--tx-3); margin-top:7px; }
.field .err{ font-size:.8125rem; color:#F0A8A0; margin-top:7px; display:none; }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:#C86A5E; }
.field.invalid .err{ display:block; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form__note{ font-size:.8125rem; color:var(--tx-3); }
.hp{ position:absolute!important; left:-9999px!important; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; padding:0; border:0; }

/* ----------------------------------------------------------- 17. FAQ */
.acc{ border-top:1px solid var(--stroke); }
.acc__i{ border-bottom:1px solid var(--stroke); }
.acc__q{
  width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:22px 0; font-family:var(--serif); font-size:1.0625rem; color:var(--tx);
  transition:color var(--dur) var(--ease);
}
.light .acc,.light .acc__i{ border-color:#DDE5DF; }
.light .acc__q{ color:var(--ink); }
.acc__q:hover{ color:var(--gold-l); }
.light .acc__q:hover{ color:var(--green); }
.light .acc__q i{ color:var(--gold-dark); }
.acc__q i{ font-style:normal; flex:0 0 24px; text-align:center; color:var(--gold-l); font-size:1.2rem; transition:transform var(--dur) var(--ease); }
.acc__i.open .acc__q i{ transform:rotate(45deg); }
.acc__a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.acc__a > div{ padding-bottom:24px; font-size:.9375rem; color:var(--tx-2); max-width:70ch; }
.light .acc__a > div{ color:var(--slate); }

/* ----------------------------------------------------------- 18. PAGE BANNER */
.pbanner{ position:relative; padding:calc(var(--hdr-h) + 74px) 0 68px; overflow:hidden; }
.pbanner::after{
  content:''; position:absolute; left:50%; top:-190px; width:620px; height:400px; transform:translateX(-50%);
  border:1px solid var(--gold-stroke); border-radius:50% 50% 0 0; opacity:.28; pointer-events:none;
}
.pbanner .crumb{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3); margin-bottom:16px; }
.pbanner .crumb a:hover{ color:var(--gold-l); }
.pbanner .lede{ max-width:60ch; margin-top:18px; }

/* ----------------------------------------------------------- 19. CTA BAND */
.cta{
  position:relative; overflow:hidden; text-align:center;
  padding-block:var(--s7);
  background:radial-gradient(80% 130% at 50% 0%, #1B3E25 0%, var(--emerald) 58%, #07160D 100%);
  border-block:1px solid var(--stroke);
}
.cta::after{
  content:''; position:absolute; left:50%; bottom:-320px; width:760px; height:520px; transform:translateX(-50%);
  border:1px solid var(--gold-stroke); border-radius:50% 50% 0 0; opacity:.3; pointer-events:none;
}
.cta h2{ color:#fff; max-width:20ch; margin-inline:auto; }
.cta .lede{ max-width:52ch; margin:18px auto 0; }
.cta .btns{ justify-content:center; margin-top:32px; }

/* ----------------------------------------------------------- 20. FOOTER */
.ftr{ background:#050F09; border-top:1px solid var(--stroke); padding-block:var(--s6) var(--s4); }
.ftr__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; }
.ftr h2{ font-family:var(--sans); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-l); margin-bottom:18px; }
.ftr ul{ display:grid; gap:11px; }
.ftr a{ font-size:.9375rem; color:var(--tx-2); transition:color var(--dur) var(--ease); }
.ftr a:hover{ color:var(--gold-l); }
.ftr__brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.ftr__brand img{ width:46px; }
.ftr__bot{
  margin-top:var(--s5); padding-top:24px; border-top:1px solid var(--stroke);
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  font-size:.8125rem; color:var(--tx-3);
}
.soc{ display:flex; gap:10px; }
.soc a{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--stroke);
  display:grid; place-items:center; transition:all var(--dur) var(--ease);
}
.soc a:hover{ background:var(--gold-l); border-color:var(--gold-l); color:#0B1E13; }
.soc svg{ width:17px; height:17px; }

/* ----------------------------------------------------------- 21. FLOATING / STICKY */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:800;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform var(--dur) var(--ease);
}
.wa:hover{ transform:scale(1.08); }
.wa svg{ width:29px; height:29px; }

.mbar{
  position:fixed; inset:auto 0 0; z-index:850; display:none;
  gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(7,22,13,.95); border-top:1px solid var(--stroke);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.mbar .btn{ flex:1; min-height:50px; font-size:.875rem; padding:12px 14px; }
.mbar .btn--wa{ background:#25D366; color:#062; flex:0 0 56px; padding:0; }
.mbar .btn--wa svg{ width:24px; height:24px; }

/* ----------------------------------------------------------- 22. PROSE (blog) */
.prose{ max-width:68ch; }
.prose h2{ font-size:1.625rem; margin:44px 0 14px; }
.prose h3{ font-size:1.25rem; margin:32px 0 10px; }
.prose p,.prose li{ font-size:1.0625rem; line-height:1.8; color:var(--tx-2); }
.light .prose p,.light .prose li{ color:#3F4A43; }
.prose ul{ display:grid; gap:10px; margin:0 0 20px; }
.prose ul li{ padding-left:24px; position:relative; }
.prose ul li::before{ content:''; position:absolute; left:0; top:.62em; width:7px; height:7px; border:1px solid var(--gold); transform:rotate(45deg); }
.prose blockquote{
  font-family:var(--serif); font-size:1.25rem; font-style:italic; line-height:1.55;
  border-left:2px solid var(--gold); padding-left:26px; margin:30px 0; color:var(--tx);
}
.light .prose blockquote{ color:var(--ink); border-color:var(--gold-dark); }
.light .prose ul li::before{ border-color:var(--gold-dark); }
.prose strong{ color:var(--tx); }
.light .prose strong{ color:var(--ink); }

/* ----------------------------------------------------------- 23. MISC */
.meta-row{ display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.8125rem; color:var(--tx-3); }
.kv{ display:grid; gap:0; }
.kv__r{ display:flex; gap:18px; padding:14px 0; border-bottom:1px solid var(--stroke); font-size:.9375rem; }
.light .kv__r{ border-color:#DDE5DF; }
.kv__k{ flex:0 0 40%; color:var(--tx-3); }
.light .kv__k,.mint .kv__k{ color:var(--slate); }
.kv__v{ flex:1; }
.pill-row{ display:flex; flex-wrap:wrap; gap:9px; }
.note{ border-left:2px solid var(--gold); padding-left:20px; }

.tbl-wrap{ overflow-x:auto; border:1px solid var(--stroke); border-radius:var(--radius); }
.tbl{ min-width:520px; }
.tbl th{ text-align:left; font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; padding:16px 20px; background:rgba(51,85,58,.5); color:#fff; font-weight:600; }
.tbl td{ padding:16px 20px; border-top:1px solid var(--stroke); font-size:.9375rem; color:var(--tx-2); }
.tbl td strong{ color:var(--tx); }
.light .tbl td,.mint .tbl td{ border-color:#DDE5DF; color:var(--slate); }
.light .tbl td strong,.mint .tbl td strong{ color:var(--ink); }
.light .tbl th,.mint .tbl th{ background:var(--pine); color:#fff; }
.light .tbl-wrap,.mint .tbl-wrap{ border-color:#DDE5DF; }
.tbl .price{ color:var(--gold-l); font-weight:600; }
.light .tbl .price,.mint .tbl .price{ color:var(--gold-dark); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ----------------------------------------------------------- 24. RESPONSIVE */
@media (max-width:1180px){
  .nav a{ padding:10px 10px; font-size:.8125rem; }
  .brand__sub{ display:none; }
}
@media (max-width:1023px){
  .nav{ display:none; }
  .hdr .btn{ display:none; }
  .burger{ display:grid; }
  .hero__grid{ grid-template-columns:1fr; gap:40px; }
  .split,.split--wide{ grid-template-columns:1fr; gap:36px; }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:repeat(2,1fr); }
  .tiers{ grid-template-columns:repeat(2,1fr); }
  .gal{ columns:2; }
  .ftr__grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .section{ padding-block:var(--s6); }
  .hero{ padding:150px 0 70px; }
  .trust__row{ grid-template-columns:repeat(2,1fr); }
  .trust__i:nth-child(2){ border-right:none; }
  .trust__i:nth-child(1),.trust__i:nth-child(2){ border-bottom:1px solid var(--stroke); }
}
@media (max-width:767px){
  body{ font-size:16px; }
  .wrap{ padding-inline:20px; }
  .section{ padding-block:56px; }
  .hero{ padding:132px 0 46px; }
  .g2,.g3,.g4,.bento,.tiers,.f2{ grid-template-columns:1fr; }
  .card--span2{ grid-column:span 1; }
  .gal{ columns:1; }
  .ftr__grid{ grid-template-columns:1fr; gap:30px; }
  .btns .btn{ width:100%; }
  .mbar{ display:flex; }
  .wa{ display:none; }
  body{ padding-bottom:76px; }
  .hdr{ inset-block-start:10px; }
  .hdr__inner{ padding:8px 8px 8px 14px; }
  .pbanner{ padding:126px 0 44px; }
  .cta{ padding-block:64px; }
  .card{ padding:20px; }
  .lb__p,.lb__n{ display:none; }
  .prose blockquote{ padding-left:18px; font-size:1.125rem; }
  .kv__r{ flex-direction:column; gap:4px; }
  .kv__k{ flex:none; font-size:.8125rem; }
}
@media (max-width:389px){
  .wrap{ padding-inline:16px; }
  .brand__name{ font-size:.875rem; }
  .card__big,.tier__price{ font-size:2rem; }
}

@media (min-width:1600px){
  .hero{ padding-top:200px; }
}

/* print + motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
  .reveal.in .hair{ width:88px; }
}
@media print{
  .hdr,.mbar,.wa,.cta,.mnav{ display:none!important; }
  body{ background:#fff; color:#000; }
}

/* ==========================================================================
   v2 ADDITIONS — fee tabs, coloured social, books, founder note, layout
   ========================================================================== */

/* ---------- fee duration tabs ---------- */
.tabs{
  display:inline-flex; gap:6px; padding:6px;
  border:1px solid var(--stroke); border-radius:var(--radius-pill);
  background:var(--glass); margin-bottom:26px;
}
.light .tabs,.mint .tabs{ background:#fff; border-color:#DDE5DF; }
.tabs .chip{ border:none; background:transparent; min-height:46px; padding:11px 30px; font-size:.9375rem; }
.tabs .chip.on{ background:var(--green-cta); color:#fff; }
.light .tabs .chip.on,.mint .tabs .chip.on{ background:var(--green); color:#fff; }
.tabpanel{ display:none; }
.tabpanel.on{ display:block; animation:fadeUp .4s var(--ease); }
.tabpanel__note{ margin-bottom:22px; }
@keyframes fadeUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tier__unit{ font-family:var(--sans); font-size:.9375rem; font-weight:400; color:var(--tx-3); margin-left:4px; }
.light .tier__unit,.mint .tier__unit{ color:var(--slate); }

/* ---------- social icons in real brand colours ---------- */
.soc{ display:flex; gap:12px; margin-top:24px; }
.soc__i{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; background:rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.soc__i svg{ width:24px; height:24px; }
.soc__i:hover{ transform:translateY(-3px); background:rgba(255,255,255,.12); border-color:var(--stroke-2); }
.soc--yt:hover{ box-shadow:0 8px 20px rgba(255,0,0,.28); }
.soc--ig:hover{ box-shadow:0 8px 20px rgba(214,36,159,.28); }
.soc--fb:hover{ box-shadow:0 8px 20px rgba(24,119,242,.28); }
.soc--tt:hover{ box-shadow:0 8px 20px rgba(37,244,238,.24); }

/* ---------- icons ---------- */
.ico--sm{ width:34px; height:34px; color:var(--gold-l); display:block; margin-bottom:14px; }
.light .ico--sm,.mint .ico--sm{ color:var(--gold-dark); }

/* ---------- media card ---------- */
.card--media{ padding:0; overflow:hidden; display:block; }
.card--media__body{ padding:28px; }
.card--media__body h3{ margin-bottom:8px; }
.card--media__body .tlink{ margin-top:16px; }

/* ---------- about: journey + statements ---------- */
.journey{ margin-top:52px; padding:44px; }
.pull{
  font-family:var(--serif); font-style:italic; font-size:1.375rem; line-height:1.5;
  color:var(--gold-l); border-left:2px solid var(--gold); padding-left:26px;
}
.light .pull,.mint .pull{ color:var(--green); border-color:var(--gold-dark); }
.statement{ font-family:var(--serif); font-size:1.1875rem; line-height:1.55; color:var(--ink); }
.prose--tight p{ font-size:1rem; line-height:1.78; }

/* ---------- founder note ---------- */
.founder-note{
  background:
    radial-gradient(70% 90% at 12% 0%, rgba(54,100,28,.20) 0%, transparent 60%),
    var(--ink-800);
  border-block:1px solid var(--stroke);
}
.fnote{
  max-width:1080px; margin-inline:auto;
  border:1px solid var(--gold-stroke); border-radius:var(--radius);
  padding:56px; background:rgba(255,255,255,.035);
  position:relative;
}
.fnote::before{
  content:'\201C'; position:absolute; top:6px; left:34px;
  font-family:var(--serif); font-size:7rem; line-height:1; color:var(--gold); opacity:.22;
}
.fnote__head{ margin-bottom:28px; }
.fnote__body{ max-width:none; column-count:2; column-gap:46px; }
.fnote__body p{ break-inside:avoid; }
.fnote__sign{
  margin-top:34px; padding-top:26px; border-top:1px solid var(--stroke);
  display:flex; flex-direction:column; gap:3px;
}
.fnote__sig{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--gold-l); }

/* ---------- courses: not-sure panel ---------- */
.notsure{ margin-top:48px; text-align:center; padding:52px 32px; }
.notsure .eyebrow{ justify-content:center; }
.notsure h2{ max-width:24ch; margin-inline:auto; }
.notsure .lede{ max-width:56ch; margin:16px auto 0; }

/* ---------- forms ---------- */
.card--form{ padding:36px; }
.phone-row{ display:grid; grid-template-columns:minmax(140px,190px) 1fr; gap:12px; }
.phone-row select{ min-width:0; }

/* ---------- thank-you / 404 ---------- */
.tycenter{ padding-top:calc(var(--hdr-h) + 92px); text-align:center; }
.tick{
  width:86px; height:86px; border-radius:50%; background:rgba(216,190,126,.14);
  border:1px solid var(--gold-stroke); display:grid; place-items:center;
  margin:0 auto 30px; color:var(--gold-l);
}

/* ---------- books ---------- */
.bookcard{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.bookcard__cover{ position:relative; }
.bookcard__cover .badge-fmt{
  position:absolute; top:14px; left:14px;
  background:rgba(7,22,13,.82); backdrop-filter:blur(6px);
  color:var(--gold-l); font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--radius-pill);
}
.bookcard__body{ padding:26px; display:flex; flex-direction:column; flex:1; }
.bookcard__body h3{ color:#fff; margin-bottom:6px; }
.light .bookcard__body h3,.mint .bookcard__body h3{ color:var(--ink); }
.bookcard__sub{ font-size:.875rem; color:var(--gold-l); margin-bottom:12px; }
.light .bookcard__sub{ color:var(--gold-dark); }
.bookcard__body p{ font-size:.9375rem; color:var(--tx-2); flex:1; }
.light .bookcard__body p{ color:var(--slate); }
.bookmeta{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.8125rem; color:var(--tx-3); margin-top:16px; }

.empty{
  text-align:center; padding:70px 32px; border:1px dashed var(--stroke-2);
  border-radius:var(--radius); background:var(--glass);
}
.empty h3{ margin:14px 0 8px; }

/* ---------- admin link in footer ---------- */
.ftr__bot a{ color:var(--tx-3); }
.ftr__bot a:hover{ color:var(--gold-l); }

/* ---------- responsive for v2 ---------- */
@media (max-width:1340px){
  :root{ --gutter:32px; }
  .nav a{ padding:11px 11px; font-size:.875rem; }
  .hdr__cta{ padding:12px 20px; font-size:.875rem; }
}
@media (max-width:1180px){
  .nav{ display:none; }
  .hdr__cta{ display:none; }
  .burger{ display:grid; }
  .fnote__body{ column-count:1; }
  .fnote{ padding:40px 32px; }
  .tiers{ grid-template-columns:1fr; }
  .journey{ padding:32px; }
}
@media (max-width:767px){
  :root{ --gutter:20px; --hdr-h:70px; }
  .brand__mark{ width:42px; height:42px; flex:0 0 42px; }
  .brand__mark img{ width:40px; }
  .brand__name{ font-size:.9375rem; }
  .brand__sub{ font-size:.5rem; letter-spacing:.26em; }
  .tabs{ display:flex; width:100%; }
  .tabs .chip{ flex:1; padding:11px 12px; font-size:.875rem; }
  .fnote{ padding:30px 22px; }
  .fnote::before{ font-size:4.5rem; left:16px; }
  .fnote__sig{ font-size:1.25rem; }
  .card--form{ padding:22px; }
  .phone-row{ grid-template-columns:1fr; }
  .notsure{ padding:34px 20px; }
  .journey{ padding:24px; margin-top:34px; }
  .soc__i{ width:46px; height:46px; }
  .grid.g3{ grid-template-columns:1fr; }
}
@media (max-width:389px){
  :root{ --gutter:16px; }
}

/* ---------- hero sound toggle ---------- */
.hero__sound{
  position:absolute; right:26px; bottom:26px; z-index:3;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px 11px 16px; border-radius:var(--radius-pill);
  background:rgba(7,22,13,.66); border:1px solid var(--stroke-2);
  color:var(--tx); font-size:.8125rem; letter-spacing:.06em;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero__sound:hover{ background:rgba(7,22,13,.86); border-color:var(--gold-stroke); transform:translateY(-2px); }
.hero__sound.on{ border-color:var(--gold-l); color:var(--gold-l); }
.hero__sound-ico{ width:20px; height:20px; display:block; }
.hero__sound-ico svg{ width:100%; height:100%; }
@media (max-width:767px){
  .hero__sound{ right:16px; bottom:16px; padding:10px 16px 10px 13px; font-size:.75rem; }
  .hero__sound-txt{ display:none; }
}

/* ---------- video player hint ---------- */
.vplayer__hint{
  display:block; margin-top:10px; font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sage);
}
.vplayer__btn{ flex-direction:column; }

/* ---------- biography page ---------- */
.bio-banner{ padding-bottom:0; }
.bio-hero{
  display:grid; grid-template-columns:1fr 420px; gap:64px;
  align-items:center; margin-top:8px;
}
.bio-hero__text .lede{ max-width:54ch; }
.bio-hero__img{ position:relative; }
.bio-hero__img .frame{ max-width:420px; margin-inline:auto; }
.bio-hero__img::after{
  content:''; position:absolute; inset:auto -18px -18px -18px; height:70%;
  border:1px solid var(--gold-stroke); border-top:none;
  border-radius:0 0 14px 14px; opacity:.35; pointer-events:none; z-index:-1;
}

.bio-body{
  max-width:78ch; margin:0 auto; padding-block:var(--s6) 0;
}
.bio-body p{ font-size:1.0625rem; line-height:1.85; color:var(--tx-2); margin-bottom:1.15rem; }
.bio-body p:first-of-type{
  font-size:1.1875rem; color:var(--tx);
}
.bio-body h2{ font-size:1.5rem; margin:34px 0 12px; }
.bio-body strong{ color:var(--tx); }

.bio-quote{
  max-width:78ch; margin:var(--s6) auto 0; padding:34px 40px;
  border:1px solid var(--gold-stroke); border-radius:var(--radius);
  background:rgba(216,190,126,.05);
  font-family:var(--serif); font-style:italic; font-size:1.25rem; line-height:1.55;
  color:var(--gold-l); text-align:center;
}

@media (max-width:1023px){
  .bio-hero{ grid-template-columns:1fr; gap:36px; }
  .bio-hero__img .frame{ max-width:340px; }
  .bio-body{ padding-top:var(--s5); }
}
@media (max-width:767px){
  .bio-hero__img .frame{ max-width:280px; }
  .bio-body p:first-of-type{ font-size:1.0625rem; }
  .bio-quote{ padding:24px 22px; font-size:1.0625rem; }
}
.frame.arch{ border-radius:210px 210px 14px 14px; }
@media (max-width:767px){ .frame.arch{ border-radius:140px 140px 12px 12px; } }