/* =====================================================================
   Modern Music Hub
   Learn. Create. Produce.

   Built on the same bones as amanorsac.studio: a black page, each
   program introduced as a full-width photograph with its name standing
   at the top, pairs of tiles under it, writing blocks between, and the
   whole site in the foot. What changes is the voice: Montserrat set
   bold for the headlines, warm cream paper for the practical sections,
   and a louder palette so the page feels like it was made for a
   fourteen-year-old with a beat in their head as much as for their
   parents.

   Palette (see brand.html)
     Charcoal     #111111   the page
     Warm Cream   #F4EFE6   paper, type on dark
     Pop Orange   #FF6A2B   lead accent, Piano by Ear
     Hot Pink     #FF4D9D   In person, Charlottesville
     Lime Pop     #B8F23A   Creator Program, success
     Ultra Violet #8B5CFF   Production
     Sky Pop      #3EC8FF   Online Hub
     Sunshine     #FFC93C   Kids and teens, highlights
   ===================================================================== */

:root{
  --charcoal:#111111; --cream:#F4EFE6;
  --orange:#FF6A2B; --pink:#FF4D9D; --lime:#B8F23A; --violet:#8B5CFF; --sky:#3EC8FF; --sun:#FFC93C;
  --olive:#66735B; --stone:#8C8780;

  --bg:#0c0c0d; --bg-2:#141416; --panel:#18181b; --line:rgba(255,255,255,.1);
  --text:#F7F4EE; --muted:#b4b0a8; --dim:#7d7a74;
  --paper:var(--cream); --paper-2:#ebe4d7; --ink:#141414; --ink-2:#55524c; --paper-line:rgba(0,0,0,.1);

  --accent:var(--orange); --accent-ink:#1a0a02;
  --display:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,4vw,48px);
  --r:20px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.025em}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:#000;padding:8px 14px;border-radius:6px}
.skip:focus{left:8px}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* the rainbow rule that sits under the bar, made of the logo's colours */
.keys-rule{height:4px;background:linear-gradient(90deg,
  var(--orange) 0 16.66%,var(--pink) 0 33.33%,var(--lime) 0 50%,var(--violet) 0 66.66%,var(--sky) 0 83.33%,var(--sun) 0)}

/* ---------- the site bar ---------- */
.gnav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:22px;height:60px;padding:0 var(--gut);
  background:rgba(12,12,13,.86);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid var(--line);font-size:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream)}
