:root{
  --bg:#0b0b0b;
  --text:#f2f2f2;
  --muted: rgba(242,242,242,.78);
  --line: rgba(242,242,242,.18);
  --gold: #c6a15b;
  --gold-bright: #e6cf9a;
  --gold-line: rgba(198,161,91,.28);
  --gold-soft: rgba(198,161,91,.12);
  --max: 980px;
  --radius: 18px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  background:
    radial-gradient(circle at top, rgba(198,161,91,.08) 0%, rgba(198,161,91,0) 36%),
    var(--bg);
  color: var(--text);
  line-height:1.6;
}

a{ color: var(--text); text-underline-offset: 4px; }
a:hover{ opacity:.95; color: var(--gold-bright); }

::selection{
  background: rgba(198,161,91,.24);
  color: #fff;
}

.hero-card,
.panel,
.tile,
.step,
.album-nav,
.subalbum-card,
.ost-card,
.story-frame,
.nav-toggle,
.toplinks.open{
  border-color: rgba(198,161,91,.14);
}

.btn.primary,
.album-link.active,
.subalbum-card:hover,
.track-btn--play,
.ost-track:hover,
.toplinks a.active,
.toplinks a:hover,
.nav-toggle:hover{
  border-color: var(--gold-line);
}

.btn.primary,
.track-btn--play{
  box-shadow: 0 0 0 1px rgba(198,161,91,.06), 0 10px 28px rgba(0,0,0,.18);
}

.brand small,
.ost-brand,
.story-lyrics-label,
.album-nav h2{
  color: var(--gold-bright);
}

.btn:focus-visible,
.track-btn:focus-visible,
.ost-track:focus-visible,
.album-link:focus-visible,
.subalbum-card:focus-visible,
.toplinks a:focus-visible,
.nav-toggle:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* HERO */
.hero{
  min-height: 78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 56px 18px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.70) 55%, rgba(0,0,0,.88) 100%),
    url("../assets/hero-banner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-card{
  width: min(920px, 100%);
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(6px);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
}

.brand img{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display:block;
}

.brand-name{
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.brand small{
  display:block;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 2px;
}

.cta{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration:none;
  background: rgba(0,0,0,.35);
}

.btn.primary{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

.headline{
  padding: 8px 2px 2px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
}

h1{
  margin: 12px 0 6px;
  font-size: clamp(34px, 4.2vw, 54px);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.subline{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.summary{
  margin: 14px 0 0;
  font-size: 16px;
  max-width: 68ch;
}

/* CONTENT */
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 18px 60px;
}

.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  margin-top: 18px;
}

.panel{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  padding: 18px;
}

.panel h2{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.panel > *{
  max-width: 820px;
}

.list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.contact p{
  margin: 8px 0;
  color: var(--muted);
}

.contact strong{ color: var(--text); }

.note{
  margin-top: 12px;
}

.album-tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.tile{
  display:block;
  text-decoration:none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  padding: 14px;
}

.tile:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.20);
}

.tile-title{
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 6px;
}

.tile-sub{
  color: var(--muted);
  font-size: 14px;
}

/* Responsive */
@media (max-width: 820px){
  .album-tiles{ grid-template-columns: 1fr; }
}

/* FOOTER */
footer{
  padding: 22px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align:center;
  font-size: 13px;
}


footer a{ color: inherit; }
/* SECTIONS */
.section{
  margin-top: 18px;
}

.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.step{
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 6px);
  background: rgba(0,0,0,.18);
  padding: 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.step-num{
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  line-height: 1;
  min-width: 44px;
  text-align:center;
}

.step-title{
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 6px;
}

.step-text{
  color: var(--muted);
  font-size: 14px;
}

.expect{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.expect li{
  margin: 8px 0;
}

.micro{
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

/* Responsive */
@media (max-width: 820px){
  .grid{ grid-template-columns: 1fr; }
  .cta{ justify-content:flex-start; }
  .brand img{ width:46px; height:46px; }
  /* New sections: stack the 3-step row on mobile */
  .steps{ grid-template-columns: 1fr; }
}

/* sidebar, grid, lightbox */
.gallery-layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
}

.album-nav{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px;
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  overflow:auto;
}

.album-nav h2{ margin: 0 0 10px; font-size: 16px; }
.album-list{ display:flex; flex-direction:column; gap: 10px; }

.album-link{
  display:block;
  text-decoration:none;
  color: inherit;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid transparent;
}
.album-link:hover{ border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); }
.album-link.active{ border-color: var(--gold-line); background: rgba(198,161,91,.08); }

.album-row{ display:grid; grid-template-columns: 44px 1fr; gap: 10px; align-items:center; }
.album-cover{
  width:44px; height:44px; border-radius: 10px; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.10);
}
.album-cover.placeholder{ display:inline-block; background: rgba(255,255,255,0.06); }

