/* ==========================================================================
   ALBTIN PRODUCTION STUDIO — STYLE SHEET
   Concept: the brand's own mark is a turntable disc — the whole site plays
   like a record. Tokens below drive both light ("day-press") and dark
   ("night-press") themes.
   ========================================================================== */

:root{
  --bg: #FAF6EF;
  --bg-soft: #F1EAE0;
  --surface: #FFFFFF;
  --surface-2: #FFFDFA;
  --ink: #1C1712;
  --ink-soft: #6B6055;
  --ink-faint: #A79C8E;
  --line: rgba(28,23,18,0.12);
  --line-strong: rgba(28,23,18,0.22);

  --accent: #E15427;
  --accent-2: #F2A93C;
  --accent-ink: #FFFFFF;

  --shadow: 0 30px 60px -25px rgba(28,23,18,0.35);
  --shadow-sm: 0 10px 24px -14px rgba(28,23,18,0.35);

  --radius: 18px;
  --radius-sm: 10px;

  --font-display: "Bebas Neue", "Archivo Black", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", monospace;

  --ease: cubic-bezier(.22,.68,0,1);
  --dur: .6s;

  color-scheme: light;
}

html[data-theme="dark"]{
  --bg: #131110;
  --bg-soft: #1B1815;
  --surface: #1D1A17;
  --surface-2: #201D19;
  --ink: #F4EEE4;
  --ink-soft: #B9AC9C;
  --ink-faint: #756A5D;
  --line: rgba(244,238,228,0.12);
  --line-strong: rgba(244,238,228,0.22);

  --accent: #FF6B3A;
  --accent-2: #FFC24B;
  --accent-ink: #17130F;

  --shadow: 0 30px 70px -25px rgba(0,0,0,0.6);
  --shadow-sm: 0 12px 26px -14px rgba(0,0,0,0.55);

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .4s var(--ease), color .4s var(--ease);
}
img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }
ul{ list-style: none; margin:0; padding:0; }
input, textarea, select, button{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.section-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}
.eyebrow.center{ display:flex; justify-content:center; width:100%; }

