:root{
  --bg:#070708;

  --panel: rgba(0,0,0,.62);
  --panel2: rgba(0,0,0,.40);
  --glass: rgba(0,0,0,.52);
  --line: rgba(255,255,255,.10);

  --text:#F6F6F7;
  --muted: rgba(246,246,247,.72);

  --red:#E10600;
  --red2:#FF2A23;

  --radius:22px;
  --radius2:28px;

  --shadow: 0 26px 90px rgba(0,0,0,.60);
  --shadowSoft: 0 18px 70px rgba(0,0,0,.35);

  --fontH: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fontB: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html, body{ overflow-x:hidden; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fontB);
  cursor: url("../img/cursor-tattoo.png") 6 2, auto;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{width:min(1180px, 92vw); margin:0 auto}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
[hidden]{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Focus ring */
:where(a,button,input,select,textarea,.btn,.icon-btn,.icon-btn-footer,.scene-btn,.drawer-close,.x):focus-visible{
  outline:none;
  border-color: rgba(225,6,0,.45);
  box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 0 0 6px rgba(225,6,0,.20);
}

/* =========================
   LOADER
========================= */
.loader{position:fixed; inset:0; display:grid; place-items:center; background:#050506; z-index:9999}
.loader-inner{
  width:min(560px, 92vw);
  background: rgba(0,0,0,.70);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:20px;
  text-align:center;
}
.loader-icon{width:64px; height:64px; margin:0 auto 12px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.85))}
.loader-title{
  font-family: var(--fontH);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:18px;
}
.loader-sub{color:var(--muted); margin-top:8px; font-size:14px}
.loader-line{
  margin-top:14px; height:2px; background: rgba(255,255,255,.12);
  position:relative; overflow:hidden; border-radius:999px;
}
.loader-line span{
  position:absolute; top:0; left:-30%;
  height:100%; width:30%;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: sweep 1.05s ease-in-out infinite;
}
@keyframes sweep{100%{transform:translateX(460%)}}
.loader.hide{opacity:0; pointer-events:none; transition:opacity .45s ease}

/* =========================
   NAV
========================= */
.nav{
  position:sticky; top:0; z-index:9999;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0; position:relative}
.nav-brand{display:flex; align-items:center; gap:10px}
.nav-icon{width:38px; height:38px; object-fit:contain}
.nav-wordmark{
  font-family: var(--fontH);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:16px;
}
.nav-links{display:flex; align-items:center; gap:16px}
.nav-links a{
  color:rgba(246,246,247,.88);
  font-size:14px;
  padding:10px 10px;
  border-radius:14px;
  transition: background .15s ease, transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.nav-links a:hover{background: rgba(255,255,255,.07); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;}
.nav-links .active{background: rgba(255,255,255,.07)}
.nav-cta{ border:1px solid rgba(255,255,255,.14); background: rgba(225,6,0,.14); }
.nav-pill{ border:1px solid rgba(255,255,255,.14); background: rgba(225,6,0,.10); }

.nav-toggle{
  display:none; width:46px; height:46px;
  border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.nav-toggle span{
  display:block; width:20px; height:2px; margin:4px auto; border-radius:999px;
  background: rgba(246,246,247,.85);
}

/* Mobile nav dropdown */
@media (max-width: 760px){
  .nav-toggle{display:inline-block}
  .nav-links{
    position:absolute;
    top:64px;
    left:4vw; right:4vw;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:14px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.86);
    backdrop-filter: blur(10px);
    max-height: calc(100svh - 90px);
    overflow:auto;
    z-index:10000;
  }
  .nav-links.show{display:flex}
  .nav-links a{width:100%; text-align:left}
}

/* =========================
   HERO (Index)
========================= */
.hero{
  position:relative;
  overflow:hidden;
  min-height:72vh;
  display:grid;
  place-items:center;
  padding:56px 0;
}
.hero-bg{position:absolute; inset:0}
.bg-left,.bg-center,.bg-right{position:absolute; inset:0; background-size:cover; background-position:center}
.bg-left{background-image:url("../img/lobby-left.jpg"); opacity:.55; transform:translateX(-2.5%)}
.bg-center{background-image:url("../img/lobby-center.jpg"); opacity:.70}
.bg-right{background-image:url("../img/lobby-right.jpg"); opacity:.52; transform:translateX(2.5%)}

.vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 560px at 50% 40%, rgba(0,0,0,.10), rgba(0,0,0,.82)),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.86));
}
.grain{
  position:absolute; inset:0; opacity:.18; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  pointer-events:none;
}
.hero-bg, .vignette, .grain{ pointer-events:none !important; }

.hero-inner{position:relative; width:100%; display:grid; place-items:center}
.hero-stack{
  width:min(920px, 92vw);
  margin:0 auto;
  padding: 20px 16px 20px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.36));
  box-shadow: var(--shadow);
  position:relative;
}
.hero-logo{width:min(560px, 92vw); margin:0 auto; filter: drop-shadow(0 28px 80px rgba(0,0,0,.78))}
.hero-sub{
  margin:14px 0 0;
  color: rgba(246,246,247,.82);
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  line-height:1.45;
}
.dot{width:5px; height:5px; border-radius:999px; background: rgba(255,255,255,.35)}
.hero-actions{margin-top:16px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap}
.hero-social{margin-top:16px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.hero-strip{
  margin-top:16px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color: rgba(246,246,247,.74);
  font-size:13px;
}
.sep{width:5px; height:5px; border-radius:999px; background: rgba(246,246,247,.22)}


@media (max-width: 760px){
  .hero{ min-height:76vh; padding:18px 0 28px; }
  .hero-stack{ width:min(560px, 94vw); border-radius: var(--radius); padding: 18px 14px; }
  .hero-logo{ width:min(520px, 86vw); }
  .bg-left,.bg-right{ transform:none; opacity:.25; }
  .bg-center{ opacity:.80; }
  .hero-actions{ width:100%; gap:10px; }
  .hero-actions .btn{ width:100%; max-width:420px; }
}

/* =========================
   ICON BUTTONS
========================= */
.icon-btn{
  width:46px; height:46px;
  border-radius:999px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.45);
  color: rgba(246,246,247,.88);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.icon-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(225,6,0,.40);
  background: rgba(225,6,0,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(225,6,0,.14) inset;
}
.icon{width:20px; height:20px; display:grid; place-items:center}
.icon svg{width:22px; height:22px; display:block}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  position:relative;
  overflow:hidden;
  font-size:15px;
  line-height:1.1;
  min-height:44px;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08); box-shadow: 0 18px 60px rgba(0,0,0,.28)}
.btn:active{transform: translateY(0)}
.btn-red{
  background: linear-gradient(135deg, var(--red), var(--red2));
  border-color: rgba(255,255,255,.14);
  color:#0b0b0c;
}
.btn-ghost{background: rgba(0,0,0,.40)}
.btn-sm{padding:10px 12px; font-size:14px}

.btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 35%, transparent 70%);
  transform: translateX(-120%);
  opacity:0;
  pointer-events:none;
}
@media (hover:hover){
  .btn:hover::after{ transform: translateX(120%); opacity:1; transition: transform .55s ease, opacity .25s ease; }
}
.btn *{ font-size:inherit; }

/* =========================
   SECTIONS / HEADERS
========================= */
.section{padding:64px 0; background: #070708}
.section.compact{padding:34px 0}
.section-head.center{text-align:center}
.section-head h2{
  margin:0;
  font-family: var(--fontH);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.section-head p{
  margin:10px 0 36px;
  color: var(--muted);
  line-height:1.6;
}
@media (max-width:760px){
  .section{padding:48px 0}
  .section.compact{padding:26px 0}
  .section-head p{ margin-bottom:24px; }
}

/* =========================
   CTA BAR
========================= */
.cta{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  box-shadow: var(--shadowSoft);
  padding: 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  text-align:left;
}
.cta-copy h2{
  margin:0;
  font-family: var(--fontH);
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:18px;
}
.cta-copy p{margin:6px 0 0; color: var(--muted)}
@media (max-width:760px){
  .cta{justify-content:center; text-align:center}
}

/* =========================
   CARD BASE (hover polish)
========================= */
:where(.artist-card,.crew-card,.mini-card,.news-card,.info-card,.review-card,.book-card,.map-card,.ac-card,.portfolio-panel,.artist-bio-card,.artist-sidephoto,.modal-panel){
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  :where(.artist-card,.crew-card,.mini-card,.news-card,.info-card,.review-card,.book-card,.map-card,.ac-card,.portfolio-panel,.artist-bio-card,.artist-sidephoto):hover{
    transform: translateY(-2px);
    border-color: rgba(225,6,0,.22);
    box-shadow: var(--shadowSoft), 0 0 0 1px rgba(225,6,0,.10) inset;
  }
}

/* =========================
   ARTISTS GRID (home)
========================= */
.artist-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.artist-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  overflow:hidden;
  box-shadow: var(--shadowSoft);
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
.artist-head{
  position:relative;
  height: 220px;
  background: rgba(255,255,255,.05);
}
.artist-head img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: contrast(1.05) saturate(1.02);
}
.artist-head::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.70));
}
.artist-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(225,6,0,.10);
  font-size:12px;
  color: rgba(246,246,247,.84);
  width:fit-content;
}
.artist-name{font-weight:900; letter-spacing:.02em; font-size:16px}
.artist-role{color: rgba(246,246,247,.78); font-size:13px}
.artist-actions{
  margin-top:auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  width:100%;
}
.artist-actions .btn{
  flex: 1 1 0;
  max-width: 260px;
  justify-content:center;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* =========================
   MINI / INFO / NEWS
========================= */
.mini-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.mini-card,.news-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.50);
  overflow:hidden;
  box-shadow: 0 16px 60px rgba(0,0,0,.28);
}
.mini-img{
  height:160px;
  display:grid;
  place-items:center;
  color: rgba(246,246,247,.70);
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.mini-body{padding:14px}
.mini-body h3{margin:0 0 6px}
.mini-body p{margin:0 0 12px; color:var(--muted); line-height:1.55}

.info-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.info-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.50);
  padding:16px;
  box-shadow: 0 16px 60px rgba(0,0,0,.28);
}
.info-card h3{margin:0 0 10px}
.info-card ul{margin:0; padding-left:18px; color:rgba(246,246,247,.80)}
.info-card li{margin:8px 0; line-height:1.55}

.news-card{padding:16px}
.news-top{display:flex; gap:8px; flex-wrap:wrap}
.tag{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.40);
  font-size:12px;
  color: rgba(246,246,247,.84);
}
.tag-red{background: rgba(225,6,0,.18); border-color: rgba(255,255,255,.12)}
.news-card h3{margin:12px 0 8px}
.news-card p{margin:0 0 12px; color:var(--muted); line-height:1.6}

/* =========================
   BOOK / REVIEWS / MAP
========================= */
.book-card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.58);
  box-shadow: var(--shadow);
  padding:18px;
}
.center-actions{margin-top:14px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap}

.reviews-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.review-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.50);
  padding:16px;
  box-shadow: 0 16px 60px rgba(0,0,0,.28);
}
.review-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.review-badge{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(225,6,0,.12);
  color: rgba(246,246,247,.86);
  font-size:12px;
}
.review-stars{letter-spacing:.08em; color: rgba(246,246,247,.85); font-weight:900}
.review-text{margin:0; color: rgba(246,246,247,.78); line-height:1.65}
.review-who{margin-top:12px; color: rgba(246,246,247,.70); font-size:13px}

.map-card{
  margin-top:22px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background: rgba(0,0,0,.50);
  box-shadow: 0 16px 60px rgba(0,0,0,.28);
}
.map-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.map-title{font-weight:900}
.map-sub{color:var(--muted); margin-top:6px}
.map-embed{height:360px}
.map-embed iframe{width:100%; height:100%; border:0}

