/*
  Title:      Desert Zen website styles
  File:       site/assets/dzm_site.css
  Version:    1.3.3
  Date:       2026-10-02
  Sections:   tokens, base, buttons, header, hero and two choices, treatment
              line, booking (page side and booking box), services, welcome,
              couples, quiz, guide, breathe, gifts, reviews, visit, footer,
              phone bar, motion
  Depends on: Google Fonts (Cormorant Garamond, Figtree), loaded in index.html;
              photos in assets/photos/
  Used by:    site/index.html, site/privacy.html; the booking box markup comes from
              dzm_booking_preview.js (.widget, .step, .seg, .chips, .days,
              .times, .addons, .summary ...)
  Purpose:    The "Ivory & Gold" look: ivory and white pages, near-black text,
              espresso-black contrast sections, and soft gold foil used
              sparingly (fine rules, the monogram, primary buttons), like the
              spa's white-and-gold gift certificates. Body text 18px+, dark on
              light, WCAG AA contrast.
  Revisions:  1.3.3 2026-10-02 Claude Code: the hero photo now sits in a <picture> (WebP with JPEG fallback, SEO audit A6):
              the picture box is see-through to the layout so the photo looks exactly as before; the footer's new
              Privacy link looks like the other footer text.
              1.3.2 2026-10-02 Claude Code: h1 .label (the place line inside the H1, for search engines, looks as before).
              1.3.0 2026-10-02 Claude Code: Mae pointing beside the hero photo (computers only) and her welcome
              note with the gold script signature.
              1.2.0 2026-10-01 Claude Code: text fields in the booking box (name, phone,
              email) styled to match; links in booking messages in gold.
              1.1.0 2026-10-01 Claude Code: full restyle to "Ivory & Gold". The
              owner found the 1.0 purple-and-orange "Desert Dusk" look too
              trendy and cartoonish for the spa's clients (sophisticated,
              mostly retirement-age women) and asked for a classy, clean-lined
              luxury-hotel-spa feel. Purple palette and drawn art styles
              removed; photo frames, typographic treatment menu, gold-foil
              gift certificate, "two choices" call/book panel, calmer motion
              (gentle fades only).
              1.0.0 2026-10-01 Claude Code: first full design, built from the
              Cowork mock-up 0.1.0 (Desert Dusk concept), modernised.
*/

