/* ============================================================
   WILD SPIRIT RISING — earthy premium
   Display: Fraunces · Body: Jost
   Palette: sand paper / deep earth ink / waterhole teal / escarpment ochre
   Location strings live ONLY in the few [data-loc] spots (Darwin-move proof).
   ============================================================ */

:root {
  --sand: #f5f0e6;
  --sand-2: #ece4d2;
  --sand-3: #e2d7bf;
  --ink: #26221a;
  --ink-2: #5b5546;
  --ink-3: #8a8271;
  --teal: #2f5d58;
  --teal-deep: #1f423f;
  --ochre: #c0703c;
  --gold: #c9932a;
  --white: #fdfbf7;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Jost", "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --r: 14px;
  --shadow: 0 22px 54px rgba(38, 34, 26, 0.16);
  --t-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, .display { font-family: var(--serif); font-weight: 550; line-height: 1.06; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6.2vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; }
.serif-i { font-style: italic; font-weight: 480; }

.overline {
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500; display: inline-flex; align-items: center; gap: 0.6rem;
}
.overline::before { content: ""; width: 26px; height: 1px; background: var(--ochre); }
.lead { font-size: clamp(1.06rem, 1.5vw, 1.3rem); color: var(--ink-2); max-width: 58ch; }
.note { font-size: 0.85rem; color: var(--ink-3); }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); max-width: 1340px; margin: 0 auto; }
section { position: relative; }
.band { padding: clamp(4rem, 9vw, 8.5rem) 0; }
.band-tight { padding: clamp(3rem, 6vw, 5.5rem) 0; }

/* ---------------- reveals (JS adds .in) ---------------- */
html.js .rv { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--t-soft), transform 0.9s var(--t-soft); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv.d1 { transition-delay: 0.1s; } html.js .rv.d2 { transition-delay: 0.2s; }
html.js .rv.d3 { transition-delay: 0.3s; } html.js .rv.d4 { transition-delay: 0.4s; }

/* ---------------- nav ---------------- */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem var(--gutter);
  transition: background 0.35s, box-shadow 0.35s, padding 0.35s;
}
#nav.scrolled { background: rgba(245, 240, 230, 0.92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(38,34,26,0.08); padding: 0.55rem var(--gutter); }
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo { height: 34px; width: auto; max-height: 34px; display: block; }
@media (max-width: 720px) { .brand-logo { height: 28px; max-height: 28px; } }
.nav-links { display: flex; gap: clamp(1rem, 2.2vw, 2rem); align-items: center; }
.nav-links a { font-size: 0.94rem; font-weight: 500; color: var(--ink-2); position: relative; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background: var(--ochre); transition: width 0.3s var(--t-soft); }
.nav-links a:not(.btn):hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--ink); }
.nav-links a.btn, .nav-links a.btn:hover { color: var(--white); }

/* over the hero (not yet scrolled) the nav sits on photography — go light */
#nav:not(.scrolled) { background: linear-gradient(180deg, rgba(24, 30, 27, 0.38), transparent); }
#nav:not(.scrolled) .nav-links a:not(.btn) { color: rgba(253, 251, 247, 0.94); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
#nav:not(.scrolled) .brand-logo { filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,0.45)); }
#nav:not(.scrolled) .nav-links a:not(.btn)::after { background: var(--gold); }
#nav:not(.scrolled) #burger span { background: var(--white); }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--teal); color: var(--white); font-weight: 500; font-size: 0.97rem;
  padding: 0.78rem 1.55rem; border-radius: 999px; border: 1px solid var(--teal);
  transition: transform 0.25s var(--t-soft), box-shadow 0.25s, background 0.25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31, 66, 63, 0.28); background: var(--teal-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(38, 34, 26, 0.3); }
