/* ============================================================
   Drip Factor LA — Concierge Mobile IV Therapy
   Design system: "Warm apothecary luxe meets clinical precision"
   ============================================================ */

:root{
  --bg:#F4EFE6;        /* bone */
  --surface:#FBF8F2;   /* ivory */
  --ink:#1F1B16;       /* near-black warm */
  --muted:#7A7064;     /* warm grey */
  --line:#E2D9CB;      /* hairline */
  --accent:#A6803F;    /* gilded gold — fills, rules, buttons, large display */
  --accent-deep:#7E5E27; /* deeper gold for small text — meets WCAG AA on bone/ivory */
  --accent-soft:#E8DCC4;
  --on-accent:#FBF8F2;
  --ink-90:rgba(31,27,22,.90);
  --ink-60:rgba(31,27,22,.60);

  --maxw:1240px;
  --gutter:clamp(1.25rem, 5vw, 4.5rem);
  --radius:2px;
  --shadow:0 24px 60px -28px rgba(31,27,22,.30);
  --shadow-sm:0 14px 36px -24px rgba(31,27,22,.40);

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:var(--on-accent)}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(4.5rem,9vw,8.5rem); position:relative}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; margin:0; line-height:1.05; letter-spacing:-.01em}
.display{font-size:clamp(2.7rem,6.4vw,5.4rem); font-weight:300; line-height:1.02}
.h2{font-size:clamp(2rem,4.4vw,3.4rem); font-weight:300; line-height:1.07}
.h3{font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:400}
.lead{font-size:clamp(1.075rem,1.6vw,1.3rem); color:var(--ink-90); line-height:1.6; max-width:60ch}
p{margin:0 0 1.1em; max-width:64ch}
.muted{color:var(--muted)}
em,.italic{font-style:italic}
.serif-italic{font-family:var(--serif); font-style:italic; font-weight:400}

