/* =====================================================
   THE INDIVIDUALS — Immersive Full-Screen Stylesheet
   Path: assets/css/immersive.css
   Fully responsive: Mobile, Tablet, Desktop
===================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --black:#000;
  --bg:#0a0a0a;
  --bg2:#101010;
  --bg3:#161616;
  --bg4:#1c1c1c;
  --bg5:#262626;
  --line:#1f1f1f;
  --line2:#2a2a2a;
  --line3:#363636;
  --line4:#454545;
  --mute:#5c5c5c;
  --mute2:#7a7a7a;
  --soft:#a8a8a8;
  --light:#cccccc;
  --pale:#e8e8e8;
  --white:#fff;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.65,0,.35,1);

  --section-pad-x:5rem;
  --section-pad-x-tablet:3rem;
  --section-pad-x-mobile:1.5rem;
  --section-pad-x-small:1rem;
}

html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;height:100%}
body{
  background:var(--bg);
  color:var(--pale);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  height:100vh;
  height:100dvh;
  position:fixed;
  inset:0;
  width:100%;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:overlay;
}

::selection{background:var(--white);color:var(--black)}
::-webkit-scrollbar{width:0;height:0}

/* ===================== PAGE LOADER ===================== */
.page-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .6s var(--ease),visibility .6s var(--ease);
  padding:1rem;
}
.page-loader.hide{opacity:0;visibility:hidden}
.loader-content{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
  width:100%;
  max-width:300px;
}
.loader-logo{
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:clamp(1.5rem,5vw,2rem);
  color:var(--white);
  letter-spacing:.5px;
}
.loader-logo em{font-style:italic;color:var(--soft)}

/* Loader logo image */
.loader-logo-img{
  display:block;
  height:60px;
  width:auto;
  max-width:280px;
  object-fit:contain;
  margin:0 auto;
}
@media(max-width:600px){
  .loader-logo-img{
    height:48px;
    max-width:220px;
  }
}
@media(max-width:420px){
  .loader-logo-img{
    height:42px;
    max-width:180px;
  }
}
.loader-bar{
  width:min(200px,80%);
  height:1px;
  background:var(--line2);
  overflow:hidden;
  border-radius:2px;
}
.loader-bar-fill{
  height:100%;
  width:0;
  background:var(--white);
  animation:loaderFill 1.4s var(--ease) forwards;
}
@keyframes loaderFill{0%{width:0}100%{width:100%}}
.loader-text{
  font-size:.6rem;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:500;
}

/* ===================== NAVBAR ===================== */
.navbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:9500;
  padding:1.25rem 2rem;
  background:rgba(10,10,10,.4);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:all .4s var(--ease);
}
.navbar.scrolled{
  background:rgba(10,10,10,.85);
  border-bottom-color:rgba(255,255,255,.08);
  padding:1rem 2rem;
}
.nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  max-width:100%;
}
.nav-logo{flex-shrink:0}
.logo-link{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--white);
  transition:opacity .3s var(--ease);
}
.logo-link:hover{opacity:.75}

/* Logo image — desktop default */
.logo-img{
  display:block;
  height:42px;
  width:auto;
  max-width:200px;
  object-fit:contain;
  transition:height .35s var(--ease);
}
.navbar.scrolled .logo-img{
  height:36px;
}

.logo-mark{
  width:9px;height:9px;
  border-radius:50%;
  background:var(--white);
  display:inline-block;
  position:relative;
  flex-shrink:0;
}
.logo-mark::after{
  content:'';
  position:absolute;
  inset:-4px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  animation:logoRing 3s var(--ease) infinite;
}
@keyframes logoRing{
  0%{transform:scale(.7);opacity:.8}
  100%{transform:scale(2);opacity:0}
}
.logo-text{
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:1.4rem;
  letter-spacing:.5px;
  font-weight:400;
  white-space:nowrap;
}
.logo-text em{font-style:italic;color:var(--soft)}

/* Mobile menu header logo */
.mobile-logo-img{
  display:block;
  height:36px;
  width:auto;
  max-width:180px;
  object-fit:contain;
}

.nav-menu{
  display:flex;
  align-items:center;
  flex:1;
  justify-content:center;
}
.mobile-menu-header,
.mobile-menu-footer{display:none}
.nav-links{
  display:flex;
  gap:.3rem;
  align-items:center;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:100px;
  padding:.35rem;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.65rem 1.1rem;
  color:var(--soft);
  text-decoration:none;
  font-size:.66rem;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-weight:600;
  border-radius:100px;
  transition:all .35s var(--ease);
  position:relative;
}
.nav-link .nav-num{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:.78rem;
  color:var(--mute);
  letter-spacing:0;
  font-weight:400;
  transition:color .35s var(--ease);
}
.nav-link:hover{
  color:var(--white);
  background:rgba(255,255,255,.06);
}
.nav-link:hover .nav-num{color:var(--white)}
.nav-link.active{
  color:var(--black);
  background:var(--white);
}
.nav-link.active .nav-num{color:var(--black)}

.nav-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-shrink:0;
}
.cart-btn{
  position:relative;
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--line3);
  background:rgba(255,255,255,.02);
  color:var(--white);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:all .3s var(--ease);
  flex-shrink:0;
}
.cart-btn:hover{
  background:var(--white);
  color:var(--black);
  border-color:var(--white);
  transform:translateY(-1px);
}
.cart-btn svg{
  width:17px;height:17px;
  display:block;
  stroke:currentColor;
  fill:none;
  flex-shrink:0;
}
.cart-badge{
  position:absolute;
  top:-4px;right:-4px;
  background:var(--white);
  color:var(--black);
  font-size:.6rem;
  font-weight:700;
  min-width:18px;height:18px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--bg);
  padding:0 4px;
}

.sidebar-toggle{
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--line3);
  background:rgba(255,255,255,.02);
  color:var(--white);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  transition:all .3s var(--ease);
  flex-shrink:0;
}
.sidebar-toggle:hover{
  background:var(--white);
  border-color:var(--white);
}
.sidebar-toggle:hover .bar{background:var(--black)}
.sidebar-toggle .bar{
  display:block;
  width:14px;height:1.5px;
  background:var(--white);
  border-radius:2px;
  transition:all .3s var(--ease);
}
.sidebar-toggle .bar:nth-child(2){width:9px;margin-left:5px}

.nav-toggle{
  display:none;
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--line3);
  background:rgba(255,255,255,.02);
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  transition:all .3s var(--ease);
  flex-shrink:0;
}
.nav-toggle .bar{
  display:block;
  width:14px;height:1.5px;
  background:var(--white);
  border-radius:2px;
  transition:all .3s var(--ease);
}
.nav-toggle .bar:nth-child(2){width:10px}
.nav-toggle.active{background:var(--white);border-color:var(--white)}
.nav-toggle.active .bar{background:var(--black);width:14px}
.nav-toggle.active .bar:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle.active .bar:nth-child(2){opacity:0}
.nav-toggle.active .bar:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ===================== BLUR OVERLAY ===================== */
.blur-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  z-index:1500;
  transition:all .4s var(--ease);
}
.blur-overlay.active{opacity:1;visibility:visible}

