/* ============================================================
   Follow the Dopamine — Website
   site.css  ·  shared tokens + components
   ============================================================ */

/* ---------- Fonts (GT Planar, self-hosted) ---------- */
@font-face { font-family:'GT Planar'; src:url('fonts/GT-Planar-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'GT Planar'; src:url('fonts/GT-Planar-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'GT Planar'; src:url('fonts/GT-Planar-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'GT Planar'; src:url('fonts/GT-Planar-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'GT Planar'; src:url('fonts/GT-Planar-Black.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'GT Planar'; src:url('fonts/GT-Planar-Italic-Regular.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'GT Planar'; src:url('fonts/GT-Planar-Italic-Medium.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --accent:#ff38f3;
  --accent-rgb:255,56,243;

  --bg:#000000;
  --ink:#08080a;
  --surface:#0c0c0e;
  --card:#121214;
  --card-2:#161618;

  --fg:#ffffff;
  --fg-2:rgba(255,255,255,.62);
  --fg-3:rgba(255,255,255,.40);
  --fg-4:rgba(255,255,255,.22);

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);

  --font:'GT Planar','Helvetica Neue',Arial,sans-serif;

  --container:1320px;
  --gut:40px;

  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --r-xl:28px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.tone-ink{ --bg:var(--ink); }
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:#000}

/* film grain (toggleable) */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  transition:opacity .4s ease;}
body.grain-on .grain{opacity:.5}

/* ---------- Layout ---------- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gut)}
.section{padding:120px 0}
.section.tight{padding:84px 0}
.hr{height:1px;background:var(--line);border:0;width:100%}

/* ---------- Type ---------- */
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg-3);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow .idx{color:var(--accent)}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--accent);border-radius:50%;
  box-shadow:0 0 0 0 rgba(var(--accent-rgb),.0)}
body.glow-on .eyebrow::before{box-shadow:0 0 12px 1px rgba(var(--accent-rgb),.9)}

.display{
  font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.9;
  font-size:clamp(56px,9vw,150px);
}
.h1{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.94;
  font-size:clamp(40px,5.5vw,84px)}
.h2{font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:1;
  font-size:clamp(30px,3.6vw,54px)}
.h3{font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;
  font-size:clamp(20px,2vw,28px)}
.lead{font-weight:300;font-size:clamp(18px,1.7vw,23px);line-height:1.5;color:var(--fg-2);max-width:42ch}
.lead em{font-style:italic;color:var(--fg);font-weight:400}
.body{font-weight:400;font-size:16px;line-height:1.65;color:var(--fg-2)}
.muted{color:var(--fg-3)}
.mono{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.accent{color:var(--accent)}

/* outline hero treatment */
body.hero-outline .display.fx{
  color:transparent;-webkit-text-stroke:2px var(--fg);
}
.display .word-accent{color:var(--accent)}
body.hero-outline .display .word-accent{
  color:transparent;-webkit-text-stroke:2px var(--accent);
}
body.glow-on .display .word-accent{text-shadow:0 0 40px rgba(var(--accent-rgb),.45)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.74);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--line-2)}
.nav-in{max-width:var(--container);margin:0 auto;padding:0 var(--gut);
  height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{height:32px;width:auto;display:block;object-fit:contain}
.footer .brand-mark{height:38px;margin-bottom:18px}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:rgba(255,255,255,.85);padding:10px 13px;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--fg);background:rgba(255,255,255,.06)}