.brand svg{height:30px;width:auto;flex:none}
.brand b{font-family:var(--display);font-weight:800;font-size:14.5px;line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.gnav nav{display:flex;gap:22px;margin-left:14px}
.gnav nav a{text-decoration:none;color:#c9c5bd;font-weight:500}
.gnav nav a:hover,.gnav nav a[aria-current]{color:#fff}
.gnav nav a[aria-current]{box-shadow:0 2px 0 var(--k,var(--orange))}
.gnav .cta{margin-left:auto}
.menu-btn{display:none;margin-left:8px;background:none;border:0;color:#fff;padding:8px;cursor:pointer}
.menu-btn svg{width:24px;height:24px}
@media (max-width:1020px){
  .gnav nav{display:none}
  .menu-btn{display:inline-flex}
  .gnav.open nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:60px;margin:0;
    background:#0c0c0d;border-bottom:1px solid var(--line);padding:8px var(--gut) 16px}
  .gnav.open nav a{padding:12px 0;font-size:17px;border-bottom:1px solid var(--line)}
  .gnav.open nav a:last-child{border-bottom:0}
  .gnav nav a[aria-current]{box-shadow:none;color:var(--k,var(--orange))}
}
@media (max-width:420px){ .brand b{display:none} }

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);
  font-size:15.5px;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;
  border:0;border-radius:999px;padding:15px 26px;background:var(--accent);color:var(--accent-ink);
  transition:transform .25s var(--ease),filter .2s,box-shadow .25s}
.btn:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 10px 30px -10px var(--accent)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.sm{font-size:13.5px;padding:10px 18px}
.btn.line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.btn.line:hover{box-shadow:inset 0 0 0 2px #fff}
.btn.dark{background:var(--charcoal);color:var(--cream)}
.paper .btn.line{color:var(--ink);box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
.more{color:var(--k,var(--accent));text-decoration:none;font-weight:600;white-space:nowrap}
.more:hover{text-decoration:underline;text-underline-offset:4px}
.more::after{content:" \203A"}

/* ---------- kicker chips ---------- */
.kick{display:inline-block;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--k,var(--accent));margin:0 0 14px}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:7px 13px;border-radius:999px;background:var(--k,var(--orange));color:#111}

/* ---------- the opening of a page ---------- */
.hero{position:relative;text-align:center;padding:clamp(56px,10vh,112px) var(--gut) 0;overflow:hidden}
.hero h1{font-weight:800;font-size:clamp(46px,8.6vw,120px);line-height:.95;letter-spacing:-.045em;margin:0 0 22px}
.hero h1 em{font-style:normal;color:var(--k,var(--accent))}
.hero .tag{font-size:clamp(19px,2.1vw,26px);line-height:1.35;color:#e9e5dd;max-width:34ch;margin:0 auto 30px}
.hero .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0 0 14px}
.hero .fine{font-size:13.5px;color:var(--dim);margin:0}
.hero-img{position:relative;margin:clamp(40px,7vh,72px) calc(var(--gut) * -1) 0}
.hero-img img{width:100%;height:clamp(320px,58vw,860px);object-fit:cover}
.hero-img::before{content:"";position:absolute;inset:0 0 auto 0;height:24%;z-index:1;background:linear-gradient(var(--bg),transparent)}
.hero-img::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;z-index:1;background:linear-gradient(transparent,var(--bg))}

/* the equaliser that bounces next to the headline on the home page */
.eq{display:inline-flex;gap:5px;align-items:flex-end;height:.72em;margin-left:.12em;vertical-align:baseline}
.eq i{width:.13em;border-radius:3px;height:100%;transform-origin:bottom;animation:bounce 1.1s ease-in-out infinite}
.eq i:nth-child(1){background:var(--orange)}
.eq i:nth-child(2){background:var(--pink);animation-delay:.15s}
.eq i:nth-child(3){background:var(--lime);animation-delay:.3s}
.eq i:nth-child(4){background:var(--violet);animation-delay:.45s}
.eq i:nth-child(5){background:var(--sky);animation-delay:.6s}
@keyframes bounce{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ---------- a program, edge to edge (as on amanorsac.studio) ---------- */
.panel{position:relative;display:block;overflow:hidden;color:#fff;text-decoration:none;background:#000;
  min-height:clamp(560px,86vh,920px);margin:0 0 6px}
.panel > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 30%,rgba(0,0,0,0) 56%,rgba(0,0,0,.3) 100%)}
.panel.low{display:flex;align-items:flex-end}
.panel.low::after{background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,0) 72%)}
.panel .in{position:relative;z-index:1;text-align:center;padding:clamp(48px,9vh,96px) var(--gut) 0;max-width:940px;margin:0 auto}
.panel.low .in{padding:0 var(--gut) clamp(40px,8vh,80px)}
.panel .kick,.pair .kick{text-shadow:0 1px 10px rgba(0,0,0,.7)}
.panel h2{font-weight:800;font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-.04em;margin:0 0 16px;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.panel p{font-size:clamp(18px,1.8vw,22px);line-height:1.4;color:#f0ece4;margin:0 auto 22px;max-width:36ch;text-shadow:0 1px 24px rgba(0,0,0,.6)}
.links{display:flex;gap:12px 28px;justify-content:center;flex-wrap:wrap;align-items:center}
.links span{color:var(--k,var(--accent));font-size:18px;font-weight:600}
.links span::after{content:" \203A"}
.links .pill{color:#111;background:var(--k,var(--accent));padding:11px 20px;border-radius:999px;font-family:var(--display);font-size:15px;font-weight:700}
.links .pill::after{content:""}
.panel:hover > img,.pair a:hover > img{transform:scale(1.03)}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 6px}
.pair a{position:relative;display:block;overflow:hidden;color:#fff;text-decoration:none;background:#000;min-height:clamp(480px,72vh,760px)}
.pair a > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.pair a::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.38) 32%,rgba(0,0,0,0) 58%)}
.pair .in{position:relative;z-index:1;text-align:center;padding:clamp(40px,7vh,72px) var(--gut) 0}
.pair h2{font-weight:800;font-size:clamp(34px,4.2vw,58px);line-height:1;letter-spacing:-.035em;margin:0 0 12px}
.pair p{font-size:clamp(16px,1.4vw,19px);color:#f0ece4;margin:0 auto 18px;max-width:30ch;text-shadow:0 1px 20px rgba(0,0,0,.6)}
.pair .links span{font-size:16.5px}
@media (max-width:820px){ .pair{grid-template-columns:1fr} .panel{min-height:clamp(520px,92vh,760px)} }

/* ---------- a section heading on its own ---------- */
.room-h{text-align:center;padding:clamp(72px,12vh,128px) var(--gut) clamp(28px,4vh,48px);max-width:960px;margin:0 auto}
.room-h h1,.room-h h2{font-weight:800;font-size:clamp(38px,5.6vw,76px);line-height:1;letter-spacing:-.04em;margin:0 0 18px}
.room-h h2 em,.room-h h1 em{font-style:normal;color:var(--k,var(--accent))}
.room-h p{color:var(--muted);font-size:clamp(17px,1.5vw,20px);max-width:60ch;margin:0 auto}
.paper .room-h p{color:var(--ink-2)}

/* ---------- cream paper sections ---------- */
.paper{background:var(--paper);color:var(--ink);color-scheme:light}
.paper .kick{--k:#d4511a}
.paper.pad{padding-bottom:clamp(64px,10vh,120px)}

/* ---------- the three-step strip ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);max-width:1200px;margin:0 auto;padding:0 var(--gut)}
.step{position:relative;border-radius:var(--r);padding:30px 28px 28px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06),0 18px 40px -28px rgba(0,0,0,.35)}
.step .n{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--k);color:#111;
  font-family:var(--display);font-weight:800;font-size:22px;margin:0 0 18px;transform:rotate(-4deg)}
.step h3{font-size:22px;font-weight:800;margin:0 0 8px}
.step p{margin:0;color:var(--ink-2);font-size:16px}
.bg-dark .step{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.bg-dark .step p{color:var(--muted)}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }

/* ---------- feature tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);max-width:1200px;margin:0 auto;padding:0 var(--gut)}
.tiles.two{grid-template-columns:repeat(2,1fr)}
.tiles.four{grid-template-columns:repeat(4,1fr)}
.tile{position:relative;border-radius:var(--r);padding:26px 24px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--k,var(--orange))}
.tile .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--k,var(--orange)) 18%,transparent);color:var(--k,var(--orange));margin:0 0 16px}
.tile .ic svg{width:24px;height:24px}
.tile h3{font-size:20px;font-weight:800;margin:0 0 6px}
.tile p{margin:0;color:var(--muted);font-size:15.5px}
.paper .tile{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 14px 34px -26px rgba(0,0,0,.4)}
.paper .tile p{color:var(--ink-2)}
@media (max-width:1000px){ .tiles,.tiles.four{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .tiles,.tiles.two,.tiles.four{grid-template-columns:1fr} }

/* ---------- photo + writing, side by side ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;
  max-width:1200px;margin:0 auto;padding:clamp(56px,9vh,110px) var(--gut)}
.split.flip .split-img{order:2}
.split-img{position:relative}
.split-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r) + 6px)}
.split-img::after{content:"";position:absolute;right:-14px;bottom:-14px;width:46%;height:46%;border-radius:calc(var(--r) + 6px);
  background:var(--k,var(--orange));z-index:-1}
.split-img{z-index:0}
.split h2{font-weight:800;font-size:clamp(32px,4.2vw,54px);line-height:1.02;letter-spacing:-.035em;margin:0 0 18px}
.split p{color:var(--muted);font-size:clamp(16.5px,1.4vw,18.5px);margin:0 0 16px}
.paper .split p{color:var(--ink-2)}
.checks{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
.checks li{position:relative;padding-left:34px;font-size:16.5px}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:7px;background:var(--k,var(--orange));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='7'/%3E%3C/svg%3E");}
.checks li::after{content:"";position:absolute;left:7px;top:8px;width:8px;height:5px;border-left:2.5px solid #111;border-bottom:2.5px solid #111;transform:rotate(-45deg)}
@media (max-width:900px){ .split{grid-template-columns:1fr} .split.flip .split-img{order:0} }

/* ---------- the learning path (levels) ---------- */
.path{max-width:1000px;margin:0 auto;padding:0 var(--gut);display:grid;gap:14px;counter-reset:lvl}
.lvl{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;border-radius:var(--r);padding:24px 26px;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line)}
.lvl .badge{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--k);color:#111;text-align:center;
  font-family:var(--display);font-weight:800;line-height:1}
