/* ==========================================================================
   SerenLuxe Unisex Saloon — design system
   Palette, type and layout taken from the printed PACKAGES flyer so that
   print and web read as the same salon.

   1.  Tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Typography
   5.  Buttons & forms
   6.  Header & navigation
   7.  Hero
   8.  Cards — package, service, category
   9.  Sections — trust, testimonials, location
   10. Footer & floating actions
   11. Utilities
   ========================================================================== */

/* ------------------------------------------------------------- 1. Tokens */
:root{
  /* Brand — lifted from the flyer */
  --navy:        #0E2145;
  --navy-deep:   #081530;
  --navy-soft:   #1B3364;
  --wine:        #6E1B2E;
  --wine-deep:   #52111F;
  --gold:        #C08A2E;
  --gold-light:  #DCB25E;
  --gold-pale:   #EFE0BE;
  --gold-deep:   #A0701F;   /* gold that still reads as gold at small sizes */
  --blush:       #F7EFE6;   /* the warm tint under the ivory sections */

  /* Grounds — warm neutrals biased toward the gold, never a flat grey */
  --ivory:       #FAF5EC;
  --ivory-deep:  #F3EADA;
  --white:       #FFFFFF;

  /* Ink */
  --ink:         #1A1712;
  --body:        #3D372E;
  --muted:       #6A6254;
  --rule:        #E2D8C4;
  --rule-soft:   #EFE7D8;

  /* State */
  --ok:          #2F6B4F;
  --alert:       #9A4A12;
  --error:       #A32036;

  /* Type */
  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Scale */
  --sp-1:.35rem; --sp-2:.7rem;  --sp-3:1.1rem; --sp-4:1.7rem;
  --sp-5:2.6rem; --sp-6:4rem;   --sp-7:6rem;   --sp-8:8rem;

  /* Corner radius. Small on purpose: a luxury salon reads as precise, and a
     large radius reads as an app. --r-lg is for the few big surfaces. */
  --r:    6px;
  --r-lg: 10px;

  --wrap:1200px;
  --wrap-narrow:760px;
  --measure:66ch;

  --shadow-sm: 0 1px 3px rgba(26,23,18,.05);
  --shadow-md: 0 8px 28px rgba(78,54,18,.10);
  --shadow-lg: 0 18px 50px rgba(14,33,69,.14);

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

/* --------------------------------------------------------- 2. Reset & base */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ivory);
  color:var(--body);
  font-family:var(--f-body);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{max-width:100%; height:auto; display:block}
button,input,select,textarea{font:inherit; color:inherit}

a{color:var(--wine); text-decoration:none; transition:color .18s var(--ease)}
a:hover{color:var(--gold)}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

::selection{background:var(--gold-pale); color:var(--ink)}

hr{border:0; border-top:1px solid var(--rule); margin:var(--sp-5) 0}

/* ------------------------------------------------- 3. Layout primitives */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem)}
.wrap-narrow{max-width:var(--wrap-narrow)}

.section{padding-block:clamp(2.7rem,5.6vw,4.8rem)}
.section--tight{padding-block:clamp(1.9rem,4vw,3.2rem)}
.section--ivory{
  background:linear-gradient(180deg, var(--ivory-deep) 0%, var(--blush) 100%);
}
.section--white{
  background:linear-gradient(180deg, var(--white) 0%, #FDFAF4 100%);
}
.section--navy{
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(192,138,46,.18) 0%, transparent 52%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#E8E1D2;
}
.section--navy h2,.section--navy h3{color:var(--white)}

.stack{display:flex; flex-direction:column; gap:var(--sp-3)}
.stack-lg{display:flex; flex-direction:column; gap:var(--sp-5)}

.grid{display:grid; gap:var(--sp-3)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media(min-width:600px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
  .grid{gap:var(--sp-4)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

.split{display:grid; gap:var(--sp-5); grid-template-columns:1fr; align-items:center}
/* When the other column is a stack of cards, centring the text leaves a void
   above it — line the two columns up at the top instead. */
.split--top{align-items:start}

/* The photograph that keeps a text column from sitting in empty space. */
.bridal-figure{
  margin:var(--sp-2) 0 0; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--rule-soft); background:var(--ivory-deep);
  box-shadow:var(--shadow-sm);
}
.bridal-figure img{width:100%; height:auto; aspect-ratio:5/3; object-fit:cover; object-position:center 20%}
.bridal-figure figcaption{
  padding:var(--sp-3) var(--sp-4); font-size:.86rem; color:var(--body);
  display:flex; flex-direction:column; gap:.25rem;
}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem)}}

/* ---------------------------------------------------------- 4. Typography */
h1,h2,h3,h4{color:var(--navy); margin:0; text-wrap:balance; font-weight:600}

/* Display headings carry the brand gold; h3/h4 stay navy, because they title
   cards and rows where gold on white would fight the prices for attention. */
h1,h2{color:var(--gold)}

h1{font-family:var(--f-display); font-size:clamp(2.4rem,5.6vw,4rem); line-height:1.05; letter-spacing:-.01em}
h2{font-family:var(--f-display); font-size:clamp(1.95rem,3.8vw,2.9rem); line-height:1.12; letter-spacing:-.005em}
h3{font-family:var(--f-display); font-size:clamp(1.3rem,2.2vw,1.6rem); line-height:1.2}
h4{font-family:var(--f-body); font-size:.9rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase}

p{margin:0}
strong,b{font-weight:500; color:var(--ink)}

/* The gold letterspaced label used above headings, echoing "UNISEX SALOON". */
.eyebrow{
  display:block; font-size:.7rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep);
}
.eyebrow--rule{display:flex; align-items:center; gap:.9rem}
.eyebrow--rule::after{content:""; flex:1; height:1px; background:var(--rule)}
.section--navy .eyebrow{color:var(--gold-light)}
.section--navy .eyebrow--rule::after{background:rgba(220,178,94,.28)}

.lede{font-size:clamp(1.05rem,1.7vw,1.2rem); color:var(--muted); max-width:var(--measure)}
.section--navy .lede{color:#DCD4C2}

.script{font-family:var(--f-display); font-style:italic; font-weight:400}

.section-head{display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5)}
.section-head--center{align-items:center; text-align:center}
.section-head--center .lede{margin-inline:auto}
.section-head--center .eyebrow--rule::after,
.section-head--center .eyebrow--rule::before{content:""; flex:0 0 42px; height:1px; background:var(--rule)}
.section-head--center .eyebrow--rule{justify-content:center}

/* A slim gold rule used as a divider under centred headings. */
.flourish{
  width:64px; height:1px; background:var(--gold); position:relative;
}
.flourish::before,.flourish::after{
  content:""; position:absolute; top:-2px; width:5px; height:5px;
  background:var(--gold); transform:rotate(45deg);
}
.flourish::before{left:-3px} .flourish::after{right:-3px}
.section-head--center .flourish{margin-inline:auto}

/* -------------------------------------------------------- 5. Buttons/forms */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.75rem; border:1px solid transparent; border-radius:2px;
  font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; text-align:center; line-height:1.3;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.btn{border-radius:var(--r)}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px); box-shadow:none}

.btn--gold{
  background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color:#241802; border-color:var(--gold);
  background-size:180% 180%; background-position:0% 50%;
  transition:background-position .55s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
}
.btn--gold:hover{background-position:100% 50%; color:#241802}

.btn--navy{background:var(--navy); color:var(--white)}
.btn--navy:hover{background:var(--navy-soft); color:var(--white)}

.btn--wine{background:var(--wine); color:var(--white)}
.btn--wine:hover{background:var(--wine-deep); color:var(--white)}

.btn--ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--gold); color:var(--gold)}

.btn--ghost-light{background:transparent; color:var(--white); border-color:rgba(239,224,190,.4)}
.btn--ghost-light:hover{border-color:var(--gold-light); color:var(--gold-light)}

.btn--sm{padding:.6rem 1.15rem; font-size:.7rem; letter-spacing:.12em}
.btn--block{width:100%}

.btn-row{display:flex; flex-wrap:wrap; gap:var(--sp-2)}

/* Forms */
.field{display:flex; flex-direction:column; gap:.4rem}
.field label,.label{
  font-size:.68rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.field .req{color:var(--wine)}
.input,input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=time],input[type=password],input[type=number],select,textarea{
  width:100%; padding:.75rem .9rem; background:var(--white);
  border:1px solid var(--rule); border-radius:var(--r);
  font-size:.95rem; font-weight:400; color:var(--ink);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
textarea{min-height:120px; resize:vertical; line-height:1.6}
select{appearance:none; padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%237B7467' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center;
}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(192,138,46,.14);
}
.field--error .input,.field--error input,.field--error select,.field--error textarea{border-color:var(--error)}
.field-error{font-size:.8rem; color:var(--error)}
.field-hint{font-size:.8rem; color:var(--muted)}

