/* ============================================================
   GS Muzik Conservatory - shared professional theme (subpages)
   Matches the homepage palette: black bg, white text,
   "Advent Pro" display font, with a refined gold accent.
   Official brand faces: GS MUZIK = Cubao Wide (self-hosted),
   CONSERVATORY = Jura (Google Fonts), GS mark = brush logo image.
   ============================================================ */
/* Poppins + Jura load via a <link> in each page head (parallel, not a serial
   @import discovered only after this file downloads) — see the HTML pages. */

@font-face{font-family:"Advent Pro";src:url("./TrenchThin-aZ1J.ttf") format("truetype");font-display:swap}
@font-face{font-family:"cocoon";src:url("./Eloxy-owYD0.otf") format("opentype");font-display:swap}
@font-face{font-family:"Cubao Wide";src:url("./font/CubaoFreeWide.woff2") format("woff2"),url("./font/CubaoFreeWide.ttf") format("truetype");font-display:swap}

:root{
  --b0:#000;--b1:#0c0c0c;--b2:#141414;--b3:#1c1c1c;
  --f0:#fff;--f1:#cfcfcf;--f2:#9a9a9a;--f3:#6a6a6a;
  --acc:#d9a441;--acc2:#e8c87d;
  --line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.18);
  --card:rgba(255,255,255,.035);--card-h:rgba(255,255,255,.06);
  --radius:16px;--maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* Tell the browser this page IS dark. Without this Safari assumes light and
   renders its own chrome from a light base — on iOS 26 that showed as white
   frost in the liquid-glass URL bar over an otherwise black site. It also
   fixes native form controls, the date/time pickers, spinners and scrollbars,
   which were all rendering in light dress. theme-color alone does not do this.
   body.light is the CMS light-mode class, which flips the declaration back. */
:root{color-scheme:dark}
body.light{color-scheme:light}
*{box-sizing:border-box}
::selection{background:#fff;color:#000}
::-moz-selection{background:#fff;color:#000}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--b0);color:var(--f0);
  font-family:'Poppins',sans-serif;font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* ---------- custom scrollbar (site-wide) ---------- */
html{scrollbar-width:thin;scrollbar-color:var(--acc) var(--b1)}        /* Firefox */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--b1)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--acc),#a9791f);
  border:2px solid var(--b1);border-radius:100px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--acc2),var(--acc))}
::-webkit-scrollbar-corner{background:var(--b1)}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-button:single-button{display:none;width:0;height:0}
::-webkit-scrollbar-button:start{display:none;width:0;height:0}
::-webkit-scrollbar-button:end{display:none;width:0;height:0}
body::before{ /* film grain overlay */
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.07;
  background:url("./grain.jpg");background-size:300px;mix-blend-mode:overlay;
}
/* ---------- global render scale (~80% "zoomed out") + wider container ---------- */
html{background:var(--b0);scrollbar-gutter:stable}
body{zoom:.8}
.wrap,.nav-in{max-width:1320px;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:"Advent Pro",'Poppins',sans-serif;font-weight:600;line-height:1.1;margin:0}
.display{font-family:"Advent Pro",sans-serif;letter-spacing:.02em}
/* official wordmark headline: GS MUZIK = Cubao Wide, accent line = Jura spaced caps
   (used by the homepage hero and page banners — keep the two lines tight) */
.brand-h1{font-family:"Cubao Wide","Advent Pro",sans-serif;text-transform:uppercase;line-height:1.02;letter-spacing:.01em}
.brand-h1 .acc{display:inline-block;font-family:'Jura','Poppins',sans-serif;font-weight:500;font-style:normal;
  text-transform:uppercase;letter-spacing:.26em;font-size:.44em;margin-top:.14em}