/* =========================
   MODALS / FORMS 
========================= */
.modal{position:fixed; inset:0; z-index:9998; display:none}
.modal.show{display:flex; align-items:center; justify-content:center}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.82); backdrop-filter: blur(4px)}
.modal-panel{
  position:relative;
  width:min(760px, 92vw);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.92);
  box-shadow: var(--shadow);
  padding:18px;
  z-index:1;
}
.modal-panel::-webkit-scrollbar{width:0;height:0}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px}
.modal-kicker{
  font-size:12px;
  color: rgba(246,246,247,.62);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.modal-panel h3{
  margin:6px 0 0;
  font-family: var(--fontH);
  letter-spacing:.10em;
  text-transform:uppercase;
}
.modal-copy{margin:10px 0 0; color: var(--muted); line-height:1.6}

.x{
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.x:hover{ background: rgba(255,255,255,.09); border-color: rgba(225,6,0,.30); transform: translateY(-1px); }

.form{margin-top:12px}
label{display:block; font-size:13px; color: rgba(246,246,247,.80)}
input,select,textarea{
  width:100%;
  margin-top:8px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(225,6,0,.40);
  box-shadow: 0 0 0 4px rgba(225,6,0,.14);
}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin:12px 0}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.note{margin-top:10px; color: rgba(246,246,247,.72); font-size:13px}

.modal select,
.modal option,
.modal optgroup{
  background-color:#0b0b0c;
  color:#f6f6f7;
}
.modal optgroup{
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:11px;
  color: rgba(255,255,255,.65);
}

@media (max-width:760px){
  .row{grid-template-columns:1fr}
  .modal-panel{ max-height: calc(100vh - 16px); padding:16px; }
}

/* =========================
   REVEAL
========================= */
.reveal,[data-reveal]{opacity:1; transform:none; transition:none}
.js .reveal,
.js [data-reveal]{
  opacity:0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
}
.js .reveal.is-in,
.js [data-reveal].is-in{opacity:1; transform:none}

/* =========================
   FOOTER
========================= */
.footer{
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 340px at 20% 0%, rgba(225,6,0,.10), transparent 55%),
    radial-gradient(900px 340px at 80% 0%, rgba(255,255,255,.05), transparent 55%),
    rgba(0,0,0,.78);
  padding: 44px 0 18px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.footer-col{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.40);
  border-radius: 24px;
  padding: 16px;
  box-shadow: var(--shadowSoft);
  overflow:hidden;
}
.footer-brand{display:flex; align-items:center; gap: 12px}
.footer-icon{
  width: 46px; height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.80));
}
.footer-name{font-family: var(--fontH); letter-spacing: .10em; text-transform: uppercase}
.footer-sub{margin-top: 6px; color: var(--muted); font-size: 13px}
.footer-title{
  font-family: var(--fontH);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 10px;
}
.footer-social{margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap}
.icon-btn-footer{
  width: 44px; height: 44px;
  border-radius: 999px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.45);
  color: rgba(246,246,247,.88);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.icon-btn-footer:hover{
  transform: translateY(-1px);
  border-color: rgba(225,6,0,.40);
  background: rgba(225,6,0,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(225,6,0,.14) inset;
}
.footer-note{margin-top: 12px; color: rgba(246,246,247,.78); font-size: 13px}

.footer-link{
  display:block;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin-top: 10px;
  color: rgba(246,246,247,.88);
  font-weight: 800;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.footer-link:hover{
  border-color: rgba(225,6,0,.35);
  background: rgba(225,6,0,.08);
  transform: translateY(-1px);
}
.footer-mini{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(246,246,247,.82);
}
.footer-mini-label{color: var(--muted); font-size: 12px; margin-bottom: 6px}
.hours{display:flex; flex-direction:column; gap: 10px}
.hours-row{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(246,246,247,.86);
  font-size: 13px;
  flex-wrap:wrap;
}
.closed{color: rgba(255,255,255,.70); font-weight: 900}

.footer-bottom{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  text-align:center;
  color: rgba(246,246,247,.62);
  font-size: 12px;
}
.footer-bottom .sep{
  width: 5px; height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  align-self:center;
}
.footer-bottom a{color: rgba(246,246,247,.78)}
.footer-bottom a:hover{color: rgba(255,255,255,.95); text-decoration: underline}
.footer-small{color: rgba(246,246,247,.70)}
.footer-note,.footer-mini,.footer-col{ overflow-wrap:anywhere; word-break:break-word; }

@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr}
}

/* =========================
   PAGE HERO 
========================= */
.page-hero{
  position:relative;
  padding: 56px 0 42px;
  min-height: 52vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.page-hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 460px at 50% 30%, rgba(225,6,0,.14), transparent 55%),
    radial-gradient(900px 460px at 20% 0%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.92));
}
.page-hero-inner{position:relative; text-align:center; display:grid; place-items:center}
.page-hero-card{
  width:min(920px, 92vw);
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.58);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  margin-inline:auto;
}
.kicker{
  font-size:12px;
  color: rgba(246,246,247,.62);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.page-hero-card h1{
  margin:10px 0 0;
  font-family: var(--fontH);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.page-hero-card p{margin:10px auto 0; color:var(--muted); max-width: 60ch; line-height:1.6}

/* =========================
   CREW GRID (Artists page)
========================= */
.crew-grid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
  width:100%;
  margin-inline:auto;
}
.crew-card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  box-shadow: var(--shadowSoft);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
.crew-photo{
  height: 240px;
  background: rgba(255,255,255,.04);
  position:relative;
}
.crew-photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: 50% 18%;
  filter: contrast(1.05) saturate(1.02);
}
.crew-photo:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
}
.crew-body{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  text-align:center;
  align-items:center;
}
.crew-name{font-weight: 950; font-size: 16px; letter-spacing:.02em}
.crew-role{color: rgba(246,246,247,.78); font-size: 13px; max-width:36ch; margin-inline:auto; line-height:1.5}
.crew-actions{
  width:100%;
  margin-top:auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}
.crew-actions .btn{ flex:1 1 0; max-width:260px; justify-content:center }

/* =========================
   ARTIST PAGE HERO + ABOUT + PORTFOLIO
========================= */
.artist-hero{
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 56px 0;
  overflow: hidden;
}
.artist-hero-bg{ position:absolute; inset:0; overflow:hidden; }
.artist-hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 560px at 50% 36%, rgba(0,0,0,.10), rgba(0,0,0,.86)),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.92));
  pointer-events:none;
  z-index:1;
}
.artist-hero-content{
  position:relative;
  width:100%;
  z-index:2;
  text-align:center;
  pointer-events:none;
}
.artist-hero-content a,
.artist-hero-content button,
.artist-hero-content input,
.artist-hero-content select,
.artist-hero-content textarea{ pointer-events:auto; }

.artist-hero-center{ width:min(1040px, 92vw); margin:0 auto; }
.artist-hero-name{
  font-family: var(--fontH);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 950;
  font-size: clamp(30px, 4.8vw, 54px);
  line-height: 1.05;
  text-shadow: 0 22px 60px rgba(0,0,0,.70);
}
.artist-hero-role{
  margin-top: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(246,246,247,.82);
  font-size: 12px;
}
.artist-social-handles{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(246,246,247,.78);
}
.artist-social-handles .handle{
  color: rgba(246,246,247,.78);
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.artist-social-handles .handle:hover{
  color: rgba(255,255,255,.92);
  border-bottom-color: rgba(225,6,0,.45);
  transform: translateY(-1px);
}
.artist-social-handles .dot{ opacity:.55; }

.artist-hero-actions{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
}

.pano-hint{
  margin: 14px auto 0;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.42);
  color: rgba(246,246,247,.84);
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 12px;
  box-shadow: 0 16px 60px rgba(0,0,0,.35);
}
.pano-hint .hint-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(225,6,0,.85);
  box-shadow: 0 0 0 6px rgba(225,6,0,.10);
}

