/* ============================================================
   OLYMPIA — Mediterranean layer (2026 redesign)
   Adds a light surface system on top of the existing dark base
   so pages alternate ivory / limestone / espresso instead of
   running uniformly dark.
   ============================================================ */
:root{
  /* --- warm Mediterranean palette --- */
  --ivory:        #F7F3EA;   /* warm ivory — primary light ground */
  --limestone:    #EFE9DB;   /* limestone beige — alternating band */
  --sand:         #E2DED3;
  --olive:        #1F3050;   /* deep olive */
  --olive-soft:   #3D5275;
  --terracotta:   #B5643C;   /* accent only */
  --espresso:     #111B2F;   /* dark ground */
  --espresso-2:   #1A2740;
  --brass:        #7F97B8;   /* restrained antique brass */
  --brass-light:  #A9BED8;

  /* --- text --- */
  --on-light:     #1C2B45;   /* AA on ivory: 11.9:1 */
  --on-light-mid: #4A5872;   /* AA on ivory: 6.4:1  */
  --on-dark:      #F4F2ED;
  --on-dark-mid:  #BAC4D3;   /* AA on espresso: 7.9:1 */

  --brass-on-light:#2F4C7A;  /* eyebrows and small caps on ivory — 6.1:1 */
  --terra-on-light:#8F4522;  /* inline links and required marks — 6.3:1 */

  --line-light:   rgba(28,43,69,.14);
  --line-light-2: rgba(28,43,69,.07);
}

/* ---------- surfaces ---------- */
[data-surface]{ position:relative; }
[data-surface="light"]{ background:var(--ivory); color:var(--on-light); }
[data-surface="limestone"]{ background:var(--limestone); color:var(--on-light); }
[data-surface="olive"]{ background:var(--olive); color:var(--on-dark); }
[data-surface="dark"]{ background:var(--espresso); color:var(--on-dark); }

[data-surface="light"] .h-1,[data-surface="limestone"] .h-1,
[data-surface="light"] .h-2,[data-surface="limestone"] .h-2,
[data-surface="light"] h2,[data-surface="limestone"] h2,
[data-surface="light"] h3,[data-surface="limestone"] h3{ color:var(--on-light); }
[data-surface="light"] .lead,[data-surface="limestone"] .lead,
[data-surface="light"] .body-m,[data-surface="limestone"] .body-m,
[data-surface="light"] p,[data-surface="limestone"] p{ color:var(--on-light-mid); }
[data-surface="light"] .eyebrow,[data-surface="limestone"] .eyebrow{ color:var(--brass-on-light); }
[data-surface="light"] .eyebrow::before,[data-surface="limestone"] .eyebrow::before{ background:var(--brass); }
[data-surface="light"] em,[data-surface="limestone"] em{ color:var(--olive); }
[data-surface="olive"] em,[data-surface="dark"] em{ color:var(--brass-light); }

/* ---------- type ---------- */
.h-2{ font-family:var(--font-display); font-weight:400;
  font-size:clamp(26px,3.2vw,44px); line-height:1.12; letter-spacing:-.012em; }
.h-3{ font-family:var(--font-display); font-weight:400;
  font-size:clamp(19px,2vw,26px); line-height:1.2; }
.sub{ font-family:var(--font-body); font-size:clamp(14px,1.15vw,16.5px);
  line-height:1.75; color:var(--on-light-mid); max-width:58ch; }
[data-surface="olive"] .sub,[data-surface="dark"] .sub{ color:var(--on-dark-mid); }
/* French runs ~15% longer than English — keep measures from collapsing */
:lang(fr) .sub{ max-width:62ch; }

/* ---------- buttons on light ---------- */
[data-surface="light"] .btn,[data-surface="limestone"] .btn{
  border-color:var(--line-light); color:var(--on-light);
}
[data-surface="light"] .btn:hover,[data-surface="limestone"] .btn:hover{
  background:var(--olive); border-color:var(--olive); color:var(--ivory);
}
[data-surface="light"] .btn--solid,[data-surface="limestone"] .btn--solid{
  background:var(--olive); border-color:var(--olive); color:#F7F3EA;
}
[data-surface="light"] .btn--solid:hover,[data-surface="limestone"] .btn--solid:hover{
  background:var(--espresso); border-color:var(--espresso);
}

/* ---------- Mediterranean motifs, used sparingly ---------- */
.arch{ border-radius:clamp(80px,14vw,180px) clamp(80px,14vw,180px) 4px 4px; overflow:hidden; }
.stone{ position:relative; }
.stone::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(28,43,69,.035) 1px, transparent 1px);
  background-size:3px 3px;
}
.rule-brass{ height:1px; background:linear-gradient(90deg,var(--brass),transparent); border:0; margin:0; }

/* ============================================================
   Accessibility + mobile action bar
   ============================================================ */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:1000;
  background:var(--ivory); color:var(--on-light); padding:11px 18px; border-radius:3px;
  font-family:var(--font-ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; outline:2px solid var(--brass); outline-offset:2px; }

:where(a,button,[tabindex],summary,input,select,textarea):focus-visible{
  outline:2px solid var(--brass-light); outline-offset:3px; border-radius:2px;
}