/* ===================== RIGHT SIDEBAR ===================== */
.right-sidebar{
  position:fixed;
  top:0;right:0;
  width:480px;
  max-width:90vw;
  height:100vh;
  height:100dvh;
  background:var(--bg);
  border-left:1px solid var(--line2);
  z-index:2000;
  transform:translateX(100%);
  transition:transform .55s var(--ease);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.right-sidebar.active{transform:translateX(0)}
.sidebar-content{
  flex:1;
  padding:5rem 3rem 2rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.sidebar-content::-webkit-scrollbar{width:2px}
.sidebar-content::-webkit-scrollbar-thumb{background:var(--line3)}

.logo-section{
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--line2);
  margin-bottom:2.5rem;
}
.sidebar-logo-mark{
  width:14px;height:14px;
  border-radius:50%;
  background:var(--white);
  margin-bottom:1.25rem;
}
/* Sidebar logo image */
.sidebar-logo-img{
  display:block;
  height:55px;
  width:auto;
  max-width:240px;
  object-fit:contain;
  margin-bottom:1.5rem;
}
.logo-section h3{
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:clamp(1.5rem,4vw,1.85rem);
  color:var(--white);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
  margin-bottom:1rem;
}
.logo-section h3 em{font-style:italic;color:var(--soft)}
.logo-section p{
  color:var(--soft);
  line-height:1.7;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1rem,2.5vw,1.1rem);
  font-style:italic;
  margin-bottom:1.75rem;
}

.btn-learn-more{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.95rem 1.5rem;
  background:var(--white);
  color:var(--black);
  border:1px solid var(--white);
  border-radius:100px;
  font-family:'Inter',sans-serif;
  font-size:.65rem;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:all .35s var(--ease);
}
.btn-learn-more::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--bg2);
  transform:translateY(101%);
  transition:transform .4s var(--ease);
  z-index:0;
}
.btn-learn-more > *{position:relative;z-index:1;transition:color .3s var(--ease)}
.btn-learn-more:hover{color:var(--white);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.btn-learn-more:hover::before{transform:translateY(0)}
.btn-learn-more i{font-size:.65rem}

.contact-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-size:.6rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--mute2);
  font-weight:500;
  margin-bottom:.75rem;
}
.contact-eyebrow::before{
  content:'';
  width:24px;height:1px;
  background:var(--white);
}
.contact-section h3{
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:clamp(1.4rem,3.5vw,1.65rem);
  color:var(--white);
  font-weight:400;
  margin-bottom:2rem;
  letter-spacing:-.01em;
}
.contact-section h3 em{font-style:italic;color:var(--soft)}

.contact-item{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--line2);
}
.contact-item:last-of-type{border-bottom:none}
.contact-icon{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--line3);
  background:var(--bg2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  flex-shrink:0;
  font-size:.85rem;
}
.contact-item .ci-label{
  display:block;
  font-size:.6rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--mute2);
  margin-bottom:.3rem;
  font-weight:500;
}
.contact-item p{
  color:var(--white);
  font-size:.92rem;
  line-height:1.5;
  word-break:break-word;
}

.social-links{
  display:flex;
  gap:.6rem;
  margin-top:2rem;
  flex-wrap:wrap;
}
.social-links a{
  width:40px;height:40px;
  border:1px solid var(--line3);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  text-decoration:none;
  transition:all .3s var(--ease);
  font-size:.95rem;
  flex-shrink:0;
}
.social-links a:hover{
  background:var(--white);
  color:var(--black);
  border-color:var(--white);
  transform:translateY(-2px);
}

.close-sidebar{
  padding:1.5rem 3rem;
  border-top:1px solid var(--line2);
  display:flex;
  align-items:center;
  gap:.85rem;
  cursor:pointer;
  color:var(--soft);
  font-size:.65rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  font-weight:600;
  transition:all .3s var(--ease);
  flex-shrink:0;
}
.close-sidebar:hover{
  background:var(--white);
  color:var(--black);
}
.close-sidebar i{font-size:1rem}

/* ===================== MAIN CONTAINER ===================== */
.main-container{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

.section{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  visibility:hidden;
  transform:translateX(100%);
  transition:opacity .9s var(--ease),visibility .9s var(--ease),transform 1.1s var(--ease-smooth);
  pointer-events:none;
  will-change:transform,opacity;
}
.section.active{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  pointer-events:auto;
  z-index:2;
}
.section.exit-left{
  opacity:0;
  visibility:hidden;
  transform:translateX(-100%);
  z-index:1;
}
.section.exit-right{
  opacity:0;
  visibility:hidden;
  transform:translateX(100%);
  z-index:1;
}
.section.enter-from-left{transform:translateX(-100%)}

.background-video{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}
.background-video img,
.background-video video{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.45);
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  pointer-events:none;
}

.hero-fallback-img{
  position:absolute;
  inset:0;
  z-index:0;
  transition:opacity .8s var(--ease);
}

.background-video img.bg-img{animation:bgZoom 25s var(--ease) infinite alternate}
@keyframes bgZoom{
  0%{transform:scale(1.05)}
  100%{transform:scale(1.18)}
}
.bg-gradient{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.04) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 80%,rgba(255,255,255,.02) 0%,transparent 50%),
    linear-gradient(135deg,var(--bg) 0%,var(--bg2) 100%);
}
.video-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%,transparent 0%,rgba(10,10,10,.4) 65%,rgba(10,10,10,.85) 100%),
    linear-gradient(180deg,rgba(10,10,10,.3) 0%,rgba(10,10,10,.4) 50%,rgba(10,10,10,.7) 100%);
}

/* ===================== SOUND TOGGLE BUTTON ===================== */
.hero-section .sound-toggle{
  position:absolute;
  bottom:2rem;
  right:2rem;
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.7rem .95rem;
  background:rgba(10,10,10,.6);
  backdrop-filter:blur(15px) saturate(160%);
  -webkit-backdrop-filter:blur(15px) saturate(160%);
  border:1px solid rgba(255,255,255,.22);
  border-radius:100px;
  color:var(--white);
  cursor:pointer;
  font-family:'Inter',sans-serif;
  font-size:.6rem;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
  box-shadow:0 8px 25px rgba(0,0,0,.4);
  -webkit-tap-highlight-color:transparent;
  outline:none;
  user-select:none;
  -webkit-user-select:none;
}
.hero-section .sound-toggle:hover{
  background:rgba(10,10,10,.8);
  border-color:rgba(255,255,255,.4);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.hero-section .sound-toggle:active{transform:translateY(0) scale(.97)}
.sound-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;height:18px;
  flex-shrink:0;
  position:relative;
  z-index:2;
  pointer-events:none;
}
.sound-icon svg{width:100%;height:100%;display:block}
.sound-icon-on{display:none}
.sound-toggle.is-on .sound-icon-muted{display:none}
.sound-toggle.is-on .sound-icon-on{display:inline-flex}
.sound-label{
  position:relative;
  z-index:2;
  white-space:nowrap;
  transition:max-width .4s var(--ease),opacity .3s var(--ease),margin .4s var(--ease);
  max-width:140px;
  overflow:hidden;
  pointer-events:none;
}
.sound-toggle.was-toggled .sound-label{
  max-width:0;
  opacity:0;
  margin-left:-.7rem;
}
.sound-pulse{
  position:absolute;
  inset:-2px;
  border-radius:100px;
  border:1.5px solid rgba(255,255,255,.5);
  pointer-events:none;
  animation:soundPulse 2.2s var(--ease) infinite;
  z-index:1;
}
.sound-toggle.was-toggled .sound-pulse{display:none}
@keyframes soundPulse{
  0%{transform:scale(1);opacity:.8}
  100%{transform:scale(1.3);opacity:0}
}
.sound-toggle.is-on{
  background:rgba(255,255,255,.95)!important;
  color:var(--black);
  border-color:var(--white)!important;
}
.sound-toggle.is-on:hover{background:var(--white)!important}

