/* ═══ volanote.com — the shared sheet ══════════════════════════════════════
   Lifted out of index.html verbatim so about.html and the VolaBlog pages the
   Content Studio generates wear the same skin as the landing page instead of
   a copy of it that drifts. index.html is still the only page that USES the
   scroll-scene rules below; they cost nothing on a page with no [data-scene].
   ════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   VOLANOTE — the identity of 2026-08-03.
   ink #111111 · paper #F7F4EF · gold #C9A15C · bronze #8B5A3C
   charcoal #2E2E2E · warm grey #A7A29A · off-white #FBFAF7

   GOLD IS NEVER TEXT ON A LIGHT GROUND — 2.19:1 on ivory. It is a surface and
   a stroke. On ink it is 7.86:1 and belongs there. On the light theme the
   accent-as-text becomes bronze, 5.28:1. Both themes declare the same token
   names so no rule below has to know which one it is in.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --ink:#111111; --paper:#F7F4EF; --gold:#C9A15C; --bronze:#8B5A3C;
  --charcoal:#2E2E2E; --warm:#A7A29A; --off:#FBFAF7;

  /* DARK — the default */
  --bg:#111111; --bg-2:#0B0B0B; --surface:#1A1A19; --surface-2:#2E2E2E;
  --text:#F7F4EF; --dim:#BFBBB4;            /* 8.9:1 on the page */
  --faint:#A7A29A;                          /* 7.44:1 */
  --accent-text:var(--gold);                /* 7.86:1 on ink */
  --line:rgba(247,244,239,.13); --line-strong:rgba(247,244,239,.28);
  --shadow:0 24px 70px -30px rgba(0,0,0,.9);
  --f-display:"Cormorant Garamond","IBM Plex Sans Arabic",Georgia,serif;
  --f-ui:"Manrope","IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
  --mx:0; --my:0;                           /* pointer, -1..1, set from JS */
}
:root.light {
  --bg:#F7F4EF; --bg-2:#EFEBE3; --surface:#FBFAF7; --surface-2:#F1EEE7;
  --text:#111111; --dim:#2E2E2E;            /* 12.38:1 */
  --faint:#726F6A;                          /* 4.79:1 */
  --accent-text:var(--bronze);              /* 5.28:1 — gold would be 2.19:1 */
  --line:rgba(17,17,17,.12); --line-strong:rgba(17,17,17,.26);
  --shadow:0 24px 60px -30px rgba(20,20,10,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.i18n-pending body{visibility:hidden}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 16px/1.65 var(--f-ui);
  overflow-x:clip;
  transition:background .5s ease,color .5s ease;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--f-display);font-weight:500;margin:0;line-height:1.05;letter-spacing:-.01em}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}

/* ── type scale ─────────────────────────────────────────────────────────── */
.eyebrow{
  display:inline-block;font-family:var(--f-ui);font-size:11px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent-text);
}
h1{font-size:clamp(46px,7.8vw,108px)}
h2{font-size:clamp(36px,5.4vw,72px)}
h3{font-size:clamp(26px,3.2vw,40px)}
.lede{color:var(--dim);font-size:clamp(16px,1.5vw,19px);max-width:60ch;margin:18px 0 0}
/* Arabic sets larger and has no case, so the display sizes come back down and
   the tracking goes to zero — letter-spacing breaks cursive joins. */
html[lang="ar"] h1{font-size:clamp(40px,7vw,92px);letter-spacing:0}
html[lang="ar"] h2{font-size:clamp(30px,4.4vw,56px);letter-spacing:0}
html[lang="ar"] h3{font-size:clamp(23px,2.8vw,34px);letter-spacing:0}
html[lang="ar"] .eyebrow{letter-spacing:.12em}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-ui);font-size:14px;font-weight:700;letter-spacing:.02em;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s,border-color .25s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn-pop{background:var(--gold);color:#111111}                 /* 7.86:1 */
.btn-pop:hover{box-shadow:0 12px 30px -10px rgba(201,161,92,.55)}
.btn-ghost{border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--gold);color:var(--accent-text)}
.btn-sm{padding:10px 18px;font-size:13px}