.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Alerts */
.alert{border-radius:var(--r);
  padding:.9rem 1.15rem; border-left:3px solid; font-size:.92rem; border-radius:0 2px 2px 0}
.alert--ok{background:#F1F7F3; border-color:var(--ok); color:#1F4A36}
.alert--error{background:#FDF1F3; border-color:var(--error); color:#6E1523}
.alert--info{background:var(--ivory-deep); border-color:var(--gold); color:#5F4712}

/* ------------------------------------------------------ 6. Header & nav */
.topbar{
  background:var(--navy-deep); color:#BFB6A4;
  font-size:.76rem; letter-spacing:.04em;
}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); min-height:38px; flex-wrap:wrap}
.topbar a{color:#E4DCC9}
.topbar a:hover{color:var(--gold-light)}
.topbar-left,.topbar-right{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.topbar .sep{color:rgba(191,182,164,.35)}
@media(max-width:700px){ .topbar-left{display:none} .topbar .wrap{justify-content:center} }

.site-header{
  /* The header creates a stacking context, so everything inside it — the mobile
     drawer included — composites at this value, not at its own z-index. It has
     to outrank the backdrop (62) and the floating call buttons (70), or they
     paint over the open drawer and swallow every tap on a menu link. */
  position:sticky; top:0; z-index:80; background:var(--ivory);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.is-stuck{
  box-shadow:0 1px 0 var(--rule), var(--shadow-md);
  background:rgba(250,245,236,.96); backdrop-filter:saturate(1.4) blur(10px);
}
.header-bar{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:80px}

/* --- Wordmark: SL crest + name, drawn in CSS so it is sharp before a logo lands */
.brand{display:flex; align-items:center; gap:.4rem; flex:none}
.brand:hover{color:inherit}
.brand-crest{
  /* The real mark is an upright oval (roughly 0.92:1), not the wide badge the
     box was originally sized for. */
  flex:none; width:48px; height:53px; display:grid; place-items:center;
  transition:transform .35s var(--ease);
}
.brand-crest img{width:100%; height:auto; object-fit:contain}
.brand:hover .brand-crest{transform:scale(1.06)}

/* The footer sits on navy, where the gold monogram needs a touch more light. */
.site-footer .brand-crest img{filter:brightness(1.25)}
.brand-text{display:flex; flex-direction:column; line-height:1}
/* The wordmark is the drawn one from the brand book, not type set to look like
   it. Height drives the size; the 5.6:1 ratio does the rest. */
.brand-name{display:block; height:1.47rem}
.brand-name img{display:block; height:100%; width:auto}
.brand-sub{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-top:.3rem;
  /* "UNISEX SALOON" broke over two lines once the bar filled up. A logo that
     reflows is not a logo, so it holds its line and the nav gives way first. */
  white-space:nowrap;
  padding-left:8px;
}
.brand-text{flex:none}
@media(max-width:420px){ .brand-name{height:1.21rem} .brand-crest{width:40px;height:43px} }

/* --- Hamburger ---------------------------------------------------------- */
.nav-toggle{
  display:grid; place-items:center; width:46px; height:46px; flex:none;
  background:transparent; border:1px solid var(--rule); border-radius:2px; cursor:pointer;
}
.nav-toggle:hover{border-color:var(--gold)}
.nav-toggle-bars{display:block; width:19px; height:1.5px; background:var(--navy); position:relative; transition:background .18s}
.nav-toggle-bars::before,.nav-toggle-bars::after{
  content:""; position:absolute; left:0; width:19px; height:1.5px; background:var(--navy);
  transition:transform .28s var(--ease), top .22s var(--ease);
}
.nav-toggle-bars::before{top:-6px} .nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded=true] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded=true] .nav-toggle-bars::before{top:0; transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] .nav-toggle-bars::after{top:0; transform:rotate(-45deg)}
@media(min-width:1100px){ .nav-toggle{display:none} }

/* --- Nav list ----------------------------------------------------------- */
.main-nav{display:flex; align-items:center; gap:var(--sp-2)}
.nav-list{list-style:none; display:flex; align-items:center; gap:.1rem; margin:0; padding:0; min-width:0}
.nav-item{display:flex; align-items:center}

.nav-link{
  position:relative; display:inline-flex; align-items:center; gap:.36rem;
  padding:.65rem .7rem; color:var(--ink);
  font-size:.77rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap;
}
/* Gold underline that grows from the centre — the only nav flourish. */
.nav-link::after{
  content:""; position:absolute; left:.78rem; right:.78rem; bottom:.34rem; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:center;
  transition:transform .28s var(--ease);
}
.nav-link:hover{color:var(--gold)}
.nav-link:hover::after,
.has-mega.is-open > .nav-link::after{transform:scaleX(1)}
.nav-link[aria-current=page]{color:var(--navy); font-weight:500}
.nav-link[aria-current=page]::after{transform:scaleX(1); background:var(--navy)}

.chev{width:9px; height:6px; flex:none; transition:transform .28s var(--ease); opacity:.65}
.has-mega.is-open > .nav-link .chev{transform:rotate(180deg); opacity:1}

/* The mobile-only disclosure button beside a mega link. */
.sub-toggle{
  display:none; width:44px; height:44px; flex:none; align-items:center; justify-content:center;
  background:transparent; border:0; color:var(--muted); cursor:pointer;
}
.sub-toggle .chev{width:11px; height:7px; opacity:1}
.sub-toggle[aria-expanded=true] .chev{transform:rotate(180deg)}

.nav-foot{display:flex; align-items:center; gap:var(--sp-3); margin-left:var(--sp-2); flex:none}
/* "Book now" broke over two lines once the bar filled up. The call to action
   is the last thing that should look cramped. */
.nav-cta{white-space:nowrap}
.nav-phone{display:none}

/* --- Mega panel --------------------------------------------------------- */
/* Positioned against .site-header. The panel itself is 80% of the viewport and
   centred under the bar — a floating sheet rather than a full-width band, so
   the page behind it still frames the menu. */
.mega{
  position:absolute; top:100%; left:50%; z-index:5;
  width:min(80vw, 1500px);
  background:var(--white); border:1px solid var(--rule);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;

  max-height:calc(100vh - 148px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.mega::-webkit-scrollbar{width:9px}
.mega::-webkit-scrollbar-thumb{background:var(--rule); border-radius:9px}
.mega::-webkit-scrollbar-track{background:transparent}
.has-mega.is-open > .mega,
.has-mega:focus-within > .mega{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}

/* The shorter panels — about, bridal, offers, gallery, contact — keep the same
   grammar as the big two, on a narrower measure. */
.mega--compact{width:min(80vw, 1180px)}

.mega-inner{
  display:grid; grid-template-columns:minmax(0,1fr) 248px;
  gap:clamp(2rem,4vw,3.4rem); padding-block:clamp(1.3rem,2vw,1.9rem);
  align-items:start;

  /* The panel is already 80% wide; the grid just fills it. */
  width:100%;
  max-width:100%;
  margin-inline:auto;
  padding-inline:clamp(1.4rem, 2.4vw, 2.6rem);
}
@media(max-width:1240px){ .mega-inner{grid-template-columns:minmax(0,1fr) 240px} }
@media(max-width:1099px){ .mega-inner{width:100%; padding-inline:0} }

.mega-title{color:var(--gold);
  
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin-bottom:var(--sp-2); font-weight:500;
}

.mega-grid{
  display:grid; align-items:start;
  /* Generous column gutters: the columns are separate lists, and a narrow gap
     lets the eye run across two of them as though they were one. */
  gap:var(--sp-3) clamp(2rem, 3.4vw, 3.4rem);
}
.mega-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mega-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1180px){
  .mega-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1180px){ .mega-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))} }

