/* ============================================================
   MADRE AGUA — Design System
   Palette: abyss teal · deep green · ivory · antique gold
   ============================================================ */

:root{
  /* --- colour --- */
  --ink:        #05171A;
  --abyss:      #072226;
  --deep:       #0A3033;
  --teal:       #0F4A4B;
  --teal-lit:   #15605C;
  --verd:       #2C6A5C;
  --sage:       #86AC9E;
  --mist:       #B9CFC7;

  --gold:       #C9A65C;
  --gold-lit:   #E3C88C;
  --gold-deep:  #8A6B26;
  --gold-glow:  rgba(201,166,92,.28);

  --ivory:      #F5F0E6;
  --bone:       #E6DECF;
  --sand:       #D3C7B2;
  --ash:        #A79C89;

  --line-gold:  rgba(201,166,92,.28);
  --line-soft:  rgba(245,240,230,.10);
  --line-soft-2:rgba(245,240,230,.05);

  /* --- type ---
     League Spartan for the entire site. --serif and --sans are both mapped
     to it deliberately: the old two-family split is gone, so every rule that
     references either variable now renders in the same face. */
  --serif: "League Spartan", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --sans:  "League Spartan", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* --- motion --- */
  --ease: cubic-bezier(.19,1,.22,1);
  --slow: 1.1s var(--ease);
  --med:  .7s var(--ease);
  --fast: .38s var(--ease);

  /* --- metrics --- */
  --gut: clamp(1.35rem, 5vw, 5.5rem);
  --maxw: 1320px;
  --hdr: 104px;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(14.5px,.4vw + 13.6px,15.5px);
  line-height:1.78;
  letter-spacing:0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--gold); color:var(--ink); }

/* ============================================================
   FILM GRAIN + VIGNETTE OVERLAYS (fixed, non-interactive)
   ============================================================ */
.grain{
  position:fixed; inset:0; overflow:hidden;
  z-index:9000; pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
.grain::before{
  content:""; position:absolute; inset:-120%;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:8990; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,.42) 100%);
}
@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0;
}
.d1{ font-size:clamp(2.7rem,7.6vw,6.6rem); letter-spacing:-.02em; }
.d2{ font-size:clamp(2rem,4.8vw,3.9rem); letter-spacing:-.015em; }
.d3{ font-size:clamp(1.55rem,3.1vw,2.5rem); letter-spacing:-.01em; }
.d4{ font-size:clamp(1.2rem,1.85vw,1.55rem); line-height:1.24; letter-spacing:-.005em; }

p{ margin:0 0 1.15em; max-width:64ch; }
p:last-child{ margin-bottom:0; }

/* Eyebrow — letterspaced micro caps with gold rules */
.eyebrow{
  display:flex; align-items:center; gap:.95rem;
  font-family:var(--sans);
  font-size:.7rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.6rem;
  line-height:1;
}
.eyebrow::before{
  content:""; width:clamp(28px,4vw,58px); height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
  flex:none;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{
  content:""; width:clamp(28px,4vw,58px); height:1px;
  background:linear-gradient(90deg,var(--gold),transparent); flex:none;
}

.lede{
  font-size:clamp(.98rem,1.05vw,1.14rem);
  line-height:1.7;
  color:var(--mist);
  font-weight:300;
}
.glyph{ color:var(--gold); font-style:italic; }
.glyph--ivory{ color:var(--ivory); }

/* Roman numeral divider */
.ornament{
  display:flex; align-items:center; justify-content:center;
  gap:1.1rem; margin:0 auto;
  color:var(--gold-lit);
}
.ornament::before,.ornament::after{
  content:""; height:1px; flex:1 1 auto; max-width:190px;
  background:linear-gradient(90deg,transparent,var(--line-gold));
}
.ornament::after{ background:linear-gradient(90deg,var(--line-gold),transparent); }
.ornament span{
  font-family:var(--serif); font-size:.92rem; letter-spacing:.16em;
  color:var(--mist);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.shell{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gut);
}
.section{ position:relative; padding-block:clamp(5rem,11vw,10.5rem); }
.section--tight{ padding-block:clamp(3.5rem,7vw,6.5rem); }

/* Hairline gold frame */
.rule-top{ border-top:1px solid var(--line-soft); }
.frame-gold{
  border:1px solid var(--line-gold);
  position:relative;
}
.frame-gold::before,.frame-gold::after{
  content:""; position:absolute; width:9px; height:9px;
  border:1px solid var(--gold); opacity:.75;
}
.frame-gold::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.frame-gold::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg:transparent; --bd:var(--gold); --fg:var(--gold);
  position:relative; display:inline-flex; align-items:center; gap:.85rem;
  padding:1.08em 2.5em;
  font-size:.7rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg); background:var(--bg);
  border:1px solid var(--bd);
  overflow:hidden; isolation:isolate;
  transition:color var(--med), border-color var(--med), transform var(--fast);
  white-space:nowrap;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--med);
}
.btn:hover{ color:var(--ink); transform:translateY(-2px); }
.btn:hover::before{ transform:scaleX(1); }
.btn__arw{
  font-family:var(--serif); font-size:1.1em; line-height:1;
  transition:transform var(--med);
}
.btn:hover .btn__arw{ transform:translateX(5px); }

