/* ==========================================================================
   Mafuramhepo Lakeside Resort — design system
   Language: light, photography-led, one serif display (Antic Didone) over a
   quiet sans (DM Sans), square outline buttons, one white ground.
   ========================================================================== */

/* ---- fonts: self-hosted (§22.5) ---- */
@font-face{font-family:"Antic Didone";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/antic-didone-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/dm-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- tokens ---- */
:root{
  --ink:#1C2233; --ink-soft:#4B5163; --ink-mute:#6B7085;
  --paper:#FFFFFF; --paper-alt:#F6F7F8;
  --stone:#E4E6E9; --stone-deep:#BFC3CB;
  --water:#12809E; --water-hover:#0E6A83; --water-deep:#1B2A4A; --water-light:#7FCBDD; --water-tint:#EAF5F8;
  --bronze:#E28A45; --bronze-hover:#EF9B55; --sun:#F2C464;
  --success:#2E7D5B; --warning:#8A5310; --error:#C0392B;
  --focus:#12809E;

  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Antic Didone",Didot,"Bodoni MT",Georgia,serif;
  --font-body:var(--font);

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;--s11:160px;
  --section:clamp(56px,6vw,96px);
  --section-tight:clamp(40px,4.5vw,64px);

  --narrow:720px; --standard:1120px; --wide:1440px;
  --gutter:clamp(20px,4vw,64px);

  --radius:0px; --radius-lg:0px; --radius-img:14px;
  --ease:cubic-bezier(.23,1,.32,1);
  --t-fast:160ms; --t-med:280ms;

  --fs-display:clamp(2.5rem,1.5rem + 3.6vw,4.5rem);
  --fs-h1:clamp(2.25rem,1.4rem + 2.6vw,3.75rem);
  --fs-h2:clamp(1.625rem,1.2rem + 1.8vw,3rem);
  --fs-h3:clamp(1.375rem,1.2rem + .6vw,1.75rem);
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem; --fs-micro:.8125rem;
  --track:.18em;
  --lh:1.8;
}
@media (max-width:639px){
  :root{
    --lh:1.65;
    --fs-body:1rem;
    --fs-lead:1.0625rem;
    --section:clamp(44px,10vw,64px);
    --section-tight:clamp(32px,7vw,48px);
    --gutter:20px;
  }
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh,1.8);overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,video,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.2em}
ul,ol{margin:0 0 1.2em;padding-left:1.2em}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:1000}
.skip:focus{left:8px}
#main{scroll-margin-top:130px}
#main:focus{outline:none}

/* ---- typography ---- */
h1,h2,h3,h4,.display{font-family:var(--font-display);font-weight:400;line-height:1.15;letter-spacing:.01em;margin:0 0 .5em;text-wrap:balance}
.display{font-size:var(--fs-display);line-height:1.1}
h1,.h1{font-size:var(--fs-h1)}
h2,.h2{font-size:var(--fs-h2)}
h3,.h3{font-size:var(--fs-h3)}
h4,.h4{font-family:var(--font);font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);margin:0 0 1em}
.lead{font-size:var(--fs-lead);line-height:1.75;color:var(--ink-soft)}
.eyebrow{font-family:var(--font);font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s5)}
.subhead{font-size:1.25rem;font-weight:500;color:var(--ink);margin:0 0 var(--s5)}
.meta{font-size:var(--fs-small);color:var(--ink-mute)}
.micro{font-size:var(--fs-micro);color:var(--ink-mute)}
.num{font-variant-numeric:tabular-nums}
.prose{max-width:62ch}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose a,.link{color:var(--water);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover,.link:hover{color:var(--water-hover)}
.rule{border:0;border-top:1px solid var(--stone);margin:0}

/* ---- layout ---- */
.wrap{width:100%;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(var(--narrow) + 2*var(--gutter))}
.wrap--standard{max-width:calc(var(--standard) + 2*var(--gutter))}
.wrap--wide{max-width:calc(var(--wide) + 2*var(--gutter))}
.sec{padding-block:var(--section)}
.sec--tight{padding-block:var(--section-tight)}
.sec--paper,.sec--alt,.sec--dark{background:var(--paper);color:var(--ink)}
/* two white sections in a row do not need both their paddings: one gap between them */
.sec + .sec,.eti-edge + .sec{padding-top:0}
.sec--flush{padding-block:0}
.grid{display:grid;gap:var(--gutter)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}}
.stack>*+*{margin-top:var(--s5)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap}
.sec-head{max-width:var(--narrow);margin-bottom:var(--s6)}
.sec-head h2{margin-bottom:var(--s3)}
.sec-head .lead{margin:0}
.sec-head--center{margin-inline:auto;text-align:center}

/* ---- images ---- */
.pic{position:relative;overflow:hidden;background:var(--paper-alt);border-radius:var(--radius-img)}
.pic img{width:100%;height:100%;object-fit:cover}
/* a hairline inside the crop keeps a pale photograph from dissolving into white */
.pic::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(28,34,51,.07)}
.pic--empty{background:var(--paper-alt)}
figcaption{font-size:var(--fs-micro);color:var(--ink-mute);margin-top:var(--s3)}