.album-title{ display:block; font-weight: 600; }
.album-sub{ display:block; font-size: 12px; opacity: .75; margin-top: 2px; }

.album-main{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 16px;
}

.album-head{ margin-bottom: 12px; }
.muted{ opacity: .80; }

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.thumb{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 0;
  overflow:hidden;
  cursor:pointer;
}
.thumb img{ width:100%; height: 220px; object-fit: cover; display:block; }
.thumb--static{ cursor:default; }

.lightbox{
  position:fixed; inset:0;
  background: rgba(0,0,0,0.85);
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding: 18px;
  z-index: 9999;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:min(980px, 96vw);
  max-height: 82vh;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.15);
}
.lb-cap{ color: rgba(255,255,255,0.85); margin-top: 10px; }
.lb-close{
  position:absolute; top: 14px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(0,0,0,0.35);
  color: white;
  font-size: 28px;
  cursor:pointer;
}

.lb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:28px;
  line-height:42px;
  text-align:center;
  cursor:pointer;
  user-select:none;

  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}

.lb-prev{ left:16px; }
.lb-next{ right:16px; }

.lightbox.open:hover .lb-nav{
  opacity:1;
  pointer-events:auto;
}

.lb-nav:hover{
  background:rgba(0,0,0,.72);
}

/* Mobile: no hover, so keep arrows visible */
@media (hover: none) and (pointer: coarse){
  .lb-nav{
    opacity: 1;
    pointer-events: auto;
  }
}

/* Responsive */
@media (max-width: 980px){
  .gallery-layout{ grid-template-columns: 1fr; }
  .album-nav{ position: static; height:auto; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .thumb img{ height: 200px; }
}
@media (max-width: 560px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .thumb img{ height: 240px; }
}

/* =========================================================
   GALLERY HEADER POLISH (prevents logo from touching edges)
   ========================================================= */

/* Give the gallery header breathing room without affecting the home hero layout */
body .topbar{
  padding: 14px 18px;
  margin-bottom: 18px;
}

/* Slightly smaller logo in the gallery header so it feels balanced */
body .topbar .brand img{
  width: 46px;
  height: 46px;
}

/* =========================================================
   INTAKE PAGE
   ========================================================= */
.page-intake .intake-alert{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(242,242,242,.90);
}

.page-intake .intake-head{
  margin-bottom: 10px;
}

.page-intake .intake-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.page-intake .shot{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.15);
}

.page-intake .shot img{
  width: 100%;
  height: 280px;
  object-fit: cover;
  display:block;
}

.page-intake .shot:hover{
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
}

/* Responsive */
@media (max-width: 980px){
  .page-intake .intake-grid{ grid-template-columns: 1fr; }
  .page-intake .shot img{ height: auto; }
}

/* --- Soundscapes module (SG Designs) --- */
.soundscapes {
  margin-top: 2rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
}

.soundscapes__header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.soundscapes__title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.soundscapes__desc {
  margin: 0;
  max-width: 64ch;
  opacity: 0.85;
  line-height: 1.45;
  font-size: 0.95rem;
}

.soundscapes__credit {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  white-space: nowrap;
}

.soundscapes__credit span {
  opacity: 0.9;
}

.soundscapes__player {
  display: grid;
  gap: 0.75rem;
}

.soundscapes audio {
  width: 100%;
  border-radius: 12px;
}

.soundscapes__tracklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.soundscapes__tracklist li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease;
}

.soundscapes__tracklist li:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.16);
}

.soundscapes__tracklist li.is-active {
  border-color: rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.06);
}

.track__name {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.track__meta {
  font-size: 0.8rem;
  opacity: 0.65;
  white-space: nowrap;
}

/* Mobile: stack credit under title */
@media (max-width: 640px) {
  .soundscapes__header {
    flex-direction: column;
  }
  .soundscapes__credit {
    white-space: normal;
  }
}

/*back to top*/
.back-to-top{
  display:inline-block;
  margin:18px 0 0;
  color: rgba(255,255,255,.75);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  padding:10px 14px;
  border-radius:12px;
}
.back-to-top:hover{
  color:#fff;
  border-color: rgba(255,255,255,.22);
}
html{ scroll-behavior:smooth; }

/* =========================
   SERVICES PAGE
   ========================= */

.services-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
}

.services-hero{
  margin-top: 18px;
}

