/*
  Title:      Zentelle website styles
  File:       site/assets/dzm_site.css
  Version:    1.5.0
  Date:       2026-10-12
  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: dzm_fonts.css and the fonts in assets/fonts/ (Cormorant Garamond, Figtree, Pinyon Script,
              SIL Open Font License 1.1), loaded and preloaded by each page's head; 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.5.0 2026-10-12 Claude Code: Website Deep Analysis T4/Z2 (owner's standing go 2026-10-12): the page moved when the
              Google web fonts arrived (layout shift 0.106 on the head spa page on phones, 0.22 on the Zentelle home page on
              computers). The fonts are now served from this site (assets/fonts and dzm_fonts.css, a year in the browser cache,
              preloaded by the page head) with font-display swap, and stand-in fonts ("... fallback") take the same room as the web fonts
              (size-adjust, ascent and descent overrides measured from the font files), so the text does not jump when they
              arrive. .mae-quote uses the display stack. The look is unchanged.
              1.4.0 2026-10-09 Claude Code: SEO and conversion night (owner approved): gold "Book online" button in the header on
              every screen size beside a tap-to-call button; phone first screen (full-width photo, one line over it, gold Book
              and Call, the detail below); hero buttons; the call-us box when online booking shows no time; the look of the
              new pages (page hero, text, cards, steps, questions, notes, breadcrumbs, map); phone bar Book first.
              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.
*/

/* ---------- fonts (1.5.0): the web fonts themselves are in dzm_fonts.css (loaded without blocking the first paint) ---------- */
/* Stand-in fonts sized to take the same room as the web fonts, so nothing moves when the web fonts arrive
   (size-adjust and ascent/descent from the font files: Cormorant at 500 against Times New Roman, Figtree at 400 against Arial) */