/* ---------- tokens ---------- */
:root{
  color-scheme: light;
  --ivory:#FBF8F2; --ivory-2:#F4EEE4; --white:#FFFFFF;
  --ink:#1A1714; --ink-2:#3A342D; --muted:#5A5248; --line:#E4DACA; --line-2:#D6C7A8;
  --espresso:#1D1814; --black:#12100E; --on-dark:#F4EEE4; --on-dark-2:#CFC6B8;
  --gold-ink:#7A5A22;            /* gold text on light backgrounds (AA) */
  --gold:#B08D57; --gold-lt:#E9CF8F;
  --foil:linear-gradient(115deg,#8C6A2F 0%,#E9CF8F 42%,#A57C35 70%,#D9B872 100%);
  --foil-btn:linear-gradient(115deg,#BE9A55 0%,#EBD49C 45%,#C9A35E 75%,#E2C687 100%);
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  --r:2px;
  --shadow:0 30px 60px -40px rgba(29,24,20,.35);
  --ease:cubic-bezier(.25,.6,.25,1);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{margin:0; background:var(--ivory); color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; font-variant-numeric:lining-nums}
h1,h2,h3{font-family:var(--display); font-weight:500; line-height:1.08; margin:0; text-wrap:balance; font-variant-numeric:lining-nums; letter-spacing:0}
h2{font-size:clamp(2.3rem,4.4vw,3.5rem)}
h3{font-size:1.6rem}
h1 em,h2 em{font-style:italic; font-weight:400; color:var(--gold-ink)}
p{margin:0}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
figure{margin:0}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--gold-ink); outline-offset:3px}
.dark :focus-visible{outline-color:var(--gold-lt)}
.wrap{width:min(1180px,100% - 40px); margin-inline:auto}
section{padding-block:clamp(72px,10vw,128px); position:relative}
.label{font-family:var(--body); font-size:.8rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--gold-ink); margin:0}
.dark .label{color:var(--gold-lt)}
h1 .label{display:block; margin-bottom:.9rem; line-height:1.4} /* 1.3.2: the place words sit inside the H1 (SEO) and look as before */
.head{display:grid; gap:18px; max-width:760px; margin-bottom:56px}
.head p:not(.label){color:var(--muted); font-size:1.1rem}
.center{text-align:center; margin-inline:auto; justify-items:center}
.divider{display:block; width:200px; height:12px}
.divider svg{width:100%; height:100%; display:block}
.muted{color:var(--muted)}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:8px 14px; z-index:100}
.skip:focus{left:8px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; border:1px solid transparent; border-radius:var(--r); padding:1em 1.9em; font-family:var(--body); font-weight:600; font-size:.88rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; line-height:1.2; transition:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); white-space:nowrap; background:var(--ink); color:var(--ivory)}
.btn.gold{background:var(--foil-btn); color:var(--ink); border-color:#B8924A; box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.btn.gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 26px -14px rgba(122,90,34,.7)}
.btn.line{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.line:hover{background:var(--ink); color:var(--ivory)}
.btn.line.light{color:var(--on-dark); border-color:var(--gold-lt)}
.btn.line.light:hover{background:var(--gold-lt); color:var(--black)}
.btn.small{padding:.8em 1.3em; font-size:.8rem}
.btn svg{width:18px; height:18px; flex:none}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* ---------- header ---------- */
.site-head{position:fixed; inset:0 0 auto 0; z-index:50; background:color-mix(in srgb,var(--ivory) 94%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .6s, box-shadow .6s}
.site-head.solid{border-bottom-color:var(--line); box-shadow:0 10px 30px -28px rgba(29,24,20,.5)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; height:88px}
.logo{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink)}
.mono{display:block; width:50px; height:50px; flex:none}
.mono svg{width:100%; height:100%; display:block}
.logo-word b{display:block; font-family:var(--display); font-size:1.65rem; font-weight:500; line-height:1; letter-spacing:.02em}
.logo-word small{display:block; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-top:5px; font-weight:500}
.nav{display:flex; gap:30px; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500}
.nav a{text-decoration:none; color:var(--ink-2); position:relative; padding-block:6px}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold); transform:scaleX(0); transition:transform .6s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.head-actions{display:flex; align-items:center; gap:22px}
.head-phone{display:grid; text-decoration:none; font-family:var(--display); font-size:1.5rem; line-height:1.05; font-weight:500; color:var(--ink); text-align:right; font-variant-numeric:lining-nums}
.head-phone span{font-family:var(--body); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-ink); font-weight:600}
@media (max-width:1100px){ .nav{display:none} }
@media (max-width:700px){
  .site-head .wrap{height:72px}
  .mono{width:42px; height:42px}
  .logo-word b{font-size:1.4rem}
  .logo-word small{font-size:.58rem; letter-spacing:.24em}
  .head-actions .btn{display:none}
  .head-phone{font-size:1.2rem}
}
@media (max-width:370px){ .head-phone span{display:none} }

/* ---------- hero ---------- */
.hero{padding:calc(88px + clamp(20px,3.5vw,44px)) 0 clamp(64px,8vw,104px); background:var(--ivory)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,72px); align-items:center}
.hero-text{display:grid; gap:22px}
.hero h1{font-size:clamp(2.7rem,5vw,4.4rem); font-weight:400; line-height:1.04; max-width:17ch}
.hero .lead{font-size:clamp(1.12rem,1.5vw,1.28rem); color:var(--ink-2); max-width:42ch}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 28px; font-size:.98rem; color:var(--ink-2); padding-top:22px; border-top:1px solid var(--line)}
.open{display:inline-flex; align-items:center; gap:10px; font-weight:500}
.open .dot{width:8px; height:8px; border-radius:50%; background:#4E7A52; box-shadow:0 0 0 4px rgba(78,122,82,.15)}
.open.closed .dot{background:var(--gold); box-shadow:0 0 0 4px rgba(176,141,87,.2)}
.stars{color:var(--gold); letter-spacing:2px}
.hero-photo{position:relative; aspect-ratio:6/5; overflow:hidden; box-shadow:var(--shadow)}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:42% 50%}
.hero-photo::after,.frame::after{content:""; position:absolute; inset:14px; border:1px solid rgba(233,207,143,.85); pointer-events:none}
@media (max-width:860px){
  .hero{padding-top:calc(72px + 20px)}
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:28px}
  .hero-photo{order:-1; aspect-ratio:16/10}
  .hero-text{gap:18px}
}