.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--acc);font-weight:500}
.muted{color:var(--f2)}
.center{text-align:center}
.acc{color:var(--acc)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
section{padding:clamp(58px,7vw,100px) 0;position:relative}
.section-head{max-width:700px;margin:0 auto clamp(34px,4.5vw,54px);text-align:center}
.section-head h2{font-size:clamp(1.8rem,3.8vw,2.7rem);letter-spacing:.01em}
.section-head p{color:var(--f2);margin:.9rem 0 0;font-size:1.02rem}
.grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;cursor:pointer;border:0;
  font-family:'Poppins';font-weight:500;font-size:.95rem;letter-spacing:.02em;
  padding:.85em 1.6em;border-radius:100px;transition:.3s var(--ease);white-space:nowrap}
.btn i{font-size:1.05em}
.btn-primary{background:var(--f0);color:#000}
.btn-primary:hover{background:var(--acc);color:#000;transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a1407;font-weight:600}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(217,164,65,.28)}
.btn-ghost{background:transparent;color:#fff;border:1px solid var(--line2)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-wa{background:#25d366;color:#04340f;font-weight:600}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(37,211,102,.25)}
.btn-lg{padding:1.05em 2.2em;font-size:1.02rem}
.btn-block{width:100%;justify-content:center}
/* rolling-text swap hover (two stacked copies roll + rotate on hover) */
.btn-swap .mask{display:inline-block;overflow:hidden;height:1.25em;line-height:1.25em;vertical-align:bottom}
.btn-swap .bt-words{display:block;transition:transform .45s cubic-bezier(.66,0,.2,1)}
.btn-swap .mask .t{display:block;height:1.25em;line-height:1.25em;white-space:nowrap;transition:transform .45s cubic-bezier(.66,0,.2,1)}
.btn-swap .t:first-child{transform-origin:right center}
.btn-swap .t:last-child{transform-origin:left center;transform:rotate(16deg)}
.btn-swap:hover .bt-words{transform:translateY(-1.25em)}
.btn-swap:hover .t:first-child{transform:rotate(16deg)}
.btn-swap:hover .t:last-child{transform:rotate(0)}

/* ---------- header / nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:.35s var(--ease);
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0));
  backdrop-filter:none;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(8,8,8,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px clamp(20px,5vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;zoom:1.1}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:34px;width:auto}
/* nav brand is the horizontal GS mark + wordmark lockup (~4:1), trimmed to its
   ink — slightly shorter than the old square mark so the two lines of the
   lockup read cleanly at nav scale */
.nav .brand img{height:31px}
.brand b{font-family:"Cubao Wide","Advent Pro",sans-serif;font-weight:400;font-size:1.02rem;letter-spacing:.04em}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:.9rem;font-weight:400;color:var(--f1);position:relative;padding:4px 0;transition:.2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--acc);transition:.3s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:.58em 1.2em;font-size:.8rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:#fff;transition:.3s}
@media(max-width:860px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:flex}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:0;background:rgba(8,8,8,.98);border-bottom:1px solid var(--line);padding:10px 0}
  .nav-links.open a{padding:14px clamp(20px,5vw,48px);width:100%}
}

/* ---------- page banner ---------- */
/* ==========================================================================
   PAGE BANNER (subpage hero)
   A background photo + legibility gradient, with the content — breadcrumb,
   wordmark, intro, buttons — as one vertically-centred column. Height is modest
   so it reads as a hero without leaving a big empty gap under the buttons.
   Content is plain block flow (natural margins); the ebook banner nests a
   .split grid inside .wrap and top-aligns via its own inline style — untouched.
   ========================================================================== */
.banner{
  position:relative;
  min-height:60vh;
  padding:126px 0 clamp(48px,7vw,84px);      /* top padding clears the fixed nav */
  display:flex;
  align-items:center;                        /* centre the content column */
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--line);
}
.banner-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.4) 40%,rgba(0,0,0,.92) 100%)}
.banner .wrap{width:100%}

/* breadcrumb */
.crumb{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--f2);margin-bottom:1.4rem}
.crumb a:hover{color:var(--acc)}