.mega-col{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.mega-col-head{
  font-family:var(--f-display); font-size:1.12rem; font-weight:600; color:var(--gold);
  line-height:1.2; padding-bottom:.4rem; border-bottom:1px solid var(--rule-soft);
  /* One line's worth of reserved height keeps the lists aligned across a row
     without a two-line name setting the height of every column. */
  min-height:1.55em; display:flex; align-items:flex-end;
}
a.mega-col-head:hover{color:var(--wine); border-bottom-color:var(--gold)}

.mega-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.mega-links a{
  display:flex; align-items:baseline; justify-content:flex-start; gap:.45rem;
  padding:.26rem 0; color:var(--body); font-size:.86rem; font-weight:400;
  border-bottom:1px solid transparent;
}
.mega-links a:hover{color:var(--wine)}
.mega-links a:hover .ml-name{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold)}
.ml-name{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ml-price{
  flex:none; font-size:.8rem; color:var(--gold-deep); font-weight:500;
  font-variant-numeric:tabular-nums;
}
.mega-links a:hover .ml-price{color:var(--gold)}

.mega-all{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:var(--sp-3);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  color:var(--navy);
}
.mega-all::after{content:"→"; transition:transform .25s var(--ease)}
.mega-all:hover{color:var(--gold)}
.mega-all:hover::after{transform:translateX(4px)}

.mega-side{
  background:var(--ivory-deep); border:1px solid var(--rule-soft);
  border-radius:var(--r);
  padding:var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:.55rem;
  align-self:start; position:sticky; top:var(--sp-2);
}
.mega-side-links{display:flex; gap:1rem; align-items:baseline; font-size:.84rem}
.mega-side-links a{color:var(--navy); border-bottom:1px solid var(--rule)}
.mega-side-links a:hover{color:var(--gold); border-bottom-color:var(--gold)}
.mega-side-rule{border:0; border-top:1px solid var(--rule); margin:.4rem 0 .2rem; width:100%}
.mega-side-title{
  font-family:var(--f-display); font-size:1.28rem; font-weight:600;
  color:var(--ink); line-height:1.25;
}
.mega-side-note{font-size:.85rem; color:var(--muted); line-height:1.6}
.mega-side .btn{margin-top:auto}
.mega-side-hours{
  font-size:.72rem; color:var(--muted); letter-spacing:.06em;
  padding-top:.7rem; border-top:1px solid var(--rule); line-height:1.6;
}

/* --- Mobile drawer ------------------------------------------------------ */
@media(max-width:1099px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(400px,88vw); z-index:65;
    background:var(--ivory); border-left:1px solid var(--rule);
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    padding:1.4rem var(--sp-4) var(--sp-5);
    transform:translateX(101%); transition:transform .34s var(--ease);
    overflow-y:auto; overscroll-behavior:contain; box-shadow:var(--shadow-lg);
  }
  .main-nav.is-open{transform:translateX(0)}

  .nav-list{flex-direction:column; align-items:stretch; gap:0; width:100%; margin-top:3.4rem}
  .nav-item{
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
    border-bottom:1px solid var(--rule-soft);
  }
  .nav-link{padding:1rem .1rem; font-size:.85rem; letter-spacing:.1em}
  .nav-link::after{display:none}
  .nav-link .chev{display:none}          /* the sub-toggle carries the affordance */
  .sub-toggle{display:flex}

  .mega{
    grid-column:1 / -1; position:static; opacity:1; visibility:visible; transform:none;
    background:transparent; border:0; box-shadow:none;
    display:none; padding-bottom:.9rem;
  }
  .has-mega.is-open > .mega{display:block}
  /* The desktop open-state sets transform:translateX(-50%) to centre a floating
     panel under the bar, and its specificity (0,3,0) beats the plain .mega
     reset above. In the drawer that shifted every panel half its own width to
     the left, off the screen — the links existed but could not be reached. */
  .has-mega.is-open > .mega,
  .has-mega:focus-within > .mega{transform:none; width:auto; max-height:none}
  .mega .wrap{padding-inline:0; max-width:none}
  .mega-inner{grid-template-columns:1fr; gap:var(--sp-3); padding-block:0}
  .mega-title{display:none}
  /* Every panel goes to a single column in the drawer. Only --4 used to, so a
     --3 or --2 panel kept its columns, overflowed the 364px drawer and pushed
     its first column off the left edge — the links were on the page but
     unreachable. */
  .mega-grid,
  .mega-grid--2,
  .mega-grid--3,
  .mega-grid--4{grid-template-columns:1fr; gap:var(--sp-3)}
  .mega-col-head{font-size:1rem; padding-bottom:.35rem}
  .mega-links a{padding:.42rem 0 .42rem .8rem; border-left:1px solid var(--rule-soft)}
  .mega-all{margin-top:var(--sp-2)}
  .mega-side{padding:var(--sp-3)}
  .mega-side-hours{display:none}

  .nav-foot{
    flex-direction:column; align-items:stretch; gap:var(--sp-2);
    margin:var(--sp-4) 0 0;
  }
  .nav-phone{
    display:block; text-align:center; font-family:var(--f-display);
    font-size:1.35rem; font-weight:600; color:var(--navy);
    font-variant-numeric:tabular-nums;
  }
  .nav-cta{width:100%}
}

.nav-backdrop{
  position:fixed; inset:0; background:rgba(8,21,48,.45); z-index:62;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.nav-backdrop.is-open{opacity:1; visibility:visible}
@media(min-width:1100px){ .nav-backdrop{display:none} }

/* --------------------------------------------------------------- 7. Hero */
.hero{position:relative; background:var(--navy); color:var(--white); overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:top center; opacity:.42}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, rgba(8,21,48,.94) 0%, rgba(8,21,48,.78) 42%, rgba(8,21,48,.42) 100%);
}
/* --- Hero collage -------------------------------------------------------
   The salon's own photographs, stacked in the space the copy leaves free.
   Sits above the gradient but below the text, and steps out of the way
   entirely once the layout is too narrow to hold both. */
.hero-collage{
  position:absolute; z-index:1; top:50%; right:clamp(1.5rem, 4vw, 4rem);
  transform:translateY(-50%);
  width:min(38vw, 460px);
  display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(.6rem, 1.2vw, 1rem);
}
.hero-shot{
  margin:0; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid rgba(220,178,94,.35);
  box-shadow:0 18px 44px rgba(4,10,24,.45);
  background:var(--navy-soft);
}
.hero-shot img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  transition:transform 1.2s var(--ease);
}
.hero-shot:hover img{transform:scale(1.05)}

/* One tall picture down the left, two stacked beside it. */
.hero-shot--1{grid-row:span 2; aspect-ratio:3/4.35}
.hero-shot--2,.hero-shot--3{aspect-ratio:4/3}

@media(max-width:1180px){ .hero-collage{width:min(42vw, 380px)} }
@media(max-width:980px){ .hero-collage{display:none} }

.hero-inner{position:relative; z-index:2; padding-block:clamp(2.4rem,5.4vw,4.3rem); max-width:660px}
.hero--shots .hero-inner{max-width:min(620px, 56%)}
@media(max-width:980px){ .hero--shots .hero-inner{max-width:660px} }
/* Shorter again where the screen is short, so the first section shows. */
@media(max-height:760px){ .hero-inner{padding-block:clamp(2rem,4vw,3.2rem)} }
.hero h1{color:var(--white); margin-bottom:var(--sp-3)}
.hero .eyebrow{color:var(--gold-light); margin-bottom:var(--sp-3)}
.hero-sub{font-size:clamp(1.02rem,1.8vw,1.18rem); color:#E4DCC9; margin-bottom:var(--sp-4); max-width:52ch}
.hero-strap{
  display:inline-block; margin-top:var(--sp-3); padding-top:var(--sp-2);
  border-top:1px solid rgba(220,178,94,.3);
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-light);
}
/* Placeholder ground for before real photography lands. */
.hero-media--placeholder{
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(192,138,46,.30) 0%, transparent 58%),
    radial-gradient(90% 80% at 8% 96%, rgba(110,27,46,.42) 0%, transparent 60%),
    linear-gradient(150deg, #14284F 0%, #0A1832 55%, #10203F 100%);
}

/* Small hero for interior pages */
.page-hero{position:relative; background:var(--navy); color:var(--white); overflow:hidden}
.page-hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(8,21,48,.92) 0%, rgba(8,21,48,.7) 100%)}
.page-hero .wrap{position:relative; z-index:2; padding-block:clamp(2.8rem,6vw,4.6rem)}
.page-hero h1{color:var(--white); font-size:clamp(2.1rem,4.4vw,3.2rem)}
.page-hero .lede{color:#DCD4C2; margin-top:var(--sp-2)}
.page-hero .eyebrow{color:var(--gold-light); margin-bottom:var(--sp-2)}
.page-hero-bg{position:absolute; inset:0;
  background:radial-gradient(100% 120% at 88% 0%, rgba(192,138,46,.26) 0%, transparent 55%),
             linear-gradient(140deg, #14284F 0%, #0A1832 100%)}

.crumbs{font-size:.76rem; color:rgba(201,192,174,.8); margin-bottom:var(--sp-2); letter-spacing:.04em}
.crumbs a{color:rgba(220,178,94,.9)}
.crumbs a:hover{color:var(--gold-light)}
.crumbs span{opacity:.5; margin-inline:.4rem}

/* ------------------------------------------------------------- 8. Cards */
.card{
  background:var(--white); border:1px solid var(--rule-soft); border-radius:var(--r);
  display:flex; flex-direction:column; overflow:hidden;
  transition:box-shadow .28s var(--ease), transform .28s var(--ease), border-color .28s var(--ease);
}
.card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--rule)}
.card:active{transform:translateY(-1px)}
.card-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ivory-deep)}
.card-media img{width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .6s var(--ease)}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); flex:1}
.card-body > .btn{margin-top:auto}