.services-title{
  margin: 0 0 8px;
  font-size: clamp(34px, 4.2vw, 54px);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.services-sub{
  margin: 0 0 10px;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
}

.services-intro{
  margin: 0;
  max-width: 80ch;
}

.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.service-card{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  border-radius: calc(var(--radius) - 6px);
  padding: 14px;
}

.service-card h3{
  margin: 0 0 6px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
}

.service-meta{
  margin: 10px 0 0;
}

.steps-compact{
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px){
  .services-grid{ grid-template-columns: 1fr; }
  .steps-compact{ grid-template-columns: 1fr; }
}



/* =========================
   NAV (Top links + hamburger)
   ========================= */
.topbar, .hero .topbar{ position: relative; }

.toplinks{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 14px;
  flex-wrap:wrap;
}

.toplinks a{
  text-decoration:none;
  opacity:.95;
}

.toplinks a:hover{
  opacity:1;
  text-decoration: underline;
}

.toplinks a.active{
  text-decoration: underline;
}

/* Hamburger button (shown on small screens) */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  line-height:1;
}

.nav-toggle .bars{
  width:18px;
  height:12px;
  position:relative;
  display:inline-block;
}

.nav-toggle .bars:before,
.nav-toggle .bars:after,
.nav-toggle .bars span{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:rgba(255,255,255,.92);
  border-radius:2px;
}

.nav-toggle .bars:before{ top:0; }
.nav-toggle .bars span{ top:5px; }
.nav-toggle .bars:after{ bottom:0; }

@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }

  /* Default: hide links on small screens */
  .toplinks{ display:none !important; }

  /* When opened: show dropdown */
  .toplinks.open{
    display:flex !important;
    flex-direction:column;
    gap:4px;
    position:absolute;
    right:14px;
    top:64px;
    min-width: 240px;
    max-width: calc(100vw - 28px);
    max-height: min(70dvh, calc(100dvh - 92px));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    background:#18181B;
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    padding:10px;
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    z-index:999;
  }

  .toplinks.open a{
    padding:10px 12px;
    border-radius:14px;
    white-space:nowrap;
    text-decoration:none;
  }

  .toplinks.open a:hover{
    background:rgba(255,255,255,.06);
  }

  .toplinks.open::-webkit-scrollbar{
    width:10px;
  }

  .toplinks.open::-webkit-scrollbar-thumb{
    background: rgba(255,223,145,.22);
    border-radius:999px;
    border:2px solid rgba(24,24,27,.9);
  }
}


/* Meet the Founder (Contact) */
.meet-grid{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:18px;
  align-items:start;
}
.meet-photo img{
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  display:block;
}
.meet-bullets{
  margin:10px 0 0;
  padding-left:18px;
  color: rgba(255,255,255,.86);
  font-size: 0.98rem;
  line-height: 1.5;
}
.meet-bullets li{ margin: 6px 0; }

@media (max-width: 820px){
  .meet-grid{ grid-template-columns: 1fr; }
  .meet-photo img{ max-width: 420px; margin: 0 auto; }
}


/* LIVE WEBSITE DEMOS */
.demo-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.demo-card{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  border-radius: calc(var(--radius) - 6px);
  overflow:hidden;
}

.demo-thumb{
  display:block;
  background: rgba(255,255,255,0.02);
}

.demo-card img{
  width:100%;
  height: 220px;
  display:block;
  object-fit: contain;
  object-position: center;
}

.demo-body{
  padding: 14px;
}

.demo-body h3{
  margin: 0 0 6px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
}

.demo-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

@media (max-width: 980px){
  .demo-grid{ grid-template-columns: 1fr; }
  .demo-card img{ height: 240px; }
}


/* =========================================================
   Visual Storytelling: sub-albums + OST layout
   ========================================================= */

.gallery-grid.gallery-grid--collection,
.gallery-grid.gallery-grid--story{
  display:block;
}

.subalbum-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
@media (max-width: 900px){
  .subalbum-grid{ grid-template-columns:1fr; }
}

.subalbum-card{
  display:flex;
  gap:14px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  color:inherit;
}
.subalbum-card:hover{ background:rgba(198,161,91,.08); }

.subalbum-cover{
  width:112px;
  height:112px;
  border-radius:14px;
  overflow:hidden;
  flex:0 0 auto;
  background:rgba(255,255,255,.04);
}
.subalbum-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.subalbum-title{
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.01em;
}
.subalbum-desc{
  opacity:.8;
  margin-top:6px;
  line-height:1.3;
}