/* sticky quick actions — phones only, and only the two that matter */
.mbar{ display:none; }
@media (max-width:760px){
  .mbar{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:900;
    background:var(--line); border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mbar a{
    display:flex; align-items:center; justify-content:center; min-height:54px;
    background:var(--espresso); color:var(--on-dark);
    font-family:var(--font-ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  }
  .mbar a:last-child{ background:var(--olive); color:var(--ivory); }
  .mbar a:active{ opacity:.85; }
  body{ padding-bottom:54px; }
  .m-nav{ padding-bottom:70px; }
}

/* nav sub-items need a real hit area on touch */
@media (pointer:coarse){
  .nav__sub a{ padding-top:13px; padding-bottom:13px; }
  .m-nav__acc-body a{ padding:12px 0; }
}
.btn--sm{ padding:12px 20px; font-size:10.5px; }

/* the dropdown is a menu: give it a visible edge on light heads too */
.nav__sub{ box-shadow:0 26px 54px rgba(11,18,33,.5); }

/* ============================================================
   Homepage components
   ============================================================ */
.section--tight{ padding-top:clamp(52px,6vw,86px); padding-bottom:clamp(52px,6vw,86px); }

/* --- hero --- */
.mhero{ position:relative; min-height:min(92svh,860px); display:flex; align-items:flex-end;
  padding:clamp(96px,12vh,150px) var(--pad-x) clamp(48px,7vh,90px); overflow:hidden; }
.mhero__bg{ position:absolute; inset:0; }
.mhero__bg img{ width:100%; height:100%; object-fit:cover; object-position:70% 50%; }
.mhero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(13,21,38,.92) 0%, rgba(13,21,38,.66) 40%, rgba(13,21,38,.18) 78%),
             linear-gradient(180deg, rgba(13,21,38,.55) 0%, rgba(13,21,38,.15) 45%, rgba(13,21,38,.8) 100%); }
.mhero__inner{ position:relative; z-index:2; max-width:1400px; margin-inline:auto; width:100%; }
.mhero__h{ font-family:var(--font-display); font-weight:400; color:var(--on-dark);
  font-size:clamp(34px,5.4vw,72px); line-height:1.04; letter-spacing:-.02em;
  max-width:15ch; margin:16px 0 0; }
.mhero__h em{ font-style:italic; color:var(--brass-light); }
.mhero__sub{ margin:20px 0 0; max-width:50ch; font-family:var(--font-body);
  font-size:clamp(14.5px,1.2vw,17px); line-height:1.7; color:var(--on-dark-mid); }
.mhero__acts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }

/* --- trust strip --- */
.trust{ padding:clamp(20px,2.4vw,30px) var(--pad-x); border-bottom:1px solid var(--line-light-2); }
.trust__list{ list-style:none; margin:0 auto; padding:0; max-width:1400px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
.trust__list li{ display:flex; flex-direction:column; gap:3px; }
.trust__list b{ font-family:var(--font-display); font-size:clamp(18px,1.7vw,23px); color:var(--olive); }
.trust__list span{ font-family:var(--font-ui); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--on-light-mid); }
@media (max-width:620px){ .trust__list{ grid-template-columns:1fr 1fr; gap:16px 12px; } }

/* --- two journeys --- */
.jrny{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,38px);
  margin-top:clamp(26px,3.4vw,46px); }
.jcard{ display:block; }
.jcard__img{ display:block; overflow:hidden; aspect-ratio:5/4; }
.jcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.jcard:hover .jcard__img img{ transform:scale(1.045); }
.jcard__body{ display:block; padding-top:20px; }
.jcard__body b{ display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(22px,2.3vw,32px); color:var(--on-light); }
.jcard__body em{ display:block; margin-top:9px; font-style:normal; font-family:var(--font-body);
  font-size:14px; line-height:1.65; color:var(--on-light-mid); max-width:40ch; }
.jcard__body u{ display:inline-flex; align-items:center; gap:9px; margin-top:14px; text-decoration:none;
  font-family:var(--font-ui); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--olive); }
.jcard__body u svg{ transition:transform .4s var(--ease); }
.jcard:hover .jcard__body u svg{ transform:translateX(5px); }
@media (max-width:760px){ .jrny{ grid-template-columns:1fr; } }

/* --- lunch buffet --- */
.lb{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(26px,4vw,64px); align-items:center; }
.lb__price{ margin-top:20px; font-family:var(--font-serif); font-size:17px; color:var(--on-dark-mid); }
.lb__price b{ font-family:var(--font-display); font-size:24px; color:var(--brass-light); }
.lb__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.4vw,18px); }
.lb__grid li{ position:relative; border-radius:3px; overflow:hidden; }
.lb__grid img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease); }
.lb__grid li:hover img{ transform:scale(1.05); }
.lb__grid span{ position:absolute; left:0; right:0; bottom:0; padding:34px 14px 14px;
  background:linear-gradient(180deg, transparent, rgba(11,18,33,.9)); }
.lb__grid b{ display:block; font-family:var(--font-display); font-size:clamp(15px,1.4vw,19px); color:var(--on-dark); }
.lb__grid i{ display:block; margin-top:3px; font-style:normal; font-family:var(--font-body);
  font-size:11.5px; color:var(--on-dark-mid); }
@media (max-width:860px){ .lb{ grid-template-columns:1fr; } }

/* --- spaces --- */
.spaces{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(28px,3.4vw,46px); }
.space__img{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:3px;
  background:var(--sand); }
.space__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.space:hover .space__img img{ transform:scale(1.05); }
.space__img--ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(165deg,#1B2842,#101A2C); }
.space__img--ph .space__mark{ width:44px; height:auto; object-fit:contain; opacity:.9; }
.space__img--ph span{ font-family:var(--font-display); font-size:clamp(17px,1.7vw,23px);
  letter-spacing:.18em; color:rgba(238,241,246,.62); }
.space__name{ margin:16px 0 3px; font-family:var(--font-display); font-weight:400;
  font-size:clamp(18px,1.7vw,23px); color:var(--on-light); }
.space__cap{ margin:0; font-family:var(--font-ui); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass-on-light); }
.space__txt{ margin:10px 0 0; font-family:var(--font-body); font-size:13px; line-height:1.6;
  color:var(--on-light-mid); }
.space__cta{ display:inline-flex; gap:7px; margin-top:13px; font-family:var(--font-ui);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--olive);
  border-bottom:1px solid rgba(31,48,80,.35); padding-bottom:3px; }