.artist-about{ text-align:center; }
.about-split{
  margin-top: 22px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  box-shadow: var(--shadow);
  padding: 16px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: center;
}
.about-photo{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  aspect-ratio: 1 / 1;
}
.about-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.02);
}
.about-copy{ padding-right: 6px; text-align:left; }
.about-name{
  margin: 0;
  font-family: var(--fontH);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.about-role{
  margin-top: 6px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(246,246,247,.72);
  font-size: 12px;
}
.about-text{
  margin: 10px 0 0;
  color: rgba(246,246,247,.76);
  line-height: 1.75;
  max-width: 70ch;
}
.about-social{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.about-portfolio-cta{ margin-top: 18px; display:grid; place-items:center; }

.portfolio-toggle{
  width: min(760px, 100%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(225,6,0,.10);
  color: rgba(246,246,247,.92);
  padding: 16px 18px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.portfolio-toggle:hover{
  transform: translateY(-1px);
  border-color: rgba(225,6,0,.40);
  background: rgba(225,6,0,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.portfolio-toggle .chev{ display:inline-block; transition: transform .18s ease; }
.portfolio-toggle.open .chev{ transform: rotate(180deg); }

.portfolio-drawer{ display:none; }
.portfolio-drawer.open{ display:block; }

.portfolio-panel{
  margin-top: 14px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  box-shadow: var(--shadow);
  padding: 16px;
  position:relative;
  z-index:5;
}
.portfolio-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.portfolio-title{
  font-family: var(--fontH);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 950;
  text-align:center;
  width:100%;
}
.drawer-close{
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.40);
  color: rgba(246,246,247,.86);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.drawer-close:hover{ border-color: rgba(225,6,0,.45); background: rgba(225,6,0,.10); transform: translateY(-1px); }

.portfolio-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.portfolio-grid-15{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.port-item{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 16px 60px rgba(0,0,0,.22);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.port-item:hover{
  transform: translateY(-2px);
  border-color: rgba(225,6,0,.45);
  background: rgba(225,6,0,.08);
}
.port-item img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.02);
}
[data-portfolio]{display:none}
[data-portfolio].open{display:block}
[data-portfolio-panel][hidden]{display:none !important}
[data-portfolio-panel]{display:block}

/* =========================
   COVER-UP BEFORE / AFTER
========================= */
.coverups{ margin-top: 10px; }
.coverups-head{
  padding: 8px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 12px;
  text-align:center;
}
.coverups-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.coverup{
  margin: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  box-shadow: 0 16px 60px rgba(0,0,0,.22);
}
.coverup-pair{ display:grid; grid-template-columns: 1fr 1fr; }
.coverup-img{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.10);
}
.coverup-img:last-child{ border-right: 0; }
.coverup-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.02);
}
.coverup-label{
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(246,246,247,.92);
}

/* =========================
   AFTERCARE (scoped)
========================= */
.aftercare-page .ac-hero{
  position:relative;
  padding: 56px 0 26px;
  overflow:hidden;
}
.aftercare-page .ac-hero::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(70% 70% at 50% 20%, rgba(255,0,80,.12), rgba(0,0,0,.82)),
    radial-gradient(55% 55% at 20% 70%, rgba(255,255,255,.06), transparent),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.75));
}
.aftercare-page .ac-hero .wrap{position:relative; text-align:center}
.aftercare-page .ac-title{
  margin:0;
  font-family: var(--fontH);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 950;
  font-size: clamp(34px, 6.2vw, 64px);
  line-height: 1.06;
  text-shadow: 0 22px 70px rgba(0,0,0,.70);
}
.aftercare-page .ac-underline{
  width: 120px; height: 3px;
  margin: 14px auto 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff2b2b, #ff8a00);
  opacity: .95;
  box-shadow: 0 10px 30px rgba(255, 80, 40, .18);
}
.aftercare-page .ac-sub{
  margin: 0 auto;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15px;
}
.aftercare-page .ac-section{padding: 28px 0}
.aftercare-page .ac-section-title{
  margin: 0 0 16px;
  font-family: var(--fontH);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 18px;
  text-align:center;
}
.aftercare-page .ac-card{
  position: relative;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.36));
  box-shadow: var(--shadowSoft);
  padding: 18px 16px;
  overflow: hidden;
}
.aftercare-page .ac-card::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(255,0,80,.12), transparent 62%),
    radial-gradient(520px 220px at 20% 20%, rgba(255,255,255,.06), transparent 60%);
  opacity: .95;
}
.aftercare-page .ac-card-title{
  margin: 10px 0 8px;
  text-align: center;
  font-family: var(--fontH);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 15px;
}
.aftercare-page .ac-card-text{
  margin: 0;
  text-align: center;
  color: rgba(246,246,247,.78);
  line-height: 1.75;
}
.aftercare-page .ac-card--notice{
  width: min(820px, 92vw);
  margin: 0 auto;
  border-color: rgba(255,255,255,.12);
  background:
    radial-gradient(70% 70% at 50% 20%, rgba(255,0,80,.12), transparent 60%),
    radial-gradient(55% 55% at 20% 70%, rgba(255,255,255,.06), transparent 60%),
    rgba(0,0,0,.55);
}
.aftercare-page .ac-icon{
  width: 52px; height: 52px;
  margin: 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.45);
  color: rgba(246,246,247,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.aftercare-page .ac-icon svg{width:26px; height:26px}
.aftercare-page .ac-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.aftercare-page .ac-pill{
  margin: 14px auto 0;
  width: fit-content;
  display:flex; align-items:center; gap:10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(225,6,0,.12);
  color: rgba(246,246,247,.88);
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
}
.aftercare-page .ac-pill-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--red), var(--red2));
  box-shadow: 0 12px 40px rgba(225,6,0,.25);
}
.aftercare-page .ac-timeline{
  display:grid;
  gap: 14px;
  width: min(820px, 92vw);
  margin: 0 auto;
}
.aftercare-page .ac-card--timeline{padding-top:56px}
.aftercare-page .ac-badge{
  position:absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(225,6,0,.88), rgba(255,42,35,.72));
  color: #0b0b0c;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  box-shadow: var(--shadowSoft);
}
.aftercare-page .ac-cta{
  margin: 18px auto 0;
  width: min(820px, 92vw);
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(70% 70% at 50% 20%, rgba(255,0,80,.12), transparent 60%),
    radial-gradient(55% 55% at 20% 70%, rgba(255,255,255,.06), transparent 60%),
    rgba(0,0,0,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 16px;
  text-align: center;
}
.aftercare-page .ac-cta-title{
  margin:0 0 8px;
  font-family: var(--fontH);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 16px;
}
.aftercare-page .ac-cta-text{
  margin:0 0 12px;
  color: var(--muted);
  line-height: 1.7;
}
.aftercare-page .ac-card-actions{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap:12px;
}
.aftercare-page .ac-card-actions .btn{ width:100%; max-width:420px; }

/* =========================
   360 / PANO (Pannellum)
   - Keeps drag working
   - Keeps page scroll working on mobile (pan-y)
========================= */
#pano, .pano{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:auto;
  touch-action: pan-y; 
}
.pano .pnlm-container{ width:100% !important; height:100% !important; }
.pano .pnlm-ui{ opacity: 0; transition: opacity .15s ease; }
@media (hover:hover){ .pano:hover .pnlm-ui{ opacity: 1; } }
.artist-hero-overlay, .grain, .vignette{ pointer-events:none !important; }


.scene-controls{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 10;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width:auto;
  max-width: calc(100% - 24px);
  pointer-events:auto;
}
.scene-btns{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
.scene-btn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  letter-spacing:.06em;
  text-transform: uppercase;
  font-size: 12px;
  cursor:pointer;
  min-width: 96px;
  text-align:center;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
@media (hover:hover){
  .scene-btn:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); border-color: rgba(225,6,0,.30); }
}
.scene-btn.is-active{
  border-color: rgba(255,42,35,.60);
  box-shadow: 0 0 0 4px rgba(225,6,0,.10);
  background: rgba(225,6,0,.16);
}