.section-content{
  position:relative;
  z-index:2;
  width:100%;
  height:100vh;
  height:100dvh;
  padding:6rem var(--section-pad-x) 4rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  opacity:0;
  transform:translateX(60px);
  transition:opacity .8s var(--ease) .15s,transform 1s var(--ease-smooth) .15s;
}
.section.active .section-content{
  opacity:1;
  transform:translateX(0);
}
.section.exit-left .section-content{
  opacity:0;
  transform:translateX(-60px);
}
.section.exit-right .section-content{
  opacity:0;
  transform:translateX(60px);
}

.background-video img,
.background-video video,
.bg-gradient{
  transition:transform 1.4s var(--ease-smooth);
}
.section.active .background-video img,
.section.active .background-video video,
.section.active .bg-gradient{transform:scale(1)}
.section:not(.active) .background-video img,
.section:not(.active) .background-video video,
.section:not(.active) .bg-gradient{transform:scale(1.08)}

/* ===================== VERTICAL TEXT ===================== */
.vertical-text{
  position:absolute;
  font-size:.62rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--mute2);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:.7rem;
  white-space:nowrap;
  z-index:3;
}
.vertical-text.left{
  top:50%;left:1.5rem;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:left center;
}
.vertical-text.right{
  top:50%;right:1.5rem;
  transform:translateY(-50%) rotate(90deg);
  transform-origin:right center;
}
.vt-num{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:1rem;
  color:var(--white);
  letter-spacing:0;
}
.vt-divider{
  width:24px;height:1px;
  background:var(--white);
  display:inline-block;
  opacity:.5;
}

/* ===================== HERO ===================== */
.hero-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
  text-align:center;
  width:100%;
}
.center-content{
  max-width:1000px;
  margin:0 auto;
  width:100%;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.55rem 1.25rem;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  border-radius:100px;
  color:var(--light);
  font-size:.65rem;
  letter-spacing:3.5px;
  text-transform:uppercase;
  margin-bottom:2.5rem;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-weight:500;
  position:relative;
  overflow:hidden;
}
.hero-badge::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  animation:badgeShine 4s var(--ease) infinite;
}
@keyframes badgeShine{
  0%{left:-100%}
  60%,100%{left:100%}
}
.badge-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--white);
  box-shadow:0 0 8px rgba(255,255,255,.5);
  animation:badgePulse 2s var(--ease) infinite;
  flex-shrink:0;
}
@keyframes badgePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.8)}
}

.main-title{
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:clamp(3rem,9vw,8rem);
  line-height:.95;
  font-weight:400;
  letter-spacing:-.035em;
  color:var(--white);
  margin-bottom:2rem;
}
.main-title .line{
  display:block;
  opacity:0;
  transform:translateY(40px);
  animation:titleLine 1s var(--ease) forwards;
}
.main-title .line:nth-child(1){animation-delay:.3s}
.main-title .line:nth-child(2){animation-delay:.5s}
.main-title .line:nth-child(3){animation-delay:.7s}
@keyframes titleLine{to{opacity:1;transform:translateY(0)}}
.main-title em{font-style:italic;color:var(--white)}
.main-title .accent{font-style:italic;color:var(--white);position:relative}
.main-title .accent::before{
  content:'';
  display:inline-block;
  width:60px;height:1px;
  background:var(--white);
  vertical-align:middle;
  margin-right:1rem;
  opacity:.6;
}

.subtitle{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.05rem,2.4vw,1.45rem);
  font-style:italic;
  color:var(--light);
  max-width:580px;
  margin:0 auto 3rem;
  line-height:1.65;
  opacity:0;
  animation:fadeIn 1s var(--ease) .9s forwards;
  padding:0 .5rem;
}
@keyframes fadeIn{to{opacity:1}}

.hero-buttons{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  opacity:0;
  animation:fadeIn 1s var(--ease) 1.1s forwards;
  width:100%;
}

/* ===================== BUTTONS ===================== */
.btn-primary,.btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:.7rem;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  border-radius:100px;
  position:relative;
  overflow:hidden;
  transition:all .4s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  padding:1.05rem 2.1rem 1.05rem 2.4rem;
  background:var(--white);
  color:var(--black);
  border:1px solid var(--white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#1a1a1a 0%,#000 100%);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
  z-index:0;
}
.btn-primary > *{position:relative;z-index:1;transition:color .35s var(--ease)}
.btn-primary:hover{
  color:var(--white);
  box-shadow:0 0 0 4px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1);
  transform:translateY(-1px);
}
.btn-primary:hover::before{transform:translateY(0)}
.btn-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--black);
  color:var(--white);
  font-size:.65rem;
  transition:all .4s var(--ease);
  flex-shrink:0;
}
.btn-primary:hover .btn-arrow{
  background:var(--white);
  color:var(--black);
  transform:translateX(3px);
}

.btn-secondary{
  padding:1.05rem 2.1rem;
  background:rgba(255,255,255,.03);
  color:var(--white);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.btn-secondary::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--white);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
  z-index:0;
}
.btn-secondary > *{position:relative;z-index:1;transition:color .35s var(--ease)}
.btn-secondary:hover{color:var(--black);border-color:var(--white)}
.btn-secondary:hover::before{transform:translateY(0)}
.btn-secondary i{font-size:.7rem;transition:transform .35s var(--ease);flex-shrink:0}
.btn-secondary:hover i{transform:translateX(3px)}

/* ===================== ARTIST SECTION ===================== */
.artist-content{
  display:grid;
  grid-template-columns:.85fr 1fr;
  gap:5rem;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
  width:100%;
  height:100%;
}
.artist-image-wrap{position:relative}
.artist-image-frame{
  position:relative;
  aspect-ratio:3/4;
  max-width:420px;
  margin:0 auto;
  border-radius:8px;
  overflow:hidden;
  background:var(--bg2);
}
.artist-image-frame::before{
  content:'';
  position:absolute;
  inset:-15px;
  border:1px solid var(--line3);
  pointer-events:none;
  border-radius:12px;
}
.artist-image-frame img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:top;
  filter:grayscale(.2) contrast(1.05);
  transition:transform 1s var(--ease);
}
.artist-image-frame:hover img{transform:scale(1.04)}
.image-tag{
  position:absolute;
  top:1rem;left:1rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .85rem;
  background:rgba(10,10,10,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px;
  color:var(--white);
  font-size:.55rem;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:500;
}
.image-tag::before{
  content:'';
  width:5px;height:5px;
  border-radius:50%;
  background:var(--white);
}

.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  font-size:.62rem;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--soft);
  font-weight:500;
  margin-bottom:1.25rem;
}
.section-eyebrow::before{
  content:'';
  width:24px;height:1px;
  background:var(--white);
}

.artist-text h2{
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:.95;
  font-weight:400;
  letter-spacing:-.03em;
  color:var(--white);
  margin-bottom:1.25rem;
}
.artist-text h2 em{font-style:italic;color:var(--white)}

.role-badge{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.45rem 1rem;
  border:1px solid var(--line3);
  border-radius:100px;
  color:var(--light);
  font-size:.62rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:1.75rem;
}
.role-badge::before{
  content:'';
  width:5px;height:5px;
  border-radius:50%;
  background:var(--white);
  flex-shrink:0;
}

.artist-bio{
  color:var(--light);
  line-height:1.85;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1rem,1.8vw,1.2rem);
  margin-bottom:2.25rem;
  max-width:560px;
}

