/* ==============================================================
   Suyapa's Hair Salon & Spa
   Design system
   ============================================================== */

:root{
  /* Surface */
  --white:#FFFFFF;
  --soft-white:#FCFCFA;
  --cream:#F7F5F0;

  /* Accents */
  --coral:#F47C6C;
  --coral-dark:#E0654F;
  --coral-soft:#FBE8E4;
  --lavender:#AEA0C7;
  --lavender-deep:#7C6C99;
  --lavender-pale:#EFEBF5;
  --sage:#94A58C;
  --sage-deep:#5F7256;
  --sage-pale:#E9EFE6;

  /* Type */
  --ink:#262626;
  --gray:#717171;
  --gray-light:#9B9B98;

  /* Lines */
  --border:#E7E7E4;
  --border-strong:#D8D8D3;

  /* Radius */
  --r-hero:28px;
  --r-card:22px;
  --r-input:14px;
  --r-pill:999px;
  --r-tile:16px;

  /* Shadow */
  --shadow:0 8px 30px rgba(0,0,0,.04);
  --shadow-lift:0 12px 40px rgba(0,0,0,.07);

  /* Rhythm */
  --wrap:1200px;
  --gut:24px;

  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box;}

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

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

h1,h2,h3,h4{margin:0 0 .4em;line-height:1.15;letter-spacing:-.02em;font-weight:700;}
h1{font-size:clamp(34px,5vw,54px);}
h2{font-size:clamp(26px,3.4vw,40px);}
h3{font-size:clamp(19px,2vw,24px);}
p{margin:0 0 1em;}

.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;}
.accent-lav{color:var(--lavender-deep);}
.muted{color:var(--gray);}
.small{font-size:14px;}
.tiny{font-size:12.5px;}
.center{text-align:center;}
.nowrap{white-space:nowrap;}

.ico{flex:none;vertical-align:middle;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--gut);}

.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.bg-soft{background:var(--soft-white);}
.bg-cream{background:var(--cream);}
.bg-sage{background:var(--sage-pale);}
.bg-lav{background:var(--lavender-pale);}

.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:16px;top:16px;z-index:999;background:#fff;padding:12px 18px;border-radius:var(--r-pill);border:1px solid var(--border);}

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