.btn-ghost:hover { background: rgba(38, 34, 26, 0.06); box-shadow: none; color: var(--ink); }
.btn-light { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.btn-light:hover { background: var(--white); }

#burger { display: none; background: none; border: 0; width: 42px; height: 42px; cursor: pointer; z-index: 70; }
#burger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px auto; transition: 0.3s; }
#mnav { display: none; }

/* ---------------- hero ---------------- */
/* position:relative is load-bearing: .hero-media is absolute and must be
   contained + clipped here, or its slow zoom leaks page width */
.hero, .page-hero { position: relative; }
.hero { min-height: 100svh; display: grid; align-items: end; overflow: clip; color: var(--white); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero.has-video .hero-media video { opacity: 1; }
.hero-veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(31, 42, 38, 0.32) 0%, rgba(31, 42, 38, 0.06) 42%, rgba(24, 30, 27, 0.62) 100%); }
.hero-inner { width: 100%; padding: 0 var(--gutter) clamp(2.6rem, 6vh, 5rem); max-width: 1340px; margin: 0 auto; }
.hero .overline { color: rgba(253, 251, 247, 0.85); }
.hero .overline::before { background: var(--gold); }
.hero h1 { max-width: 12ch; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); }
.hero-sub { max-width: 52ch; margin-top: 1.1rem; font-size: clamp(1.02rem, 1.4vw, 1.22rem); color: rgba(253, 251, 247, 0.92); }
.hero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero .btn-ghost { color: var(--white); border-color: rgba(253, 251, 247, 0.55); }
.hero .btn-ghost:hover { background: rgba(253, 251, 247, 0.14); color: var(--white); }
.trust { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.6rem;
  background: rgba(24, 30, 27, 0.42); border: 1px solid rgba(253, 251, 247, 0.22);
  backdrop-filter: blur(8px); padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.9rem; }
.trust .star { color: var(--gold); }
.scroll-cue { position: absolute; right: var(--gutter); bottom: 2.4rem; width: 1px; height: 64px; background: rgba(253,251,247,0.35); overflow: hidden; }
.scroll-cue::after { content: ""; position: absolute; top: -40%; left: 0; width: 100%; height: 40%;
  background: var(--white); animation: cue 2.2s var(--t-soft) infinite; }
@keyframes cue { 0% { top: -40%; } 60%, 100% { top: 110%; } }

/* staggered hero intro */
html.js .h-stagger > * { opacity: 0; transform: translateY(28px); }
html.js .hero.ready .h-stagger > * { opacity: 1; transform: none; transition: opacity 1s var(--t-soft), transform 1s var(--t-soft); }
html.js .hero.ready .h-stagger > *:nth-child(2) { transition-delay: 0.12s; }
html.js .hero.ready .h-stagger > *:nth-child(3) { transition-delay: 0.24s; }
html.js .hero.ready .h-stagger > *:nth-child(4) { transition-delay: 0.36s; }
html.js .hero.ready .h-stagger > *:nth-child(5) { transition-delay: 0.48s; }

/* ---------------- breath circle ---------------- */
.breath { display: grid; place-items: center; text-align: center; gap: 1.2rem; }
.breath-ring { position: relative; width: clamp(150px, 20vw, 210px); aspect-ratio: 1; display: grid; place-items: center; }
.breath-ring::before, .breath-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.breath-ring::before { border: 1.5px solid rgba(47, 93, 88, 0.35); }
.breath-ring::after { border: 1.5px solid var(--teal); }
html.js.motion .breath-ring::after { animation: breathe 19s var(--t-soft) infinite; }
html.js.motion .breath-ring::before { animation: breathe 19s var(--t-soft) infinite reverse; opacity: 0.4; }
@keyframes breathe {
  0% { transform: scale(0.72); } 21% { transform: scale(1); }
  58% { transform: scale(1); } 100% { transform: scale(0.72); }
}
.breath-label { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--teal); min-height: 1.6em; transition: opacity 0.5s; }
.breath-label.swap { opacity: 0; }

/* ---------------- offer cards ---------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2.2rem); }
.card {
  background: var(--white); border-radius: var(--r); overflow: clip; box-shadow: 0 10px 30px rgba(38, 34, 26, 0.08);
  display: flex; flex-direction: column; transition: transform 0.35s var(--t-soft), box-shadow 0.35s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
/* position+absolute keeps every card image locked to 4:3 regardless of the
   photo's own shape (a tall photo otherwise stretches its card) */
.card-img { position: relative; aspect-ratio: 4 / 3; overflow: clip; }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--t-soft); }
.card:hover .card-img img { transform: scale(1.05); }
.card-body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; }
.card-tag { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ochre); font-weight: 600; }
.card p { color: var(--ink-2); font-size: 0.97rem; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 0.9rem; }
.price { font-family: var(--serif); font-size: 1.15rem; }
.price small { display: block; font-family: var(--sans); font-size: 0.72rem; color: var(--ink-3); }
.card-link { font-weight: 600; font-size: 0.92rem; color: var(--teal); display: inline-flex; gap: 0.35rem; align-items: center; }
.card-link svg { transition: transform 0.3s var(--t-soft); }
.card:hover .card-link svg { transform: translateX(4px); }