/* --- Package card -------------------------------------------------------
   Read in the order the choice is made: who it is for, what it is called,
   what it costs, what is in it, then the button. The audience shows as a
   hairline along the top edge rather than as a solid colour block — four
   cards in a row should read as one set, not as four competing posters. */

.pkg{
  position:relative; display:flex; flex-direction:column; gap:var(--sp-3);
  background:var(--white); border:1px solid var(--rule-soft); border-radius:var(--r);
  padding:var(--sp-4);
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.pkg::before{
  content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:3px;
  background:var(--gold); border-radius:var(--r) var(--r) 0 0;
}
.pkg--men.pkg::before,.pkg--couple.pkg::before{background:var(--navy)}
.pkg--women.pkg::before,.pkg--bridal.pkg::before{background:var(--wine)}

.pkg:hover{border-color:var(--rule); box-shadow:var(--shadow-md); transform:translateY(-4px)}
.pkg:active{transform:translateY(-1px)}
.pkg:focus-within{border-color:var(--gold)}

/* The flyer's own photograph, full-bleed across the top of the card. */
.pkg-media{
  display:block; overflow:hidden; background:var(--ivory-deep);
  margin:calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) .35rem;
  aspect-ratio:16/10; border-radius:var(--r) var(--r) 0 0;
}
.pkg-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  transition:transform .8s var(--ease);
}
.pkg:hover .pkg-media img{transform:scale(1.06)}

.pkg-head{display:flex; flex-direction:column; gap:.3rem}
.pkg-for{
  font-size:.63rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
}
.pkg-name{font-family:var(--f-display); font-size:1.5rem; font-weight:600; color:var(--ink); line-height:1.15}

/* Two lines' worth of room whether the tagline needs one or two, so the
   prices below sit on the same line right across a row of cards. */
.pkg-tag{font-size:.84rem; color:var(--muted); line-height:1.55; min-height:2.6em}

/* The price is the answer people came for, so it gets the room. */
.pkg-price{
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--rule-soft);
}
.pkg-price-row{display:flex; align-items:baseline; flex-wrap:wrap; gap:.55rem; margin:0}
.pkg-offer{
  font-family:var(--f-display); font-size:2.1rem; font-weight:600; line-height:1;
  color:var(--navy); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.pkg-was{font-size:.88rem; color:var(--muted); text-decoration:line-through; font-variant-numeric:tabular-nums}
.pkg-save{
  background:var(--gold-pale); color:#7A5410; padding:.24rem .55rem;
  font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
}

/* A tick reads as "included"; the diamond it replaces read as decoration. */
.pkg-items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; flex:1}
.pkg-items li{position:relative; padding-left:1.3rem; font-size:.875rem; line-height:1.5; color:var(--body)}
.pkg-items li::before{
  content:""; position:absolute; left:.1rem; top:.34em; width:10px; height:5px;
  border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}

.pkg-foot{
  display:flex; flex-direction:column; gap:.7rem; margin-top:auto;
  padding-top:var(--sp-3); border-top:1px solid var(--rule-soft);
}
.pkg-meta{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* The card is narrower than a page button — tighten the tracking so the label
   stays on one line at four cards across. */
.pkg .btn{padding-inline:1rem; font-size:.72rem; letter-spacing:.1em}
.pkg-link{
  align-self:center; font-size:.8rem; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule);
}
.pkg-link:hover{color:var(--navy)}

@media(min-width:1100px){
  .pkg{padding:var(--sp-4) calc(var(--sp-4) * 1.05)}
}

/* Audience filter pills */
.filter-row{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:var(--sp-5)}
.filter-pill{border-radius:var(--r);
  
  padding:.5rem 1.15rem; border:1px solid var(--rule); background:var(--white);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--muted); cursor:pointer; border-radius:2px;
  transition:all .2s var(--ease);
}
.filter-pill:hover{border-color:var(--gold); color:var(--gold)}
.filter-pill.is-active{background:var(--navy); border-color:var(--navy); color:var(--white)}

/* --- Gallery grid ------------------------------------------------------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3)}
.gallery-item{position:relative; margin:0; overflow:hidden; border-radius:var(--r); background:var(--navy)}
.gallery-item img{display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .6s var(--ease)}
.gallery-item:hover img{transform:scale(1.05)}

/* A photograph opens full size over the page. */
.gallery-open{display:block; width:100%; padding:0; border:0; background:none;
              cursor:zoom-in; -webkit-appearance:none; appearance:none}
.gallery-open:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

body.has-lightbox{overflow:hidden}

.lightbox{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
          padding:clamp(1rem, 4vw, 3rem);
          background:rgba(10,18,35,.94); backdrop-filter:blur(3px)}
.lightbox[hidden]{display:none}

.lightbox-figure{margin:0; max-width:100%; max-height:100%; display:flex;
                 flex-direction:column; align-items:center; gap:var(--sp-2)}
.lightbox-figure img{max-width:100%; max-height:80vh; width:auto; height:auto;
                     border-radius:var(--r); box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox-figure figcaption{color:#F2ECE2; font-size:.9rem; text-align:center;
                            display:flex; gap:.9rem; align-items:baseline; justify-content:center}
.lightbox-count{color:rgba(242,236,226,.55); font-size:.78rem; letter-spacing:.04em}

.lightbox-close,
.lightbox-nav{position:absolute; border:0; cursor:pointer; color:#F2ECE2; line-height:1;
              background:rgba(255,255,255,.09); border-radius:50%;
              transition:background .2s ease, transform .2s ease}
.lightbox-close:hover,
.lightbox-nav:hover{background:rgba(255,255,255,.2)}
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

.lightbox-close{top:1rem; right:1rem; width:2.6rem; height:2.6rem; font-size:1.6rem}
.lightbox-nav{top:50%; margin-top:-1.5rem; width:3rem; height:3rem; font-size:2rem}
.lightbox-prev{left:1rem}
.lightbox-next{right:1rem}

@media (max-width:640px){
  .lightbox-nav{width:2.5rem; height:2.5rem; font-size:1.6rem}
  .lightbox-prev{left:.4rem}
  .lightbox-next{right:.4rem}
  .lightbox-figure img{max-height:70vh}
}

@media (prefers-reduced-motion:reduce){
  .lightbox-close, .lightbox-nav{transition:none}
}
.gallery-item figcaption{position:absolute; inset:auto 0 0 0; padding:.55rem .9rem;
  font-size:.78rem; letter-spacing:.02em; color:var(--white);
  background:linear-gradient(to top, rgba(8,21,48,.85), transparent)}
@media (max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .gallery-grid{grid-template-columns:1fr} }

/* --- Category card ------------------------------------------------------ */
.cat-card{position:relative; display:block; overflow:hidden; background:var(--navy); min-height:280px; border-radius:var(--r)}
.cat-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:top center; opacity:.55; transition:transform .7s var(--ease), opacity .4s}
.cat-card:hover img{transform:scale(1.06); opacity:.42}
.cat-card::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,21,48,.93) 8%, rgba(8,21,48,.25) 70%)}
.cat-card-body{position:relative; z-index:2; padding:var(--sp-4); margin-top:auto;
  display:flex; flex-direction:column; gap:.3rem; height:100%; justify-content:flex-end}
.cat-card h3{color:var(--white)}
.cat-card p{font-size:.86rem; color:#C4BBA9}
.cat-card .more{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light);
  margin-top:.4rem; display:inline-flex; align-items:center; gap:.45rem;
}
.cat-card .more::after{content:"→"; transition:transform .25s var(--ease)}
.cat-card:hover .more::after{transform:translateX(4px)}
/* Placeholder ground per category, so the grid reads before photos land. */
.cat-card--ph{background:linear-gradient(150deg,#16294C 0%,#0B1A36 100%)}
.cat-card--ph::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 100% at 78% 8%, rgba(192,138,46,.34) 0%, transparent 60%);
}