/* ==============================================================
   PILLS AND BUTTONS
   ============================================================== */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--cream);color:var(--gray);
}
.pill-coral{background:var(--coral-soft);color:var(--coral-dark);}
.pill-lavender{background:var(--lavender-pale);color:var(--lavender-deep);}
.pill-sage{background:var(--sage-pale);color:var(--sage-deep);}
.pill-sage-deep{background:var(--sage-pale);color:var(--sage-deep);}
.pill-coral-soft{background:var(--coral-soft);color:var(--coral-dark);}
.pill-gray{background:#F1F1EE;color:var(--gray);}
.pill-white{background:#fff;border:1px solid var(--border);color:var(--gray);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .12s ease;
  text-align:center;
}
.btn:active{transform:scale(.985);}
.btn-primary{background:var(--coral);color:#fff;}
.btn-primary:hover{background:var(--coral-dark);}
.btn-primary[disabled]{background:#EDEDEA;color:var(--gray-light);cursor:not-allowed;}
.btn-sage{background:var(--sage-deep);color:#fff;}
.btn-sage:hover{background:#4E5F47;}
.btn-outline{background:#fff;border-color:var(--border-strong);color:var(--ink);}
.btn-outline:hover{border-color:var(--ink);}
.btn-ghost{background:transparent;color:var(--ink);padding-left:0;padding-right:0;}
.btn-ghost:hover{color:var(--coral);}
.btn-block{display:flex;width:100%;}
.btn-sm{padding:9px 18px;font-size:14px;}
.btn-lg{padding:16px 32px;font-size:16px;}

.link-arrow{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:15px;color:var(--ink);
  transition:gap .16s ease,color .16s ease;
}
.link-arrow:hover{gap:11px;color:var(--coral);}

/* ==============================================================
   HEADER
   ============================================================== */
.site-header{
  position:sticky;top:0;z-index:200;
  padding:14px 0;
  /* Nothing behind the pill at the top of the page, so it floats
     directly on the hero photograph. The backdrop only appears once
     the page scrolls, where it stops body text running under the bar
     and showing through the gaps at either end. */
  background:transparent;
  transition:background .25s ease, backdrop-filter .25s ease;
}
.site-header.is-stuck{
  background:rgba(252,252,250,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* The bar itself floats as a rounded pill inside the header. */
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:44px;
  padding:9px 9px 9px 26px;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
}

.logo{display:flex;flex-direction:column;line-height:1.05;}
.logo-name{font-size:21px;font-weight:700;letter-spacing:.03em;}
.logo-sub{font-size:9.5px;letter-spacing:.22em;color:var(--gray);text-transform:uppercase;margin-top:3px;}

/* ---- Navigation: icon above label, one accent per item ---- */
.nav{display:flex;align-items:stretch;gap:2px;}

.nav-link{
  /* --item is the colour this one link turns on hover. */
  --item:var(--coral);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:9px 15px;border-radius:24px;
  font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.15;
  background:none;border:0;cursor:pointer;text-align:center;
  transition:background .16s ease,color .16s ease;
}
.nav-link[data-accent="coral"]{--item:#F1A18F;}
.nav-link[data-accent="lavender"]{--item:#C9B7E6;}
.nav-link[data-accent="sage"]{--item:#A9BFAF;}
.nav-link[data-accent="charcoal"]{--item:#222222;}

.nav-ico{
  display:flex;align-items:center;justify-content:center;
  color:var(--gray);transition:color .16s ease,transform .16s ease;
}
.nav-text{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}

.nav-link:hover,
.nav-link[aria-expanded="true"]{
  /* The tint is the item colour at low opacity, so a pale sage and a
     near black charcoal both land at a similar visual weight. */
  background:color-mix(in srgb, var(--item) 16%, transparent);
  color:var(--ink);
}
.nav-link:hover .nav-ico,
.nav-link[aria-expanded="true"] .nav-ico{
  color:var(--item);
  transform:translateY(-1px);
}

/* The current page keeps a permanent soft pill, like Mango's Home. */
.nav-link.is-active{
  background:var(--sand, #F2EDE7);
  color:var(--ink);font-weight:600;
}
.nav-link.is-active .nav-ico{color:var(--item);}

.nav-link .chev{transition:transform .2s ease;}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg);}

.header-actions{display:flex;align-items:center;gap:10px;}
.header-actions .btn{padding:15px 26px;}
.menu-toggle{display:none;background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:10px 14px;cursor:pointer;align-items:center;gap:8px;}

/* ==============================================================
   MEGA MENU
   ============================================================== */
.mega{
  position:absolute;left:0;right:0;top:calc(100% + 10px);
  z-index:210;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  pointer-events:none;
}
.mega.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.mega-panel{
  background:#fff;border:1px solid var(--border);
  border-radius:26px;box-shadow:var(--shadow);
  padding:34px;
  /* Column count follows the number of categories, so adding a fifth
     in the admin does not break the layout. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:30px;
}
.mega-col{min-width:0;align-self:start;}
/* The feature tile was stretching the whole panel to its own height,
   leaving a lot of empty space under the shorter columns. */
.mega-col:last-child{display:flex;flex-direction:column;}
.mega-feature{margin-top:auto;}
.mega-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;}
.mega-icon{
  width:44px;height:44px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.mega-icon.coral{background:var(--coral-soft);color:var(--coral-dark);}
.mega-icon.sage{background:var(--sage-pale);color:var(--sage-deep);}
.mega-icon.lavender{background:var(--lavender-pale);color:var(--lavender-deep);}
.mega-icon.neutral{background:var(--cream);color:var(--gray);}
.mega-title{font-size:15px;font-weight:700;letter-spacing:.01em;margin:2px 0 3px;}
.mega-desc{font-size:13px;color:var(--gray);line-height:1.45;}
.mega-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
.mega-links a{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:11px;
  font-size:14.5px;color:var(--ink);
  transition:background .14s ease,color .14s ease;
}
.mega-links a:hover{background:var(--soft-white);color:var(--coral);}
.mega-links .mini-ico{color:var(--gray-light);}
.mega-links a:hover .mini-ico{color:var(--coral);}

.mega-feature{
  border-radius:20px;overflow:hidden;position:relative;
  background:var(--cream);min-height:158px;display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--border);
}
.mega-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mega-feature-body{
  position:relative;padding:20px;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));
  color:#fff;
}
.mega-feature-body .t{font-size:16px;font-weight:700;margin-bottom:2px;}
.mega-feature-body .d{font-size:12.5px;opacity:.9;margin-bottom:10px;}
.mega-feature .btn{background:#fff;color:var(--ink);}

/* ==============================================================
   MOBILE MENU
   ============================================================== */
.mobile-menu{
  position:fixed;inset:0;z-index:400;background:#fff;
  transform:translateX(100%);transition:transform .26s ease;
  display:flex;flex-direction:column;
}
.mobile-menu.is-open{transform:translateX(0);}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding:20px var(--gut);border-bottom:1px solid var(--border);}
.mobile-menu-body{flex:1;overflow-y:auto;padding:12px var(--gut) 40px;}
.m-item{border-bottom:1px solid var(--border);}
.m-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 4px;font-size:18px;font-weight:600;width:100%;background:none;border:0;text-align:left;cursor:pointer;color:var(--ink);}
.m-panel{display:none;padding:0 4px 18px;}
.m-panel.is-open{display:block;}
.m-group{margin-bottom:18px;}
.m-group-head{display:flex;align-items:center;gap:11px;margin-bottom:8px;}
.m-group-head .mega-icon{width:38px;height:38px;border-radius:12px;}
.m-group-head span{font-size:14px;font-weight:700;}
.m-sub{display:flex;flex-direction:column;}
.m-sub a{padding:12px 0 12px 49px;font-size:15.5px;color:var(--gray);border-top:1px solid #F4F4F1;}
.mobile-menu-foot{padding:20px var(--gut) calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--border);}

/* ==============================================================
   HERO
   ============================================================== */
.hero{background:var(--soft-white);padding:52px 0 72px;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start;}

.hero-eyebrow{margin-bottom:22px;}
.hero h1{margin-bottom:20px;letter-spacing:-.03em;}
.hero-lede{font-size:18px;color:var(--gray);max-width:44ch;margin-bottom:26px;}
.hero-meta{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;}
.hero-meta-row{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--ink);}
.hero-meta-row .ico{color:var(--gray);margin-top:2px;}
.hero-meta-row span{color:var(--gray);}
.hero-meta-row strong{font-weight:600;color:var(--ink);display:block;}

.hero-media{position:relative;margin-top:34px;}
.hero-media img{width:100%;height:clamp(260px,34vw,420px);object-fit:cover;border-radius:var(--r-hero);}
.hero-blob{position:absolute;border-radius:50%;z-index:-1;}
.hero-blob.b1{width:170px;height:170px;background:var(--sage-pale);left:-46px;bottom:-40px;}
.hero-blob.b2{width:110px;height:110px;background:var(--lavender-pale);right:-30px;top:-32px;}

/* ==============================================================
   BOOKING MODULE
   ============================================================== */
.booking{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r-hero);box-shadow:var(--shadow);
  padding:28px;position:relative;
}
.booking-head{margin-bottom:20px;}
.booking-head h2{font-size:24px;margin-bottom:4px;}
.booking-head p{color:var(--gray);font-size:14.5px;margin:0;}

.steps{display:flex;gap:8px;margin-bottom:22px;}
.step{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 6px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;
  background:var(--cream);color:var(--ink);
  transition:background .18s ease,color .18s ease;
}
.step .n{
  width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  background:rgba(0,0,0,.07);
}
.step.is-active{background:var(--coral);color:#fff;}
.step.is-active .n{background:rgba(255,255,255,.28);}
.step.is-done{background:var(--sage-pale);color:var(--sage-deep);}
.step.is-done .n{background:rgba(95,114,86,.16);}

.booking-panel{display:none;}
.booking-panel.is-active{display:block;animation:fade .22s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.panel-label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);margin-bottom:14px;}

/* Calendar --------------------------------------------------- */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.cal-month{font-size:17px;font-weight:700;}
.cal-nav{display:flex;gap:6px;}
.cal-nav button{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:border-color .15s ease,background .15s ease;
}
.cal-nav button:hover:not(:disabled){border-color:var(--ink);}
.cal-nav button:disabled{opacity:.35;cursor:not-allowed;}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-dow{
  text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;
  color:var(--gray-light);text-transform:uppercase;padding-bottom:8px;
}
.cal-day{
  aspect-ratio:1;min-height:40px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;
  font-size:15px;font-weight:500;color:var(--ink);
  border-radius:50%;
  transition:background .14s ease,color .14s ease;
  position:relative;
}
.cal-day:hover:not(:disabled){background:var(--cream);}
.cal-day:disabled{color:#CFCFCB;cursor:default;}
.cal-day.is-today{box-shadow:inset 0 0 0 1.5px var(--sage);}
.cal-day.is-selected{background:var(--coral);color:#fff;font-weight:700;}
.cal-day.is-selected:hover{background:var(--coral);}
.cal-day.is-empty{visibility:hidden;}

.cal-legend{display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--gray);}
.cal-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;}
.cal-legend .lg-open{background:var(--sage);}
.cal-legend .lg-sel{background:var(--coral);}

/* Times ------------------------------------------------------ */
.times{margin-top:22px;}
.times-grid{display:flex;flex-wrap:wrap;gap:8px;}
.time-btn{
  padding:10px 17px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:#fff;
  font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .14s ease,background .14s ease,color .14s ease;
}
.time-btn:hover{border-color:var(--ink);}
.time-btn.is-selected{background:var(--coral);border-color:var(--coral);color:#fff;}

.empty-note{
  background:var(--cream);border-radius:var(--r-input);
  padding:16px 18px;font-size:14px;color:var(--gray);
}

/* Service rows ------------------------------------------------ */
.cat-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;}
.cat-pill{
  padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--border);
  background:#fff;font-size:13.5px;font-weight:600;color:var(--gray);cursor:pointer;
  transition:all .14s ease;
}
.cat-pill:hover{color:var(--ink);border-color:var(--border-strong);}
.cat-pill.is-active{border-color:transparent;color:var(--ink);}
.cat-pill.is-active[data-accent="neutral"]{background:var(--ink);color:#fff;}
.cat-pill.is-active[data-accent="coral"]{background:var(--coral-soft);color:var(--coral-dark);}
.cat-pill.is-active[data-accent="lavender"]{background:var(--lavender-pale);color:var(--lavender-deep);}
.cat-pill.is-active[data-accent="sage"]{background:var(--sage-pale);color:var(--sage-deep);}

.svc-list{display:flex;flex-direction:column;max-height:340px;overflow-y:auto;margin:0 -4px;padding:0 4px;}
.svc-row{
  display:flex;gap:13px;align-items:flex-start;
  padding:15px 4px;border-bottom:1px solid var(--border);
}
.svc-row:last-child{border-bottom:0;}
.svc-ico{
  width:38px;height:38px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.svc-ico.coral{background:var(--coral-soft);color:var(--coral-dark);}
.svc-ico.lavender{background:var(--lavender-pale);color:var(--lavender-deep);}
.svc-ico.sage{background:var(--sage-pale);color:var(--sage-deep);}
.svc-ico.neutral{background:var(--cream);color:var(--gray);}
.svc-body{flex:1;min-width:0;}
.svc-name{font-size:15px;font-weight:600;margin-bottom:2px;}
.svc-desc{font-size:13px;color:var(--gray);line-height:1.45;margin-bottom:6px;}
.svc-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--gray);}
.svc-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--gray-light);}
.svc-price{font-weight:600;color:var(--ink);}
.svc-add{
  flex:none;align-self:center;
  padding:8px 15px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);background:#fff;
  font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:all .14s ease;white-space:nowrap;
}
.svc-add:hover{border-color:var(--ink);}
.svc-row.is-added .svc-add{background:var(--sage-pale);border-color:transparent;color:var(--sage-deep);}

/* Summary ---------------------------------------------------- */
.summary{
  margin-top:18px;padding:16px 18px;
  background:var(--soft-white);border:1px solid var(--border);
  border-radius:var(--r-input);
}
.summary-when{font-size:14px;font-weight:600;margin-bottom:3px;}
.summary-what{font-size:13.5px;color:var(--gray);}
.summary-line{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:5px 0;}
.summary-line.total{font-weight:700;font-size:16px;border-top:1px solid var(--border);margin-top:8px;padding-top:12px;}
.summary-line .muted{color:var(--gray);}

/* Forms ------------------------------------------------------ */
.field{margin-bottom:15px;}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;}
.field .hint{font-size:12.5px;color:var(--gray);margin-top:5px;}
.input,.select,.textarea{
  width:100%;padding:14px 16px;
  border:1px solid var(--border-strong);border-radius:var(--r-input);
  font-family:inherit;font-size:15.5px;color:var(--ink);background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(244,124,108,.13);
}
.textarea{min-height:90px;resize:vertical;}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717171' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field-error{color:var(--coral-dark);font-size:13px;margin-top:5px;}
.input.has-error{border-color:var(--coral);}

