/* Soundific Production — shared site styles (dark-luxury, Anton + Inter) */
:root{
  --bg:#0a0a0a;
  --ink:#f2f0e8;
  --muted:#9a978d;
  --orange:#EC7C30;
  --salmon:#F4AF84;
  --red:#FF0000;
  --cream:#f5f2ea;
  --line:rgba(242,240,232,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,.display{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.05;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
section{padding:88px 0}
.kicker{
  font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);margin-bottom:14px;
}
.section-title{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:16px}
.section-lede{color:var(--muted);max-width:56ch;margin-bottom:44px}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1120px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:20px;height:64px;
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto;list-style:none}
.nav-links a{
  text-decoration:none;font-size:.9rem;font-weight:500;color:var(--muted);
  transition:color .15s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta{
  background:var(--orange);color:#0a0a0a !important;font-weight:700;
  padding:9px 18px;border-radius:999px;white-space:nowrap;
}
.nav-cta:hover{background:var(--salmon)}
#nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-burger{
  display:none;margin-left:auto;cursor:pointer;padding:10px;
  flex-direction:column;gap:5px;border:0;background:none;
}
.nav-burger span{display:block;width:24px;height:2px;background:var(--ink)}
@media (max-width:800px){
  .nav-burger{display:flex}
  .nav-links{
    display:none;position:absolute;top:64px;left:0;right:0;
    background:#0a0a0a;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 0 16px;
  }
  .nav-links li a{display:block;padding:12px 24px;font-size:1rem}
  .nav-links .nav-cta{margin:10px 24px 0;text-align:center;border-radius:12px}
  #nav-toggle:checked ~ .nav-links{display:flex}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  padding:15px 32px;border-radius:999px;font-size:1rem;
  transition:background .15s,color .15s,border-color .15s;
}
.btn-primary{background:var(--orange);color:#0a0a0a}
.btn-primary:hover{background:var(--salmon)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);margin-left:10px}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}

/* ---------- Hero (spotlight beams) ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:110px 0 80px;text-align:center;
  background:linear-gradient(rgba(10,10,10,.68),rgba(10,10,10,.9)),url('gallery/hero-gala-beams.jpg') center 30%/cover no-repeat;
}
.hero::before{
  /* ponytail: three conic-gradient "beams" from above the frame — cheap stage-light look, no imagery */
  content:"";position:absolute;inset:-40% -10% 0;pointer-events:none;
  background:
    conic-gradient(from 168deg at 22% -8%, transparent 0deg, rgba(236,124,48,.20) 7deg, transparent 15deg),
    conic-gradient(from 180deg at 50% -12%, transparent 0deg, rgba(244,175,132,.16) 8deg, transparent 17deg),
    conic-gradient(from 193deg at 78% -8%, transparent 0deg, rgba(236,124,48,.20) 7deg, transparent 15deg),
    radial-gradient(ellipse 70% 45% at 50% 108%, rgba(236,124,48,.13), transparent 65%);
}
.hero > .wrap{position:relative}
.hero h1{
  font-size:clamp(2.6rem,8vw,5.4rem);
  margin-bottom:20px;
}
.hero h1 .accent{color:var(--orange)}
.hero-pitch{
  color:var(--muted);font-size:clamp(1rem,2.2vw,1.2rem);
  max-width:44ch;margin:0 auto 34px;
}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-actions .btn-ghost{margin-left:0}