/* typography */
.banner h1{font-size:clamp(2.6rem,8vw,5.5rem);letter-spacing:.01em;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.banner h1.brand-h1{font-size:clamp(2.2rem,6.2vw,4.6rem)}   /* Cubao Wide runs wider — keep it proportional */
.banner p{max-width:640px;color:var(--f1);font-size:clamp(1rem,2.2vw,1.2rem);margin:1.1rem 0 2rem}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;transition:.35s var(--ease)}
.card:hover{background:var(--card-h);border-color:var(--line2);transform:translateY(-4px)}
.card .ic{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-size:1.4rem;
  background:rgba(217,164,65,.12);color:var(--acc);margin-bottom:18px}
.card h3{font-size:1.3rem;margin-bottom:.5rem;font-family:'Poppins';font-weight:600}
.card p{color:var(--f2);font-size:.95rem;margin:0}

/* pricing / course card */
.price-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;transition:.35s var(--ease)}
.price-card:hover{border-color:var(--acc);transform:translateY(-5px)}
.price-card.feat{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.price-card .pc-head{padding:30px 30px 22px;border-bottom:1px solid var(--line)}
.price-card .badge{display:inline-block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc);border:1px solid rgba(217,164,65,.4);border-radius:100px;padding:4px 12px;margin-bottom:14px}
.price-card h3{font-size:1.6rem;font-family:'Poppins';font-weight:600}
.price-card .price{font-family:"Advent Pro";font-size:2.6rem;font-weight:600;margin:.4rem 0 0}
.price-card .price small{font-size:.85rem;color:var(--f2);font-family:'Poppins';font-weight:300}
.price-card .pc-body{padding:26px 30px;flex:1;display:flex;flex-direction:column}
.feat-list{list-style:none;margin:0 0 24px;padding:0;flex:1}
.feat-list li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;color:var(--f1);font-size:.93rem;border-bottom:1px solid rgba(255,255,255,.05)}
.feat-list li i{color:var(--acc);margin-top:3px;font-size:.85rem}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery a{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:1;border:1px solid var(--line)}
.gallery img,.gallery video{width:100%;height:100%;object-fit:cover;display:block;transition:.5s var(--ease)}
.gallery a:hover img,.gallery a:hover video{transform:scale(1.08)}
.gallery .wide{grid-column:span 2;aspect-ratio:2/1}
@media(max-width:780px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery .wide{grid-column:span 2}}

/* logo strip */
.logos{display:flex;flex-wrap:wrap;gap:38px;align-items:center;justify-content:center;opacity:.65}
.logos span{font-family:"Advent Pro";font-size:1.1rem;letter-spacing:.08em;color:var(--f2)}

/* ---------- forms ---------- */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,4vw,44px)}
.field{margin-bottom:18px}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.field.row{grid-template-columns:1fr}}
.field label{display:block;font-size:.82rem;color:var(--f1);margin-bottom:8px;letter-spacing:.02em}
.field label .req{color:var(--acc)}
.field input,.field select,.field textarea{
  width:100%;background:var(--b2);border:1px solid var(--line2);border-radius:11px;
  color:#fff;font-family:'Poppins';font-size:.95rem;padding:13px 15px;transition:.25s;font-weight:300}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--acc);background:#191919;box-shadow:0 0 0 3px rgba(217,164,65,.12)}
/* iOS Safari gives input[type=date] a native control with its own intrinsic
   width that ignores width:100%, and a grid track defaults to min-width:auto —
   so the field pushed out past the form edge. Neutralise the native sizing and
   let the track actually shrink. The explicit height replaces the intrinsic one
   that -webkit-appearance:none removes, and keeps the value vertically centred
   rather than sitting high in the box. */
.field.row > *{min-width:0}
/* One explicit height for every single-line control. Left to their intrinsic
   sizing, date/time inputs and selects disagree with text inputs by a few px,
   and each engine disagrees differently — Safari most of all. Pinning the box
   makes the row line up identically everywhere instead of per-browser luck. */
.field input:not([type=checkbox]):not([type=radio]),.field select{height:48px}
.field input[type=date],.field input[type=time],.field input[type=datetime-local]{
  -webkit-appearance:none;appearance:none;min-width:0;max-width:100%;
  display:flex;align-items:center;text-align:left}
/* Safari renders the picker's inner spans with their own baseline; pin them */
/* the inner value span is what actually carries the height once the native
   appearance is gone — matching the siblings line-height keeps the date the
   same height as the select beside it (mobile.css forces 16px on both) */
.field input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.7);opacity:.75;margin-left:4px}
.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' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9a9a' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.form-note{font-size:.8rem;color:var(--f3);margin-top:14px;text-align:center}
.form-msg{display:none;position:relative;margin-top:16px;padding:14px 34px;border-radius:11px;font-size:.9rem;text-align:center}
.form-msg.ok{display:block;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.4);color:#7ee2a0}
.form-msg.err{display:block;background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.4);color:#ff9b9b}
.form-msg .fm-text{display:block}
.form-msg .fm-count{display:block;margin-top:6px;font-size:.72rem;opacity:.65;letter-spacing:.04em}
.form-msg .fm-close{position:absolute;top:8px;right:11px;background:none;border:0;color:inherit;
  font-size:1.3rem;line-height:1;cursor:pointer;opacity:.6;transition:opacity .2s}