/* ----- dropdown menus (Artists / Services) ----- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item .nav-top{display:inline-flex;align-items:center;gap:7px}
.nav-caret{font-size:9px;line-height:1;opacity:.55;transition:transform .2s var(--ease),opacity .2s}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg);opacity:1}
.nav-top.parent-active{color:var(--fg)}
.nav-menu{position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(8px);min-width:252px;
  background:rgba(12,12,14,.98);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--line-2);border-radius:16px;padding:8px;
  display:flex;flex-direction:column;gap:1px;
  box-shadow:0 26px 64px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:60}
.nav-item:hover .nav-menu,.nav-item:focus-within .nav-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:16px}
.nav-links .nav-menu a{display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--fg-2);padding:11px 14px;border-radius:10px;white-space:nowrap;
  transition:background .18s,color .18s}
.nav-links .nav-menu a:hover{background:rgba(255,255,255,.07);color:var(--fg)}
.nav-links .nav-menu a.active{color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.nav-menu .role{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);transition:color .18s}
.nav-menu a:hover .role{color:var(--fg-2)}
.nav-links .nav-menu a.nav-menu-head{margin-bottom:5px;padding-bottom:13px;
  border-bottom:1px solid var(--line);border-radius:10px 10px 0 0;
  color:var(--fg);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.nav-menu-head .ar{color:var(--accent);transition:transform .2s var(--ease)}
.nav-menu-head:hover .ar{transform:translateX(3px)}
.nav-links a.nav-bh{padding:4px 8px}
.nav-links a.nav-bh img{height:48px;width:auto;display:block;opacity:.9;transition:opacity .2s,transform .2s var(--ease)}
.nav-links a.nav-bh:hover img{opacity:1;transform:translateY(-1px)}
.nav-links a.active{color:var(--fg)}
.nav-links a.active::after{content:"";display:block;height:2px;margin-top:5px;background:var(--accent);border-radius:2px}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#000;
  font-weight:700;font-size:14.5px;letter-spacing:.03em;text-transform:uppercase;
  padding:12px 20px;border-radius:999px;transition:transform .15s var(--ease),box-shadow .25s}
.nav-cta:hover{transform:translateY(-1px)}
body.glow-on .nav-cta:hover{box-shadow:0 6px 28px rgba(var(--accent-rgb),.5)}
.nav-burger{display:none;background:none;border:0;color:#fff;width:40px;height:40px;cursor:pointer}
.nav-burger span{display:block;width:22px;height:2px;background:#fff;margin:4px auto;transition:.25s}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;padding:15px 26px;border-radius:999px;
  cursor:pointer;border:1px solid transparent;transition:transform .15s var(--ease),background .2s,color .2s,box-shadow .25s}
.btn-primary{background:var(--accent);color:#000}
.btn-primary:hover{transform:translateY(-2px)}
body.glow-on .btn-primary:hover{box-shadow:0 8px 34px rgba(var(--accent-rgb),.5)}
.btn-ghost{background:transparent;color:#fff;border-color:var(--line-2)}
.btn-ghost:hover{border-color:#fff;transform:translateY(-2px)}
.btn .ar{transition:transform .2s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;display:flex;white-space:nowrap;user-select:none}
.marquee-track{display:flex;gap:0;align-items:center;animation:scroll-x 32s linear infinite;flex-shrink:0}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .item{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(28px,4vw,52px);
  padding:0 28px;display:inline-flex;align-items:center;gap:28px;color:var(--fg)}
.marquee .item::after{content:"";width:13px;height:13px;border-radius:50%;background:var(--accent);flex-shrink:0}
.marquee .item.o{color:transparent;-webkit-text-stroke:1.5px var(--fg-3)}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ---------- Image slot defaults ---------- */
image-slot{--is-bg:var(--card);background:var(--card);border:1px solid var(--line);display:block;
  position:relative;overflow:hidden}