/* ---------------- full-bleed statement ---------------- */
.statement { min-height: 82vh; display: grid; place-items: center; overflow: clip; color: var(--white); text-align: center; }
.statement .plx-img { position: absolute; inset: -12% 0; z-index: -2; }
.statement .plx-img img { width: 100%; height: 100%; object-fit: cover; }
.statement .plx-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.statement.has-video .plx-img video { opacity: 1; }
.statement::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(24, 32, 29, 0.44); }
.statement h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); max-width: 17ch; text-shadow: 0 2px 34px rgba(0,0,0,0.3); }
.statement .overline { color: rgba(253,251,247,0.85); justify-content: center; }
.statement .overline::before { background: var(--gold); }

/* ---------------- mel band ---------------- */
.mel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mel-photo { position: relative; }
.mel-photo img { border-radius: var(--r); box-shadow: var(--shadow); }
.mel-photo::after { content: ""; position: absolute; inset: 1.2rem -1.2rem -1.2rem 1.2rem; border: 1.5px solid var(--ochre); border-radius: var(--r); z-index: -1; }
.mel blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.45; color: var(--ink); margin: 1.2rem 0; }
.sig { font-family: var(--serif); font-style: italic; color: var(--teal); font-size: 1.1rem; }

/* ---------------- steps ---------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 3rem); counter-reset: step; }
.step { border-top: 1.5px solid rgba(38, 34, 26, 0.18); padding-top: 1.3rem; }
.step-no { font-family: var(--serif); font-size: 2.1rem; color: var(--ochre); font-style: italic; }
.step h3 { margin: 0.4rem 0 0.5rem; }
.step p { color: var(--ink-2); font-size: 0.97rem; }

/* ---------------- testimonial marquee ---------------- */
.tape { background: var(--teal-deep); color: var(--sand); padding: clamp(2.6rem, 5vw, 4rem) 0; overflow: clip; }
.tape-head { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-bottom: 1.8rem; }
.badge49 { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(253,251,247,0.1); border: 1px solid rgba(253,251,247,0.25); padding: 0.45rem 1rem; border-radius: 999px; font-size: 0.92rem; }
.badge49 .star { color: var(--gold); }
.marquee { display: flex; overflow: clip; user-select: none; }
.marquee-track { display: flex; gap: 2.6rem; padding-right: 2.6rem; flex-shrink: 0; align-items: center; animation: none; }
html.js.motion .marquee-track { animation: tape 46s linear infinite; }
.tape:hover .marquee-track { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-100%); } }
.quote { font-family: var(--serif); font-style: italic; font-size: 1.18rem; white-space: nowrap; }
.quote b { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 0.82rem; color: rgba(245,240,230,0.72); margin-left: 0.7rem; letter-spacing: 0.06em; }
.quote::after { content: "✦"; color: var(--gold); margin-left: 2.6rem; font-size: 0.8rem; }

/* ---------------- mosaic ---------------- */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 0.9rem; }
.mo { border-radius: var(--r); overflow: clip; position: relative; }
.mo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--t-soft); }
.mo:hover img { transform: scale(1.06); }
.mo-w { grid-column: span 2; } .mo-t { grid-row: span 2; }

/* ---------------- CTA band + footer ---------------- */
.cta-band { background: var(--sand-2); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mailrow { display: flex; gap: 0.6rem; margin-top: 1.2rem; max-width: 460px; }
.mailrow input { flex: 1; border: 1.5px solid rgba(38, 34, 26, 0.25); background: var(--white); border-radius: 999px; padding: 0.75rem 1.2rem; font: inherit; font-size: 0.95rem; }
.mailrow input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }

footer { background: var(--ink); color: var(--sand-2); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: clamp(1.6rem, 4vw, 3.5rem); }
.foot-grid h4 { font-family: var(--serif); font-weight: 550; font-size: 1.05rem; margin-bottom: 0.9rem; color: var(--white); }
.foot-grid a, .foot-grid p { color: rgba(236, 228, 210, 0.75); font-size: 0.94rem; }
.foot-grid li { margin-bottom: 0.45rem; }
.foot-grid a:hover { color: var(--white); }
.foot-bar { border-top: 1px solid rgba(236, 228, 210, 0.16); margin-top: 2.6rem; padding-top: 1.4rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: rgba(236, 228, 210, 0.55); }