/* ── header ─────────────────────────────────────────────────────────────── */
header{
  position:fixed;inset-inline:0;top:0;z-index:60;
  transition:background .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.stuck{
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand img{width:34px;height:34px}
.wordmark{
  font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;line-height:1;white-space:nowrap;
}
.nav nav{display:flex;align-items:center;gap:6px}
.nav nav a.lnk{
  font-size:13.5px;font-weight:600;color:var(--dim);padding:9px 13px;border-radius:999px;
  transition:color .2s,background .2s;
}
.nav nav a.lnk:hover{color:var(--text);background:var(--surface)}
.tog{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px}
.tog button{
  background:none;border:0;cursor:pointer;color:var(--faint);font:700 11.5px/1 var(--f-ui);
  padding:7px 11px;border-radius:999px;transition:color .2s,background .2s;
}
.tog button[aria-pressed="true"]{background:var(--gold);color:#111111}
.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;border-radius:999px;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--dim);transition:color .2s,border-color .2s;
}
.icon-btn:hover{color:var(--accent-text);border-color:var(--gold)}
@media (max-width:900px){.hide-sm{display:none}}
/* On a 390px phone the wordmark runs into the theme button. The MARK carries
   the identity on its own at that size — the name is in the title bar, the
   hero and the footer regardless. */
@media (max-width:460px){.nav .wordmark{display:none}}

/* ════════════════════════════════════════════════════════════════════════
   THE MOTION SYSTEM

   One rAF loop writes two things and nothing else touches layout:
     --p          on each .scene, 0→1 as that scene travels through the viewport
     --mx / --my  on :root, the pointer as -1..1, eased

   Everything below is then a pure CSS transform reading those numbers, which
   keeps the work on the compositor. `.scene` is a tall spacer whose `.pin` is
   sticky — that is what makes the page appear to hold still while its contents
   move. No library, and no scroll hijacking: the wheel still does exactly what
   the wheel normally does, which is the difference between this and the kind of
   scroll effect people turn off.
   ════════════════════════════════════════════════════════════════════════ */
.scene{position:relative}
.pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}

/* reveal-on-enter, with an optional stagger index --i */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0)*90ms);
}
[data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  /* The pin unsticks and grows to its content, but it KEEPS clipping: the two
     string layers are sized against a 100vh pin (120% tall, hanging off both
     edges) and without the clip they push the page 86px wide of the viewport.
     They are pure decoration, so under reduced motion they simply go. */
  .pin{position:relative;height:auto;padding:96px 0;overflow:hidden}
  .strings-a,.strings-b{display:none}
  .hero-mark,.hero-copy,.word,.track,.stats{transform:none!important;opacity:1!important}
  .track-mask{position:relative;top:auto;margin-top:34px}
  .track{flex-wrap:wrap;width:auto;justify-content:center}
  .btn:hover{transform:none}
  .scroll-hint{display:none}
}

/* ── hero ───────────────────────────────────────────────────────────────── */
/* A 100vh pin inside an Nvh scene gives (N-100)vh of PINNED travel and then you
   scroll past the pin normally. 240vh made that pass-through 1.4 screens long
   with nothing in it, because the copy was already at opacity 0. Two changes,
   not one: the scene is shorter, AND the fade stops short of zero — the hero
   leaves by travelling up while still visible, which is what a page normally
   does, instead of going blank and then sitting there. */
.hero.scene{height:150vh}
/* The header is fixed and 68px tall, so the pin has to start below it — without
   this the mark sits behind the nav links. The bottom padding is what keeps the
   stats clear of the scroll hint. */
.hero .pin{padding:84px 0 44px}
.hero-stage{position:relative;width:100%;max-width:1180px;padding:0 24px;text-align:center}

/* the harp strings, two layers at different depths so the parallax reads as
   depth rather than as one sheet sliding */
.strings-a,.strings-b{
  position:absolute;pointer-events:none;background-repeat:no-repeat;
  background-image:url('/brand/motif/strings-fan.svg');
}
.strings-a{
  inset-inline-end:-6%;bottom:-28%;width:min(76vw,900px);height:120%;
  background-position:bottom right;background-size:contain;opacity:.5;
  transform:translate3d(calc(var(--mx)*-22px),calc(var(--p)*-90px + var(--my)*-14px),0) scale(calc(1 + var(--p)*.14));
}
.strings-b{
  inset-inline-start:-14%;top:-34%;width:min(58vw,700px);height:110%;
  background-position:top left;background-size:contain;opacity:.22;
  transform:rotate(180deg) translate3d(calc(var(--mx)*14px),calc(var(--p)*60px),0) scale(calc(1 + var(--p)*.08));
}
:root.light .strings-a{opacity:.20}
:root.light .strings-b{opacity:.10}