.artist-stats{
  display:flex;
  align-items:center;
  gap:1.75rem;
  padding:1.5rem 0;
  border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);
  margin-bottom:2.25rem;
}
.stat-item{flex:1}
.stat-num{
  display:block;
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:clamp(1.85rem,3.5vw,2.75rem);
  color:var(--white);
  font-weight:400;
  font-style:italic;
  line-height:1;
  margin-bottom:.5rem;
  letter-spacing:-.02em;
}
.stat-num i{font-size:.65em;font-style:italic}
.stat-label{
  font-size:.58rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--mute2);
  font-weight:500;
  line-height:1.4;
  display:block;
}
.stat-divider{
  width:1px;height:50px;
  background:var(--line2);
  flex-shrink:0;
}

/* ===================== PORTFOLIO SECTION ===================== */
.portfolio-content{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:3rem;
  height:100%;
  justify-content:center;
}
.portfolio-header{
  text-align:center;
  max-width:680px;
  margin:0 auto;
  width:100%;
}
.portfolio-header h2{
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:clamp(2.5rem,5.5vw,4.5rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--white);
  margin-bottom:1rem;
}
.portfolio-header h2 em{font-style:italic}
.portfolio-sub{
  color:var(--soft);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(1rem,2.5vw,1.15rem);
}

.portfolio-marquee{
  width:100%;
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
}
.portfolio-track{
  display:flex;
  gap:1.5rem;
  animation:marqueeScroll 50s linear infinite;
  width:max-content;
  align-items:center;
}
.portfolio-marquee:hover .portfolio-track{animation-play-state:paused}
@keyframes marqueeScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* === PORTFOLIO ITEM (DESKTOP DEFAULT — portrait) === */
.portfolio-item{
  position:relative;
  width:280px;
  min-width:280px;
  max-width:280px;
  height:380px;
  min-height:380px;
  max-height:380px;
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
  flex-grow:0;
  background:#0a0a0a;
  border:1px solid var(--line2);
  transition:all .4s var(--ease);
  display:block;
}
.portfolio-item:hover{
  transform:translateY(-6px);
  border-color:var(--line4);
}
.portfolio-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:grayscale(.3);
  transition:all .6s var(--ease);
  display:block;
}
.portfolio-item:hover img{
  filter:grayscale(0);
  transform:scale(1.06);
}
.portfolio-item::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.5) 0%,transparent 50%);
  pointer-events:none;
}
.portfolio-num{
  position:absolute;
  bottom:1rem;left:1rem;
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:1.25rem;
  color:var(--white);
  z-index:2;
}

.portfolio-cta{text-align:center}

/* ===================== PORTFOLIO TABS ===================== */
.portfolio-tabs{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:2rem;
  padding:.4rem;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  border-radius:100px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  flex-wrap:wrap;
  justify-content:center;
}
.portfolio-tab{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:.85rem 1.5rem .85rem 1.4rem;
  border-radius:100px;
  text-decoration:none;
  background:transparent;
  border:1px solid transparent;
  color:var(--soft);
  font-family:'Inter',sans-serif;
  font-size:.7rem;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
  transition:all .35s var(--ease);
  position:relative;
  overflow:hidden;
}
.portfolio-tab::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--white);
  opacity:0;
  border-radius:100px;
  transition:opacity .35s var(--ease);
  z-index:0;
}
.portfolio-tab > *{position:relative;z-index:1;transition:color .35s var(--ease)}
.portfolio-tab:hover{
  color:var(--black);
  border-color:var(--white);
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}
.portfolio-tab:hover::before{opacity:1}
.pt-num{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:.95rem;
  color:var(--white);
  letter-spacing:0;
  font-weight:400;
  transition:color .35s var(--ease);
}
.portfolio-tab:hover .pt-num{color:var(--black)}
.pt-label{font-weight:600}
.pt-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;height:24px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  font-size:.6rem;
  margin-left:.25rem;
  transition:all .35s var(--ease);
  flex-shrink:0;
}
.portfolio-tab:hover .pt-arrow{
  background:var(--black);
  color:var(--white);
  transform:translateX(3px);
}

/* ===================== SHOP SECTION ===================== */
.shop-content{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:2.5rem;
  height:100%;
  justify-content:center;
}
.shop-header{
  text-align:center;
  max-width:680px;
  margin:0 auto;
  width:100%;
}
.shop-header h2{
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:clamp(2.5rem,5.5vw,4.5rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--white);
  margin-bottom:1rem;
}
.shop-header h2 em{font-style:italic}
.shop-sub{
  color:var(--soft);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(1rem,2.5vw,1.15rem);
}

.shop-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}
.shop-card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line2);
  border-radius:10px;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:all .45s var(--ease);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.shop-card:hover{
  transform:translateY(-6px);
  border-color:var(--line4);
  background:rgba(255,255,255,.05);
}
.shop-card-img{
  aspect-ratio:1;
  background:var(--bg2);
  position:relative;
  overflow:hidden;
}
.shop-card-img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.shop-card:hover .shop-card-img img{transform:scale(1.07)}
.shop-card-overlay{
  position:absolute;
  inset:0;
  background:rgba(10,10,10,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .35s var(--ease);
  color:var(--white);
  font-size:1.1rem;
}
.shop-card:hover .shop-card-overlay{opacity:1}
.shop-card-overlay i{
  width:50px;height:50px;
  border-radius:50%;
  background:var(--white);
  color:var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  transform:scale(.8);
  transition:transform .4s var(--ease);
}
.shop-card:hover .shop-card-overlay i{transform:scale(1)}
.shop-card-body{padding:1rem 1.1rem 1.15rem}
.shop-card-body h4{
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:1rem;
  color:var(--white);
  font-weight:400;
  margin-bottom:.4rem;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.shop-card-price{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:1.05rem;
  color:var(--white);
  font-variant-numeric:tabular-nums;
}
.shop-empty{text-align:center;padding:3rem 2rem}
.shop-empty .empty-icon{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:3rem;
  color:var(--white);
  display:block;
  margin-bottom:1rem;
  opacity:.6;
}
.shop-empty p{
  color:var(--soft);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1.2rem;
}
.shop-cta{text-align:center}

/* ===================== BOOKING SECTION ===================== */
.booking-content{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:4rem;
  align-items:center;
  max-width:1300px;
  margin:0 auto;
  width:100%;
  height:100%;
}
.booking-left h2{
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:.95;
  font-weight:400;
  letter-spacing:-.03em;
  color:var(--white);
  margin-bottom:1.25rem;
}
.booking-left h2 em{font-style:italic}
.booking-bio{
  color:var(--light);
  line-height:1.8;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1rem,1.8vw,1.2rem);
  margin-bottom:2.5rem;
  max-width:520px;
}
.booking-info-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.25rem;
  max-width:560px;
}
.booking-info-item{
  padding:1.25rem 1.4rem;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.02);
  border-radius:8px;
  position:relative;
  transition:all .35s var(--ease);
  backdrop-filter:blur(10px);
}
.booking-info-item:hover{
  border-color:var(--line4);
  background:rgba(255,255,255,.04);
  transform:translateY(-2px);
}
.bii-num{
  display:inline-block;
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:1.5rem;
  color:var(--white);
  margin-bottom:.65rem;
  letter-spacing:0;
}
.bii-label{
  display:block;
  font-size:.65rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--white);
  font-weight:600;
  margin-bottom:.4rem;
}
.booking-info-item p{
  color:var(--mute2);
  font-size:.82rem;
  line-height:1.5;
}
.booking-right{position:relative}