.space__cta:hover{ color:var(--terra-on-light); border-color:var(--terra-on-light); }
@media (max-width:980px){ .spaces{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .spaces{ grid-template-columns:1fr; } }

/* --- events overview --- */
.evt{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(26px,4vw,64px); align-items:center; }
.evt__acts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.evt__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.evt__list li{ padding:15px 0; border-top:1px solid rgba(238,241,246,.16);
  font-family:var(--font-serif); font-size:clamp(16px,1.5vw,20px); color:var(--on-dark); }
.evt__list li:last-child{ border-bottom:1px solid rgba(238,241,246,.16); }
@media (max-width:860px){ .evt{ grid-template-columns:1fr; } }

/* --- catering --- */
.cater{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:center; }
.cater__img{ overflow:hidden; aspect-ratio:4/3; }
.cater__img img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:860px){ .cater{ grid-template-columns:1fr; } }

/* --- 3D + location --- */
.tour3d{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.loc{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(26px,4vw,58px); align-items:center; }
.loc__list{ margin:0; display:grid; gap:16px; }
.loc__list div{ display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:baseline; }
.loc__list dt{ font-family:var(--font-ui); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass-on-light); }
.loc__list dd{ margin:0; font-family:var(--font-body); font-size:14px; line-height:1.65; color:var(--on-light); }
.loc__list dd a{ color:var(--on-light); border-bottom:1px solid var(--line-light); }
.loc__list dd a:hover{ color:var(--terra-on-light); border-color:var(--terra-on-light); }
.loc__map{ aspect-ratio:4/3; border-radius:3px; overflow:hidden; border:1px solid var(--line-light); }
.loc__map iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.85) contrast(.95); }
@media (max-width:860px){
  .loc{ grid-template-columns:1fr; }
  .loc__list div{ grid-template-columns:1fr; gap:3px; }
}

/* ============================================================
   Forms — light surface, progressive disclosure
   ============================================================ */
.resv{ display:grid; grid-template-columns:1.5fr .8fr; gap:clamp(26px,4vw,58px); align-items:start; }
.resv__form{ display:grid; gap:clamp(18px,2vw,26px); }
.resv__aside{ padding:clamp(22px,2.4vw,30px); background:var(--limestone); border-radius:3px; }
.resv__facts{ margin:16px 0 20px; display:grid; gap:13px; }
.resv__facts div{ display:grid; gap:3px; }
.resv__facts dt{ font-family:var(--font-ui); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass-on-light); }
.resv__facts dd{ margin:0; font-family:var(--font-body); font-size:13.5px; color:var(--on-light); }
.resv__facts dd a{ color:var(--on-light); border-bottom:1px solid var(--line-light); }
.resv__fine{ font-family:var(--font-body); font-size:12.5px; color:var(--on-light-mid); margin:0; }
@media (max-width:900px){ .resv{ grid-template-columns:1fr; } }

.fs{ border:0; margin:0; padding:0; display:grid; gap:14px; }
.fs__legend{ padding:0; font-family:var(--font-ui); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass-on-light); margin-bottom:2px; }
.fgrid{ display:grid; gap:14px; }
.fgrid--2{ grid-template-columns:1fr 1fr; }
.fgrid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:620px){ .fgrid--2,.fgrid--3{ grid-template-columns:1fr; } }

[data-surface="light"] .field label,[data-surface="limestone"] .field label{
  color:var(--on-light-mid); font-size:10.5px; letter-spacing:.16em; }
[data-surface="light"] .field input,[data-surface="light"] .field select,[data-surface="light"] .field textarea,
[data-surface="limestone"] .field input,[data-surface="limestone"] .field select,[data-surface="limestone"] .field textarea{
  background:#fff; border:1px solid var(--line-light); color:var(--on-light);
  border-radius:3px; padding:13px 14px; font-size:15px; min-height:46px;
}
[data-surface="light"] .field input:focus,[data-surface="light"] .field select:focus,[data-surface="light"] .field textarea:focus{
  border-color:var(--olive); outline:2px solid rgba(31,48,80,.25); outline-offset:1px; }
.field abbr{ color:var(--terra-on-light); text-decoration:none; margin-left:2px; }
[data-surface="dark"] .field abbr,[data-surface="olive"] .field abbr{ color:#E2A07C; }
.opt{ font-family:var(--font-ui); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-light-mid); opacity:.75; margin-left:7px; }
.field :is(input,select,textarea):user-invalid{ border-color:var(--terracotta); }

/* progressive disclosure */
.more{ border-top:1px solid var(--line-light); padding-top:14px; }
.more > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--olive); padding:6px 0; }
.more > summary::-webkit-details-marker{ display:none; }
.more > summary::after{ content:"+"; margin-left:auto; font-size:15px; color:var(--brass-on-light); }
.more[open] > summary::after{ content:"–"; }
.more__body{ padding-top:14px; display:grid; gap:14px; }
[data-surface="light"] .form-note.is-ok{ color:var(--olive); }
[data-surface="light"] .form-note.is-err{ color:var(--terra-on-light); }
[data-surface="light"] .tag-check--row span{ color:var(--on-light) !important; }
[data-surface="light"] .tag-check--row span::before{ border-color:var(--line-light); background:#fff; }
[data-surface="light"] .tag-check--row input:checked + span::before{ background:var(--olive); border-color:var(--olive); }
[data-surface="light"] .tag-check--row input:checked + span::after{ border-color:#fff; }
[data-surface="light"] .picked-chip{ background:var(--limestone); color:var(--on-light); }
/* room comparison */
.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; }
.cmp{ margin-top:clamp(24px,3vw,38px); }
.cmp__table{ width:100%; border-collapse:collapse; text-align:left; }
.cmp__table th,.cmp__table td{ padding:15px 16px; border-bottom:1px solid var(--line-light);
  font-family:var(--font-body); font-size:13.5px; line-height:1.55; color:var(--on-light-mid); vertical-align:top; }
.cmp__table thead th{ font-family:var(--font-display); font-size:clamp(17px,1.7vw,22px);
  color:var(--on-light); border-bottom:1px solid var(--brass); }
.cmp__table tbody th{ font-family:var(--font-ui); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-on-light); width:20%; }
.cmp__note{ margin-top:16px; font-family:var(--font-body); font-size:13px; color:var(--on-light-mid); }
@media (max-width:700px){
  .cmp{ overflow-x:auto; }
  .cmp__table{ min-width:560px; }
}