.btn--solid{ --bg:var(--gold); --fg:var(--ink); }
.btn--solid::before{ background:var(--ivory); }
.btn--solid:hover{ color:var(--ink); }

.btn--ghost{ --bd:var(--line-soft); --fg:var(--ivory); }
.btn--ghost::before{ background:var(--ivory); }
.btn--ghost:hover{ border-color:var(--ivory); color:var(--ink); }

.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* Text link with gold underline sweep */
.tlink{
  display:inline-block; position:relative;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); padding-bottom:.35em;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform-origin:right; transition:transform var(--med);
}
.tlink:hover::after{ transform:scaleX(.32); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto; z-index:1200;
  height:var(--hdr);
  display:flex; align-items:center;
  transition:background var(--med), height var(--med), box-shadow var(--med);
}
.hdr::after{
  content:""; position:absolute; inset:auto 0 0; height:1px;
  background:var(--line-soft-2);
}
.hdr.is-stuck{
  background:rgba(5,23,26,.86);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  height:88px;
  box-shadow:0 12px 40px -22px rgba(0,0,0,.9);
}
.hdr__in{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}

/* Wordmark */
.mark{ display:flex; align-items:center; gap:.85rem; }
.mark__img{ width:56px; height:56px; object-fit:contain; flex:none; }
.mark__txt{ display:flex; flex-direction:column; line-height:1; }
.mark__t1{
  font-family:var(--serif); font-size:1.8rem;
  letter-spacing:.1em; color:var(--ivory); text-indent:.1em;
  white-space:nowrap;
}
.mark__t2{
  /* tracking solved so tagline ink width == MADRE AGUA ink width above it.
     League Spartan at .78rem: base ink 138px over 25 chars, name ink 215px
     -> (215-138)/25 = 3.08px/char = .247em. Re-solve if weight/size/text change. */
  font-size:.78rem; letter-spacing:.2474em; text-indent:.2474em;
  font-weight:500;
  color:var(--gold-lit);
  margin-top:.5em;
  display:inline-block;
  white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.5rem); }
.nav__a{
  position:relative;
  font-size:.86rem; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--mist); padding-block:.5rem;
  transition:color var(--fast);
}
.nav__a::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:0; height:1px; background:var(--gold);
  transform:translateX(-50%);
  transition:width var(--med);
}
.nav__a:hover,.nav__a[aria-current="page"]{ color:var(--ivory); }
.nav__a:hover::after,.nav__a[aria-current="page"]::after{ width:100%; }
.nav__cta{
  padding:.85em 1.7em;
  font-size:.8rem; letter-spacing:.12em;
}

.burger{ display:none; width:34px; height:34px; position:relative; }
.burger i{
  position:absolute; left:6px; width:22px; height:1px;
  background:var(--ivory);
  transition:transform var(--med), opacity var(--fast), top var(--med);
}
.burger i:nth-child(1){ top:13px; }
.burger i:nth-child(2){ top:20px; }
.burger i:nth-child(3){ top:27px; }
.burger.is-open i:nth-child(1){ top:20px; transform:rotate(45deg); }
.burger.is-open i:nth-child(2){ opacity:0; }
.burger.is-open i:nth-child(3){ top:20px; transform:rotate(-45deg); }