/* two choices */
.choices{margin-top:clamp(32px,4vw,52px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow); position:relative}
.choices::before{content:""; position:absolute; left:0; right:0; top:-1px; height:3px; background:var(--foil)}
.choice{padding:clamp(26px,3.4vw,40px) clamp(24px,4vw,48px); display:grid; gap:12px; align-content:start; justify-items:start}
.choice + .choice{border-left:1px solid var(--line)}
.choice-title{font-size:clamp(1.7rem,2.6vw,2.2rem); font-weight:500}
.choice p:not(.label){color:var(--ink-2); max-width:44ch}
.choice-phone{font-family:var(--display); font-size:clamp(2.4rem,4.2vw,3.4rem); line-height:1; text-decoration:none; color:var(--ink); font-variant-numeric:lining-nums; letter-spacing:.01em}
.choice-phone:hover{color:var(--gold-ink)}
.choice .btn{margin-top:8px}
.quiet-link{font-size:.98rem; color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:5px}
@media (max-width:760px){
  .choices{grid-template-columns:minmax(0,1fr)}
  .choice + .choice{border-left:0; border-top:1px solid var(--line)}
  .choice .btn{width:100%}
}

/* ---------- treatment line ---------- */
.treat-line{background:var(--espresso); color:var(--on-dark); border-block:1px solid #3A3128}
.treat-line p{padding-block:20px; text-align:center; font-family:var(--display); font-style:italic; font-size:clamp(1.2rem,1.9vw,1.5rem); line-height:1.5}
.treat-line i{color:var(--gold-lt); font-style:normal; padding-inline:.5em}

/* ---------- booking (page side) ---------- */
.booking{background:var(--ivory-2)}
.booking-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); align-items:start}
@media (max-width:980px){ .booking-grid{grid-template-columns:minmax(0,1fr)} }
.book-side{display:grid; gap:22px; position:sticky; top:118px}
@media (max-width:980px){ .book-side{position:static} }
.book-side > p:not(.label):not(.note){color:var(--ink-2)}
.call-first{background:var(--white); border:1px solid var(--line); border-top:3px solid var(--gold); padding:24px 26px; display:grid; gap:16px}
.call-first b{font-weight:600; color:var(--ink)}
.call-first p{color:var(--ink-2)}
.call-big{display:grid; text-decoration:none; font-family:var(--display); font-size:clamp(2.1rem,3.4vw,2.7rem); line-height:1.05; color:var(--ink); font-variant-numeric:lining-nums}
.call-big span{font-family:var(--body); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink); font-weight:600; margin-bottom:4px}
.call-big:hover{color:var(--gold-ink)}
.perks{display:grid; gap:10px; margin:0; padding:0; list-style:none}
.perks li{position:relative; padding-left:26px; color:var(--ink-2)}
.perks li::before{content:""; position:absolute; left:2px; top:.68em; width:7px; height:7px; transform:rotate(45deg); border:1px solid var(--gold-ink)}
.book-side .note{font-size:.95rem; color:var(--muted); border-left:1px solid var(--gold); padding:2px 0 2px 16px}