/* ---- buttons: square, uppercase, tracked ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);min-height:48px;padding:12px 28px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--font);font-size:.8125rem;font-weight:500;letter-spacing:var(--track);text-transform:uppercase;line-height:1.2;cursor:pointer;text-align:center;white-space:nowrap;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn:active{transform:scale(.98)}
.btn:hover{background:var(--ink);color:#fff}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:var(--water-deep);border-color:var(--water-deep)}
.btn--secondary{background:transparent;color:var(--ink)}
.btn--ghost{border-color:#fff;color:#fff}
.btn--ghost:hover{background:#fff;color:var(--ink)}
.btn--booking{background:var(--bronze);border-color:var(--bronze);color:var(--ink)}
.btn--booking:hover{background:var(--bronze-hover);border-color:var(--bronze-hover);color:var(--ink)}
.btn--tertiary{border:0;padding:6px 0;min-height:0;color:var(--ink);background:none;position:relative}
.btn--tertiary::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform var(--t-med) var(--ease)}
.btn--tertiary:hover{background:none;color:var(--water)}
.btn--wa{border-color:var(--stone-deep);background:#fff;color:var(--ink);text-transform:none;letter-spacing:0;font-size:.9rem}
.btn--wa:hover{background:#fff;border-color:var(--ink);color:var(--ink)}
.btn--wa svg{width:18px;height:18px}
.btn--block{width:100%}
.btn--sm{min-height:44px;padding:10px 22px;font-size:.75rem}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.btn.is-loading{position:relative;color:transparent}
.btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid #fff;border-color:#fff transparent #fff transparent;border-radius:50%;animation:spin .7s linear infinite}
/* uppercase and tracked, a label like "Long stays & remote work" is 355px wide:
   on a small phone it must wrap rather than push the page sideways */
@media (max-width:479px){
  .btn{white-space:normal;padding:12px 18px;letter-spacing:.12em;max-width:100%}
  .cluster>*{min-width:0;max-width:100%}
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- forms ---- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--s4)}
.field>label,.label{font-size:var(--fs-micro);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.field .help{font-size:var(--fs-micro);color:var(--ink-mute);text-transform:none;letter-spacing:0}
.input,.select,.textarea{width:100%;min-height:46px;padding:10px 14px;background:#fff;border:1px solid var(--stone-deep);font-size:16px;color:var(--ink);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.textarea{min-height:140px;resize:vertical;line-height:1.5}
.input:focus,.select:focus,.textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--water-tint)}
.input::placeholder{color:var(--ink-mute)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231C2233' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--error)}
.error{display:flex;gap:6px;align-items:flex-start;font-size:var(--fs-small);color:var(--error)}
.error::before{content:"!";flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid currentColor;font-size:10px;font-weight:700;margin-top:3px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);color:var(--ink-soft)}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--stone-deep);background:#fff;height:46px}
.stepper button{width:44px;height:100%;border:0;background:none;cursor:pointer;font-size:1.2rem;color:var(--ink-soft)}
.stepper button:hover{color:var(--ink)}
.stepper output{min-width:36px;text-align:center;font-weight:500;font-variant-numeric:tabular-nums}
.form-row{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.alert{padding:var(--s4) var(--s5);border:1px solid var(--water-light);background:var(--water-tint);margin-bottom:var(--s5);font-size:var(--fs-small)}
.alert--error{border-color:#E8B4AE;background:#FBECEA}
.alert--success{border-color:#B7D9C6;background:#EAF4EE}
.alert--warning{border-color:#E9CFA5;background:#FBF1E3}
.alert ul{margin:6px 0 0}
.honey{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}

/* ---- announcement + header ---- */
.announce{background:var(--ink);color:#fff;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:12px var(--gutter)}
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--stone)}
.hdr__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s5);min-height:120px}
.burger{display:none}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink);justify-self:start}
.brand__img{height:96px;width:auto;flex:none}
.brand__text{font-family:var(--font-display);font-size:1.375rem;line-height:1.1;letter-spacing:.02em}
.brand__text small{display:block;font-family:var(--font);font-size:var(--fs-micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-mute);margin-top:4px}
.brand--logo-only .brand__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nav{display:flex;justify-content:center;align-items:center;gap:clamp(16px,2vw,32px);justify-self:center}
.nav a{position:relative;font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-soft);padding:14px 0;white-space:nowrap;transition:color var(--t-fast) var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease)}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.hdr__cta{justify-self:end}
/* between one row and a phone: the nav wraps under the brand, nothing hidden */
@media (max-width:1279px){
  .hdr{position:static}
  .hdr__in{grid-template-columns:auto 1fr;grid-template-areas:"brand cta" "nav nav";min-height:0;row-gap:0;padding-block:12px 0}
  .brand{grid-area:brand}
  .hdr__cta{grid-area:cta}
  .nav{grid-area:nav;flex-wrap:wrap;gap:0 var(--s4);border-top:1px solid var(--stone);margin-top:12px;padding-block:6px;width:100%}
  .nav a{padding:6px 0}
  .nav a::after{bottom:1px}
}
@media (max-width:1023px){.brand__img{height:64px}}

