/* =====================================================================
   306 Tattoo Studio — styles
   Look: Ganga Tattoo LA inspired. Charcoal #181818, ultra-wide display
   type, centered uppercase subheads, square outline buttons, peach forms.
   ===================================================================== */
:root{
  --bg:#181818;--bg-2:#1f1f1f;--bg-3:#262626;--bg-4:#2e2e2e;
  --fg:#f2f2f2;--fg-2:#d6d6d6;--grey:#9a9a9a;--grey-2:#7d7d7d;--line:rgba(255,255,255,.12);
  --peach:#f9dcc4;--peach-2:#efcbb0;--peach-3:#e3bba0;--brown:#3d2217;--brown-2:#a8907f;--sand:#c69a72;
  --pad:clamp(16px,2.2vw,32px);
  --display:"Archivo","Arial Black",Impact,sans-serif;--ui:"Inter",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--peach);outline-offset:3px}
::selection{background:var(--peach);color:var(--brown)}
.skip{position:absolute;left:-999px;top:10px;z-index:200;background:var(--peach);color:var(--brown);padding:10px 14px;border-radius:4px}
.skip:focus{left:10px}
.wrap{max-width:1680px;margin:0 auto;padding:0 var(--pad)}
.read{max-width:1100px;margin:0 auto}
.center{text-align:center}
.rel{position:relative;z-index:1}
section{padding:clamp(90px,10vw,160px) 0;position:relative}
.tight{padding-top:0}