.quick-form{
  background:rgba(255,255,255,.025);
  border:1px solid var(--line2);
  border-radius:14px;
  padding:2.25rem;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  position:relative;
  box-shadow:0 25px 60px rgba(0,0,0,.5);
}
.quick-form::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:14px;
  padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.qf-header{
  margin-bottom:1.75rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line2);
}
.qf-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font-size:.6rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--mute2);
  font-weight:500;
  margin-bottom:.75rem;
}
.qf-eyebrow::before{
  content:'';
  width:18px;height:1px;
  background:var(--white);
}
.qf-header h3{
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:clamp(1.5rem,3.5vw,1.85rem);
  color:var(--white);
  font-weight:400;
  letter-spacing:-.01em;
}
.qf-header h3 em{font-style:italic;color:var(--soft)}

.qf-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:1rem;
}
.qf-group{margin-bottom:1rem}
.qf-group label{
  display:block;
  font-size:.62rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--soft);
  margin-bottom:.55rem;
  font-weight:500;
}
.qf-group input,
.qf-group select,
.qf-group textarea{
  width:100%;
  padding:.85rem 1rem;
  background:var(--bg3);
  border:1px solid var(--line3);
  color:var(--white);
  font-family:'Inter',sans-serif;
  font-size:16px;
  border-radius:6px;
  outline:none;
  transition:all .3s var(--ease);
}
.qf-group input:focus,
.qf-group select:focus,
.qf-group textarea:focus{
  border-color:var(--white);
  background:var(--bg4);
  box-shadow:0 0 0 3px rgba(255,255,255,.05);
}
.qf-group input::placeholder,
.qf-group textarea::placeholder{color:var(--mute)}
.qf-group select{
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  cursor:pointer;
  padding-right:2.5rem;
}
.qf-group textarea{
  resize:vertical;
  min-height:80px;
  line-height:1.5;
  font-family:'Inter',sans-serif;
}

.qf-actions{
  display:flex;
  gap:.75rem;
  margin-top:1.5rem;
  flex-wrap:wrap;
}
.qf-actions .btn-primary,
.qf-actions .btn-secondary{
  flex:1;
  justify-content:center;
  min-width:160px;
  padding:.95rem 1.25rem;
}

.qf-success{
  display:none;
  text-align:center;
  padding:1.5rem 0;
  margin-top:1rem;
}
.qf-success.show{display:block;animation:fadeIn .4s var(--ease)}
.qf-success-icon{
  width:55px;height:55px;
  border-radius:50%;
  background:var(--white);
  color:var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1rem;
  font-size:1.25rem;
}
.qf-success h4{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:1.4rem;
  color:var(--white);
  margin-bottom:.5rem;
  font-weight:400;
}
.qf-success p{
  color:var(--soft);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1.05rem;
}

/* ===================== CONTACT SECTION ===================== */
.contact-content{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:3rem;
  height:100%;
  justify-content:center;
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
}
.contact-info-block h2{
  font-family:'Instrument Serif','Playfair Display',serif;
  font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:.95;
  font-weight:400;
  letter-spacing:-.03em;
  color:var(--white);
  margin-bottom:1.25rem;
}
.contact-info-block h2 em{font-style:italic}
.contact-info-block > p{
  color:var(--light);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(1rem,2vw,1.15rem);
  line-height:1.7;
  margin-bottom:2rem;
  max-width:480px;
}
.contact-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.contact-row{
  display:flex;
  align-items:center;
  gap:1.1rem;
  padding:1.1rem 1.25rem;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line2);
  border-radius:10px;
  text-decoration:none;
  color:inherit;
  transition:all .35s var(--ease);
}
.contact-row:not(.static){cursor:pointer}
.contact-row:not(.static):hover{
  background:rgba(255,255,255,.05);
  border-color:var(--line4);
  transform:translateX(4px);
}
.contact-row-icon{
  width:42px;height:42px;
  border-radius:50%;
  background:var(--bg3);
  border:1px solid var(--line3);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  font-size:.95rem;
  flex-shrink:0;
}
.contact-row-text{flex:1;min-width:0}
.cr-label{
  display:block;
  font-size:.58rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--mute2);
  margin-bottom:.25rem;
  font-weight:500;
}
.cr-value{
  display:block;
  color:var(--white);
  font-size:.92rem;
  font-weight:500;
  word-break:break-word;
}
.contact-row-arrow{
  color:var(--mute);
  font-size:.7rem;
  transition:all .35s var(--ease);
  flex-shrink:0;
}
.contact-row:not(.static):hover .contact-row-arrow{
  color:var(--white);
  transform:translateX(4px);
}
.contact-card-block{position:relative}
.contact-quote{
  background:rgba(255,255,255,.025);
  border:1px solid var(--line2);
  border-radius:14px;
  padding:3rem 2.5rem;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  position:relative;
  margin-bottom:1.5rem;
}
.quote-mark{
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-size:5rem;
  color:var(--line4);
  line-height:.5;
  display:block;
  margin-bottom:.5rem;
}
.contact-quote p{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(1.1rem,2vw,1.35rem);
  line-height:1.6;
  color:var(--white);
  margin-bottom:1.75rem;
}
.contact-quote p em{color:var(--white)}
.quote-author{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  font-size:.65rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--soft);
  font-weight:600;
}
.qa-line{
  width:30px;height:1px;
  background:var(--white);
}
.contact-cta-row{
  display:flex;
  justify-content:flex-start;
}

.section-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  padding-top:2rem;
  border-top:1px solid var(--line2);
  font-size:.65rem;
  letter-spacing:1.5px;
  color:var(--mute);
  font-weight:400;
  text-transform:uppercase;
  flex-wrap:wrap;
  text-align:center;
}
.section-footer a{
  color:var(--soft);
  text-decoration:none;
  transition:color .3s var(--ease);
}
.section-footer a:hover{color:var(--white)}
.footer-divider{color:var(--mute)}

/* ===================== NAV INDICATORS ===================== */
.nav-indicators{
  position:fixed;
  right:2rem;
  bottom:50%;
  transform:translateY(50%);
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.indicator{
  width:8px;height:8px;
  border-radius:50%;
  background:transparent;
  border:1px solid rgba(255,255,255,.3);
  cursor:pointer;
  transition:all .35s var(--ease);
  position:relative;
}
.indicator::before{
  content:attr(data-label);
  position:absolute;
  right:calc(100% + 1rem);
  top:50%;
  transform:translateY(-50%);
  font-size:.55rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--soft);
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
.indicator:hover::before{opacity:1}
.indicator:hover{
  border-color:var(--white);
  transform:scale(1.2);
}
.indicator.active{
  background:var(--white);
  border-color:var(--white);
  width:24px;
  border-radius:8px;
}
.indicator.active::before{opacity:1;color:var(--white)}

/* ===================== SWIPE HINT ===================== */
.swipe-hint{
  display:none;
  position:fixed;
  left:50%;
  bottom:5rem;
  transform:translateX(-50%);
  z-index:60;
  background:rgba(10,10,10,.85);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  border:1px solid var(--line2);
  border-radius:100px;
  padding:.65rem 1.1rem;
  align-items:center;
  gap:.6rem;
  font-size:.6rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--white);
  font-weight:500;
  pointer-events:none;
  opacity:0;
  animation:hintShow 4s var(--ease) 1.5s forwards;
}
.swipe-hint i{
  font-size:.85rem;
  animation:hintArrow 1.5s var(--ease) infinite;
}
@keyframes hintShow{
  0%{opacity:0;transform:translateX(-50%) translateY(15px)}
  15%,75%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-10px)}
}
@keyframes hintArrow{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-6px)}
}

