:root{
  --bg:#000000; --bg2:#0a0a0a;
  --ink:#f2f2f2; --muted:#bfbfbf;
  --accent:#5a5a5a; --accent2:#8a8a8a; --line:#2a2a2a;
  --card:#243447;
}

body{
  margin:0;
  color:var(--ink);
  font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  letter-spacing:.01em;
  background-color:#000; /* fallback */
  background: url('/assets/studio-background-2560x1440.jpg') no-repeat center center fixed;
  background-size: cover;
}
@media (max-width: 768px){
  body{
    background: url('/assets/studio-background-1080x1920.jpg') no-repeat center center fixed;
    background-size: cover;
  }
}

/* --- Edge fix: ensure background beyond content is pure black --- */
html {
  background-color: #000 !important; /* override any inherited grey */
}

/* Keep body black too; this does NOT remove your background image */
body {
  background-color: #000;
}


*{box-sizing:border-box}
html,

a{color:#e6e6e6}
img{max-width:100%}

.page{padding-top:48px}
.page.narrow{width:min(800px,100%)}
.lead{color:var(--muted); font-size:1.1rem}
.muted{color:var(--muted)}
.center{text-align:center}

.bg.fx::before, .bg.fx::after{
  content:""; position:fixed; inset:auto; width:52vmax; height:52vmax; border-radius:50%;
  filter: blur(60px); opacity:.15; pointer-events:none; z-index:-1;
  background: radial-gradient(closest-side, var(--accent), transparent 70%);
  animation: drift 22s linear infinite alternate;
}
.bg.fx::after{ background: radial-gradient(closest-side, var(--accent2), transparent 70%); animation-duration: 28s; left:auto; right:-10vmax; bottom:-10vmax}
.bg.fx::before{ left:-10vmax; top:-10vmax}
@keyframes drift{to{ transform: translate3d(8%, -8%, 0) scale(1.08) }}

.site-header{position:sticky; top:0; z-index:20; backdrop-filter: blur(10px); background: color-mix(in oklab, var(--bg2) 80%, transparent); border-bottom:1px solid rgba(255,255,255,.05); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.06em; text-transform: none;}
.logo{width:34px; height:34px; fill:#e6e6e6}
.nav{display:flex; gap:16px; align-items:center}
.nav a{padding:8px 12px; text-decoration:none; color:var(--ink); border:1px solid transparent; border-radius:10px; text-transform: none;}
.nav a:hover{border-color:#2e4177; background:#151515}
.nav .cta{background: linear-gradient(180deg, #2a2a2a, #1c1c1c); border-color:#2a2a2a; border-radius:12px}
.menu-toggle{display:none}
@media (max-width:900px){
  .menu-toggle{display:block; background:#151515; border:1px solid #263863; color:#e6e6e6; padding:8px 12px; border-radius:10px}
  .nav{position:fixed; inset:60px 16px auto 16px; background:#0e1424; border:1px solid #2a2a2a; border-radius:16px; padding:12px; display:none; flex-direction:column}
  .nav.open{display:flex}
}

.hero{padding:20px 0 24px}
.eyebrow{display:inline-block; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; color:#bfbfbf99; border:1px solid #2a2a2a; border-radius:999px; padding:6px 10px; background:#121212}
h1{font-size: clamp(36px, 6vw, 72px); line-height:1.05; margin:14px 0 10px; text-transform: none;}
.actions{display:flex; gap:12px; margin:18px 0}
.actions.small{margin:12px 0}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid #2a2a2a; text-decoration:none; font-weight:700; text-transform: none;}
.btn.primary {background: linear-gradient(180deg, #E2E2D2, #E2E2D2);color: #141d26;}
.btn.ghost{background:#141d26; color:#E2E2D2; border:1px solid #E2E2D2;}

.panels{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin:36px 0 6px}
.panel{border:1px solid #2a2a2a; background:#243447; border-radius:16px; padding:18px; text-decoration:none; color:var(--ink); transition: transform .25s ease, background .25s ease; text-transform: none;}
.panel:hover{transform: translateY(-4px); background:#0f1420}
@media (max-width:900px){ .panels{grid-template-columns:1fr} }

.grid-2{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; margin:40px 0}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px}
.checks{list-style:none; padding:0; margin:0}
.checks li{padding-left:28px; position:relative; margin:10px 0}
.checks li::before{content:"✔"; position:absolute; left:0; top:0; color:#d0d0d0}
.bullets{margin:.4rem 0 .8rem .9rem}
.steps{margin:.4rem 0 .8rem 1.2rem}

.cta-band{margin:40px 0; padding:28px; border:1px dashed #333333; border-radius:20px; background:#141d26}
.cta-band .btn.big{padding:14px 20px; font-size:1.05rem}
a.btn.big {background: #243447;color: #E2E2D2;}

.site-footer{display:flex; gap:16px; align-items:center; justify-content:space-between; padding:20px; border-top:1px solid rgba(255,255,255,.06); background: color-mix(in oklab, var(--bg2) 80%, transparent)}
.site-footer .socials{display:flex; gap:12px}

form.contact{display:grid; gap:12px}
label{display:grid; gap:6px; font-weight:600; text-transform: none;}
input, select, textarea{padding:12px 12px; background:#121212; border:1px solid #2a2a2a; border-radius:12px; color:var(--ink)}

.reveal{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform: translateY(0)}

.listen{margin:34px 0}
.player-wrap{position:relative; width:100%; aspect-ratio: 16/9; background:#0b0b0b; border:1px solid #2a2a2a; border-radius:16px; overflow:hidden; margin:12px 0}
.player-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.small{font-size:.9rem}

.pricing{margin:36px 0 10px}
.price-table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:14px; margin:12px 0 6px}
.price-table thead th{background:#121212; color:#e6e6e6; text-align:left; padding:12px; border-bottom:1px solid #2a2a2a; text-transform: none;}
.price-table td{padding:12px; border-bottom:1px solid #242424; color:var(--ink)}
.price-table tbody tr:nth-child(odd){background:#0f0f0f}
.price-table tbody tr:nth-child(even){background:#0b0b0b}

/* Accordion (FAQ) */
.faq{margin:36px 0}
.accordion .item{border:1px solid var(--line); background:var(--card); border-radius:14px; margin:10px 0; overflow:hidden}
.accordion .q{all:unset; display:flex; justify-content:space-between; align-items:center; width:100%; cursor:pointer; padding:14px 16px; font-weight:700; text-transform: none;}
.accordion .q::after{content:"+"; opacity:.7}
.accordion .q[aria-expanded="true"]::after{content:"–"}
.accordion .a{max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 16px}
.accordion .q[aria-expanded="true"] + .a{padding:0 16px 14px 16px; max-height:400px}
.accordion p{margin:10px 0 0 0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#formStatus{margin-top:6px}


/* brand name lowercase only */
.brand-name {
  text-transform: lowercase !important;
}


/* full-page black fallback */
html, 


/* spatial page logos + imagery */
.logo-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:18px 0 8px}
.logo-row img{height:40px; width:auto; opacity:.92; filter: drop-shadow(0 2px 8px rgba(0,0,0,.25))}
.logo-row .pill{border:1px solid var(--line); background:var(--card); border-radius:999px; padding:8px 12px; font-weight:700; margin-right:10px}

.spatial-gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin:18px 0 6px}
.spatial-gallery img{width:100%; height:220px; object-fit:cover; border-radius:14px; border:1px solid var(--line); background:#0e1424}
@media (max-width:900px){ .spatial-gallery{grid-template-columns:1fr} .logo-row img{height:32px} }




/* Mobile portrait version */
@media (max-width: 768px) {
  
}

/* Layout sizing normalization */
main{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:24px;
}
.page{padding-top:48px; max-width:1100px; margin:0 auto;}
.page.narrow{max-width:900px; width:100%; margin:0 auto;}


/* --- Background overlay for legibility --- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.35);
  pointer-events:none;
  z-index:0;
}
header.site-header, main, footer.site-footer{ position:relative; z-index:1; }

/* --- Centered footer with brand icons --- */
.site-footer.centered{ position:relative; z-index:2; 
  text-align:center; 
  display:block; 
  padding:22px 20px; 
  border-top:1px solid rgba(255,255,255,.06);
  background: transparent;
}

.socials {position: absolute;right: 0px;}
.site-footer.centered .socials{ margin-bottom:10px; }
.site-footer.centered .socials a{ display:inline-block; margin:0 10px; line-height:0; }
.site-footer.centered .socials img{ width:36px; height:36px; display:block; filter:none; transition: opacity .2s ease; }
.site-footer.centered .socials img:hover{ opacity:.75; }


html, body { width:100%; min-height:100%; overflow-x: hidden; }


/* Layout sizing normalization v2 */
.site-header, main, .site-footer {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
@media (max-width: 900px){
  .site-header, main, .site-footer { padding-left:16px; padding-right:16px; }
}


img, iframe { max-width: 100%; height: auto; }

/* Footer icon sizing update */
.site-footer.centered .socials img{
  height:28px;
  width:auto;
  margin:0 10px;
  filter:none;
}


/* === Palette headings (update) === */
h1 { color: #c51f5d !important; }
h2, h3 { color: #B2E2FD !important; }

/* Footer: centered copyright + socials bottom-right */
.site-footer {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 12px 0;
}
.site-footer .footer-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.site-footer .footer-center {
  text-align: center;
  color: #E2E2D2;
  font-weight: 600;
}
.site-footer .socials {
  position: absolute;
  right: 24px;
  bottom: 8px;
  display: flex;
  gap: 12px;
}
.site-footer .socials img {
  height: 24px;
  width: auto;
  display: block;
  filter: invert(100%);
  opacity: .9;
  transition: opacity .2s;
}
.site-footer .socials img:hover {
  opacity: .7;
}
@media (max-width: 500px) {
  .site-footer .socials {
    position: static;
    justify-content: center;
    margin-top: 6px;
  }
  .site-footer .footer-center {
    margin-bottom: 6px;
  }
}


/* anti-spam honeypot */
.hp-field{position:absolute !important; left:-5000px !important; width:1px; height:1px; overflow:hidden;}