/* --- Service list ------------------------------------------------------- */
.svc-list{display:flex; flex-direction:column; border-top:1px solid var(--rule-soft)}
.svc-row{
  display:grid; grid-template-columns:minmax(0,1fr) 104px 78px; gap:var(--sp-3);
  align-items:baseline; padding:.85rem .2rem; border-bottom:1px solid var(--rule-soft);
}
.svc-what{min-width:0}
.svc-name{font-size:1rem; color:var(--ink); font-weight:400}
.svc-desc{font-size:.85rem; color:var(--muted); margin-top:.1rem}

/* Variant pricing — "Short ₹5,000 · Medium ₹7,000 · Long ₹9,000" — sits under
   the name rather than fighting the price column for room. */
.svc-note{
  font-size:.78rem; color:var(--gold); margin-top:.22rem;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}

/* A treatment priced for men and for women reads as one line with two price
   columns, the way the printed menu sets it — not as the same name twice. */
.svc-cols-head,
.svc-row--pair{grid-template-columns:minmax(0,1fr) 104px 78px}
.svc-cols-head,
.svc-group--cols .svc-row{grid-template-columns:minmax(0,1fr) 110px 110px}

.svc-cols-head{
  display:grid; gap:var(--sp-3); padding:.2rem .2rem .5rem;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--rule);
}
.svc-cols-head span{text-align:right}
.svc-cols-head .svc-cols-k{text-align:left; color:var(--gold)}

/* A treatment the salon only offers to one of them. */
.svc-none{color:var(--rule); font-size:1rem; letter-spacing:.05em}