@media (max-width:940px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0 0 auto; top:0;
    height:100dvh; flex-direction:column;
    justify-content:center; gap:.35rem;
    background:linear-gradient(170deg,var(--ink),var(--deep));
    transform:translateY(-100%);
    transition:transform .8s var(--ease);
    padding-inline:var(--gut);
  }
  .nav.is-open{ transform:translateY(0); }
  .nav__a{
    font-size:clamp(1.6rem,7.5vw,2.5rem); font-family:var(--serif);
    letter-spacing:.1em; padding-block:.7rem;
  }
  .nav__a::after{ display:none; }
  .nav__cta{
    margin-top:1.6rem; font-family:var(--sans);
    font-size:.76rem; letter-spacing:.14em; padding:1em 2em;
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-top:calc(var(--hdr) + 2rem);
  padding-bottom:clamp(2.5rem,6vw,5rem);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-3; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  transform:scale(1.06);
  animation:drift 34s ease-in-out infinite alternate;
  /* lift the artwork out of the murk without washing out the type */
  filter:brightness(1.16) saturate(1.08) contrast(1.02);
}
@keyframes drift{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.13) translate3d(0,-1.4%,0); }
}
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  /* left/top stays heavy for headline contrast; right side opened up
     so the goddess artwork reads through */
  background:
    radial-gradient(ellipse 90% 70% at 78% 34%, rgba(5,23,26,.06), rgba(5,23,26,.62) 74%),
    linear-gradient(to top, var(--ink) 1%, rgba(5,23,26,.55) 30%, rgba(5,23,26,.14) 62%, rgba(5,23,26,.42) 100%),
    linear-gradient(100deg, rgba(5,23,26,.34) 0%, rgba(5,23,26,.24) 40%, rgba(5,23,26,.16) 72%);
}
/* Arch portal behind the type */
.hero__arch{
  position:absolute; z-index:-1; pointer-events:none;
  right:clamp(-6rem,-2vw,0rem); bottom:-4%;
  width:min(62vw,760px); aspect-ratio:3/4.05;
  border:1px solid var(--line-gold);
  border-radius:50% 50% 0 0 / 42% 42% 0 0;
  opacity:.55;
  animation:archRise 2.2s var(--ease) both .3s;
}
.hero__arch::after{
  content:""; position:absolute; inset:16px;
  border:1px solid rgba(201,166,92,.14);
  border-radius:50% 50% 0 0 / 42% 42% 0 0;
}
@keyframes archRise{ from{opacity:0; transform:translateY(9%)} to{opacity:.55; transform:none} }

.hero__in{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gut);
  display:grid; grid-template-columns:minmax(0,1fr);
}
.hero__copy{ max-width:44rem; }
.hero__title{ margin-bottom:1.7rem; }
.hero__title em{
  display:block; font-style:italic; color:var(--gold-lit);
  /* the gold italic line crosses the artwork's warm skirt; a soft shadow
     keeps it legible without darkening the image further */
  text-shadow:0 2px 26px rgba(5,23,26,.85), 0 1px 3px rgba(5,23,26,.6);
}
.hero__title .l2{
  display:block; padding-left:clamp(0rem,6vw,5.5rem);
}
.hero__meta{
  margin-top:clamp(2.4rem,5vw,4rem);
  display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem 2.6rem;
  padding-top:1.6rem; border-top:1px solid var(--line-soft);
}
.hero__metaItem{ display:flex; flex-direction:column; gap:.4rem; }
.hero__metaK{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ash);
}
.hero__metaV{
  font-family:var(--serif); font-size:1.12rem; color:var(--ivory); letter-spacing:.02em;
}

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.phead{
  position:relative; padding-top:calc(var(--hdr) + clamp(3.5rem,9vw,7rem));
  padding-bottom:clamp(3rem,7vw,5.5rem);
  text-align:center; overflow:hidden; isolation:isolate;
}
.phead__bg{ position:absolute; inset:0; z-index:-2; }
.phead__bg img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.phead__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 100% at 50% 0%, rgba(15,74,75,.55), var(--ink) 78%);
}
.phead h1{ margin-bottom:1.3rem; }
.phead p{ margin-inline:auto; color:var(--mist); text-align:center; }
.phead__inner{ position:relative; }

.crumbs{
  display:flex; justify-content:center; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ash);
  margin-bottom:1.9rem;
}
.crumbs a{ color:var(--gold); }
.crumbs span{ opacity:.45; }

/* ============================================================
   MARQUEE (ritual line)
   ============================================================ */
/* Scrolling ritual band.
   Width matches the .cards grid exactly: outer left of first card to
   outer right of last card (i.e. the shell content box, gutters included). */