/* ============================================================
   RECEPTION HALL — event story
   ============================================================ */
.promise{ max-width:64ch; margin:0 auto; text-align:center; }
.promise .h-2{ margin:16px 0 14px; }

/* event categories */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); margin-top:clamp(28px,3.4vw,46px); }
.cat{ display:block; text-decoration:none; color:inherit; }
.cat__img{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:3px; background:var(--sand); }
.cat__img img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1); }
.cat:hover .cat__img img, .cat:focus-visible .cat__img img{ transform:scale(1.045); }
.cat__name{ font-family:var(--font-serif); font-size:clamp(19px,1.7vw,24px); font-weight:420;
  margin:16px 0 6px; color:var(--on-light); }
.cat__txt{ font-family:var(--font-body); font-size:14.5px; line-height:1.6; color:var(--on-light-mid); max-width:34ch; }

/* hall gallery */
.hgal{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(0,1fr);
  gap:clamp(8px,1vw,14px); margin-top:clamp(26px,3vw,42px); }
.hgal figure{ margin:0; overflow:hidden; border-radius:3px; background:var(--sand); aspect-ratio:1/1; }
.hgal figure:nth-child(1), .hgal figure:nth-child(6){ grid-column:span 2; grid-row:span 2; aspect-ratio:1/1; }
.hgal img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1); }
.hgal figure:hover img{ transform:scale(1.04); }

/* optional enhancements */
.enh{ display:flex; flex-wrap:wrap; gap:9px 10px; margin-top:clamp(20px,2.4vw,30px); }
.enh span{ font-family:var(--font-ui); font-size:12px; letter-spacing:.04em;
  padding:9px 15px; border:1px solid var(--line-light); border-radius:100px; color:var(--on-light-mid); }

/* quote line where no verified price exists */
.quoteline{ font-family:var(--font-ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-light); margin-top:12px; }

@media (max-width:900px){
  .cats{ grid-template-columns:1fr; gap:26px; }
  .cat__img{ aspect-ratio:16/10; }
  .hgal{ grid-template-columns:repeat(2,1fr); }
  .hgal figure:nth-child(1), .hgal figure:nth-child(6){ grid-column:span 2; grid-row:auto; aspect-ratio:16/10; }
}

/* ============================================================
   TOUCH TARGETS — WCAG 2.5.8. Handset layouts get a 44px tap
   height on every link that is its own tap target; the padding
   is vertical only so the type scale and rhythm stay put.
   ============================================================ */
@media (max-width:900px){
  .burger{ width:44px; height:44px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:5px; }
  .footer ul a,
  .m-nav__acc-body a,
  .m-nav > a,
  .nav__sub a{ display:block; min-height:44px; line-height:44px; }
  .footer__grid li{ margin:0; }
  .space__cta,
  .subnav a{ display:inline-flex; align-items:center; min-height:44px; }
  .mbar a{ min-height:48px; }
  .lang-switch{ display:inline-flex; align-items:center; min-height:44px; }
  .loc__list a,
  .m-nav__meta a{ display:inline-flex; align-items:center; min-height:44px; }
}

/* ============================================================
   LIGHT-SURFACE CONTRAST — WCAG AA
   Several components were authored for the espresso base and
   fail 4.5:1 once they sit on ivory or limestone. Rather than
   restyle them twice, the light surfaces re-point the colour
   tokens they read and darken the two accents that carry text.
   ============================================================ */

[data-surface="light"] .eyebrow,
[data-surface="limestone"] .eyebrow,
[data-surface="light"] .eyebrow--center,
[data-surface="limestone"] .eyebrow--center,
[data-surface="light"] .quoteline,
[data-surface="limestone"] .quoteline,
[data-surface="light"] .fs__legend,
[data-surface="limestone"] .fs__legend,
[data-surface="light"] .resv__aside .eyebrow{ color:var(--brass-on-light); }

[data-surface="light"] a[style*="terracotta"],
[data-surface="limestone"] a[style*="terracotta"]{ color:var(--terra-on-light)!important; }