.scene-hint{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-align:center;
  color: rgba(246,246,247,.88);
}
.scene-hint small{
  display:block;
  margin-top: 2px;
  color: rgba(246,246,247,.68);
  font-weight: 700;
}


@media (max-width: 760px){
  .scene-controls{
    position: static;
    left:auto;
    bottom:auto;
    transform:none;
    margin: 14px auto 0;
    width: 100%;
    max-width: 520px;
  }
  .scene-btns{
    width: 100%;
    max-width: 420px;
    justify-content: space-between;
    gap: 6px;
    padding: 7px;
  }
  .scene-btn{
    flex: 1 1 0;
    min-width: 0;
    font-size: 11px;
    padding: 9px 10px;
  }
  .scene-hint{ max-width:420px; }
}

/* =========================
   TIP CAROUSEL (Just the Tip)
========================= */
.tip-carousel{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius: 0;
}
.tip-car-track{
  display:flex;
  height:100%;
  width:100%;
  transform: translateX(0%);
  transition: transform .22s ease;
  touch-action: pan-y;
}
.tip-car-track img{
  width:100%;
  height:100%;
  flex: 0 0 100%;
  object-fit: cover;
  user-select:none;
  -webkit-user-drag:none;
  filter: contrast(1.05) brightness(.95);
}
.tip-car-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:42px; height:42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.48);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  font-weight: 900;
  backdrop-filter: blur(8px);
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.tip-car-prev{ left: 10px; }
.tip-car-next{ right: 10px; }
.tip-car-btn:hover{ background: rgba(0,0,0,.62); transform: translateY(-50%) scale(1.02); border-color: rgba(225,6,0,.30); }
.tip-car-dots{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: 10px;
  display:flex;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}
.tip-car-dot{
  width:8px; height:8px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.10);
  cursor:pointer;
}
.tip-car-dot.is-active{ background: rgba(255,255,255,.92); }

/* =========================
   RESPONSIVE GRIDS
========================= */
@media (max-width: 1100px){
  .crew-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portfolio-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portfolio-grid-15{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  .artist-grid{grid-template-columns: repeat(2, 1fr)}
  .mini-grid{grid-template-columns: 1fr}
  .info-grid{grid-template-columns: 1fr}
  .reviews-grid{grid-template-columns: 1fr}
  .map-embed{height:320px}
  .crew-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .portfolio-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-grid-15{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aftercare-page .ac-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverups-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .wrap{ width: min(1180px, 94vw); }
  .artist-grid{grid-template-columns: 1fr}
  .crew-grid{ grid-template-columns: 1fr; gap:14px; }
  .portfolio-grid{ grid-template-columns: 1fr; }
  .portfolio-grid-15{ grid-template-columns: 1fr; }
  .aftercare-page .ac-grid{ grid-template-columns: 1fr; }
  .about-split{ grid-template-columns: 1fr; text-align:center; }
  .about-copy{ text-align:center; padding-right:0; }
  .about-photo{ max-width: 360px; margin: 0 auto; }
  .about-social{ justify-content: center; }
  .coverup-pair{ grid-template-columns: 1fr; }
  .coverup-img{ border-right: 0; border-bottom: 1px solid rgba(255,255,255,.10); }
  .coverup-img:last-child{ border-bottom: 0; }

  /* Keep artist/crew action buttons centered and equal */
  .artist-actions .btn,
  .crew-actions .btn{
    max-width: none;
    font-size: 15px;
    padding: 12px 12px;
  }
}


body.theme-dark{
  background:#070708;
  color:#fff;
  position: relative;
  overflow-x: hidden;
}
body.theme-dark::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 70% at 50% 20%, rgba(255,0,80,.12), rgba(0,0,0,.82)),
    radial-gradient(55% 55% at 20% 70%, rgba(255,255,255,.06), transparent);
}

.hero-stack{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 20px !important; 
}


.scene-controls{
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;

  margin: 10px auto 0 !important;
  z-index: 2 !important;
}


.scene-btns{
  margin: 0 auto !important;
  justify-content: center !important;
}


.drag-hint{
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;

  margin: 8px auto 0 !important;
  text-align: center !important;
  justify-content: center !important;
  max-width: min(520px, 94vw) !important;
}


@media (min-width: 761px){
  .scene-controls{ margin-top: 14px !important; }
}

/* =========================
   MODAL SLOT / PILL RESTORE
========================= */
.modal :is(.slot, .time-slot, .date-slot, .pill, .chip, .bubble, .tag, button){
  
}

.modal :is(.time-slots button, .slots button, .date-slots button, .slot, .time-slot, .date-slot, .chip, .bubble){
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;
  padding: 12px 14px !important;
  border-radius: 999px !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.modal :is(.time-slots, .slots, .date-slots){
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}



.modal input[type="date"],
.modal input[type="time"]{
  min-height: 44px !important;
  border-radius: 999px !important;
}

@media (max-width: 760px){


  .nav-inner{
    position: relative !important;
  }


  #navLinks.show{
    left: 4vw !important;
    right: 4vw !important;
    width: auto !important;

    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }


  #navLinks .nav-cart{
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

.pano,
#pano{
  touch-action: pan-y !important; 
}

.pano.is-scrolllock .pnlm-container,
#pano.is-scrolllock .pnlm-container{
  pointer-events: none !important; 
}

.portfolio-drawer.open,
[data-portfolio].open,
[data-portfolio-panel]:not([hidden]){
  display: block !important;
}