.media{position:relative;overflow:hidden;border-radius:var(--r-md)}
.media image-slot{width:100%;height:100%;border-radius:inherit;border:1px solid var(--line)}
.media .tagline{position:absolute;left:14px;bottom:12px;z-index:2;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .25s,transform .25s var(--ease)}
.card:hover{border-color:var(--line-2)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:84px 0 36px;background:var(--bg)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:48px}
.footer h4{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);margin-bottom:18px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer ul a{font-size:14px;color:var(--fg-2);transition:color .2s}
.footer ul a:hover{color:var(--accent)}
.footer .sub{display:flex;gap:8px;margin-top:14px}
.footer .sub input{flex:1;background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:13px 18px;color:#fff;font-family:inherit;font-size:14px;outline:none;transition:border-color .2s}
.footer .sub input:focus{border-color:var(--accent)}
.footer .sub button{background:var(--accent);color:#000;border:0;border-radius:999px;padding:0 20px;
  font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.footer-word{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.82;
  font-size:clamp(60px,15vw,230px);color:transparent;-webkit-text-stroke:1.5px var(--line-2);
  margin-top:72px;white-space:nowrap}
.footer-base{display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-top:36px;padding-top:24px;border-top:1px solid var(--line);
  font-size:12px;color:var(--fg-3);flex-wrap:wrap}
.footer-base .dot{display:inline-flex;align-items:center;gap:8px}
.footer-base .dot b{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}

/* ---------- Inline edit affordance ---------- */
[data-k]{outline:none;transition:box-shadow .15s,background .15s}
body.editing [data-k]:hover{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.4);border-radius:3px}
[data-k]:focus{box-shadow:0 0 0 1px var(--accent);border-radius:3px;background:rgba(var(--accent-rgb),.05)}
.edit-hint{position:fixed;left:16px;bottom:16px;z-index:55;display:flex;align-items:center;gap:9px;
  background:rgba(18,18,20,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line-2);border-radius:999px;padding:9px 15px 9px 12px;
  font-size:12px;color:var(--fg-2);cursor:pointer;transition:border-color .2s,color .2s}
.edit-hint:hover{border-color:var(--accent);color:#fff}
.edit-hint b{width:8px;height:8px;border-radius:50%;background:var(--fg-4);transition:background .2s}
body.editing .edit-hint b{background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.8)}

/* ---------- Scroll reveal (only engaged when the timeline actually advances) ---------- */
html.anim-ok [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.anim-ok [data-reveal].in{opacity:1;transform:none}
html.anim-ok [data-reveal][data-reveal="2"]{transition-delay:.08s}
html.anim-ok [data-reveal][data-reveal="3"]{transition-delay:.16s}
@media(prefers-reduced-motion:reduce){html.anim-ok [data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------- Utility ---------- */
.tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 13px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2)}
.tag.solid{background:var(--accent);color:#000;border-color:transparent}
.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column}
.grid{display:grid}

/* ---------- Artist detail page ---------- */
.ap-back{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-top:46px;transition:color .2s}
.ap-back .ar{transition:transform .2s var(--ease)}
.ap-back:hover{color:var(--fg)}
.ap-back:hover .ar{transform:translateX(-4px)}

.ap-hero{padding:30px 0 0}
.ap-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;margin-top:28px}
.ap-portrait .media{aspect-ratio:4/5;border-radius:var(--r-lg)}
.ap-eyebrow{display:flex;align-items:center;gap:14px}
.ap-name{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(52px,7vw,108px);margin:20px 0 0}
.ap-genre{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);margin-top:22px}
.ap-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.ap-bio{font-weight:300;font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--fg-2);
  max-width:40ch;margin-top:24px}
.ap-bio em{font-style:italic;color:var(--fg);font-weight:400}
.ap-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.ap-listen{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.ap-listen a{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);border:1px solid var(--line-2);
  padding:10px 16px;border-radius:999px;transition:.2s}
.ap-listen a:hover{border-color:var(--accent);color:var(--fg)}

/* details + about */
.ap-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start}
.ap-about p{font-weight:300;font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:var(--fg-2);
  max-width:54ch}
.ap-about p+p{margin-top:20px}
.ap-facts{list-style:none;border-top:1px solid var(--line)}
.ap-facts li{display:flex;justify-content:space-between;gap:18px;padding:15px 0;
  border-bottom:1px solid var(--line);font-size:14px;color:var(--fg)}
.ap-facts li span:first-child{color:var(--fg-3);text-transform:uppercase;letter-spacing:.12em;
  font-size:11px;font-weight:700;align-self:center}

