:root{
  --cream:#F5EFE3;
  --cream-soft:#FBF5E9;
  --gold:#B98200;
  --gold-soft:#C8A24D;
  --ink:#1a1712;
  --ink-soft:#4a4237;
  --max:1100px;
  --serif:'Cinzel', Georgia, 'Times New Roman', serif;
  --script:'Great Vibes', cursive;
  --body:'Lora', Georgia, serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
}
body.locked{overflow:hidden;height:100vh;}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ===================== INTRO OVERLAY ===================== */
.intro-overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;
  margin:0; max-width:none; max-height:none;
  overflow-y:auto;
  background:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.2rem;
  transition:opacity 1s ease;
}
.intro-overlay.hide{opacity:0; pointer-events:none;}
.intro-logo{
  width:min(95vw, 560px);
  max-width:none;
  height:auto;
}
.intro-logo .frag{
  opacity:0;
  transform:translate(var(--dx,0px), var(--dy,0px)) rotate(var(--rot,0deg)) scale(var(--sc,0.6));
  transform-box:fill-box;
  transform-origin:center;
  transition:transform 1.05s cubic-bezier(.2,.8,.25,1), opacity .7s ease;
}
.intro-logo .frag.assembled{
  opacity:1;
  transform:translate(0,0) rotate(0deg) scale(1);
}
.intro-tagline{
  font-family:var(--script);
  color:var(--gold);
  font-size:2.4rem;
}
.type-cursor{
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:.1em;
  background:var(--gold);
  vertical-align:-.15em;
  animation:blink .8s steps(1) infinite;
}
.type-cursor.done{display:none;}
@keyframes blink{50%{opacity:0;}}
.intro-skip{
  position:absolute; bottom:2rem; right:2rem;
  background:none; border:1px solid var(--gold-soft); color:var(--ink-soft);
  font-family:var(--body); font-size:.8rem; letter-spacing:.05em;
  padding:.5rem 1rem; border-radius:999px; cursor:pointer;
  transition:background .2s ease;
}
.intro-skip:hover{background:rgba(185,130,0,.08);}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(245,239,227,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(185,130,0,.18);
}
.nav-wrap{
  max-width:var(--max); margin:0 auto; padding:1rem 1.4rem;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:.8rem;}
.brand-logo{width:54px; height:54px;}
.brand-text{font-family:var(--serif); font-size:1rem; letter-spacing:.08em;}
.brand-text em{font-style:normal; color:var(--gold);}
.brand-wordmark{height:46px; width:auto;}

.nav-menu{display:flex; align-items:center; gap:1.6rem;}
.nav-menu a{font-size:.85rem; letter-spacing:.04em; color:var(--ink-soft); white-space:nowrap;}
.nav-menu a:hover{color:var(--gold);}
.nav-cta{
  border:1px solid var(--gold); color:var(--gold) !important;
  padding:.45rem 1.1rem; border-radius:999px;
}
.nav-cta:hover{background:var(--gold); color:var(--cream) !important;}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; cursor:pointer;
}
.nav-toggle span{display:block; width:100%; height:2px; background:var(--ink);}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  padding:5rem 1.4rem 6rem;
  text-align:center;
  overflow:hidden;
  background:radial-gradient(circle at 50% 20%, var(--cream-soft), var(--cream) 70%);
}
.hero-rings{
  position:absolute; bottom:0; margin:auto; z-index:0;
  width:900px; height:900px; max-width:160vw; max-height:160vw;
  top:-320px; left:0; right:0;
  background:
    radial-gradient(circle, transparent 0 220px, transparent 220px) ,
    repeating-radial-gradient(circle, rgba(185,130,0,.10) 0 1px, transparent 1px 60px);
  border-radius:50%;
  opacity:.6;
}
.hero-inner{position:relative; z-index:1; max-width:640px; margin:0 auto;}
.hero-logo{width:min(95vw, 560px); max-width:none; margin:0 auto 1.2rem;}
.script-tagline{font-family:var(--script); color:var(--gold); font-size:2.4rem; margin:.2rem 0;}
.script-tagline.small{font-size:1.4rem; margin-top:.6rem;}
.site-footer .script-tagline{color:var(--gold-soft); font-size:1.9rem;}
.hero-copy{font-size:1.05rem; color:var(--ink-soft); margin:1.2rem 0 .4rem;}
.hero-motto{letter-spacing:.15em; text-transform:uppercase; font-size:.85rem; color:var(--ink); margin-bottom:2rem;}