.check{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;border:1px solid var(--border);border-radius:var(--r-input);
  cursor:pointer;transition:border-color .14s ease,background .14s ease;
  margin-bottom:9px;
}
.check:hover{border-color:var(--border-strong);}
.check input{margin-top:2px;width:18px;height:18px;accent-color:var(--coral);flex:none;}
.check .t{font-size:14.5px;font-weight:600;}
.check .d{font-size:12.5px;color:var(--gray);}
.check.is-on{border-color:var(--sage);background:var(--sage-pale);}

.pay-options{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;}

/* Confirmation ------------------------------------------------ */
.confirm{text-align:center;padding:14px 0;}
.confirm-mark{
  width:74px;height:74px;border-radius:50%;margin:0 auto 20px;
  background:var(--sage-pale);color:var(--sage-deep);
  display:flex;align-items:center;justify-content:center;
  animation:pop .38s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes pop{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}
.confirm h2{font-size:28px;margin-bottom:6px;}
.confirm .when{font-size:17px;font-weight:600;margin-bottom:2px;}
.confirm .what{color:var(--gray);margin-bottom:20px;}
.ref-box{
  background:var(--cream);border-radius:var(--r-input);
  padding:15px;margin-bottom:20px;
}
.ref-box .l{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:3px;}
.ref-box .v{font-size:22px;font-weight:700;letter-spacing:.05em;}
.confirm-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;}