.marquee{
  overflow:hidden;
  padding-block:1.5rem;
  margin-block:2.6rem;
  width:calc(100% - (2 * var(--gut)));
  max-width:calc(var(--maxw) - (2 * var(--gut)));
  margin-inline:auto;
  background:rgba(7,34,38,.42);
  border:1px solid rgba(201,166,92,.34);
}
.marquee__track{
  display:flex; width:max-content;
  animation:slide 42s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee__item{
  display:flex; align-items:center; gap:2.6rem;
  padding-inline:2.6rem;
  font-family:var(--serif); font-size:.92rem;
  letter-spacing:.14em; color:var(--mist); white-space:nowrap;
}
.marquee__item::after{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold); opacity:.65;
}

/* ============================================================
   FEATURE CARDS
   ============================================================ */
.cards{
  display:grid; gap:clamp(1.5rem,2.6vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));
}
.card{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(165deg,rgba(15,74,75,.30),rgba(7,34,38,.55));
  border:1px solid var(--line-soft);
  padding:clamp(2rem,3.2vw,2.9rem);
  overflow:hidden; isolation:isolate;
  transition:border-color var(--med), transform var(--med), box-shadow var(--med);
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 120% 80% at 50% 0%, var(--gold-glow), transparent 62%);
  opacity:0; transition:opacity var(--slow);
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--line-gold);
  box-shadow:0 34px 70px -40px rgba(0,0,0,.95);
}
.card:hover::before{ opacity:1; }
.card__num{
  font-family:var(--serif); font-size:.74rem; letter-spacing:.2em;
  color:var(--gold-deep); margin-bottom:1.5rem;
}
.card h3{ margin-bottom:.85rem; }
.card p{ color:var(--mist); font-size:.98rem; }

/* ============================================================
   SPLIT / FEATURE BLOCKS
   ============================================================ */
.split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
  align-items:center;
  gap:clamp(2.4rem,6vw,6rem);
}
.split--rev > :first-child{ order:2; }
@media (max-width:860px){ .split--rev > :first-child{ order:0; } }

.figure{ position:relative; }
.figure__frame{
  position:relative; overflow:hidden;
  border:1px solid var(--line-soft);
  aspect-ratio:4/5;
}
.figure__frame img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease), filter var(--slow);
  filter:saturate(.94) contrast(1.03);
}
.figure:hover .figure__frame img{ transform:scale(1.055); }
.figure__frame--wide{ aspect-ratio:16/11; }
.figure__frame--square{ aspect-ratio:1; }
.figure__cap{
  margin-top:1.1rem;
  font-family:var(--serif);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash); display:flex; align-items:center; gap:.7rem;
}
.figure__cap::before{ content:""; width:22px; height:1px; background:var(--gold-deep); }
.figure__tag{
  position:absolute; left:-14px; top:26px; z-index:2;
  background:var(--ink); border:1px solid var(--line-gold);
  padding:.85rem 1.15rem;
  writing-mode:vertical-rl;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}

/* Stat strip */
.stats{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.stats__cell{
  background:var(--ink); padding:clamp(1.9rem,3vw,2.8rem) 1.5rem; text-align:center;
}
.stats__v{
  font-family:var(--serif); font-size:clamp(1.6rem,2.8vw,2.3rem);
  color:var(--gold-lit); line-height:1; margin-bottom:.6rem;
}
.stats__k{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ash);
  line-height:1.6;
}

/* ============================================================
   CIRCLE / VESEL (seed-to-skin)
   ============================================================ */
.cycle{
  display:grid; gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  counter-reset:cyc;
}
.cycle__step{ text-align:center; padding:2.2rem 1.2rem; position:relative; }
.cycle__dot{
  width:66px; height:66px; margin:0 auto 1.4rem;
  border:1px solid var(--line-gold); border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:1.15rem; color:var(--gold);
  background:radial-gradient(circle,rgba(201,166,92,.10),transparent 70%);
  transition:background var(--med), transform var(--med);
}
.cycle__step:hover .cycle__dot{ background:rgba(201,166,92,.18); transform:scale(1.06); }
.cycle__step h4{ margin-bottom:.6rem; }
.cycle__step p{ font-size:.92rem; color:var(--mist); margin-inline:auto; }

/* ============================================================
   FILM
   ============================================================ */