.ost-card{
  margin:18px 0 26px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.ost-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
}
.ost-title{
  font-size:1.45rem;
  font-weight:900;
  letter-spacing:.02em;
}
.ost-brand{
  opacity:.7;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.85rem;
}
.ost-body{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ost-blurb{
  opacity:.85;
  line-height:1.35;
}
.ost-player audio{ width:100%; }

.ost-tracklist{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ost-track{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.12);
  color:inherit;
  cursor:pointer;
  text-align:left;
}
.ost-track:hover{ background:rgba(255,255,255,.05); }
.ost-track-name{ font-weight:800; }
.ost-track-tag{ opacity:.75; }

.story-frames{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.story-frame{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
@media (max-width: 900px){
  .story-frame{ grid-template-columns:1fr; }
}
.story-img{
  width:100%;
  height:auto;
  border-radius:14px;
  display:block;
  cursor:default;
}

.story-frame-title{
  font-weight:900;
  margin-bottom:10px;
  opacity:.9;
}

.story-track-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.story-track-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.track-btn{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:inherit;
  cursor:pointer;
  font-weight:800;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.track-btn:hover{
  background:rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.track-btn--play{
  flex: 1 1 280px;
  text-align:left;
  background: linear-gradient(180deg, rgba(198,161,91,.16) 0%, rgba(0,0,0,.18) 100%);
}
.track-btn--play:hover{
  background: linear-gradient(180deg, rgba(198,161,91,.22) 0%, rgba(255,255,255,.06) 100%);
}
.track-btn--stop{
  flex: 0 0 auto;
  min-width: 108px;
  border-color: rgba(255,255,255,.12);
}
.track-btn--stop:hover{
  border-color: rgba(255,255,255,.22);
}

.story-lyrics{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.14);
}
.story-lyrics-label{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.72;
  margin-bottom:8px;
}
.story-lyrics-copy{
  white-space:pre-line;
  font-size:.94rem;
  line-height:1.55;
  color:rgba(255,255,255,.92);
}


.adventure{
  margin-top:26px;
}
.adventure-title{
  font-size:1.35rem;
  font-weight:900;
  margin:0 0 12px;
}

.adventure-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
@media (max-width: 900px){
  .adventure-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px){
  .adventure-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   SG DESIGNS V6 PREMIUM THEATER REFRESH
   Goal: brighter metallic gold + premier movie theater atmosphere
   ========================================================= */
:root{
  --bg:#050506;
  --bg-elevated:#0d0d10;
  --bg-panel:rgba(16,16,19,.88);
  --text:#f7f3ea;
  --muted: rgba(247,243,234,.76);
  --line: rgba(244,218,164,.20);
  --line-strong: rgba(255,228,155,.34);
  --gold:#d1a13c;
  --gold-bright:#fff0b2;
  --gold-rich:#f0c461;
  --gold-deep:#8c6214;
  --gold-line: rgba(240,196,97,.34);
  --gold-soft: rgba(240,196,97,.12);
  --gold-glow: rgba(255,214,120,.24);
}

html{
  background:
    radial-gradient(circle at 50% -10%, rgba(255,213,120,.15) 0%, rgba(255,213,120,0) 32%),
    radial-gradient(circle at 12% 0%, rgba(255,233,178,.08) 0%, rgba(255,233,178,0) 24%),
    radial-gradient(circle at 88% 0%, rgba(255,233,178,.08) 0%, rgba(255,233,178,0) 24%),
    linear-gradient(180deg, #060607 0%, #0b0b0e 32%, #050506 100%);
}

body{
  position:relative;
  min-height:100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -8%, rgba(255,220,142,.16) 0%, rgba(255,220,142,0) 26%),
    radial-gradient(circle at 14% 8%, rgba(248,204,103,.08) 0%, rgba(248,204,103,0) 20%),
    radial-gradient(circle at 86% 8%, rgba(248,204,103,.08) 0%, rgba(248,204,103,0) 20%),
    linear-gradient(180deg, rgba(5,5,6,.98) 0%, rgba(10,10,12,.98) 36%, rgba(4,4,5,.98) 100%);
  overflow-x:hidden;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

body::before{
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,.62) 100%),
    radial-gradient(circle at 50% 0%, rgba(255,229,160,.08) 0%, rgba(255,229,160,0) 32%);
}

body::after{
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.012) 0px,
      rgba(255,255,255,.012) 1px,
      transparent 1px,
      transparent 6px
    );
  opacity:.18;
}

::selection{
  background: rgba(255,223,138,.28);
  color:#120f09;
}

a{
  color: var(--text);
  transition: color .18s ease, opacity .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

a:hover{
  color: var(--gold-bright);
}

.hero{
  position:relative;
  min-height:82vh;
  background:
    linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.64) 48%, rgba(0,0,0,.92) 100%),
    radial-gradient(circle at 50% 2%, rgba(255,228,150,.22) 0%, rgba(255,228,150,0) 28%),
    url("../assets/hero-banner.png");
  background-size: cover, cover, cover;
  background-position: center, center, center;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,244,199,.12) 0%, rgba(255,244,199,0) 24%),
    linear-gradient(180deg, rgba(255,210,111,.03), rgba(255,210,111,0) 20%);
}