@font-face{font-family:"Cormorant Garamond fallback"; font-style:normal; src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Liberation Serif"),local("Tinos"),local("Noto Serif"); size-adjust:97.61%; ascent-override:94.67%; descent-override:29.40%; line-gap-override:0%}
@font-face{font-family:"Cormorant Garamond fallback"; font-style:italic; src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Liberation Serif Italic"),local("Tinos Italic"),local("Noto Serif Italic"); size-adjust:87.73%; ascent-override:105.32%; descent-override:32.71%; line-gap-override:0%}
@font-face{font-family:"Figtree fallback"; font-style:normal; src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo"),local("Roboto"); size-adjust:101.21%; ascent-override:93.86%; descent-override:24.70%; line-gap-override:0%}

/* ---------- 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","Cormorant Garamond fallback","Iowan Old Style",Georgia,serif;
  --body:"Figtree","Figtree fallback","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-call{display:none}
.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){
  .head-call{display:inline-flex}
  .site-head .wrap{height:72px; gap:10px}
  .mono{width:42px; height:42px}
  .logo-word b{font-size:1.4rem}
  .logo-word small{font-size:.58rem; letter-spacing:.24em}
  .head-phone{display:none}
  .head-actions{gap:8px}
  .site-head .head-actions .btn{padding:.78em 1em; font-size:.74rem; letter-spacing:.1em}
}
@media (max-width:480px){
  .logo{gap:10px}
  .logo-word small{display:none}
  .head-call span{display:none}
  .site-head .head-actions .head-call{padding:.78em .85em}
}

/* ---------- 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.5; 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:var(--display); 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}
}


/* ---------- 1.4.0: hero buttons, phone first screen ---------- */
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin:0}
.hero-cta .btn{min-height:52px}
.h1-line{display:block}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hero-photo .ph-phone{display:none}
@media (max-width:860px){
  .hero{padding:72px 0 clamp(40px,8vw,64px)}
  .hero-grid{gap:0; row-gap:0}
  .hero-text{display:contents}
  .hero-photo{grid-row:1; grid-column:1; order:0; aspect-ratio:auto; height:clamp(320px,56svh,520px); width:100vw; margin-inline:calc(50% - 50vw); box-shadow:none}
  .hero-photo::after{display:none}
  .hero-photo::before{content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(18,16,14,.0) 38%,rgba(18,16,14,.78) 100%)}
  .hero-photo img{object-position:50% 60%}
  .hero h1{grid-row:1; grid-column:1; align-self:end; z-index:4; max-width:none; color:#FFFFFF; font-size:clamp(2.1rem,9.2vw,3rem); line-height:1.06; padding:0 0 26px; text-shadow:0 2px 18px rgba(18,16,14,.55)}
  .hero h1 em{color:var(--gold-lt)}
  .hero h1 .label{color:var(--gold-lt); font-size:.74rem; margin-bottom:.6rem; text-shadow:none}
  .hero-cta{grid-row:2; grid-column:1; flex-wrap:nowrap; padding:18px 0 4px}
  .hero-cta .btn{flex:1 1 0; padding:1em .6em; font-size:.84rem; letter-spacing:.1em}
  .hero-cta .btn.gold{flex:1.5 1 0}
  .hero .lead{grid-row:3; grid-column:1; padding-top:18px}
  .hero-meta{grid-row:4; grid-column:1; margin-top:18px}
  .hero-grid{display:grid}
}

/* ---------- 1.4.0: call-us box when online booking shows no time ---------- */
.call-fallback{margin-top:18px; padding:18px 20px; background:var(--white); border:1px solid var(--gold); border-left-width:4px; display:grid; gap:6px}
.call-fallback b{font-family:var(--display); font-size:clamp(1.5rem,3.2vw,1.9rem); font-weight:500; line-height:1.15}
.call-fallback a{font-family:var(--display); font-size:clamp(1.8rem,4vw,2.3rem); text-decoration:none; color:var(--ink); line-height:1.1}
.call-fallback a:hover{color:var(--gold-ink)}
.call-fallback p{color:var(--ink-2); font-size:1rem}
.call-fallback.alert{background:var(--ivory); box-shadow:0 0 0 3px rgba(176,141,87,.28)}
.call-fallback[hidden]{display:none}

/* ---------- 1.4.0: the new pages ---------- */
.crumbs{font-size:.86rem; color:var(--muted); letter-spacing:.04em; margin-bottom:18px}
.crumbs a{color:var(--gold-ink); text-underline-offset:4px}
.crumbs span[aria-hidden]{padding-inline:.5em}
.page-hero{background:var(--ivory); padding:calc(88px + clamp(28px,5vw,64px)) 0 clamp(36px,5vw,64px)}
.page-hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,64px); align-items:center}
.page-hero.no-photo .page-hero-grid{grid-template-columns:minmax(0,1fr)}
.page-hero h1{font-size:clamp(2.5rem,5vw,4rem); font-weight:400; line-height:1.05; max-width:20ch}
.page-hero .lead{font-size:clamp(1.12rem,1.5vw,1.28rem); color:var(--ink-2); max-width:56ch; margin-top:18px}
.page-hero .btn-row{margin-top:26px}
.page-hero .frame{aspect-ratio:4/3; overflow:hidden; position:relative; box-shadow:var(--shadow)}
.page-hero .frame img{width:100%; height:100%; object-fit:cover}
@media (max-width:860px){
  .page-hero{padding-top:calc(72px + 24px)}
  .page-hero-grid{grid-template-columns:minmax(0,1fr)}
  .page-hero .frame{order:-1; aspect-ratio:16/10}
  .page-hero .btn-row .btn{flex:1 1 0; padding-inline:.6em}
}
.sec{padding-block:clamp(44px,6vw,80px)}
.sec.alt{background:var(--ivory-2)}
.sec h2{font-size:clamp(1.9rem,3.4vw,2.7rem); margin-bottom:18px}
.prose{max-width:760px}
.prose p{margin-bottom:1.1em; color:var(--ink-2)}
.prose ul{padding-left:1.2em; color:var(--ink-2); margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose a,.cards a:not(.btn){text-decoration-color:var(--gold); text-underline-offset:4px}
.two-col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start}
@media (max-width:860px){ .two-col{grid-template-columns:minmax(0,1fr)} }
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:26px}
.card{background:var(--white); border:1px solid var(--line); padding:24px 24px 22px; display:grid; gap:8px; align-content:start}
.card h3{font-size:1.45rem}
.card p{color:var(--ink-2); font-size:1rem}
.card .card-link{color:var(--gold-ink); font-weight:600; font-size:.86rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; margin-top:4px}
.card .card-link:hover{text-decoration:underline}
.steps-list{counter-reset:s; list-style:none; padding:0; margin:0 0 1.2em; display:grid; gap:14px; max-width:760px}
.steps-list li{counter-increment:s; display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; color:var(--ink-2)}
.steps-list li::before{content:counter(s); width:36px; height:36px; border:1px solid var(--gold); color:var(--gold-ink); display:grid; place-items:center; font-family:var(--display); font-size:1.2rem}
.steps-list b{color:var(--ink)}
.note{border-left:3px solid var(--gold); background:var(--white); padding:16px 20px; color:var(--ink-2); font-size:1rem; max-width:760px; margin-top:22px}
.note.offer-note{font-size:.95rem}
.faq{max-width:760px; margin-top:8px}
.faq details{border-top:1px solid var(--line); padding-block:6px}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; font-family:var(--display); font-size:1.4rem; padding-block:12px; list-style-position:outside}
.faq p{color:var(--ink-2); padding-bottom:14px}
.cta-band{background:var(--espresso); color:var(--on-dark); text-align:center; padding-block:clamp(48px,7vw,84px)}
.cta-band h2{color:var(--on-dark); font-size:clamp(1.9rem,3.6vw,2.8rem)}
.cta-band p{color:var(--on-dark-2); max-width:56ch; margin:14px auto 0}
.cta-band .btn-row{justify-content:center}
.map-box{border:1px solid var(--line-2); background:var(--ivory-2); aspect-ratio:4/3; overflow:hidden}
.map-box iframe{width:100%; height:100%; border:0; display:block}
.route-list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.route-list li{border-top:1px solid var(--line); padding-top:12px; color:var(--ink-2)}
.route-list b{display:block; color:var(--ink); font-family:var(--display); font-size:1.35rem; font-weight:500}
.foot-grid .foot-more a{font-size:.95rem}
.pill-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.pill-row a{border:1px solid var(--line-2); padding:.4em .9em; font-size:.88rem; text-decoration:none; color:var(--ink-2); background:var(--white)}
.pill-row a:hover{border-color:var(--gold); color:var(--ink)}
.price-line{font-family:var(--display); font-size:1.5rem; color:var(--ink)}