.film{ position:relative; overflow:hidden; background:var(--abyss); }
.film video{
  width:100%; height:clamp(300px,52vw,620px);
  object-fit:cover; opacity:.62;
}
.film__scrim{ position:absolute; inset:0; background:linear-gradient(to top,var(--ink),transparent 55%); }
.film__play{
  position:absolute; inset:0; margin:auto;
  width:112px; height:112px; border-radius:50%;
  border:1px solid var(--line-gold);
  display:grid; place-items:center;
  background:rgba(5,23,26,.42); backdrop-filter:blur(6px);
  transition:transform var(--med), background var(--med), border-color var(--med);
}
.film__play:hover{ transform:scale(1.07); background:var(--gold); border-color:var(--gold); }
.film__play svg{ width:26px; fill:var(--gold-lit); margin-left:5px; transition:fill var(--med); }
.film__play:hover svg{ fill:var(--ink); }
.film__label{
  position:absolute; left:var(--gut); bottom:clamp(1.6rem,4vw,3rem);
  max-width:30rem;
}
.film__label h3{ margin-bottom:.7rem; }
.film__label p{ color:var(--mist); font-size:1.02rem; line-height:1.68; }

/* Modal */
.modal{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  background:rgba(2,10,12,.94);
  backdrop-filter:blur(14px);
  opacity:0; visibility:hidden;
  transition:opacity var(--med), visibility var(--med);
}
.modal.is-open{ opacity:1; visibility:visible; }
.modal__box{ width:min(1120px,100%); }
.modal video{ width:100%; aspect-ratio:16/9; background:#000; border:1px solid var(--line-gold); }
.modal__x{
  position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem);
  width:48px; height:48px; border:1px solid var(--line-soft); border-radius:50%;
  display:grid; place-items:center; font-size:1.2rem; color:var(--ivory);
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.modal__x:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.modal__cap{
  margin-top:1.4rem; text-align:center;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-lit);
  text-shadow:0 1px 12px rgba(5,23,26,.9);
}

/* ============================================================
   GALLERY
   ============================================================ */
/* Symmetric 3 x 2 grid — every cell identical, equal gutters. */
.gal{
  display:grid;
  gap:clamp(.7rem,1.2vw,1.1rem);
  grid-template-columns:repeat(3,1fr);
}
.gal__i{
  position:relative; overflow:hidden; margin:0;
  border:1px solid var(--line-soft);
  aspect-ratio:4/5; cursor:zoom-in;
}
.gal__i img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease), filter var(--slow);
  filter:saturate(.9);
}
.gal__i:hover img{ transform:scale(1.07); filter:saturate(1.05); }
.gal__i::after{
  content:""; position:absolute; inset:0;
  background:rgba(5,23,26,.5); opacity:0; transition:opacity var(--med);
}
.gal__i:hover::after{ opacity:1; }
@media (max-width:860px){
  .gal{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .gal{ grid-template-columns:1fr; }
}

/* Lightbox */
.light{
  position:fixed; inset:0; z-index:2100;
  display:grid; place-items:center; padding:clamp(1rem,4vw,3.5rem);
  background:rgba(2,10,12,.96); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity var(--med), visibility var(--med);
}
.light.is-open{ opacity:1; visibility:visible; }
.light img{ max-width:100%; max-height:88vh; object-fit:contain; border:1px solid var(--line-gold); }

/* Goddess band — decorative ornamental strip */
.godd{
  display:grid; gap:clamp(.6rem,1.1vw,1rem);
  grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gut);
  padding-block:clamp(1rem,2vw,2rem) clamp(4rem,8vw,7rem);
}
.godd__i{
  position:relative; overflow:hidden; aspect-ratio:1; margin:0;
  border:1px solid var(--line-soft);
}
.godd__i img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.86) contrast(1.05) brightness(.94);
  transition:filter 1.3s var(--ease), transform 1.6s var(--ease);
}
.godd__i:hover img{ filter:saturate(1.02) contrast(1.02) brightness(1); transform:scale(1.05); }
.godd__i::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(201,166,92,.10);
  pointer-events:none;
}
@media (max-width:760px){
  .godd{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   ANATOMY (product spec list)
   ============================================================ */
.anat{ display:grid; gap:0; border-top:1px solid var(--line-soft); }
.anat__row{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,3rem);
  padding:clamp(1.6rem,2.8vw,2.4rem) 0;
  border-bottom:1px solid var(--line-soft);
  align-items:start;
  transition:background var(--med);
}
.anat__row:hover{ background:rgba(201,166,92,.04); }
.anat__k{
  font-family:var(--serif); font-size:.72rem; letter-spacing:.14em;
  color:var(--gold); text-transform:uppercase; min-width:6.5rem; padding-top:.4rem;
}
.anat__v{ font-size:1rem; color:var(--mist); max-width:56ch; }
.anat__v strong{ color:var(--ivory); font-weight:400; }

/* Stock notice bar (homepage) */
.notice{
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(58,20,12,.30),rgba(12,44,36,.34));
}
.notice__in{
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap:1rem 1.6rem;
  padding-block:1.8rem;
}
.notice__tag{
  flex:none;
  padding:.45rem .9rem;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid;
}
.notice__tag--oos{
  color:#F3C9B0; border-color:rgba(201,138,110,.5);
}
.notice__txt{
  margin:0; max-width:58ch;
  font-family:var(--serif);
  font-size:1.02rem; color:var(--mist); line-height:1.62;
}
.notice__txt strong{ color:var(--gold-lit); font-weight:400; }
.notice__cta{ flex:none; padding:.8em 1.6em; font-size:.66rem; }
@media (max-width:640px){
  .notice__in{ padding-block:1.5rem; }
}