.svc-col{display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; text-align:right}
.svc-price-link{
  display:inline-block; border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.svc-price-link:hover{border-bottom-color:var(--gold); transform:translateY(-1px)}
.svc-price-link .svc-price{color:var(--navy)}
.svc-price-link:hover .svc-price{color:var(--wine)}
.svc-col-k{
  display:none; font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.svc-row:hover{background:linear-gradient(90deg, transparent, rgba(192,138,46,.045) 40%, transparent)}

@media(max-width:760px){
  .svc-cols-head{display:none}
  .svc-row--pair{grid-template-columns:1fr 1fr; gap:.6rem var(--sp-3)}
  .svc-row--pair > div:first-child{grid-column:1 / -1}
  .svc-col{align-items:flex-start; text-align:left}
  .svc-col-k{display:block}
}
.svc-meta{
  display:contents;                 /* price and button take the two fixed tracks */
}
.svc-meta .svc-price,
.svc-meta .svc-price--ask{grid-column:2; text-align:right; justify-self:end}
.svc-meta .svc-book{grid-column:3; justify-self:end}
.svc-meta .svc-dur{
  grid-column:1; justify-self:start; font-size:.76rem; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.svc-dur{font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}
.svc-price{
  font-family:var(--f-display); font-size:1.2rem; font-weight:600; color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.svc-price--ask{font-family:var(--f-body); font-size:.78rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.tag-gender{
  display:inline-block; margin-left:.5rem; padding:.1rem .42rem; border-radius:2px;
  font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  border:1px solid var(--rule); color:var(--muted); vertical-align:2px;
}
.tag-gender--men{border-color:#B9C6DE; color:var(--navy-soft)}
.tag-gender--women{border-color:#DEB9C3; color:var(--wine)}

/* -------------------------------------------------------- 9. Sections */
/* Trust badges — the five from the flyer footer. */
.trust{display:grid; gap:var(--sp-3); grid-template-columns:repeat(2,1fr); text-align:center}
@media(min-width:800px){.trust{grid-template-columns:repeat(5,1fr)}}
.trust-item{display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:var(--sp-3) .4rem; text-decoration:none; color:inherit; border-radius:var(--r);
  transition:transform .25s var(--ease), background .25s var(--ease)}
/* Each badge links to the page that backs the claim, so it has to look
   touchable — the ring fills and the whole tile lifts. */
.trust-item:hover{transform:translateY(-3px); background:rgba(255,255,255,.05)}
.trust-item:hover .trust-icon{background:var(--gold); color:var(--navy); border-color:var(--gold)}
.trust-item:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.trust-icon{transition:background .25s var(--ease), color .25s var(--ease)}
.trust-icon{
  width:52px; height:52px; border:1px solid var(--gold); border-radius:50%;
  display:grid; place-items:center; color:var(--gold);
}
.trust-icon svg{width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.4}
.trust-label{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--ink); line-height:1.5}
.section--navy .trust-label{color:#E8E1D2}

/* Testimonials */
.quote{border-radius:var(--r);
  
  background:var(--white); border:1px solid var(--rule-soft); padding:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-2); border-top:2px solid var(--gold);
}
.quote-stars{color:var(--gold); font-size:.85rem; letter-spacing:.18em}
.quote-text{font-family:var(--f-display); font-size:1.14rem; font-style:italic; line-height:1.55; color:var(--ink)}
.quote-by{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:auto}
.quote-by b{color:var(--ink); font-weight:500}

/* Location block */
.map-frame{border-radius:var(--r); overflow:hidden;
  border:1px solid var(--rule); background:var(--ivory-deep); aspect-ratio:4/3; min-height:300px;
  /* min-height and aspect-ratio together derive a width (300 x 4/3 = 400px),
     which on a narrow phone is wider than the column and put the whole page
     into horizontal scroll. The cap keeps the height and drops the ratio. */
  max-width:100%}
.map-frame iframe{width:100%; height:100%; border:0; display:block}

.info-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3)}
.info-list li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:.9rem; align-items:start}
.info-list svg{width:17px; height:17px; stroke:var(--gold); fill:none; stroke-width:1.5; margin-top:.28rem}
.info-list .k{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.1rem}
.info-list .v{color:var(--ink); font-size:.98rem}

/* The same list appears on the contact page (light) and in the footer (navy).
   Without these the address and opening hours were near-black on navy — there,
   but unreadable. */
.section--navy .info-list .v,
.site-footer .info-list .v{color:#EDE7DA}
.section--navy .info-list .k,
.site-footer .info-list .k{color:#A9B3C6}

/* CTA band */
.cta-band{background:var(--navy); color:var(--white); text-align:center}
.cta-band .wrap{padding-block:clamp(3rem,6vw,4.6rem); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3)}
.cta-band h2{color:var(--white)}
.cta-band .script{color:var(--gold-light); font-size:clamp(1.5rem,3vw,2rem)}
.cta-phone{
  font-family:var(--f-display); font-size:clamp(1.8rem,4vw,2.6rem); font-weight:600;
  color:var(--white); letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.cta-phone:hover{color:var(--gold-light)}

/* ------------------------------------------- 10. Footer & floating actions */
.site-footer{background:var(--navy-deep); color:#CFC7B5; font-size:.88rem}
.site-footer a{color:#E4DCC9}
.site-footer a:hover{color:var(--gold-light)}
.footer-grid{
  display:grid; gap:var(--sp-4) var(--sp-5); grid-template-columns:1fr;
  padding-block:clamp(2.2rem,4vw,3.2rem);
}
@media(min-width:720px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1000px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.footer-col{display:flex; flex-direction:column; gap:var(--sp-2)}
/* A footer column heading. h2 rather than h4 — it sits under the page's h1,
   and skipping to h4 leaves a hole in the document outline. */
.footer-col .footer-h{
  color:var(--gold-light); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:.4rem;
  font-family:var(--f-body);
}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.42rem}
.footer-brand .brand-name{color:var(--white); font-size:1.7rem}
.footer-brand .brand-crest{border-color:var(--gold-light); color:var(--gold-light)}
.footer-note{font-size:.84rem; line-height:1.7; max-width:34ch}

.socials{display:flex; gap:.55rem; margin-top:.4rem}
.socials a{
  width:38px; height:38px; border:1px solid rgba(201,192,174,.28); border-radius:50%;
  display:grid; place-items:center; color:#C9C0AE;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.socials a:hover{border-color:var(--gold-light); color:var(--gold-light); background:rgba(192,138,46,.1)}
.socials svg{width:16px; height:16px; fill:currentColor}

.footer-bottom{
  border-top:1px solid rgba(201,192,174,.16); padding-block:var(--sp-3);
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); justify-content:space-between;
  font-size:.79rem; color:#A79E8C;
}
/* The policy links, sitting under the brand blurb rather than lengthening a
   column that already had eleven entries. */
.footer-legal{
  flex-direction:row !important; flex-wrap:wrap; gap:.3rem .9rem !important;
  margin-top:var(--sp-3) !important; font-size:.82rem;
}

/* Who built it, bottom right — quiet, and gold only on hover. */
.footer-by{margin-left:auto; color:#8F8776}
.footer-by a{color:#CFC7B5; border-bottom:1px solid rgba(207,199,181,.3)}
.footer-by a:hover{color:var(--gold-light); border-bottom-color:var(--gold-light)}

/* Floating call + WhatsApp */
.float-actions{
  position:fixed; right:1rem; bottom:1rem; z-index:70;
  display:flex; flex-direction:column; gap:.6rem;
}
.float-btn{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  color:var(--white); box-shadow:var(--shadow-md);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.float-btn:hover{transform:scale(1.07); color:var(--white); box-shadow:var(--shadow-lg)}
.float-btn svg{width:25px; height:25px; fill:currentColor}
.float-btn--wa{background:#25D366}
.float-btn--call{background:var(--gold)}
@media(min-width:1040px){ .float-actions{right:1.5rem; bottom:1.5rem} }

/* ------------------------------------------- 10b. Interior page components */

/* --- Stat row (packages page) ------------------------------------------- */
.stat-row{
  display:grid; gap:1px; background:var(--rule-soft); overflow:hidden;
  border:1px solid var(--rule-soft); grid-template-columns:repeat(2,1fr);
  border-radius:var(--r);
}
/* The row used to hold four figures; the PDF download and the "from" price have
   since gone. auto-fit means it fits whatever is actually in it rather than
   leaving an empty cell where a stat used to be. */
@media(min-width:820px){ .stat-row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} }
.stat{
  background:var(--white); padding:var(--sp-4) var(--sp-3);
  display:flex; flex-direction:column; gap:.2rem; align-items:center; text-align:center;
}
.stat-n{
  font-family:var(--f-display); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:600;
  color:var(--navy); line-height:1; font-variant-numeric:tabular-nums;
}
.stat-k{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* --- Two-column detail layout (package, service, contact) --------------- */
.detail-split{display:grid; gap:var(--sp-5); grid-template-columns:1fr; align-items:start}
@media(min-width:940px){
  .detail-split{grid-template-columns:minmax(0,1fr) 340px; gap:clamp(2.5rem,5vw,4rem)}
}

/* --- Numbered inclusion list (package detail) --------------------------- */
.incl-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px; background:var(--rule-soft);
  border:1px solid var(--rule-soft); grid-template-columns:1fr;
}
@media(min-width:620px){ .incl-list{grid-template-columns:1fr 1fr} }
.incl-list li{
  background:var(--white); padding:1rem 1.15rem;
  display:flex; align-items:baseline; gap:.9rem;
}
.incl-n{
  flex:none; font-family:var(--f-display); font-size:.92rem; font-weight:600;
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.incl-label{color:var(--ink); font-size:.98rem}

/* --- Price panel (package detail) --------------------------------------- */
.price-panel{
  border:1px solid var(--rule-soft); background:var(--white);
  position:sticky; top:104px; overflow:hidden;
}
@media(max-width:939px){ .price-panel{position:static} }

.price-panel-top{
  padding:var(--sp-4); color:var(--white);
  display:flex; flex-direction:column; gap:.2rem;
}
.pkg--men .price-panel-top,.pkg--couple .price-panel-top{background:var(--navy)}
.pkg--women .price-panel-top,.pkg--bridal .price-panel-top{background:var(--wine)}

.pp-code{font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; opacity:.6; margin-bottom:.4rem}
.pp-mrp{font-size:.92rem; text-decoration:line-through; opacity:.6; font-variant-numeric:tabular-nums}
.pp-offer{
  font-family:var(--f-display); font-size:clamp(2.3rem,5vw,3rem); font-weight:600;
  line-height:1; font-variant-numeric:tabular-nums;
}
.pp-save{
  margin-top:.55rem; align-self:flex-start;
  background:var(--gold); color:#221803; padding:.32rem .7rem;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
}

.price-panel-body{padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2)}
.pp-facts{
  display:flex; flex-direction:column; gap:0; margin:0 0 var(--sp-2);
  border-top:1px solid var(--rule-soft);
}
.pp-facts > div{
  display:flex; justify-content:space-between; gap:var(--sp-2);
  padding:.6rem 0; border-bottom:1px solid var(--rule-soft);
}
.pp-facts dt{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.pp-facts dd{margin:0; font-size:.9rem; color:var(--ink); font-weight:500; text-align:right}
.pp-note{font-size:.8rem; color:var(--muted); line-height:1.6; margin-top:.3rem}

/* --- Side rail (service category) --------------------------------------- */
.side-rail{display:flex; flex-direction:column; gap:var(--sp-3)}
@media(min-width:940px){ .side-rail{position:sticky; top:104px} }
.rail-card{
  border:1px solid var(--rule-soft); background:var(--white); border-radius:var(--r);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:.7rem;
}
.rail-card--navy{background:var(--navy); border-color:var(--navy)}
.rail-title{font-family:var(--f-display); font-size:1.18rem; font-weight:600; color:var(--ink); line-height:1.3}
.rail-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.rail-links a{
  display:block; padding:.55rem 0; font-size:.9rem; color:var(--body);
  border-bottom:1px solid var(--rule-soft);
}
.rail-links li:last-child a{border-bottom:0}
.rail-links a:hover{color:var(--wine); padding-left:.3rem; transition:padding .2s var(--ease), color .2s var(--ease)}

/* --- Jump bar (services index) ------------------------------------------ */
.jumpbar{
  background:var(--white); border-bottom:1px solid var(--rule);
  position:sticky; top:80px; z-index:40;
}
@media(max-width:1099px){ .jumpbar{top:0} }
.jumpbar-inner{
  display:flex; gap:.2rem .6rem; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.jumpbar-inner::-webkit-scrollbar{display:none}
/* On a wide screen every section fits if the row is allowed to wrap; a
   sideways scrollbar under the navigation reads as a broken layout. */
@media(min-width:1100px){
  .jumpbar-inner{flex-wrap:wrap; justify-content:center; overflow:visible}
  .jumpbar a{padding-block:.7rem}
}
.jumpbar a{
  flex:none; padding:.95rem .85rem; color:var(--muted);
  font-size:.73rem; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.jumpbar a:hover{color:var(--navy); border-bottom-color:var(--gold)}

/* --- Category block (services index) ------------------------------------ */
.cat-block{scroll-margin-top:150px}

/* The room each kind of work is actually done in, above its list of treatments.
   A wide crop: it sets the scene without pushing the prices off the screen. */
.cat-shot{display:block; border-radius:var(--r-lg); overflow:hidden;
          margin-bottom:var(--sp-3); aspect-ratio:3/1; background:var(--ivory-deep)}
.cat-shot img{width:100%; height:100%; object-fit:cover; object-position:center 55%;
              display:block; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.cat-block:hover .cat-shot img{transform:scale(1.03)}

@media (max-width:640px){ .cat-shot{aspect-ratio:16/9} }

/* A second phone number, offered under the first and never mistaken for it. */
a.alt-num{color:var(--muted)}
.alt-tag{display:inline-block; margin-left:.4rem; font-size:.66rem; letter-spacing:.06em;
         text-transform:uppercase; color:var(--muted); vertical-align:1px}
.cat-block-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-3); border-bottom:2px solid var(--navy);
}
.cat-block-head .lede{font-size:.98rem}

/* --- Service row extras -------------------------------------------------- */
.svc-row{scroll-margin-top:150px}
.svc-from{font-family:var(--f-body); font-size:.68rem; font-weight:400; color:var(--muted); letter-spacing:.06em}
.svc-book{
  flex:none; padding:.34rem .8rem; border:1px solid var(--rule);
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--navy); border-radius:2px;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.svc-book:hover{background:var(--gold); border-color:var(--gold); color:#221803}
@media(max-width:560px){
  .svc-row{grid-template-columns:1fr; gap:.5rem}
  .svc-meta{justify-content:flex-start}
}

/* --------------------------------------------- 10c. Booking form & confirm */

.booking-grid{display:grid; gap:var(--sp-5); grid-template-columns:1fr; align-items:start}
@media(min-width:960px){
  .booking-grid{grid-template-columns:minmax(0,1fr) 340px; gap:clamp(2.2rem,4vw,3.4rem)}
}
.booking-main{display:flex; flex-direction:column; gap:var(--sp-5); min-width:0}

/* --- Step block --------------------------------------------------------- */
.step-block{border:0; margin:0; padding:0; min-width:0}
.step-block legend{
  display:flex; align-items:center; gap:.8rem; width:100%;
  font-family:var(--f-display); font-size:clamp(1.45rem,2.6vw,1.85rem);
  font-weight:600; color:var(--ink); padding:0 0 var(--sp-3);
  margin-bottom:var(--sp-3); border-bottom:2px solid var(--navy);
}
.step-n{
  flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--navy); color:var(--white);
  display:grid; place-items:center;
  font-size:.9rem; font-weight:600; font-family:var(--f-body);
}

/* --- Mode tabs ---------------------------------------------------------- */
.mode-tabs{display:flex; gap:0; margin-bottom:var(--sp-4); border:1px solid var(--rule)}
.mode-tab{
  flex:1; padding:.85rem 1rem; background:var(--white); border:0; cursor:pointer;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--muted); transition:background .2s var(--ease), color .2s var(--ease);
}
.mode-tab + .mode-tab{border-left:1px solid var(--rule)}
.mode-tab:hover{color:var(--navy)}
.mode-tab.is-active{background:var(--navy); color:var(--white)}

.mode-panel{display:none}
.mode-panel.is-active{display:block}

/* --- Choice cards ------------------------------------------------------- */
.choice-grid{display:grid; gap:.7rem; grid-template-columns:1fr}
@media(min-width:560px){.choice-grid{grid-template-columns:1fr 1fr}}
.choice-grid--tight{gap:.5rem}

/* --- Treatment picker ---------------------------------------------------
   Nine closed sections, a search box, and the picks pinned above them — so
   the date field is a short scroll away rather than a long one. */
.picker-bar{display:flex; gap:.6rem; align-items:center; margin-bottom:var(--sp-3)}
.picker-search{flex:1}
.picker-clear{flex:none}
.picker-none{
  padding:.85rem 1rem; margin-bottom:var(--sp-3); background:var(--ivory-deep);
  border-radius:var(--r); font-size:.9rem; color:var(--body);
}

.picker-sec{
  border:1px solid var(--rule-soft); border-radius:var(--r);
  background:var(--white); margin-bottom:.6rem; overflow:hidden;
}
.picker-sec[open]{border-color:var(--rule); box-shadow:var(--shadow-sm)}

.picker-sum{
  display:flex; align-items:center; gap:.7rem; cursor:pointer;
  padding:.85rem 1rem; list-style:none;
  transition:background .18s var(--ease);
}
.picker-sum::-webkit-details-marker{display:none}
.picker-sum:hover{background:var(--ivory)}
.picker-sum::after{
  content:""; margin-left:auto; width:8px; height:8px; flex:none;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s var(--ease);
}
.picker-sec[open] .picker-sum::after{transform:rotate(225deg) translate(-2px,-2px)}

.picker-name{font-family:var(--f-display); font-size:1.12rem; font-weight:600; color:var(--navy)}
.picker-n{
  font-size:.66rem; letter-spacing:.12em; color:var(--muted);
  border:1px solid var(--rule-soft); border-radius:20px; padding:.1rem .5rem;
}
.picker-chosen{
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  color:#7A5410; background:var(--gold-pale); border-radius:20px; padding:.14rem .55rem;
}
.picker-sec .choice-grid{padding:0 1rem 1rem}

/* What is ticked, always in view. */
.picked{
  display:flex; align-items:flex-start; gap:.7rem; flex-wrap:wrap;
  padding:.8rem 1rem; margin-bottom:var(--sp-3);
  background:var(--ivory-deep); border-radius:var(--r);
}
.picked-k{
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep); padding-top:.34rem;
}
.picked-list{display:flex; flex-wrap:wrap; gap:.4rem; flex:1}
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.3rem .5rem .3rem .7rem; border:1px solid var(--rule);
  border-radius:20px; background:var(--white); cursor:pointer;
  font:inherit; font-size:.8rem; color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.chip:hover{border-color:var(--wine); background:#FCF6F7}
.chip-x{font-size:1rem; line-height:1; color:var(--muted)}
.chip:hover .chip-x{color:var(--wine)}

.step-next{display:flex; justify-content:flex-end; margin-top:var(--sp-4)}

.choice{border-radius:var(--r);
  position:relative; display:block; cursor:pointer}
.choice input{position:absolute; opacity:0; width:0; height:0}
.choice-body{
  display:flex; flex-direction:column; gap:.2rem;
  padding:.9rem 1rem .9rem 2.6rem; background:var(--white);
  border:1px solid var(--rule); border-radius:2px; height:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
/* The tick box, drawn rather than relying on a native control. */
.choice-body::before{
  content:""; position:absolute; left:.95rem; top:1.05rem;
  width:17px; height:17px; border:1.5px solid var(--rule);
  background:var(--white); transition:all .18s var(--ease);
}
.choice--pkg .choice-body::before{border-radius:50%}
.choice-body::after{
  content:""; position:absolute; left:1.28rem; top:1.32rem;
  width:9px; height:5px; border-left:1.8px solid var(--white); border-bottom:1.8px solid var(--white);
  transform:rotate(-45deg) scale(.4); opacity:0; transition:all .18s var(--ease);
}
.choice:hover .choice-body{border-color:var(--gold)}
.choice input:checked + .choice-body{
  border-color:var(--navy); background:#FCFAF5; box-shadow:inset 0 0 0 1px var(--navy);
}
.choice input:checked + .choice-body::before{background:var(--navy); border-color:var(--navy)}
.choice input:checked + .choice-body::after{opacity:1; transform:rotate(-45deg) scale(1)}
.choice input:focus-visible + .choice-body{outline:2px solid var(--gold); outline-offset:2px}

.choice--pkg.pkg--women input:checked + .choice-body,
.choice--pkg.pkg--bridal input:checked + .choice-body{box-shadow:inset 0 0 0 1px var(--wine); border-color:var(--wine)}
.choice--pkg.pkg--women input:checked + .choice-body::before,
.choice--pkg.pkg--bridal input:checked + .choice-body::before{background:var(--wine); border-color:var(--wine)}

.choice-name{font-size:.98rem; color:var(--ink); font-weight:400; line-height:1.35}
.choice-meta{font-size:.79rem; color:var(--muted); line-height:1.5}
.choice-price{display:flex; align-items:baseline; gap:.5rem; margin-top:.3rem}
.cp-offer{
  font-family:var(--f-display); font-size:1.24rem; font-weight:600; color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.choice--pkg.pkg--women .cp-offer,.choice--pkg.pkg--bridal .cp-offer{color:var(--wine)}
.cp-mrp{font-size:.8rem; color:var(--muted); text-decoration:line-through; font-variant-numeric:tabular-nums}

.svc-group{margin-bottom:var(--sp-4)}
.svc-group-head{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep);
  margin-bottom:.6rem; padding-bottom:.4rem; border-bottom:1px solid var(--rule-soft);
}

/* --- Price menu page ---------------------------------------------------- */
/* The whole catalogue on one page: each section is a card so the eye has a
   place to stop between ninety-odd priced lines. */
.menu-top{margin-bottom:var(--sp-5)}

.menu-block{
  background:var(--white); border:1px solid var(--rule-soft); border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,var(--sp-5)); margin-bottom:var(--sp-4);
  scroll-margin-top:150px;
}
.menu-block-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-3);
  flex-wrap:wrap; margin-bottom:var(--sp-4); padding-bottom:var(--sp-3);
  border-bottom:2px solid var(--navy);
}
.menu-block-head h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.menu-block .svc-group:last-child{margin-bottom:0}

.menu-pkgs{display:flex; flex-direction:column; gap:var(--sp-3)}
.menu-pkg{
  border:1px solid var(--rule-soft); border-left:3px solid var(--gold);
  border-radius:var(--r); padding:var(--sp-3) var(--sp-4); background:var(--white);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.menu-pkg:hover{box-shadow:var(--shadow-sm); transform:translateX(2px)}
.menu-pkg.pkg--men,.menu-pkg.pkg--couple{border-left-color:var(--navy)}
.menu-pkg.pkg--women,.menu-pkg.pkg--bridal{border-left-color:var(--wine)}
.menu-pkg-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap}
.menu-pkg-head h3{font-size:1.2rem}
.menu-pkg-price{text-align:right; display:flex; flex-direction:column; gap:.15rem}
.menu-pkg-save{font-size:.74rem; color:var(--muted); font-variant-numeric:tabular-nums}
.menu-pkg-items{font-size:.85rem; color:var(--body); margin-top:.5rem; line-height:1.7}

/* --- Slots -------------------------------------------------------------- */
.slot-grid{display:grid; gap:.45rem; grid-template-columns:repeat(auto-fill,minmax(102px,1fr))}
.slot{position:relative; display:block; cursor:pointer}
.slot input{position:absolute; opacity:0; width:0; height:0}
.slot span{
  display:block; padding:.62rem .3rem; text-align:center;
  background:var(--white); border:1px solid var(--rule); border-radius:2px;
  font-size:.82rem; color:var(--body); font-variant-numeric:tabular-nums;
  transition:all .18s var(--ease);
}
.slot:hover span{border-color:var(--gold); color:var(--ink)}
.slot input:checked + span{background:var(--navy); border-color:var(--navy); color:var(--white); font-weight:500}
.slot input:focus-visible + span{outline:2px solid var(--gold); outline-offset:2px}
.slot-empty{grid-column:1/-1; color:var(--muted); font-size:.9rem; padding:.7rem 0}

/* --- Summary rail ------------------------------------------------------- */
.booking-summary{min-width:0}
@media(min-width:960px){ .booking-summary{position:sticky; top:104px} }
.bs-card{
  background:var(--white); border:1px solid var(--rule);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2);
}
.bs-items{
  list-style:none; margin:.4rem 0 0; padding:0;
  display:flex; flex-direction:column; max-height:290px; overflow-y:auto;
}
.bs-items li{
  display:flex; justify-content:space-between; gap:.8rem; align-items:baseline;
  padding:.5rem 0; border-bottom:1px solid var(--rule-soft); font-size:.89rem;
}
.bs-items li:last-child{border-bottom:0}
.bs-empty{color:var(--muted); font-style:italic}
.bs-amt{flex:none; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:500}
.bs-amt.is-ask{font-weight:400; font-style:italic; color:var(--muted); font-size:.82rem}

.bs-totals{margin:.4rem 0 0; display:flex; flex-direction:column; border-top:1px solid var(--rule)}
.bs-totals > div{display:flex; justify-content:space-between; gap:.8rem; padding:.55rem 0; align-items:baseline}
.bs-totals dt{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.bs-totals dd{
  margin:0; font-family:var(--f-display); font-size:1.15rem; font-weight:600;
  color:var(--navy); text-align:right; font-variant-numeric:tabular-nums;
}
.bs-note{font-size:.78rem; color:var(--muted); line-height:1.55}
.bs-alt{font-size:.8rem; color:var(--muted); line-height:1.6; text-align:center}

/* --- Confirmation ------------------------------------------------------- */
.confirm-card{
  background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--gold);
  padding:clamp(1.7rem,4vw,3rem); display:flex; flex-direction:column; gap:var(--sp-3);
}
.confirm-tick{
  width:56px; height:56px; border-radius:50%; background:var(--ok); color:var(--white);
  display:grid; place-items:center; margin-bottom:.4rem;
}
.confirm-tick svg{width:28px; height:28px}
.confirm-card h1{font-size:clamp(1.9rem,4vw,2.7rem)}

.confirm-facts{
  display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft);
  grid-template-columns:1fr; margin:var(--sp-2) 0 0;
}
@media(min-width:620px){ .confirm-facts{grid-template-columns:1fr 1fr} }
.confirm-facts > div{background:var(--white); padding:.85rem 1.05rem}
.confirm-facts dt{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.confirm-facts dd{margin:.15rem 0 0; color:var(--ink); font-size:.98rem; font-weight:500}

.pill-status{
  display:inline-block; padding:.2rem .55rem; border-radius:2px;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
}
.pill-status--new{background:var(--gold-pale); color:#6B4E12}
.pill-status--confirmed{background:#E4F0E9; color:var(--ok)}
.pill-status--completed{background:#E7EBF3; color:var(--navy)}
.pill-status--cancelled,.pill-status--no_show{background:#F7E4E8; color:var(--wine)}

.confirm-items h2,.confirm-where h2{
  font-family:var(--f-body); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.6rem;
}
.confirm-items{margin-top:var(--sp-3)}
.confirm-items ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-soft)}
.confirm-items li{
  display:flex; justify-content:space-between; gap:.9rem; align-items:baseline;
  padding:.6rem 0; border-bottom:1px solid var(--rule-soft); font-size:.94rem;
}
.confirm-total{
  display:flex; justify-content:space-between; gap:.9rem; align-items:baseline;
  padding-top:.8rem; font-size:.94rem;
}
.confirm-total strong{font-family:var(--f-display); font-size:1.45rem; color:var(--navy)}
.confirm-where{margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--rule-soft)}
.confirm-where p{margin-bottom:.7rem; line-height:1.7}
.confirm-print{font-size:.8rem; margin-top:var(--sp-2)}

/* --------------------------------------------------------- 11. Utilities */
.text-center{text-align:center}
.mt-0{margin-top:0} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)}
.mb-0{margin-bottom:0} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}
.muted{color:var(--muted)}
.gold{color:var(--gold)}
.nums{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.hide{display:none !important}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:.6rem; top:-3rem; z-index:100;
  background:var(--navy); color:var(--white); padding:.6rem 1rem; font-size:.82rem;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:.6rem; color:var(--white)}

.prose{max-width:var(--measure); display:flex; flex-direction:column; gap:var(--sp-3)}
.prose p{line-height:1.75}

/* Long-form copy — policy pages, a blog post. Headings step down from the
   display sizes, which are built for a hero and shout inside a paragraph run. */
.prose h2{font-size:clamp(1.3rem,2.1vw,1.62rem); line-height:1.25; margin-top:var(--sp-3)}
.prose h3{font-size:clamp(1.08rem,1.6vw,1.24rem); line-height:1.3; margin-top:var(--sp-2)}
.prose > :first-child{margin-top:0}
.prose h2 + p,.prose h3 + p{margin-top:calc(var(--sp-3) * -.35)}
.prose ul,.prose ol{margin:0; padding-left:1.35rem; display:flex; flex-direction:column; gap:.5rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{line-height:1.7; padding-left:.2rem}
.prose li::marker{color:var(--gold)}
.prose a{color:var(--navy); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold)}
.prose a:hover{color:var(--wine)}
.prose em{font-style:italic}

.table-wrap{overflow-x:auto; border:1px solid var(--rule-soft); background:var(--white); border-radius:var(--r)}
table.data{border-collapse:collapse; width:100%; min-width:560px; font-size:.9rem}
table.data th,table.data td{padding:.72rem .9rem; text-align:left; border-bottom:1px solid var(--rule-soft)}
table.data thead th{
  background:var(--ivory-deep); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500; color:var(--muted); white-space:nowrap;
}
table.data tbody tr:last-child td{border-bottom:0}
table.data .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* Reveal on scroll — off entirely for reduced motion. */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

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

@media print{
  .site-header,.topbar,.float-actions,.site-footer,.nav-toggle,.cta-band{display:none !important}
  body{background:#fff; color:#000; font-size:12pt}
}

/* ------------------------------------------------------------- highlights */
/* Four facts, straight under the hero. The figures are counted from the
   catalogue, so they are worth setting like figures — the numeral does the
   talking and the sentence underneath explains it. */

.highlights-band{background:var(--ivory); border-bottom:1px solid var(--rule)}

.highlights{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3);
            list-style:none; margin:0; padding:0}

.highlight{display:flex}

.highlight a{
  display:flex; flex-direction:column; width:100%;
  padding:var(--sp-4) var(--sp-3);
  text-decoration:none; color:inherit;
  background:var(--white);
  border:1px solid var(--rule);
  border-top:3px solid var(--gold-pale);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             border-top-color .25s var(--ease);
}
.highlight a:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-top-color:var(--gold);
}
.highlight a:active{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.highlight a:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

.highlight-figure{display:block; font-family:var(--f-display);
                  font-size:clamp(2.1rem, 3.4vw, 2.9rem); line-height:1;
                  color:var(--gold); letter-spacing:-.01em}

.highlight-unit{display:block; margin-top:.35rem; font-size:.68rem; letter-spacing:.22em;
                text-transform:uppercase; color:var(--muted)}

.highlight-title{margin:var(--sp-2) 0 .35rem; font-size:1rem; line-height:1.3;
                 color:var(--navy)}

.highlight-text{margin:0; font-size:.87rem; line-height:1.55; color:var(--muted)}

/* Pushed to the bottom so the links line up across four cards of unequal text. */
.highlight-cta{display:inline-block; margin-top:auto; padding-top:var(--sp-3);
               font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
               color:var(--gold-deep)}
.highlight-cta::after{content:"→"; margin-left:.4rem; display:inline-block; transition:transform .25s var(--ease)}
.highlight a:hover .highlight-cta::after{transform:translateX(.25rem)}

@media (max-width:900px){
  .highlights{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:540px){
  .highlights{grid-template-columns:1fr; gap:var(--sp-2)}
  .highlight a{padding:var(--sp-3)}
}

@media (prefers-reduced-motion:reduce){
  .highlight a, .highlight-cta::after{transition:none}
  .highlight a:hover{transform:none}
}