/* SeroTone Audio — site styles. One file, no frameworks.
   Design system per the 2026-11-11 research playbook:
   ivory base, logo-sampled pastels as section washes only, charcoal voice,
   Montserrat with discipline, one CTA label everywhere. */
@import url('/assets/fonts-decl.css');

:root{
  /* sampled from the logo artwork itself (serotone-logo-v2-transparent.png) */
  --logo-yellow:#EDD784;
  --logo-blush:#E8A49B;
  --logo-green:#5ECB72;
  --logo-charcoal:#40403E;
  /* playbook system */
  --ink:#2B2622;
  --ink-2:#57504A;
  --ink-3:#8A8378;
  --line:#E9E2D4;
  --bg:#FFFEF9;          /* warm ivory base */
  --wash:#FEFBF0;        /* ivory tinted with logo yellow */
  --yellow-wash:#F8EECA; /* logo yellow blended into ivory */
  --blush-wash:#F7DED8;  /* logo blush blended into ivory */
  --green-wash:#CFEFD0;  /* logo green blended into ivory */
  --radius:20px;
  --maxw:1140px;
  --font:'Montserrat',-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
p{max-width:65ch}
.section-head p,.cta-band p,.hero .lede,.testimonial blockquote{margin-left:auto;margin-right:auto}

/* ---------- type ramp ---------- */
h1{font-size:clamp(2.3rem,5.4vw,3.7rem);font-weight:600;line-height:1.12;letter-spacing:-0.02em}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:600;line-height:1.15;letter-spacing:-0.01em}
h3{font-size:1.2rem;font-weight:600;line-height:1.3}
.lede{font-size:clamp(1.07rem,2vw,1.25rem);color:var(--ink-2);line-height:1.6}
.small{font-size:.92rem;color:var(--ink-2)}
.eyebrow{
  display:block;
  font-size:.75rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- header: centered masthead, slim sticky nav row beneath ----------
   The masthead (logo, unchanged size) scrolls away; only the nav row pins,
   so the stuck header is one slim bar instead of the whole stack. No JS. */
.site-header{background:var(--bg)}
.masthead{display:flex;justify-content:center;padding:20px 0 16px}
.logo-link{flex:none;line-height:0}
.logo-link img{height:52px;width:auto}
.nav-row{
  position:sticky;top:0;z-index:50;
  background:rgba(255,254,249,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.main-nav{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;padding:7px 0}
.main-nav a{
  text-decoration:none;font-size:.93rem;font-weight:600;color:var(--ink-2);
  padding:6px 2px;border-bottom:2px solid transparent;
}
.main-nav a:hover{color:var(--ink)}
.main-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--logo-yellow)}
.main-nav a.nav-cta{color:#FFFEF9;border-bottom:none;margin-left:10px}
.main-nav a.nav-cta:hover{color:#FFFEF9}

/* ---------- buttons: ONE primary, charcoal ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font);font-weight:600;font-size:1rem;line-height:1;
  text-decoration:none;border-radius:999px;padding:1rem 1.8rem;min-height:52px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--ink);color:#FFFEF9}
.btn-primary:hover{background:#171310}
.btn-ghost{background:transparent;color:var(--ink);border-color:#CFC7B4}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:.7rem 1.3rem;min-height:48px;font-size:.93rem}
/* secondary actions are text links, never competing buttons */
.tlink{
  font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--logo-yellow);padding-bottom:2px;
}
.tlink:hover{border-bottom-color:var(--logo-blush)}
.tlink::after{content:" →"}

/* ---------- layout ---------- */
.section{padding:88px 0}
.section.wash{background:var(--wash)}
.section.yellowwash{background:var(--yellow-wash)}
.section.blushwash{background:var(--blush-wash)}
.section-head{max-width:720px;margin:0 auto 48px;text-align:center}
.section-head.left{margin-left:0;text-align:left}
.section-head .eyebrow{margin-bottom:16px}
.section-head h2{margin-bottom:14px}

/* ---------- hero (full-bleed photo + ivory panel) ---------- */
.hero-photo{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden;background:#1c1916}
.hero-photo>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;
}
.hero-panel{
  position:relative;z-index:2;width:100%;
  padding:64px 0 56px;
}
.hero-card{
  background:var(--bg);border-radius:24px;max-width:640px;
  padding:48px 48px;box-shadow:0 18px 44px rgba(27,22,17,.26);
}
.hero-card .eyebrow{margin-bottom:16px}
.hero-card h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:16px}
.hero-card .lede{font-size:1.13rem;margin-bottom:26px}
.micro-proof{
  margin-top:18px;font-size:.9rem;color:var(--ink-2);line-height:1.55;
}
.micro-proof .star{color:#D9930D;letter-spacing:.1em}
.micro-proof strong{color:var(--ink)}
/* inner-page hero */
.hero{padding:76px 0 0;text-align:center}
.hero .eyebrow{margin-bottom:18px}
.hero h1{max-width:900px;margin:0 auto 20px}
.hero .lede{max-width:640px;margin:0 auto 32px}
.hero-media{max-width:1020px;margin:52px auto 0;padding:0 24px}
.hero-media img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:24px;box-shadow:0 24px 60px rgba(43,38,34,.16);
}

/* ---------- venue strip ---------- */
.venue-strip{padding:40px 0;border-bottom:1px solid var(--line);text-align:center}
.venue-strip .k{
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:16px;
}
.venue-strip .venues{
  display:flex;justify-content:center;gap:12px 40px;flex-wrap:wrap;
  font-weight:600;font-size:1.02rem;color:var(--ink-2);
}
.venue-strip .venues span{white-space:nowrap}

/* ---------- manifesto ---------- */
.manifesto{max-width:860px;margin:0 auto;text-align:center}
.manifesto p{
  font-size:clamp(1.5rem,3.4vw,2.15rem);font-weight:600;line-height:1.35;max-width:none;
}
.manifesto p span{display:block}
.manifesto .sub{margin-top:26px;font-size:1.08rem;font-weight:400;color:var(--ink-2);max-width:620px}

/* ---------- split sections ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .media img{border-radius:var(--radius);width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:0 16px 40px rgba(43,38,34,.12)}
.split .media.tall img{aspect-ratio:4/5}
.split .copy .eyebrow{margin-bottom:16px}
.split .copy h2{margin-bottom:16px}
.split .copy p{color:var(--ink-2);margin-bottom:16px}
.split .copy p strong{color:var(--ink)}
.quote-line{
  font-size:1.15rem;font-style:italic;font-weight:500;color:var(--ink);
  border-left:3px solid var(--logo-yellow);padding-left:18px;margin:22px 0;max-width:60ch;
}
.film{border-radius:var(--radius);overflow:hidden;box-shadow:0 16px 40px rgba(43,38,34,.16);background:#000}
.film video{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.film-cap{font-size:.88rem;color:var(--ink-3);margin-top:10px;text-align:center;transition:opacity .4s ease}
.film-cap.hide{opacity:0}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;display:flex;flex-direction:column;gap:12px;
}
.card .tag{
  align-self:flex-start;font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}
.card h3{font-size:1.3rem}
.card .tagline{font-weight:600;color:var(--ink)}
.card p{color:var(--ink-2);font-size:.98rem}
.card ul{list-style:none;margin-top:2px}
.card ul li{
  color:var(--ink-2);font-size:.96rem;padding:7px 0 7px 24px;position:relative;
  border-top:1px solid var(--line);
}
.card ul li::before{
  content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;
  background:var(--logo-green);
}
.card ul li:first-child{border-top:0}
.card .card-cta{margin-top:auto;padding-top:16px}

/* ---------- testimonial ---------- */
.testimonial{max-width:820px;margin:0 auto;text-align:center}
.testimonial blockquote{
  font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:500;line-height:1.55;color:var(--ink);
}
.testimonial figcaption{margin-top:24px;font-weight:700}
.testimonial figcaption span{display:block;font-weight:500;color:var(--ink-3);font-size:.92rem;margin-top:2px}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery figure{border-radius:16px;overflow:hidden;position:relative;background:var(--wash);aspect-ratio:4/3.4}
.gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 16px 12px;color:#fff;font-size:.88rem;font-weight:600;
  background:linear-gradient(transparent,rgba(27,22,17,.72));
}
.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.photo-strip figure{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--wash)}
.photo-strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-strip figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;color:#fff;
  font-size:.8rem;font-weight:600;background:linear-gradient(transparent,rgba(27,22,17,.7));
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(24,20,16,.94);
  display:none;align-items:center;justify-content:center;flex-direction:column;
  padding:24px;
}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1100px,94vw);max-height:82vh;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.lightbox figcaption{color:#F3EDDF;font-size:.95rem;font-weight:600;margin-top:16px;text-align:center}
.lightbox button{
  position:absolute;background:rgba(255,254,249,.12);color:#fff;border:1px solid rgba(255,254,249,.35);
  border-radius:999px;width:48px;height:48px;font-size:1.3rem;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.lightbox button:hover{background:rgba(255,254,249,.25)}
.lightbox .lb-close{top:18px;right:18px}
.lightbox .lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:14px;top:50%;transform:translateY(-50%)}

/* ---------- review cards ---------- */
.review-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;display:flex;flex-direction:column;gap:12px;
}
.review-card .stars{color:#D9930D;letter-spacing:.12em;font-size:.95rem}
.review-card blockquote{font-size:1.02rem;line-height:1.6;color:var(--ink)}
.review-card .who{margin-top:auto;font-weight:700;font-size:.95rem}
.review-card .who span{display:block;font-weight:500;color:var(--ink-3);font-size:.86rem;margin-top:2px}
@media (max-width:920px){.review-cards{grid-template-columns:1fr}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{padding:8px 4px}
.step .num{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;background:var(--yellow-wash);margin-bottom:16px;
}
.step:nth-child(2) .num{background:var(--blush-wash)}
.step:nth-child(3) .num{background:var(--green-wash)}
.step h3{margin-bottom:8px}
.step p{color:var(--ink-2);font-size:.97rem}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto}
.faq details{border-top:1px solid var(--line);padding:6px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;font-weight:600;font-size:1.06rem;padding:16px 34px 16px 2px;position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.4rem;font-weight:400;color:var(--ink-3);
}
.faq details[open ] summary::after{content:"–"}
.faq details p{color:var(--ink-2);padding:0 2px 20px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.contact-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;background:#fff;
  text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;
}
.contact-card .k{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.contact-card .v{font-size:1.18rem;font-weight:700}
.contact-card a{text-decoration:none}
.contact-card a:hover{text-decoration:underline}
.contact-card p{color:var(--ink-2);font-size:.95rem}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;max-width:760px;margin:0 auto}
.cta-band .eyebrow{margin-bottom:16px}
.cta-band h2{margin-bottom:14px}
.cta-band p{color:var(--ink-2);margin-bottom:28px}
.cta-band .row{display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.site-footer{background:var(--bg);color:var(--ink-2);border-top:1px solid var(--line)}
.footer-in{padding:72px 0 36px}
.footer-mark{height:56px;width:auto;margin-bottom:26px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:48px}
.footer-grid p{color:var(--ink-2);font-size:.95rem;max-width:340px}
.footer-grid h4{font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:10px}
.footer-grid a{color:var(--ink-2);text-decoration:none;font-size:.97rem}
.footer-grid a:hover{color:var(--ink);text-decoration:underline}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:24px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.88rem;color:var(--ink-3);
}

/* ---------- sticky mobile booking bar ---------- */
.sticky-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,254,249,.97);border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
}
.sticky-cta .btn{width:100%}