.form-msg .fm-close:hover{opacity:1}

/* split layout */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
.split.rev .split-media{order:2}
@media(max-width:880px){.split{grid-template-columns:1fr}.split.rev .split-media{order:0}}
.split-media img{border-radius:18px;border:1px solid var(--line);width:100%}
.split-text h2{font-size:clamp(1.8rem,4.5vw,2.8rem);margin-bottom:1rem}
.split-text p{color:var(--f1);margin:0 0 1rem}
.stat-row{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
.stat b{font-family:"Advent Pro";font-size:2rem;display:block;color:#fff}
.stat span{font-size:.8rem;color:var(--f2);letter-spacing:.05em}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:66px 0 30px;background:var(--b1)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:clamp(22px,2.6vw,40px);align-items:start}
.foot-grid>div:first-child{padding-right:clamp(40px,7vw,130px)}
/* link columns hidden -> brand block alone, centered */
.foot-grid.foot-solo{grid-template-columns:1fr}
.foot-grid.foot-solo>div:first-child{padding-right:0;display:flex;flex-direction:column;
  align-items:center;text-align:center}
.foot-grid.foot-solo .brand{justify-content:center}
.foot-grid.foot-solo .socials{justify-content:center}
@media(max-width:780px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px 28px}.foot-grid>div:first-child{grid-column:1/-1}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot h5{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--f2);
  margin:24px 0 24px;font-family:'Poppins';font-weight:600}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:10px}
.foot a{color:var(--f3);font-size:.78rem;font-weight:300;transition:.2s}
.foot li a:hover{color:var(--acc)}
.foot .brand{display:inline-block;margin:16px 0 18px}
/* footer.js renders the official lockup here; the PNG is trimmed to its ink so
   the left edge lines up with the address and socials below it */