/* ---- phones: one compact sticky bar and a full-screen menu ---- */
@media (max-width:767px){
  .hdr{position:sticky;top:0}
  .hdr__in{grid-template-areas:none;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--s3);min-height:60px;padding-block:0}
  .nav{display:none}
  .brand{grid-area:auto;justify-self:center}
  .brand__img{height:40px}
  .hdr__cta{grid-area:auto;justify-self:end}
  .hdr__cta .btn{min-height:40px;padding:9px 14px;font-size:.6875rem;letter-spacing:.1em}
  .burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-10px;background:none;border:0;cursor:pointer;color:var(--ink)}
  .burger span{display:block;width:22px;height:1.5px;background:currentColor;position:relative;transition:background var(--t-fast) var(--ease)}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform var(--t-med) var(--ease)}
  .burger span::before{top:-7px}
  .burger span::after{top:7px}
  body.nav-open .burger span{background:transparent}
  body.nav-open .burger span::before{transform:translateY(7px) rotate(45deg)}
  body.nav-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}
}
.menu{position:fixed;inset:0;z-index:70;background:#fff;overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-6px);transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
body.nav-open,body.sheet-open{overflow:hidden}
body.nav-open .menu{opacity:1;transform:none}
.menu__in{min-height:100%;display:flex;flex-direction:column;padding:0 var(--gutter) var(--s7)}
.menu__top{display:flex;align-items:center;justify-content:space-between;min-height:60px;border-bottom:1px solid var(--stone);margin-bottom:var(--s5)}
.menu__label{font-size:var(--fs-micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-mute)}
.menu__close{background:none;border:0;cursor:pointer;color:var(--ink);width:44px;height:44px;margin-right:-10px;display:inline-flex;align-items:center;justify-content:center}
.menu__nav{list-style:none;margin:0;padding:0}
.menu__nav li+li{border-top:1px solid var(--stone)}
.menu__nav a{display:block;font-family:var(--font-display);font-size:1.5rem;padding:14px 0;color:var(--ink)}
.menu__nav a[aria-current=page]{color:var(--water)}
.menu__foot{margin-top:var(--s6)}
.menu__contact{margin:var(--s5) 0 0;font-size:var(--fs-small);color:var(--ink-soft);line-height:2}
.menu__contact a{color:var(--ink-soft)}
@media (min-width:768px){.menu{display:none}}

/* ---- the bar sits on the hero ----
   A page that opens with a hero floats the header on the photograph in white,
   then turns it into an ordinary white bar once the hero has passed (site.js
   adds .is-solid). The float rules carry :not(.is-solid) so they stop applying
   rather than fighting the default styles on specificity. */
@media (min-width:1280px){
  body:has(main > .hero:first-child):not(:has(.announce)) .hdr{
    position:fixed;left:0;right:0;top:0;
    transition:background var(--t-med) var(--ease),border-color var(--t-med) var(--ease)}
  body:has(main > .hero:first-child):not(:has(.announce)) .hdr__in{position:relative;z-index:1}
  body:has(main > .hero:first-child):not(:has(.announce)) .hdr::before{
    content:"";position:absolute;inset:0 0 auto;height:220%;pointer-events:none;opacity:0;
    background:linear-gradient(180deg,rgba(20,26,40,.55) 0%,rgba(20,26,40,.28) 45%,rgba(20,26,40,0) 100%);
    transition:opacity var(--t-med) var(--ease)}

  body:has(main > .hero:first-child):not(:has(.announce)) .hdr:not(.is-solid){background:transparent;border-bottom-color:transparent}
  body:has(main > .hero:first-child):not(:has(.announce)) .hdr:not(.is-solid)::before{opacity:1}
  body:has(main > .hero:first-child):not(:has(.announce)) .hdr:not(.is-solid) .brand__img{filter:brightness(0) invert(1)}
  body:has(main > .hero:first-child):not(:has(.announce)) .hdr:not(.is-solid) .nav a{color:rgba(255,255,255,.88)}
  body:has(main > .hero:first-child):not(:has(.announce)) .hdr:not(.is-solid) .nav a:hover,
  body:has(main > .hero:first-child):not(:has(.announce)) .hdr:not(.is-solid) .nav a[aria-current=page]{color:#fff}
  body:has(main > .hero:first-child):not(:has(.announce)) .hdr:not(.is-solid) .nav a::after{background:#fff}
  body:has(main > .hero:first-child):not(:has(.announce)) .hdr:not(.is-solid) .btn:not(.btn--booking){border-color:#fff;color:#fff;background:transparent}
  body:has(main > .hero:first-child):not(:has(.announce)) .hdr:not(.is-solid) .btn:not(.btn--booking):hover{background:#fff;color:var(--ink)}

  /* the hero starts at the top of the window, so it owns the full height */
  body:has(main > .hero:first-child):not(:has(.announce)) .hero--full{min-height:100svh}
  body:has(main > .hero:first-child):not(:has(.announce)) main > .hero:first-child .hero__in{padding-top:calc(121px + clamp(24px,3vw,56px))}
  body:has(main > .hero:first-child):not(:has(.announce)) main > .hero:first-child.hero--half{min-height:min(64vh,620px)}
}

/* ---- booking form (hero strip, search page, closing CTA) ---- */
.bbar{background:transparent;border:0}
.bbar__form{display:grid;grid-template-columns:1fr 1fr 130px 130px auto;gap:var(--s3);align-items:end;padding:var(--s4);background:var(--ink);color:#fff}
.bbar__form .field{margin:0;gap:6px}
.bbar__form .field>label{color:rgba(255,255,255,.75)}
.bbar__form .input,.bbar__form .select{border-color:#fff;min-height:50px}
.bbar__form .btn{min-height:50px}
.bbar__form .btn:not(.btn--booking){background:#fff;color:var(--ink);border-color:#fff}
.bbar__form .btn:not(.btn--booking):hover{background:var(--paper-alt)}
.bbar__meta{font-size:var(--fs-micro);color:var(--ink-mute);padding-top:var(--s3)}
.bbar__toggle,.bbar__close{display:none}
@media (max-width:1023px){.bbar__form{grid-template-columns:1fr 1fr}.bbar__form .btn{grid-column:1/-1}}
@media (max-width:639px){
  .bbar__toggle{display:flex;width:100%}
  .bbar .bbar__form{display:none}
  .bbar__form{grid-template-columns:1fr}
  .bbar__form .btn{grid-column:auto}
  /* The open sheet is the panel itself, not a fixed child of it: .hero__book sets
     a z-index, which made a stacking context the child could not escape, so the
     header drew over the sheet and its close button was unreachable. */
  .bbar.is-open{position:fixed;inset:0;z-index:80;background:#fff;color:var(--ink);padding:0;display:block;overflow-y:auto;overscroll-behavior:contain}
  .bbar.is-open .bbar__toggle{display:none}
  .bbar.is-open .bbar__form{display:grid;grid-template-columns:1fr;position:static;background:#fff;color:var(--ink);border:0;padding:var(--s5) var(--gutter) var(--s7);align-content:start}
  .bbar.is-open .bbar__form::before{content:"Check availability";display:block;font-family:var(--font-display);font-size:1.375rem;color:var(--ink);margin-bottom:var(--s4)}
  .bbar.is-open .bbar__form .field>label{color:var(--ink-soft)}
  .bbar.is-open .bbar__form .input,.bbar.is-open .bbar__form .select{border-color:var(--stone-deep)}
  .bbar.is-open .bbar__form .btn{margin-top:var(--s3)}
  .bbar.is-open .bbar__form .btn:not(.btn--booking){background:var(--ink);color:#fff;border-color:var(--ink)}
  .bbar.is-open .bbar__close{display:flex;position:absolute;top:10px;right:calc(var(--gutter) - 10px);z-index:81;background:none;border:0;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;font-size:1.6rem;line-height:1;color:var(--ink)}
}

/* ---- hero ---- */
.hero{position:relative;display:flex;align-items:center;min-height:56vh;background:var(--water-deep);color:#fff;overflow:hidden}
.hero--full{min-height:calc(100svh - 121px)}
.hero--three_quarter{min-height:70vh}
.hero--half{min-height:min(56vh,560px)}
.hero .pic,.hero>picture{position:absolute;inset:0;aspect-ratio:auto!important;border-radius:0}
.hero .pic::after{display:none}
.hero .pic img{width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,34,51,.1) 0%,rgba(28,34,51,.25) 50%,rgba(28,34,51,var(--ov,.5)) 100%)}
.hero--light{--ov:.35}.hero--medium{--ov:.5}.hero--strong{--ov:.65}
.hero--nomedia{background:linear-gradient(180deg,#26385F 0%,var(--water-deep) 100%)}
.hero--nomedia::after{display:none}
.hero__in{position:relative;z-index:1;width:100%;padding-block:clamp(48px,7vw,96px)}
.hero--has-book .hero__in{padding-bottom:clamp(120px,16vw,180px)}
.hero__body{max-width:var(--narrow)}
.hero--center .hero__body{margin-inline:auto;text-align:center;max-width:1000px}
.hero .eyebrow{color:rgba(255,255,255,.85)}
.hero .display{color:#fff;margin-bottom:var(--s6);max-width:none}
.hero .sub{font-size:var(--fs-lead);color:rgba(255,255,255,.9);max-width:56ch;margin:0 auto var(--s6)}
.hero--left .sub{margin-left:0}
.hero__book{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--gutter) var(--s6)}
.hero__book .bbar__form{width:100%;max-width:1180px;margin-inline:auto}
@media (max-width:1279px){.hero--full{min-height:78svh}}
@media (max-width:639px){
  .hero .display{font-size:clamp(2rem,7.5vw,2.5rem);margin-bottom:var(--s4)}
  .hero .sub{font-size:1rem;margin-bottom:var(--s5)}
  .hero .eyebrow{font-size:.625rem;letter-spacing:.1em;margin-bottom:var(--s4)}
  .hero--full{min-height:72svh}
  .hero__in{padding-block:var(--s7)}
  .hero .btn{width:100%}
  .hero__book{position:relative;width:100%;padding:0 var(--gutter) var(--s6)}
  .hero__book .bbar__toggle:not(.btn--booking){background:#fff;color:var(--ink);border-color:#fff}
  .hero--has-book .hero__in{padding-bottom:var(--s5)}
  .hero{flex-direction:column;justify-content:center;align-items:stretch}
  .hero--full{min-height:78svh}
}

/* ---- editorial text + image ---- */
.eti{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.eti--left{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.eti--left .eti__media{order:-1}
.eti__body{max-width:56ch}
.eti__body h2{margin-bottom:var(--s5)}
.eti__body .prose{color:var(--ink-soft)}
.eti__body .btn{margin-top:var(--s4)}
@media (max-width:1023px){.eti,.eti--left{grid-template-columns:minmax(0,1fr)}.eti__media,.eti--left .eti__media{order:-1}}
/* edge: the photograph runs to the viewport edge, the words sit on the page grid */
.eti-edge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;margin-block:var(--section-tight)}
.eti-edge__body{display:flex;flex-direction:column;justify-content:center;padding:var(--s6) clamp(32px,5vw,96px) var(--s6) max(var(--gutter),calc((100vw - var(--wide)) / 2 + var(--gutter)))}
.eti-edge--left .eti-edge__body{order:2;padding:var(--s6) max(var(--gutter),calc((100vw - var(--wide)) / 2 + var(--gutter))) var(--s6) clamp(32px,5vw,96px)}
.eti-edge__body>*{max-width:56ch}
/* the band runs off the side of the screen, so only the corners that stay on
   the page are rounded: it reads as a panel tucked into the text, not a slab */
.eti-edge__media .pic{aspect-ratio:16/10!important;max-height:52vh;border-radius:var(--radius-img) 0 0 var(--radius-img)}
.eti-edge--left .eti-edge__media .pic{border-radius:0 var(--radius-img) var(--radius-img) 0}
@media (max-width:1023px){.eti-edge__media .pic,.eti-edge--left .eti-edge__media .pic{border-radius:0}.eti-edge__media .pic::after{display:none}}
.eti-edge--left .eti-edge__media{order:1}
@media (max-width:1023px){.eti-edge{grid-template-columns:minmax(0,1fr);margin-block:var(--section-tight)}.eti-edge__media,.eti-edge--left .eti-edge__media{order:-1}.eti-edge__media .pic{aspect-ratio:4/3!important;max-height:44vh}.eti-edge__body,.eti-edge--left .eti-edge__body{padding:var(--s5) var(--gutter) 0}}
@media (max-width:639px){.eti-edge__media .pic{aspect-ratio:3/2!important;max-height:34vh}.eti-edge__body h2{margin-bottom:var(--s3)}.eti-edge__body .subhead{font-size:1.0625rem;margin-bottom:var(--s3)}}
.bleed{width:100%}
.bleed .pic{aspect-ratio:21/9;max-height:56vh;border-radius:0}
.bleed .pic::after{display:none}
@media (max-width:639px){.bleed .pic{aspect-ratio:4/5}}
.bleed figcaption{padding:var(--s3) var(--gutter) 0}
.quote{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.35;max-width:30ch;margin:0}
.quote+.attr{margin-top:var(--s5)}
.attr{font-size:var(--fs-small);color:var(--ink-mute)}
.facts{display:grid;gap:var(--s6) var(--gutter);border-top:1px solid var(--stone);padding-top:var(--s5)}
.facts--2{grid-template-columns:repeat(2,minmax(0,1fr))}.facts--3{grid-template-columns:repeat(3,minmax(0,1fr))}.facts--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:639px){.facts--3,.facts--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* an email address is one unbreakable 32-character word: two columns on a phone overflows */
@media (max-width:479px){.facts--2,.facts--3,.facts--4{grid-template-columns:minmax(0,1fr)}}
.fact dt{font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px}
.fact dd{margin:0;font-family:var(--font-display);font-size:var(--fs-h3);overflow-wrap:anywhere}

/* ---- rooms ---- */
.rooms{display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:repeat(4,minmax(0,1fr))}
.room{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.room .pic{aspect-ratio:4/3}
.room__body{display:flex;flex-direction:column;gap:6px}
.room__body h3{margin:0}
.room__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);align-items:baseline;font-size:var(--fs-small);color:var(--ink-soft)}
.room__price{font-weight:500;color:var(--ink);white-space:nowrap}
.room__price small{font-size:var(--fs-micro);color:var(--ink-mute);font-weight:400}
.room .pic img{transition:transform 700ms var(--ease)}
.room{transition:transform var(--t-med) var(--ease)}
@media (hover:hover) and (pointer:fine){.room:hover .pic img{transform:scale(1.04)}.room:hover{transform:translateY(-2px)}}
@media (max-width:1279px){.rooms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.rooms{grid-template-columns:minmax(0,1fr);gap:var(--s6)}.room .pic{aspect-ratio:3/2}}

/* ---- experiences: three portrait cards ---- */
.xgrid{display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:repeat(3,minmax(0,1fr))}
.xcard{display:flex;flex-direction:column;gap:var(--s4);min-width:0;color:var(--ink)}
.xcard .pic{aspect-ratio:4/3}
.xcard h3{margin:0 0 var(--s3)}
.xcard p{margin:0;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xcard .pic img{transition:transform 700ms var(--ease)}
.xcard{transition:transform var(--t-med) var(--ease)}
@media (hover:hover) and (pointer:fine){.xcard:hover .pic img{transform:scale(1.04)}.xcard:hover{transform:translateY(-2px)}}
@media (max-width:1023px){.xgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.xgrid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}.xcard .pic{aspect-ratio:3/2}}
/* index page mosaic (experiences listing) */
.mosaic{display:grid;gap:var(--s6) var(--s5);grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{display:flex;flex-direction:column;gap:var(--s3);min-width:0;color:var(--ink)}
.tile .pic{aspect-ratio:3/2;width:100%}
.tile__body h3{margin:0 0 3px;font-size:1.1875rem}
.tile__body .micro{color:var(--ink-soft);font-size:var(--fs-small);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .pic img{transition:transform 700ms var(--ease)}
.tile{transition:transform var(--t-med) var(--ease)}
@media (hover:hover) and (pointer:fine){.tile:hover .pic img{transform:scale(1.04)}.tile:hover{transform:translateY(-2px)}}
@media (max-width:1279px){.mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
  .tile{gap:var(--s2)}
  .tile__body h3{font-size:1rem;line-height:1.25}
  .tile__body .micro{font-size:.8125rem;-webkit-line-clamp:3}
}
@media (max-width:359px){.mosaic{grid-template-columns:minmax(0,1fr)}}

/* listing pages: the group heading is a signpost, not a title page */
.listing__head{margin-bottom:var(--s6)}
.listing__group+.listing__group{margin-top:var(--s8)}
.listing__group>.between{margin-bottom:var(--s5)}
.listing__group h2{font-size:var(--fs-h3);margin:0 0 4px}
.listing__group .lead{font-size:var(--fs-small);color:var(--ink-mute);margin:0}
@media (max-width:767px){.listing__group+.listing__group{margin-top:var(--s7)}.listing__head{margin-bottom:var(--s5)}}

/* ---- amenities ---- */
.amen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s7) var(--s6);text-align:center;list-style:none;padding:0;margin:0}
.amen li{display:flex;flex-direction:column;align-items:center;gap:var(--s4);font-size:var(--fs-small);color:var(--ink-soft)}
.amen svg{width:44px;height:44px;stroke:var(--ink);stroke-width:1.25;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1023px){.amen{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s5)}}
@media (max-width:639px){
  /* 15 amenities in two columns was 900px of icons: three tighter columns halves it */
  .amen{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--s3)}
  .amen li{gap:var(--s2);font-size:.75rem;line-height:1.35}
  .amen svg{width:30px;height:30px}
}

/* ---- testimonials ---- */
.tq{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.tq blockquote{margin:0;padding-top:var(--s4);border-top:1px solid var(--stone)}
.tq p{font-family:var(--font-display);font-size:1.375rem;line-height:1.5;margin-bottom:var(--s4);color:var(--ink)}
@media (max-width:639px){.tq p{font-size:1.125rem;line-height:1.55}.tq{gap:var(--s5)}}

/* ---- gallery ---- */
.gal{columns:3;column-gap:var(--s4)}
.gal--2{columns:2}.gal--4{columns:4}
.gal figure{margin:0 0 var(--s4);break-inside:avoid}
.gal a{overflow:hidden;border-radius:var(--radius-img)}
.gal img{transition:transform 700ms var(--ease)}
@media (hover:hover) and (pointer:fine){.gal a:hover img{transform:scale(1.04)}}
@media (max-width:1023px){.gal,.gal--4{columns:2}}
@media (max-width:639px){.gal,.gal--2,.gal--4{columns:1}}
.gal a{display:block}
dialog.lb{border:0;background:rgba(28,34,51,.96);padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
dialog.lb::backdrop{background:rgba(0,0,0,.6)}
.lb__in{height:100%;display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;padding:var(--s6)}
.lb__in img{max-height:80vh;max-width:92vw;width:auto;object-fit:contain}
.lb__cap{padding:var(--s4);font-size:var(--fs-small);color:rgba(255,255,255,.8);text-align:center}
.lb__btn{position:absolute;top:50%;transform:translateY(-50%);background:none;border:1px solid rgba(255,255,255,.5);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer}
.lb__prev{left:var(--s4)}.lb__next{right:var(--s4)}
.lb__close{position:absolute;top:var(--s4);right:var(--s4);background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;width:44px;height:44px}

/* ---- faq ---- */
.faq details{border-top:1px solid var(--stone)}
.faq details:last-child{border-bottom:1px solid var(--stone)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s4) 0;font-weight:500;display:flex;justify-content:space-between;gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:300;color:var(--ink-mute);flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 var(--s5);color:var(--ink-soft);max-width:66ch}

/* ---- map ---- */
.mapblk{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gutter);align-items:start}
@media (max-width:1023px){.mapblk{grid-template-columns:minmax(0,1fr)}}
.map{aspect-ratio:4/3;background:var(--paper-alt);position:relative;overflow:hidden;border-radius:var(--radius-img)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--s3);color:var(--ink-soft);text-align:center;padding:var(--s5)}

/* ---- cta ---- */
.cta .actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.ctab{position:relative;padding-block:var(--section);background:var(--paper-alt)}
.ctab .pic{display:none}
.ctab .wrap{position:relative;z-index:1}
.ctab .bbar__form{margin-top:var(--s6)}

/* ---- room detail ---- */
.room-hd{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gutter);align-items:start}
@media (max-width:1023px){.room-hd{grid-template-columns:minmax(0,1fr)}}
.panel{border:1px solid var(--stone);padding:var(--s6);background:#fff;position:sticky;top:140px}
.panel h3{margin-top:0}
.price-big{font-family:var(--font-display);font-size:2rem;line-height:1}
.price-big small{font-family:var(--font);font-size:var(--fs-small);color:var(--ink-mute)}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s4);border-top:1px solid var(--stone);border-bottom:1px solid var(--stone);padding:var(--s4) 0;margin:var(--s5) 0}
.spec div small{display:block;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.incl{columns:2;column-gap:var(--s5);padding:0;list-style:none;margin:0}
.incl li{break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--paper-alt);font-size:var(--fs-small)}
@media (max-width:639px){.incl{columns:1}}
.stickybook{display:none}
@media (max-width:1023px){
  .panel{position:static}
  .stickybook{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--stone);padding:var(--s3) var(--gutter);gap:var(--s3);align-items:center;justify-content:space-between}
  body.has-stickybook{padding-bottom:76px}
}

/* ---- booking results & checkout ---- */
.result{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:var(--s5);padding:var(--s4) 0;border-top:1px solid var(--stone);align-items:center}
.result:last-child{border-bottom:1px solid var(--stone)}
.result .pic{aspect-ratio:4/3;width:200px}
.result__price{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:190px}
.result h3{margin:0 0 2px;font-size:1.25rem}
.result .meta,.result .micro{margin:0 0 2px}
.result--off{opacity:.6}
@media (max-width:1023px){.result{grid-template-columns:150px minmax(0,1fr);align-items:start}.result .pic{width:150px}.result__price{grid-column:2;text-align:left;align-items:flex-start;min-width:0}}
@media (max-width:639px){.result{grid-template-columns:minmax(0,1fr)}.result .pic{width:100%}.result__price{grid-column:1}}
.book-h{font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);margin:0 0 var(--s2)}
.steps{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);list-style:none;padding:0;margin:0 0 var(--s5);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.steps li{display:flex;gap:8px;align-items:center}
.steps li::before{content:"";width:16px;height:1px;background:var(--stone-deep)}
.steps li:first-child::before{display:none}
.steps__n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid currentColor;font-size:.7rem;letter-spacing:0;font-variant-numeric:tabular-nums}
.steps .is-current{color:var(--ink);font-weight:500}
.steps .is-current .steps__n{background:var(--ink);color:#fff;border-color:var(--ink)}
.steps .is-done{color:var(--water)}
@media (max-width:479px){.steps li:not(.is-current) span+*{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.steps li{position:relative}.steps li::before{width:10px}}
/* results: change the search in place */
.change-dates{margin-bottom:var(--s5)}
.change-dates summary{list-style:none;display:inline-flex}
.change-dates summary::-webkit-details-marker{display:none}
.change-dates[open] summary{margin-bottom:var(--s3)}
.change-dates__form .bbar__form{background:var(--paper-alt);color:var(--ink)}
.change-dates__form .bbar__form .field>label{color:var(--ink-soft)}
.change-dates__form .bbar__form .input,.change-dates__form .bbar__form .select{border-color:var(--stone-deep);background:#fff}
.change-dates__form .bbar__form .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
/* the selection bar stays in reach while more rooms are added */
.cart-bar{position:sticky;bottom:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6);padding:var(--s3) var(--s4);background:#fff;border:1px solid var(--stone);box-shadow:0 -6px 24px rgba(28,34,51,.06)}
/* details: what you are booking, before the form, on narrow screens */
.stay-strip{display:none;justify-content:space-between;gap:var(--s4);align-items:flex-start;padding:var(--s4);border:1px solid var(--stone);margin-bottom:var(--s5);line-height:1.4}
.stay-strip__total{text-align:right;white-space:nowrap}
.stay-strip__total strong{font-family:var(--font-display);font-size:1.5rem;font-weight:400}
@media (max-width:1023px){.stay-strip{display:flex}}
.more{border-top:1px solid var(--stone);border-bottom:1px solid var(--stone);margin-top:var(--s6)}
.more summary{cursor:pointer;padding:var(--s4) 0;font-weight:500;list-style:none;display:flex;align-items:center;gap:var(--s2)}
.more summary .muted{font-weight:400}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";margin-left:auto;font-size:1.25rem;line-height:1;color:var(--ink-mute)}
.more[open] summary::after{content:"−"}
.more__body{padding-bottom:var(--s3)}
.pay-note{padding:var(--s4);background:var(--paper-alt);margin:0 0 var(--s3);color:var(--ink-soft)}
.choices{border:0;padding:0;margin:0}
.choice{border:1px solid var(--stone);padding:var(--s4);margin-bottom:var(--s3)}
.choice:has(input:checked){border-color:var(--ink)}
.summary{border:1px solid var(--stone);padding:var(--s5);background:#fff;position:sticky;top:140px}
.summary dl{display:grid;grid-template-columns:1fr auto;gap:8px var(--s4);margin:0}
.summary dt{color:var(--ink-soft)}
.summary dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.summary .total{border-top:1px solid var(--ink);padding-top:var(--s3);margin-top:var(--s3);font-weight:500}
.hold{font-size:var(--fs-small);color:var(--warning);display:flex;gap:8px;align-items:center}
.checkout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s6);align-items:start}
@media (max-width:1023px){.checkout{grid-template-columns:minmax(0,1fr)}.summary{position:static}}
.chip{display:inline-block;font-size:var(--fs-micro);font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;background:var(--paper-alt);color:var(--ink-soft)}
.chip--ok{background:#E4F1EA;color:var(--success)}
.chip--warn{background:#FBF1E3;color:var(--warning)}
.chip--bad{background:#FBECEA;color:var(--error)}

/* ---- inline availability calendar ---- */
.cal{font-size:var(--fs-small)}
.cal__hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s3)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__dow{text-align:center;font-size:var(--fs-micro);color:var(--ink-mute);padding:4px 0}
.cal__d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--paper-alt);font-variant-numeric:tabular-nums;cursor:pointer;border:0;position:relative}
.cal__d.is-out{opacity:.35;cursor:default;text-decoration:line-through}
.cal__d.is-past{opacity:.35;cursor:default}
.cal__d.is-sel{background:var(--ink);color:#fff}
.cal__d.is-range{background:var(--water-tint)}
.cal__d.is-low::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--warning);position:absolute;margin-top:22px}

/* ---- footer ---- */
.ftr{background:var(--water-deep);color:#fff;padding-block:var(--s8) var(--s5)}
.ftr a:hover{color:var(--water-light)}
.ftr__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--s7) var(--gutter)}
@media (max-width:1023px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:639px){.ftr__grid{grid-template-columns:1fr;gap:var(--s6)}.ftr{padding-block:var(--s7) var(--s5)}.ftr .brand__img{height:52px}}
.ftr h4{color:#fff}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{padding:5px 0;font-size:var(--fs-small);color:rgba(255,255,255,.82)}
.ftr .brand{color:#fff;justify-content:flex-start}
.ftr .brand__img{height:64px;background:#fff;padding:6px}
.ftr__bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:var(--s6);padding-top:var(--s5);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:var(--fs-micro);color:rgba(255,255,255,.65)}
.ftr address{font-style:normal;font-size:var(--fs-small);line-height:1.7;color:rgba(255,255,255,.82)}
.ftr .meta{color:rgba(255,255,255,.7)}
.nl{display:flex;gap:var(--s2);margin-top:var(--s3)}
.nl .input{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.nl .input::placeholder{color:rgba(255,255,255,.6)}
.nl .btn{color:#fff;border-color:#fff}
.nl .btn:hover{background:#fff;color:var(--ink)}

/* ---- whatsapp (floating), errors ---- */
.wa-fixed{position:fixed;right:var(--s5);bottom:var(--s5);z-index:40;display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;
  box-shadow:0 6px 20px rgba(20,26,40,.22);transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.wa-fixed:hover{background:#1DA851;color:#fff}
.wa-fixed:active{transform:scale(.96)}
@media (max-width:639px){.wa-fixed{right:var(--s4);bottom:var(--s4);width:54px;height:54px}}
@media (max-width:1023px){body.has-stickybook .wa-fixed{display:none}}
.errpg{min-height:60vh;display:flex;align-items:center}

/* ---- reveal: once, 12px, below the fold only ---- */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(12px);transition:opacity 360ms var(--ease),transform 360ms var(--ease)}
  .js .reveal.is-in{opacity:1;transform:none}
}
.crumbs{padding-top:var(--s5)}
.crumbs .breadcrumb{margin-bottom:0}
.breadcrumb{font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:var(--s5)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{margin:0 8px}

/* ---- rates page and price tags ---- */
.rate-group{margin-top:var(--s7)}
.rate-group>.between{margin-bottom:var(--s3)}
.rate-group h2{font-size:var(--fs-h3);margin:0 0 var(--s3)}
.rate-group>.between h2{margin:0}
.rate-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--stone)}
.rate-list li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--stone)}
.rate-name{font-weight:500;color:var(--ink)}
a.rate-name{transition:color var(--t-fast) var(--ease)}
a.rate-name:hover{color:var(--water)}
.rate-note{display:block;font-size:var(--fs-small);color:var(--ink-mute);margin-top:2px}
.rate-price{font-family:var(--font-display);font-size:1.375rem;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.rate-price small{font-family:var(--font);font-size:var(--fs-micro);color:var(--ink-mute);letter-spacing:.02em}
.rate-cta{margin:var(--s4) 0 0}
.price-tag{display:block;font-size:var(--fs-micro);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--water);margin-top:var(--s2)}
.price-line{font-size:var(--fs-lead);font-weight:500;color:var(--ink);margin:var(--s4) 0 0}
@media (max-width:479px){.rate-price{font-size:1.125rem}.rate-list li{gap:var(--s3)}}

/* ---- review form: five stars, right to left so :hover and :checked light the ones before ---- */
.stars{display:inline-flex;flex-direction:row-reverse;gap:4px}
.stars input{position:absolute;opacity:0;width:1px;height:1px}
.stars label{color:var(--stone-deep);cursor:pointer;padding:4px;transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.stars label:hover,.stars label:hover~label,.stars input:checked~label{color:var(--sun)}
.stars label:active{transform:scale(.92)}
.stars input:focus-visible+label{outline:2px solid var(--focus);outline-offset:2px}

/* ---- dining: each outlet, then its menu (photographed dishes as cards, the rest as a price list) ---- */
.outlet+.outlet{margin-top:var(--s9)}
.outlet .eti{margin-bottom:var(--s7)}
.outlet__head{max-width:62ch;margin-bottom:var(--s5)}
.outlet__head h2,.outlet .eti__body h2{margin-bottom:var(--s3)}
.outlet__desc{font-size:var(--fs-lead);line-height:1.75;color:var(--ink-soft)}
.menu-group{margin-top:var(--s7)}
.menu-group h3{margin:0 0 var(--s4)}
.dishes{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6) var(--s5);grid-template-columns:repeat(4,minmax(0,1fr))}
.dish{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.dish .pic{aspect-ratio:4/3}
.dish__name{margin:0;font-weight:500;color:var(--ink);line-height:1.35}
.dish__desc{margin:2px 0 0;font-size:var(--fs-small);line-height:1.5;color:var(--ink-mute)}
.dish__price{margin:var(--s1) 0 0;font-family:var(--font-display);font-size:1.25rem;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--ink)}
.dish__price small{font-family:var(--font);font-size:var(--fs-micro);letter-spacing:.02em;color:var(--ink-mute)}
.menu-list{max-width:var(--narrow)}
.dishes+.menu-list{margin-top:var(--s6)}
.menu-note{margin-top:var(--s8)}
@media (max-width:1023px){.dishes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.dishes{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}.dish__price{font-size:1.125rem}.outlet+.outlet{margin-top:var(--s8)}}
/* an outlet with a printed menu: the poster stands uncropped beside the menu, held in view
   under the sticky header on wide screens; on narrower ones it follows the introduction */
.outlet__photo{margin-bottom:var(--s6)}
.outlet__photo .pic{max-height:58vh}
.outlet--poster{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);grid-template-areas:"photo photo" "intro intro" "menu poster";column-gap:clamp(32px,5vw,72px);align-items:start}
.outlet--poster>.outlet__photo{grid-area:photo}
.outlet--poster>.outlet__intro{grid-area:intro}
.outlet--poster>.outlet__menu{grid-area:menu}
.outlet__poster{grid-area:poster;position:sticky;top:var(--s5);margin-top:var(--s7)}
@media (min-width:1280px){.outlet__poster{top:calc(121px + var(--s5))}}
.outlet--poster .dishes{grid-template-columns:repeat(3,minmax(0,1fr))}
.poster{display:block}
.poster__open{margin:var(--s3) 0 0}
@media (max-width:1023px){.outlet--poster{grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "intro" "poster" "menu"}.outlet__poster{position:static;max-width:360px;margin-top:0}.outlet__photo .pic{aspect-ratio:16/10!important}}
@media (max-width:639px){.outlet__photo .pic{aspect-ratio:4/3!important;border-radius:var(--radius-img)}}
@media (max-width:767px){.outlet--poster .dishes{grid-template-columns:repeat(2,minmax(0,1fr))}}