/* ---------- scroll reveal (JS-enhanced only) ---------- */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
html.js .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .main-nav{gap:20px}
  .main-nav a.nav-cta{margin-left:4px}
  .cards,.steps,.contact-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .photo-strip{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:34px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .section{padding:64px 0}
}
@media (max-width:640px){
  body{font-size:16.5px;padding-bottom:78px}
  .sticky-cta{display:block}
  .masthead{padding:13px 0 11px}
  .logo-link img{height:44px}
  .main-nav{justify-content:flex-start;gap:20px;overflow-x:auto;flex-wrap:nowrap;padding:2px 0;scrollbar-width:none}
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{white-space:nowrap;padding:11px 2px} /* 44px+ tap target */
  .main-nav a.nav-cta{display:none} /* the sticky bottom bar carries the single CTA on mobile */
  .hero{padding-top:52px}
  /* Mobile hero: ivory edge to edge, no dark frame. The section drops its
     dark backdrop and the panel's wrap padding goes to zero, so the card
     spans the full width and its own padding insets the content — no
     gutter of any color can appear at the sides. */
  .hero-photo{min-height:0;display:block;background:var(--bg)}
  .hero-photo>img{position:relative;height:52svh}
  .hero-panel{padding:0}
  .hero-panel .wrap{padding-left:0;padding-right:0}
  .hero-card{border-radius:0;box-shadow:none;max-width:none;padding:34px 24px 40px}
  .gallery{grid-template-columns:1fr}
  .btn{padding:.95rem 1.5rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  html.js .reveal{opacity:1;transform:none}
}