@media (max-width: 760px){
  .portfolio-panel,
  .portfolio-drawer.open,
  [data-portfolio].open{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (hover:none){
  .btn::after{
   
    opacity: 0;
    transform: translateX(-120%);
    transition: transform .55s ease, opacity .25s ease;
  }


  .btn:active::after{
    opacity: 1;
    transform: translateX(120%);
  }


  .btn:active{
    transform: translateY(0) scale(.99);
    box-shadow: 0 18px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(225,6,0,.18) inset;
  }


  .btn-red:active{
    filter: brightness(1.05) saturate(1.05);
  }
}
.btn-red{
  background: linear-gradient(135deg, var(--red), var(--red2)) !important;
}

.btn-red{
  background: linear-gradient(135deg, var(--red), var(--red2)) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #0b0b0c !important;
}
.btn-red:hover,
.btn-red:active{
  background: linear-gradient(135deg, var(--red2), var(--red)) !important;
}


.btn:not(.btn-red){
  background: rgba(255,255,255,.06) !important;
}


.hero{
  width: 100% !important;
  overflow: hidden !important;
}
.hero-inner{
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
}
.hero-stack{
  width: min(920px, 94vw) !important;
  margin: 0 auto !important;
  display: block !important;       
}
@media (max-width: 760px){
  .hero .wrap{
    width: min(1180px, 94vw) !important;
    margin: 0 auto !important;
  }
  .hero-stack{
    width: min(560px, 94vw) !important;
  }
}


.hero-stack{
  position: relative !important;
  padding-bottom: 130px !important;  
}
.scene-controls{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 16px !important;
  z-index: 9 !important;
  width: auto !important;
  max-width: calc(100% - 24px) !important;
}
.drag-hint{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 86px !important;
  z-index: 9 !important;
  text-align: center !important;
}


@media (max-width: 760px){
  .hero-stack{
    padding-bottom: 18px !important;
  }
  .scene-controls,
  .drag-hint{
    position: static !important;
    transform: none !important;
    margin: 12px auto 0 !important;
    width: 100% !important;
    max-width: 420px !important;
  }
  .drag-hint{
    justify-content: center !important;
  }
}


.nav-inner{
  width: min(1180px, 92vw) !important;
  margin: 0 auto !important;
}
.nav-brand{ flex: 0 0 auto !important; }
.nav-toggle{ margin-left: auto !important; } 


.nav-links{
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

@media (max-width: 760px){
  .nav-links{
    left: 4vw !important;
    right: 4vw !important;
    width: auto !important;
    max-width: none !important;
  }


  .nav-links .nav-cart{
    margin-left: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 760px){
  #pano, .pano, .pnlm-container{
    touch-action: pan-y !important;   
  }
}

.nav{
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

.nav .wrap,
.nav-inner{
  width: min(1180px, 92vw) !important;
  margin: 0 auto !important;
}

.nav-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}


.nav-brand{ flex: 0 0 auto !important; }
.nav-toggle{ flex: 0 0 auto !important; margin-left: auto !important; }
.nav-links{ flex: 0 1 auto !important; min-width: 0 !important; }


.nav-cart{
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  white-space: nowrap !important;
}


@media (max-width: 760px){
  .nav-inner{ position: relative !important; }


  .nav-links{
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 4vw !important;
    right: 4vw !important;
    width: auto !important;
    max-width: none !important;

    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;

    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.86) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 10000 !important;
  }

  .nav-links.show{ display: flex !important; }


  .nav-links > a,
  .nav-links > .nav-cart{
    width: 100% !important;
    margin: 0 !important;
  }


  .nav-links > .nav-cart{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}


.hero{
  width: 100% !important;
  overflow: hidden !important;
}

.hero .wrap{
  width: min(1180px, 92vw) !important;
  margin: 0 auto !important;
}

.hero-inner{
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
}

.hero-stack{
  width: min(920px, 92vw) !important;
  margin: 0 auto !important;
  display: block !important;  
}



@media (min-width: 761px){
  .hero-stack{ padding-bottom: 120px !important; }
  .scene-controls{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 16px !important;
    z-index: 9 !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
  }
  .drag-hint{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 86px !important;
    z-index: 9 !important;
    text-align: center !important;
    width: fit-content !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 760px){
  .hero-stack{ padding-bottom: 18px !important; }

  .scene-controls,
  .drag-hint{
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 420px !important;
    margin: 12px auto 0 !important;
    text-align: center !important;
  }

  .scene-btns{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .scene-btn{
    width: 100% !important;
    min-width: 0 !important;
  }
}


.modal .bubble,
.modal .chip,
.modal .pill,
.modal .time-pill,
.modal .slot,
.modal .slot-pill{
  min-height: 44px !important;
  padding: 10px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

@media (max-width: 760px){
  .hero-controls,
  .hero-views,
  .hero-buttons{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;          
    width: calc(100% - 24px);
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 20;
  }


  .drag-hint,
  .drag-to-explore,
  #dragHint{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 62px;
    width: calc(100% - 24px);
    text-align: center;
    z-index: 20;
  }


  .hero-controls .btn,
  .hero-views .btn,
  .hero-buttons .btn{
    padding: 10px 14px !important;
    min-height: 42px;
    line-height: 1;
    border-radius: 999px;
  }
}

.fs-mode{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: #000 !important;
}

body.fs-lock{
  overflow: hidden !important;
  height: 100vh !important;
}
/* =========================
   PRETTY IN INK — PINK BUTTONS
========================= */
body.prettyinink-page .btn-red,
body.prettyinink-page .btn-primary,
body.prettyinink-page .btn{

}

body.prettyinink-page .btn-red,
body.prettyinink-page .btn.btn-red{
  background: linear-gradient(180deg, #ff4fbf, #ff2aa8) !important;
  border-color: rgba(255, 79, 191, .55) !important;
  box-shadow: 0 10px 30px rgba(255, 42, 168, .25) !important;
}


html:has(body[data-artist="lenzi"]) .btn-red,
html:has(body[data-artist="lenzi"]) .btn.btn-red{
  background: linear-gradient(180deg, #ff4fbf, #ff2aa8) !important;
  border-color: rgba(255, 79, 191, .55) !important;
  box-shadow: 0 10px 30px rgba(255, 42, 168, .25) !important;
}
/* =========================
   BOOKING MODAL 
========================= */
#bookingModal .bubble-row,
#bookingModal .slot-row,
#bookingModal .pill-row,
#bookingModal .time-row,
#bookingModal .date-row{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#bookingModal .bubble,
#bookingModal .pill,
#bookingModal .slot,
#bookingModal .chip,
#bookingModal button[type="button"].slot{
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-radius: 999px !important;
}

@media (max-width: 760px){


  .hero,
  .hero .wrap,
  .hero-inner,
  .hero-stack{
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    grid-template-columns: none !important;
  }


  .hero-inner > *{
    width: 100% !important;
    max-width: 100% !important;
  }


  .hero-bg,
  .vignette,
  .grain,
  .bg-left,
  .bg-center,
  .bg-right{
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }


  .hero-stack{
    width: min(560px, 94vw) !important;
    max-width: 94vw !important;
    margin: 0 auto !important;
  }
}

#pano, .pano, .pnlm-container, .pnlm-render-container{
  pointer-events: auto !important;
}

#pano, .pano{
  touch-action: none !important; 
}


.artist-hero-overlay,
.pretty-overlay,
.grain,
.vignette{
  pointer-events: none !important;
}



.btn.btn-red{
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
                    linear-gradient(135deg, rgba(225,6,0,1), rgba(255,90,90,.9));
}

/* Shine / swoop */
.btn::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,0) 65%);
  transform: translateX(-120%) rotate(12deg);
  transition: transform .75s ease;
  pointer-events:none;
}


.btn:hover::after,
.btn:focus-visible::after,
.btn:active::after{
  transform: translateX(120%) rotate(12deg);
}


.btn, .btn *{
  -webkit-tap-highlight-color: transparent;
}

#bookingModal .form .row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#bookingModal .form .row > label{
  width: 100%;
  min-width: 0; 
}

#bookingModal input[type="date"],
#bookingModal input[type="time"],
#bookingModal input,
#bookingModal select,
#bookingModal textarea{
  width: 100%;
  min-width: 0; /* IMPORTANT */
  box-sizing: border-box;
}