.hold-timer{
  display:flex;align-items:center;gap:8px;justify-content:center;
  font-size:13px;color:var(--sage-deep);background:var(--sage-pale);
  padding:9px 14px;border-radius:var(--r-pill);margin-bottom:16px;
}
.hold-timer.is-low{background:var(--coral-soft);color:var(--coral-dark);}

.booking-error{
  background:var(--coral-soft);color:var(--coral-dark);
  padding:13px 16px;border-radius:var(--r-input);
  font-size:14px;margin-bottom:14px;
}

.loading{display:flex;align-items:center;gap:10px;justify-content:center;padding:28px;color:var(--gray);font-size:14px;}
.spinner{
  width:17px;height:17px;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--coral);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.demo-note{font-size:12px;color:var(--gray);margin-top:12px;line-height:1.5;}

/* ==============================================================
   SECTION HEADS
   ============================================================== */
.sec-head{text-align:center;max-width:640px;margin:0 auto 44px;}
.sec-head .pill{margin-bottom:16px;}
.sec-head p{color:var(--gray);font-size:17px;margin:0;}

/* Service cards ---------------------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr);}

.svc-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r-card);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.svc-card-img{aspect-ratio:4/3;background:var(--cream);overflow:hidden;}
.svc-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.svc-card:hover .svc-card-img img{transform:scale(1.04);}
.svc-card-body{padding:20px;display:flex;flex-direction:column;flex:1;}
.svc-card-body .pill{margin-bottom:11px;align-self:flex-start;}
.svc-card-body h3{font-size:19px;margin-bottom:7px;}
.svc-card-body p{font-size:14.5px;color:var(--gray);flex:1;margin-bottom:14px;}

/* Split sections ---------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.split-media img{width:100%;height:clamp(280px,32vw,430px);object-fit:cover;border-radius:var(--r-hero);}
.split-body .pill{margin-bottom:16px;}
.split-body p{color:var(--gray);font-size:17px;}
.split-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px;}
.split.reverse .split-media{order:2;}

/* Location ---------------------------------------------------- */
.locate{
  display:grid;grid-template-columns:1fr 1.15fr;gap:0;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r-hero);overflow:hidden;
}
.locate-body{padding:44px;}
.locate-body h2{font-size:30px;margin-bottom:22px;}
.locate-rows{display:flex;flex-direction:column;gap:16px;margin-bottom:26px;}
.locate-row{display:flex;gap:13px;align-items:flex-start;}
.locate-row .ico{color:var(--gray);margin-top:3px;}
.locate-row strong{display:block;font-weight:600;}
.locate-row span{color:var(--gray);font-size:14.5px;}
.locate-map{min-height:360px;background:var(--cream);}
.locate-map iframe{width:100%;height:100%;border:0;display:block;}
.locate-actions{display:flex;flex-wrap:wrap;gap:10px;}

/* FAQ --------------------------------------------------------- */
.faq{max-width:780px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-size:17px;font-weight:600;color:var(--ink);
}
.faq-icon{
  width:30px;height:30px;border-radius:10px;flex:none;
  background:var(--cream);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:background .16s ease,transform .2s ease;
}
.faq-q[aria-expanded="true"] .faq-icon{background:var(--coral-soft);color:var(--coral-dark);}
.faq-a{display:none;padding:0 50px 24px 0;color:var(--gray);font-size:15.5px;}
.faq-a.is-open{display:block;}

/* ==============================================================
   FOOTER
   ============================================================== */
/* ==============================================================
   FOOTER
   Centred brand block, a thin rule, then three columns. An optional
   photograph bleeds up from the bottom behind a veil strong enough
   that the hours and phone stay readable, because those are the two
   things people actually come here for.
   ============================================================== */
.site-footer{
  position:relative;
  background:var(--cream);
  padding:66px 0 30px;
  margin-top:0;
}

.site-footer.has-photo .footer-bg{
  position:absolute;left:0;right:0;bottom:0;height:62%;
  background-image:var(--footer-photo);
  background-size:cover;background-position:center 55%;
  filter:saturate(.86);
}
.site-footer.has-photo .footer-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    var(--cream) 0%,
    rgba(247,245,240,.97) 34%,
    rgba(247,245,240,.90) 62%,
    rgba(247,245,240,.82) 100%);
}
.site-footer .wrap{position:relative;z-index:2;}

/* Brand block -------------------------------------------------- */
.footer-top{text-align:center;max-width:640px;margin:0 auto 34px;}
.footer-logo{display:inline-flex;align-items:center;margin-bottom:16px;}
.footer-logo .logo-name{font-size:22px;}
.footer-line{color:var(--gray);font-size:15.5px;margin:0 auto 18px;max-width:520px;}