.foot .brand img{width:min(260px,100%);height:auto}
.foot .brand img.bm{display:none}   /* centered-lockup variant — mobile only */
.foot .brand b{font-size:2rem;letter-spacing:.05em;color:#fff}   /* legacy text brand */
.foot .desc{color:var(--f3);font-size:.78rem;line-height:1.75;max-width:300px;margin:0}
.foot .foot-addr{display:block;text-decoration:none;cursor:pointer;transition:color .25s var(--ease)}
.foot .foot-addr:hover{color:var(--acc)}
.foot .socials{display:flex;gap:12px;margin-top:30px}
.foot .socials a{position:relative;display:grid;place-items:center;width:40px;height:40px;overflow:visible;
  border:1px solid var(--line2);border-radius:50%;color:var(--f1);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.foot .socials a i{position:relative;z-index:1;transition:transform .55s var(--ease)}
.foot .socials a::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(135deg,var(--acc),var(--acc2));transform:scale(0);opacity:0;
  transition:transform .38s var(--ease),opacity .38s;box-shadow:0 0 18px rgba(217,164,65,.5)}
.foot .socials a:hover{color:#12100a;border-color:transparent;transform:none}
.foot .socials a:hover::before{transform:scale(1);opacity:1}
.foot .socials a:hover i{transform:rotateY(360deg)}
.foot .socials a::after{content:attr(title);position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-6px);white-space:nowrap;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:rgba(10,10,12,.92);padding:5px 9px;border-radius:6px;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.foot .socials a:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.foot-bot{border-top:1px solid var(--line);margin-top:48px;padding-top:24px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--f3);letter-spacing:.02em}
/* legal links inline in the © line */
.foot-bot .sep{opacity:.55;padding:0 3px}
.foot-bot a:not(.credit){color:var(--f3);transition:.2s}
.foot-bot a:not(.credit):hover{color:var(--acc)}
/* "Crafted by …" credit: letters idle in grey with a sequential shimmer that
   sweeps through the name to grab attention; hovering lights the whole name
   white (plus an underline sweep). */
.foot-bot .credit{position:relative;color:var(--f2);text-decoration:none;white-space:nowrap}
.foot-bot .credit .ch{display:inline-block;color:var(--f2);
  animation:creditSeq 3s linear infinite;animation-delay:calc(var(--i) * .11s)}
@keyframes creditSeq{
  0%,100%{color:var(--f2);text-shadow:none}
  5%{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.35)}
  14%{color:var(--f2);text-shadow:none}}
.foot-bot .credit::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.foot-bot .credit:hover .ch{animation:none;color:#fff}
.foot-bot .credit:hover::after{transform:scaleX(1);transform-origin:left}
@media(prefers-reduced-motion:reduce){.foot-bot .credit .ch{animation:none}}

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

/* seamless page-to-page transition veil (driven by site.js) */
#pt-veil{position:fixed;inset:0;z-index:9998;background:#050505;opacity:0;
  pointer-events:none;transition:opacity .26s ease}
body.pt-out #pt-veil{opacity:1;pointer-events:auto}

/* modal */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px)}
.modal.open{display:flex}
.modal-box{background:var(--b1);border:1px solid var(--line2);border-radius:20px;max-width:560px;width:100%;
  max-height:90vh;overflow:auto;padding:clamp(24px,4vw,40px);position:relative}
.modal-close{position:absolute;top:16px;right:18px;background:none;border:0;color:var(--f2);font-size:1.6rem;cursor:pointer;line-height:1}
.modal-close:hover{color:#fff}

/* ============================================================
   Homepage components (shared, reusable across the site)
   ============================================================ */
/* ---- hero (editorial: overline meta · oversized headline · CTA + showreel · stats · marquee) ----
   NOTE: the background is intentionally open so a hand-coded line/wave
   element can be dropped inside .hero (keep it below z-index:2). */
.hero{position:relative;min-height:125svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;transform:scale(1.05);
  animation:heroZoom 26s ease-in-out infinite alternate}
@keyframes heroZoom{to{transform:scale(1.13)}}
/* Layer 1 = the side wash behind the headline. Layer 2 = the vertical frame:
   near-black at BOTH ends so the nav bar sits on black at the top and the
   marquee strip sits on black at the bottom, with the mesh left to breathe
   through the middle third. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.34) 100%),
             linear-gradient(180deg,#000 0%,rgba(0,0,0,.90) 7%,rgba(0,0,0,.45) 20%,transparent 34%,
               transparent 60%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.94) 93%,#000 100%)}
.hero-body{flex:1;display:flex;position:relative;z-index:2}
.hero-body .wrap{display:flex;flex-direction:column;width:100%;padding-top:104px;padding-bottom:24px}
/* overline meta row */
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.hero-top .lbl{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--f2);
  display:inline-flex;align-items:center;gap:13px}
.hero-top .lbl::before{content:"";width:34px;height:1px;background:var(--acc)}
.hero-socials{display:flex;gap:12px;align-items:center}
.hero-foot .hero-socials::after{content:"";width:34px;height:1px;background:var(--acc);flex:none}
.hero-socials a{width:40px;height:40px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;
  color:var(--f1);font-size:.92rem;transition:.25s var(--ease)}