.modal.open .modal-panel{
  max-height: min(86vh, 720px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}


.modal .modal-panel .form{
  overflow: visible;
}

.btn{
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;

  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--text) !important;
}

.btn.btn-red,
.btn-red{
  background: linear-gradient(135deg, var(--red), var(--red2)) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #0b0b0c !important;
}


.btn.btn-ghost,
.btn-ghost{
  background: rgba(0,0,0,.40) !important;
  color: var(--text) !important;
}

/* Shine */
.btn::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,0) 65%
  );
  transform: translateX(-120%) rotate(12deg);
  transition: transform .65s ease, opacity .25s ease;
  opacity: 0;
  pointer-events:none;
}


@media (hover:hover){
  .btn:hover::after{
    transform: translateX(120%) rotate(12deg);
    opacity: 1;
  }
}


.btn:active::after,
.btn:focus-visible::after{
  transform: translateX(120%) rotate(12deg);
  opacity: 1;
}

@media (hover:none){
  .btn:active{
    box-shadow: 0 18px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08) inset;
    transform: translateY(0) scale(.99);
  }
  .btn.btn-red:active{
    filter: brightness(1.05) saturate(1.05);
  }
}


#bookingModal label{
  width: 100%;
  min-width: 0;
}

#bookingModal input,
#bookingModal select,
#bookingModal textarea{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;


  min-height: 44px;
  padding: 12px 12px;
  line-height: 1.2;


  font-size: 16px;
}


#bookingModal input[type="date"],
#bookingModal input[type="time"]{
  -webkit-appearance: none;
  appearance: none;
}


#bookingModal .row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width:760px){
  #bookingModal .row{ grid-template-columns: 1fr; }
}
#bookingModal.show .modal-panel{
  max-height: min(86vh, 720px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.fs-mode{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: #000 !important;
}

body.fs-lock{
  overflow: hidden !important;
  height: 100vh !important;
}

.nav-wordmark,
.footer-name{
  font-family: var(--fontH) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fs-mode{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: #000 !important;
}
body.fs-lock{
  overflow: hidden !important;
  height: 100vh !important;
}
/* =========================
   INDEX
========================= */
@media (min-width: 641px){
  .hero.hero-360 .scene-hint{
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    margin-left: 0;        
    white-space: nowrap;
  }
}

.artist-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .artist-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .artist-grid{ grid-template-columns: 1fr; }
}


.artist-grid > *{
  grid-column: auto !important;
}
/* =========================
   ARTISTS & STAFF GRID 
========================= */

.artist-grid{
  display: grid;
  grid-template-columns: 1fr; /* Mobile default */
  gap: 20px;
  align-items: stretch;
}

/* Tablet */
@media (min-width: 768px){
  .artist-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop */
@media (min-width: 1024px){
  .artist-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Force cards to behave */
.artist-grid > *{
  width: 100%;
  min-width: 0;
}
/* PROOF OVERRIDE — put at VERY bottom */
#artistGrid.artist-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

@media (min-width: 768px){
  #artistGrid.artist-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px){
  #artistGrid.artist-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

#artistGrid.artist-grid > *{
  width: 100% !important;
  min-width: 0 !important;
}
/* Fullscreen exit button (mobile + desktop) */
.fs-exit{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  display: none;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}


body.is-fullscreen .fs-exit{
  display: grid;
}
/* =========================
   NAV MOBILE: prevent 
========================= */

@media (max-width: 900px){
  .nav{
    position: relative;
  }


  .nav .nav-inner,
  .nav .nav-top,
  .nav .nav-bar,
  .nav .wrap{
    display: flex;
    align-items: center;
  }


  #navLinks{
    display: none;
    width: 100%;
  }


  #navLinks.show{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

 
  #navLinks a{
    display: block;
    width: 100%;
  }
}
.note-inline{
  color: rgba(246,246,247,.85);
}
/* ===== Bottom CENTER controls on desktop ===== */
@media (min-width: 641px){
  .scene-controls{
    left: 50%;
    right: auto;
    bottom: 18px;
    transform: translateX(-50%);
    flex-direction: column;      
    align-items: center;
    gap: 10px;
  }

  .scene-btns{
    justify-content: center;
  }

  .scene-hint{
    margin-left: 0;               
    justify-content: center;
    text-align: center;
  }
}


@media (max-width: 640px){
  .scene-controls{
    transform: none;              
  }
}
body.aftercare-page .btn::before,
body.aftercare-page .btn::after{
  content: none !important;
  display: none !important;
}
/* =========================
   MEET THE ARTISTS 
========================= */


.artist-card .media,
.meet-artist-card .media,
.artistCard .media,
.artist-card .imgWrap,
.meet-artist-card .imgWrap{
  overflow: hidden;
  border-radius: 18px;
}


.artist-card .media img,
.meet-artist-card .media img,
.artistCard .media img,
.artist-card img,
.meet-artist-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%; 
  display: block;
}

.artist-card .media,
.meet-artist-card .media,
.artistCard .media{
  aspect-ratio: 4 / 5;      
  max-height: 340px;       
}
/* =========================
   HERO CONTROLS — CENTER + MOVE UP
========================= */


.hero-controls,
.heroControls,
#heroControls,
.hero-scene-controls{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 78px;         
  z-index: 30;
  width: min(720px, calc(100% - 24px));
  display: grid;
  justify-items: center;
  gap: 10px;
}


.hero-controls .views,
.heroControls .views,
#heroControls .views,
.hero-scene-controls .views{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}


.drag-hint,
.dragHint,
#dragHint{
  position: static;     
  transform: none;
  margin: 0 auto;
  text-align: center;
  max-width: 520px;
}


.aftercare-page .cta,
.aftercare-page .cta *{
  filter: none !important;
}

.aftercare-page .cta a,
.aftercare-page .cta button,
.aftercare-page .cta .btn{
  box-shadow: none !important;
  text-shadow: none !important;
}