.footer-contact{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.footer-contact a{color:var(--ink);}
.footer-contact a:hover{color:var(--coral-dark);}
.footer-note{font-size:13.5px;color:var(--gray);margin-top:16px;}

.footer-rule{
  height:1px;margin:0 0 38px;
  background:linear-gradient(90deg,
    transparent 0%, var(--sage) 18%, var(--sage) 82%, transparent 100%);
  opacity:.85;
}

/* Columns ------------------------------------------------------ */
.footer-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  max-width:900px;margin:0 auto 40px;
}
.footer-col h4{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);font-weight:700;margin-bottom:16px;
}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;}
.footer-col a{color:var(--ink);font-size:14.5px;}
.footer-col a:hover{color:var(--coral-dark);}

.footer-hours{display:flex;flex-direction:column;gap:9px;font-size:14px;}
.footer-hours .h{display:flex;justify-content:space-between;gap:14px;color:var(--ink);}
.footer-hours .h span:first-child{color:var(--gray);}

/* Bottom bar --------------------------------------------------- */
.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding-top:22px;border-top:1px solid var(--border);
  font-size:13px;color:var(--gray);
}
.footer-bottom nav{display:flex;gap:20px;}
.footer-bottom a{color:var(--gray);}
.footer-bottom a:hover{color:var(--ink);}
.footer-bottom .tiny{font-size:12.5px;}

@media (max-width:820px){
  .site-footer{padding:44px 0 26px;}
  .footer-grid{grid-template-columns:1fr;gap:30px;text-align:center;max-width:340px;}
  .footer-col ul{align-items:center;}
  .footer-hours .h{justify-content:center;gap:10px;}
  .footer-contact{flex-direction:column;gap:7px;}
  .footer-bottom{flex-direction:column;text-align:center;gap:10px;}
  .footer-bottom nav{justify-content:center;}
  .site-footer.has-photo .footer-bg{height:48%;}
}

/* ==============================================================
   INNER PAGES
   ============================================================== */
.page-head{background:var(--soft-white);padding:64px 0 52px;border-bottom:1px solid var(--border);}
.page-head .pill{margin-bottom:16px;}
.page-head h1{font-size:clamp(32px,4.4vw,46px);margin-bottom:12px;}
.page-head p{color:var(--gray);font-size:18px;max-width:62ch;margin:0;}

.cat-block{margin-bottom:56px;}
.cat-block-head{display:flex;gap:14px;align-items:center;margin-bottom:24px;}

.svc-detail{display:grid;grid-template-columns:1.3fr 1fr;gap:54px;align-items:start;}
.svc-detail-media img{width:100%;border-radius:var(--r-hero);}
.book-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  padding:26px;position:sticky;top:104px;
}
.book-card .price{font-size:28px;font-weight:700;margin-bottom:3px;}
.book-card .dur{color:var(--gray);font-size:14.5px;margin-bottom:20px;}
.book-card ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:11px;}
.book-card li{display:flex;gap:10px;font-size:14.5px;color:var(--gray);align-items:flex-start;}
.book-card li .ico{color:var(--sage-deep);margin-top:3px;}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.gallery-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-card);}

.lookup-card{
  max-width:520px;margin:0 auto;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r-hero);padding:36px;box-shadow:var(--shadow);
}

.appt-card{
  max-width:640px;margin:0 auto;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r-hero);padding:36px;
}
.appt-rows{display:flex;flex-direction:column;}
.appt-row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--border);font-size:15px;}
.appt-row:last-child{border-bottom:0;}
.appt-row .k{color:var(--gray);}
.appt-row .v{font-weight:600;text-align:right;}

.prose{max-width:720px;}
.prose p{font-size:16.5px;color:#3a3a3a;line-height:1.75;}
.prose h2{font-size:26px;margin-top:38px;}

.flash{padding:14px 18px;border-radius:var(--r-input);font-size:14.5px;margin-bottom:18px;}
.flash-ok{background:var(--sage-pale);color:var(--sage-deep);}
.flash-error{background:var(--coral-soft);color:var(--coral-dark);}
.flash-info{background:var(--lavender-pale);color:var(--lavender-deep);}

/* Mobile sticky CTA -------------------------------------------- */
.mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:180;
  background:#fff;border-top:1px solid var(--border);
  padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));
}

/* ==============================================================
   RESPONSIVE
   ============================================================== */
@media (max-width:1080px){
  .mega-panel{grid-template-columns:repeat(2,1fr);gap:26px;}
  .mega-feature{grid-column:span 2;min-height:170px;}
  .hero-grid{gap:36px;}
  .card-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:960px){

  .hero-grid{grid-template-columns:1fr;gap:30px;}
  .hero{padding:32px 0 56px;}
  .hero h1{font-size:32px;}
  .hero-lede{font-size:16px;margin-bottom:20px;}
  .hero-media{order:3;margin-top:8px;}
  .hero-copy{order:1;}
  .hero-booking{order:2;}
  .hero-media img{height:230px;}
  .hero-blob{display:none;}
  .hero-meta{margin-bottom:18px;}
  .hero-cta-desktop{display:none;}

  .split{grid-template-columns:1fr;gap:28px;}
  .split.reverse .split-media{order:0;}
  .locate{grid-template-columns:1fr;}
  .locate-body{padding:30px;}
  .locate-map{min-height:280px;}
  .svc-detail{grid-template-columns:1fr;gap:30px;}
  .book-card{position:static;}
  .section{padding:60px 0;}
}