.hero-mark{
  width:clamp(64px,7.2vw,108px);height:auto;margin:0 auto 18px;
  transform:translate3d(calc(var(--mx)*10px),calc(var(--my)*8px - var(--p)*60px),0) scale(calc(1 - var(--p)*.22));
  opacity:calc(1 - var(--p)*1.5);
  filter:drop-shadow(0 14px 40px rgba(201,161,92,.28));
}
.hero-copy{
  transform:translate3d(0,calc(var(--p)*-170px),0);
  opacity:calc(1 - var(--p)*0.72);
}
.hero h1 em{font-style:normal;color:var(--accent-text)}
.hero .lede{margin-inline:auto;text-align:center}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* the live counters, sitting under the fold */
.stats{
  display:flex;gap:clamp(22px,5vw,64px);justify-content:center;flex-wrap:wrap;
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  transform:translate3d(0,calc(var(--p)*-90px),0);opacity:calc(1 - var(--p)*0.95);
}
.stats div{text-align:center}
.stats b{display:block;font-family:var(--f-display);font-size:clamp(30px,3.4vw,46px);font-weight:600;color:var(--accent-text)}
.stats span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
html[lang="ar"] .stats span{letter-spacing:0;text-transform:none;font-size:13px}

/* Both of these are the first thing to go on a short viewport — a laptop in
   landscape has no room for a hero AND a counter row AND a hint, and clipping
   any of them inside the pin's overflow is worse than dropping the least
   important one. */
/* THE HERO MUST FIT. `.pin` clips, so anything that does not fit is not merely
   cramped, it is sliced — and the thing that was being sliced was the primary
   call to action, on any laptop shorter than about 670px of viewport. Scrolling
   did not rescue it either: the copy translates up and fades at the same time,
   so the button cleared the clip only once it was already half transparent.
   So the hero's vertical demand comes down in steps as the viewport shortens,
   rather than the overflow being left to decide what a visitor sees. */
@media (max-height:820px){
  .hero h1{font-size:clamp(42px,6.4vw,76px)}
  .hero .lede{font-size:16px;margin-top:14px}
  .hero-cta{margin-top:24px}
  .stats{margin-top:26px;padding-top:16px}
}
@media (max-height:720px){
  .hero .pin{padding:74px 0 26px}
  .hero-mark{width:clamp(46px,4.4vw,64px);margin-bottom:12px}
  .hero h1{font-size:clamp(36px,5vw,58px)}
  .stats{display:none}
}
@media (max-height:600px){.scroll-hint{display:none}}
.scroll-hint{
  /* Parked against the inline edge, not centred: centred, it lands squarely on
     top of the counter row on any laptop-height screen. */
  position:absolute;inset-inline-end:26px;bottom:22px;width:24px;height:38px;
  border:1px solid var(--line-strong);border-radius:999px;opacity:calc(1 - var(--p)*3);
}
.scroll-hint::after{
  content:"";position:absolute;inset-inline:0;top:7px;margin:auto;width:3px;height:7px;
  border-radius:2px;background:var(--gold);animation:wheel 1.8s ease-in-out infinite;
}
@keyframes wheel{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(11px);opacity:.25}}

/* ── the statement: words arriving one at a time ────────────────────────── */
.say.scene{height:210vh}
.say .pin{padding:0 24px}
.say p{
  max-width:16ch;margin:0;text-align:center;
  font-family:var(--f-display);font-size:clamp(38px,7vw,96px);line-height:1.08;font-weight:500;
}
html[lang="ar"] .say p{max-width:20ch;font-size:clamp(30px,5.4vw,72px)}
/* No JS per frame: each word owns an index (--k) and the total (--n), so the
   scene's own --p drives the whole line through pure arithmetic. */
.word{
  display:inline-block;
  opacity:calc((var(--p) * var(--n)) - var(--k));
  transform:translate3d(0,calc((1 - min(1,max(0,(var(--p) * var(--n)) - var(--k)))) * 26px),0);
}
.word em{font-style:normal;color:var(--accent-text)}

/* ── instruments: a horizontal track driven by vertical scroll ──────────── */
.inst.scene{height:300vh}
.inst .pin{display:block}
.inst-head{padding:96px 24px 0;max-width:1180px;margin:0 auto}
.track-mask{position:absolute;inset-inline:0;top:44%;overflow:hidden}
.track{
  display:flex;gap:18px;padding-inline:24px;width:max-content;
  transform:translate3d(var(--tx,0px),0,0);
}
.inst-card{
  flex:0 0 auto;width:186px;padding:22px 18px;border:1px solid var(--line);border-radius:20px;
  background:var(--surface);text-align:center;transition:border-color .3s,transform .3s;
  /* Every card is a LINK into registration with that instrument already
     chosen — tapping an instrument must take you somewhere, not just look. */
  color:inherit;text-decoration:none;
  /* Bottom-aligned so the NAMES line up across the row. The instruments with no
     drawing — Oud today — simply carry empty space above them instead of
     floating their name up where everyone else's icon is. */
  display:flex;flex-direction:column;justify-content:flex-end;min-height:190px;
}
.inst-card:hover{border-color:var(--gold);transform:translateY(-6px)}
/* The call to action is always legible rather than hover-only: on a phone there
   is no hover, and this row is the one place a visitor decides to enrol. */