/* ---------- booking box (markup from dzm_booking_preview.js) ---------- */
.widget{background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow); padding:clamp(20px,3vw,36px); display:grid; gap:28px; min-width:0; position:relative}
.widget::before{content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; background:var(--foil)}
.w-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.w-head h3{font-size:2rem; font-weight:500}
.badge{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); border:1px solid var(--gold); padding:5px 10px; font-weight:600}
.step{display:grid; gap:12px; min-width:0}
.lbl{font-weight:600; font-size:1rem; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.lbl i{font-variant-numeric:lining-nums; font-style:normal; width:28px; height:28px; border-radius:50%; border:1px solid var(--gold); color:var(--gold-ink); display:grid; place-items:center; font-family:var(--display); font-size:1.05rem; font-weight:600}
.seg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.seg button,.chips button{border:1px solid var(--line-2); background:var(--white); border-radius:var(--r); padding:12px 10px; font-size:.98rem; line-height:1.25; color:var(--ink); transition:border-color .3s, background-color .3s}
.seg button:hover,.chips button:hover{border-color:var(--ink)}
.seg button[aria-pressed="true"],.chips button[aria-pressed="true"]{border-color:var(--ink); background:var(--ink); color:var(--ivory)}
.seg small{display:block; color:var(--muted); font-weight:400; font-size:.8rem; margin-top:2px}
.seg button[aria-pressed="true"] small{color:var(--on-dark-2)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips button{padding:10px 14px}
.guests{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.guests label{font-size:.88rem; color:var(--muted); display:grid; gap:4px}
.guests input,.guests select{width:100%; box-sizing:border-box; font:inherit; font-size:.98rem; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--white); color:var(--ink)}
@media (max-width:440px){ .guests{grid-template-columns:minmax(0,1fr)} }
.guests input:focus,.guests select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,138,62,.2)}
a.badge{text-decoration:none}
.empty a,.confirm a{color:var(--gold-ink); font-weight:600}
.popnote{background:var(--ivory); border:1px solid var(--line); padding:14px 16px; font-size:.95rem; display:grid; gap:8px; color:var(--ink-2)}
.popnote label{display:flex; gap:10px; align-items:center; font-weight:600; color:var(--ink)}
.popnote input,.split input{width:20px; height:20px; accent-color:var(--ink)}
.days{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; scrollbar-width:thin}
.days button{flex:none; width:74px; scroll-snap-align:start; border:1px solid var(--line-2); background:var(--white); border-radius:var(--r); padding:10px 0; display:grid; font-size:.8rem; color:var(--muted); transition:border-color .3s, background-color .3s}
.days button b{font-size:1.6rem; color:var(--ink); font-family:var(--display); font-weight:500; line-height:1.1; font-variant-numeric:lining-nums}
.days button:hover{border-color:var(--ink)}
.days button[aria-pressed="true"]{border-color:var(--ink); background:var(--ink); color:var(--on-dark-2)}
.days button[aria-pressed="true"] b{color:var(--gold-lt)}
.times{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px}
.times button{border:1px solid var(--line-2); background:var(--white); border-radius:var(--r); padding:11px 8px; display:grid; gap:2px; text-align:center; transition:border-color .3s, background-color .3s}
.times button:hover{border-color:var(--ink)}
.times button b{font-size:1.05rem; font-weight:600; font-variant-numeric:tabular-nums}
.times button small{font-size:.78rem; color:var(--muted); line-height:1.2}
.times button[aria-pressed="true"]{border-color:var(--ink); background:var(--ink); color:var(--ivory)}
.times button[aria-pressed="true"] small{color:var(--on-dark-2)}
.empty{grid-column:1/-1; color:var(--ink-2); font-size:.96rem; background:var(--ivory); border:1px solid var(--line); padding:16px}
.matchline{font-size:.96rem; color:var(--muted)}
.matchline b{color:var(--ink)}
.addons{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:thin}
.addon{flex:none; width:168px; scroll-snap-align:start; border:1px solid var(--line-2); background:var(--white); border-radius:var(--r); padding:14px; text-align:left; display:grid; gap:4px; transition:border-color .3s, background-color .3s}
.addon:hover{border-color:var(--ink)}
.addon[aria-pressed="true"]{border-color:var(--gold); background:#FBF5E8; box-shadow:inset 0 0 0 1px var(--gold)}
.addon b{font-size:1rem; font-weight:600}
.addon small{color:var(--muted); font-size:.84rem; line-height:1.35}
.addon span{font-weight:600; color:var(--gold-ink)}
.summary{border-top:1px solid var(--line); padding-top:22px; display:grid; gap:12px}
.sumrow{display:flex; justify-content:space-between; gap:12px; font-variant-numeric:tabular-nums}
.sumrow.total{font-family:var(--display); font-weight:600; font-size:1.5rem; padding-top:10px; border-top:1px solid var(--line)}
.paybtns{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.paybtns button{border:1px solid var(--ink); border-radius:var(--r); padding:13px 6px; font-weight:600; font-size:.95rem; background:var(--ink); color:var(--ivory)}
.paybtns button.alt{background:var(--white); color:var(--ink)}
.split{display:flex; gap:10px; align-items:center; font-size:.95rem; color:var(--muted)}
.confirm{background:var(--ivory); border:1px solid var(--line); border-top:3px solid var(--gold); padding:22px; display:grid; gap:10px}
.confirm b{font-family:var(--display); font-size:1.7rem; font-weight:500}

/* ---------- services ---------- */
.services{background:var(--ivory)}
.gallery{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:56px}
.gallery figure{display:grid; gap:12px}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.9)}
.gallery figcaption{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); font-weight:600; text-align:center}
@media (max-width:860px){ .gallery{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px} }
@media (max-width:700px){ .tabs{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none} .tabs button{flex:none} }
.tabs{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 4px; margin-bottom:40px; border-bottom:1px solid var(--line)}
.tabs button{border:0; border-bottom:2px solid transparent; background:transparent; padding:.7em 1em; margin-bottom:-1px; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--muted); transition:color .3s, border-color .3s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-pressed="true"]{color:var(--ink); border-bottom-color:var(--gold)}
.menu{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(32px,5vw,72px)}
@media (max-width:860px){ .menu{grid-template-columns:minmax(0,1fr)} }
.item{padding-block:30px; border-top:1px solid var(--line)}
.item-body{display:grid; gap:8px; align-content:start; min-width:0}
.item h3{font-size:1.75rem; font-weight:500}
.item .tag{display:flex; align-items:center; gap:10px; margin-bottom:2px; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); font-weight:600}
.item .tag::before{content:""; width:28px; height:1px; background:var(--gold)}
.item p{color:var(--ink-2)}
.prices{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.prices button{border:1px solid var(--line-2); background:var(--white); border-radius:var(--r); padding:9px 14px; font-size:.98rem; color:var(--ink); font-variant-numeric:tabular-nums; transition:border-color .3s, background-color .3s, color .3s}
.prices button b{font-weight:600}
.prices button:hover{border-color:var(--ink); background:var(--ink); color:var(--ivory)}
.soon{font-size:.98rem; color:var(--muted); font-style:italic}
.fine{font-size:.92rem; color:var(--muted); margin-top:30px; text-align:center}

/* ---------- photo frames ---------- */
.frame{position:relative; box-shadow:var(--shadow)}
.frame img{width:100%; height:100%; object-fit:cover}
.frame figcaption{position:absolute; left:28px; bottom:26px; background:rgba(251,248,242,.94); color:var(--ink); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; padding:7px 12px}

/* ---------- welcome ---------- */
.welcome{background:var(--white)}
.intro{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,7vw,110px); align-items:center}
.intro .frame{aspect-ratio:2/3; max-width:420px; width:100%; justify-self:center}
.intro h2{margin:16px 0 24px}
.intro .big{font-family:var(--display); font-size:clamp(1.7rem,2.8vw,2.3rem); line-height:1.3; font-weight:400; color:var(--ink-2)}
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:40px; border-top:1px solid var(--line); padding-top:28px}
.stat b{display:block; font-family:var(--display); font-weight:500; font-size:clamp(2.4rem,4vw,3.2rem); line-height:1; color:var(--ink); font-variant-numeric:lining-nums}
.stat span{font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:500}
@media (max-width:860px){ .intro{grid-template-columns:minmax(0,1fr)} .intro .frame{max-width:340px} }