.hero-card,
.panel,
.tile,
.step,
.album-nav,
.subalbum-card,
.ost-card,
.story-frame,
.nav-toggle,
.toplinks.open,
.album-main,
.thumb,
.service-card,
.demo-card,
.soundscapes,
.page-intake .shot,
.page-intake .intake-alert,
.lb-close,
.lb-nav,
.back-to-top{
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.018) 100%),
    var(--bg-panel);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,224,151,.04),
    0 12px 42px rgba(0,0,0,.34),
    0 0 0 1px rgba(0,0,0,.28);
}

.hero-card{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%),
    rgba(10,10,12,.64);
  border: 1px solid rgba(255,228,155,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,230,164,.05),
    0 20px 70px rgba(0,0,0,.46),
    0 0 30px rgba(255,206,93,.08);
  backdrop-filter: blur(8px);
}

.hero-card::before,
.panel::before,
.album-main::before,
.album-nav::before,
.demo-card::before,
.service-card::before,
.soundscapes::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,247,220,.08) 0%, rgba(255,247,220,0) 22%);
}

.panel,
.album-main,
.album-nav,
.demo-card,
.service-card,
.soundscapes,
.hero-card{
  position:relative;
  overflow:hidden;
}

.brand img,
.album-cover,
.meet-photo img{
  border-color: rgba(255,228,155,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 24px rgba(0,0,0,.36),
    0 0 18px rgba(255,208,99,.08);
}

.brand-name,
h1,
.services-title,
.panel h2,
.album-nav h2,
.tile-title,
.step-title,
.service-card h3,
.demo-body h3,
.album-title,
.ost-brand,
.story-lyrics-label,
.soundscapes__title{
  color: #f8e4a5;
  background: linear-gradient(180deg, #fff8da 0%, #f8e4a5 22%, #d5a13e 48%, #fff2bf 64%, #8f6618 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.subline,
.brand small,
.album-sub,
.service-meta,
.track__meta,
.soundscapes__credit,
.step-num,
.muted,
.micro,
.contact p,
.expect,
.list,
.step-text,
.tile-sub,
.summary,
.services-sub,
.soundscapes__desc,
.meet-bullets,
.page-intake .intake-alert,
.lb-cap,
footer,
.back-to-top{
  color: var(--muted);
}

h1,
.services-title{
  letter-spacing:.08em;
  text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 12px 40px rgba(0,0,0,.44);
}

.headline{
  border-top: 1px solid rgba(255,227,153,.20);
}

.btn,
.toplinks a,
.album-link,
.track-btn,
.ost-track,
.nav-toggle,
.back-to-top{
  border:1px solid rgba(255,224,151,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(15,15,18,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 20px rgba(0,0,0,.22);
}

.btn:hover,
.toplinks a:hover,
.album-link:hover,
.ost-track:hover,
.nav-toggle:hover,
.back-to-top:hover,
.thumb:hover,
.tile:hover,
.step:hover,
.demo-card:hover,
.service-card:hover,
.subalbum-card:hover{
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 34px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,224,151,.06),
    0 0 24px rgba(255,208,99,.08);
  transform: translateY(-1px);
}

.btn.primary,
.track-btn--play,
.toplinks a.active,
.album-link.active{
  color:#1a140a;
  border-color: rgba(255,230,164,.36);
  background:
    linear-gradient(180deg, #fff9d9 0%, #f3d484 14%, #d7a53d 36%, #fff1bb 58%, #b17a19 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(92,60,9,.28),
    0 12px 26px rgba(0,0,0,.32),
    0 0 20px rgba(255,210,108,.14);
}

.btn.primary:hover,
.track-btn--play:hover,
.toplinks a.active:hover,
.album-link.active:hover{
  color:#120e07;
  filter: brightness(1.04);
}

.hero-card .btn,
.hero-card .toplinks a,
.demo-actions .btn{
  text-decoration:none;
}

.toplinks.open{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
    rgba(10,10,12,.96);
}

.toplinks.open a:hover{
  background:
    linear-gradient(180deg, rgba(255,244,206,.08), rgba(255,244,206,.02)),
    rgba(255,214,120,.05);
}

.panel h2,
.album-nav h2,
.services-title,
.soundscapes__title{
  margin-bottom: 12px;
}

.tile,
.step,
.service-card,
.demo-card,
.thumb,
.page-intake .shot,
.soundscapes__tracklist li{
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, filter .18s ease;
}

.soundscapes__tracklist li,
.album-link,
.thumb,
.tile,
.step,
.service-card,
.demo-card,
.subalbum-card,
.ost-track{
  background:
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.01)),
    rgba(11,11,13,.68);
}

.soundscapes__tracklist li.is-active{
  border-color: rgba(255,228,155,.30);
  background:
    linear-gradient(180deg, rgba(255,247,220,.08), rgba(255,247,220,.02)),
    rgba(255,214,120,.06);
}

.album-nav,
.album-main,
.gallery-layout,
.services-wrap{
  position:relative;
}

.album-main,
.album-nav,
.panel,
.hero-card,
.soundscapes,
.demo-card,
.service-card,
footer{
  backdrop-filter: blur(10px);
}

.thumb img,
.demo-card img{
  filter: saturate(1.02) contrast(1.03);
}

.lightbox{
  background: rgba(2,2,3,.92);
}

.lb-close,
.lb-nav{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
    rgba(10,10,12,.88);
}

footer{
  margin-top: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(8,8,9,.88);
}

@media (max-width: 860px){
  .toplinks.open{
    right:0;
    top:72px;
    min-width:min(260px, calc(100vw - 36px));
  }
}

@media (prefers-reduced-motion: reduce){
  .btn,
  .toplinks a,
  .album-link,
  .tile,
  .step,
  .service-card,
  .demo-card,
  .thumb,
  .soundscapes__tracklist li,
  .back-to-top{
    transition:none;
  }
}


/* =========================
   v6.1 polish fixes
   1) Show full gallery album list on desktop
   2) Remove hard outline boxes from desktop top nav links
   ========================= */
.gallery-layout{
  align-items: start;
}

.album-nav{
  position: static;
  top: auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

@media (min-width: 861px){
  .toplinks{
    gap: 10px;
  }

  .toplinks a{
    padding: 8px 12px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    border-radius: 12px;
    text-decoration: none;
  }

  .toplinks a:hover{
    color: #fff2c1;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
    border-color: rgba(255,228,155,.06);
    box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
    text-decoration: none;
  }

  .toplinks a.active{
    color:#1a140a;
    border-color: transparent;
    background:
      linear-gradient(180deg, #fff9d9 0%, #f3d484 14%, #d7a53d 36%, #fff1bb 58%, #b17a19 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -1px 0 rgba(92,60,9,.25),
      0 12px 26px rgba(0,0,0,.28),
      0 0 18px rgba(255,210,108,.12);
    text-decoration: none;
  }

  .toplinks a.active:hover{
    border-color: transparent;
    filter: brightness(1.03);
  }
}


/* =========================
   v6.2 page-shell background consistency
   Unifies non-home pages with the darker cinematic backdrop already felt on
   Home / Intake / Contact so the full site flows as one brand world.
   ========================= */
body.page-shell{
  background:
    radial-gradient(circle at 50% -8%, rgba(255,220,142,.16) 0%, rgba(255,220,142,0) 26%),
    radial-gradient(circle at 14% 8%, rgba(248,204,103,.08) 0%, rgba(248,204,103,0) 20%),
    radial-gradient(circle at 86% 8%, rgba(248,204,103,.08) 0%, rgba(248,204,103,0) 20%),
    linear-gradient(180deg, rgba(5,5,6,.985) 0%, rgba(10,10,12,.985) 36%, rgba(4,4,5,.99) 100%);
}

body.page-shell > .topbar{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 18px 0;
}

body.page-shell .wrap,
body.page-shell .services-wrap,
body.page-shell .gallery-layout{
  position: relative;
}

body.page-shell .wrap::before,
body.page-shell .services-wrap::before,
body.page-shell .gallery-layout::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,229,160,.06) 0%, rgba(255,229,160,0) 38%),
    linear-gradient(180deg, rgba(255,255,255,.018) 0%, rgba(255,255,255,0) 42%);
}

body.page-shell footer{
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)),
    rgba(8,8,9,.9);
}