.h2{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: .96;
  letter-spacing: .01em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.lead{
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

.section-head{ margin-bottom: 3rem; max-width: 640px; }
.section-head__note{ color: var(--ink-soft); font-size: 1rem; max-width: 50ch; }

/* ---------- Grain overlay ---------- */
.grain{
  position: fixed; inset:0; z-index: 998; pointer-events:none;
  opacity:.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .grain{ opacity:.06; mix-blend-mode: overlay; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1.5px solid transparent;
  transition: transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
  white-space: nowrap;
}
.btn svg{ width:16px; height:16px; stroke: currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn--solid{
  background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}
.btn--solid:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.btn--ghost{
  background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.btn--ghost:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }
.btn--small{ padding: .6rem 1.2rem; font-size: .82rem; }
.btn--wide{ width: 100%; }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar{
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: .74rem;
}
html[data-theme="dark"] .topbar{ background:#0B0A09; color: var(--ink-soft); }
.topbar__inner{
  max-width: 1240px; margin:0 auto;
  padding: .55rem clamp(1.25rem, 4vw, 3rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.topbar__socials{ display:flex; gap: .9rem; }
.topbar__socials a{ display:flex; opacity:.85; transition: opacity .25s, transform .25s; }
.topbar__socials a:hover{ opacity:1; transform: translateY(-1px); }
.topbar__socials svg{ width:14px; height:14px; fill: currentColor; }
.topbar__contacts{ display:flex; gap: 1.4rem; }
.topbar__contacts a{ display:flex; align-items:center; gap:.4rem; opacity:.9; }
.topbar__contacts svg{ width:12px; height:12px; fill:currentColor; opacity:.8; }
.topbar__contacts--wide{ display:flex; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position: sticky; top:0; z-index: 500;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.is-scrolled{ border-bottom-color: var(--line); box-shadow: 0 8px 26px -20px rgba(0,0,0,.4); }
.nav__inner{
  max-width: 1240px; margin:0 auto;
  padding: .95rem clamp(1.25rem, 4vw, 3rem);
  display:flex; align-items:center; justify-content:space-between; gap: 1.5rem;
}
.nav__logo{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.nav__disc{ width: 74px; height:34px; color: var(--accent); }
.nav__disc svg{ animation: spin 9s linear infinite; } 

.nav__links{ display:flex; gap: 2.1rem; }
.nav__links a{
  display:flex; align-items:baseline; gap:.4rem;
  font-size: .92rem; font-weight: 600; color: var(--ink-soft);
  position:relative; padding: .3rem 0;
  transition: color .25s;
}
.nav__links a .idx{ font-family: var(--font-mono); font-size: .68rem; color: var(--accent); }
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
  background: var(--accent); transition: right .3s var(--ease);
}
.nav__links a:hover{ color: var(--ink); }
.nav__links a:hover::after{ right:0; }

.nav__actions{ display:flex; align-items:center; gap: .9rem; }

.lang-toggle{
  display:flex; align-items:center; background: var(--surface); border:1px solid var(--line);
  border-radius: 999px; padding: 3px; gap: 2px; flex-shrink:0;
}
.lang-toggle__opt{
  font-family: var(--font-mono); font-size: .68rem; letter-spacing:.06em;
  padding: .35rem .6rem; border-radius: 999px; color: var(--ink-soft);
  transition: background .3s, color .3s;
}
.lang-toggle__opt.is-active{ background: var(--accent); color: var(--accent-ink); }
.theme-toggle{
  width: 40px; height:40px; border-radius:50%;
  background: var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink); position:relative; overflow:hidden; flex-shrink:0;
  transition: border-color .3s, transform .3s;
}
.theme-toggle:hover{ transform: rotate(-14deg); border-color: var(--accent); }
.theme-toggle svg{ position:absolute; width:18px; height:18px; fill:currentColor; stroke:none; transition: transform .45s var(--ease), opacity .3s; }
.theme-toggle .ic-moon{ opacity:0; transform: scale(.4) rotate(40deg); }
.theme-toggle .ic-sun{ opacity:1; transform: scale(1) rotate(0); }
html[data-theme="dark"] .theme-toggle .ic-sun{ opacity:0; transform: scale(.4) rotate(-40deg); }
html[data-theme="dark"] .theme-toggle .ic-moon{ opacity:1; transform: scale(1) rotate(0); }

.nav__cta{ display:inline-flex; }

.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width: 40px; height: 40px; background:none; border:none; padding:0;
}
.burger span{ width: 22px; height:2px; background: var(--ink); margin:0 auto; transition: transform .3s var(--ease), opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:flex; flex-direction:column;
  max-height:0; overflow:hidden;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: max-height .45s var(--ease), border-color .3s;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.mobile-menu.is-open{ max-height: 480px; border-bottom-color: var(--line); padding-bottom: 1.5rem; }
.mobile-menu a{
  padding: .85rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.4rem; text-transform:uppercase; letter-spacing:.02em;
  display:flex; align-items:baseline; gap:.6rem;
}
.mobile-menu a .idx{ font-family: var(--font-mono); font-size: .7rem; color: var(--accent); }

/* ==========================================================================
   HERO / SLIDER
   ========================================================================== */
.hero{
  position: relative;
  min-height: calc(100svh - 90px);
  display:flex; flex-direction:column; justify-content:center;
  padding: 3rem clamp(1.25rem, 4vw, 3rem) 2rem;
  overflow:hidden;
  isolation:isolate;
}
.hero__disc{
  position:absolute; top:50%; right:-14vw; transform: translateY(-50%);
  width: min(56vw, 780px); aspect-ratio:1; color: var(--ink);
  opacity:.9; z-index:-1;
}
.hero__disc svg{ width:100%; height:100%; animation: spin 26s linear infinite; }
.hero__disc .groove{ fill:none; stroke: currentColor; opacity:.14; stroke-width:1; }
.hero__disc .label{ fill: var(--accent); opacity:.9; }
.hero__disc .spindle{ fill: var(--bg); }

.hero__triangle{
  position:absolute; left:-6vw; bottom:-8vw; width: min(30vw,320px);
  color: var(--accent); opacity:.16; z-index:-1;
}

.hero__slides{ position:relative; max-width: 760px; min-height: 420px; }
.slide{
  position:absolute; inset:0 auto auto 0; width:100%;
  opacity:0; transform: translateY(24px); pointer-events:none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.slide.is-active{ position:relative; opacity:1; transform:none; pointer-events:auto; }
.slide__eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color: var(--ink-soft); margin-bottom: 1.4rem;
}
.rec-dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); animation: pulse 1.8s ease-in-out infinite; flex-shrink:0; }
.slide__title{
  font-family: var(--font-display); font-weight:400; text-transform:uppercase;
  font-size: clamp(2.8rem, 7.4vw, 6rem); line-height: .94; margin: 0 0 1.4rem;
  letter-spacing: .005em;
}
.slide__title span{ color: var(--accent); }
.slide__body{ font-size: 1.1rem; color: var(--ink-soft); max-width: 50ch; margin-bottom: 2rem; }
.slide__cta{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero__controls{
  display:flex; align-items:center; gap: 1.4rem; margin-top: 2.6rem;
}
.hero__arrow{
  width: 46px; height:46px; border-radius:50%; flex-shrink:0;
  background: var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition: background .25s, border-color .25s, transform .25s;
}
.hero__arrow svg{ width:18px; height:18px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hero__arrow:hover{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: scale(1.06); }

.hero__tracklist{ display:flex; gap: .5rem; }
.hero__tracklist button{
  width: 34px; height:5px; border-radius: 4px; background: var(--line-strong); border:none;
  transition: background .3s, width .3s;
}
.hero__tracklist button.is-active{ background: var(--accent); width: 54px; }

.hero__progress{
  position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--line);
}
.hero__progress span{
  display:block; height:100%; width:0%; background: var(--accent);
}
.hero__progress span.animate{ transition: width linear; }

.scroll-cue{
  position:absolute; right: clamp(1.25rem,4vw,3rem); bottom: 1.6rem;
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color: var(--ink-faint);
}
.scroll-cue span{ width:1px; height:26px; background: var(--ink-faint); position:relative; overflow:hidden; }
.scroll-cue span::after{ content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background: var(--accent); animation: scrollcue 2s ease-in-out infinite; }
@media (max-width: 720px){ .scroll-cue{ display:none; } }

@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.7);} }
@keyframes scrollcue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  background: var(--ink); color: var(--bg);
  overflow:hidden; white-space:nowrap;
  padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .marquee{ background:#0B0A09; }
.marquee__track{ display:inline-flex; gap: 1.4rem; animation: marquee 32s linear infinite; }
.marquee__track span{
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.03em;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
}
.marquee__track span:nth-child(2n){ color: var(--accent); }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ padding: 7rem 0 0; }
.about__grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; padding-bottom: 5rem; }
.about__stats{ display:flex; flex-direction:column; gap: 1.4rem; margin-top: 2.2rem; }
.about__stats div{ border-top: 1px solid var(--line); padding-top: .8rem; }
.about__stats strong{ display:block; font-family: var(--font-display); font-size: 2.2rem; color: var(--accent); }
.about__stats span{ font-size: .85rem; color: var(--ink-soft); }
.about__copy p{ margin: 0 0 1.4rem; color: var(--ink-soft); max-width: 62ch; }
.about__copy p.lead{ color: var(--ink); font-size: 1.3rem; line-height:1.5; max-width: 46ch; font-weight:500; }
.about__mission{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.2rem; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.about__mission h3{ font-family: var(--font-mono); font-size: .82rem; text-transform:uppercase; letter-spacing:.1em; color: var(--accent); margin: 0 0 .7rem; }
.about__mission p{ font-size: .96rem; }

.process{ background: var(--surface); border-top: 1px solid var(--line); padding: 3.6rem 0; }
.process .eyebrow{ display:block; margin-bottom: 2rem; }
.process__row{ display:grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }
.process__step{ border-left: 2px solid var(--line); padding-left: 1.2rem; }
.process__num{ font-family: var(--font-mono); color: var(--accent); font-size: .85rem; }
.process__step h4{ font-family: var(--font-display); font-size: 1.5rem; text-transform:uppercase; margin: .4rem 0 .5rem; letter-spacing:.02em; }
.process__step p{ color: var(--ink-soft); font-size: .92rem; margin:0; }

/* ==========================================================================
   SERVICES / TRACKLIST
   ========================================================================== */
.services{ padding: 7rem 0; }
.tracklist{ display:flex; flex-direction:column; border-top: 1px solid var(--line); }
.track{
  display:grid; grid-template-columns: 3.2rem 3rem 1fr auto; align-items:center; gap: 1.6rem;
  padding: 1.5rem .5rem; border-bottom: 1px solid var(--line);
  transition: background .3s, padding-left .3s;
}
.track:hover{ background: var(--surface); padding-left: 1rem; }
.track__no{ font-family: var(--font-mono); color: var(--ink-faint); font-size: .95rem; }
.track:hover .track__no{ color: var(--accent); }
.track__icon{ width: 44px; height:44px; border-radius:50%; background: var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--ink); transition: background .3s, color .3s, transform .3s; }
.track:hover .track__icon{ background: var(--accent); color: var(--accent-ink); transform: rotate(-8deg); }
.track__icon svg{ width: 22px; height:22px; fill:none; stroke: currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.track__body h3{ font-family: var(--font-display); font-weight:400; text-transform:uppercase; font-size: 1.4rem; letter-spacing:.02em; margin: 0 0 .3rem; }
.track__body p{ margin:0; color: var(--ink-soft); font-size: .92rem; max-width: 56ch; }
.track__time{ font-family: var(--font-mono); font-size: .85rem; color: var(--ink-faint); }

/* ==========================================================================
   PORTFOLIO / DISCOGRAPHY (cover-grid)
   ========================================================================== */
.work{ padding: 2rem 0 7rem; }
.filters{ display:flex; flex-wrap:wrap; gap: .7rem; margin-bottom: 2.6rem; }
.filter{
  padding: .6rem 1.15rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-soft); font-size: .85rem; font-weight:600;
  transition: all .3s var(--ease);
}
.filter:hover{ border-color: var(--accent); color: var(--ink); }
.filter.is-active{ background: var(--ink); color: var(--bg); border-color: var(--ink); }

.cover-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
}
.cover{
  position:relative; border-radius: var(--radius); overflow:hidden;
  aspect-ratio: 1/1; cursor:pointer; isolation:isolate;
  transition: opacity .4s, transform .4s var(--ease);
  border: 1px solid var(--line);
}
.cover.is-hidden{ display:none; }
.cover__art{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transition: transform .6s var(--ease), filter .6s var(--ease);
  background: linear-gradient(135deg, var(--accent) 0%, #7a2c14 55%, var(--ink) 100%);
}
.cover:hover .cover__art{ filter: saturate(1.15); }
.cover:hover .cover__art{ transform: scale(1.06) rotate(-1deg); }
.cover__disc{ position:absolute; width:64%; aspect-ratio:1; right:-18%; bottom:-18%; opacity:.5; transition: transform .8s var(--ease); }
.cover:hover .cover__disc{ transform: rotate(35deg); }
.cover__disc svg{ width:100%; height:100%; }
.cover__mark{ font-family: var(--font-display); color: rgba(255,255,255,.92); font-size: clamp(1.6rem,3vw,2.4rem); text-transform:uppercase; text-align:center; padding: 0 1rem; letter-spacing:.02em; line-height:1.05; z-index:1; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.cover__info{
  position:absolute; left:0; right:0; bottom:0; padding: 1.1rem 1.2rem;
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent);
  color:#fff; transform: translateY(8px); opacity:.92;
}
.cover__info span{ font-family: var(--font-mono); font-size: .68rem; letter-spacing:.12em; text-transform:uppercase; opacity:.8; }
.cover__info h4{ margin: .2rem 0 0; font-family: var(--font-display); font-size: 1.2rem; text-transform:uppercase; font-weight:400; letter-spacing:.02em; }

/* ==========================================================================
   CLIENTS
   ========================================================================== */
.clients{ padding: 3.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clients__marquee{ overflow:hidden; margin-top: 1.4rem; }
.clients__track{ display:inline-flex; gap: 3rem; animation: marquee 38s linear infinite; white-space:nowrap; }
.clients__track span{ font-family: var(--font-mono); font-size: .95rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews{ padding: 7rem 0; }
.reviews__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.review{
  margin:0; padding: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  display:flex; flex-direction:column; gap: 1.4rem; position:relative;
}
.review::before{
  content:"“"; position:absolute; top:1rem; right:1.4rem; font-family: var(--font-display);
  font-size: 3.4rem; color: var(--accent); opacity:.25; line-height:1;
}
.review p{ margin:0; font-size: 1.02rem; color: var(--ink); }
.review footer{ display:flex; flex-direction:column; gap:.15rem; margin-top:auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.review footer strong{ font-size: .92rem; }
.review footer span{ font-size: .8rem; color: var(--ink-soft); font-family: var(--font-mono); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ padding: 7rem 0; background: var(--surface); border-top: 1px solid var(--line); }
.contact__grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; }
.contact__list{ display:flex; flex-direction:column; gap: 1.3rem; margin: 2.2rem 0; }
.contact__list li{ display:flex; gap: 1rem; align-items:flex-start; }
.contact__list svg{ width:18px; height:18px; fill: var(--accent); flex-shrink:0; margin-top:.2rem; }
.contact__list a{ text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .25s; }
.contact__list a:hover{ text-decoration-color: var(--accent); }
.contact__socials{ display:flex; gap: .8rem; }
.contact__socials a{
  width: 42px; height:42px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; transition: all .3s;
}
.contact__socials svg{ width:16px; height:16px; fill: currentColor; }
.contact__socials a:hover{ background: var(--accent); color:#fff; border-color: var(--accent); transform: translateY(-3px); }

.contact__form{ background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.4rem; box-shadow: var(--shadow-sm); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field{ margin-bottom: 1.2rem; display:flex; flex-direction:column; gap: .5rem; }
.field label{ font-family: var(--font-mono); font-size: .72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  border-radius: var(--radius-sm); padding: .85rem 1rem; font-size: .96rem;
  transition: border-color .25s, box-shadow .25s;
  width:100%;
}
.field textarea{ resize: vertical; min-height: 110px; font-family: var(--font-body); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); outline:none;
}
.contact__form .btn{ margin-top: .4rem; }
.form-status{ margin: 1rem 0 0; font-size: .88rem; min-height: 1.2em; }
.form-status.ok{ color: #1a8f4c; }
.form-status.err{ color: #d5432b; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ padding: 5rem 0 3rem; background: var(--ink); color: var(--bg); }
html[data-theme="dark"] .footer{
  background: #0B0A09;
  color: var(--ink);  /* Now uses light text color */
}
.footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; }
.footer__brand .nav__disc{ color: var(--accent); width:36px; height:36px; margin-bottom: 1rem; }
.footer__brand p{ margin: 0 0 .4rem; opacity:.75; font-size: .92rem; }
.footer__copy{ font-family: var(--font-mono); font-size: .76rem !important; opacity:.5 !important; margin-top: 1.4rem !important; }
.footer__col{ display:flex; flex-direction:column; gap: .7rem; }
.footer__col h5{ font-family: var(--font-mono); font-size: .72rem; letter-spacing:.12em; text-transform:uppercase; opacity:.55; margin: 0 0 .3rem; }
.footer__col a, .footer__col span{ opacity:.85; font-size: .92rem; transition: opacity .25s; }
.footer__col a:hover{ opacity:1; color: var(--accent-2); }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.to-top{
  position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 400;
  width: 48px; height:48px; border-radius:50%;
  background: var(--ink); color: var(--bg); border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
  opacity:0; pointer-events:none; transform: translateY(10px);
  transition: opacity .3s, transform .3s;
}
.to-top.is-visible{ opacity:1; pointer-events:auto; transform:none; }
.to-top svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .about__grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .about__mission{ grid-template-columns: 1fr; }
  .process__row{ grid-template-columns: repeat(2,1fr); row-gap: 2.2rem; }
  .cover-grid{ grid-template-columns: repeat(2,1fr); }
  .reviews__grid{ grid-template-columns: 1fr 1fr; }
  .contact__grid{ grid-template-columns: 1fr; gap: 3rem; }
  .footer__grid{ grid-template-columns: 1fr 1fr; row-gap: 2.4rem; }
}

@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .burger{ display:flex; }
  .topbar__contacts--wide{ display:none; }
  .hero__disc{ opacity:.35; width: 90vw; right:-30vw; }
  .track{ grid-template-columns: 2.2rem 2.6rem 1fr; }
  .track__time{ display:none; }
}

@media (max-width: 640px){
  .topbar__inner{ padding-top:.5rem; padding-bottom:.5rem; }
  .topbar__contacts{ gap: .8rem; }
  .form-row{ grid-template-columns: 1fr; }
  .cover-grid{ grid-template-columns: 1fr 1fr; gap: 1rem; }
  .reviews__grid{ grid-template-columns: 1fr; }
  .process__row{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
  .hero{ padding-top: 2rem; }
  .slide__cta{ flex-direction:column; align-items:flex-start; }
  .contact__form{ padding: 1.6rem; }
}

@media (max-width: 420px){
  .cover-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   BOOKING CALENDAR
   ========================================================================== */
.booking-field label em{ font-style: normal; color: var(--ink-faint); font-size: .82em; }
.calendar{
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 1.1rem; margin-top: .6rem;
}
.calendar__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: .9rem; }
.calendar__month{ font-family: var(--font-display); font-size: 1.15rem; letter-spacing:.03em; text-transform:uppercase; }
.calendar__nav{
  width: 32px; height:32px; border-radius:50%; border:1px solid var(--line);
  background: var(--surface); display:flex; align-items:center; justify-content:center;
  transition: border-color .25s, background .25s;
}
.calendar__nav svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.calendar__nav:hover{ border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.calendar__weekdays{ display:grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 4px; }
.calendar__weekdays span{ text-align:center; font-family: var(--font-mono); font-size: .64rem; color: var(--ink-faint); text-transform:uppercase; }
.calendar__grid{ display:grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.calendar__day{
  aspect-ratio: 1; display:flex; align-items:center; justify-content:center;
  border-radius: 8px; font-size: .85rem; background: transparent; border:1px solid transparent;
  color: var(--ink); transition: background .25s, color .25s, border-color .25s;
}
.calendar__day:disabled{ color: var(--ink-faint); opacity:.4; cursor:not-allowed; }
.calendar__day.is-empty{ visibility:hidden; }
.calendar__day:not(:disabled):not(.is-empty):hover{ border-color: var(--accent); }
.calendar__day.is-today{ font-weight:700; color: var(--accent); }
.calendar__day.is-selected{ background: var(--accent); color: var(--accent-ink); }
.calendar__day.is-full:not(.is-selected){ text-decoration: line-through; }
.calendar__slots{ display:flex; flex-wrap:wrap; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line-strong); }
.calendar__slot{
  padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); font-family: var(--font-mono); font-size: .78rem;
  transition: all .25s;
}
.calendar__slot:hover:not(:disabled){ border-color: var(--accent); color: var(--accent); }
.calendar__slot.is-selected{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.calendar__slot:disabled{ opacity:.35; text-decoration:line-through; cursor:not-allowed; }
.calendar__summary{ margin: 1rem 0 0; font-size: .85rem; color: var(--ink-soft); font-family: var(--font-mono); }
.calendar__summary.has-selection{ color: var(--accent); }

/* ==========================================================================
   BLOG / STUDIO NOTES
   ========================================================================== */
.page-hero{ padding: 4.5rem 0 3rem; }
.page-hero .h2{ margin-bottom: .6rem; }

.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.8rem; padding: 1rem 0 6rem; }
.post-card{
  display:flex; flex-direction:column; border-radius: var(--radius); overflow:hidden;
  border: 1px solid var(--line); background: var(--surface); transition: transform .4s var(--ease), box-shadow .4s;
}
.post-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.post-card__art{
  aspect-ratio: 16/10; position:relative; display:flex; align-items:flex-end; padding: 1.1rem;
  background: linear-gradient(135deg, var(--accent) 0%, #7a2c14 55%, var(--ink) 100%);
}
.post-card__cat{
  font-family: var(--font-mono); font-size: .68rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background: rgba(0,0,0,.35); padding: .3rem .7rem; border-radius: 999px;
}
.post-card__body{ padding: 1.4rem; display:flex; flex-direction:column; gap: .6rem; flex:1; }
.post-card__date{ font-family: var(--font-mono); font-size: .72rem; color: var(--ink-faint); }
.post-card__body h3{ font-family: var(--font-display); font-weight:400; text-transform:uppercase; font-size: 1.4rem; margin:0; letter-spacing:.02em; }
.post-card__body p{ margin:0; color: var(--ink-soft); font-size: .92rem; flex:1; }
.post-card__link{ font-family: var(--font-mono); font-size: .78rem; color: var(--accent); display:inline-flex; align-items:center; gap:.4rem; }

.post{ padding: 3rem 0 6rem; max-width: 760px; margin: 0 auto; }
.post__meta{ display:flex; gap: 1rem; align-items:center; margin-bottom: 1.2rem; font-family: var(--font-mono); font-size: .78rem; color: var(--ink-faint); }
.post__cat{ color: var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.post__title{ font-family: var(--font-display); font-weight:400; text-transform:uppercase; font-size: clamp(2rem,5vw,3.2rem); line-height:1; margin: 0 0 1.6rem; }
.post__cover{
  aspect-ratio: 16/7; border-radius: var(--radius); margin-bottom: 2rem;
  background: linear-gradient(135deg, var(--accent) 0%, #7a2c14 55%, var(--ink) 100%);
}
.post__body{ font-size: 1.05rem; color: var(--ink); line-height:1.8; }
.post__body p{ margin: 0 0 1.4rem; color: var(--ink-soft); }
.post__back{ display:inline-flex; align-items:center; gap:.5rem; margin-bottom: 2rem; font-family: var(--font-mono); font-size: .82rem; color: var(--ink-soft); }
.post__back svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.post__back:hover{ color: var(--accent); }

@media (max-width: 1080px){
  .blog-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .blog-grid{ grid-template-columns: 1fr; }
  .calendar__day{ font-size: .78rem; }
}