/* stat strip */
.stats{
  margin-top:64px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.stat{padding:26px 12px 0;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{
  display:block;font-family:'Anton',sans-serif;font-weight:400;
  font-size:clamp(1.15rem,2.6vw,1.7rem);text-transform:uppercase;
  color:var(--ink);margin-bottom:6px;
}
.stat span{color:var(--muted);font-size:.85rem}
@media (max-width:640px){
  .stats{grid-template-columns:1fr;border-top:0}
  .stat{border-left:0;border-top:1px solid var(--line);padding:18px 0 0;margin-top:18px}
  .stat:first-child{border-top:1px solid var(--line)}
}

/* ---------- Page hero (rates / entertainment / gallery) ---------- */
.page-hero{padding:64px 0 48px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(244,175,132,.06),transparent)}
.page-hero .section-lede{margin-bottom:28px}
.page-hero .trade-strip{margin-top:0}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:960px){.gallery{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#111}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:.78rem;color:var(--muted);padding:10px 12px;line-height:1.4}

/* ---------- Services / feature cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards.cols-4{grid-template-columns:repeat(4,1fr)}
.card{
  border:1px solid var(--line);border-radius:16px;padding:30px 26px;
  background:linear-gradient(180deg,rgba(244,175,132,.05),transparent 55%);
}
.card h3{font-size:1.5rem;margin-bottom:12px}
.card h3 em{font-style:normal;color:var(--orange)}
.card p{color:var(--muted);font-size:.95rem}
.card ul{list-style:none;margin-top:16px}
.card li{
  color:var(--ink);font-size:.9rem;padding:7px 0 7px 20px;position:relative;
  border-top:1px solid var(--line);
}
.card li::before{content:"—";position:absolute;left:0;color:var(--orange)}
.card .btn{margin-top:18px;padding:9px 18px;font-size:.85rem}
@media (max-width:960px){.cards.cols-4{grid-template-columns:1fr 1fr}}
@media (max-width:800px){.cards{grid-template-columns:1fr}.cards.cols-4{grid-template-columns:1fr}}

/* ---------- Packages / rate rows ---------- */
.trade-strip{background:rgba(236,124,48,.08);border:1px solid rgba(236,124,48,.35);border-left:4px solid var(--orange);border-radius:10px;padding:16px 20px;margin:-24px 0 36px;color:var(--ink);font-size:1rem}
.trade-strip b{color:var(--ink)}
.trade-strip a{color:var(--orange)}
.pkg-groups{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:860px){.pkg-groups{grid-template-columns:1fr}}
.pkg-group{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pkg-group-head{
  padding:20px 26px;border-bottom:1px solid var(--line);
  background:rgba(244,175,132,.07);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.pkg-group-head h3{font-size:1.35rem}
.pkg-group-head span{color:var(--muted);font-size:.82rem}
.pkg{padding:22px 26px;border-bottom:1px solid var(--line)}
.pkg:last-child{border-bottom:0}
.pkg-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.pkg-top h4{font-size:1.02rem;font-weight:600}
.price{white-space:nowrap;font-size:.9rem;color:var(--muted)}
.price b{color:var(--red);font-weight:700;font-size:1.02rem}
.pkg-inc{color:var(--muted);font-size:.88rem;margin-top:6px}
.pkg-note{
  margin-top:26px;border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;
}
.pkg-note p{color:var(--muted);font-size:.92rem;max-width:60ch}
.pkg-note p strong{color:var(--ink)}
.fineprint{color:var(--muted);font-size:.82rem;margin-top:18px}

/* ---------- Rules list (rate card terms) ---------- */
.rules{border:1px solid var(--line);border-radius:16px;padding:28px 30px;list-style:none;counter-reset:rule}
.rules li{
  counter-increment:rule;position:relative;padding:12px 0 12px 34px;
  border-top:1px solid var(--line);color:var(--muted);font-size:.95rem;
}
.rules li:first-child{border-top:0}
.rules li::before{
  content:counter(rule);position:absolute;left:0;top:12px;
  color:var(--orange);font-family:'Anton',sans-serif;font-size:.95rem;
}
.rules li b{color:var(--ink)}

/* ---------- Why us ---------- */
.why{background:linear-gradient(180deg,transparent,rgba(244,175,132,.05) 30%,rgba(244,175,132,.05) 70%,transparent)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:960px){.why-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr}}
.why-item{border-top:2px solid var(--orange);padding-top:18px}
.why-item h3{font-size:1.15rem;margin-bottom:10px}
.why-item p{color:var(--muted);font-size:.92rem}

/* ---------- Trusted at (marquee) ---------- */
.trusted{padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trusted .kicker{text-align:center;margin-bottom:26px}
.marquee{overflow:hidden;position:relative}
.marquee-track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.marquee ul{display:flex;list-style:none;align-items:center}
.marquee li{
  font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.25rem;
  color:var(--muted);white-space:nowrap;padding:0 22px;
}
.marquee li::after{content:"·";color:var(--orange);margin-left:44px}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee ul{flex-wrap:wrap;justify-content:center}
  .marquee ul[aria-hidden]{display:none}
  html{scroll-behavior:auto}
}

/* ---------- Contact (cream band) ---------- */
.contact{background:var(--cream);color:#0a0a0a}
.contact .kicker{color:var(--orange)}
.contact .section-lede{color:#5b584e}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:start}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr}}
.contact h2{color:#0a0a0a}
.contact-list{list-style:none}
.contact-list li{
  padding:16px 0;border-top:1px solid rgba(10,10,10,.12);
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
}
.contact-list .lbl{
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#5b584e;min-width:88px;
}
.contact-list a{color:#0a0a0a;font-weight:600;text-decoration:none;border-bottom:2px solid var(--orange)}
.contact-list a:hover{color:var(--orange)}
.contact .btn-primary{margin-top:26px}

/* ---------- Footer ---------- */
footer{padding:34px 0;text-align:center}
footer p{color:var(--muted);font-size:.82rem}
footer p + p{margin-top:6px}
footer .footer-links{margin-top:14px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
footer .footer-links a{color:var(--muted);text-decoration:none;font-size:.82rem}
footer .footer-links a:hover{color:var(--orange)}

/* ---------- Scroll reveal (JS-enhanced only; fully visible without JS) ---------- */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
}