/* olive band: the gold eyebrow is too dark against #1F3050 */
[data-surface="olive"] .eyebrow,
[data-surface="olive"] .eyebrow--center{ color:#CFDCEB; }

/* chips and pills built for the dark base */
[data-surface="light"] .incl,
[data-surface="limestone"] .incl{ background:rgba(28,43,69,.03); border-color:var(--line-light); }
[data-surface="light"] .incl__head,
[data-surface="limestone"] .incl__head{ color:var(--brass-on-light); }
[data-surface="light"] .incl__grid span,
[data-surface="limestone"] .incl__grid span,
[data-surface="light"] .tag-check span,
[data-surface="limestone"] .tag-check span{
  color:var(--on-light); border-color:var(--line-light); background:transparent; }
[data-surface="light"] .tag-check input:checked + span,
[data-surface="limestone"] .tag-check input:checked + span{
  background:var(--olive); border-color:var(--olive); color:var(--on-dark); }

/* event-type radio picker inside a light form */
[data-surface="light"] .evt-pick .evt span,
[data-surface="limestone"] .evt-pick .evt span{
  border-color:var(--line-light); background:transparent; color:var(--on-light-mid); }
[data-surface="light"] .evt-pick .evt span b,
[data-surface="limestone"] .evt-pick .evt span b{ color:var(--on-light); }
[data-surface="light"] .evt-pick .evt span i,
[data-surface="limestone"] .evt-pick .evt span i{ color:var(--on-light-mid); }
[data-surface="light"] .evt-pick .evt input:checked + span,
[data-surface="limestone"] .evt-pick .evt input:checked + span{
  border-color:var(--olive); background:rgba(31,48,80,.07); }
[data-surface="light"] .evt-pick .evt input:checked + span b,
[data-surface="limestone"] .evt-pick .evt input:checked + span b{ color:var(--olive); }

/* form controls */
[data-surface="light"] .field label,
[data-surface="limestone"] .field label{ color:var(--on-light); }
[data-surface="light"] .opt,
[data-surface="limestone"] .opt{ color:var(--on-light-mid); }
[data-surface="light"] input, [data-surface="light"] select, [data-surface="light"] textarea,
[data-surface="limestone"] input, [data-surface="limestone"] select, [data-surface="limestone"] textarea{
  background:#FFFDF8; border:1px solid var(--line-light); color:var(--on-light); }
[data-surface="light"] input::placeholder, [data-surface="light"] textarea::placeholder,
[data-surface="limestone"] input::placeholder, [data-surface="limestone"] textarea::placeholder{
  color:#66748C; }
[data-surface="light"] input:focus-visible, [data-surface="light"] select:focus-visible,
[data-surface="light"] textarea:focus-visible,
[data-surface="limestone"] input:focus-visible, [data-surface="limestone"] select:focus-visible,
[data-surface="limestone"] textarea:focus-visible{
  outline:2px solid var(--olive); outline-offset:1px; border-color:var(--olive); }
[data-surface="light"] .more summary,
[data-surface="limestone"] .more summary{ color:var(--on-light); }

/* catering menu accordions + add-ons on a light surface */
[data-surface="light"] .sel,
[data-surface="limestone"] .sel{ border-top-color:var(--line-light); }
[data-surface="light"] .sel details,
[data-surface="limestone"] .sel details{ border-bottom-color:var(--line-light); }
[data-surface="light"] .sel summary,
[data-surface="limestone"] .sel summary{ color:var(--on-light); }
[data-surface="light"] .sel summary:hover,
[data-surface="limestone"] .sel summary:hover{ color:var(--olive); }
[data-surface="light"] .sel summary i,
[data-surface="limestone"] .sel summary i{ color:var(--brass-on-light); }
[data-surface="light"] .sel__label,
[data-surface="limestone"] .sel__label{ color:var(--brass-on-light); }
[data-surface="light"] .sel__items,
[data-surface="limestone"] .sel__items{ color:var(--on-light-mid); }
[data-surface="light"] .addon,
[data-surface="limestone"] .addon{ border-color:var(--line-light); }
[data-surface="light"] .addon__name,
[data-surface="limestone"] .addon__name{ color:var(--on-light); }
[data-surface="light"] .addon__desc,
[data-surface="limestone"] .addon__desc{ color:var(--on-light-mid); }
[data-surface="light"] .addon__price,
[data-surface="limestone"] .addon__price{ color:var(--brass-on-light); }

/* comparison table row labels */
[data-surface="light"] .cmp__table tbody th,
[data-surface="limestone"] .cmp__table tbody th{ color:var(--brass-on-light); }

/* any remaining dark-base body copy that lands on ivory */
[data-surface="light"] .body-m,
[data-surface="limestone"] .body-m,
[data-surface="light"] .lead,
[data-surface="limestone"] .lead{ color:var(--on-light-mid); }
[data-surface="light"] .mcard__name,
[data-surface="limestone"] .mcard__name{ color:var(--on-light); }
[data-surface="light"] .mcard__desc,
[data-surface="limestone"] .mcard__desc{ color:var(--on-light-mid); }
[data-surface="light"] .mcard__price,
[data-surface="limestone"] .mcard__price{ color:var(--brass-on-light); }

/* ============================================================
   TOKEN RE-POINTING ON LIGHT SURFACES
   The original palette tokens are read by ~40 components and by
   a scattering of inline styles in the markup. Re-pointing the
   three text-carrying tokens inside a light section fixes every
   one of them at once — an inline style:color:var(--muted) now
   resolves to the light-surface muted, not the dark one. Only
   text tokens are re-pointed; --ivory stays put because it is
   also used as button foreground on the olive fill.
   ============================================================ */
[data-surface="light"], [data-surface="limestone"]{
  --gold:var(--brass-on-light);
  --muted:var(--on-light-mid);
  --bone:var(--on-light);
  --line-soft:var(--line-light);
  --line:var(--line-light);
}
/* components that paint the accent rather than write with it keep the
   original brass, so their dark foreground stays legible */
[data-surface="light"] .tour__play, [data-surface="limestone"] .tour__play,
[data-surface="light"] .price__ribbon, [data-surface="limestone"] .price__ribbon,
[data-surface="light"] .rail__arrows button:hover,
[data-surface="limestone"] .rail__arrows button:hover{ background:#A9BED8; }

/* ------------------------------------------------------------
   Dark islands inside a light section
   A few components paint their own espresso panel and sit on an
   ivory band — the buffet course cards, the 3D tour link, the
   table map. They must read the DARK palette, so the tokens the
   surface re-pointed above are handed back at the island edge.
   Any new dark-on-light card belongs in this list.
   ------------------------------------------------------------ */
[data-surface="light"] .bcourse,      [data-surface="limestone"] .bcourse,
[data-surface="light"] .buffet__tile, [data-surface="limestone"] .buffet__tile,
[data-surface="light"] .tour-link,    [data-surface="limestone"] .tour-link,
[data-surface="light"] .tables-map,   [data-surface="limestone"] .tables-map,
[data-surface="light"] .on-espresso,  [data-surface="limestone"] .on-espresso{
  --gold:#A9BED8;
  --muted:#9AA7BA;
  --bone:#E6EAF0;
  --line-soft:rgba(238,241,246,.14);
  --line:rgba(238,241,246,.18);
  color:var(--on-dark);
}
/* the surface pins heading colour by element name, which outranks a
   component class — so the island re-asserts it for its own children */
[data-surface="light"] :is(.bcourse,.buffet__tile,.tour-link,.tables-map,.on-espresso) :is(h1,h2,h3,h4,h5,.h-1,.h-2,.h-3,p,li,span,b,dt,dd),
[data-surface="limestone"] :is(.bcourse,.buffet__tile,.tour-link,.tables-map,.on-espresso) :is(h1,h2,h3,h4,h5,.h-1,.h-2,.h-3,p,li,span,b,dt,dd){
  color:inherit;
}
[data-surface="light"] :is(.bcourse,.buffet__tile,.tour-link,.tables-map,.on-espresso) :is(.bcourse__title,.tour-link__txt),
[data-surface="limestone"] :is(.bcourse,.buffet__tile,.tour-link,.tables-map,.on-espresso) :is(.bcourse__title,.tour-link__txt){
  color:var(--ivory);
}
[data-surface="light"] :is(.bcourse,.buffet__tile,.tour-link,.tables-map,.on-espresso) :is(.bcourse__lede,.bcourse__no,.tour-link__go),
[data-surface="limestone"] :is(.bcourse,.buffet__tile,.tour-link,.tables-map,.on-espresso) :is(.bcourse__lede,.bcourse__no,.tour-link__go){
  color:var(--muted);
}

/* ============================================================
   START HERE — the first choice on the homepage
   Two labelled lanes rather than one undifferentiated grid, so
   "I'm coming to eat" and "I'm booking an event" never compete
   in the same row. Cards inside a lane are peers; the lanes are
   not, which is the separation the whole redesign turns on.
   ============================================================ */
.choose{ display:grid; gap:clamp(34px,4vw,54px); margin-top:clamp(26px,3vw,42px); }
.lane__head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--line-light); margin-bottom:clamp(18px,2vw,26px); }
.lane__name{ font-family:var(--font-display); font-weight:400;
  font-size:clamp(21px,2vw,28px); color:var(--on-light); margin:0; }
.lane__note{ font-family:var(--font-body); font-size:13.5px; color:var(--on-light-mid); margin:0; }
.lane__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px); }