/* ============================================================
   BLOG — content column + sidebar, and single post
   ============================================================ */

/* Content left-aligned to the shell border, sidebar on the right.
   Mirrors the mountaindreamhelp.com blog arrangement. */
.withside{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(280px,30%,360px);
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
}
.withside__main{ min-width:0; }

/* On the post pages the body is a single narrow column, so centre it
   inside the main column rather than letting it stretch. */
.withside__main .postpage{ margin-inline:auto; }

@media (max-width:1000px){
  .withside{ grid-template-columns:1fr; }
}

/* --- sidebar widgets --- */
.side{ display:flex; flex-direction:column; gap:clamp(1.4rem,2.4vw,2rem); }
.side__panel{
  border:1px solid var(--line-soft);
  background:linear-gradient(170deg,rgba(15,74,75,.16),rgba(7,34,38,.42));
  padding:clamp(1.3rem,2vw,1.7rem);
}
.side__h{
  font-family:var(--serif);
  font-size:1.02rem; font-weight:400; letter-spacing:.04em;
  color:var(--gold-lit);
  padding-bottom:.7rem; margin-bottom:.9rem;
  border-bottom:1px solid var(--line-soft);
}
.side__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.75rem;
}
.side__list li{ margin:0; }
.side__list a{
  display:block;
  font-size:.95rem; line-height:1.55;
  color:var(--mist);
  transition:color var(--fast), padding-left var(--fast);
}
.side__list a:hover{ color:var(--gold); padding-left:5px; }
.side__count{
  float:right; margin-left:.6rem;
  font-size:.68rem; color:var(--gold-deep);
}

/* --- month calendar --- */
.cal{ font-size:.78rem; }
.cal__row{
  display:grid; grid-template-columns:repeat(7,1fr);
  text-align:center; line-height:1.9;
}
.cal__row--head{
  color:var(--gold); letter-spacing:.1em;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:.3rem;
}
.cal__row span{ color:var(--mist); }
.cal__pad{ opacity:.25; }
.cal__today{
  background:var(--gold); color:var(--ink);
  border-radius:50%; font-weight:500;
}

.postlist{
  display:grid; gap:clamp(1.4rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
}
.postcard{
  display:flex; flex-direction:column;
  padding:clamp(1.7rem,2.6vw,2.3rem);
  border:1px solid var(--line-soft);
  background:linear-gradient(170deg,rgba(15,74,75,.20),rgba(7,34,38,.48));
  transition:border-color var(--med), transform var(--med), box-shadow var(--med);
}
.postcard:hover{
  transform:translateY(-5px);
  border-color:var(--line-gold);
  box-shadow:0 30px 62px -42px rgba(0,0,0,.95);
}
.postcard__meta{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.9rem;
}
.postcard h2{ margin-bottom:.7rem; }
.postcard h2 a{ transition:color var(--fast); }
.postcard h2 a:hover{ color:var(--gold-lit); }
.postcard__dek{
  color:var(--mist); font-size:1rem; line-height:1.7;
  margin-bottom:1.4rem; flex:1;
}

.postpage{ max-width:70ch; margin-inline:auto; }
.postbody{ max-width:66ch; }
.postbody h2{ color:var(--gold-lit); margin-bottom:.8rem; }
.postbody p{
  color:var(--mist); font-size:1.06rem; line-height:1.82;
  margin-bottom:1.3em;
}
.postpage__foot{
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line-soft);
  text-align:center;
}

/* ============================================================
   LEGAL — terms & conditions
   ============================================================ */