@media (max-width:640px){
  :root{--gut:18px;}
  .booking{padding:20px;border-radius:24px;}
  .booking-head h2{font-size:21px;}
  .step{font-size:12px;padding:8px 4px;}
  .step .n{display:none;}
  .card-grid,.card-grid.cols-3,.card-grid.cols-2{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .field-row{grid-template-columns:1fr;}
  .svc-list{max-height:none;}
  .cal-day{min-height:38px;font-size:14.5px;}
  .lookup-card,.appt-card{padding:24px;border-radius:22px;}
  .sec-head{margin-bottom:32px;}
  .sec-head p{font-size:15.5px;}
  .page-head{padding:40px 0 34px;}
  .locate-body{padding:24px;}
  .mobile-cta{display:block;}
  body.has-mobile-cta{padding-bottom:78px;}
  .confirm-actions .btn{flex:1;min-width:140px;}
}

@media (max-width:360px){
  .times-grid{gap:6px;}
  .time-btn{padding:9px 13px;font-size:13.5px;}
}

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

@media print{
  .site-header,.site-footer,.mobile-cta,.booking{display:none;}
}

/* ==============================================================
   IMAGE PLACEHOLDERS
   Until real photography is dropped into /assets/img, any missing
   file falls back to a soft tinted panel rather than a broken icon.
   ============================================================== */
.ph{background:linear-gradient(140deg,var(--cream) 0%,var(--sage-pale) 55%,var(--lavender-pale) 100%);}
.ph-coral{background:linear-gradient(140deg,var(--cream) 0%,var(--coral-soft) 100%);}
.ph-lav{background:linear-gradient(140deg,var(--soft-white) 0%,var(--lavender-pale) 100%);}
.ph-sage{background:linear-gradient(140deg,var(--soft-white) 0%,var(--sage-pale) 100%);}
/* A photo that is not on the server yet must fall back to the tinted
   panel behind it, never to a broken image icon and alt text. The rule
   was scoped to .ph only, so cards using .ph-coral and friends still
   showed the breakage. */
img[data-failed]{display:none !important;}
.hero-media.ph,.split-media.ph{border-radius:var(--r-hero);min-height:clamp(260px,34vw,420px);}
.svc-card-img.ph{min-height:0;}

/* ==============================================================
   Customer account area
   ============================================================== */
.account-nav{
  display:flex;flex-wrap:wrap;gap:6px;
  background:var(--cream);padding:5px;border-radius:var(--r-pill);
  margin-bottom:26px;width:fit-content;max-width:100%;
}
.account-nav a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:600;color:var(--gray);
  transition:background .14s ease,color .14s ease;
}
.account-nav a:hover{color:var(--ink);}
.account-nav a.is-active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.06);}

.account-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  padding:28px;margin-bottom:20px;
}
.account-card h2{margin-bottom:16px;}
.account-card .appt-row .v{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;text-align:right;}

@media (max-width:640px){
  .account-nav{width:100%;overflow-x:auto;flex-wrap:nowrap;}
  .account-nav a{white-space:nowrap;padding:9px 14px;}
  .account-nav a span{display:none;}
  .account-nav a.is-active span{display:inline;}
  .account-card{padding:22px 18px;}
}

/* ==============================================================
   FULL WIDTH STEPPED BOOKING
   The three steps read as one column down the page. Only the
   active step is expanded, and a finished step keeps a one line
   summary of what was chosen so nothing feels lost when it closes.
   ============================================================== */

.hero-stepped{
  background:linear-gradient(180deg,var(--cream) 0%,var(--soft-white) 62%,#fff 100%);
  padding:64px 0 90px;
}
.hero-stepped .hero-intro{
  max-width:760px;margin:0 auto 44px;text-align:center;
}
.hero-stepped .hero-intro h1{
  font-size:clamp(40px,5.4vw,68px);line-height:1.02;letter-spacing:-.025em;margin:18px 0 20px;
}
.hero-stepped .hero-lede{
  font-size:clamp(17px,1.5vw,20px);color:var(--gray);max-width:560px;margin:0 auto 26px;
}
.hero-stepped .hero-meta{
  display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:center;margin-bottom:26px;
}
.hero-stepped .hero-meta-row{display:flex;align-items:center;gap:10px;text-align:left;}
.hero-stepped .hero-meta-row span{display:flex;flex-direction:column;font-size:14.5px;line-height:1.4;}
.hero-stepped .hero-meta-row span strong{font-weight:600;}
.hero-stepped .hero-meta-row svg{color:var(--coral);flex:none;}

.booking-full{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-hero);
  padding:12px;box-shadow:0 10px 40px rgba(0,0,0,.05);
}
.booking-full .booking{max-width:none;padding:0;border:0;box-shadow:none;background:transparent;}

/* Step shell ---------------------------------------------------- */
.bk-steps{display:flex;flex-direction:column;gap:10px;}