.ccard{ display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border:1px solid var(--line-light); border-radius:3px; overflow:hidden; background:#FFFDF8;
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.ccard:hover, .ccard:focus-visible{ border-color:rgba(31,48,80,.4); transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(28,43,69,.09); }
.ccard__img{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--sand); }
.ccard__img img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--ease); }
.ccard:hover .ccard__img img{ transform:scale(1.05); }
/* rooms we have no photograph of yet keep the mark rather than borrow someone else's room */
.ccard__img--ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(165deg,#1B2842,#101A2C); }
.ccard__img--ph img{ width:36px; height:auto; object-fit:contain; opacity:.9; }
.ccard__img--ph span{ font-family:var(--font-display); font-size:15px; letter-spacing:.18em;
  color:rgba(238,241,246,.72); }
.ccard__body{ padding:clamp(15px,1.6vw,20px) clamp(16px,1.7vw,22px) clamp(18px,1.9vw,24px);
  display:flex; flex-direction:column; gap:6px; flex:1; }
.ccard__name{ font-family:var(--font-serif); font-weight:420;
  font-size:clamp(17px,1.5vw,21px); color:var(--on-light); margin:0; }
.ccard__meta{ font-family:var(--font-ui); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass-on-light); }
.ccard__txt{ font-family:var(--font-body); font-size:13.5px; line-height:1.6;
  color:var(--on-light-mid); margin:2px 0 0; }
.ccard__go{ margin-top:auto; padding-top:14px; font-family:var(--font-ui); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--olive);
  display:inline-flex; align-items:center; gap:8px; }
.ccard:hover .ccard__go svg{ transform:translateX(4px); }
.ccard__go svg{ transition:transform .4s var(--ease); }

@media (max-width:900px){
  .lane__cards{ grid-template-columns:1fr; gap:16px; }
  .ccard{ flex-direction:row; align-items:stretch; }
  .ccard__img{ flex:0 0 38%; aspect-ratio:auto; }
  .ccard__body{ padding:15px 16px; }
  .ccard__txt{ display:none; }
  .ccard__go{ padding-top:10px; }
}
@media (max-width:420px){
  .ccard__img{ flex-basis:42%; }
  .ccard__name{ font-size:16px; }
}

/* ============================================================
   THE GATEWAY — "/" asks one question and offers three answers
   Three equal cinematic panels. Equal width, equal height, equal
   type scale: nothing here should read as the "main" one.
   ============================================================ */
.gate{ min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(88px,10vh,130px) 0 clamp(30px,4vh,52px); background:var(--espresso); }
.gate__intro{ text-align:center; max-width:56ch; margin:0 auto clamp(22px,2.8vh,36px);
  padding:0 clamp(20px,5vw,40px); }
/* the question is the setup, the panels are the answer — so the heading is
   sized to introduce them, not to out-shout them */
.gate__intro .h-1{ margin:12px 0 10px; color:var(--on-dark);
  font-size:clamp(30px,3.4vw,50px); line-height:1.08; }
.gate__intro p{ font-family:var(--font-body); font-size:clamp(13.5px,1.05vw,15px); line-height:1.6;
  color:var(--on-dark-mid); margin:0; }

/* Three panels butted flush edge to edge — one continuous band, not three
   floating cards. A hairline rule, not a gap, is what separates them. */