/* =========================
   v6.3 subpage top-area polish
   Gives subpages more of the home-page hero family feeling
   without changing page structure or redesigning layouts.
   ========================= */
body.page-shell > .topbar{
  position: relative;
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 18px 20px;
  border: 1px solid rgba(255,228,155,.22);
  border-radius: calc(var(--radius) + 4px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%),
    rgba(10,10,12,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,230,164,.05),
    0 20px 70px rgba(0,0,0,.42),
    0 0 30px rgba(255,206,93,.06);
  backdrop-filter: blur(8px);
  overflow: visible;
}

body.page-shell > .topbar::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,244,199,.10) 0%, rgba(255,244,199,0) 36%),
    linear-gradient(180deg, rgba(255,247,220,.07) 0%, rgba(255,247,220,0) 28%);
}

body.page-shell > .topbar > *{
  position: relative;
  z-index: 1;
}

body.page-shell .wrap,
body.page-shell .services-wrap,
body.page-shell .gallery-layout{
  margin-top: 10px;
}

body.page-shell .wrap > .panel:first-child,
body.page-shell .services-wrap > .panel:first-child,
body.page-shell .gallery-layout > .album-main{
  border-color: rgba(255,228,155,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 100%),
    rgba(12,12,15,.84);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,224,151,.04),
    0 16px 46px rgba(0,0,0,.34),
    0 0 24px rgba(255,208,99,.05);
}