.hero-socials a:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-3px)}
/* centred headline block */
.hero-mid{flex:1;display:flex;align-items:center;padding:36px 0}
.hero-main{max-width:880px}
.hero h1{font-size:clamp(2.9rem,8.4vw,6.6rem);line-height:.92;letter-spacing:-.01em;margin:0 0 .42em;
  text-shadow:0 8px 50px rgba(0,0,0,.45);text-transform:none}
.hero h1 .acc{color:var(--acc)}  /* upright — the accent line is Jura (brand-h1), not italic */
.hero .lead{max-width:540px;color:var(--f1);font-size:clamp(1.02rem,1.5vw,1.18rem);margin:0 0 2.1rem}
.hero-cta{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.btn.arrow i{transition:transform .3s var(--ease)}
.btn.arrow:hover i{transform:translateX(5px)}
.btn-play{display:inline-flex;align-items:center;gap:13px;color:#fff;font-size:.92rem;font-weight:500;letter-spacing:.02em}
.btn-play .pp{width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;
  font-size:.85rem;transition:.3s var(--ease)}
.btn-play:hover{color:var(--acc)}
.btn-play:hover .pp{background:var(--acc);color:#000;border-color:var(--acc);transform:scale(1.06)}
/* bottom stats + scroll cue */
.hero-foot{display:flex;justify-content:flex-end;align-items:center;gap:20px}
/* bottom bar: marquee runs full-width; socials overlay the left and the
   scrolling text fades out behind them (seamless, no hard divider) */
.hero-bottom{position:relative;z-index:2;border-top:1px solid var(--line2)}
.hero-bottom .marquee{border-top:none;border-bottom:none}
.hero-bottom .hero-socials{position:absolute;left:0;top:0;bottom:0;z-index:4;
  display:flex;align-items:center;gap:14px;
  padding:0 clamp(40px,6vw,72px) 0 clamp(20px,4vw,40px);
  background:linear-gradient(90deg,var(--b0) 0%,var(--b0) 78%,rgba(0,0,0,0) 100%)}
.hero-bottom .marquee{position:relative;z-index:1}
.hero-stats{display:flex;gap:clamp(22px,4vw,52px)}
.hero-stats .st b{font-family:"Advent Pro";font-size:1.7rem;color:#fff;display:block;line-height:1}
.hero-stats .st span{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--f2)}
.hero-scroll{display:none;align-items:center;gap:11px;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--f2);transition:.25s}
.hero-scroll:hover{color:var(--acc)}
.hero-scroll i{animation:hbob 1.8s ease-in-out infinite}
@keyframes hbob{0%,100%{transform:translateY(-3px);opacity:.4}50%{transform:translateY(3px);opacity:1}}

/* ---- marquee ticker (reusable) ---- */
.marquee{overflow:hidden;position:relative;z-index:2;border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line);background:rgba(0,0,0,.4);backdrop-filter:blur(2px)}
.mq-track{display:flex;align-items:center;gap:34px;width:max-content;padding:15px 0;
  animation:mq 32s linear infinite;will-change:transform}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track span{font-family:"Advent Pro";font-size:1.05rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--f1);white-space:nowrap}
.mq-track span.d{color:var(--acc)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- funnel path cards ---- */
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:820px){.path-grid{grid-template-columns:1fr}}
.path{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);min-height:440px;
  display:flex;flex-direction:column;justify-content:flex-end;transition:.4s var(--ease);cursor:pointer}
.path *{cursor:pointer}
.path:hover{transform:translateY(-6px);border-color:var(--acc)}
.path .pbg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transition:.6s var(--ease)}
.path:hover .pbg{transform:scale(1.08)}
.path .pov{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.92))}
.path .pin{position:relative;z-index:2;padding:32px}
.path h3{font-size:1.7rem;margin-bottom:8px}
.path p{color:var(--f1);font-size:.93rem;margin:0 0 18px;line-height:1.5}
.path .go{display:inline-flex;align-items:center;gap:8px;color:var(--acc);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}