/* ===================== SCROLL PROGRESS ===================== */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:0%;
  background:var(--white);
  z-index:9998;
  transition:width .4s var(--ease);
  box-shadow:0 0 12px rgba(255,255,255,.5);
}

/* =========================================================
   ===================== TABLET (1100px) ===================
   ========================================================= */
@media(max-width:1100px) and (min-width:901px){
  :root{--section-pad-x:var(--section-pad-x-tablet)}

  .navbar{padding:1.1rem 1.5rem}
  .navbar.scrolled{padding:.9rem 1.5rem}
  .nav-container{gap:1.25rem}
  .logo-text{font-size:1.25rem}
  .logo-img{height:36px;max-width:170px}
  .navbar.scrolled .logo-img{height:32px}

  .nav-link{
    padding:.6rem .9rem;
    font-size:.6rem;
    letter-spacing:1.5px;
  }
  .nav-link .nav-num{font-size:.7rem}

  .vertical-text{font-size:.55rem;letter-spacing:2.5px}
  .vertical-text.left{left:1rem}
  .vertical-text.right{right:1rem}

  .section-content{padding:5.5rem var(--section-pad-x) 4rem}

  .artist-content{
    gap:3rem;
    grid-template-columns:.8fr 1fr;
  }
  .artist-image-frame{max-width:340px}

  .booking-content{
    gap:2.5rem;
    grid-template-columns:.85fr 1.15fr;
  }
  .booking-info-grid{gap:1rem}

  .contact-grid{
    gap:3rem;
    grid-template-columns:1fr 1fr;
  }

  .shop-grid{
    grid-template-columns:repeat(3,1fr);
    gap:1.25rem;
  }

  .portfolio-item{
    width:240px;
    min-width:240px;
    max-width:240px;
    height:330px;
    min-height:330px;
    max-height:330px;
  }

  .quick-form{padding:1.85rem}
  .qf-row{gap:.85rem}

  .contact-quote{padding:2.5rem 2rem}
}

/* =========================================================
   ============== MOBILE / TABLET STACK (≤900px) ===========
   ========================================================= */
@media(max-width:900px){
  :root{--section-pad-x:var(--section-pad-x-mobile)}

  .navbar{padding:1rem 1.25rem}
  .navbar.scrolled{padding:.85rem 1.25rem}
  .nav-container{gap:.75rem}
  .logo-text{font-size:1.15rem}
  .logo-img{height:32px;max-width:150px}
  .navbar.scrolled .logo-img{height:28px}

  .nav-actions{
    gap:.4rem;
    margin-left:auto;
  }
  .cart-btn,.sidebar-toggle{width:40px;height:40px}
  .sidebar-toggle{display:none}

  .nav-toggle{
    display:flex;
    width:40px;height:40px;
    margin-left:.4rem;
  }

  .nav-container{
    gap:0;
    justify-content:flex-start;
  }

  .nav-menu{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    background:#000000;
    background-color:#000000 !important;
    flex-direction:column;
    justify-content:flex-start;
    padding:0;
    transform:translateX(100%);
    transition:transform .55s var(--ease);
    z-index:9000;
    box-shadow:-30px 0 80px rgba(0,0,0,.6);
    overflow:hidden;
    display:flex !important;
    visibility:hidden;
    opacity:0;
  }
  .nav-menu.active{
    transform:translateX(0);
    visibility:visible;
    opacity:1;
  }

  .nav-menu::before{
    content:'';
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse at 80% 20%,rgba(255,255,255,.04) 0%,transparent 45%),
      radial-gradient(ellipse at 20% 80%,rgba(255,255,255,.025) 0%,transparent 40%),
      linear-gradient(135deg,#0a0a0a 0%,#000 100%);
    pointer-events:none;
    z-index:0;
  }

  .nav-menu > .mobile-menu-header,
  .nav-menu > .nav-links,
  .nav-menu > .mobile-menu-footer{
    position:relative;
    z-index:2;
    background:#000000;
  }

  .mobile-menu-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:1.5rem 1.5rem;
    border-bottom:1px solid var(--line2);
  }
  .mobile-logo{
    font-family:'Instrument Serif','Playfair Display',serif;
    font-size:1.25rem;
    color:var(--white);
  }
  .mobile-logo em{font-style:italic;color:var(--soft)}
  .mobile-close{
    width:40px;height:40px;
    border-radius:50%;
    border:1px solid var(--line3);
    background:transparent;
    color:var(--white);
    cursor:pointer;
    font-size:1rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .3s var(--ease);
  }
  .mobile-close:hover{
    background:var(--white);
    color:var(--black);
  }

  .nav-links{
    display:flex;
    flex-direction:column;
    width:100%;
    background:#000000 !important;
    border:none;
    border-radius:0;
    padding:2rem 1.5rem;
    box-shadow:none;
    gap:0;
    flex:1;
    align-items:stretch;
    position:relative;
    z-index:2;
    overflow-y:auto;
  }
  .nav-link{
    width:100%;
    padding:1.25rem 0;
    border-bottom:1px solid var(--line2);
    border-radius:0;
    font-size:1.5rem;
    font-family:'Instrument Serif','Playfair Display',serif;
    text-transform:none;
    letter-spacing:.5px;
    font-weight:400;
    color:var(--white);
    font-style:italic;
    text-align:left;
    justify-content:flex-start;
    background:transparent!important;
  }
  .nav-link .nav-num{
    font-size:.95rem;
    color:var(--mute2);
    margin-right:.85rem;
  }
  .nav-link.active,
  .nav-link:hover{background:transparent!important}
  .nav-link.active{color:var(--white)}
  .nav-link.active .nav-num{color:var(--white)}

  .mobile-menu-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1.5rem;
    border-top:1px solid var(--line2);
  }
  .cart-link-mobile{
    flex:1;
    display:inline-flex;
    align-items:center;
    gap:.75rem;
    padding:.85rem 1.25rem;
    background:rgba(255,255,255,.05);
    border:1px solid var(--line3);
    border-radius:100px;
    color:var(--white);
    text-decoration:none;
    font-size:.7rem;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:500;
    min-height:48px;
  }
  .cart-link-mobile svg{
    width:18px;height:18px;
    stroke:currentColor;
    fill:none;
    flex-shrink:0;
  }
  .whatsapp-link{
    width:48px;height:48px;
    border-radius:50%;
    background:var(--white);
    color:var(--black);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    text-decoration:none;
    transition:all .3s var(--ease);
    flex-shrink:0;
  }
  .whatsapp-link:hover{transform:scale(1.05)}

  .right-sidebar{width:100%;max-width:420px}
  .sidebar-content{padding:5rem 1.75rem 2rem}
  .close-sidebar{padding:1.25rem 1.75rem}

  .vertical-text{display:none}

  /* Mobile: sections allow inner scroll (vertical), horizontal swipes change sections */
  .section-content{
    padding:5.5rem 1.5rem 2rem;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    justify-content:flex-start;
    height:100vh;
    height:100dvh;
  }
  .section-content::-webkit-scrollbar{display:none}
  .section-content{scrollbar-width:none}

  /* Inner content blocks: natural height + bottom padding to clear dots */
  .hero-content,
  .artist-content,
  .portfolio-content,
  .shop-content,
  .booking-content,
  .contact-content{
    height:auto;
    min-height:100%;
    padding-bottom:7rem;
  }

  /* 60px breathing room below CTAs in mobile sections */
  .artist-text > .btn-secondary,
  .artist-text > .btn-primary,
  .portfolio-cta,
  .shop-cta,
  .contact-cta-row,
  .hero-buttons{
    margin-bottom:60px;
  }

  .quick-form{margin-bottom:3rem}

  .nav-indicators{
    right:auto;
    left:50%;
    bottom:1rem;
    top:auto;
    transform:translateX(-50%);
    flex-direction:row;
    gap:.75rem;
    background:rgba(10,10,10,.92);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    padding:.65rem 1.1rem;
    border-radius:100px;
    border:1px solid var(--line2);
    box-shadow:0 8px 30px rgba(0,0,0,.5);
  }
  .indicator::before{display:none}

  .swipe-hint{display:flex}

  /* HERO mobile */
  .hero-content{
    justify-content:center;
    min-height:calc(100vh - 11rem);
    min-height:calc(100dvh - 11rem);
  }
  .hero-badge{margin-bottom:2rem}
  .main-title{margin-bottom:1.75rem}
  .subtitle{margin-bottom:2.5rem;max-width:100%}
  .hero-buttons{flex-direction:column;align-items:center;gap:.85rem}
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary{
    width:100%;
    max-width:340px;
    justify-content:center;
  }

  /* Sound toggle mobile */
  .hero-section .sound-toggle{
    bottom:5.5rem;
    right:1rem;
    padding:.65rem .85rem;
    font-size:.55rem;
    letter-spacing:1.8px;
    gap:.55rem;
  }
  .sound-icon{width:16px;height:16px}
  .sound-label{max-width:110px}

  /* Artist mobile - stack */
  .artist-content{
    grid-template-columns:1fr;
    gap:2rem;
    align-content:start;
    padding:1rem 0;
  }
  .artist-image-wrap{order:1}
  .artist-text{order:2;text-align:left}
  .artist-image-frame{max-width:240px}
  .artist-text h2{margin-bottom:1rem;font-size:clamp(2.25rem,8vw,3rem)}
  .artist-bio{margin-bottom:1.5rem;max-width:100%;font-size:1rem;line-height:1.75}

  /* Stats stack vertically on mobile */
  .artist-stats{
    flex-direction:column;
    align-items:stretch;
    gap:1.25rem;
    padding:1.25rem 0;
    margin-bottom:1.75rem;
  }
  .stat-divider{display:none}
  .stat-item{
    flex:1 1 auto;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--line2);
  }
  .stat-item:last-child{border-bottom:none;padding-bottom:0}
  .stat-num{
    margin-bottom:0;
    font-size:clamp(1.65rem,5vw,2rem);
    flex-shrink:0;
  }
  .stat-label{
    text-align:right;
    line-height:1.4;
  }

  /* ============================================================
     PORTFOLIO MOBILE — sized to fit the screen comfortably
     Using fixed dimensions with 3:4 ratio matching desktop.
     ============================================================ */
  .portfolio-content{
    gap:1.5rem;
    padding:1rem 0;
    justify-content:flex-start;
  }
  .portfolio-marquee{
    margin-left:calc(var(--section-pad-x-mobile) * -1);
    margin-right:calc(var(--section-pad-x-mobile) * -1);
    width:calc(100% + var(--section-pad-x-mobile) * 2);
    padding-bottom:14.5rem;
    mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%);
    overflow:hidden;
  }
  .portfolio-track{
    display:flex !important;
    gap:.85rem;
    animation-duration:40s;
    align-items:center !important;
  }
  .portfolio-item{
    position:relative !important;
    width:210px !important;
    min-width:210px !important;
    max-width:210px !important;
    height:280px !important;
    min-height:280px !important;
    max-height:280px !important;
    flex-shrink:0 !important;
    flex-grow:0 !important;
    border-radius:8px;
    overflow:hidden;
    background:#0a0a0a;
    border:1px solid var(--line2);
    display:block !important;
    aspect-ratio:auto !important;
  }
  .portfolio-item img{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
  }

  /* Shop mobile - 2 columns */
  .shop-grid{
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
  }
  .shop-content{
    gap:2rem;
    padding:1rem 0;
    justify-content:flex-start;
  }

  /* Booking mobile - stack */
  .booking-content{
    grid-template-columns:1fr;
    gap:2rem;
    padding:1rem 0;
    align-content:start;
  }
  .booking-info-grid{
    grid-template-columns:1fr 1fr;
    max-width:100%;
    gap:.85rem;
  }
  .booking-bio{margin-bottom:1.75rem;max-width:100%}
  .booking-left h2{font-size:clamp(2.25rem,8vw,3rem)}

  .quick-form{padding:1.85rem 1.5rem}
  .qf-row{grid-template-columns:1fr;gap:0}
  .qf-actions{flex-direction:column}
  .qf-actions .btn-primary,
  .qf-actions .btn-secondary{
    width:100%;
    min-width:0;
  }

  /* Contact mobile - stack */
  .contact-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .contact-content{
    padding:1rem 0;
    justify-content:flex-start;
  }
  .contact-info-block h2{font-size:clamp(2.25rem,8vw,3rem)}
  .contact-quote{padding:2rem 1.75rem}
  .contact-quote p{margin-bottom:1.5rem}

  .section-footer{
    flex-direction:row;
    flex-wrap:wrap;
    gap:.5rem;
    font-size:.6rem;
    margin-top:2rem;
    margin-bottom:5rem;
  }
}