/* ---------- dark sections ---------- */
.dark{background:var(--espresso); color:var(--on-dark)}
.dark h2 em{color:var(--gold-lt)}
.dark p{color:var(--on-dark-2)}

/* ---------- couples ---------- */
.couples-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,90px); align-items:center}
.couples h2{margin:16px 0 22px}
.steps{list-style:none; margin:30px 0 0; padding:0; display:grid; gap:18px; counter-reset:s}
.steps li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:18px; align-items:start; counter-increment:s; color:var(--on-dark-2)}
.steps li::before{content:counter(s); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--gold); color:var(--gold-lt); font-family:var(--display); font-size:1.4rem; font-variant-numeric:lining-nums}
.steps b{display:block; color:var(--on-dark); font-weight:600}
.frame.on-dark{aspect-ratio:4/3; box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
@media (max-width:860px){ .couples-grid{grid-template-columns:minmax(0,1fr)} .frame.on-dark{order:-1} }

/* ---------- quiz ---------- */
.quiz-sec{background:var(--ivory)}
.quiz{background:var(--white); border:1px solid var(--line); padding:clamp(24px,4vw,52px); display:grid; gap:22px; max-width:880px; margin-inline:auto; position:relative}
.quiz::before{content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; background:var(--foil)}
.qprog{display:flex; gap:6px}
.qprog i{height:2px; flex:1; background:var(--line); transition:background-color .6s}
.qprog i.on{background:var(--gold)}
.quiz .eyebrow{font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--gold-ink)}
.quiz h3{font-size:clamp(1.9rem,3vw,2.5rem); font-weight:500}
.qopts{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.qopts button{border:1px solid var(--line-2); background:var(--ivory); border-radius:var(--r); padding:18px 20px; text-align:left; font-size:1.05rem; color:var(--ink); transition:border-color .3s, background-color .3s}
.qopts button:hover{border-color:var(--ink); background:var(--white)}
.result{display:grid; gap:14px}
.result p{color:var(--ink-2)}

/* ---------- guide ---------- */
.guide-sec{background:var(--ivory-2)}
.flips{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:900px){ .flips{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .flips{grid-template-columns:minmax(0,1fr)} }
.flip{perspective:1400px; border:0; background:none; padding:0; min-height:230px; text-align:left}
.flip .in{position:relative; display:block; width:100%; height:100%; min-height:230px; transition:transform 1s var(--ease); transform-style:preserve-3d}
.flip[aria-pressed="true"] .in{transform:rotateY(180deg)}
.face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; padding:26px; display:grid; align-content:space-between; gap:12px}
.front{background:var(--white); border:1px solid var(--line); color:var(--ink)}
.flip:hover .front{border-color:var(--line-2)}
.back{background:var(--espresso); color:var(--on-dark); transform:rotateY(180deg); line-height:1.6}
.ftag{font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; display:flex; align-items:center; gap:10px}
.ftag::after{content:""; height:1px; width:36px; background:var(--gold)}
.ftag.do{color:var(--gold-ink)}
.ftag.dont{color:var(--ink-2)}
.back .ftag.do,.back .ftag.dont{color:var(--gold-lt)}
.face h3{font-size:1.75rem; font-weight:500}
.face small{color:var(--muted); font-size:.85rem; letter-spacing:.06em}
.back small{color:var(--on-dark-2)}

/* ---------- breathe ---------- */
.breathe-sec{background:var(--black)}
.breathe{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center}
.breathe h2{margin:16px 0 20px}
@media (max-width:780px){ .breathe{grid-template-columns:minmax(0,1fr)} }
.orb-wrap{display:grid; place-items:center; aspect-ratio:1; max-width:420px; width:100%; margin-inline:auto; position:relative}
.orb-wrap .ring{position:absolute; border-radius:50%; border:1px solid rgba(233,207,143,.28)}
.orb-wrap .ring:nth-child(1){inset:0}
.orb-wrap .ring:nth-child(2){inset:12%}
.orb-wrap .ring:nth-child(3){inset:24%}
.orb{width:40%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 36% 30%,#F6E7BE,#D9B872 45%,#8C6A2F 100%); transition:width 5s ease-in-out, box-shadow 5s ease-in-out; box-shadow:0 0 50px rgba(233,207,143,.22)}
.orb.big{width:92%; box-shadow:0 0 110px rgba(233,207,143,.32)}
.orb-label{position:absolute; font-family:var(--display); font-size:1.9rem; color:var(--black); pointer-events:none; font-weight:500}

/* ---------- gifts ---------- */
.gifts{background:var(--ivory)}
.gifts-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,90px); align-items:center}
.gifts h2{margin:16px 0 20px}
@media (max-width:860px){ .gifts-grid{grid-template-columns:minmax(0,1fr)} }
.giftcard{aspect-ratio:1.62; position:relative; max-width:540px; width:100%; margin-inline:auto; background:linear-gradient(160deg,#FFFFFF 0%,#FBF9F4 60%,#F3EEE3 100%); box-shadow:0 2px 0 rgba(255,255,255,.9) inset, 0 40px 70px -40px rgba(29,24,20,.45), 0 2px 6px rgba(29,24,20,.08); display:grid; place-content:center; justify-items:center; gap:6px; text-align:center; overflow:hidden; border-radius:6px}
.gc-border{position:absolute; inset:16px; border:1.5px solid transparent; border-image:var(--foil) 1; pointer-events:none}
.gc-border::after{content:""; position:absolute; inset:5px; border:1px solid transparent; border-image:var(--foil) 1; opacity:.7}
.gc-mono{width:clamp(64px,16%,88px); aspect-ratio:1; display:block; margin-bottom:6px}
.gc-mono svg{width:100%; height:100%; display:block}
.gc-name,.gc-title{background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent; font-family:var(--display)}
.gc-name{font-size:clamp(1.7rem,4.2vw,2.4rem); font-weight:500; letter-spacing:.06em; line-height:1}
.gc-sub{font-size:clamp(.56rem,1.4vw,.68rem); letter-spacing:.34em; text-transform:uppercase; color:var(--gold-ink); font-weight:500}
.gc-title{font-size:clamp(1rem,2.4vw,1.3rem); font-style:italic; margin-top:clamp(8px,2vw,16px); letter-spacing:.04em}
.giftcard::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%); transform:translateX(-100%); transition:transform 2.4s var(--ease); pointer-events:none}
.giftcard:hover::after{transform:translateX(100%)}
.gift-occasions{display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 30px}
.gift-occasions span{border:1px solid var(--line-2); padding:6px 14px; font-size:.92rem; background:var(--white); color:var(--ink-2)}