.legal{ max-width:74ch; margin-inline:auto; }
.legal__block{
  padding-block:clamp(1.6rem,2.6vw,2.2rem);
  border-bottom:1px solid var(--line-soft);
}
.legal__block:first-child{ border-top:1px solid var(--line-soft); }
.legal__block h2{
  font-size:1.32rem; color:var(--gold-lit);
  margin-bottom:.9rem; letter-spacing:.01em;
}
.legal__block p{
  color:var(--mist); font-size:.96rem; line-height:1.78;
  max-width:70ch; margin-bottom:1em;
}
.legal__block p:last-child{ margin-bottom:0; }
.legal__block strong{ color:var(--ivory); font-weight:400; }
.legal__meta{
  font-size:.68rem !important; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ash) !important;
  padding-top:.6rem;
}

/* ============================================================
   SHOP — product cards, stock badges, buy blocks
   ============================================================ */
.grid2{
  display:grid; gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  align-items:start;
}
.prod{
  display:flex; flex-direction:column;
  border:1px solid var(--line-soft);
  background:linear-gradient(170deg,rgba(15,74,75,.20),rgba(7,34,38,.50));
  overflow:hidden;
  transition:border-color var(--med), box-shadow var(--med);
}
.prod:hover{
  border-color:var(--line-gold);
  box-shadow:0 34px 70px -46px rgba(0,0,0,.95);
}
.prod__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.prod__media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.92) brightness(.94);
  transition:transform 1.3s var(--ease), filter var(--slow);
}
.prod:hover .prod__media img{ transform:scale(1.05); filter:saturate(1) brightness(1); }
.prod__body{ padding:clamp(1.7rem,2.6vw,2.4rem); flex:1; display:flex; flex-direction:column; }
.prod__body > p{ color:var(--mist); font-size:.98rem; }

/* Stock badge */
.stock{
  position:absolute; top:.9rem; left:.9rem; z-index:2;
  padding:.5rem .95rem;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  backdrop-filter:blur(8px);
  border:1px solid;
}
.stock--oos{
  color:#F3C9B0; border-color:rgba(201,138,110,.55);
  background:rgba(58,20,12,.68);
}
.stock--in{
  color:#D7EBD9; border-color:rgba(134,172,158,.5);
  background:rgba(12,44,36,.68);
}

/* Price box (shown but non-purchasable when OOS) */
.pricebox{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.6rem;
  margin:1.5rem 0; padding:1.1rem 1.3rem;
  border:1px solid var(--line-gold);
  background:rgba(201,166,92,.05);
}
.pricebox--muted{ border-color:var(--line-soft); background:rgba(245,240,230,.02); }
.pricebox__opt{ display:flex; align-items:baseline; gap:.6rem; }
.pricebox__opt span{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash); }
.pricebox__opt strong{ font-family:var(--serif); font-size:1.18rem; color:var(--gold-lit); font-weight:400; }
.pricebox--muted .pricebox__opt strong{ color:var(--mist); }
.pricebox__ship{ font-size:.68rem; letter-spacing:.16em; color:var(--ash); margin-left:auto; }

/* Buy rows + PayPal */
.buy{ display:grid; gap:.85rem; margin-top:1.6rem; }
.buy__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem 1rem .85rem 1.2rem;
  border:1px solid var(--line-soft);
  transition:border-color var(--fast), background var(--fast);
}
.buy__row:hover{ border-color:var(--line-gold); background:rgba(201,166,92,.05); }
.buy__meta{ display:flex; align-items:baseline; gap:.75rem; }
.buy__qty{ font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mist); }
.buy__price{ font-family:var(--serif); font-size:1.3rem; color:var(--gold-lit); }
.pp{ margin:0; }
.pp__btn{ padding:.9em 1.7em; font-size:.68rem; }
form.pp{ display:inline-block; }

/* Payment-methods reassurance badge (static graphic, not a control) */
.pp__badgerow{
  display:flex; justify-content:center;
  margin-top:1.4rem;
}
.pp__badge{
  width:clamp(210px,42vw,300px); height:auto;
  border:1px solid var(--line-soft);
  background:#fff;
  border-radius:3px;
  opacity:.92;
  transition:opacity var(--med);
}
.pp__badge:hover{ opacity:1; }

/* Out-of-stock notice */
.oos{
  margin-top:1.4rem; padding:1.3rem 1.4rem;
  border:1px solid rgba(201,138,110,.28);
  background:rgba(58,20,12,.16);
}
.oos__line{
  font-family:var(--serif); font-size:1.16rem; color:#F0C3A6;
  letter-spacing:.02em; margin-bottom:.5rem;
}
.oos__sub{ font-size:1rem; color:var(--mist); margin-bottom:1.4rem; line-height:1.7; }
.waitlist{ margin-top:0; }
.waitlist .field input,.waitlist .field select{ background:rgba(5,23,26,.75); }