/* =========================================================
   ===================== TABLET PORTRAIT (≤768px) ==========
   ========================================================= */
@media(max-width:768px){
  .portfolio-tabs{
    flex-direction:column;
    width:100%;
    max-width:380px;
    gap:.4rem;
    border-radius:14px;
    margin-left:auto;
    margin-right:auto;
  }
  .portfolio-tab{
    width:100%;
    justify-content:flex-start;
    padding:.95rem 1.25rem;
    font-size:.68rem;
  }
}

/* =========================================================
   ====================== MOBILE (≤600px) ==================
   ========================================================= */
@media(max-width:600px){
  .navbar{padding:.85rem 1rem}
  .navbar.scrolled{padding:.7rem 1rem}
  .logo-text{font-size:1.05rem}
  .logo-mark{width:7px;height:7px}
  .logo-img{height:28px;max-width:130px}
  .navbar.scrolled .logo-img{height:25px}

  .section-content{padding:5.5rem 1rem 2rem}
  .hero-content,
  .artist-content,
  .portfolio-content,
  .shop-content,
  .booking-content,
  .contact-content{
    padding-bottom:6rem;
  }

  .hero-badge{
    font-size:.55rem;
    letter-spacing:2.5px;
    margin-bottom:1.85rem;
    padding:.45rem 1rem;
  }
  .main-title{
    font-size:clamp(2.5rem,12vw,4rem);
    margin-bottom:1.5rem;
  }
  .main-title .accent::before{display:none}
  .subtitle{
    margin-bottom:2.25rem;
    font-size:1.05rem;
  }

  .btn-primary,.btn-secondary{
    padding:.95rem 1.85rem;
    font-size:.65rem;
    min-height:48px;
  }
  .btn-primary{padding:.95rem 1.85rem .95rem 2.1rem}
  .btn-arrow{width:24px;height:24px}

  /* Artist mobile - smaller */
  .artist-content{gap:1.75rem}
  .artist-image-frame{max-width:220px}
  .artist-stats{
    padding:1rem 0;
    gap:1rem;
  }
  .stat-num{font-size:1.65rem}

  /* PORTFOLIO smaller phones */
  .portfolio-item{
    width:180px !important;
    min-width:180px !important;
    max-width:180px !important;
    height:240px !important;
    min-height:240px !important;
    max-height:240px !important;
  }

  /* Booking */
  .booking-info-grid{
    grid-template-columns:1fr;
    gap:.75rem;
  }
  .booking-info-item{padding:1.1rem 1.25rem}

  .quick-form{padding:1.65rem 1.25rem}
  .qf-header{margin-bottom:1.5rem;padding-bottom:1.25rem}

  /* Shop */
  .shop-grid{
    grid-template-columns:1fr 1fr;
    gap:.85rem;
  }
  .shop-card-body{padding:.85rem .9rem 1rem}
  .shop-card-body h4{font-size:.92rem}
  .shop-card-price{font-size:.95rem}

  /* Contact */
  .contact-grid{gap:2rem}
  .contact-row{
    padding:.95rem 1rem;
    gap:.85rem;
  }
  .contact-row-icon{width:38px;height:38px;font-size:.9rem}
  .cr-value{font-size:.85rem}

  .contact-quote{padding:1.75rem 1.5rem}
  .quote-mark{font-size:4rem}

  .nav-indicators{
    padding:.5rem .85rem;
    gap:.6rem;
    bottom:1rem;
  }
  .indicator{width:7px;height:7px}
  .indicator.active{width:20px}
}