/* ---------- reviews ---------- */
.reviews-sec{overflow:hidden; isolation:isolate}
.reviews-bg{position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(18,16,14,.86),rgba(18,16,14,.78) 50%,rgba(18,16,14,.9)), url("photos/saguaro-sunset.jpg") center 60%/cover no-repeat}
.reviews{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr); gap:20px}
@media (max-width:900px){ .reviews{grid-template-columns:minmax(0,1fr)} }
.score{border:1px solid rgba(233,207,143,.5); padding:32px; display:grid; align-content:center; justify-items:center; gap:6px; text-align:center; background:rgba(18,16,14,.45)}
.score b{font-family:var(--display); font-size:5.2rem; line-height:.9; font-weight:400; color:var(--gold-lt); font-variant-numeric:lining-nums}
.score span{color:var(--on-dark-2)}
.score .stars{color:var(--gold-lt)}
blockquote{margin:0; background:rgba(251,248,242,.97); color:var(--ink); padding:34px; display:grid; gap:18px; align-content:space-between}
blockquote::before{content:"\201C"; font-family:var(--display); font-size:5.5rem; line-height:.6; height:30px; background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent}
.dark blockquote p{font-family:var(--display); font-size:1.65rem; line-height:1.3; font-weight:500; color:var(--ink)}
blockquote footer{font-size:.84rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500}