.eyebrow{
  display:inline-flex; align-items:center; gap:.85rem;
  font-family:var(--sans); font-weight:500; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent-deep);
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:""; width:0; height:1px; background:var(--accent); display:inline-block;
  transition:width 1s var(--ease) .15s;
}
.eyebrow.in::before,.reveal.in .eyebrow::before{width:2.6rem}
.eyebrow--center{justify-content:center}
.eyebrow--light{color:#E8DCC4}
.eyebrow--light::before{background:#E8DCC4}

.kicker{font-size:.95rem; color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{
  --bbg:var(--ink); --bfg:var(--surface); --bbd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.7rem; font-family:var(--sans); font-weight:500; font-size:.92rem;
  letter-spacing:.02em; background:var(--bbg); color:var(--bfg);
  border:1px solid var(--bbd); border-radius:var(--radius); cursor:pointer;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.btn--accent{--bbg:var(--accent); --bfg:var(--on-accent); --bbd:var(--accent)}
.btn--ghost{--bbg:transparent; --bfg:var(--ink); --bbd:var(--line)}
.btn--ghost:hover{--bbd:var(--ink)}
.btn--light{--bbg:transparent; --bfg:#FBF8F2; --bbd:rgba(251,248,242,.5)}
.btn--light:hover{--bbg:#FBF8F2; --bfg:var(--ink); --bbd:#FBF8F2}
.btn--solid-light{--bbg:#FBF8F2; --bfg:var(--ink); --bbd:#FBF8F2}
.btn-row{display:flex; flex-wrap:wrap; gap:.85rem; align-items:center}

.textlink{
  font-weight:500; color:var(--accent-deep); border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease); padding-bottom:1px;
}
.textlink:hover{border-color:var(--accent)}

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--gutter); gap:1.5rem;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(251,248,242,.85); backdrop-filter:blur(10px) saturate(1.1);
  border-bottom-color:var(--line); padding-block:.8rem;
}
.brand{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--serif); font-size:1.3rem; letter-spacing:.01em; color:#FBF8F2; transition:color .4s var(--ease)}
.brand-mark{height:1.65em; width:auto; flex:none; display:block}
.brand-mark path,.brand-mark rect{fill:var(--accent)}
.brand-type{white-space:nowrap}
.brand-type .bwm{font-weight:300}
.brand-type b{font-weight:500}
.brand-type .bla{font-weight:300; font-size:.8em; opacity:.85; margin-left:.04em}
.nav.scrolled .brand{color:var(--ink)}
.nav.scrolled .brand-mark path{fill:var(--accent-deep)} /* deeper gold for legible contrast on the light scrolled nav */
.nav-links{display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0}
.nav-links a{
  font-size:.86rem; font-weight:500; letter-spacing:.04em; color:rgba(251,248,242,.92);
  position:relative; transition:color .4s var(--ease);
}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:currentColor; transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav.scrolled .nav-links a{color:var(--ink-90)}
.nav-cta{display:flex; align-items:center; gap:1.1rem}
.nav-phone{font-size:.86rem; font-weight:500; color:rgba(251,248,242,.92); transition:color .4s var(--ease); white-space:nowrap}
.nav.scrolled .nav-phone{color:var(--ink)}
.nav .btn{padding:.66rem 1.25rem; font-size:.84rem}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:.4rem; flex-direction:column; gap:5px}
.nav-toggle span{width:24px; height:2px; background:#FBF8F2; transition:background .4s var(--ease), transform .3s var(--ease), opacity .3s var(--ease)}
.nav.scrolled .nav-toggle span{background:var(--ink)}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#FBF8F2; overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero-bg{
  position:absolute; inset:-2% ; background-size:cover; background-position:58% 40%;
  transform:scale(1.08); animation:heroZoom 9s var(--ease) forwards;
  will-change:transform;
}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,16,12,.34) 0%, rgba(20,16,12,0) 26%, rgba(20,16,12,.12) 55%, rgba(20,16,12,.74) 100%),
    linear-gradient(90deg, rgba(20,16,12,.42) 0%, rgba(20,16,12,0) 60%);
}
.hero-inner{position:relative; z-index:2; padding-bottom:clamp(4rem,8vh,7rem); max-width:54rem}
.hero h1{margin-bottom:1.4rem; text-shadow:0 2px 40px rgba(0,0,0,.25)}
.hero .lead{color:rgba(251,248,242,.92); max-width:48ch; margin-bottom:2rem}
.hero .btn-row{margin-top:.4rem}
.hero-word{display:inline-block; opacity:0; transform:translateY(22px); animation:heroWord .9s var(--ease) forwards}
.scroll-cue{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(251,248,242,.8);
}
.scroll-cue .line{width:1px; height:46px; background:linear-gradient(rgba(251,248,242,.7),transparent); animation:cueDrip 2.4s var(--ease) infinite}
@keyframes cueDrip{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}55%{transform:scaleY(1); transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
@keyframes heroWord{to{opacity:1; transform:translateY(0)}}

/* ---------- Trust strip ---------- */
.trust{background:var(--ink); color:#EDE6D9; overflow:hidden; border-block:1px solid rgba(255,255,255,.06)}
.trust-track{display:flex; gap:3.5rem; align-items:center; padding-block:1.15rem; white-space:nowrap; width:max-content; animation:marquee 38s linear infinite}
.trust:hover .trust-track{animation-play-state:paused}
.trust-item{display:inline-flex; align-items:center; gap:.85rem; font-size:.82rem; letter-spacing:.06em; color:rgba(237,230,217,.85)}
.trust-item .dot{width:5px; height:5px; border-radius:50%; background:var(--accent)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Split layout ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.split--reverse .split-media{order:2}
.split-media{position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow)}
.split-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform 1.6s var(--ease)}
.split-media.ar-43 img{aspect-ratio:4/3}
.split-media.ar-34 img{aspect-ratio:3/4}
.split-media:hover img{transform:scale(1.04)}
.split-media .badge{
  position:absolute; left:1.1rem; bottom:1.1rem; background:rgba(251,248,242,.92); color:var(--ink);
  font-size:.74rem; letter-spacing:.04em; padding:.55rem .9rem; border-radius:var(--radius); backdrop-filter:blur(4px);
}
.split-copy p{color:var(--ink-90)}

/* ---------- Section heads ---------- */
.sec-head{max-width:46rem; margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.sec-head.center{margin-inline:auto; text-align:center}

/* ---------- Pillars ---------- */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:clamp(2rem,4vw,3rem)}
.pillar{background:var(--surface); padding:2.2rem 1.7rem; transition:background .4s var(--ease)}
.pillar:hover{background:#fff}
.pillar .num{font-family:var(--serif); font-size:1rem; color:var(--accent-deep); margin-bottom:1.4rem; display:block}
.pillar h3{font-size:1.2rem; line-height:1.2; margin-bottom:.7rem}
.pillar p{font-size:.95rem; color:var(--muted); margin:0}

/* ---------- Drips ---------- */
.drips{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem)}
.drip{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:2.2rem 2rem 2.1rem; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  position:relative; overflow:hidden;
}
.drip::before{content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.drip:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--accent-soft)}
.drip:hover::before{transform:scaleX(1)}
.drip.featured{background:linear-gradient(180deg,#fff,var(--surface))}
.drip-tag{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:1.1rem; min-height:1em}
.drip h3{font-size:1.5rem; margin-bottom:.35rem}
.drip .price{font-family:var(--serif); font-weight:300; font-size:2.6rem; line-height:1; margin:.5rem 0 .2rem}
.drip .price .cur{font-size:1.1rem; vertical-align:super; color:var(--muted); margin-right:.1rem}
.drip .tagline{font-style:italic; font-family:var(--serif); color:var(--ink); font-size:1.05rem; margin:.4rem 0 1.1rem}
.drip .desc{font-size:.93rem; color:var(--muted); margin-bottom:1.4rem}
.drip .includes{list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:.6rem}
.drip .includes li{font-size:.9rem; color:var(--ink-90); padding-left:1.4rem; position:relative; max-width:none}
.drip .includes li::before{content:""; position:absolute; left:0; top:.55em; width:.5rem; height:.5rem; border:1px solid var(--accent); border-radius:50%}
.drip .best{font-size:.83rem; color:var(--muted); border-top:1px solid var(--line); padding-top:1rem; margin-bottom:1.4rem}
.drip .best b{color:var(--ink); font-weight:500}
.drip .btn{margin-top:auto; width:100%}

/* ---------- Customize / chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:.7rem}
.chip{
  border:1px solid var(--line); background:var(--surface); border-radius:100px;
  padding:.6rem 1.15rem; font-size:.88rem; color:var(--ink-90);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.chip:hover{border-color:var(--accent); color:var(--accent-deep); background:#fff}
.chip .plus{color:var(--accent-deep); margin-right:.4rem; font-weight:600}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.stat{background:var(--surface); padding:2rem 1.5rem; text-align:left}
.stat .big{font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,3.2vw,2.7rem); line-height:1; color:var(--accent); margin-bottom:.7rem}
.stat .lbl{font-size:.86rem; color:var(--muted); line-height:1.45}

/* ---------- Benefits ---------- */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem)}
.benefit{border-top:1px solid var(--line); padding-top:1.3rem}
.benefit .b-ico{width:30px; height:30px; margin-bottom:1rem; color:var(--accent)}
.benefit h3{font-size:1.18rem; margin-bottom:.5rem}
.benefit p{font-size:.93rem; color:var(--muted); margin:0}