/* =========================================================
   ================= SMALL MOBILE (≤420px) =================
   ========================================================= */
@media(max-width:420px){
  :root{--section-pad-x-mobile:var(--section-pad-x-small)}

  .navbar{padding:.75rem .9rem}
  .navbar.scrolled{padding:.65rem .9rem}
  .logo-text{font-size:1rem;letter-spacing:.3px}
  .logo-link{gap:.5rem}
  .logo-img{height:26px;max-width:115px}
  .navbar.scrolled .logo-img{height:23px}

  .nav-actions{gap:.35rem}
  .cart-btn,.nav-toggle{width:38px;height:38px}
  .cart-btn svg{width:15px;height:15px}

  .section-content{padding:5rem .9rem 2rem}
  .hero-content,
  .artist-content,
  .portfolio-content,
  .shop-content,
  .booking-content,
  .contact-content{
    padding-bottom:5.5rem;
  }

  .hero-section .sound-toggle{
    bottom:5.5rem;
    right:.75rem;
    padding:.6rem .8rem;
    font-size:.52rem;
    letter-spacing:1.5px;
  }
  .sound-icon{width:14px;height:14px}
  .sound-label{
    max-width:0;
    opacity:0;
    margin-left:-.55rem;
  }

  .hero-badge{
    font-size:.52rem;
    padding:.4rem .85rem;
    letter-spacing:2px;
  }
  .main-title{font-size:2.5rem;line-height:1}
  .subtitle{font-size:.98rem;margin-bottom:2rem}

  .btn-primary,.btn-secondary{
    padding:.85rem 1.5rem;
    font-size:.62rem;
    gap:.6rem;
  }
  .btn-primary{padding:.85rem 1.5rem .85rem 1.75rem}
  .btn-arrow{width:22px;height:22px;font-size:.55rem}

  .artist-text h2{font-size:2rem}
  .artist-bio{font-size:.95rem;line-height:1.7}
  .artist-image-frame{max-width:200px}

  .portfolio-header h2,
  .shop-header h2,
  .booking-left h2,
  .contact-info-block h2{font-size:2.25rem}

  /* PORTFOLIO smallest screens */
  .portfolio-item{
    width:160px !important;
    min-width:160px !important;
    max-width:160px !important;
    height:215px !important;
    min-height:215px !important;
    max-height:215px !important;
  }

  .quick-form{padding:1.5rem 1.1rem}
  .qf-header h3{font-size:1.4rem}
  .qf-group input,
  .qf-group select,
  .qf-group textarea{padding:.8rem .85rem}

  .booking-info-item{padding:1rem 1.1rem}
  .bii-num{font-size:1.35rem}
  .booking-info-item p{font-size:.78rem}

  .shop-grid{grid-template-columns:1fr}
  .shop-card-img{aspect-ratio:1.4/1}

  .contact-quote{padding:1.5rem 1.25rem}
  .contact-quote p{font-size:1rem;margin-bottom:1.25rem}
  .quote-mark{font-size:3.25rem}

  .nav-link{
    padding:1.1rem 0;
    font-size:1.3rem;
  }
  .nav-link .nav-num{font-size:.85rem;margin-right:.65rem}
  .mobile-menu-header{padding:1.25rem 1.25rem}
  .mobile-menu-footer{padding:1.25rem;gap:.75rem}
  .nav-links{padding:1.5rem 1.25rem}

  .sidebar-content{padding:4.5rem 1.25rem 1.5rem}
  .close-sidebar{padding:1.1rem 1.25rem}

  .nav-indicators{
    padding:.45rem .75rem;
    gap:.5rem;
  }
}

/* =========================================================
   ================= EXTRA SMALL (≤360px) ==================
   ========================================================= */
@media(max-width:360px){
  .logo-text{font-size:.92rem}
  .logo-img{height:24px;max-width:100px}
  .nav-actions{gap:.3rem}
  .cart-btn,.nav-toggle{width:36px;height:36px}

  .section-content{padding:5rem .75rem 2rem}
  .hero-content,
  .artist-content,
  .portfolio-content,
  .shop-content,
  .booking-content,
  .contact-content{
    padding-bottom:5rem;
  }

  .main-title{font-size:2.2rem}

  .portfolio-item{
    width:140px !important;
    min-width:140px !important;
    max-width:140px !important;
    height:190px !important;
    min-height:190px !important;
    max-height:190px !important;
  }

  .quick-form{padding:1.35rem 1rem}
  .qf-header h3{font-size:1.25rem}

  .contact-row{padding:.85rem .9rem;gap:.75rem}
  .contact-row-icon{width:34px;height:34px;font-size:.82rem}
}

/* =========================================================
   ================= LANDSCAPE PHONE =======================
   ========================================================= */
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
  .section-content{
    padding:5rem 1.5rem 4.5rem;
    justify-content:flex-start;
  }
  .main-title{font-size:clamp(2rem,7vw,3.5rem);margin-bottom:1rem}
  .hero-badge{margin-bottom:1.25rem}
  .subtitle{margin-bottom:1.5rem}
  .artist-content{
    grid-template-columns:.7fr 1fr;
    gap:2rem;
  }
  .artist-image-wrap{order:0}
  .artist-text{order:0}
  .artist-image-frame{max-width:200px}
  .booking-content{
    grid-template-columns:1fr 1fr;
    gap:2rem;
  }
  .contact-grid{
    grid-template-columns:1fr 1fr;
    gap:2rem;
  }
}

/* =========================================================
   ================= LARGE DESKTOP (≥1600px) ===============
   ========================================================= */
@media(min-width:1600px){
  :root{--section-pad-x:7rem}

  .main-title{font-size:clamp(4rem,8vw,9rem)}
  .artist-content{max-width:1300px;gap:6rem}
  .portfolio-content{max-width:1500px}
  .shop-content{max-width:1300px}
  .booking-content{max-width:1400px}
  .contact-content{max-width:1300px}
}

/* =========================================================
   ================= REDUCED MOTION ========================
   ========================================================= */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .portfolio-track{animation:none}
  .background-video img.bg-img{animation:none}
}

/* =========================================================
   ================= HOVER-CAPABLE DEVICES =================
   ========================================================= */
@media(hover:none){
  .shop-card:hover,
  .booking-info-item:hover,
  .contact-row:not(.static):hover,
  .portfolio-item:hover{transform:none}
  .btn-primary:hover,
  .btn-secondary:hover,
  .cart-btn:hover{transform:none}
}