/* ============================================================
   FORMS
   ============================================================ */
.form{ display:grid; gap:1.15rem; }
.form__row{ display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.field{ position:relative; display:flex; flex-direction:column; gap:.55rem; }
.field label{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-weight:300;
  background:rgba(5,23,26,.6);
  border:1px solid var(--line-soft);
  color:var(--ivory);
  padding:.95em 1.05em;
  transition:border-color var(--fast), background var(--fast);
  border-radius:0;
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23C9A65C' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.05em center;
  padding-right:2.6em;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(5,23,26,.85);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(167,156,137,.55); }
.field__hint{ font-family:var(--serif); font-size:.82rem; color:var(--ash); letter-spacing:.02em; }

.form__note{
  font-family:var(--serif);
  font-size:.86rem; color:var(--ash); line-height:1.6;
  padding-top:.4rem;
}
.form__note a{ color:var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{
  position:relative; padding-top:clamp(4rem,8vw,7rem);
  border-top:1px solid var(--line-soft);
  background:linear-gradient(to bottom,var(--abyss),var(--ink));
  overflow:hidden;
}
.ftr__glow{
  position:absolute; left:50%; top:-40%; width:900px; height:900px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(15,74,75,.35),transparent 62%);
  pointer-events:none;
}
.ftr__grid{
  position:relative;
  display:grid; gap:clamp(2.4rem,4vw,4rem);
  grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(150px,1fr));
  padding-bottom:clamp(3rem,5vw,4.5rem);
}
.ftr__brand{ max-width:24rem; }
.ftr__brand p{ color:var(--mist); font-size:.98rem; margin-top:1.4rem; }
.ftr__h{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.4rem;
}
.ftr__list{ display:flex; flex-direction:column; gap:.85rem; }
.ftr__list a{
  font-family:var(--serif);
  font-size:.98rem; color:var(--mist);
  transition:color var(--fast), padding-left var(--fast);
}
.ftr__list a:hover{ color:var(--gold); padding-left:6px; }
.ftr__bar{
  position:relative;
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between;
  padding-block:1.7rem; border-top:1px solid var(--line-soft);
  font-size:.68rem; letter-spacing:.14em; color:var(--ash);
}
.ftr__bar a{ color:var(--mist); }
.ftr__bar a:hover{ color:var(--gold); }

/* Floating whatsapp/contact */
.fab{
  position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem);
  z-index:1100;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--gold); color:var(--ink);
  box-shadow:0 14px 40px -12px rgba(201,166,92,.6);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity var(--med), visibility var(--med), transform var(--med), background var(--fast);
}
.fab.is-on{ opacity:1; visibility:visible; transform:none; }
.fab:hover{ background:var(--gold-lit); transform:scale(1.07); }
.fab svg{ width:26px; height:26px; fill:currentColor; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-rv]{
  opacity:0; transform:translateY(30px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
  will-change:opacity, transform;
}
[data-rv="fade"]{ transform:none; }
[data-rv="scale"]{ transform:translateY(26px) scale(.975); }
[data-rv="left"]{ transform:translateX(-34px); }
[data-rv="right"]{ transform:translateX(34px); }
[data-rv].is-in{ opacity:1; transform:none; }
[data-rv-stagger] > *{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-rv-stagger].is-in > *{ opacity:1; transform:none; }
[data-rv-stagger].is-in > *:nth-child(1){ transition-delay:.05s }
[data-rv-stagger].is-in > *:nth-child(2){ transition-delay:.15s }
[data-rv-stagger].is-in > *:nth-child(3){ transition-delay:.25s }
[data-rv-stagger].is-in > *:nth-child(4){ transition-delay:.35s }
[data-rv-stagger].is-in > *:nth-child(5){ transition-delay:.45s }
[data-rv-stagger].is-in > *:nth-child(6){ transition-delay:.55s }

/* Word-by-word hero reveal */
.split-w{ display:block; }
.split-w .w{
  display:inline-block; overflow:hidden; vertical-align:top;
}
.split-w .w > i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%);
  animation:wRise 1.15s var(--ease) forwards;
}
@keyframes wRise{ to{ transform:none; } }

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .hdr,.fab,.grain,.vignette,.film__play{ display:none !important; }
  body{ background:#fff; color:#000; }
}