.bk-step{
  border:1px solid var(--border);border-radius:var(--r-card);
  background:var(--soft-white);overflow:hidden;
  transition:border-color .18s ease,background .18s ease;
}
.bk-step.is-open{background:#fff;border-color:var(--border-strong);}
.bk-step.is-done{background:#fff;}

/* Step heading -------------------------------------------------- */
.bk-step .step{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:24px 28px;cursor:default;user-select:none;
  border:0;width:100%;text-align:left;
  /* The old pill treatment painted the active step coral with white
     text. Reset both here so the heading reads on a white card. */
  background:none;color:var(--ink);font-size:inherit;font-weight:400;
  border-radius:0;flex:none;justify-content:flex-start;
}
.bk-step.is-open .step,
.bk-step.is-done .step{background:none;color:var(--ink);}
.bk-step.is-done .step{cursor:pointer;}
.bk-step.is-done .step:hover{background:var(--soft-white);}
.bk-step .step:focus-visible{outline:2px solid var(--coral);outline-offset:-3px;}

.bk-step .step .n{
  width:42px;height:42px;border-radius:999px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;
  background:var(--cream);color:var(--gray);
  transition:background .18s ease,color .18s ease;
}
.bk-step.is-open .step .n{background:var(--coral);color:#fff;}
.bk-step.is-done .step .n{background:var(--sage-pale);color:var(--sage-deep);}

.bk-step-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.bk-step-text .t{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.bk-step-text .d{
  font-size:14.5px;color:var(--gray);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bk-step.is-done .bk-step-text .d{color:var(--sage-deep);}

.bk-chev{color:var(--gray-light);display:flex;transition:transform .2s ease;}
.bk-step.is-open .bk-chev{transform:rotate(180deg);color:var(--coral);}
.bk-step:not(.is-done):not(.is-open) .bk-chev{opacity:.35;}

/* Step body ----------------------------------------------------- */
.bk-step .booking-panel{display:none;padding:4px 28px 30px;}
.bk-step .booking-panel.is-active{display:block;}
.booking-confirm-panel{display:none;}
.booking-confirm-panel.is-active{display:block;padding:10px;}

/* Calendar at full width ---------------------------------------- */
.booking-full .cal-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;gap:14px;
}
.booking-full .cal-month{font-size:20px;font-weight:600;}
.booking-full .cal-grid{
  grid-template-columns:repeat(7,1fr);gap:6px;
  border:1px solid var(--border);border-radius:20px;padding:10px;background:#fff;
}
.booking-full .cal-dow{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray);font-weight:700;padding:10px 0;text-align:center;
}
.booking-full .cal-day{
  aspect-ratio:auto;min-height:62px;border-radius:14px;
  font-size:16px;display:flex;align-items:center;justify-content:center;
}
.booking-full .times-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px;
}
.booking-full .time-btn{padding:14px 10px;font-size:15px;}

/* Services at full width ---------------------------------------- */
.booking-full .svc-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:10px;max-height:none;overflow:visible;
}
.booking-full .svc-row{margin:0;}
.booking-full .cat-pills{margin-bottom:18px;}

/* Details form at full width ------------------------------------ */
.booking-full [data-panel="3"] .field-row{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.booking-full .bk-detail-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0 30px;align-items:start;
}
.booking-full [data-panel="3"] .btn-block{max-width:420px;margin-left:auto;margin-right:auto;}

@media (min-width:1100px){
  .booking-full{padding:16px;}
  .bk-step .step{padding:26px 34px;}
  .bk-step .booking-panel{padding:4px 34px 34px;}
}

@media (max-width:820px){
  .hero-stepped{padding:40px 0 64px;}
  .hero-stepped .hero-intro{margin-bottom:30px;}
  .hero-stepped .hero-meta{gap:12px 20px;}
  .booking-full{padding:8px;border-radius:24px;}
  .bk-step .step{padding:18px 18px;gap:13px;grid-template-columns:auto 1fr auto;}
  .bk-step .step .n{width:34px;height:34px;font-size:14.5px;}
  .bk-step-text .t{font-size:16.5px;}
  .bk-step-text .d{font-size:13.5px;}
  .bk-step .booking-panel{padding:2px 18px 24px;}
  .booking-full .cal-day{min-height:48px;font-size:15px;}
  .booking-full .cal-grid{gap:4px;padding:7px;border-radius:16px;}
  .booking-full .times-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;}
  .booking-full .svc-list{grid-template-columns:1fr;}
  .booking-full [data-panel="3"] .field-row,
  .booking-full .bk-detail-grid{grid-template-columns:1fr;}
}

@media (max-width:400px){
  .bk-step-text .d{white-space:normal;}
  .booking-full .cal-day{min-height:42px;font-size:14px;border-radius:11px;}
}

/* Checkbox labels stack their title and description ------------- */
.check .t,
.check .d{display:block;}
.check .t{margin-bottom:2px;}
.check > span{min-width:0;}

/* The "All" chip was the only black element in a soft palette --- */
.cat-pill.is-active[data-accent="neutral"]{background:var(--cream);color:var(--ink);}

/* Step 3 reads better in two columns once it has the full width - */
@media (min-width:820px){
  .booking-full [data-panel="3"] .bk-two{
    display:grid;grid-template-columns:1fr 1fr;gap:0 20px;
  }
}

/* The hero holds the floating booking bar rather than a card ----- */
.hero-booking-bar{margin-top:8px;}
.hero-stepped{padding-bottom:70px;}

/* Logo image -------------------------------------------------- */
/* Height is fixed so any reasonable artwork lands in the same
   optical position as the typographic lockup it replaces. */
.logo-img{display:block;width:auto;height:46px;object-fit:contain;}
.footer-logo .logo-img{height:52px;}
.mobile-menu .logo-img{height:40px;}
@media (max-width:640px){ .logo-img{height:38px;} }

/* Hero now runs headline straight into the booking bar --------- */
.hero-stepped .hero-intro{margin-bottom:34px;}
.hero-stepped .hero-lede{margin-bottom:0;}
.hero-stepped{padding-bottom:44px;}
@media (max-width:820px){ .hero-stepped{padding-bottom:30px;} .hero-stepped .hero-intro{margin-bottom:26px;} }

/* ==============================================================
   FULL BLEED HERO PHOTOGRAPH
   The photo runs edge to edge behind the whole hero. A warm veil
   sits over it so the headline and the booking bar stay readable
   whatever the image happens to contain.
   ============================================================== */

.hero-stepped.has-photo{
  position:relative;
  background:var(--cream);
  /* No overflow clipping here. The booking panel unfolds out of the
     bottom of this section, and hiding overflow cut it off. The two
     background layers are inset:0 so they cannot spill anyway. */
}

.hero-stepped.has-photo .hero-bg{
  position:absolute;inset:0;
  background-image:var(--hero-photo);
  background-size:cover;
  background-position:center 38%;
  /* Slightly desaturated so the coral and lavender stay the loudest
     colours on the page rather than competing with the photograph. */
  filter:saturate(.88);
}

/* Two layers do the work: a flat wash for overall contrast, and a
   vertical gradient that goes almost solid at the bottom so the
   booking bar sits on near white rather than on the image. */
.hero-stepped.has-photo .hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(252,252,250,.30) 0%,
      rgba(252,252,250,.46) 38%,
      rgba(252,252,250,.80) 72%,
      rgba(255,255,255,.99) 100%),
    radial-gradient(120% 80% at 50% 34%,
      rgba(252,252,250,.55) 0%,
      rgba(252,252,250,0) 68%);
}

