/* =====================================================================
   Salon and Spa Botanica — Homepage + signature hero
   ===================================================================== */

/* ── Signature WebGL hero ── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  isolation:isolate; overflow:hidden; padding:calc(var(--header-h) + 2rem) 0 4rem;
}
.hero__poster, #hero-gl{ position:absolute; inset:0; width:100%; height:100%; }
.hero__poster{ z-index:0; object-fit:cover; }
.hero__poster.is-gradient{
  background:
    radial-gradient(110% 90% at 78% 8%, color-mix(in srgb,var(--sage) 42%,transparent), transparent 55%),
    radial-gradient(120% 100% at 12% 100%, color-mix(in srgb,var(--brass) 26%,transparent), transparent 55%),
    linear-gradient(160deg, #fbf7ee 0%, var(--cream) 45%, var(--sand) 100%);
}
#hero-gl{ z-index:1; opacity:0; transition:opacity 1.2s ease; }
#hero-gl.ready{ opacity:1; }
.hero__veil{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, color-mix(in srgb,var(--cream) 72%,transparent) 0%, transparent 58%),
             linear-gradient(0deg, color-mix(in srgb,var(--cream) 55%,transparent), transparent 40%); }
.hero__content{ position:relative; z-index:3; max-width:720px; }
.hero__content .eyebrow{ margin-bottom:1.2rem; }
.hero h1{ font-size:var(--step-5); line-height:.98; margin-bottom:1.4rem; }
.hero h1 .accent{ font-style:italic; color:var(--brass-deep); }
.hero__sub{ font-size:var(--step-1); color:var(--ink-soft); max-width:46ch; margin-bottom:2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero__scroll{ position:absolute; left:50%; bottom:1.7rem; transform:translateX(-50%); z-index:3;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.hero__scroll span{ width:1px; height:38px; background:var(--brass); animation:scrolly 2.2s var(--ease) infinite; transform-origin:top; }
@keyframes scrolly{ 0%{ transform:scaleY(0); } 40%{ transform:scaleY(1); transform-origin:top; } 60%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
.hero__chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.2rem; }

/* ── Marquee ── */
.marquee{ background:var(--green); color:var(--sand); padding:1.1rem 0; overflow:hidden; white-space:nowrap; }
.marquee__track{ display:inline-flex; gap:3rem; animation:marq 32s linear infinite; }
.marquee__track span{ font-family:var(--serif); font-size:1.3rem; display:inline-flex; align-items:center; gap:3rem; color:color-mix(in srgb,var(--sand) 75%,transparent); }
.marquee__track span::after{ content:"✦"; color:var(--brass); }
.marquee[data-stroke] .alt{ color:transparent; -webkit-text-stroke:1px var(--brass-soft); }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ── Intro split ── */
.intro-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:860px){ .intro-split{ grid-template-columns:1fr; } }
.intro-split__media{ position:relative; }
.intro-split__media img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow); aspect-ratio:4/5; object-fit:cover; }
.intro-split__media .badge{ position:absolute; bottom:-26px; right:-10px; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem 1.3rem; text-align:center; }
.intro-split__media .badge .num{ font-family:var(--serif); font-size:2.2rem; color:var(--brass-deep); line-height:1; }
.intro-split__media .badge .lbl{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.feature-list{ display:grid; gap:1rem; margin-top:1.6rem; }
.feature-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.feature-list .ic{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--sand); color:var(--brass-deep); display:grid; place-items:center; }
.feature-list .ic svg{ width:20px; height:20px; }
.feature-list b{ color:var(--green); }

/* ── Why-us value cards ── */
.value-grid{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.value{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem 1.6rem; position:relative; transition:transform .5s var(--ease); }
.value:hover{ transform:translateY(-5px); }
.value .vnum{ font-family:var(--serif); font-size:1rem; color:var(--brass); }
.value h3{ font-size:var(--step-1); margin:.7rem 0 .5rem; }
.value p{ color:var(--ink-soft); font-size:.95rem; }

/* ── Services showcase ── */
.svc-grid{ display:grid; gap:clamp(1rem,2vw,1.5rem); grid-template-columns:repeat(12,1fr); }
.svc{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:300px; display:flex; align-items:flex-end; color:var(--white); isolation:isolate; box-shadow:var(--shadow-sm); }
.svc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .9s var(--ease); }
.svc::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(22,44,34,.9) 0%, rgba(22,44,34,.25) 55%, transparent 100%); }
.svc:hover img{ transform:scale(1.06); }
.svc__body{ padding:1.6rem; }
.svc__body h3{ color:var(--white); font-size:var(--step-2); }
.svc__body p{ color:color-mix(in srgb,var(--sand) 88%,transparent); font-size:.95rem; margin:.4rem 0 .8rem; }
.svc__body .more{ font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-soft); font-weight:600; }
.svc--lg{ grid-column:span 6; } .svc--sm{ grid-column:span 3; } .svc--md{ grid-column:span 6; }
@media (max-width:900px){ .svc--lg,.svc--md{ grid-column:span 6; } .svc--sm{ grid-column:span 6; } }
@media (max-width:560px){ .svc-grid > *{ grid-column:span 12 !important; } }

/* ── Stats band ── */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; text-align:center; }
@media (max-width:700px){ .stats{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; } }
.stat .num{ font-family:var(--serif); font-size:clamp(2.4rem,5vw,3.6rem); color:var(--brass-soft); line-height:1; }
.bg-green .stat .lbl{ color:color-mix(in srgb,var(--sand) 78%,transparent); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; margin-top:.5rem; }
.stat{ position:relative; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:15%; height:70%; width:1px; background:linear-gradient(var(--sage),transparent); }
@media (max-width:700px){ .stat + .stat::before{ display:none; } }

/* ── Testimonials ── */
.testi-grid{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.testi{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem; position:relative; box-shadow:var(--shadow-sm); }
.testi .stars{ color:var(--brass); letter-spacing:.15em; margin-bottom:.8rem; }
.testi blockquote{ font-family:var(--serif); font-size:1.18rem; line-height:1.45; color:var(--green); margin:0 0 1rem; }
.testi .who{ font-size:.9rem; color:var(--ink-soft); font-weight:500; }
.testi .quote-mark{ position:absolute; top:.6rem; right:1.2rem; font-family:var(--serif); font-size:4rem; color:var(--sand-deep); line-height:1; }

/* ── Final CTA ── */
.cta-band{ position:relative; text-align:center; isolation:isolate; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:radial-gradient(60% 120% at 50% 0%, color-mix(in srgb,var(--sage) 30%,transparent), transparent 70%); }
.cta-band h2{ font-size:var(--step-4); max-width:18ch; margin:0 auto 1rem; }
.cta-band .btn-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }

/* ── Instagram strip ── */
.ig-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem; }
@media (max-width:760px){ .ig-strip{ grid-template-columns:repeat(3,1fr); } }
.ig-strip a{ aspect-ratio:1; overflow:hidden; border-radius:10px; position:relative; }
.ig-strip img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ig-strip a:hover img{ transform:scale(1.08); }

/* ── Promo cards ── */
.promo-grid{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.promo{ background:var(--white); border:1px dashed var(--brass); border-radius:var(--radius-lg); padding:1.6rem; position:relative; }
.promo .tag{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-deep); font-weight:600; }
.promo h3{ font-size:var(--step-1); margin:.5rem 0; }
.promo p{ color:var(--ink-soft); font-size:.93rem; }