/* ---------------- subpage scaffolding ---------------- */
.page-hero { min-height: 62vh; display: grid; align-items: end; color: var(--white); overflow: clip; }
.page-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* lighter veil — photography must stay luminous, only the copy zone needs help */
.page-hero .hero-veil { background: linear-gradient(180deg, rgba(31,42,38,0.16), rgba(31,42,38,0.02) 40%, rgba(24,30,27,0.52)); }
/* living heroes: slow Ken Burns drift on every subpage */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09) translateY(-1.6%); } }
html.js.motion .page-hero .hero-media img { animation: kenburns 26s ease-in-out infinite alternate; will-change: transform; }
.page-hero .hero-inner { padding-bottom: clamp(2.2rem, 5vh, 4rem); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split img { border-radius: var(--r); box-shadow: var(--shadow); }
.prose { max-width: 68ch; }
.prose p + p { margin-top: 1rem; }
.prose h2 { margin: 2.4rem 0 1rem; }
.checklist li { display: flex; gap: 0.7rem; margin-bottom: 0.6rem; color: var(--ink-2); }
.checklist li::before { content: "✦"; color: var(--ochre); flex-shrink: 0; }
.fineprint { background: var(--sand-2); border-left: 3px solid var(--ochre); border-radius: 0 var(--r) var(--r) 0; padding: 1.1rem 1.4rem; font-size: 0.88rem; color: var(--ink-2); }

.faq details { border-top: 1px solid rgba(38,34,26,0.16); }
.faq details:last-child { border-bottom: 1px solid rgba(38,34,26,0.16); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--serif); font-size: 1.12rem; padding: 1.1rem 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--ochre); transition: transform 0.3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.2rem; color: var(--ink-2); max-width: 65ch; }

.pricing-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.tier { background: var(--white); border-radius: var(--r); padding: 1.8rem 1.6rem; box-shadow: 0 10px 30px rgba(38,34,26,0.08); display: flex; flex-direction: column; gap: 0.6rem; }
.tier.hot { outline: 2px solid var(--teal); position: relative; }
.tier.hot::before { content: "most loved"; position: absolute; top: -0.8em; left: 1.4rem; background: var(--teal); color: var(--white);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.25rem 0.8rem; border-radius: 999px; }
.tier .price { font-size: 1.9rem; }
.tier ul { margin: 0.4rem 0 1rem; }
.tier li { font-size: 0.92rem; color: var(--ink-2); padding: 0.28rem 0; border-bottom: 1px dashed rgba(38,34,26,0.12); }
.tier .btn { margin-top: auto; justify-content: center; }

.review-card { background: var(--white); border-radius: var(--r); padding: 1.6rem; box-shadow: 0 10px 30px rgba(38,34,26,0.08); }
.review-card .stars { color: var(--gold); letter-spacing: 0.12em; margin-bottom: 0.6rem; }
.review-card p { font-size: 0.97rem; color: var(--ink-2); }
.review-card b { display: block; margin-top: 0.9rem; font-weight: 600; color: var(--ink); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

/* WhatsApp fab */
.fab { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 55; box-shadow: 0 14px 34px rgba(31,66,63,0.4); }

/* ---------------- responsive ---------------- */
@media (max-width: 980px) {
  .cards, .steps, .pricing-tiles, .reviews-grid { grid-template-columns: 1fr 1fr; }
  .mel, .split, .cta-grid { grid-template-columns: 1fr; }
  .mel-photo { max-width: 440px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  #burger { display: block; }
  #mnav { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(38, 34, 26, 0.97); color: var(--sand);
    padding: 5.5rem var(--gutter) 2rem; transform: translateY(-102%); transition: transform 0.45s var(--t-soft); }
  #mnav.open { transform: none; }
  #mnav a { display: block; font-family: var(--serif); font-size: 1.7rem; padding: 0.7rem 0; color: var(--sand); }
  #burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--sand); }
  #burger.open span:nth-child(2) { opacity: 0; }
  #burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--sand); }
  .cards, .steps, .pricing-tiles, .reviews-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .trust { max-width: calc(100% - 128px); } /* keep clear of the WhatsApp fab */
  .mailrow { flex-direction: column; }
  .mailrow .btn { justify-content: center; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv, html.js .rv.in, html.js .h-stagger > *, html.js .hero.ready .h-stagger > * { opacity: 1; transform: none; transition: none; }
  .breath-ring::before, .breath-ring::after { animation: none !important; }
  .marquee-track { animation: none !important; }
  html.js .page-hero .hero-media img { animation: none !important; }
  .scroll-cue { display: none; }
}

/* ---------------- ambient video interlude band ---------------- */
.vband { position: relative; min-height: 64vh; overflow: clip; display: grid; align-items: end; color: var(--white); }
.vband > img, .vband > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vband > video { opacity: 0; transition: opacity 1.2s ease; }
.vband.has-video > video { opacity: 1; }
.vband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,30,27,0.05) 55%, rgba(24,30,27,0.55)); }
.vband-cap { position: relative; z-index: 1; padding: 0 var(--gutter) clamp(2rem, 5vh, 3.5rem); max-width: 1340px; margin: 0 auto; width: 100%; display: grid; gap: 0.7rem; }