/* ---------- 1.4.0: main menu with drop-downs, phone menu ---------- */
.nav{align-self:stretch; align-items:stretch; gap:26px}
.nav > a{display:flex; align-items:center}
.nav-item{position:relative; display:flex; align-items:center}
.nav-btn{background:none; border:0; padding:6px 0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:.5em; position:relative}
.nav-btn::after{content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px)}
.nav-btn:hover,.nav-item.open .nav-btn{color:var(--ink)}
.nav-sub{display:none; position:absolute; top:100%; left:-18px; min-width:300px; max-height:calc(100svh - 110px); overflow:auto; background:var(--white); border:1px solid var(--line); border-top:2px solid var(--gold); box-shadow:var(--shadow); padding:10px 0 12px; z-index:70; text-transform:none; letter-spacing:0; font-size:1rem; font-weight:400}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub,.nav-item.open .nav-sub{display:block}
.nav-sub a{display:block; padding:8px 22px; color:var(--ink-2); text-decoration:none}
.nav-sub a::after{display:none}
.nav-sub a:hover{background:var(--ivory-2); color:var(--ink)}
.nav-sub .nav-h{display:block; padding:12px 22px 4px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--gold-ink)}
.nav-sub .nav-all{margin-top:6px; border-top:1px solid var(--line); color:var(--gold-ink); font-weight:600}
.nav-toggle{display:none; order:5; width:44px; height:44px; border:1px solid var(--ink); background:transparent; border-radius:var(--r); position:relative; flex:none; padding:0}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:11px; right:11px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s}
.nav-toggle span{top:21px}
.nav-toggle span::before{left:0; right:0; top:-6px}
.nav-toggle span::after{left:0; right:0; top:6px}
.nav-toggle.on span{background:transparent}
.nav-toggle.on span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle.on span::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{position:absolute; left:0; right:0; top:100%; max-height:calc(100svh - 88px); z-index:55; background:var(--ivory); overflow:auto; padding:8px 20px 140px; border-top:1px solid var(--line)}
.mnav[hidden]{display:none}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{cursor:pointer; padding:18px 0; font-family:var(--display); font-size:1.7rem; list-style:none; display:flex; justify-content:space-between; align-items:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"+"; color:var(--gold-ink); font-family:var(--body); font-size:1.4rem}
.mnav details[open] summary::after{content:"\2212"}
.mnav details a{display:block; padding:11px 4px 11px 12px; color:var(--ink-2); text-decoration:none; font-size:1.05rem}
.mnav details .nav-h{display:block; padding:14px 12px 4px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--gold-ink)}
.mnav details a.nav-all{color:var(--gold-ink); font-weight:600}
.mnav details[open]{padding-bottom:12px}
.mnav-top{display:block; padding:18px 0; font-family:var(--display); font-size:1.7rem; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink)}
@media (max-width:1100px){ .nav-toggle{display:block} .nav{display:none} }
@media (max-width:700px){ .mnav{max-height:calc(100svh - 72px)} }
@media (max-width:420px){
  .mono{display:none}
  .logo-word b{font-size:1.3rem}
  .site-head .head-actions .btn.head-book{padding:.78em .85em; letter-spacing:.06em}
}
@media (max-width:860px){ .page-hero h1{font-size:clamp(2.1rem,8.4vw,3.2rem)} }