/* ---------- Feature band (full-bleed image) ---------- */
.band{position:relative; color:#FBF8F2; overflow:hidden; isolation:isolate}
.band-bg{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; will-change:transform}
.band-scrim{position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(20,16,12,.78) 0%, rgba(20,16,12,.5) 45%, rgba(20,16,12,.22) 100%)}
.band .inner{padding-block:clamp(5rem,11vw,9rem); max-width:42rem}
.band h2{margin-bottom:1.3rem}
.band p{color:rgba(251,248,242,.9)}
.band--center .inner{margin-inline:auto; text-align:center; max-width:50rem}
.band--center .band-scrim{background:rgba(20,16,12,.6)}

/* ---------- Occasions mosaic ---------- */
.occasions-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:repeat(2,minmax(160px,26vh)); gap:.9rem; margin-bottom:clamp(2rem,4vw,3rem)}
.occasions-grid figure{margin:0; position:relative; overflow:hidden; border-radius:var(--radius)}
.occasions-grid img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease)}
.occasions-grid figure:hover img{transform:scale(1.05)}
.occasions-grid .o1{grid-row:span 2}
.chips--occasions .chip{background:transparent}

/* ---------- Steps (how it works) ---------- */
.steps-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.steps-media{position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow)}
.steps-media img{aspect-ratio:4/5; object-fit:cover; width:100%}
.steps{list-style:none; margin:0; padding:0; counter-reset:step}
.step{display:grid; grid-template-columns:auto 1fr; gap:1.5rem; padding:1.6rem 0; border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .s-num{font-family:var(--serif); font-weight:300; font-size:1.6rem; color:var(--accent); line-height:1}
.step h3{font-size:1.2rem; margin-bottom:.4rem}
.step p{font-size:.93rem; color:var(--muted); margin:0}

/* ---------- Testimonials ---------- */
.testi{position:relative; min-height:18rem; max-width:54rem; margin-inline:auto; text-align:center}
.testi-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1s var(--ease); display:flex; flex-direction:column; justify-content:center}
.testi-slide.active{opacity:1; visibility:visible; position:relative}
.testi blockquote{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.4; margin:0 0 1.6rem; color:var(--ink); max-width:none}
.testi .who{font-size:.9rem; font-weight:500; letter-spacing:.02em}
.testi .who span{color:var(--muted); font-weight:400; display:block; margin-top:.25rem; font-size:.82rem}
.testi-dots{display:flex; gap:.6rem; justify-content:center; margin-top:2.4rem}
.testi-dots button{width:8px; height:8px; border-radius:50%; border:0; background:var(--line); cursor:pointer; padding:0; transition:background .3s var(--ease), transform .3s var(--ease)}
.testi-dots button.active{background:var(--accent); transform:scale(1.25)}
.quote-mark{font-family:var(--serif); font-size:4rem; line-height:0; color:var(--accent-soft); margin-bottom:1.2rem; display:block; height:2rem}