.hero-stepped.has-photo .wrap{position:relative;z-index:2;}
.hero-stepped.has-photo{padding-top:82px;padding-bottom:52px;}

/* The headline gains a whisper of lift so it never sits flat on a
   busy area of the photograph. */
.hero-stepped.has-photo .hero-intro h1{text-shadow:0 1px 14px rgba(255,255,255,.75);}
.hero-stepped.has-photo .hero-lede{color:var(--ink);opacity:.78;text-shadow:0 1px 10px rgba(255,255,255,.8);}

/* White on white needs a stronger edge once there is a photo behind. */
.hero-stepped.has-photo .bkx-bar{
  box-shadow:0 10px 40px rgba(0,0,0,.13);
  border-color:rgba(0,0,0,.06);
}
.hero-stepped.has-photo .bkx-mobile-trigger{
  box-shadow:0 8px 28px rgba(0,0,0,.14);
}
.hero-stepped.has-photo .bkx-reassure{color:var(--ink);opacity:.66;}

@media (max-width:820px){
  .hero-stepped.has-photo{padding-top:44px;padding-bottom:34px;}
  /* A tall crop of a wide photo usually loses the subject, so the
     focal point is pulled upward on narrow screens. */
  .hero-stepped.has-photo .hero-bg{background-position:center 30%;}
  .hero-stepped.has-photo .hero-veil{
    background:linear-gradient(180deg,
      rgba(252,252,250,.42) 0%,
      rgba(252,252,250,.68) 44%,
      rgba(255,255,255,.98) 100%);
  }
}

/* Palette token for the active nav pill ------------------------ */
:root{--sand:#F2EDE7;}

/* The mega panel now hangs off a floating pill, so it needs to clear
   the header padding and line up with the bar rather than the window. */
.mega{top:calc(100% - 4px);}

@media (max-width:1180px){
  .nav-link{padding:9px 11px;font-size:12.5px;}
  .header-inner{padding:9px 9px 9px 20px;gap:14px;}
}
@media (max-width:1040px){
  /* Below this the seven stacked items crowd the logo, so labels go
     and the icons carry the meaning with a tooltip on hover. */
  .nav-text{display:none;}
  .nav-link{padding:11px 13px;}
  .nav-link .chev{display:none;}
}
@media (max-width:900px){
  .nav{display:none;}
  .header-actions .btn{display:none;}
  .menu-toggle{display:inline-flex;}
  .site-header{padding:10px 0;}
  .header-inner{padding:8px 8px 8px 18px;border-radius:38px;}
}

/* ==============================================================
   HERO PHOTO RUNS BEHIND THE FLOATING HEADER
   The bar is transparent at the top of the page, so the photograph
   has to start above it. The hero is pulled up by the header height
   and given that height back as padding, which keeps the headline
   in the same place while the image fills the space behind the bar.
   ============================================================== */
:root{--header-h:105px;}

.hero-stepped.has-photo{
  margin-top:calc(-1 * var(--header-h));
  padding-top:calc(74px + var(--header-h));
}

/* The veil has to reach the very top now, or the photo sits at full
   strength behind the logo and the nav labels lose contrast. */
.hero-stepped.has-photo .hero-veil{
  background:
    linear-gradient(180deg,
      rgba(252,252,250,.46) 0%,
      rgba(252,252,250,.34) 16%,
      rgba(252,252,250,.46) 40%,
      rgba(252,252,250,.80) 72%,
      rgba(255,255,255,.99) 100%),
    radial-gradient(120% 80% at 50% 40%,
      rgba(252,252,250,.52) 0%,
      rgba(252,252,250,0) 68%);
}

@media (max-width:900px){
  :root{--header-h:82px;}
  .hero-stepped.has-photo{padding-top:calc(38px + var(--header-h));}
}

/* ==============================================================
   SUBPAGE HEADER PHOTOGRAPH
   Optional. Drop assets/img/page-{slug}.jpg and the header switches
   from a flat panel to a full bleed photo with a veil over it. No
   file means the plain header, so nothing depends on the artwork.
   ============================================================== */
.page-head.has-photo{
  position:relative;
  background:var(--cream);
  border-bottom:0;
}
.page-head.has-photo .page-head-bg{
  position:absolute;inset:0;
  background-image:var(--page-photo);
  background-size:cover;
  background-position:center 42%;
  filter:saturate(.88);
}
.page-head.has-photo .page-head-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(252,252,250,.42) 0%,
      rgba(252,252,250,.58) 55%,
      rgba(255,255,255,.96) 100%),
    radial-gradient(110% 90% at 50% 50%,
      rgba(252,252,250,.45) 0%,
      rgba(252,252,250,0) 70%);
}
.page-head.has-photo .wrap,
.page-head.has-photo .wrap-narrow{position:relative;z-index:2;}
.page-head.has-photo{padding:88px 0 70px;}
.page-head.has-photo h1{text-shadow:0 1px 14px rgba(255,255,255,.7);}
.page-head.has-photo p{color:var(--ink);opacity:.76;}

@media (max-width:820px){
  .page-head.has-photo{padding:52px 0 42px;}
  .page-head.has-photo .page-head-bg{background-position:center 36%;}
}

/* Languages line under the hero lede ---------------------------- */
/* Set on its own line rather than trailing the sentence, so a
   Spanish speaker scanning the page catches it straight away. */
.hero-aside{
  display:inline-flex;align-items:center;gap:8px;
  margin:14px auto 0;padding:8px 18px;border-radius:var(--r-pill);
  background:var(--sage-pale);color:var(--sage-deep);
  font-size:13.5px;font-weight:600;letter-spacing:.02em;
}
@media (max-width:820px){
  .hero-aside{font-size:12.5px;padding:7px 14px;}
}

/* The build credit reads as a link on hover without shouting ---- */
.footer-bottom .tiny a{color:var(--gray);text-decoration:underline;text-underline-offset:2px;}
.footer-bottom .tiny a:hover{color:var(--ink);}