body.page-shell .wrap > .panel:first-child h1,
body.page-shell .services-wrap > .panel:first-child .services-title,
body.page-shell .gallery-layout > .album-main #albumTitle{
  letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 12px 40px rgba(0,0,0,.38);
}

body.page-shell .wrap > .panel:first-child .micro,
body.page-shell .services-wrap > .panel:first-child .services-sub,
body.page-shell .gallery-layout > .album-main #albumDesc{
  color: rgba(247,243,234,.82);
}

body.page-shell .services-wrap > .panel:first-child,
body.page-shell .wrap > .panel:first-child{
  margin-top: 4px;
}

@media (max-width: 860px){
  body.page-shell > .topbar{
    padding: 16px 16px;
    margin-top: 12px;
  }

  body.page-shell .wrap,
  body.page-shell .services-wrap,
  body.page-shell .gallery-layout{
    margin-top: 6px;
  }
}


/* =========================
   v6.4 subpage header family-match
   The screenshots show the subpages are consistent with each other,
   but they still lack the home page's nav/button language.
   This pass gives subpage headers the same visual family DNA:
   pill links, a bottom divider, tighter top stack, and a stronger
   mini-hero feel on the first content block.
   ========================= */
body.page-shell > .topbar{
  margin: 18px auto 0;
  padding: 18px 20px 16px;
}

body.page-shell > .topbar::after{
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,223,145,0) 0%,
    rgba(255,223,145,.24) 10%,
    rgba(255,223,145,.18) 50%,
    rgba(255,223,145,.24) 90%,
    rgba(255,223,145,0) 100%);
  pointer-events: none;
}

body.page-shell .topbar .toplinks{
  gap: 10px;
}

body.page-shell .topbar .toplinks a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,226,152,.14);
  background: rgba(0,0,0,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.12);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, color 160ms ease;
}

body.page-shell .topbar .toplinks a:hover{
  text-decoration: none;
  color: var(--gold-bright);
  border-color: rgba(255,226,152,.26);
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
}

body.page-shell .topbar .toplinks a.active,
body.page-shell .topbar .toplinks a.active:hover{
  color: #2c1b07;
  border-color: rgba(255,223,145,.54);
  background:
    linear-gradient(180deg, rgba(255,244,208,1) 0%, rgba(234,196,95,1) 52%, rgba(189,133,34,1) 100%);
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 10px 24px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,223,145,.14);
  transform: none;
}

body.page-shell .wrap,
body.page-shell .services-wrap,
body.page-shell .gallery-layout{
  margin-top: 2px;
}

body.page-shell .wrap > .panel:first-child,
body.page-shell .services-wrap > .panel:first-child,
body.page-shell .gallery-layout > .album-main{
  position: relative;
  overflow: hidden;
}

body.page-shell .wrap > .panel:first-child::before,
body.page-shell .services-wrap > .panel:first-child::before,
body.page-shell .gallery-layout > .album-main::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,223,145,0) 0%,
    rgba(255,223,145,.16) 12%,
    rgba(255,223,145,.08) 50%,
    rgba(255,223,145,.16) 88%,
    rgba(255,223,145,0) 100%);
  pointer-events: none;
}

body.page-shell .wrap > .panel:first-child,
body.page-shell .services-wrap > .panel:first-child{
  padding-top: 28px;
}

body.page-shell .gallery-layout > .album-main .album-head{
  padding-top: 10px;
}

@media (max-width: 1100px){
  body.page-shell .topbar .toplinks{
    gap: 8px;
  }

  body.page-shell .topbar .toplinks a{
    padding: 10px 12px;
  }
}

@media (max-width: 860px){
  body.page-shell > .topbar::after{
    left: 16px;
    right: 16px;
  }

  body.page-shell .topbar .toplinks a{
    width: 100%;
    justify-content: flex-start;
    min-height: 0;
    padding: 10px 12px;
    border-radius: 14px;
    box-shadow: none;
  }

  body.page-shell .wrap > .panel:first-child,
  body.page-shell .services-wrap > .panel:first-child{
    padding-top: 24px;
  }

  body.page-shell .wrap > .panel:first-child::before,
  body.page-shell .services-wrap > .panel:first-child::before,
  body.page-shell .gallery-layout > .album-main::before{
    left: 14px;
    right: 14px;
    top: 14px;
  }
}


/* =========================
   v6.5 unified page background flow
   Matches the intake page mood across the full site:
   warm gold at the top, then a smooth fade into black.
   This replaces the side-heavy glow with a cleaner vertical flow.
   ========================= */