/* ---------- FAQ ---------- */
.faq{max-width:50rem; margin-inline:auto}
.faq details{border-top:1px solid var(--line); padding:.4rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:1.3rem 2.5rem 1.3rem 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.05rem,1.8vw,1.3rem); font-weight:400; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:.3rem; top:1.7rem; width:13px; height:13px;
  background:linear-gradient(var(--accent),var(--accent)) center/100% 1px no-repeat, linear-gradient(var(--accent),var(--accent)) center/1px 100% no-repeat;
  transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .ans{overflow:hidden; max-height:0; transition:max-height .45s var(--ease)}
.faq .ans p{color:var(--muted); font-size:.97rem; padding-bottom:1.3rem; margin:0; max-width:62ch}

/* ---------- Final CTA ---------- */
.final{background:var(--ink); color:#FBF8F2; text-align:center; position:relative; overflow:hidden}
.final-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.42}
.final-tint{position:absolute; inset:0; z-index:1; background:radial-gradient(120% 120% at 50% 40%, rgba(23,19,15,.45), rgba(23,19,15,.82) 78%)}
.final .inner{padding-block:clamp(5rem,10vw,8rem); position:relative; z-index:3; max-width:46rem; margin-inline:auto}
.final h2{margin-bottom:1.3rem}
.final p{color:rgba(251,248,242,.82); margin-inline:auto; margin-bottom:2.2rem}
.final .contacts{display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:center; margin-top:2.2rem; font-size:.9rem; color:rgba(251,248,242,.75)}
.final .contacts a{color:#E8DCC4; border-bottom:1px solid transparent; transition:border-color .3s}
.final .contacts a:hover{border-color:#E8DCC4}
.final-glow{position:absolute; width:60vw; height:60vw; border-radius:50%; background:radial-gradient(circle, rgba(166,128,63,.30), transparent 65%); top:-20%; right:-10%; z-index:2; filter:blur(20px); pointer-events:none}

/* ---------- Footer ---------- */
.footer{background:#17130F; color:rgba(237,230,217,.7); padding-block:clamp(3rem,6vw,4.5rem)}
.footer-top{display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start; padding-bottom:2.4rem; border-bottom:1px solid rgba(255,255,255,.08)}
.footer .brand{color:#FBF8F2}
.footer-cols{display:flex; flex-wrap:wrap; gap:3.5rem}
.footer-col h4{font-family:var(--sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; font-weight:600}
.footer-col a, .footer-col p{display:block; font-size:.9rem; color:rgba(237,230,217,.78); margin:0 0 .55rem; max-width:24ch}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-top:1.8rem; font-size:.78rem; color:rgba(237,230,217,.5)}
.footer-bottom .disclaimer{max-width:62ch; line-height:1.6}

/* ---------- Reveal on scroll ---------- */
html.js .reveal{opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
html.js .reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .drips{grid-template-columns:1fr; max-width:30rem; margin-inline:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr; gap:2rem}
  .split--reverse .split-media{order:0}
  .split-media img,.steps-media img{aspect-ratio:16/10}
  .steps-wrap{grid-template-columns:1fr}
  .occasions-grid{grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,22vh)}
  .occasions-grid .o1{grid-row:span 1; grid-column:span 2}
}
@media (max-width:720px){
  body{font-size:1rem}
  .nav-links,.nav-phone{display:none}
  .nav-toggle{display:flex}
  .nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .nav-toggle span:nth-child(2){opacity:0}
  .nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{
    position:fixed; inset:0; z-index:55; background:var(--ink); color:#FBF8F2;
    display:flex; flex-direction:column; justify-content:center; gap:1.6rem; padding:var(--gutter);
    transform:translateY(-100%); transition:transform .5s var(--ease); pointer-events:none;
  }
  .mobile-menu.open{transform:none; pointer-events:auto}
  .mobile-menu a{font-family:var(--serif); font-size:1.8rem; color:#FBF8F2}
  .mobile-menu .btn{margin-top:1rem; align-self:flex-start}
  .mobile-menu .mm-contact{margin-top:1.5rem; font-size:.95rem; color:rgba(237,230,217,.7)}
  .benefits{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .occasions-grid{grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,18vh); gap:.6rem}
  .hero{min-height:92svh}
  .hero-bg{background-position:64% 38%}
  .final-video{opacity:.32}
  .footer-top{flex-direction:column}
}
@media (min-width:721px){.mobile-menu{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .hero-bg{transform:none}
  html.js .reveal{opacity:1; transform:none}
}

/* ---------- Brand mark accents ---------- */
.final-mark{height:52px; width:auto; margin:0 auto 1.4rem; display:block}
.final-mark path,.final-mark rect{fill:var(--accent-soft)}

/* ---------- Back to top (vital mark) ---------- */
.to-top{
  position:fixed; right:clamp(1rem,3vw,2.2rem); bottom:clamp(1rem,3vw,2.2rem); z-index:65;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:rgba(251,248,242,.9); backdrop-filter:blur(8px); cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--shadow-sm);
  opacity:0; transform:translateY(12px) scale(.92); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.to-top.show{opacity:1; transform:none; pointer-events:auto}
.to-top:hover{background:#fff; border-color:var(--accent-soft); transform:translateY(-3px)}
.to-top svg{height:22px; width:auto; display:block}
.to-top svg path,.to-top svg rect{fill:var(--accent-deep)} /* deeper gold: readable on the light to-top button */

/* ---------- Film grain (de-digital unifier) ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px; opacity:.06; mix-blend-mode:overlay;
}
@media (max-width:720px){ body::after{opacity:.05} }