.btn{
  display:inline-block; padding:.9rem 2.2rem; border-radius:999px;
  font-family:var(--serif); letter-spacing:.06em; font-size:.85rem;
  border:1px solid var(--gold);
  cursor:pointer;
}
.btn-gold{background:var(--gold); color:var(--cream);}
.btn-gold:hover{background:#a17400;}
.btn-outline{background:none; color:var(--gold); border:1px solid var(--gold);}
.btn-outline:hover{background:rgba(185,130,0,.1);}

/* ===================== SECTIONS ===================== */
.section{padding:5rem 1.4rem; max-width:var(--max); margin:0 auto;}
.section.alt{background:var(--cream-soft); max-width:none; padding-left:1.4rem; padding-right:1.4rem;}
.section.alt > *{max-width:var(--max); margin-left:auto; margin-right:auto;}
.section-title{
  font-family:var(--serif); font-size:1.8rem; letter-spacing:.06em;
  text-align:center; margin-bottom:.5rem;
}
.section-title.left{text-align:left;}
.section-sub{text-align:center; color:var(--ink-soft); margin-bottom:2.6rem;}

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;}
.step{text-align:center; padding:1.4rem 1rem; border:1px solid rgba(185,130,0,.2); border-radius:14px;}
.step-num{font-family:var(--serif); color:var(--gold-soft); font-size:1.3rem;}
.step h3{font-family:var(--serif); font-size:1rem; margin:.6rem 0;}
.step p{font-size:.9rem; color:var(--ink-soft);}

/* split (jukebox) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;}
.framed-img{border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.12);}
.feature-list{padding-left:1.1rem; color:var(--ink-soft);}
.feature-list li{margin-bottom:.5rem;}
.quiet{font-family:var(--serif); letter-spacing:.1em; color:var(--gold); margin-top:1.2rem;}

/* usage steps */
.usage-steps{
  list-style:none; margin:0 auto; padding:0; max-width:900px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center;
}
.usage-steps li{display:flex; flex-direction:column; align-items:center; gap:.8rem;}
.usage-steps strong{display:block; font-family:var(--serif); font-size:.95rem;}
.usage-steps p{margin:0; font-size:.9rem; color:var(--ink-soft);}
.usage-icon{
  flex:none; width:52px; height:52px; border-radius:50%;
  background:var(--gold); display:flex; align-items:center; justify-content:center;
}
.usage-icon svg{width:24px; height:24px; fill:none; stroke:var(--cream); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}

/* callout */
.callout{
  border:1px dashed var(--gold-soft); border-radius:14px; padding:1.4rem 1.6rem;
  background:rgba(200,162,77,.08); color:var(--ink-soft); font-size:.92rem;
}
.callout code{background:rgba(0,0,0,.06); padding:.1rem .35rem; border-radius:4px;}

/* pricing */
.price-table-wrap{overflow-x:auto; margin-bottom:2.4rem;}
.price-table{width:100%; border-collapse:collapse; font-family:var(--serif); font-size:.9rem;}
.price-table th{background:var(--gold); color:var(--cream); padding:.9rem; text-align:center; letter-spacing:.05em;}
.price-table td{padding:.85rem; text-align:center; border-bottom:1px solid rgba(185,130,0,.2);}
.price-table tr:last-child td{border-bottom:none;}
.price-includes h3{text-align:center; font-family:var(--serif); font-size:1.1rem; margin-bottom:1.4rem;}
.includes-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; text-align:center;}
.includes-grid div{padding:1rem .6rem; border-radius:12px; background:var(--cream);}
.includes-grid strong{display:block; font-family:var(--serif); font-size:.85rem; margin-bottom:.3rem;}
.includes-grid span{font-size:.8rem; color:var(--ink-soft);}
.price-note{text-align:center; margin-top:2rem; color:var(--ink-soft);}
.price-intro{text-align:center; color:var(--ink-soft); margin:-1.6rem 0 2rem; font-size:.92rem;}
.price-note a{color:var(--gold); text-decoration:underline;}