/* type */
.disp{font-family:var(--display);font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:.88;letter-spacing:-.005em}
.h-sec{font-size:clamp(30px,3.7vw,64px)}
.h-xl{font-size:clamp(46px,7vw,120px)}
.sub{font-size:clamp(14px,1.15vw,19px);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#cfcfcf;max-width:760px;margin:20px auto 0;text-wrap:balance}
.label{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.body-copy{font-size:clamp(16px,1.1vw,18px);color:var(--fg-2);line-height:1.6}
.body-copy p+p{margin-top:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;font-size:clamp(14px,1.05vw,18px);font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--fg);border-radius:4px;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:hover{background:var(--fg);color:#111}
.btn-white{background:var(--fg);color:#111;border-color:var(--fg)}
.btn-white:hover{background:transparent;color:var(--fg)}
.btn-peach{background:var(--peach);color:var(--brown);border-color:var(--peach)}
.btn-peach:hover{background:transparent;color:var(--peach)}
.btn-sm{padding:7px 12px;font-size:14px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.btn-row.left{justify-content:flex-start}
.link-u{text-decoration:underline;text-underline-offset:4px}

/* images: fade in on load */
img.lz{opacity:0;transition:opacity .6s var(--ease)}
img.lz.ok{opacity:1}

/* ===== NAV ===== */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding:22px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}
.nav>*{pointer-events:auto}
.nav .logo img{height:46px;width:auto}
.nav ul{display:flex;gap:clamp(22px,4.2vw,90px);list-style:none;font-size:clamp(13px,1vw,17px);font-weight:500;letter-spacing:.06em;text-transform:uppercase;transition:opacity .35s,transform .35s}
.nav ul li{position:relative}
.nav ul a{opacity:.92}.nav ul a:hover,.nav ul a.on{opacity:1;text-decoration:underline;text-underline-offset:6px}
.nav .clock{font-variant-numeric:tabular-nums;white-space:nowrap}
.nav .dd{position:absolute;top:100%;left:-16px;padding-top:16px;display:none}
.nav .dd div{background:rgba(24,24,24,.97);border:1px solid var(--line);border-radius:6px;padding:10px 0;min-width:220px;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.nav .dd a{display:block;padding:7px 16px;font-size:13px}
.nav li:hover .dd,.nav li:focus-within .dd{display:block}
.nav.scrolled ul{opacity:0;transform:translateY(-6px);pointer-events:none}
.nav-r{display:flex;align-items:center;gap:12px}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--fg);border-radius:4px;background:rgba(24,24,24,.6);backdrop-filter:blur(8px);font-size:20px}
@media(max-width:1180px){.nav ul{display:none}.burger{display:grid;place-items:center}}
.mmenu{position:fixed;inset:0;z-index:80;background:var(--bg);padding:100px var(--pad) 40px;overflow:auto;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mmenu.open{opacity:1;visibility:visible}
.mmenu a.big{display:block;font-family:var(--display);font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(30px,8vw,48px);line-height:1.1;padding:6px 0}
.mmenu .sm{display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 14px}
.mmenu .sm a{font-size:14px;color:var(--grey);text-transform:uppercase;letter-spacing:.06em}
.mmenu .x{position:absolute;top:22px;right:var(--pad);width:44px;height:44px;border:1.5px solid var(--fg);border-radius:4px;font-size:26px}
.mmenu .meta{margin-top:30px;color:var(--grey);font-size:14px;line-height:1.7}

/* ===== HERO ===== */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#3a3a3a;padding:0}
.hero .slides>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;filter:grayscale(.55) brightness(.9) contrast(.95)}
.hero .slides>.on{opacity:1}
.hero .slides>img.on{animation:kb 8s ease-out forwards}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,24,24,.6) 0%,rgba(110,110,110,.15) 26%,rgba(24,24,24,.05) 58%,rgba(24,24,24,.7) 100%)}
.hero .mark{position:absolute;left:0;right:0;bottom:clamp(56px,7vh,90px);z-index:2;text-align:center;padding:0 16px}
.hero .dots{display:flex;gap:7px;justify-content:center;margin-bottom:18px}
.hero .dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45);transition:.3s}
.hero .dots i.on{background:#fff}
.wordmark{font-family:var(--display);font-weight:900;font-stretch:125%;font-style:italic;text-transform:uppercase;line-height:.8;letter-spacing:-.03em;font-size:clamp(70px,11.5vw,210px);color:#f1f1f1;animation:rise 1s var(--ease) both}
.wordmark span{display:block}
.loc{font-size:clamp(13px,1.3vw,22px);font-weight:500;letter-spacing:.55em;text-transform:uppercase;margin-top:clamp(12px,1.4vw,22px);padding-left:.55em;animation:rise 1s .15s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero.sub-hero{height:76svh;min-height:520px}
.sub-hero .wordmark{font-size:clamp(52px,8.6vw,150px)}
.scroll-cue{position:absolute;right:var(--pad);bottom:28px;z-index:2;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#ddd;writing-mode:vertical-rl;display:flex;gap:12px;align-items:center}
.scroll-cue::after{content:"";width:1px;height:46px;background:linear-gradient(#fff,transparent);animation:cue 1.8s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:700px){.scroll-cue{display:none}}

/* quick quote strip */
.qq{border-bottom:1px solid var(--line);background:#141414;padding:0}
.qq form{display:grid;grid-template-columns:auto 1fr 1fr 2fr auto;gap:14px;align-items:center;padding:16px 0}
.qq .t{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.qq .t small{display:flex;align-items:center;gap:8px;color:var(--grey);font-weight:500;margin-top:3px}
.live{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:ping 2s infinite;flex:0 0 auto}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.qq input{background:transparent;border:1.5px solid var(--line);border-radius:4px;color:var(--fg);font:15px var(--ui);padding:11px 12px;outline:none;width:100%;transition:border-color .2s}
.qq input:focus{border-color:var(--fg)}
.qq .ok{display:none;grid-column:1/-1;text-transform:uppercase;letter-spacing:.06em;font-size:14px;padding:6px 0}
@media(max-width:1000px){.qq form{grid-template-columns:1fr 1fr}.qq .t,.qq .wide,.qq .btn{grid-column:1/-1}}

/* sand swirl */
.sand{position:absolute;pointer-events:none;z-index:0;opacity:.95}
.sand svg{width:100%;height:100%;display:block;overflow:visible}

/* ===== STYLE CARDS ===== */
.arrows{display:flex;gap:10px;margin:clamp(40px,4vw,70px) 0 30px}
.arrows button{width:46px;height:46px;border-radius:50%;background:#2a2a2a;display:grid;place-items:center;font-size:20px;transition:background .2s,opacity .2s}
.arrows button:hover{background:#3a3a3a}
.arrows button:disabled{opacity:.35;cursor:default}
.s-track{display:flex;gap:clamp(18px,2.4vw,46px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:var(--pad);scroll-padding-left:var(--pad)}
.s-track::-webkit-scrollbar{display:none}
.s-card{flex:0 0 clamp(270px,24.2vw,484px);scroll-snap-align:start;display:block}
.s-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,46px) clamp(18px,2.4vw,46px)}
.s-grid .s-card{flex:auto}
@media(max-width:1000px){.s-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.s-grid{grid-template-columns:1fr}}
.s-media{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--bg-3)}
.s-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform 1.2s var(--ease)}
.s-media img.on{opacity:1}
.s-card:hover .s-media img.on{transform:scale(1.03)}
.s-media .tap{position:absolute;top:22px;left:0;right:0;text-align:center;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:.3s;text-shadow:0 1px 10px rgba(0,0,0,.6);z-index:2}
.s-card:hover .tap{opacity:1}
.s-media .nx{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);font-size:14px;display:grid;place-items:center;opacity:0;transition:.3s;z-index:2}
.s-card:hover .nx{opacity:1}
.s-media .sd{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:2}
.s-media .sd i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:.3s}
.s-media .sd i.on{background:#fff}
@media(hover:none){.s-media .tap,.s-media .nx{opacity:1}}
.s-card h3{font-size:clamp(18px,1.5vw,26px);font-weight:500;letter-spacing:.02em;text-transform:uppercase;margin-top:18px}
.s-card p{font-size:clamp(14px,1vw,17px);color:#e6e6e6;margin-top:8px;max-width:95%}

/* ===== ARTISTS ===== */
.a-tools{display:flex;gap:clamp(20px,3vw,50px);justify-content:center;align-items:center;margin-top:26px;flex-wrap:wrap}
.fbtn{position:relative}
.fbtn::before{content:"";position:absolute;left:-22px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#666;transition:.2s}
.fbtn.active::before{background:var(--sand)}
.fpanel{display:none;flex-wrap:wrap;gap:8px;justify-content:center;margin:24px auto 0;max-width:920px}
.fpanel.open{display:flex;animation:rise .35s var(--ease)}
.fpanel button{border:1.5px solid var(--line);border-radius:4px;padding:8px 12px;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:8px;align-items:center;transition:.2s}
.fpanel button:hover{border-color:var(--fg)}
.fpanel button.on{background:var(--fg);color:#111;border-color:var(--fg)}
.fpanel button.on::after{content:"×";font-size:16px;line-height:1}
.fpanel .reset{border:0;text-decoration:underline;color:var(--grey)}
.a-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,46px);margin-top:clamp(40px,4vw,60px)}
.a-card{text-align:center;display:block}
.a-card .ph{aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--bg-3);display:grid;place-items:center;position:relative}
.a-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .6s}
.a-card:hover .ph img.ok{transform:scale(1.04)}
.ini{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(80px,8vw,130px);color:#333}
.a-card .soon{position:absolute;bottom:14px;left:0;right:0;font-size:12px;letter-spacing:.1em;color:var(--grey);text-transform:uppercase}
.badge{position:absolute;top:12px;left:12px;background:var(--peach);color:var(--brown);font-size:11px;font-weight:700;letter-spacing:.1em;padding:4px 8px;border-radius:3px;z-index:2}
.a-card .st{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:20px;font-size:clamp(14px,1.05vw,18px);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#d8d8d8}
.a-card .st b{font-size:11px;font-weight:600;background:#333;border-radius:999px;padding:2px 7px;letter-spacing:0}
.a-card h3{font-size:clamp(24px,2.2vw,40px);margin-top:10px}
.a-card[hidden]{display:none}
.empty{grid-column:1/-1;color:var(--grey);text-transform:uppercase;letter-spacing:.06em;font-size:14px;padding:30px 0}
@media(max-width:1000px){.a-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.a-grid{grid-template-columns:1fr 1fr}.a-card h3{font-size:20px}}

/* ===== CHOSEN BY ===== */
.stage{position:relative;max-width:1340px;margin:clamp(40px,5vw,70px) auto 0;aspect-ratio:16/8;border-radius:8px;overflow:hidden;background:#1d1d1d}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s}
.stage .bg{object-fit:cover;filter:blur(34px) brightness(.38);transform:scale(1.15)}
.stage img.on{opacity:1}
.thumbs{display:flex;gap:clamp(8px,1.1vw,18px);justify-content:center;margin-top:40px;flex-wrap:wrap}
.thumbs button{width:clamp(56px,6.6vw,132px);aspect-ratio:4/5;overflow:hidden;opacity:.5;transition:opacity .3s,transform .3s;border-radius:2px}
.thumbs button.on,.thumbs button:hover{opacity:1}
.thumbs button.on{transform:translateY(-4px)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.names{margin-top:30px;font-size:clamp(14px,1.15vw,20px);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#a9a9a9}
.names span{transition:color .3s}
.names span.on{color:#fff}
@media(max-width:700px){.stage{aspect-ratio:4/5}}

/* ===== REVIEWS ===== */
.reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,46px);margin-top:clamp(40px,4vw,60px);text-align:left}
.review{border-top:1.5px solid var(--line);padding-top:24px}
.review .stars{color:var(--peach);letter-spacing:4px;font-size:14px}
.review p{font-size:clamp(16px,1.15vw,19px);line-height:1.5;margin:16px 0 18px;color:#eaeaea}
.review .who{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.review .who b{color:var(--fg);font-weight:600;display:block}
@media(max-width:1000px){.reviews{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.reviews{grid-template-columns:1fr}}

/* ===== REELS / MUSIC ===== */
.reel-track{display:flex;gap:clamp(14px,1.6vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:clamp(40px,4vw,60px);padding-right:var(--pad)}
.reel-track::-webkit-scrollbar{display:none}
.reel{flex:0 0 clamp(200px,17vw,300px);aspect-ratio:9/16;border-radius:8px;overflow:hidden;position:relative;scroll-snap-align:start;background:var(--bg-3)}
.reel img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .6s}
.reel:hover img.ok{transform:scale(1.05)}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 30%,transparent 55%,rgba(0,0,0,.85))}
.reel .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);display:grid;place-items:center;backdrop-filter:blur(6px);transition:transform .3s}
.reel:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.reel .play::before{content:"";border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.reel .top{position:absolute;top:14px;left:14px;z-index:2;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.reel.yt .top{color:#ff7a7a}
.reel .bot{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.reel .bot span{display:block;font-size:11px;color:var(--peach);margin-bottom:2px}
.music{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,60px);align-items:start;margin-top:clamp(50px,5vw,80px)}
.yt{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.yt .yplay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25);cursor:pointer}
.yt .yplay span{width:84px;height:84px;border-radius:50%;border:1.5px solid #fff;display:grid;place-items:center;backdrop-filter:blur(6px)}
.yt .yplay span::before{content:"";border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
.track{display:flex;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);cursor:pointer;width:100%;text-align:left;transition:padding .25s}
.track:hover{padding-left:6px}
.track .n{font-size:13px;color:var(--grey);width:24px;flex:0 0 auto}
.track b{font-family:var(--display);font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(20px,1.8vw,30px);display:block;line-height:1}
.track small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.track.on b{color:var(--peach)}
.track .soon{margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2)}
.stream{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
@media(max-width:900px){.music{grid-template-columns:1fr}}

/* ===== PROMO BAND (Pay Monthly) ===== */
.promo{display:grid;grid-template-columns:1.1fr 1fr;border-radius:8px;overflow:hidden;background:var(--bg-2);min-height:420px}
.promo .txt{padding:clamp(30px,5vw,70px);display:flex;flex-direction:column;justify-content:center}
.promo .txt .sub{margin-left:0;text-align:left}
.promo .img{position:relative;min-height:320px}
.promo .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.promo{grid-template-columns:1fr}}

/* ===== WORK GRID / ARTIST PAGE ===== */
.grid-work{columns:4 260px;column-gap:clamp(12px,1.4vw,24px);margin-top:clamp(40px,4vw,60px)}
.grid-work figure{break-inside:avoid;margin-bottom:clamp(12px,1.4vw,24px);border-radius:8px;overflow:hidden;cursor:zoom-in;background:var(--bg-3)}
.grid-work img{width:100%;transition:transform .8s var(--ease),opacity .6s}
.grid-work figure:hover img.ok{transform:scale(1.03)}
.ap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,90px);align-items:center}
.ap .ph{aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--bg-3);display:grid;place-items:center;position:relative}
.ap .ph img{width:100%;height:100%;object-fit:cover}
.ap .styles-l{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#d8d8d8;margin:18px 0;display:flex;gap:16px;flex-wrap:wrap}
.ap .styles-l a{text-decoration:underline;text-underline-offset:4px}
.ap p{color:var(--fg-2);font-size:clamp(16px,1.15vw,19px);max-width:560px}
@media(max-width:860px){.ap{grid-template-columns:1fr}}
.pending{border:1.5px dashed #3a3a3a;border-radius:8px;padding:36px;text-align:center;color:var(--grey);text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.pending a{color:var(--peach);text-decoration:underline}
.crumbs{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:22px}
.crumbs a:hover{color:var(--fg)}
.pager{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(60px,7vw,110px);border-top:1px solid var(--line);padding-top:30px}
.pager a{display:block}
.pager small{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.pager b{font-family:var(--display);font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(22px,2.4vw,40px);line-height:1}
.pager a:hover b{color:var(--peach)}
.pager .nx{text-align:right;margin-left:auto}

/* ===== PRICES ===== */
.pgroup{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--peach);padding-bottom:10px;border-bottom:1.5px solid rgba(249,220,196,.35);margin:44px 0 4px}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);font-size:17px}
.prow i{flex:1;border-bottom:1px dotted #444;transform:translateY(-5px)}
.prow small{color:var(--grey);font-size:14px;margin-left:8px}
.prow b{font-weight:600;white-space:nowrap}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 70px}
@media(max-width:800px){.two{grid-template-columns:1fr}}
.tbl{overflow-x:auto}
.est{width:100%;border-collapse:collapse;font-size:16px}
.est th{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--peach);text-align:left;padding:12px 10px 12px 0;border-bottom:1.5px solid rgba(249,220,196,.35);white-space:nowrap}
.est td{padding:15px 10px 15px 0;border-bottom:1px solid var(--line)}
.est td:not(:first-child),.est th:not(:first-child){text-align:right;white-space:nowrap}
.est td:last-child{color:var(--grey)}
@media(max-width:600px){.est .hst{display:none}.est{font-size:15px}}
.notes{margin-top:34px;background:var(--bg-2);border-radius:8px;padding:22px 24px;display:grid;gap:12px;font-size:15px;color:var(--fg-2)}
.notes div{display:grid;grid-template-columns:130px 1fr;gap:14px}
.notes b{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--peach);padding-top:2px}
@media(max-width:520px){.notes div{grid-template-columns:1fr;gap:2px}}
.tabs{display:flex;gap:8px;justify-content:center;margin-top:34px}
.tabs button{border:1.5px solid var(--line);border-radius:4px;padding:9px 16px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.tabs button.on{background:var(--fg);color:#111;border-color:var(--fg)}
.tabpanel{display:none}.tabpanel.on{display:block;animation:rise .4s var(--ease)}

/* ===== CARDS (steps, contact, academy) ===== */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,46px);margin-top:50px;text-align:left}
.cards3 .c{background:var(--bg-2);border-radius:8px;padding:30px;display:block;transition:background .2s}
.cards3 a.c:hover{background:var(--bg-3)}
.cards3 .c .n{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:46px;color:var(--peach);line-height:1}
.cards3 .c h4{font-size:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:16px 0 8px}
.cards3 .c p{color:#cfcfcf;font-size:15px}
.cards4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.cards4{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.cards3{grid-template-columns:1fr}}

/* ===== FAQ / ACCORDION ===== */
.acc{max-width:1000px;margin:50px auto 0;text-align:left}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(16px,1.3vw,21px);font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:26px;font-weight:300;transition:transform .3s;flex:0 0 auto}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .ans{padding:0 0 24px;color:var(--fg-2);font-size:16px;max-width:820px}
.care{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;max-width:1100px;margin:30px auto 0;text-align:left}
.care .it{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.care .it .n{font-family:var(--display);font-weight:900;font-stretch:125%;color:var(--peach);font-size:22px}
.care .it b{display:block;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.care .it p{color:#cfcfcf;font-size:15px}
.warn{max-width:1100px;margin:30px auto 0;background:var(--bg-2);border-left:3px solid var(--peach);border-radius:4px;padding:18px 22px;text-align:left;color:var(--fg-2)}
@media(max-width:800px){.care{grid-template-columns:1fr}}

/* ===== SHOP ===== */
.shop{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,46px);margin-top:50px;text-align:left}
.prod .img{aspect-ratio:4/5;border-radius:8px;background:var(--bg-2);display:grid;place-items:center;overflow:hidden;position:relative}
.prod .img img{width:100%;height:100%;object-fit:cover}
.prod .mk{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(50px,5vw,84px);text-transform:uppercase;color:#3a3a3a}
.prod h3{font-size:18px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-top:16px}
.prod p{color:#cfcfcf;font-size:15px;margin:6px 0 14px}
@media(max-width:1000px){.shop{grid-template-columns:1fr 1fr}}

/* ===== STUDIO / MAP ===== */
.tour{position:relative;aspect-ratio:16/8;border-radius:8px;overflow:hidden;cursor:pointer;margin-top:50px;background:var(--bg-3)}
.tour img,.tour video{width:100%;height:100%;object-fit:cover}
.tour .pl{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.3);transition:background .3s}
.tour:hover .pl{background:rgba(0,0,0,.15)}
.tour .pl span{width:96px;height:96px;border-radius:50%;border:1.5px solid #fff;display:grid;place-items:center;backdrop-filter:blur(6px)}
.tour .pl span::before{content:"";border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.tour .cap{position:absolute;left:22px;bottom:18px;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.tour.playing .pl,.tour.playing .cap{display:none}
@media(max-width:700px){.tour{aspect-ratio:4/5}}
.map{width:100%;height:460px;border:0;border-radius:8px;filter:grayscale(1) invert(.92) contrast(.9);margin-top:50px;background:var(--bg-2)}

/* ===== BOOK NOW (peach card) ===== */
.formwrap{max-width:666px;margin:36px auto 0;text-align:left}
.fcard{background:var(--peach);color:var(--brown);border-radius:4px;padding:32px 32px 14px;max-height:min(840px,80vh);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--peach-3) transparent;position:relative}
.fcard.fade{-webkit-mask-image:linear-gradient(180deg,#000 86%,transparent);mask-image:linear-gradient(180deg,#000 86%,transparent)}
.fcard.open{max-height:none}
.seg{display:inline-flex;background:var(--peach-2);border-radius:4px;padding:3px;margin-bottom:26px}
.seg button{padding:9px 18px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brown);border-radius:3px;transition:.2s}
.seg button.on{background:var(--brown);color:var(--peach)}
.fld{margin-bottom:26px}
.chip{display:inline-block;background:var(--brown);color:var(--peach);font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:4px;margin-bottom:12px}
fieldset{border:1.5px solid var(--peach-3);border-radius:4px;display:flex;align-items:stretch;padding:0;min-height:56px;transition:border-color .2s,box-shadow .2s;background:rgba(255,255,255,.12)}
fieldset:focus-within{border-color:var(--brown);box-shadow:0 0 0 3px rgba(61,34,23,.08)}
fieldset.bad{border-color:#b34a2f}
legend{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#7c5c4a;padding:0 6px;margin-left:8px}
.pre{background:var(--peach-2);display:grid;place-items:center;padding:0 16px;font-size:17px;margin-top:-8px;border-radius:2px 0 0 2px}
fieldset input,fieldset select,fieldset textarea{flex:1;background:transparent;border:0;outline:none;font:17px var(--ui);letter-spacing:.03em;color:var(--brown);padding:6px 10px 12px;min-width:0;width:100%}
fieldset textarea{resize:vertical;min-height:84px}
fieldset input::placeholder,fieldset textarea::placeholder{color:#cfa58a}
fieldset select{appearance:none;cursor:pointer;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--brown) 50%),linear-gradient(135deg,var(--brown) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
fieldset select option{background:var(--peach)}
fieldset input[type=file]{font-size:14px;padding:12px 10px}
fieldset input[type=date]{color-scheme:light}
.chk{display:flex;gap:12px;align-items:center;font-size:15px;margin-bottom:22px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--brown);flex:0 0 auto}
.dep{background:var(--peach-2);border-radius:4px;padding:14px 16px;font-size:14px;margin-bottom:20px;line-height:1.5}
.dep b{letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.is-piercing .t-only{display:none}.is-tattoo .p-only{display:none}
.fsubmit{background:var(--peach);border-radius:4px;margin-top:8px;padding:14px;text-align:center;color:#6b5040}
.fsubmit .left{font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.fsubmit .go{width:100%;background:var(--brown-2);color:var(--peach);border-radius:4px;padding:14px;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(28px,2.6vw,44px);text-transform:uppercase;line-height:1;transition:background .25s}
.fsubmit .go.ready{background:var(--brown)}
.fsubmit .go.ready:hover{background:#2a160e}
.fsubmit .go:disabled{opacity:.7;cursor:wait}
.fsubmit .alt{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.fsubmit .alt a,.fsubmit .alt button{color:var(--brown);text-decoration:underline;text-underline-offset:3px;font:inherit;letter-spacing:inherit}
.done{display:none;text-align:center;padding:40px 10px 30px;color:var(--brown)}
.done h3{font-size:clamp(30px,3vw,48px)}
.done p{margin-top:12px}
.err{display:none;margin-top:10px;font-size:14px;color:#8a2c14;text-transform:none;letter-spacing:0}
.hp{position:absolute!important;left:-9999px!important;opacity:0}

/* ===== FOOTER ===== */
footer{padding:clamp(120px,14vw,220px) 0 34px}
.f4{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.f4 h5{font-size:clamp(14px,1.05vw,17px);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2);margin-bottom:18px}
.f4 p,.f4 a.l{display:block;font-size:clamp(15px,1.05vw,17px);font-weight:500;line-height:1.45;max-width:360px}
.f4 .gap{margin-top:22px}
.f4 a.l:hover{text-decoration:underline}
.f-areas{margin-top:clamp(70px,7vw,110px);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-2)}
.f-areas a:hover{color:var(--fg)}
.fbot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:clamp(50px,6vw,100px);font-size:15px;font-weight:500}
.fbot .lk{display:flex;gap:70px}
.fbot .cp{line-height:1.5}
@media(max-width:900px){.f4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.f4{grid-template-columns:1fr}.fbot .lk{gap:30px}}

/* ===== DRAWER / MOBILE BAR / LIGHTBOX / TOAST ===== */
.side-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:55;writing-mode:vertical-rl;rotate:180deg;background:var(--peach);color:var(--brown);padding:18px 10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:0 4px 4px 0;box-shadow:0 8px 30px rgba(0,0,0,.4);transition:padding .2s}
.side-tab:hover{padding-right:14px}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,94vw);z-index:95;background:var(--peach);color:var(--brown);transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);padding:44px 32px;overflow-y:auto}
.drawer.open{transform:none}
.scrim{position:fixed;inset:0;z-index:94;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:.3s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer .x{position:absolute;top:14px;right:18px;font-size:32px;color:var(--brown);width:44px;height:44px}
.drawer .k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.drawer h3{font-size:clamp(34px,3vw,46px);margin:16px 0 14px}
.drawer p{font-size:15px}
.calc{margin:24px 0;background:var(--peach-2);border-radius:4px;padding:20px}
.calc label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;display:grid;gap:10px}
.calc input[type=range]{accent-color:var(--brown);width:100%}
.calc .out{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:14px;gap:10px}
.calc .out b{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:34px}
.calc select{background:transparent;border:0;border-bottom:1.5px solid var(--brown);color:var(--brown);font:14px var(--ui)}
.calc .presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.calc .presets button{border:1.5px solid var(--brown);border-radius:3px;padding:4px 8px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brown)}
.calc .presets button:hover{background:var(--brown);color:var(--peach)}
.drawer .go{display:block;text-align:center;background:var(--brown);color:var(--peach);border-radius:4px;padding:15px;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:22px;text-transform:uppercase}
.drawer .go2{display:block;text-align:center;margin-top:14px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline}
.drawer .fine{font-size:11px;margin-top:10px;opacity:.75}
.mbar{display:none}
@media(max-width:900px){
  .mbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:rgba(24,24,24,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .mbar a,.mbar button{flex:1;text-align:center;padding:12px 4px;border-radius:4px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--fg)}
  .mbar a:last-child{background:var(--fg);color:#111}
  body{padding-bottom:70px}.side-tab{display:none}.nav .btn-white{display:none}
}
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(10,10,10,.96);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.25s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-height:86vh;max-width:92vw;object-fit:contain;border-radius:4px}
.lightbox button{position:absolute;font-size:38px;padding:16px;color:#fff}
.lightbox .cnt{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:13px;letter-spacing:.1em;color:var(--grey)}
.lb-close{top:10px;right:14px}.lb-prev{left:6px;top:50%;transform:translateY(-50%)}.lb-next{right:6px;top:50%;transform:translateY(-50%)}

/* page transitions + reveal */
#app{transition:opacity .25s ease}
#app.out{opacity:0}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s,transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,img.lz{opacity:1;transform:none}}
.page-top{padding-top:clamp(150px,14vw,210px)}
.nf{min-height:80vh;display:grid;place-items:center;text-align:center}
/* QA fixes */
.fsubmit .alt button,.mbar button,.calc .presets button,.tabs button,.seg button{text-transform:uppercase}
@media(max-width:700px){.sand{opacity:.45;transform:scale(.7);transform-origin:top left}}
/* QC round 2: accessibility + tap targets */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1.wordmark{margin:0}
@media(max-width:700px){
  .btn-sm{min-height:44px;padding:10px 14px}
  .s-media .nx{width:44px;height:44px;font-size:18px;right:10px}
  .fsubmit .alt{gap:6px 20px}
  .fsubmit .alt a,.fsubmit .alt button{display:inline-flex;align-items:center;min-height:44px}
  .arrows button{width:48px;height:48px}
}

/* =====================================================================
   v2 — hero video, flair, popup booking, music, mobile pay-monthly
   ===================================================================== */
html.lock,html.lock body{overflow:hidden}

/* ---- grain + progress ---- */
.grain{position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.07;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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,-4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--peach);transform-origin:0 50%;transform:scaleX(0);z-index:120;pointer-events:none}

/* ---- hero: one graded video ---- */
.hero{background:#111}
.hero .hv{position:absolute;inset:0;overflow:hidden}
.hero .hv video,.hero .hv img{width:100%;height:100%;object-fit:cover;display:block}
.hero-video .hv video,.hero-video .hv img{filter:saturate(.8) contrast(1.08) brightness(.82);transform:scale(1.04);animation:hvIn 2.4s var(--ease) both}
@keyframes hvIn{from{transform:scale(1.14);filter:saturate(0) contrast(1.1) brightness(.4)}to{transform:scale(1.04)}}
.sub-hero .hv img{filter:saturate(.75) contrast(1.05) brightness(.8);animation:hvIn 1.8s var(--ease) both}
.hero::after{display:none}
.hv-tint{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 40%,transparent 35%,rgba(10,10,10,.55) 100%),
  linear-gradient(180deg,rgba(20,20,20,.65) 0%,rgba(20,20,20,0) 24%,rgba(20,20,20,0) 55%,rgba(24,24,24,.95) 100%)}
.hero .mark{bottom:clamp(70px,9vh,110px);will-change:transform,opacity}
.hero .dots{display:none}
.hero-top{position:absolute;z-index:2;left:var(--pad);right:var(--pad);top:100px;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#d7d7d7}
.hero-top .greet{font-family:"Noto Sans Gurmukhi",var(--ui);letter-spacing:.04em;font-size:15px;color:var(--peach);text-transform:none}
@media(max-width:700px){.hero-top{top:84px;font-size:10px}.hero-top span:last-child{display:none}}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,36px);animation:rise 1s .3s var(--ease) both}
.hv-ctl{position:absolute;z-index:3;left:var(--pad);bottom:28px;display:flex;gap:8px}
.hv-ctl button{height:38px;min-width:38px;padding:0 12px;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(20,20,20,.35);backdrop-filter:blur(8px);display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:.2s}
.hv-ctl button:hover{background:#fff;color:#111}
.hv-ctl .snd-off{width:14px;height:12px;background:currentColor;clip-path:polygon(0 30%,35% 30%,70% 0,70% 100%,35% 70%,0 70%)}
.hv-ctl button.on .snd-off{clip-path:polygon(0 30%,35% 30%,70% 0,70% 100%,35% 70%,0 70%);box-shadow:5px 0 0 -3px currentColor}
.hv-ctl .pz{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hv-ctl .paused .pz{border:0;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.hero.needs-tap::before{content:"Tap to play";position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px 16px;border:1.5px solid #fff;border-radius:999px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.35)}
@media(max-width:700px){.hv-ctl{bottom:18px}.hv-ctl button span{display:none}.scroll-cue{display:none}}
.sub-hero{height:72svh;min-height:480px}

/* pay-monthly pill (hero + menu) */
.fin-pill{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;background:rgba(249,220,196,.14);border:1.5px solid rgba(249,220,196,.7);color:var(--peach);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(8px);transition:.25s}
.fin-pill b{font-weight:500;color:#f3e3d4}
.fin-pill .arr{transition:transform .25s}
.fin-pill:hover{background:var(--peach);color:var(--brown)}.fin-pill:hover b{color:var(--brown)}.fin-pill:hover .arr{transform:translateX(4px)}
@media(max-width:520px){.fin-pill{font-size:11px;padding:10px 13px}}

/* ---- ticker ---- */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:clamp(14px,1.6vw,22px) 0;background:#151515;position:relative;z-index:2}
.tk{display:flex;align-items:center;width:max-content;animation:tick 38s linear infinite}
.ticker:hover .tk{animation-play-state:paused}
.tk span{font-family:var(--display);font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(26px,3.6vw,58px);line-height:1;padding:0 clamp(16px,2vw,30px);white-space:nowrap;color:#e9e9e9}
.tk span.o{color:transparent;-webkit-text-stroke:1.2px rgba(249,220,196,.8)}
.tk span:lang(pa),.tk span{font-feature-settings:normal}
.tk i{font-style:normal;color:var(--sand);font-size:clamp(12px,1.2vw,18px)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---- section index + split-word reveal ---- */
.idx{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);margin-bottom:16px}
.idx.left{text-align:left}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease)}
.split.in .w>span,.split:not(.reveal) .w>span{transform:none}
.reveal.split{opacity:1;transform:none}
em{font-style:italic}
.disp em{font-style:italic;color:var(--peach);font-stretch:110%}

/* ---- custom cursor (desktop) ---- */
.cur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .3s}
.cur.on{opacity:1}
.cur span{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--peach);mix-blend-mode:difference;display:grid;place-items:center;font-size:0;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#111;transition:width .3s var(--ease),height .3s var(--ease),left .3s var(--ease),top .3s var(--ease),font-size .2s,background .3s}
.cur.link span{width:36px;height:36px;left:-18px;top:-18px;background:rgba(249,220,196,.9)}
.cur.big span{width:84px;height:84px;left:-42px;top:-42px;font-size:11px;mix-blend-mode:normal;background:var(--peach);color:var(--brown)}
@media(pointer:fine){[data-cur],[data-cur] *{cursor:none}}
.mag{transition:transform .35s var(--ease),background .2s,color .2s,border-color .2s}

/* card + image flair */
.s-card .s-media,.a-card .ph{transition:transform .6s var(--ease),box-shadow .6s}
.s-card:hover .s-media,.a-card:hover .ph{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.a-card h3{transition:color .3s}.a-card:hover h3{color:var(--peach)}

/* ---- music band (separate from the tattoo work) ---- */
.music-band{position:relative;overflow:hidden;padding:clamp(90px,10vw,150px) 0;background:#101010}
.mb-bg{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(60px) saturate(1.2) brightness(.35);transform:scale(1.2)}
.music-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#181818 0%,transparent 20%,transparent 80%,#181818 100%);pointer-events:none}
.music-band .wrap{position:relative;z-index:2}
.mb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.mb-head h2{line-height:.86}
.sub.left{margin-left:0;text-align:left;max-width:440px}
.music{margin-top:clamp(40px,4vw,60px)}
.yt{border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.yt .poster{transition:transform 1s var(--ease)}
.yt:hover .poster{transform:scale(1.03)}
.ytl{position:absolute;left:18px;bottom:16px;z-index:2;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.ytl small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--peach)}
.ytl b{font-family:var(--display);font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(22px,2.4vw,36px)}
.yt iframe~.ytl{display:none}
.track .eq{margin-left:auto;display:flex;gap:2px;align-items:flex-end;height:14px;opacity:0}
.track.on .eq{opacity:1}
.track .eq i{width:3px;background:var(--peach);animation:eq 1s ease-in-out infinite}
.track .eq i:nth-child(2){animation-delay:.2s}.track .eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.yt-btn{background:#ff0033!important;border-color:#ff0033!important;color:#fff!important}
.mani-music{display:flex;align-items:center;gap:14px;margin-top:28px;padding:10px 16px 10px 10px;border:1.5px solid var(--line);border-radius:10px;max-width:380px;transition:border-color .2s}
.mani-music:hover{border-color:var(--peach)}
.mani-music img{width:64px;height:40px;object-fit:cover;border-radius:4px}
.mani-music small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.mani-music b{font-weight:600}
.music-page{padding-top:clamp(70px,8vw,110px)}

/* ---- pay band (moved up on home) + CTA band ---- */
.promo{border:1px solid rgba(249,220,196,.18)}
.promo .txt .label{color:var(--sand)}
.cta-band{padding:clamp(110px,13vw,190px) 0;overflow:hidden;position:relative}
.cta-band::before{content:"";position:absolute;width:70vw;height:40vw;left:15vw;top:12%;background:radial-gradient(circle,rgba(198,154,114,.28),transparent 62%);filter:blur(60px)}
.cta-band h2{font-size:clamp(70px,13vw,230px)}
.f-mark{font-family:var(--display);font-weight:900;font-stretch:125%;font-style:italic;font-size:clamp(120px,26vw,420px);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);margin-top:clamp(50px,6vw,90px);user-select:none}

/* ---- booking popup with blurred background ---- */
.modal{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(14,14,14,.45);backdrop-filter:blur(16px) saturate(.8);-webkit-backdrop-filter:blur(16px) saturate(.8);opacity:0;transition:opacity .35s}
.modal.open .modal-bg{opacity:1}
.sheet{position:relative;width:min(680px,100%);max-height:calc(100svh - 40px);overflow:auto;background:var(--peach);color:var(--brown);border-radius:10px;box-shadow:0 40px 120px rgba(0,0,0,.55);transform:translateY(30px) scale(.98);opacity:0;transition:transform .45s var(--ease),opacity .35s;outline:none;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--peach-3) transparent}
.modal.open .sheet{transform:none;opacity:1}
.sheet-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:24px 28px 14px;background:linear-gradient(var(--peach) 75%,rgba(249,220,196,0))}
.sheet-head h2{font-size:clamp(38px,5vw,60px);line-height:.85;color:var(--brown)}
.sheet-head p{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-top:6px}
.sheet-x{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--brown);color:var(--brown);font-size:26px;line-height:1;flex:0 0 auto;transition:.2s}
.sheet-x:hover{background:var(--brown);color:var(--peach)}
@media(max-width:600px){.modal{padding:0;place-items:end stretch}.sheet{width:100%;max-height:94svh;border-radius:16px 16px 0 0;transform:translateY(100%)}.modal.open .sheet{transform:none}.sheet-head{padding:18px 18px 10px}}

/* booking form v2 */
.bk{padding:0 28px 26px;display:block}
@media(max-width:600px){.bk{padding:0 18px 22px}}
.prog{display:flex;flex-direction:column;gap:8px;margin:2px 0 22px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.prog i{display:block;height:3px;background:rgba(61,34,23,.15);border-radius:3px;overflow:hidden}
.prog b{display:block;height:100%;width:50%;background:var(--brown);transition:width .45s var(--ease)}
.step{display:none}.step.on{display:block;animation:rise .45s var(--ease)}
.bk .fi{display:block;margin-bottom:20px}
.bk .fl{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.bk .fl em{font-style:normal;font-weight:500;font-size:10px;letter-spacing:.1em;padding:2px 6px;border-radius:3px;background:var(--brown);color:var(--peach)}
.bk .fw{display:flex;align-items:stretch;border:1.5px solid var(--peach-3);border-radius:6px;background:rgba(255,255,255,.28);transition:border-color .2s,box-shadow .2s}
.bk .fw:focus-within{border-color:var(--brown);box-shadow:0 0 0 3px rgba(61,34,23,.1)}
.bk .fi.bad .fw{border-color:#b34a2f}
.bk .fe{display:block;font-size:12px;color:#9a3418;min-height:0;margin-top:4px}
.bk .fw input,.bk .fw select,.bk .fw textarea{flex:1;min-width:0;width:100%;border:0;background:transparent;outline:none;color:var(--brown);font:16px var(--ui);padding:13px 14px}
.bk .fw textarea{resize:vertical;min-height:84px;line-height:1.45}
.bk .fw ::placeholder{color:#c49c80}
.bk .pre{display:grid;place-items:center;padding:0 12px;background:var(--peach-2);font-size:16px;border-right:1.5px solid var(--peach-3);border-radius:5px 0 0 5px;margin:0}
.bk .fw select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--brown) 50%),linear-gradient(135deg,var(--brown) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.bk .fw input[type=date]{color-scheme:light}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:520px){.frow{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:1.5px solid var(--peach-3);background:rgba(255,255,255,.25);color:var(--brown);border-radius:999px;padding:9px 14px;font-size:14px;font-weight:500;line-height:1.15;transition:.15s;min-height:40px;text-align:left}
.chips button small{display:block;font-size:11px;opacity:.7;margin-top:2px}
.chips button:hover{border-color:var(--brown)}
.chips button.on{background:var(--brown);border-color:var(--brown);color:var(--peach)}
.sizes .chips button{border-radius:8px}
.drop{display:block;position:relative;border:1.5px dashed rgba(61,34,23,.4);border-radius:8px;padding:16px;margin-bottom:20px;cursor:pointer;transition:.2s;background:rgba(255,255,255,.18)}
.drop:hover,.drop.over{border-color:var(--brown);background:rgba(255,255,255,.35)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .dz b{display:block;font-size:14px}.drop .dz small{font-size:12px;opacity:.75}
.drop.has .dz{display:none}
.drop .dp{display:flex;align-items:center;gap:12px;font-size:13px}
.drop .dp img{width:56px;height:56px;object-fit:cover;border-radius:6px}
.bk .seg{display:inline-flex;background:var(--peach-2);border-radius:999px;padding:4px;margin-bottom:22px}
.bk .seg button{padding:10px 20px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brown)}
.bk .seg button.on{background:var(--brown);color:var(--peach)}
.bk .note{font-size:13px;opacity:.85;margin:-6px 0 18px}
.fnav{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px;padding-top:16px;border-top:1px solid rgba(61,34,23,.15)}
.ok-note{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.bk .go{background:var(--brown-2);color:var(--peach);border-radius:6px;padding:14px 22px;font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(20px,2vw,28px);text-transform:uppercase;line-height:1;transition:background .2s,transform .2s}
.bk .go.ready{background:var(--brown)}.bk .go.ready:hover{background:#2a160e;transform:translateY(-1px)}
.bk .fsubmit{background:none;padding:6px 0 0;margin:0;text-align:center}
.bk .fsubmit .go{width:100%;padding:16px}
.bk .fsubmit .left{font-size:12px;letter-spacing:.1em}
.promo-d{align-self:end;margin-bottom:20px}
.promo-d summary{cursor:pointer;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;list-style:none;padding:12px 0}
.promo-d summary::-webkit-details-marker{display:none}
.promo-d[open] summary{display:none}
.promo-d .fi{margin:0}
.tog{display:flex;align-items:center;gap:12px;margin:4px 0 16px;cursor:pointer;font-size:15px}
.tog input{position:absolute;opacity:0;width:1px;height:1px}
.tog .sw{flex:0 0 auto;width:44px;height:26px;border-radius:999px;background:rgba(61,34,23,.25);position:relative;transition:.25s}
.tog .sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.25s var(--ease)}
.tog input:checked+.sw{background:var(--brown)}.tog input:checked+.sw::after{left:21px}
.tog input:focus-visible+.sw{outline:2px solid var(--brown);outline-offset:2px}
.bk .done{display:none;padding:10px 0 6px;text-align:left}
.bk.sent .step,.bk.sent .prog{display:none}.bk.sent .done{display:block;animation:rise .5s var(--ease)}
.bk .done .tick{width:56px;height:56px;border-radius:50%;background:var(--brown);color:var(--peach);display:grid;place-items:center;font-size:28px;margin-bottom:16px}
.bk .done h3{font-size:clamp(34px,4vw,52px);color:var(--brown)}
.bk .done ol{margin:16px 0 0 18px;display:grid;gap:8px;font-size:15px}
.btn-dark{background:var(--brown);color:var(--peach);border-color:var(--brown)}.btn-dark:hover{background:transparent;color:var(--brown)}
.btn-dark-o{border-color:var(--brown);color:var(--brown)}.btn-dark-o:hover{background:var(--brown);color:var(--peach)}
.bk .alt{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.04em}
.bk .alt button,.bk .alt a{color:var(--brown);text-decoration:underline;text-underline-offset:3px;min-height:40px;display:inline-flex;align-items:center}
.formwrap .bk .fcard{background:var(--peach);border-radius:10px;padding:28px;max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
.formwrap .bk{padding:0}
.bk .hp{position:absolute!important;left:-9999px!important}

/* ---- nav + mobile: Book now always reachable at the top, Pay Monthly visible ---- */
.nav ul{gap:clamp(18px,2.6vw,56px)}
@media(max-width:1400px){.nav .clock{display:none}}
@media(max-width:900px){
  .nav .nav-book{display:inline-flex!important;padding:9px 14px;font-size:12px}
  .side-tab{display:flex!important;top:auto;bottom:96px;transform:none;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;font-size:10px;border-radius:0 6px 6px 0;box-shadow:0 10px 30px rgba(0,0,0,.45)}
  .side-tab b{font-weight:600;opacity:.75}
  .pay-sec{padding-top:40px}
}
.side-tab{display:flex;flex-direction:column;gap:6px;align-items:center}
.side-tab b{font-weight:600;opacity:.75}
@media(max-width:900px){.mbar button[data-open-fin]{background:var(--peach);color:var(--brown);border-color:var(--peach)}}
@media(prefers-reduced-motion:reduce){.grain,.tk{animation:none}.split .w>span{transform:none}}
@media(max-width:900px){.side-tab{top:38%!important;bottom:auto!important;padding:12px 7px!important;font-size:9px!important;gap:3px!important}}

/* ===== v3: artist picker (clean list) ===== */
.apick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chips.apick button.ap-o{display:flex;align-items:center;gap:12px;text-align:left;border-radius:10px;padding:10px 14px 10px 10px;background:rgba(255,255,255,.28);border:1px solid var(--peach-3);transition:border-color .15s,background .15s}
.chips.apick button.ap-o:hover{border-color:var(--brown-2);background:rgba(255,255,255,.45)}
.chips.apick button.ap-o.on{background:rgba(255,255,255,.6);border-color:var(--brown);color:var(--brown);box-shadow:inset 0 0 0 1px var(--brown)}
.ap-o .av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;background:#e9c9b1}
.ap-o .av img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.ap-o .mono{display:grid;place-items:center;width:100%;height:100%;font-size:15px;font-weight:600;color:var(--brown);opacity:.75}
.ap-o .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ap-o .tx b{font-size:14px;font-weight:600}
.ap-o .tx i{font-style:normal;font-weight:400;opacity:.6}
.chips.apick .ap-o .tx small{font-size:12px;opacity:.65;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-o .rec{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brown);opacity:.7;white-space:nowrap}
.ap-o .rec:empty{display:none}
.ap-o .rd{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--brown-2);flex:none;transition:border-color .15s,box-shadow .15s}
.ap-o.on .rd{border-color:var(--brown);box-shadow:inset 0 0 0 3.5px var(--peach),inset 0 0 0 8px var(--brown)}
.apick .ap-o[data-match]{order:-2}
.apick .ap-o.is-rec{order:-1}
.is-piercing .apick .ap-o:not([data-match]):not([data-pierce]){display:none}
@media(max-width:600px){.apick{grid-template-columns:1fr}}
.a-card .aka,.ap .aka{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);margin-top:6px}
.ap .aka{margin-top:8px}

/* v3.1: calmer, classier booking sheet */
.sheet-head{background:var(--peach);border-bottom:1px solid var(--peach-3);padding-bottom:16px}
.sheet-head h2{font-size:clamp(30px,3.4vw,42px);line-height:.9}
.sheet-head p{font-size:11px;opacity:.7}
.bk{padding-top:22px}
.bk .go{font-family:inherit;font-weight:600;font-stretch:100%;font-size:15px;letter-spacing:.04em;text-transform:none;padding:14px 26px;border-radius:8px}
.bk .fsubmit .go{font-size:16px;padding:16px}
.ap-o .rec{margin-left:8px;font-size:9.5px;font-weight:600;letter-spacing:.1em;padding:2px 6px;border:1px solid var(--brown-2);border-radius:4px;vertical-align:2px;opacity:.8}

.track .feat{display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid rgba(249,220,196,.5);border-radius:4px;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--peach);vertical-align:2px}

/* ===================== v4: polish + creative pass ===================== */
:root{--bl:"UnifrakturCook","Pirata One",serif}
/* tighter rhythm between sections (item 7) */
section{padding:clamp(64px,7vw,120px) 0}
section.tight{padding:clamp(48px,5vw,90px) 0}
/* blackletter accent, used sparingly (item 16) */
.bl,.idx{font-family:var(--bl);font-weight:700}
.idx{font-size:clamp(17px,1.4vw,22px);letter-spacing:.02em;text-transform:none;margin-bottom:10px}
.cta-band .bl-eye{font-size:clamp(19px,1.6vw,26px)}
/* hero: tap-to-play badge moves off the wordmark (item 1) */
.hero.needs-tap::before{top:auto;left:auto;right:var(--pad);bottom:30px;transform:none;font-size:11px;padding:8px 12px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px)}
/* hero on phones: video sits above, wordmark below the studio sign (item 2) */
@media(max-width:700px){
  .hero-video .hv{bottom:30%}
  .hero-video .hv::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:45%;background:linear-gradient(transparent,#111)}
  .hero-video .hv-tint{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,#111 72%)}
  .hero .mark{bottom:clamp(84px,11vh,120px)}
  .hero.needs-tap::before{bottom:auto;top:46%;right:auto;left:16px}
}
/* line-art ornament, beside headings (items 4, 17) */
.orn{position:absolute;pointer-events:none;z-index:0;aspect-ratio:1;opacity:.5}
.orn svg{width:100%;height:100%;overflow:visible;animation:ornSpin 120s linear infinite}
.orn svg *{fill:none;stroke:var(--sand);stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.6,0,.2,1)}
.orn svg .d{fill:var(--sand);stroke:none;opacity:0;transition:opacity 1.2s 1.6s}
.orn.in svg *{stroke-dashoffset:0}.orn.in svg .d{opacity:.9}
.orn.r svg{animation-direction:reverse}
@keyframes ornSpin{to{transform:rotate(360deg)}}
@media(max-width:700px){.orn{opacity:.28}}
@media(prefers-reduced-motion:reduce){.orn svg{animation:none}.orn svg *{stroke-dashoffset:0;transition:none}.orn svg .d{opacity:.9}}
.wrap.rel{position:relative;z-index:1}
/* artist cards: monogram placeholder + hover preview (item 15) */
.mono-ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;background:radial-gradient(circle at 50% 40%,#2c2622,#1c1c1c 70%)}
.mono-ph .bl{font-size:clamp(90px,9vw,150px);line-height:1;color:var(--sand);opacity:.9}
.mono-ph small{font-size:12px;letter-spacing:.12em;color:#9a9a9a}
.a-card .ph .hov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0!important;transition:opacity .5s!important;transform:none!important}
@media(hover:hover){.a-card:hover .ph .hov.ok{opacity:1!important}}
.ig-tag{position:absolute;left:10px;bottom:10px;z-index:2;display:flex;gap:6px;align-items:center;font-size:11px;letter-spacing:.06em;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:5px 9px;border-radius:999px}
.igi{width:15px;height:15px;flex:none}
.ig-btn{display:inline-flex;align-items:center;gap:8px}
/* books open (item 18) */
.books{margin:clamp(40px,4vw,64px) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;align-items:center}
.books .bk-l{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin-right:6px}
.books a{display:flex;gap:10px;align-items:baseline;border:1px solid #3a3a3a;border-radius:999px;padding:9px 16px;font-size:14px;transition:border-color .2s,background .2s}
.books a:hover{border-color:var(--peach);background:rgba(249,220,196,.06)}
.books a span{font-size:12px;color:#9fd9a8}
/* chosen strip (item 9) */
.strip{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;margin-top:clamp(36px,4vw,60px);padding:0 var(--pad);cursor:grab}
.strip::-webkit-scrollbar{display:none}
.strip .sp{flex:0 0 clamp(230px,24vw,400px);margin:0;position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/5;background:var(--bg-3)}
.strip .sp img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .6s;cursor:zoom-in}
.strip .sp:hover img.ok{transform:scale(1.04)}
.strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.strip-ar{display:flex;justify-content:center;gap:10px;margin-top:22px}
/* reviews (items 11, 12) */
.g-rate{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:10px 18px;border:1px solid #333;border-radius:999px;font-size:14px;color:#ddd}
.g-rate b{font-size:18px;color:#fff}.g-rate .stars{color:#fbbc04;letter-spacing:2px}
.glogo{width:18px;height:18px;flex:none}
.reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);margin:clamp(36px,4vw,56px) auto 0;max-width:1680px;padding:0 var(--pad);text-align:left}
.review{margin:0;background:var(--bg-2);border:1px solid #2c2c2c;border-radius:10px;padding:24px;border-top:1px solid #2c2c2c;display:flex;flex-direction:column}
.review .rv-top{display:flex;justify-content:space-between;align-items:center}
.review .stars{color:#fbbc04;letter-spacing:3px;font-size:14px}
.review blockquote{margin:18px 0 22px;font-size:clamp(16px,1.15vw,19px);line-height:1.5;color:#eaeaea;flex:1;position:relative}
.review blockquote::before{content:"“";font-family:var(--bl);font-size:64px;line-height:0;color:var(--sand);display:block;margin:22px 0 8px}
.review figcaption{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.review figcaption b{display:block;color:var(--fg);margin-bottom:3px}
.review figcaption a{color:var(--peach);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.reviews{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px}.reviews::-webkit-scrollbar{display:none}.review{flex:0 0 82%;scroll-snap-align:start}}
/* fresh: crew handles */
.handles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:22px}
.handles a{font-size:14px;color:#ddd;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.handles a:hover{color:var(--peach);border-color:var(--peach)}
.handles small{color:var(--grey);margin-right:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
/* shorter CTA band (item 8) */
.cta-band{padding:clamp(72px,8vw,120px) 0}
.cta-band h2{font-size:clamp(46px,7.5vw,130px);line-height:.9}
.cta-band::before{height:26vw;top:18%}
/* artist page live feed */
.ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ig-head .idx{margin-bottom:6px}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,16px);margin-top:clamp(28px,3vw,44px)}
.igp{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--bg-3);display:block}
.igp img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.igp:hover img{transform:scale(1.04)}
.igp .play{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.5);display:grid;place-items:center}
.igp .play::before{content:"";border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.igp .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 12px;background:linear-gradient(transparent,rgba(0,0,0,.8));font-size:12px;line-height:1.35;opacity:0;transition:opacity .3s}
.igp .cap b{display:block;color:var(--peach);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.igp:hover .cap,.igp:focus .cap{opacity:1}
@media(max-width:700px){.ig-grid{grid-template-columns:repeat(2,1fr)}.igp .cap{opacity:1;font-size:11px}}
/* flash sheet (item 13) */
.flash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,280px));justify-content:center;gap:clamp(14px,1.6vw,26px);margin-top:clamp(30px,3vw,50px)}
.flash-grid:empty{display:none}
.flash-c{margin:0;background:#f3ede4;color:#1d1d1d;border-radius:6px;padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 40px -26px rgba(0,0,0,.7)}
.flash-c .fimg{aspect-ratio:1;border-radius:3px;overflow:hidden;background:#e8e0d4}
.flash-c .fimg img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.flash-c figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.flash-c figcaption b{font-size:22px;width:100%}
.flash-c figcaption span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6b625a}
.flash-c figcaption em{font-style:normal;font-weight:700;margin-left:auto}
.flash-c .btn{align-self:flex-start;background:#1d1d1d;color:#f3ede4;border-color:#1d1d1d}
/* before/after + fresh/healed (item 14) */
.pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,400px));justify-content:center;gap:24px;margin-top:clamp(30px,3vw,50px);text-align:left}
.pair{margin:0}.pair figcaption{margin-top:12px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#cfcfcf}.pair figcaption a{color:var(--peach)}
.ba{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--bg-3);user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.ba-h{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.ba-h::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:14px;font-weight:700}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-l,.ba-r{position:absolute;top:12px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:rgba(0,0,0,.55);padding:5px 9px;border-radius:999px;z-index:2}
.ba-l{left:12px}.ba-r{right:12px}
.a-title{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#9a9a9a;margin-top:6px}
.ap .a-title{font-size:11px;margin-top:10px}

/* v5: nav gets a solid, blurred bar once you scroll, so text never shows through it (phone feedback) */
.nav{transition:background .3s,padding .3s,box-shadow .3s}
.nav.scrolled{background:rgba(20,20,20,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(255,255,255,.06);padding-top:12px;padding-bottom:12px;pointer-events:auto}
.nav.scrolled .logo img{height:38px}
@media(max-width:900px){.nav.scrolled{padding-top:10px;padding-bottom:10px}.nav.scrolled .logo img{height:34px}}
.grid-work.clip figure.xtra{display:none}

/* /music video hero: "Mani Nahal" is wider than "306 Tattoo", so it scales down sooner; buttons stack on phones */
.music-hero .wordmark{font-size:clamp(44px,11.5vw,210px)}
@media (max-width:700px){
  .music-hero .wordmark{font-size:14.5vw}
  .music-hero .hero-ctas{flex-direction:column;align-items:center}
  .music-hero .hero-ctas .btn{width:min(300px,78vw)}
}