.lvl .badge small{display:block;font-size:10px;letter-spacing:.12em}
.lvl .badge span{font-size:26px}
.lvl h3{font-size:21px;font-weight:800;margin:2px 0 4px}
.lvl p{margin:0 0 10px;color:var(--muted);font-size:16px}
.lvl .tags{display:flex;flex-wrap:wrap;gap:6px}
.lvl .tags span{font-size:12.5px;padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#ddd8cf}
.paper .lvl{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 14px 34px -26px rgba(0,0,0,.4)}
.paper .lvl p{color:var(--ink-2)}
.paper .lvl .tags span{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);color:var(--ink-2)}

/* ---------- schedule ---------- */
.sched{max-width:900px;margin:0 auto;padding:0 var(--gut);display:grid;gap:12px}
.slot{display:grid;grid-template-columns:110px 1fr auto;gap:18px;align-items:center;padding:18px 22px;border-radius:16px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.slot .day{font-family:var(--display);font-weight:800;font-size:15px;color:var(--k);text-transform:uppercase;letter-spacing:.06em}
.slot b{display:block;font-size:17.5px}
.slot small{color:var(--muted);font-size:14.5px}
.slot .time{font-family:var(--display);font-weight:700;font-size:15px;white-space:nowrap}
@media (max-width:620px){ .slot{grid-template-columns:1fr;gap:4px} }

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);max-width:1200px;margin:0 auto;padding:0 var(--gut);align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;border-radius:calc(var(--r) + 4px);padding:30px 28px;background:#fff;color:var(--ink);
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 18px 40px -28px rgba(0,0,0,.45)}
.plan .top{height:8px;border-radius:999px;background:var(--k);margin:0 0 22px;width:64px}
.plan h3{font-size:24px;font-weight:800;margin:0 0 4px}
.plan .for{color:var(--ink-2);font-size:15px;margin:0 0 18px}
.plan .price{font-family:var(--display);font-weight:800;font-size:46px;letter-spacing:-.04em;line-height:1;margin:0 0 4px}
.plan .price small{font-size:16px;font-weight:600;letter-spacing:0;color:var(--ink-2)}
.plan .when{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.4;margin:0 0 20px}
.plan.hot .when{color:var(--cream)}
.plan .note{font-size:13.5px;color:var(--ink-2);margin:0 0 20px}
.plan .checks{flex:1}
.plan .checks li{font-size:15.5px}
.plan .btn{width:100%}
.plan.hot{background:var(--charcoal);color:var(--cream);transform:translateY(-10px)}
.plan.hot .for,.plan.hot .note,.plan.hot .price small{color:#bdb8ae}
.plan .flag{position:absolute;top:-13px;right:22px}
.bg-dark .plan{background:var(--panel);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.bg-dark .plan .for,.bg-dark .plan .note,.bg-dark .plan .price small{color:var(--muted)}
@media (max-width:980px){ .plans{grid-template-columns:1fr;max-width:560px} .plan.hot{transform:none} }

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto;padding:0 var(--gut)}
.faq details{border-bottom:1px solid var(--paper-line);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;
  padding:18px 0;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.6vw,20px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  background:var(--k,var(--orange));color:#111;font-size:22px;font-weight:700;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:var(--ink-2);font-size:16.5px;max-width:70ch}
.bg-dark .faq details{border-color:var(--line)}
.bg-dark .faq details p{color:var(--muted)}

/* ---------- a full-width call to action ---------- */
.band-cta{position:relative;overflow:hidden;text-align:center;padding:clamp(72px,12vh,130px) var(--gut);
  background:var(--k,var(--orange));color:#111}
.band-cta h2{font-weight:800;font-size:clamp(38px,6vw,84px);line-height:.98;letter-spacing:-.045em;margin:0 auto 18px;max-width:16ch}
.band-cta p{font-size:clamp(17px,1.6vw,21px);max-width:46ch;margin:0 auto 28px;color:#1d1b18}
.band-cta .btn{--accent:#111;--accent-ink:var(--cream)}
.band-cta .bars{position:absolute;inset:auto 0 0 0;height:46%;display:flex;gap:10px;align-items:flex-end;justify-content:center;opacity:.14;pointer-events:none}
.band-cta .bars i{flex:1;max-width:46px;background:#111;border-radius:6px 6px 0 0}
.band-cta > *:not(.bars){position:relative}

/* ---------- photo strip ---------- */
.strip{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:6px;margin:0 0 6px}
.strip img{width:100%;height:clamp(240px,34vw,460px);object-fit:cover}
@media (max-width:760px){ .strip{grid-template-columns:1fr 1fr} .strip img:first-child{grid-column:1/-1} }

/* ---------- forms ---------- */
.cform{max-width:760px;margin:0 auto;padding:0 var(--gut);display:grid;gap:14px}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.cform input,.cform select,.cform textarea{width:100%;background:#fff;border:2px solid rgba(0,0,0,.12);border-radius:12px;
  padding:13px 14px;color:var(--ink);font:inherit;font-size:16px}
.cform textarea{min-height:120px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--orange)}
.cform .opts{display:flex;flex-wrap:wrap;gap:8px}
.cform .opts label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:10px 14px;border-radius:999px;background:#fff;
  border:2px solid rgba(0,0,0,.12);color:var(--ink);font-weight:600}
.cform .opts input{width:auto;accent-color:var(--orange)}
.cform .opts label:has(input:checked){border-color:var(--orange);background:#fff2ea}
.cform .done{display:none;padding:22px;border-radius:16px;background:var(--lime);color:#111;font-weight:600}
.cform.sent .done{display:block}
.cform.sent .fields{display:none}
.cform .fields{display:grid;gap:14px}
@media (max-width:600px){ .cform .row{grid-template-columns:1fr} }

/* ---------- the large foot ---------- */
.sfoot{background:#08080a;border-top:1px solid var(--line);padding:clamp(48px,8vh,80px) var(--gut) 36px;font-size:14.5px;color:var(--muted)}
.sfoot .cols{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px}
.sfoot h4{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin:0 0 14px}
.sfoot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sfoot a{color:var(--muted);text-decoration:none}
.sfoot a:hover{color:#fff}
.sfoot .sf-brand img{height:64px;width:auto;margin:0 0 16px}
.sfoot .sf-brand p{margin:0 0 6px;max-width:32ch;line-height:1.55}
.sfoot .social{display:flex;gap:14px;margin-top:16px}
.sfoot .social a{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.sfoot .social a:hover{background:var(--orange);color:#111}
.sfoot .social svg{width:18px;height:18px;fill:currentColor}
.sfoot .base{max-width:1200px;margin:40px auto 0;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13px;color:var(--dim)}
.sfoot .base span:last-child{margin-left:auto}
@media (max-width:900px){ .sfoot .cols{grid-template-columns:1fr 1fr} .sfoot .sf-brand{grid-column:1/-1} }

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in-view{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .eq i{animation:none;transform:scaleY(.8)}
  .panel > img,.pair a > img{transition:none}
}
.center{text-align:center}
.mt{margin-top:clamp(28px,4vh,44px)}
.sp{height:clamp(56px,9vh,110px)}
.cform .lbl{font-size:14px;font-weight:600;color:var(--ink-2)}

/* the call-in schedule when it sits on paper */
.paper .slot{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 14px 34px -26px rgba(0,0,0,.4)}
.paper .slot small{color:var(--ink-2)}
.paper .slot .day{color:#111;background:var(--k);padding:6px 10px;border-radius:10px;text-align:center}
@media (max-width:620px){ .paper .slot .day{justify-self:start} }
@media (max-width:600px){ .split-img::after{right:-8px;bottom:-8px} }

/* the sign-in link in the site bar */
.gnav .signin{margin-left:auto;color:#c9c5bd;text-decoration:none;font-weight:600;white-space:nowrap}
.gnav .signin:hover{color:#fff}
.gnav .signin + .cta{margin-left:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}