/* ---------- visit ---------- */
.visit{background:var(--ivory)}
.visit-grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,6vw,80px); align-items:center}
.visit h2{margin-top:16px}
@media (max-width:860px){ .visit-grid{grid-template-columns:minmax(0,1fr)} }
.visit .frame{aspect-ratio:4/3}
.facts{display:grid; margin:30px 0 0}
.facts div{display:grid; grid-template-columns:clamp(84px,24%,120px) minmax(0,1fr); gap:14px; border-top:1px solid var(--line); padding-block:16px}
.facts dt{color:var(--gold-ink); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; padding-top:5px}
.facts dd{margin:0}
.facts a{text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:5px}
.facts .facts-phone{font-family:var(--display); font-size:1.8rem; text-decoration:none; line-height:1.2}
.hours{display:grid; gap:2px; font-variant-numeric:tabular-nums}
.hours span{display:flex; justify-content:space-between; gap:16px; max-width:290px}
.hours span.today{font-weight:600; color:var(--ink)}
.hours span.today{position:relative}
.hours span.today::before{content:""; position:absolute; left:-17px; top:.62em; width:6px; height:6px; transform:rotate(45deg); background:var(--gold)}

/* ---------- footer ---------- */
.site-foot{background:var(--black); color:var(--on-dark-2); padding:clamp(60px,8vw,100px) 0 60px; font-size:1rem}
@media (max-width:980px){ .site-foot{padding-bottom:120px} }
.foot-top{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:24px; align-items:center}
.foot-mono{width:72px; height:72px; display:block}
.foot-mono svg{width:100%; height:100%; display:block}
.foot-word{font-family:var(--display); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--on-dark); font-weight:400; letter-spacing:.02em}
.foot-word small{display:block; font-family:var(--body); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-lt); margin-top:10px; font-weight:500}
@media (max-width:700px){ .foot-top{grid-template-columns:minmax(0,1fr); justify-items:start} }
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px; margin-top:52px; padding-top:34px; border-top:1px solid rgba(233,207,143,.25)}
.foot-grid h3{margin:0 0 12px; font-family:var(--body); color:var(--gold-lt); font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600}
.foot-grid a{text-decoration:none; display:block; padding-block:3px}
.foot-grid a:hover{color:var(--on-dark); text-decoration:underline; text-decoration-color:var(--gold)}
.foot-small{margin-top:44px; font-size:.86rem; color:#A9A094; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px}
.foot-small a{color:inherit; text-decoration:underline; text-decoration-color:rgba(233,207,143,.5); text-underline-offset:3px}
.foot-small a:hover{color:var(--on-dark)}

/* ---------- phone bar ---------- */
.mobilebar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(251,248,242,.97); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line-2); box-shadow:0 -12px 30px -24px rgba(29,24,20,.6)}
.mobilebar .btn{padding:.95em .8em; font-size:.8rem; letter-spacing:.1em}
.mobilebar .btn.gold{flex:1.7; font-size:.86rem}
.mobilebar .btn.line{flex:1}
@media (max-width:980px){ .mobilebar{display:flex} }