/* living portrait inside the framed photo */
.mel-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r); opacity: 0; transition: opacity 1.2s ease; }
section.has-video .mel-photo video { opacity: 1; }

/* ---------------- ice session shots (breathwork) ---------------- */
.ice-shots { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 2rem); }
.ice-shot { margin: 0; }
.ice-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: 0 14px 34px rgba(38,34,26,0.12); }
.ice-shot figcaption { margin-top: 0.7rem; font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 1.02rem; }
@media (max-width: 767px) { .ice-shots { grid-template-columns: 1fr; } }

/* whole offer card clickable via stretched overlay (inner links still win) */
.card { position: relative; }
.card-cover { position: absolute; inset: 0; z-index: 1; }
.card .card-body, .card .card-img { position: relative; }
.card-link { position: relative; z-index: 2; }

/* ============================================================
   CREATIVE LAYER — floating petals, gradient orbs, 3D tilt
   All decorative, pointer-events:none, reduced-motion safe.
   ============================================================ */
.petals { position: absolute; inset: 0; overflow: clip; pointer-events: none; z-index: 0; }
.petal { position: absolute; top: -8%; width: 18px; height: 18px; opacity: 0; will-change: transform;
  background: radial-gradient(circle at 30% 30%, var(--ochre), var(--gold));
  border-radius: 0 100% 0 100%; filter: blur(0.3px); }
html.motion .petal { animation: petalfall linear infinite; }
@keyframes petalfall {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.5; }
  92% { opacity: 0.5; }
  100% { transform: translateY(112vh) translateX(60px) rotate(320deg); opacity: 0; }
}
.petal:nth-child(1){left:8%; animation-duration:17s; animation-delay:0s; background:radial-gradient(circle at 30% 30%,var(--teal),#4d8079);}
.petal:nth-child(2){left:22%; animation-duration:22s; animation-delay:3s; width:13px;height:13px;}
.petal:nth-child(3){left:38%; animation-duration:19s; animation-delay:7s;}
.petal:nth-child(4){left:54%; animation-duration:25s; animation-delay:2s; width:11px;height:11px; background:radial-gradient(circle at 30% 30%,var(--teal),#4d8079);}
.petal:nth-child(5){left:69%; animation-duration:20s; animation-delay:9s;}
.petal:nth-child(6){left:83%; animation-duration:23s; animation-delay:5s; width:14px;height:14px;}
.petal:nth-child(7){left:92%; animation-duration:18s; animation-delay:11s; background:radial-gradient(circle at 30% 30%,var(--teal),#4d8079);}

/* soft floating gradient orbs for depth */
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; pointer-events: none; z-index: 0; }
.orb-teal { background: radial-gradient(circle, rgba(47,93,88,0.5), transparent 70%); }
.orb-ochre { background: radial-gradient(circle, rgba(192,112,60,0.4), transparent 70%); }
html.motion .orb { animation: orbfloat 18s ease-in-out infinite alternate; }
@keyframes orbfloat { from { transform: translate(0,0) scale(1); } to { transform: translate(30px,-24px) scale(1.12); } }
.band, .band-tight { overflow: clip; }
.band .wrap, .band-tight .wrap, section .wrap { position: relative; z-index: 1; }

/* 3D whisper-tilt on offer cards */
@media (hover: hover) {
  .cards { perspective: 1200px; }
  .card { transition: transform 0.4s var(--t-soft), box-shadow 0.4s; transform-style: preserve-3d; }
  .card:hover { transform: translateY(-6px) rotateX(2.2deg) rotateY(-2.2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .petal, .orb { animation: none !important; opacity: 0 !important; }
  .card:hover { transform: translateY(-6px) !important; }
}