/* ---- music / video cards ---- */
.track-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.track-grid{grid-template-columns:repeat(2,1fr)}.vid-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.track-grid,.vid-grid{grid-template-columns:1fr}}
.track,.vidc{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.35s var(--ease)}
.track:hover,.vidc:hover{transform:translateY(-5px);border-color:var(--line2);background:var(--card-h)}
.track .art{aspect-ratio:1;background-size:cover;background-position:center;position:relative}
.vidc .art{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative}
.track,.vidc{cursor:pointer}
/* hover play hint */
.track .art::after,.vidc .art::after{content:"\f04b";font-family:FontAwesome;position:absolute;inset:0;display:grid;place-items:center;
  font-size:1.5rem;color:#fff;background:rgba(0,0,0,.35);opacity:0;transition:.3s;pointer-events:none}
.track:hover .art::after,.vidc:hover .art::after{opacity:1}
.vidc .art::after{content:"\f144";font-size:2.6rem}
.track.previewing .art::after,.vidc.previewing .art::after{opacity:0}
/* youtube hover-preview iframe (non-interactive; click goes to the card link) */
.vidc .art iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
/* spotify "Now Playing" indicator (no spotify UI, audio only) */
.track .nowplaying{position:absolute;left:10px;bottom:10px;z-index:2;display:none;align-items:center;gap:9px;
  padding:7px 13px;border-radius:100px;background:rgba(0,0,0,.62);backdrop-filter:blur(5px);
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;font-weight:500}
.track.previewing .nowplaying{display:flex}
.track.previewing .art{filter:brightness(.7)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.eq i{width:2px;height:4px;background:var(--acc);border-radius:1px;animation:eqbar .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.18s}.eq i:nth-child(3){animation-delay:.36s}.eq i:nth-child(4){animation-delay:.12s}
@keyframes eqbar{0%,100%{height:3px}50%{height:13px}}
@media(prefers-reduced-motion:reduce){.eq i{animation:none;height:9px}}
.track .meta,.vidc .meta{padding:15px 17px}
.track .meta .t,.vidc .meta .t{display:block;font-weight:500;font-size:.98rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.2s}
.track:hover .meta .t,.vidc:hover .meta .t{color:var(--acc)}
.track .meta .s,.vidc .meta .s{font-size:.8rem;color:var(--f2);margin-top:3px;display:flex;align-items:center;gap:6px}

/* ---- ribbon / highlight band ---- */
.ribbon{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(120deg,rgba(217,164,65,.10),rgba(255,255,255,.02));padding:clamp(30px,5vw,56px)}
.ribbon .rin{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
@media(max-width:780px){.ribbon .rin{grid-template-columns:1fr;text-align:center}}
.ribbon h2{font-size:clamp(1.8rem,4.5vw,2.8rem);margin-bottom:.6rem}
.ribbon .rimg{display:flex;justify-content:center}
.ribbon .rimg img{width:210px;border-radius:8px;box-shadow:12px 18px 50px rgba(0,0,0,.6);transform:rotate(4deg);border:1px solid var(--line2)}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:780px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.contact-grid{grid-template-columns:1fr}}
.contact-grid .ci{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center;transition:.3s var(--ease)}
.contact-grid .ci:hover{border-color:var(--acc);transform:translateY(-4px)}
.contact-grid .ci i{font-size:1.7rem;color:var(--acc);margin-bottom:12px;display:block;
  transition:.35s var(--ease);transform-origin:center}
.contact-grid .ci .k{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-weight:500;transition:.3s var(--ease)}
.contact-grid .ci .v{font-size:.56rem;color:var(--f3);letter-spacing:.02em;word-break:break-word;
  margin-top:6px;transition:.35s var(--ease)}
.contact-grid .ci:hover i{transform:scale(.62);opacity:.5;margin-bottom:6px}
.contact-grid .ci:hover .v{font-size:.85rem;color:var(--acc)}

/* ============================================================
   Section rhythm & dividers (clearer separation between sections)
   ============================================================ */
section:not(.hero){position:relative}
section:not(.hero)::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line2),transparent)}
/* gold accent under every section heading - brand signature */
.section-head h2::after{content:"";display:block;width:52px;height:3px;margin:18px auto 0;
  border-radius:2px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.split-text .eyebrow + h2::after,.section-head.left h2::after{margin-left:0;margin-right:auto}
.glow-top{position:relative}

/* ---- Lenis smooth scroll (keeps native scroll position, fixed nav safe) ---- */
html.lenis,html.lenis body{height:auto}
/* CRITICAL: native scroll-behavior:smooth fights Lenis (each per-frame scrollTop
   write becomes an async animated scroll -> wheel scrolling stalls and can't
   reach the bottom of the page). Lenis only adds .lenis-smooth WHILE scrolling,
   so key off the always-present .lenis class instead. */
html.lenis{scroll-behavior:auto !important}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ============================================================
   RESPONSIVE / MOBILE  - reworked across every section
   ============================================================ */
@media(max-width:980px){
  .split{gap:36px}
}
@media(max-width:760px){
  section{padding:clamp(52px,11vw,76px) 0}
  .hero-body .wrap{padding-top:96px}
  .hero-mid{padding:26px 0}
  .hero h1{font-size:clamp(2.6rem,12vw,4rem)}
  .hero-top .lbl{font-size:.62rem}
  .hero-cta{gap:18px}
  .hero-scroll{display:none}
  .hero-stats{gap:24px;width:100%;justify-content:space-between}
  .hero-stats .st b{font-size:1.4rem}
  .mq-track span{font-size:.92rem}
  .section-head{margin-bottom:34px}
  .section-head p{font-size:.95rem}
  .split-text h2{font-size:clamp(1.7rem,7vw,2.1rem)}
  .stat-row{gap:24px}
  .stat b{font-size:1.6rem}
  .banner{min-height:54vh;padding-top:104px}
  .banner h1{font-size:clamp(2.2rem,11vw,3.4rem)}
  .price-card .pc-head,.price-card .pc-body{padding:24px}
  .card{padding:24px}
  .ribbon .rimg{order:-1}
  .ribbon .rimg img{width:160px}
  .foot-grid{gap:30px}
  .btn-lg{padding:.95em 1.7em;font-size:.98rem}
  .nav-in{padding:12px 20px}
}
/* Subpage banner CTAs. Same contract as the homepage .hero-cta: the pair stays
   side by side and gives up type size rather than stacking. Two stacked
   full-width buttons read as a form, not a hero. These were inline-styled with
   flex-wrap:wrap and no class, so they got none of the homepage treatment and
   wrapped on narrow Androids. */
.banner-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media(max-width:480px){
  .hero-top .hero-socials{display:none}
  /* equal-width, shrinkable, never wrapping to two rows */
  .banner-cta{flex-wrap:nowrap;width:100%;gap:10px}
  .banner-cta .btn,.banner-cta .btn-lg{flex:1 1 0;min-width:0;justify-content:center;
    text-align:center;padding:.82em .6em;font-size:.79rem;white-space:nowrap}
  /* both CTAs side by side — compact type/padding so they fit a 360px screen */
  .hero-cta{flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;gap:12px}
  .hero-cta .btn,.hero-cta .btn-lg{padding:.8em 1.15em;font-size:.8rem}
  .hero-cta .btn i{font-size:.95em}
  .btn-play{font-size:.78rem;gap:9px;white-space:nowrap}
  .btn-play .pp{width:38px;height:38px;font-size:.68rem}
  .hero-stats .st b{font-size:1.2rem}
  .hero-stats .st span{font-size:.56rem}
  .section-head h2{font-size:1.6rem}
  .stat-row{justify-content:center;gap:18px}
  .brand b{font-size:1rem}
  .brand img{height:30px}
}

@media(prefers-reduced-motion:reduce){
  .hero-bg,.hb-scroll i,.eq i{animation:none !important}
  html{scroll-behavior:auto}
}