/* ---------- motion: gentle fades only ---------- */
.reveal{opacity:0; transition:opacity 1.4s var(--ease)}
.reveal.in{opacity:1}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .reveal{opacity:1}
}

/* ---------- Mae (1.3.0): pointing at the headline from the hero photo; her welcome note ---------- */
.hero-photo{overflow:visible}
.hero-photo picture{display:contents} /* 1.3.3: WebP wrapper adds no box of its own */
.hero-photo > img:not(.mae-point),.hero-photo > picture > img{position:relative; z-index:1}
.hero-photo::after{z-index:2}
.hero-photo img.mae-point{position:absolute; left:-170px; bottom:0; width:auto; height:92%; object-fit:contain; z-index:3;
  filter:drop-shadow(0 10px 18px rgba(29,25,19,.18)); pointer-events:none}
.mae-note{background:var(--ivory); padding:clamp(28px,4vw,48px) 0 0}
.mae-grid{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:clamp(20px,4vw,48px); align-items:end}
.mae-grid img{width:100%; height:auto; display:block}
.mae-quote{font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.2; margin:10px 0 14px; max-width:22ch}
.mae-sign{font-family:"Pinyon Script",cursive; font-size:clamp(2.4rem,4vw,3.2rem); line-height:1.2; margin:0 0 clamp(28px,5vw,60px);
  background:var(--foil, linear-gradient(90deg,#8C6A2F,#D9B871,#C9A257)); -webkit-background-clip:text; background-clip:text; color:transparent}
@media (max-width:900px){
  .hero-photo img.mae-point{display:none}
  .mae-grid{grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center}
  .mae-grid img{max-width:340px}
  .mae-quote{margin-left:auto; margin-right:auto}
}