/* samples */
.samples{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
.sample-card{border:1px solid rgba(185,130,0,.2); border-radius:14px; padding:1.4rem; text-align:center;}
.sample-card h3{font-family:var(--serif); font-size:1rem; margin-bottom:1rem;}
.sample-card audio{width:100%;}

/* form */
.order-form{max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:1.2rem;}
.form-row{display:flex; flex-direction:column; gap:.4rem;}
.form-row label{font-size:.85rem; color:var(--ink-soft);}
.form-row input, .form-row textarea, .form-row select{
  font-family:var(--body); font-size:.95rem; padding:.7rem .9rem;
  border:1px solid rgba(185,130,0,.35); border-radius:8px; background:var(--cream);
  color:var(--ink); resize:vertical;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{outline:2px solid var(--gold-soft);}
.order-form .btn{align-self:center; margin-top:.6rem; border:none;}
.form-note{text-align:center; font-size:.78rem; color:var(--ink-soft);}

.form-result{
  max-width:640px; margin:2.4rem auto 0; padding:1.6rem;
  border:1px solid rgba(185,130,0,.3); border-radius:14px;
  background:var(--cream); text-align:center;
}
.form-result h3{font-family:var(--serif); font-size:1.05rem; margin:0 0 .5rem;}
.form-result p{font-size:.88rem; color:var(--ink-soft); margin:0 0 1rem;}
.form-result-text{
  width:100%; font-family:var(--body); font-size:.85rem; padding:.8rem;
  border:1px solid rgba(185,130,0,.35); border-radius:8px; resize:vertical;
  background:var(--cream-soft); color:var(--ink); margin-bottom:1rem;
}
.form-result-actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;}
.copy-feedback{margin-top:.9rem; font-size:.82rem; color:var(--gold);}

/* ===================== BACK TO TOP ===================== */
.back-to-top{
  display:none;
  position:fixed; bottom:1.2rem; right:1.2rem; z-index:500;
  width:48px; height:48px; border-radius:50%;
  background:var(--gold); align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.back-to-top svg{width:22px; height:22px; fill:none; stroke:var(--cream); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* ===================== FOOTER ===================== */
.site-footer{
  background:var(--ink); color:var(--cream);
  text-align:center; padding:3.5rem 1.4rem 2.4rem;
}
.footer-logo-badge{
  width:132px; height:132px; border-radius:50%;
  background:var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto;
}
.footer-logo{width:100px;}
.social-row{display:flex; justify-content:center; gap:1rem; margin:1.6rem 0;}
.social-icon{
  width:42px; height:42px; border-radius:50%;
  background:var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.social-icon:hover{background:var(--gold); transform:translateY(-3px);}
.social-icon svg{width:19px; height:19px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.footer-copy{font-size:.78rem; color:#cbbfa5; margin-top:1rem;}

/* ===================== LARGE SCREENS / TV ===================== */
@media (min-width:1440px) and (max-width:1919.98px){
  :root{--max:1280px;}
  html{font-size:17px;}
  .hero-logo, .intro-logo{width:min(55vw, 640px);}
  .brand-logo{width:60px; height:60px;}
  .brand-wordmark{height:50px;}
  .footer-logo-badge{width:150px; height:150px;}
  .footer-logo{width:112px;}
  .social-icon{width:48px; height:48px;}
  .social-icon svg{width:22px; height:22px;}
}
@media (min-width:1920px) and (max-width:2599.98px){
  :root{--max:1520px;}
  html{font-size:19px;}
  .hero-logo, .intro-logo{width:min(45vw, 760px);}
  .brand-logo{width:68px; height:68px;}
  .brand-wordmark{height:58px;}
  .footer-logo-badge{width:170px; height:170px;}
  .footer-logo{width:128px;}
  .social-icon{width:54px; height:54px;}
  .social-icon svg{width:25px; height:25px;}
}
@media (min-width:2600px){
  :root{--max:1850px;}
  html{font-size:22px;}
  .hero-logo, .intro-logo{width:min(38vw, 900px);}
  .brand-logo{width:82px; height:82px;}
  .brand-wordmark{height:70px;}
  .footer-logo-badge{width:200px; height:200px;}
  .footer-logo{width:150px;}
  .social-icon{width:64px; height:64px;}
  .social-icon svg{width:30px; height:30px;}
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:860px){
  .steps{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;}
  .includes-grid{grid-template-columns:repeat(2,1fr);}
  .samples{grid-template-columns:1fr;}
  .usage-steps{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .nav-menu, .nav-toggle{display:none;}
  .brand-wordmark{display:none;}
  .nav-wrap{justify-content:center;}
  .back-to-top{display:flex;}
  .steps{grid-template-columns:1fr;}
  .includes-grid{grid-template-columns:1fr 1fr;}

  .hero{padding:2.6rem 1.2rem 3rem;}
  .hero-logo{width:min(62vw, 260px);}
  .section{padding:3rem 1.2rem;}
  .section-title{font-size:1.5rem;}
  .section-sub{margin-bottom:1.8rem;}
  .step{padding:1.1rem .9rem;}
  .steps{gap:1.1rem;}
  .split{gap:1.8rem;}
}