.inst-card .pick{
  display:block;margin-top:9px;font-style:normal;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);opacity:.72;
  transition:opacity .3s;
}
html[lang="ar"] .inst-card .pick{letter-spacing:0;text-transform:none;font-size:12.5px}
.inst-card:hover .pick,.inst-card:focus-visible .pick{opacity:1}
.inst-card .ico{
  width:74px;height:74px;margin:0 auto 12px;border-radius:18px;display:grid;place-items:center;
  background:var(--ink);
}
:root.light .inst-card .ico{background:#191919}
.inst-card .ico img{width:48px;height:48px;object-fit:contain}
.inst-card b{display:block;font-size:15px}
.inst-card small{display:block;margin-top:3px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
html[lang="ar"] .inst-card small{letter-spacing:0;text-transform:none;font-size:12.5px}
.track-note{
  position:absolute;inset-inline-start:24px;bottom:40px;font-size:12px;color:var(--faint);
  letter-spacing:.14em;text-transform:uppercase;
}
html[lang="ar"] .track-note{letter-spacing:0;text-transform:none}

/* ── normal sections ────────────────────────────────────────────────────── */
section.blk{padding:clamp(90px,12vw,170px) 0;position:relative}
.sec-head{max-width:760px;margin-bottom:clamp(38px,5vw,64px)}
.grid{display:grid;gap:18px}
.pkgs{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pkg{
  border:1px solid var(--line);border-radius:22px;padding:26px;background:var(--surface);
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .3s,transform .3s,box-shadow .3s,opacity .9s cubic-bezier(.2,.7,.2,1);
}
.pkg:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:var(--shadow)}
.pkg .inst-name{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}
html[lang="ar"] .pkg .inst-name{letter-spacing:0;text-transform:none;font-size:14px}
.pkg .price{font-family:var(--f-display);font-size:46px;font-weight:600;line-height:1}
.pkg .price small{font-family:var(--f-ui);font-size:14px;font-weight:600;color:var(--faint)}
.pkg .meta{font-size:13.5px;color:var(--dim)}
.pkg .go{margin-top:auto;padding-top:16px}

.feats{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.feat{border-top:1px solid var(--line);padding-top:20px}
.feat i{
  display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  background:var(--gold);color:#111111;font-style:normal;font-weight:800;font-size:14px;margin-bottom:13px;
}
.feat b{display:block;font-size:17px;margin-bottom:6px}
.feat span{color:var(--dim);font-size:14.5px}

.steps{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.step{border:1px solid var(--line);border-radius:22px;padding:26px;background:var(--surface)}
.step .n{
  font-family:var(--f-display);font-size:52px;font-weight:600;line-height:1;color:var(--accent-text);
  display:block;margin-bottom:10px;
}
.step b{display:block;font-size:18px;margin-bottom:6px}
.step span{color:var(--dim);font-size:14.5px}

/* ── closing panel ──────────────────────────────────────────────────────── */
.final{
  position:relative;overflow:hidden;border-radius:32px;padding:clamp(52px,8vw,104px) 24px;
  text-align:center;background:var(--ink);color:var(--paper);
  border:1px solid rgba(201,161,92,.34);
}
.final::after{
  content:"";position:absolute;inset-block:0;inset-inline-end:-4%;width:min(60vw,620px);
  background:url('/brand/motif/strings-fan.svg') no-repeat bottom right/contain;opacity:.45;
  pointer-events:none;
}
.final > *{position:relative;z-index:1}
.final h2{color:var(--paper)}
.final p{color:var(--warm);max-width:52ch;margin:16px auto 0}
.final .btn-ghost{border-color:rgba(247,244,239,.3);color:var(--paper)}
.final .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:64px 0 34px;font-size:14px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
@media (max-width:760px){.foot-top{grid-template-columns:1fr}}
footer h4{font:700 11px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);margin:0 0 14px}
html[lang="ar"] footer h4{letter-spacing:0;text-transform:none;font-size:13px}
footer nav{display:flex;flex-direction:column;gap:9px}
footer nav a{color:var(--dim)}
footer nav a:hover{color:var(--accent-text)}
.fline{display:block;color:var(--faint)}
.strings-rule{
  height:26px;margin:38px 0 20px;
  background:url('/brand/motif/strings-divider.svg') no-repeat center/contain;opacity:.7;
}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:12.5px}
.empty{color:var(--faint);padding:26px 0}