html{
  background:
    radial-gradient(circle at 50% -10%, rgba(255,221,142,.22) 0%, rgba(255,221,142,.10) 16%, rgba(255,221,142,0) 42%),
    linear-gradient(180deg, #17120b 0%, #0f0d09 18%, #080809 42%, #040405 100%);
}

body,
body.page-shell,
body.page-intake,
body.page-intake.page-shell{
  background:
    radial-gradient(circle at 50% -9%, rgba(255,220,142,.24) 0%, rgba(255,220,142,.12) 14%, rgba(255,220,142,0) 40%),
    linear-gradient(180deg, rgba(24,18,10,.98) 0%, rgba(13,11,9,.985) 18%, rgba(7,7,8,.992) 42%, rgba(4,4,5,1) 100%);
}

body::before{
  background:
    linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 11%, rgba(0,0,0,0) 89%, rgba(0,0,0,.58) 100%),
    radial-gradient(circle at 50% 0%, rgba(255,229,160,.11) 0%, rgba(255,229,160,0) 34%),
    linear-gradient(180deg, rgba(255,209,102,.035) 0%, rgba(255,209,102,0) 30%);
}


/* =========================
   v6.7 preserve approved intake atmosphere + active gold readability
   Keeps the user-approved sitewide Intake background intact while making
   active gold buttons readable and removing the faint bottom seam.
   ========================= */
.album-link.active,
.album-link.active:hover,
.toplinks a.active,
.toplinks a.active:hover,
.btn.primary,
.btn.primary:hover,
.track-btn--play,
.track-btn--play:hover{
  color:#1a140a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 12px 26px rgba(0,0,0,.32),
    0 0 20px rgba(255,210,108,.14) !important;
}

.album-link.active .album-title,
.album-link.active .album-sub,
.album-link.active:hover .album-title,
.album-link.active:hover .album-sub{
  color:#1a140a !important;
  opacity:1;
  text-shadow:none;
}

/* =========================
   v6.8 intake-atmosphere lock
   The goal here is not to "approximate" the Intake page.
   It suppresses the lingering side-glow layers that were making
   gallery/services/packages/contact/legal feel warmer than Intake,
   and re-centers the gold atmosphere at the top of the viewport.
   ========================= */
html,
body,
body.page-shell,
body.page-intake,
body.page-intake.page-shell{
  background:
    radial-gradient(circle at 50% -12%, rgba(255,220,142,.16) 0%, rgba(255,220,142,.08) 13%, rgba(255,220,142,0) 33%),
    linear-gradient(180deg, #17120b 0%, #0f0d09 16%, #070708 42%, #040405 100%) !important;
}

body::before{
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,.34) 8%,
      rgba(0,0,0,.08) 14%,
      rgba(0,0,0,0) 22%,
      rgba(0,0,0,0) 78%,
      rgba(0,0,0,.08) 86%,
      rgba(0,0,0,.34) 92%,
      rgba(0,0,0,.82) 100%),
    radial-gradient(circle at 50% -10%, rgba(255,229,160,.05) 0%, rgba(255,229,160,0) 24%),
    linear-gradient(180deg, rgba(255,209,102,.02) 0%, rgba(255,209,102,0) 18%) !important;
}

body::after{
  opacity:.10 !important;
}

body.page-shell .wrap::before,
body.page-shell .services-wrap::before,
body.page-shell .gallery-layout::before{
  background:none !important;
}

body.page-shell > .topbar{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,230,164,.05),
    0 20px 70px rgba(0,0,0,.42),
    0 0 18px rgba(255,206,93,.035) !important;
}

body.page-shell .wrap > .panel:first-child,
body.page-shell .services-wrap > .panel:first-child,
body.page-shell .gallery-layout > .album-main{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,224,151,.04),
    0 16px 46px rgba(0,0,0,.34),
    0 0 14px rgba(255,208,99,.025) !important;
}


/* =========================
   v6.9 mobile nav viewport lock
   Fixes the hamburger/dropdown on phones by anchoring the open menu to the
   viewport instead of local card containers. This prevents clipping inside the
   home hero card and restores reliable vertical scrolling for the full link set.
   ========================= */
body.menu-open{
  overflow:hidden;
}

@media (max-width: 860px){
  .hero-card{
    overflow: visible;
  }

  .toplinks.open,
  .toplinks.open.menu-portal{
    position: fixed !important;
    top: var(--menu-top, 88px) !important;
    right: var(--menu-right, 16px) !important;
    left: auto !important;
    width: min(320px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(72dvh, calc(100dvh - var(--menu-top, 88px) - 16px));
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    z-index: 5000;
  }

  .toplinks.open a,
  .toplinks.open.menu-portal a{
    width: 100%;
  }
}