/* shows */
.ap-shows{list-style:none;border-top:1px solid var(--line)}
.ap-shows li{display:grid;grid-template-columns:130px 1fr auto;gap:24px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line)}
.ap-shows .date{font-weight:900;font-size:15px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ap-shows .venue{font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:17px}
.ap-shows .city{font-size:12px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.12em;margin-top:4px}
.ap-shows .sold{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.ap-shows a.tk{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#000;background:var(--accent);padding:9px 16px;border-radius:999px;transition:transform .15s var(--ease)}
.ap-shows a.tk:hover{transform:translateY(-2px)}

/* more from roster */
.ap-more{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ap-more .art .media{aspect-ratio:3/4;border-radius:var(--r-md)}
.ap-more .art{transition:transform .3s var(--ease)}
.ap-more .art:hover{transform:translateY(-4px)}
.ap-more .nm{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;gap:10px}
.ap-more .nm h4{font-weight:900;text-transform:uppercase;font-size:17px;letter-spacing:-.01em}
.ap-more .nm span{font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}

/* ---------- Listen / embeds (reusable, hide-if-empty) ---------- */
.ap-listen-sec{margin-top:8px}
.embed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:26px}
/* responsive embed wrapper (per brief spec) */
.embed-wrapper{width:100%;max-width:100%;overflow:hidden;border-radius:16px;margin:24px 0;background:#000}
.embed-wrapper iframe{width:100%;max-width:100%;border:0;display:block}
.embed-wrapper.sc iframe{height:166px}
.embed-wrapper.sp iframe{height:352px}
.embed-wrapper.yt{aspect-ratio:16/9;margin:0}
.embed-wrapper.yt iframe{width:100%;height:100%}
.embed-grid .embed-wrapper{margin:0}

/* play-card fallback — used when only a URL (no embed code) is present */
.play-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:166px;
  padding:22px 22px 20px;border:1px solid var(--line-2);border-radius:16px;background:var(--card);
  transition:border-color .2s,transform .25s var(--ease)}
.play-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.play-card .pc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.play-card .pc-plat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.play-card .pc-go{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);display:flex;
  align-items:center;justify-content:center;color:var(--fg-2);transition:.2s}
.play-card:hover .pc-go{background:var(--accent);color:#000;border-color:transparent}
.play-card .pc-title{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:19px;line-height:1.05}
.play-card .pc-sub{font-size:12.5px;color:var(--fg-3);margin-top:5px}
/* waveform motif */
.pc-wave{display:flex;align-items:flex-end;gap:3px;height:30px}
.pc-wave i{flex:1;background:var(--accent);border-radius:2px;opacity:.5;animation:pcwave 1.4s ease-in-out infinite}
.play-card:hover .pc-wave i{opacity:.9}
@keyframes pcwave{0%,100%{height:22%}50%{height:100%}}

/* press kit + booking note */
.ap-presskit{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px}
.book-note{display:inline-flex;align-items:center;gap:9px;background:rgba(var(--accent-rgb),.1);
  border:1px solid var(--accent);border-radius:999px;padding:9px 16px;font-size:12.5px;color:#fff;margin-bottom:18px}
.book-note b{font-weight:700}

@media(max-width:980px){
  :root{--gut:24px}
  .section{padding:84px 0}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
  .ap-grid{grid-template-columns:1fr;gap:32px}
  .ap-portrait{order:-1}
  .ap-portrait .media{aspect-ratio:auto;height:clamp(300px,54vw,440px)}
  .ap-cols{grid-template-columns:1fr;gap:40px}
  .ap-more{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .ap-shows li{grid-template-columns:1fr auto;gap:12px}
  .ap-shows .date{grid-column:1/-1;font-size:13px}
  .ap-more{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .nav-links{position:fixed;inset:72px 0 auto 0;background:rgba(8,8,10,.97);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 16px 20px;border-bottom:1px solid var(--line);transform:translateY(-12px);
    opacity:0;pointer-events:none;transition:.25s var(--ease)}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:15px 8px;font-size:15px;border-bottom:1px solid var(--line)}
  .nav-links a.active::after{display:none}
  .nav-links .nav-cta{margin-top:12px;justify-content:center}
  .nav-burger{display:block}
  /* dropdowns flatten into the stacked mobile sheet */
  .nav-item{flex-direction:column;align-items:stretch}
  .nav-caret{display:none}
  .nav-menu{position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;
    min-width:0;background:none;border:0;box-shadow:none;border-radius:0;padding:0;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-menu::before{display:none}
  .nav-links .nav-menu a{padding:13px 8px 13px 22px;border-bottom:1px solid var(--line);
    font-size:14px;border-radius:0}
  .nav-links .nav-menu a.nav-menu-head{padding-left:8px;margin-bottom:0;border-radius:0;
    color:var(--fg-3);font-size:11px}
  .footer-top{grid-template-columns:1fr;gap:30px}
}