.gate__panels{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0; }
.gpanel{ position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:min(46vh,420px); overflow:hidden; border-radius:0; text-decoration:none;
  color:var(--on-dark); isolation:isolate; }
.gpanel + .gpanel{ box-shadow:inset 1px 0 0 rgba(238,241,246,.14); }
.gpanel__img{ position:absolute; inset:0; z-index:-2; }
.gpanel__img img{ width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform 1.3s cubic-bezier(.16,1,.3,1); }
/* The scrim has to work over a dark dining room AND a bright white hall, so
   it holds near-opaque through the whole text block and only opens up above it. */
.gpanel::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,rgba(9,15,29,.95) 0%,rgba(9,15,29,.9) 26%,rgba(9,15,29,.62) 48%,rgba(9,15,29,.26) 78%,rgba(9,15,29,.38) 100%);
  transition:opacity .7s var(--ease); }
.gpanel:hover .gpanel__img img,
.gpanel:focus-visible .gpanel__img img{ transform:scale(1.075); }
.gpanel:hover::after, .gpanel:focus-visible::after{ opacity:.88; }
.gpanel:focus-visible{ outline:2px solid var(--brass-light); outline-offset:3px; }

/* A percentage scrim on the panel cannot know how tall the text block is —
   a two-line name pushes the eyebrow up into the bright part of the photo.
   So the body carries its own scrim, anchored to the content itself. */
.gpanel__body{ position:relative; padding:clamp(18px,1.9vw,26px);
  display:flex; flex-direction:column; gap:7px; }
.gpanel__body::before{ content:""; position:absolute; left:0; right:0; bottom:0; top:-56px; z-index:-1;
  background:linear-gradient(to top,rgba(9,15,29,.94) 0%,rgba(9,15,29,.9) 62%,rgba(9,15,29,0) 100%); }
.gpanel__eyebrow{ font-family:var(--font-ui); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass-light); }
.gpanel__name{ font-family:var(--font-display); font-weight:400; margin:0;
  font-size:clamp(20px,1.75vw,26px); line-height:1.14; color:var(--on-dark); }
.gpanel__txt{ font-family:var(--font-body); font-size:13px; line-height:1.55;
  color:var(--on-dark-mid); margin:0; max-width:34ch; }
.gpanel__go{ margin-top:5px; display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-family:var(--font-ui); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark); padding:10px 16px; border:1px solid rgba(238,241,246,.4); border-radius:100px;
  transition:background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease); }
.gpanel:hover .gpanel__go, .gpanel:focus-visible .gpanel__go{
  background:var(--brass-light); border-color:var(--brass-light); color:#0E1628; }
.gpanel__go svg{ transition:transform .45s var(--ease); }
.gpanel:hover .gpanel__go svg{ transform:translateX(4px); }

/* the small facts a gateway is allowed to carry */
.gate__facts{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px clamp(18px,3vw,38px); margin-top:clamp(26px,3.4vh,42px);
  padding:0 clamp(20px,5vw,40px); font-family:var(--font-ui); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--on-dark-mid); text-align:center; }
.gate__facts a{ color:var(--on-dark-mid); border-bottom:1px solid rgba(238,241,246,.22); }
.gate__facts a:hover{ color:var(--brass-light); border-color:var(--brass-light); }
.gate__facts b{ color:var(--on-dark); font-weight:500; }

/* On a handset the panels keep the desktop treatment — photo behind, text on
   the scrim — just short enough that all three choices sit on one screen.
   Letting the image become a full-width block instead made each panel about
   a screen tall, which defeats the point of a chooser. */
@media (max-width:980px){
  .gate{ min-height:0; padding-top:clamp(88px,13vh,116px); }
  .gate__panels{ grid-template-columns:1fr; gap:0; }
  .gpanel{ min-height:190px; }
  .gpanel + .gpanel{ box-shadow:inset 0 1px 0 rgba(238,241,246,.16); }
  .gpanel__body{ padding:16px 20px 18px; gap:5px; }
  .gpanel__name{ font-size:21px; }
  .gpanel__txt{ font-size:12.5px; max-width:38ch; }
  .gpanel__go{ align-self:flex-start; padding:9px 15px; }
}
@media (max-width:600px){
  .gpanel{ min-height:170px; }
  .gpanel__txt{ display:none; }          /* the name and the button carry it */
  .gpanel__name{ font-size:20px; }
  .gpanel__body{ padding:14px 18px 16px; }
}

/* two-up variants of the card grids */
.lane__cards--2{ grid-template-columns:repeat(2,1fr); }
.hgal--four{ grid-template-columns:repeat(3,1fr); }
.hgal--four figure:nth-child(1){ grid-column:span 2; grid-row:span 2; aspect-ratio:1/1; }
.hgal--four figure:nth-child(6){ grid-column:auto; grid-row:auto; aspect-ratio:1/1; }

/* actions under a 3D tour */
.tourbar{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center;
  margin-top:clamp(20px,2.4vw,30px); }
.tourbar--left{ justify-content:flex-start; }
.tourbar__note{ margin:clamp(16px,2vw,24px) 0 0; text-align:center;
  font-family:var(--font-body); font-size:13px; color:var(--on-dark-mid); }
.tourbar__note b{ color:var(--on-dark); font-weight:500; }
.tourbar__note a{ color:var(--brass-light); border-bottom:1px solid rgba(169,190,216,.4); }

@media (max-width:900px){
  .lane__cards--2{ grid-template-columns:1fr; }
  .hgal--four{ grid-template-columns:repeat(2,1fr); }
  .hgal--four figure:nth-child(1){ grid-column:span 2; grid-row:auto; aspect-ratio:16/10; }
  .tourbar{ flex-direction:column; align-items:stretch; }
  .tourbar .btn{ justify-content:center; }
}