.aftercare-page .cta a::before,
.aftercare-page .cta a::after,
.aftercare-page .cta button::before,
.aftercare-page .cta button::after,
.aftercare-page .cta .btn::before,
.aftercare-page .cta .btn::after{
  content: none !important;
  display: none !important;
}
/* =========================
   HERO CONTROLS (DESKTOP): MOVE UP + STACK CENTERED
========================= */
@media (min-width: 992px){
  .hero-controls,
  #heroControls,
  .heroControls,
  .hero-scene-controls{
    bottom: 140px !important;     
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(760px, calc(100% - 40px)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 40 !important;
  }

  .hero-controls .views,
  #heroControls .views,
  .heroControls .views,
  .hero-scene-controls .views{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .drag-hint,
  #dragHint,
  .dragHint{
    position: relative !important;
    transform: none !important;
    margin: 0 auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
}
/* =========================
   MEET THE ARTISTS 
========================= */
@media (max-width: 640px){
  .artist-card .media,
  .meet-artist-card .media,
  .artistCard .media{
    aspect-ratio: 3 / 4;    
    max-height: 420px;       
  }

  .artist-card .media img,
  .meet-artist-card .media img,
  .artistCard .media img,
  .artist-card img,
  .meet-artist-card img{
    object-fit: cover;
    object-position: 50% 12%; 
  }
}

/* =========================
   AFTERCARE
========================= */
body.aftercare-page .ac-cta,
body.aftercare-page .cta{
  overflow: hidden;            
}

body.aftercare-page .ac-cta::before,
body.aftercare-page .ac-cta::after,
body.aftercare-page .cta::before,
body.aftercare-page .cta::after{
  content: none !important;
  display: none !important;
}


body.aftercare-page .ac-cta,
body.aftercare-page .cta,
body.aftercare-page .ac-card-actions,
body.aftercare-page .ac-card-actions *{
  filter: none !important;
}

body.aftercare-page .ac-card-actions .btn{
  box-shadow: none !important;
}


body.aftercare-page .btn::before,
body.aftercare-page .btn::after{
  content: none !important;
  display: none !important;
}
/* =========================
   RESTORE — MODAL + SLOTS 
========================= */


.modal{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none !important;
}
.modal.show{
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Backdrop + panel */
.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(4px);
}
.modal-panel{
  position: relative;
  width: min(760px, 92vw);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.92);
  box-shadow: var(--shadow);
  padding: 18px;
  z-index: 1;
}


.modal :is(.time-slots button, .slots button, .date-slots button, .slot, .time-slot, .date-slot, .chip, .bubble, .pill, .tag, button){
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 12px 14px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}


.modal :is(.time-slots, .slots, .date-slots, .bubble-row, .slot-row, .pill-row, .time-row, .date-row){
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* Inputs in modal */
.modal input[type="date"],
.modal input[type="time"]{
  min-height: 44px !important;
  border-radius: 999px !important;
}

/* Mobile scroll sizing */
@media (max-width:760px){
  .modal-panel{
    max-height: calc(100vh - 16px);
    padding: 16px;
  }
}
/* =========================
   HERO CONTROLS — DESKTOP FIX

========================= */
@media (min-width: 992px){
  .hero-stack{
    padding-bottom: 110px !important;
  }

  .scene-controls{
    position: absolute !important;
    left: 50% !important;
    bottom: 28px !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .scene-btns{
    justify-content: center !important;
  }

  .drag-hint{
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}
/* =========================
   HERO CONTROLS 
========================= */
@media (min-width: 761px){

  .hero-stack{
    padding-bottom: 140px !important;
  }

 
  .scene-controls{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 52px !important;         
    z-index: 30 !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    pointer-events: auto !important;
  }

  .scene-btns{
    justify-content: center !important;
  }

  .drag-hint{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 18px !important;         
    z-index: 29 !important;
    width: fit-content !important;
    max-width: calc(100% - 24px) !important;
    text-align: center !important;
    pointer-events: none !important;
  }
}



@media (min-width: 761px){

  .hero-stack{
    padding-bottom: 140px !important;
  }

  .scene-controls{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 18px !important;
    z-index: 30 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;

    width: auto !important;
    max-width: calc(100% - 24px) !important;
    pointer-events: auto !important;
  }

  .scene-btns{
    justify-content: center !important;
  }

  .scene-hint{
    margin: 0 !important;
    text-align: center !important;
    justify-content: center !important;
    pointer-events: none !important; 
  }
}


@media (max-width: 760px){
  .hero-stack{
    padding-bottom: 18px !important;
  }

  .scene-controls{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    margin: 14px auto 0 !important;
    width: 100% !important;
    max-width: 520px !important;
  }

  .scene-btns{
    width: 100% !important;
    max-width: 420px !important;
    justify-content: space-between !important;
  }

  .scene-hint{
    max-width: 420px !important;
  }
}


.scene-controls{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}


.scene-btns{
  position: relative !important;
  z-index: 2 !important;
}


.scene-hint{
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  margin: 10px auto 0 !important;
  z-index: 1 !important;

  pointer-events: none !important; 
}


@media (min-width: 761px){
  .hero-stack{ padding-bottom: 150px !important; }

  .scene-controls{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 18px !important;
    z-index: 30 !important;
    max-width: calc(100% - 24px) !important;
  }
}


@media (max-width: 760px){
  .hero-stack{ padding-bottom: 18px !important; }

  .scene-controls{
    position: static !important;
    transform: none !important;
    margin: 14px auto 0 !important;
    width: 100% !important;
    max-width: 520px !important;
  }

  .scene-hint{
    margin-top: 10px !important;
  }
}

@media (max-width: 760px){


  .artist-body,
  .crew-body{
    padding: 12px !important;
    gap: 8px !important;
  }

  
  .artist-head{ height: 200px !important; }
  .crew-photo{ height: 220px !important; }


  .artist-actions,
  .crew-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .artist-actions .btn,
  .crew-actions .btn{
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    letter-spacing: .02em !important;
  }


  .artist-actions .btn-red,
  .crew-actions .btn-red{
    box-shadow: 0 14px 40px rgba(0,0,0,.35) !important;
  }


  .artist-name, .crew-name{ margin-top: 2px !important; }
  .artist-role, .crew-role{ margin-top: 2px !important; }
}
@media (max-width: 390px){
  .artist-actions,
  .crew-actions{
    grid-template-columns: 1fr !important;
  }
}


@media (max-width: 760px){

 
  #artistGrid{
    gap: 16px !important;
  }

  #artistGrid .artist-body{
    padding: 12px !important;
    gap: 8px !important;
  }

  #artistGrid .artist-head{
    height: 200px !important;
  }


  #artistGrid .artist-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  #artistGrid .artist-actions .btn{
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    letter-spacing: .02em !important;
  }

  
  #artistGrid .pill{
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
}


@media (max-width: 390px){
  #artistGrid .artist-actions{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px){
  #artistGrid .artist-head img{
    object-position: 50% 10% !important; 
  }
}


@media (max-width: 390px){
  #artistGrid .artist-head img{
    object-position: 50% 6% !important;
  }
}

@media (max-width: 760px){
  #artistGrid .artist-head{
    height: 240px !important;  
  }
  #artistGrid .artist-head img{
    object-position: 50% 35% !important; 
  }
}


@media (max-width: 390px){
  #artistGrid .artist-head{
    height: 220px !important;
  }
  #artistGrid .artist-head img{
    object-position: 50% 40% !important;
  }
}

.tip-stories-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  align-items: stretch;
}


@media (max-width: 980px){
  .tip-stories-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 640px){
  .tip-stories-grid{
    grid-template-columns: 1fr;
  }
}


.tip-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* Tablet */
@media (max-width: 980px){
  .tip-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 640px){
  .tip-grid{
    grid-template-columns: 1fr;
  }
}


.tip-grid > .tip-card{
  height: 100%;
  display: flex;
  flex-direction: column;
}


.tip-card-media{
  height: 190px;            
  overflow: hidden;
  border-radius: 18px 18px 0 0; 
}
.tip-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.tip-card-body{
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tip-card-actions{
  margin-top: auto;
}