/* ============================================================
   JOURNEY CHROME
   The header tells you which Olympia you are standing in, the
   crumb tells you where inside it, and "Explore Olympia" is the
   only control that crosses between the three.
   ============================================================ */
.brand__section{ font-family:var(--font-ui); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass-light); padding-left:12px; margin-left:12px;
  border-left:1px solid rgba(169,190,216,.4); white-space:nowrap; }
.site-head--gateway .brand__section{ display:none; }

.nav a.is-current{ color:var(--brass-light); }
.nav a.is-current::after{ transform:scaleX(1); }

/* the switcher reuses the dropdown mechanics but reads as a menu of places */
.nav__xo .nav__parent{ background:none; border:0; cursor:pointer; font:inherit; color:inherit;
  display:inline-flex; align-items:center; gap:6px; padding:0; }
.nav__sub--xo{ min-width:300px; padding:8px; }
.xo__item{ display:block; padding:12px 14px; border-radius:3px; text-decoration:none;
  transition:background .3s var(--ease); }
.xo__item:hover, .xo__item:focus-visible{ background:rgba(169,190,216,.12); }
.xo__item[aria-current="true"]{ background:rgba(169,190,216,.16); }
.xo__item b{ display:block; font-family:var(--font-serif); font-weight:450; font-size:15px;
  color:var(--ivory); margin-bottom:3px; }
.xo__item i{ display:block; font-style:normal; font-family:var(--font-body); font-size:12px;
  line-height:1.5; color:var(--muted); }

/* breadcrumbs — small, and never the loudest thing on the page */
.crumbs{ padding:0 clamp(20px,5vw,64px); margin:clamp(88px,10vh,116px) 0 0; }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center;
  gap:8px; font-family:var(--font-ui); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }
.crumbs li{ color:var(--muted); display:flex; align-items:center; gap:8px; }
.crumbs li + li::before{ content:"/"; color:rgba(142,154,173,.55); }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--gold); }
.crumbs li[aria-current="page"]{ color:var(--bone); }
/* A full-bleed hero already announces the section, and a crumb strip above it
   would push the hero off the fold — so those pages keep the crumb for screen
   readers and hide it visually. Inner pages show it. */
.crumbs:has(+ main > .hero:first-child),
.crumbs:has(+ main > .gate:first-child){
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; margin:0; padding:0;
}

/* mobile nav: where am I, what's here, then how to leave */
.m-nav__where{ font-family:var(--font-display); font-size:22px; color:var(--ivory);
  margin:0 0 6px; padding-bottom:16px; border-bottom:1px solid rgba(238,241,246,.14); }
.m-nav a.is-current{ color:var(--gold); }
.m-nav__cta{ margin-top:14px !important; padding:15px 20px !important; border-radius:100px;
  background:var(--gold); color:#0E1628 !important; text-align:center; justify-content:center;
  font-family:var(--font-ui) !important; font-size:12px !important; letter-spacing:.14em;
  text-transform:uppercase; }
.m-nav__cta em{ display:none; }
.m-nav__xo{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(238,241,246,.14); }
.m-nav__xo-head{ font-family:var(--font-ui); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin:0 0 10px; }
.m-nav__xo .xo__item{ padding:11px 12px; }

/* one sticky action, never three */
.mbar{ grid-template-columns:1fr; }

/* The dropdown JS tracks state in .is-open; until now only :hover and
   :focus-within actually revealed the panel, so a keyboard ArrowDown set
   aria-expanded="true" over a panel that was still visually hidden. */
.nav__has-sub.is-open > .nav__sub{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}

/* touch targets missed by the first pass: the gateway facts strip and the
   footer's return-to-gateway link */
@media (max-width:900px){
  .gate__facts{ gap:4px 18px; }
  .gate__facts span{ display:inline-flex; align-items:center; min-height:40px; }
  .gate__facts a{ display:inline-flex; align-items:center; min-height:44px; padding:0 2px; }
  .footer__gateway{ min-height:44px; }
}
.footer__gateway{ display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); }
.footer__gateway:hover{ color:var(--ivory); }

/* ============================================================
   ANCHOR OFFSET
   The header is fixed, so a jump to #packages parked the section
   flush with the viewport top — behind the header — and read as
   a dead link. Every in-page target reserves the header's height.
   ============================================================ */
main [id],
main section[id],
.jcard[id]{ scroll-margin-top:clamp(96px,11vh,132px); }

/* A sub-page opens with a type-only header rather than a hero photo, so the
   crumb strip has to be visible again on those pages — the :has() rule that
   hides it only applies where a full-bleed hero follows. */
.section--head{ padding-bottom:clamp(10px,1.4vw,20px); }
.section--head + .section{ padding-top:clamp(30px,4vw,56px); }

/* `.qcard__img img` (width/height 100%) and `.priv__ph img` (52px mark) have
   equal specificity, so the card rule won on source order and stretched the
   Olympia mark to the full tile — pushing the room label out of the clip box.
   The placeholder keeps its own mark size inside a card. */
.qcard__img .priv__ph img,
.space__img .priv__ph img,
.ccard__img .priv__ph img{ width:52px; height:auto; object-fit:contain; }

/* French runs longer than English: "Explorer Olympia" wrapped onto a second
   line and pushed the scrolled header from 56px to 78px. Nav items are single
   lines by definition — none of these labels should ever break. */
.nav > a,
.nav__parent,
.nav__xo .nav__parent,
.head-cta .btn{ white-space:nowrap; }

/* A hero that carries two sentences cannot wear full display scale — the
   restaurant headline was five lines deep, taller than the photo behind it.
   The duo modifier steps down and lets the line run wider, and the second
   sentence sits slightly subordinate to the first. */
.h-display--duo{ font-size:clamp(34px,4.8vw,66px); line-height:1.08; letter-spacing:-.012em; }
.h-display--duo em{ font-size:.88em; }