:root{
  --green:#527A5C; --green-deep:#33513E; --green-tint:#EFF4F0;
  --green-ink:#3F6349;
  --green-line:#C8D8CD; --white:#FFFFFF; --ink:#1A1A1A; --ink-soft:#5A6560;
  --display:"Newsreader",Georgia,serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pad:24px; --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:var(--body);color:var(--ink);background:var(--white);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;padding-bottom:64px}
@media(min-width:900px){body{padding-bottom:0}}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.narrow{max-width:760px}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-0.01em;line-height:1.12}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--green-ink);margin-bottom:14px;display:block}
.eyebrow.on-green{color:var(--green-line)}

.h3-look{font-size:clamp(20px,2.6vw,27px);font-family:var(--display);font-weight:400;letter-spacing:-0.005em}
.h4-look{font-family:var(--display);font-size:21px;font-weight:400;margin-top:8px}

.noscript-note{background:#FFF6E0;border-left:3px solid #9A6400;padding:16px 20px;margin:0;font-size:14.5px;line-height:1.6;color:#4A3200}
.noscript-note b{display:block;margin-bottom:5px;color:#3A2700}
.noscript-note a{color:#7A5000;font-weight:600}


/* SKIP LINK */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--green-deep);color:#fff;padding:12px 18px;font-size:14px;border-radius:0 0 3px 0}
.skip:focus{left:0}

/* NAV */
.nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:20px var(--pad);position:relative;z-index:20}
.nav.over{position:absolute;top:0;left:0;right:0}
.mark{font-family:var(--display);font-size:19px;letter-spacing:.02em;text-decoration:none;color:var(--green-deep);display:flex;align-items:center;gap:11px}
.markname{display:block;padding-top:4px}
.markname em{display:block;font-family:var(--body);font-style:normal;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.72}
.logo{height:46px;width:auto;flex:0 0 auto}
.logo-lt{display:none}
.nav picture{display:contents}
footer picture{display:contents}
.nav.over .logo-dk{display:none}
.nav.over .logo-lt{display:block}
.nav.over .mark{color:var(--white)}
.foot-logo{height:66px;width:auto;margin-bottom:18px}
@media(max-width:520px){.logo{height:38px}.markname{font-size:16px}}
.nav-links{display:none;gap:26px;font-size:14px}
.nav-links a{color:inherit;text-decoration:none;font-size:14.5px;letter-spacing:.01em;padding:9px 2px;display:inline-flex;align-items:center;min-height:34px}
.nav.over .nav-links a{color:var(--white);opacity:.9}
.nav-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
@media(min-width:960px){.nav-links{display:flex}}
.btn{display:inline-block;font-family:var(--body);font-size:14px;font-weight:500;padding:11px 22px;border-radius:2px;text-decoration:none;border:1px solid transparent;transition:background .18s,color .18s;cursor:pointer}
.btn-solid{background:var(--green);color:var(--white)}
.btn-solid:hover{background:var(--green-deep)}
.btn-ghost{background:transparent;color:var(--green-ink);border-color:var(--green-ink)}
.nav.over .btn-ghost{color:var(--white);border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:var(--green);color:var(--white)}
.nav.over .btn-ghost:hover{background:var(--white);color:var(--green-deep)}
.btn-line{background:transparent;color:var(--green-ink);border-color:var(--green-ink)}
.btn-line:hover{background:var(--green);color:var(--white)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.nav-right{display:flex;align-items:center;gap:10px}
.menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:0 11px;background:transparent;border:1px solid var(--green-line);border-radius:2px;cursor:pointer}
.menu-btn span{display:block;height:1.5px;background:var(--green);width:100%}
.nav.over .menu-btn{border-color:rgba(255,255,255,.5)}
.nav.over .menu-btn span{background:#fff}
@media(min-width:960px){.menu-btn{display:none}}
.menu-panel{position:fixed;inset:0;z-index:300;background:var(--green-deep);padding:78px 26px 34px;overflow-y:auto}
.menu-panel[hidden]{display:none}
.menu-close{position:absolute;top:16px;right:18px;width:46px;height:46px;background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:2px;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.menu-list{display:flex;flex-direction:column}
.menu-list a{font-family:var(--display);font-size:27px;color:#fff;text-decoration:none;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.menu-foot{margin-top:30px;display:flex;flex-direction:column;gap:8px}
.menu-foot a{color:var(--green-line);text-decoration:none;font-size:16px;padding:11px 0}
body.menu-open{overflow:hidden}

/* HERO */
.hero{position:relative;min-height:86vh;display:flex;align-items:flex-end;background:var(--green-deep);overflow:hidden}
.hero.short{min-height:64vh}
.hero-img{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 11px),linear-gradient(178deg,var(--green) 0%,var(--green) 44%,var(--green-deep) 100%);display:flex;align-items:center;justify-content:center}
.hero-photo .hero-slot,.ph .ph-note:not(.ph-empty .ph-note){display:none}
.hero-slot{position:absolute;bottom:14px;right:16px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.28);text-align:right;line-height:1.7;max-width:46%;pointer-events:none}
.hero-slot em{font-style:normal;display:block;opacity:.75}
.hero-slot strong{font-weight:400}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,12,10,.74) 0%,rgba(8,12,10,.30) 26%,rgba(8,12,10,0) 56%),linear-gradient(to bottom,rgba(8,12,10,.44) 0%,rgba(8,12,10,.10) 16%,rgba(8,12,10,0) 26%),linear-gradient(to right,rgba(8,12,10,.34) 0%,rgba(8,12,10,.06) 46%,rgba(8,12,10,0) 62%)}
.hero-inner{position:relative;z-index:5;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad) 54px}
.hero h1{color:var(--white);font-size:clamp(38px,8.4vw,80px);max-width:18ch;text-wrap:balance}
.hero.short h1{font-size:clamp(34px,6.4vw,58px)}
.hero p{color:rgba(255,255,255,.9);font-size:clamp(15px,2.2vw,19px);margin-top:18px;max-width:38ch}

/* The hero on a phone.
   Every other photograph on this site has a rule for narrow screens — .ph-tall
   and .photo-wrap.tall both drop to 4/3 — and the hero had none. It kept
   86vh, which on a tall phone is around 730px of height for a landscape
   photograph. background-size:cover then scales the picture until it fills
   that, and what a guest sees is a vertical slice about a third of the
   photograph's width: the valley gone, a chair cut in half.

   Height is the only lever. A wide photograph in a tall box is cropped no
   matter what, so the box gets shorter: a little over half the screen instead
   of nearly all of it, which shows around three fifths of the picture rather
   than a third, and brings the booking form up where a guest can see it
   without scrolling. The px floor is for short landscape phones, where 52vh
   would leave no room for the headline. */
@media(max-width:820px){
  .hero{min-height:max(52vh,360px)}
  .hero.short{min-height:max(42vh,300px)}
  .hero-inner{padding-bottom:36px}
}

/* BOOKING BAR */
.booking{background:var(--green);color:var(--white)}
.booking-inner{max-width:var(--max);margin:0 auto;padding:20px var(--pad);display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:820px){.booking-inner{grid-template-columns:1fr 1fr 1fr auto;align-items:end;gap:16px}}
.field label{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-bottom:6px}
.field input,.field select{width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.07);color:var(--white);font-family:var(--body);font-size:15px;border-radius:2px}
.field select option{color:var(--ink)}
.booking .btn-solid{background:var(--white);color:var(--green-deep);width:100%;padding:13px 26px;text-align:center}
.booking .btn-solid:hover{background:var(--green-line)}
.booking-note{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 16px;font-size:11px;letter-spacing:.05em;color:rgba(255,255,255,.6)}

/* SECTIONS */
.sec{padding:68px 0}
@media(min-width:900px){.sec{padding:100px 0}}
.sec-tight{padding:44px 0}
.sec-tint{background:var(--green-tint)}
.sec h2{font-size:clamp(27px,4.2vw,44px);max-width:24ch;text-wrap:balance}
.lede{font-size:clamp(16px,2vw,18px);color:var(--ink-soft);margin-top:18px;max-width:58ch}
.lede a{display:inline-block;padding:7px 0}
.sec p + p{margin-top:16px}
.sec-head{margin-bottom:44px}

/* EPIGRAPH */
.name-sec{padding:74px 0}
@media(min-width:900px){.name-sec{padding:118px 0}}
.epigraph{font-family:var(--display);font-size:clamp(26px,5vw,52px);line-height:1.24;color:var(--green-ink);max-width:19ch;letter-spacing:-0.015em}
.epigraph-sub{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(17px,2.4vw,23px);color:var(--ink-soft);margin-top:26px;max-width:40ch;line-height:1.5}
.name-grid{display:grid;gap:44px;grid-template-columns:1fr}
@media(min-width:900px){.name-grid{grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}}

/* PHOTO FRAMES: empty until the .webp is uploaded, then it just appears */
.ph{position:relative;overflow:hidden;border-radius:2px;background:var(--green-tint);line-height:0}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph-note{display:none}
.ph.ph-empty{border:1px dashed var(--green-line);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px 18px}
.ph.ph-empty img{display:none}
.ph.ph-empty .ph-note{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);font-weight:600;line-height:2}
.ph.ph-empty .ph-note em{display:block;font-style:normal;font-weight:400;letter-spacing:.03em;text-transform:none;font-size:12px;color:var(--ink-soft);margin-top:7px;word-break:break-all}
.ph.ph-empty .car-arrow,.ph.ph-empty .car-dots{display:none}
.ph-tall{aspect-ratio:4/5}
.ph-std{aspect-ratio:4/3}
.ph-wide{aspect-ratio:16/10}
.ph-wide21{aspect-ratio:21/9}
.ph-sq{aspect-ratio:1/1}
@media(max-width:820px){.ph-tall{aspect-ratio:4/3}.ph-wide21{aspect-ratio:16/9}}

/* CAROUSEL: swipe on a phone, arrows on desktop */
.car-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%;height:100%;scroll-snap-align:center}
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:var(--green-deep);font-size:24px;line-height:1;cursor:pointer;z-index:3;opacity:0;transition:opacity .18s;display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.car:hover .car-arrow,.car:focus-within .car-arrow{opacity:1}
@media(hover:none){.car-arrow{display:none}}
.car-prev{left:10px}.car-next{right:10px}
.car-arrow:hover{background:#fff}
.car-dots{position:absolute;bottom:4px;left:0;right:0;display:flex;justify-content:center;gap:2px;z-index:3}
.car-dot{width:34px;height:34px;border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.car-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 3px rgba(0,0,0,.35);transition:width .18s,border-radius .18s}
.car-dot.on::after{background:#fff;width:20px;border-radius:4px}

/* REAL PHOTOS */
.photo-wrap{overflow:hidden;border-radius:2px;background:var(--green-tint);line-height:0}
.photo-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.photo-wrap.tall{aspect-ratio:4/5}
.photo-wrap.wide{aspect-ratio:16/10}
.photo-wrap.sq{aspect-ratio:1/1}
.photo-wrap.gal-item{aspect-ratio:4/3}
.photo-wrap.gal-item.wide2{grid-column:span 2;aspect-ratio:8/3}
@media(max-width:820px){.photo-wrap.tall{aspect-ratio:4/3}}
.hero-img.has-photo,.hero-img.hero-photo{background-size:cover;background-position:center;background-repeat:no-repeat}

/* PHOTO SLOTS */
.slot{background:var(--green-tint);border:1px dashed var(--green-line);display:flex;align-items:center;justify-content:center;text-align:center;padding:26px 20px;border-radius:2px;min-height:230px}
.slot span{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--green-ink);line-height:2;font-weight:600}
.slot em{display:block;font-style:normal;font-weight:400;letter-spacing:.04em;text-transform:none;font-size:12px;color:var(--ink-soft);margin-top:8px}
.slot-tall{min-height:340px}
.slot-wide{min-height:270px}
.slot-sq{min-height:220px}
.slot-missing{border-style:solid;border-color:var(--green-ink);background:var(--white)}

/* PROOFS */
.proofs{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:820px){.proofs{grid-template-columns:repeat(3,1fr)}}
.proof{padding:34px 0;border-bottom:1px solid var(--green-line)}
@media(min-width:820px){.proof{padding:44px 34px;border-bottom:none;border-right:1px solid var(--green-line)}.proof:first-child{padding-left:0}.proof:last-child{border-right:none;padding-right:0}}
.proof-num{font-family:var(--display);font-size:clamp(32px,5vw,50px);color:var(--green-ink);line-height:1;display:block}
.proof h3{font-size:19px;margin:14px 0 10px}
.proof p{font-size:15px;color:var(--ink-soft)}

/* SPLIT */
.split{display:grid;gap:36px;grid-template-columns:minmax(0,1fr);align-items:center}
.split>*{min-width:0}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:56px}
  .split.flip .split-media{order:2}
  /* A 21:9 crop is a cinema strip. Half a column turns it into a postage
     stamp, so those run the full width with the words underneath. */
  .split:has(.ph-wide21),.split:has(.ph-wide){grid-template-columns:minmax(0,1fr)}
  .split:has(.ph-wide21) .split-media,.split:has(.ph-wide) .split-media{order:-1;margin-bottom:8px}
}
.split-body .btn{margin-top:26px}
.facts{margin-top:26px;border-top:1px solid var(--green-line)}
.facts div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--green-line);font-size:14.5px}
.facts dt{color:var(--ink-soft)}
.facts dd{font-weight:500;text-align:right}

/* CARDS */
.cards{display:grid;gap:2px;grid-template-columns:1fr}
@media(min-width:760px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--green-tint);padding:30px 26px}
.card h3{font-size:22px;margin-bottom:10px}
.card p{font-size:15px;color:var(--ink-soft)}
.card .btn{margin-top:20px}
.card-slot{background:var(--green-tint);border:1px dashed var(--green-line)}

/* QUOTES */
.quotes{display:grid;gap:2px;grid-template-columns:1fr;margin-top:44px}
@media(min-width:760px){.quotes{grid-template-columns:1fr 1fr}}
.quote{background:var(--green-tint);padding:32px 28px}
.quote blockquote{font-family:var(--display);font-size:22px;line-height:1.4;color:var(--green-deep)}
.quote cite{display:block;margin-top:16px;font-style:normal;font-size:13px;letter-spacing:.05em;color:var(--ink-soft)}
.quote cite b{font-weight:600;color:var(--ink);display:block;letter-spacing:0;font-size:14.5px}
.referral{margin-top:44px;padding:28px 0 0;border-top:1px solid var(--green-line);font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(17px,2.3vw,21px);color:var(--ink-soft);max-width:52ch;line-height:1.5}

/* HONEST */
.honest{background:var(--green-deep);color:var(--white);padding:74px 0}
@media(min-width:900px){.honest{padding:110px 0}}
.honest h2{color:var(--white);font-size:clamp(27px,4.2vw,46px);text-wrap:balance}
.honest-list{margin-top:44px;display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:820px){.honest-list{grid-template-columns:repeat(3,1fr)}}
.honest-item{padding:26px 0;border-top:1px solid rgba(255,255,255,.2)}
@media(min-width:820px){.honest-item{padding:28px 30px 28px 0}}
.honest-item h3{font-size:23px;color:var(--white);margin-bottom:10px}
.honest-item p{font-size:15px;color:rgba(255,255,255,.72)}
.honest-close{margin-top:46px;padding-top:30px;border-top:1px solid rgba(255,255,255,.2);font-family:var(--display);font-size:clamp(18px,2.6vw,24px);line-height:1.45;color:var(--white);max-width:46ch;font-weight:300}

/* LISTS */
.perks{list-style:none;margin-top:30px;display:grid;gap:0;grid-template-columns:1fr;max-width:660px}
.perks li{padding:15px 0 15px 30px;border-bottom:1px solid var(--green-line);font-size:15.5px;position:relative}
.perks li:first-child{border-top:1px solid var(--green-line)}
.perks li::before{content:"";position:absolute;left:4px;top:24px;width:10px;height:1.5px;background:var(--green)}
.perks li a{display:inline-block;padding:7px 0;min-height:32px;text-underline-offset:3px}
.perks.on-green li{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.88)}
.perks.on-green li::before{background:var(--green-line)}

/* TABLES */
.tbl{width:100%;border-collapse:collapse;margin-top:26px}
.tbl th{text-align:left;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;padding:0 0 10px;border-bottom:1px solid var(--green-line)}
.tbl th:not(:first-child),.tbl td:not(:first-child){text-align:right}
.tbl td{padding:13px 0;border-bottom:1px solid var(--green-line);font-size:15px}
.tbl td:first-child{font-weight:500}
.addr{margin-top:26px;font-size:15px;color:var(--ink-soft);line-height:1.8}

/* MENU */
.menu-group{border-top:1px solid var(--green-line);padding:26px 0}
.menu-group h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--body);font-weight:600;color:var(--green-ink);margin-bottom:12px}
.menu-group p{font-size:16px;line-height:1.8}
.menu-tag{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--green);color:var(--white);padding:4px 10px;border-radius:2px;margin-left:8px;vertical-align:2px;font-weight:600}
.thali-grid{display:grid;gap:2px;grid-template-columns:1fr;margin-top:30px}
@media(min-width:640px){.thali-grid{grid-template-columns:1fr 1fr}}
.thali{background:var(--green);color:var(--white);padding:30px 26px;text-align:center}
.thali h3{font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;opacity:.8}
.thali .amt{font-family:var(--display);font-size:44px;line-height:1.1;margin-top:10px;display:block}
.thali small{display:block;font-size:12px;opacity:.75;margin-top:4px}

/* GALLERY */
.gal{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin-top:26px}
@media(min-width:760px){.gal{grid-template-columns:repeat(4,1fr)}}
/* One photograph per cell. The gallery used to repeat the same carousel
   across every cell, so four identical buildings sat in a row. */
.gal .ph{margin:0}
.gal-cell{aspect-ratio:4/5}
.gal-wide{grid-column:span 2;aspect-ratio:16/9}
@media(max-width:760px){.gal-wide{grid-column:span 2;aspect-ratio:16/10}}
.gal .slot{min-height:150px;padding:14px 10px}
.gal .slot span{font-size:9.5px;letter-spacing:.12em}
.gal .wide2{grid-column:span 2}

/* FAQ */
.faq details{border-bottom:1px solid var(--green-line)}
.faq details:first-of-type{border-top:1px solid var(--green-line)}
.faq summary{cursor:pointer;padding:20px 34px 20px 0;font-family:var(--display);font-size:20px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:19px;font-size:22px;color:var(--green-ink);font-family:var(--body)}
.faq details[open] summary::after{content:"\2013"}
.faq .ans{padding:0 0 22px;color:var(--ink-soft);font-size:15.5px;max-width:66ch}
.faq .ans p + p{margin-top:12px}

/* FORM */
.form{margin-top:30px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr);max-width:100%;width:100%}
.form>*{min-width:0}
@media(min-width:720px){.form{max-width:720px}}
@media(min-width:640px){.form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.form .full{grid-column:1/-1}}
.form label{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;font-weight:600}
.form input,.form select,.form textarea{width:100%;max-width:100%;min-width:0;padding:12px;border:1px solid var(--green-line);background:var(--white);font-family:var(--body);font-size:15px;border-radius:2px;color:var(--ink)}
.form textarea{min-height:120px;resize:vertical}
.form-note{font-size:13px;color:var(--ink-soft);margin-top:10px;line-height:1.7}
.form-note a{display:inline-block;padding:7px 0;min-height:32px}

/* OFFERS */
.offer-list{display:grid;gap:2px;grid-template-columns:1fr;margin-top:30px}
@media(min-width:860px){.offer-list{grid-template-columns:1fr 1fr}}
.offer{background:#fff;border:1px solid var(--green-line);display:flex;flex-direction:column}
/* The code bar keeps its own height. It was a grid row, so when a taller
   card in the same row stretched this one, the spare height went into the
   green bar instead of the white body and the headers came out uneven. */
.offer-code{flex:0 0 auto}
.offer-body{flex:1 1 auto}
.offer-code{background:var(--green);color:#fff;padding:13px 18px;font-family:var(--body);font-size:13.5px;font-weight:600;letter-spacing:.1em}
.offer-body{padding:20px 22px}
.offer-body h3{font-size:22px;margin-bottom:9px}
.offer-body p{font-size:15px;color:var(--ink-soft);line-height:1.6}
.offer-body b{color:var(--ink)}
.offer-body ul{list-style:none;margin-top:14px;border-top:1px solid var(--green-line)}
.offer-body li{font-size:13.5px;color:var(--ink-soft);padding:8px 0 8px 17px;position:relative;border-bottom:1px solid var(--green-line)}
.offer-body li:last-child{border-bottom:none}
.offer-body li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:1.5px;background:var(--green)}

/* INLINE ASK FORM */
.ask{display:grid;gap:34px;grid-template-columns:minmax(0,1fr)}
@media(min-width:940px){.ask{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:56px;align-items:start}}
.ask>*{min-width:0}
.ask h2{font-size:clamp(25px,3.4vw,34px);max-width:22ch;text-wrap:balance}
.ask-form{margin-top:0;background:#fff;border:1px solid var(--green-line);border-radius:3px;padding:24px}
.ask-msg{min-height:1px}

/* SEND PANEL */
.send-panel{border-top:1px solid var(--green-line);padding-top:22px;margin-top:6px}
.send-head{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:14px}
.send-btns{display:flex;flex-wrap:wrap;gap:10px}
.send-btns .btn{flex:1 1 auto;min-width:150px;text-align:center;cursor:pointer;font-family:var(--body)}
.send-msg{font-size:13.5px;margin-top:11px;min-height:1px}
.send-msg.ok{color:var(--green-ink);font-weight:500}
.send-msg.no{color:#8A2B2B;font-weight:500}

/* SERVICES */
.svc{display:grid;gap:0;grid-template-columns:1fr;margin-top:34px;border-top:1px solid var(--green-line)}
@media(min-width:700px){.svc{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc div{padding:18px 22px 18px 0;border-bottom:1px solid var(--green-line);font-size:15.5px}

/* PROSE (legal, blog) */
.prose{max-width:720px}
.prose h2,.prose h3{max-width:none;text-wrap:balance}
.prose h2{font-size:clamp(23px,3vw,30px);margin:44px 0 14px;max-width:none;text-wrap:balance;hyphens:none}
.prose h3{font-size:20px;margin:30px 0 10px}
.prose p{margin-bottom:16px;color:var(--ink);font-size:16.5px}
.prose ul,.prose ol{margin:0 0 18px 20px;color:var(--ink)}
.prose li{margin-bottom:9px;font-size:16.5px}
.prose .meta{font-size:13px;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:26px}

/* BLOG CARDS */
.posts{display:grid;gap:2px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:760px){.posts{grid-template-columns:1fr 1fr}}
.post{background:var(--green-tint);padding:30px 26px;text-decoration:none;display:block;transition:background .18s}
.post:hover{background:var(--green-line)}
.post .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-ink);font-weight:600}
.post h2,.post .h3-look{font-size:22px;margin:12px 0 10px}
.post p{font-size:15px;color:var(--ink-soft)}
.soon{opacity:.55}

/* CTA BAND */
.band{background:var(--green);color:var(--white);padding:62px 0}
.band h2{color:var(--white);font-size:clamp(26px,3.8vw,40px)}
.band p{color:rgba(255,255,255,.85);margin-top:16px;max-width:52ch}
.band .btn-solid{background:var(--white);color:var(--green-deep);margin-top:26px}
.band .btn-solid:hover{background:var(--green-line)}
.band .btn-ghost{color:var(--white);border-color:rgba(255,255,255,.55);margin-top:26px}
.band .btn-ghost:hover{background:var(--white);color:var(--green-deep)}

/* FOOTER */
footer{background:var(--green-deep);color:rgba(255,255,255,.72);padding:62px 0 38px;font-size:14px}
.foot-grid{display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:820px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr}}
footer .foot-h{font-family:var(--body);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--white);margin-bottom:16px;font-weight:600}
footer a{color:rgba(255,255,255,.72);text-decoration:none;display:block;padding:5px 0}
footer a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
/* the small print line under the three columns */
.foot-legal{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
.foot-legal p{margin:0}
.foot-legal a{display:inline-block;padding:0;margin-right:18px}
.foot-legal a:last-child{margin-right:0}
/* The statutory line. about.html promises these numbers are in the footer of
   every page, and until now they were on none of them. Quieter than the
   copyright above it — a guest checking a hotel is real should find it, not
   trip over it. Tabular figures so the digits do not wander. */
.foot-stat{margin-top:6px !important;font-size:12px;opacity:.62;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
@media(max-width:620px){.foot-legal{display:block}.foot-legal p+p{margin-top:12px}}
.foot-mark{font-family:var(--display);font-size:24px;color:var(--white);line-height:1.3}
.legal-bar{margin-top:46px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:12.5px;color:rgba(255,255,255,.55);display:flex;flex-wrap:wrap;align-items:center;gap:2px 22px}
.legal-bar a{display:inline-block;padding:9px 0;text-decoration:underline;text-underline-offset:3px}

/* COOKIE NOTICE */
.cookie{position:fixed;left:12px;right:12px;bottom:76px;z-index:60;background:var(--green-deep);color:#fff;padding:18px 20px;border-radius:3px;box-shadow:0 10px 40px rgba(0,0,0,.3);display:grid;gap:14px}
.cookie[hidden]{display:none}
@media(min-width:900px){.cookie{left:auto;right:20px;bottom:20px;max-width:420px}}
.cookie p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.85)}
.cookie a{color:#fff;display:inline-block;padding:9px 0;text-decoration:underline;text-underline-offset:3px}
.cookie-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie-btns .btn{padding:10px 18px;font-size:13.5px}
.cookie-btns .btn-solid{background:#fff;color:var(--green-deep)}
.cookie-btns .btn-line{color:#fff;border-color:rgba(255,255,255,.5)}

/* STICKY */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.18)}
.sticky a{padding:18px 10px;text-align:center;text-decoration:none;font-size:14.5px;font-weight:500}
.sticky .s-book{background:var(--green);color:var(--white)}
.sticky .s-wa{background:var(--green-deep);color:var(--white)}
@media(min-width:900px){.sticky{display:none}}

/* ---------- BOOKING FLOW ---------- */
.demo{background:#8A2B2B;color:#fff;text-align:center;padding:11px 16px;font-size:13.5px;letter-spacing:.04em}
.demo b{font-weight:600}
.bk-h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,40px);margin-bottom:18px;letter-spacing:-0.01em}
.steps{display:flex;gap:0;border-bottom:1px solid var(--green-line);margin-bottom:34px;overflow-x:auto}
.steps div{flex:1;min-width:120px;padding:16px 12px 14px;font-size:12.5px;color:var(--ink-soft);border-bottom:2px solid transparent;white-space:nowrap}
.steps div b{display:block;font-family:var(--body);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.steps div.on b{color:var(--green-ink)}
@media(max-width:679px){
  .steps{overflow:visible}
  .steps div{display:none}
  .steps div.on{display:block;min-width:0;flex:1 1 100%}
}
.steps div.on{color:var(--ink);border-bottom-color:var(--green-ink);font-weight:500}
.steps div.on b{color:var(--green-ink)}

.bk-grid{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
.bk-grid>*{min-width:0}
@media(min-width:960px){.bk-grid{grid-template-columns:minmax(0,1fr) 350px;gap:40px;align-items:start}}

.searchbar{background:var(--green-tint);border:1px solid var(--green-line);border-radius:3px;padding:16px;display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:26px}
@media(min-width:700px){.searchbar{grid-template-columns:1fr 1fr 1fr auto;align-items:end}}
.searchbar label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:5px}
.searchbar input,.searchbar select{width:100%;padding:11px;border:1px solid var(--green-line);background:#fff;font-family:var(--body);font-size:15px;border-radius:2px}

.roomcard{border:1px solid var(--green-line);border-radius:3px;margin-bottom:20px;overflow:hidden;background:#fff}
.roomcard-head{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:700px){.roomcard-head{grid-template-columns:230px 1fr}}
.roomcard-img{background:var(--green-tint);border-bottom:1px dashed var(--green-line);min-height:170px;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px}
@media(min-width:700px){.roomcard-img{border-bottom:none;border-right:1px dashed var(--green-line)}}
.roomcard-img.has-photo{background-size:cover;background-position:center;background-repeat:no-repeat;border:none;min-height:230px}
.roomcard-img.has-photo span{display:none}
.roomcard-img span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink);font-weight:600;line-height:1.9}
.roomcard-body{padding:20px 22px}
.roomcard-body h3{font-size:24px;margin-bottom:8px}
.roomcard-meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.tag{font-size:11.5px;padding:5px 10px;border:1px solid var(--green-line);border-radius:2px;color:var(--ink-soft)}
.tag.good{border-color:var(--green-ink);color:var(--green-ink);font-weight:500}
.roomcard-body p{font-size:14.5px;color:var(--ink-soft)}

.rateplan{border-top:1px solid var(--green-line);padding:18px 22px;display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.rateplan{grid-template-columns:1fr auto auto;align-items:center;gap:22px}}
.rateplan-name{font-weight:500;font-size:15.5px}
.rateplan-name small{display:block;font-weight:400;color:var(--ink-soft);font-size:13px;margin-top:4px}
.rateplan-price{text-align:left}
@media(min-width:760px){.rateplan-price{text-align:right}}
.rateplan-price b{font-family:var(--display);font-size:27px;font-weight:400;display:block;line-height:1.1}
.rateplan-price small{font-size:12px;color:var(--ink-soft);display:block;margin-top:3px}
.rateplan .btn{width:100%}
@media(min-width:760px){.rateplan .btn{width:auto}}
.strike{text-decoration:line-through;color:var(--ink-soft);font-size:15px;margin-right:8px;font-family:var(--body)}

.summary{border:1px solid var(--green-line);border-radius:3px;background:var(--green-tint);padding:22px}
@media(min-width:960px){.summary{position:sticky;top:20px}}
.summary h3{font-size:19px;margin-bottom:4px}
.summary .sub{font-size:13px;color:var(--ink-soft);margin-bottom:18px}
.sumline{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:14.5px;border-bottom:1px solid var(--green-line)}
.sumline span:last-child{font-weight:500;text-align:right}
.sumline[hidden]{display:none}
.sumline.total{border-bottom:none;border-top:2px solid var(--green);margin-top:8px;padding-top:14px;font-size:17px}
.sumline.total span:last-child{font-family:var(--display);font-size:25px}
.summary .btn{width:100%;text-align:center;margin-top:18px}
.perkbox{margin-top:20px;padding-top:16px;border-top:1px solid var(--green-line)}
.perkbox b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink);margin-bottom:9px}
.perkbox li{font-size:13.5px;color:var(--ink-soft);list-style:none;padding:4px 0 4px 16px;position:relative}
.perkbox li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:1.5px;background:var(--green)}

.paybar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--green-deep);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px}
.paybar .amt{font-family:var(--display);font-size:21px;line-height:1.15;min-width:0}
.paybar .amt small{display:block;font-family:var(--body);font-size:11px;opacity:.7}
.paybar .btn{background:#fff;color:var(--green-deep);padding:12px 22px}
@media(min-width:960px){.paybar{display:none}}

.notice{background:var(--green-tint);border-left:3px solid var(--green);padding:16px 18px;font-size:14.5px;color:var(--ink-soft);margin:22px 0}
.notice b{color:var(--ink)}

.confirm-hero{background:var(--green);color:#fff;padding:44px 0;text-align:center}
.steps-list{margin:20px 0 0 20px;max-width:60ch}
.steps-list li{margin-bottom:13px;font-size:15.5px;color:var(--ink-soft);line-height:1.6}
.steps-list b{color:var(--ink)}
.confirm-hero h1{color:#fff;font-size:clamp(28px,5vw,44px)}
.confirm-hero p{color:rgba(255,255,255,.86);margin-top:12px;font-size:17px}
.ref{display:inline-block;margin-top:20px;border:1px solid rgba(255,255,255,.45);padding:11px 22px;border-radius:2px;font-size:14px;letter-spacing:.06em}

/* ---------- ADD ONS ---------- */
.addons{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin-top:22px}
.addons>*{min-width:0}
@media(min-width:620px){.addons{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}}
.addon{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--green-line);border-radius:3px;padding:15px 16px;cursor:pointer;transition:border-color .15s,background .15s;background:#fff}
.addon:hover{border-color:var(--green-ink)}
.addon:has(input:checked){border-color:var(--green-ink);background:var(--green-tint)}
.addon-locked{cursor:default}
.addon-locked input[type=checkbox]{opacity:.75}
.per{font-weight:600;color:var(--ink)}
.addons .addon.addon-auto{border-color:var(--green-ink);background:var(--green-tint);box-shadow:inset 3px 0 0 var(--green)}
.addon input[type=checkbox]{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--green-ink);cursor:pointer}
.addon span{display:block;font-size:14.5px;line-height:1.45}
.addon b{display:block;font-weight:600;color:var(--ink)}
.addon em{display:block;font-style:normal;color:var(--ink-soft);font-size:13px;margin-top:3px}

.addons-free .addon{background:var(--green-tint);border-style:dashed}
.addons-free .addon:has(input:checked){background:#fff;border-style:solid}
.qty{display:flex;align-items:center;gap:9px;margin-top:11px}
.qty-btn{width:32px;height:32px;border:1px solid var(--green-line);background:#fff;border-radius:2px;font-size:17px;line-height:1;cursor:pointer;color:var(--green-ink);padding:0}
.qty-btn:hover{border-color:var(--green-ink);background:var(--green-tint)}
.qty output{min-width:26px;text-align:center;font-weight:600;font-size:16px;color:var(--ink)}
.qty i{font-style:normal;font-size:12.5px;color:var(--ink-soft)}
.addon-from{width:100%;display:block;box-sizing:border-box;flex:1 1 auto;margin-top:11px;padding:10px 11px;border:1px solid var(--green-line);border-radius:2px;font-family:var(--body);font-size:14px;background:#fff;color:var(--ink)}

/* ---------- FIELD VALIDATION ---------- */
.form label i{font-style:normal;font-size:9.5px;letter-spacing:.1em;color:#8A2B2B;margin-left:5px;font-weight:600}
.tel-in{display:flex;align-items:stretch;border:1px solid var(--green-line);border-radius:2px;overflow:hidden;background:#fff}
.tel-in span{display:flex;align-items:center;padding:0 11px;background:var(--green-tint);color:var(--ink-soft);font-size:15px;border-right:1px solid var(--green-line)}
.tel-in input{border:none;flex:1;min-width:0}
.tel-in:focus-within{border-color:var(--green-ink)}
.fieldmsg{font-size:12.5px;margin-top:6px;min-height:1px;color:#8A2B2B;font-weight:500}
.fieldmsg.ok{color:var(--green-ink)}
.form input:invalid:not(:placeholder-shown){border-color:#8A2B2B}
.consent{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--green-line);border-radius:3px;padding:15px 16px;cursor:pointer;background:#fff}
.consent:has(input:checked){border-color:var(--green-ink);background:var(--green-tint)}
.consent input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--green-ink);cursor:pointer}
.consent span{font-size:14.5px;line-height:1.5;color:var(--ink)}
.consent-note{font-size:12.5px;color:var(--ink-soft);margin-top:10px;line-height:1.6;max-width:64ch}

/* ---------- PROMO LIST ---------- */
.promo-see{background:none;border:none;padding:0 0 10px;color:var(--green-deep);font-family:var(--body);font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px}
.promo-list{margin-bottom:12px;display:grid;gap:6px}
.promo-list[hidden]{display:none}
.promo-pick{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;background:#fff;border:1px solid var(--green-line);border-radius:2px;padding:11px 12px;cursor:pointer;text-align:left;font-family:var(--body);min-height:44px}
.promo-pick:hover{border-color:var(--green-ink);background:var(--green-tint)}
.promo-pick b{font-size:13px;letter-spacing:.06em;color:var(--green-deep);font-weight:600;white-space:nowrap}
.promo-pick span{font-size:12.5px;color:var(--ink-soft);text-align:right;line-height:1.4}

#rate-lines .sumline span:first-child{font-size:13.5px}
.rate-note{font-size:11.5px;color:var(--green-deep);font-weight:600;letter-spacing:.04em}
.gift-row span:last-child{font-weight:500;color:var(--green-ink);text-align:right;font-size:13.5px}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:11px 0 0}
.chip{font-size:11.5px;background:#fff;border:1px solid var(--green-line);border-radius:2px;padding:5px 9px;color:var(--ink-soft)}
.auto-note{display:block;margin-top:7px;color:var(--green-deep);font-weight:600;font-size:12.5px}
.quote-note{margin-top:20px;padding-top:18px;border-top:2px solid var(--green)}
.quote-note b{display:block;font-size:15px;color:var(--ink);margin-bottom:7px}
.quote-note p{font-size:13.5px;color:var(--ink-soft);line-height:1.6}

/* ---------- GOOD TO KNOW ---------- */
.goodtoknow{margin-top:0}
.goodtoknow h2{font-family:var(--display);font-size:clamp(26px,3.4vw,34px);margin-bottom:22px;font-weight:400}
.gtk-grid{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--green-line)}
@media(min-width:820px){.gtk-grid{grid-template-columns:1fr 1fr;column-gap:44px}}
.gtk{padding:18px 0;border-bottom:1px solid var(--green-line)}
.gtk h4{font-family:var(--body);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--green-ink);font-weight:600;margin-bottom:7px}
.gtk p{font-size:15px;color:var(--ink-soft);line-height:1.6;max-width:66ch}
.gtk b{color:var(--ink);font-weight:600}
.gtk a{color:var(--green-ink);font-weight:500;display:inline-block;padding:8px 0;min-height:32px;text-decoration:underline;text-underline-offset:3px}

/* ---------- PROMO CODE ---------- */
.promo{margin-top:20px;padding-top:18px;border-top:1px solid var(--green-line)}
.promo label{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:8px}
.promo-in{display:flex;gap:8px;flex-wrap:wrap}
.promo-in input{flex:1 1 150px;min-width:140px;padding:11px 12px;border:1px solid var(--green-line);border-radius:2px;font-family:var(--body);font-size:15px;text-transform:uppercase;background:#fff;color:var(--ink)}
.promo-in .btn{padding:11px 18px;white-space:nowrap}
.promo-msg{font-size:13px;margin-top:9px;min-height:1px}
.promo-msg.ok{color:var(--green-ink);font-weight:500}
.promo-msg.no{color:#8A2B2B}
.promo-row b{font-weight:600}

/* ---------- SPEC TABLE ---------- */
.spec{width:100%;border-collapse:collapse;margin-top:12px}
.spec th{text-align:left;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;padding:0 8px 10px 0;border-bottom:1px solid var(--green-line)}
.spec td{padding:11px 8px 11px 0;border-bottom:1px solid var(--green-line);font-size:14.5px;vertical-align:top}
.spec td:first-child{width:34px}
.spec td:last-child{width:110px;text-align:right;white-space:nowrap}
.st{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:2px;display:inline-block}
.st-done{background:var(--green);color:#fff}
.st-part{background:var(--green-tint);color:var(--green-ink);border:1px solid var(--green)}
.st-you{background:#fff;color:var(--ink-soft);border:1px solid var(--green-line)}
.scorebar{display:grid;gap:2px;grid-template-columns:1fr;margin:26px 0 40px}
@media(min-width:700px){.scorebar{grid-template-columns:repeat(3,1fr)}}
.scorebox{background:var(--green-tint);padding:24px 22px}
.scorebox b{font-family:var(--display);font-size:40px;display:block;line-height:1;color:var(--green-ink)}
.scorebox span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-soft)}

.day-meta{display:grid;gap:0;grid-template-columns:1fr 1fr;border-top:1px solid var(--green-line);margin-top:28px}
@media(min-width:680px){.day-meta{grid-template-columns:repeat(4,1fr)}}
.day-meta div{padding:18px 18px 18px 0;border-bottom:1px solid var(--green-line)}
@media(min-width:680px){.day-meta div{border-bottom:none;border-right:1px solid var(--green-line);padding:20px 22px}
.day-meta div:first-child{padding-left:0}.day-meta div:last-child{border-right:none}}
.day-meta b{font-family:var(--display);font-size:27px;display:block;line-height:1;color:var(--green-ink)}
.day-meta span{display:block;margin-top:6px;font-size:12px;color:var(--ink-soft)}

.routebar{background:var(--green);color:#fff;padding:24px;border-radius:3px;margin:0 0 34px;display:grid;gap:16px}
@media(min-width:760px){.routebar{grid-template-columns:1fr auto;align-items:center;gap:26px}}
.routebar h3{color:#fff;font-size:23px;margin-bottom:6px}
.routebar p{color:rgba(255,255,255,.82);font-size:14.5px;max-width:54ch}
.routebar .btn{background:#fff;color:var(--green-deep);white-space:nowrap;text-align:center;padding:14px 26px;font-size:15px}
.routebar .btn:hover{background:var(--green-line)}

.stops{margin-top:10px}
.stop{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--green-line);padding:28px 0}
@media(min-width:820px){.stop{grid-template-columns:290px 1fr;gap:36px;padding:34px 0}}
.stop:last-child{border-bottom:1px solid var(--green-line)}
.stop-illus{background:var(--green-tint);border-radius:3px;overflow:hidden;position:relative;aspect-ratio:4/3}
.stop-illus svg{width:100%;height:100%;display:block}
.stop-num{position:absolute;top:12px;left:12px;background:var(--green);color:#fff;width:34px;height:34px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;font-family:var(--body)}
.stop-body{padding-top:20px}
@media(min-width:820px){.stop-body{padding-top:2px}}
.stop-body h3{font-size:26px;margin-bottom:4px}
.stop-when{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--green-deep);font-weight:600;margin-bottom:10px}
.stop-body p{font-size:15.5px;color:var(--ink-soft);max-width:60ch}
.stop-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px;align-items:center}
.fact{font-size:12.5px;padding:6px 11px;border:1px solid var(--green-line);border-radius:2px;color:var(--ink-soft)}
.fact b{color:var(--ink);font-weight:600}
.fact.shut{border-color:#8A2B2B;color:#8A2B2B;font-weight:600}
.fact.free{border-color:var(--green-deep);color:var(--green-deep)}
.maplink{font-size:12.5px;padding:7px 12px;border:1px solid var(--green);background:var(--green);color:#fff;border-radius:2px;text-decoration:none;font-weight:500}
.maplink:hover{background:var(--green-deep);color:#fff}
.photolink{font-size:12.5px;padding:7px 12px;border:1px solid var(--green);background:transparent;color:var(--green-ink);border-radius:2px;text-decoration:none;font-weight:500}
.photolink:hover{background:var(--green);color:#fff}
.photobox{background:var(--green-tint);border:1px solid var(--green-line);border-radius:3px;padding:26px;margin-top:34px;display:grid;gap:18px}
@media(min-width:760px){.photobox{grid-template-columns:1fr auto;align-items:center;gap:28px}}
.photobox h3{font-size:24px;margin-bottom:8px}
.photobox p{font-size:15px;color:var(--ink-soft);max-width:56ch}
.photobox .btn{white-space:nowrap;text-align:center}

.daynav{display:grid;gap:2px;grid-template-columns:1fr;margin-top:42px}
@media(min-width:760px){.daynav{grid-template-columns:1fr 1fr}}
.daynav a{background:var(--green-tint);padding:24px 26px;text-decoration:none;display:block}
.daynav a:hover{background:var(--green-line)}
.daynav span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);font-weight:600}
.daynav h3{font-family:var(--display);font-size:21px;margin-top:8px;font-weight:400}

.dayhub{display:grid;gap:2px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:820px){.dayhub{grid-template-columns:1fr 1fr}}
.dayhub a{background:var(--green-tint);text-decoration:none;display:block;padding:0 0 26px;overflow:hidden}
.dayhub a:hover{background:var(--green-line)}
.dayhub .hi{aspect-ratio:16/7;overflow:hidden}
.dayhub .hi svg{width:100%;height:100%;display:block}
.dayhub .tx{padding:22px 26px 0}
.dayhub span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);font-weight:600}
.dayhub h2{font-size:25px;margin:8px 0}
.dayhub p{font-size:14.5px;color:var(--ink-soft)}
.dayhub .n{margin-top:14px;font-size:12.5px;color:var(--green-ink);font-weight:600}
/* PRINT */
@media print{
  .nav,.menu-panel,.sticky,.cookie,.skip,#switcher,.booking-bar,.routebar,.car-arrow,.car-dots,.send-panel,.promo,.ask{display:none!important}
  html,body{background:#fff;color:#000;font-size:11pt}
  a{color:#000;text-decoration:none}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .hero{min-height:auto;padding:0;background:#fff}
  .hero-img,.hero-scrim{display:none}
  .hero-inner{position:static;padding:0;max-width:none}
  .hero h1{color:#000;font-size:22pt;margin-bottom:6pt}
  .hero p{color:#333}
  .band,.honest,.sec-tint,footer{background:#fff!important;color:#000!important}
  .band h2,.band p,.honest h2,.honest p,footer,footer a{color:#000!important}
  .sec{padding:10pt 0}
  .ph,.photo-wrap,.car{display:none}
  .stop{page-break-inside:avoid;border-bottom:1px solid #ccc}
  .gtk,.offer,.card{page-break-inside:avoid}
  h1,h2,h3{page-break-after:avoid}
  .wrap{max-width:none;padding:0}
  footer{border-top:1px solid #999;padding-top:8pt;font-size:9pt}
}

.page{position:relative}
.logo,.foot-logo{background-repeat:no-repeat;background-position:left center;background-size:contain}
.logo{width:69px;height:46px}
.foot-logo{width:99px;height:66px}
.logo-lt{background-image:url('/assets/img/logo-light.webp')}
.logo-dk{background-image:url('/assets/img/logo-dark.webp')}
.foot-logo{background-image:url('/assets/img/logo-light.webp')}
.logo-dk{background-image:url('/assets/img/logo-dark.png')}
.logo-lt,.foot-logo{background-image:url('/assets/img/logo-light.png')}
#switcher{position:fixed;right:12px;bottom:80px;z-index:200;background:var(--green-deep);
 border:1px solid rgba(255,255,255,.28);border-radius:3px;padding:9px 11px;
 box-shadow:0 6px 26px rgba(0,0,0,.32);max-width:calc(100vw - 24px)}
@media(min-width:900px){#switcher{bottom:18px}}
#switcher b{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
 color:rgba(255,255,255,.62);margin-bottom:5px;font-weight:600}
#switcher select{background:var(--green-deep);color:#fff;border:none;font-family:var(--body);
 font-size:13.5px;padding:3px 2px;max-width:250px;width:100%;cursor:pointer}
#switcher select:focus{outline:2px solid #fff;outline-offset:2px}
.cookie{bottom:150px}
@media(min-width:900px){.cookie{bottom:86px}}


/* ---- page level styles, deduplicated ---- */
.ln{fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.lnf{fill:none;stroke:var(--green);stroke-width:1.3;opacity:.4}.fl{fill:var(--green);opacity:.13}.fd{fill:var(--green);opacity:.26}.dot{fill:var(--green)}
/* =====================================================================
   ADDED 30 JULY 2026
   Reviews grid, the GST split note, and the light form used on the
   careers page. Everything above this line is the original stylesheet.
   ===================================================================== */

/* ---- reviews, up to 6 cards ---- */
.reviewgrid{display:grid;gap:2px;grid-template-columns:1fr;margin-top:44px}
@media(min-width:640px){.reviewgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.reviewgrid{grid-template-columns:1fr 1fr 1fr}}
.rev{background:var(--green-tint);padding:26px 24px 24px;display:flex;flex-direction:column;gap:14px;margin:0}
.rev-top{display:flex;align-items:baseline;gap:10px}
.stars{letter-spacing:1px;line-height:1}
.star{color:var(--green-line);font-size:15px}
.star.on{color:var(--green)}
.star.half{color:var(--green);opacity:.5}
.rev-num{font-family:var(--display);font-size:19px;font-weight:500;color:var(--green-deep);line-height:1}
.rev blockquote{font-family:var(--display);font-weight:300;font-size:16.5px;line-height:1.5;color:var(--ink);
  border:none;padding:0;margin:0;flex:1}
.rev figcaption{font-size:13px;line-height:1.45;padding-top:12px;border-top:1px solid var(--green-line)}
.rev figcaption b{display:block;font-weight:600;color:var(--ink)}
.rev-src{color:var(--ink-soft);font-size:12px;letter-spacing:.02em}

/* ---- GST split, shown only when a stay crosses the slab ---- */
.gst-split{margin:-4px 0 8px;font-size:12px;color:var(--ink-soft);text-align:right}

/* ---- light form, on a white or tinted section ---- */
.form-light input,.form-light select,.form-light textarea{width:100%;padding:11px 12px;
  border:1px solid var(--green-line);background:#fff;color:var(--ink);
  font-family:var(--body);font-size:15px;border-radius:2px}
.form-light label{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.75;margin-bottom:6px}
.form-light textarea{line-height:1.6;resize:vertical}

/* An option that cannot be true alongside what the guest has already
   chosen. Greyed and unclickable rather than removed, so the guest can
   see it exists and work out why it is off. */
.addon.addon-blocked{opacity:.42;cursor:not-allowed;background:var(--paper,#fff)}
.addon.addon-blocked input[type=checkbox]{cursor:not-allowed}
.addon.addon-blocked b{text-decoration:line-through;text-decoration-thickness:1px}


/* File attachment on a form. Styled to sit with the other fields rather
   than looking like the browser default, which varies wildly by platform. */
.filefield{display:block;width:100%;padding:13px 14px;border:1px dashed var(--green-line);
border-radius:3px;background:#fff;font:14px/1.4 var(--body);color:var(--ink-soft);cursor:pointer}
.filefield:hover{border-color:var(--green-ink)}
.filefield::file-selector-button{font:600 13px/1 var(--body);padding:9px 14px;margin-right:12px;
border:1px solid var(--green-line);border-radius:2px;background:var(--green-tint);
color:var(--green-deep);cursor:pointer}
.filefield::file-selector-button:hover{background:#fff}
.filenote{margin-top:7px}
.filenote.ok{color:var(--green-deep)}
.filenote.no{color:#8A2B2B}

/* A guest photograph standing in for the line drawing on an itinerary stop */
.stop-illus.has-photo{padding:0;background:none}
.stop-photo{width:100%;height:100%;object-fit:cover;display:block;border-radius:3px}
.stop-credit{position:absolute;left:0;right:0;bottom:0;margin:0;padding:7px 10px;
font-size:11px;letter-spacing:.02em;color:#fff;background:linear-gradient(to top,rgba(8,12,10,.72),rgba(8,12,10,0));
border-radius:0 0 3px 3px}
.stop-illus{position:relative}

/* ---------------------------------------------------------------- accounts
   Signing in, the account page, and the booking lookup.

   Built on the tokens above rather than new colours, because a page that
   almost matches reads as somebody else's work bolted on. Nothing here
   introduces a hue, a font or a radius the rest of the site does not use.   */

.lookup-form{max-width:420px;margin-top:28px}
.lookup-form .field{margin-bottom:20px}
.lookup-form label{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:6px;color:var(--green-ink)}
.lookup-form input{width:100%;font-family:var(--body);font-size:16px;padding:12px 14px;border:1px solid var(--green-line);border-radius:2px;background:var(--white);color:var(--ink)}
/* 16px and not smaller: anything under it makes iOS zoom the page on focus,
   which throws the guest out of the form they were halfway through. */
.lookup-form input:focus{border-color:var(--green);outline:2px solid var(--green);outline-offset:2px}
.lookup-form small{display:block;margin-top:6px;font-size:13px;color:var(--ink-soft)}
.lookup-form .btn{background:var(--green);color:var(--white);border-color:var(--green)}
.lookup-form .btn:hover{background:var(--green-deep)}

.answer{margin-top:28px;padding:20px 22px;border-radius:2px;border-left:3px solid var(--green-line);background:var(--green-tint);font-size:15px}
.answer.ok{border-left-color:var(--green)}
.answer.warn{border-left-color:#9A6400;background:#FFF6E0;color:#4A3200}
.answer h2{font-family:var(--display);font-size:23px;margin-bottom:14px}
.answer p{margin:0}

dl.booking{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0}
dl.booking dt{font-size:13px;font-weight:600;color:var(--green-ink);letter-spacing:.02em}
dl.booking dd{margin:0;font-variant-numeric:tabular-nums}

.panel{margin:0 0 40px}
.panel h2{font-size:clamp(21px,2.6vw,28px);margin-bottom:16px}
.panel.highlight{background:var(--green-tint);border-left:3px solid var(--green);padding:22px 24px;border-radius:2px}

/* Wide content scrolls inside its own box. A bill has eight columns and a
   phone is 360px wide; without this the whole page slides sideways and the
   navigation goes with it. */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.account{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
table.account th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--green-ink);border-bottom:1px solid var(--green-line);padding:0 14px 8px 0;white-space:nowrap}
table.account td{padding:11px 14px 11px 0;border-bottom:1px solid var(--green-tint);vertical-align:top}
table.account td.amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.account tr:last-child td{border-bottom:none}

/* --------------------------------------------------------- venues and thalis
   Written into the wedding and restaurant pages by tools/build-venues.py and
   tools/build-thali.py.                                                      */

.venue-grid{display:grid;gap:32px;margin-top:32px}
@media(min-width:800px){.venue-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}}
.venue{border:1px solid var(--green-line);border-radius:2px;padding:26px 24px}
.venue h3{font-size:24px;margin-bottom:10px}
.venue-facts{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-ink);font-weight:600;margin-bottom:14px}
.venue-extra{margin-top:14px;font-size:14px;color:var(--ink-soft)}
table.venue-holds{border-collapse:collapse;width:100%;margin-top:16px;font-size:14.5px}
table.venue-holds caption{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--green-ink);padding-bottom:8px}
table.venue-holds th{text-align:left;font-weight:400;padding:8px 14px 8px 0;border-bottom:1px solid var(--green-tint)}
table.venue-holds td{text-align:right;font-variant-numeric:tabular-nums;padding:8px 0;border-bottom:1px solid var(--green-tint);white-space:nowrap}
table.venue-holds small{display:block;color:var(--ink-soft);font-size:12.5px}

.thali-course{margin-top:18px;padding-top:16px;border-top:1px solid var(--green-tint)}
.thali-course h4{font-family:var(--display);font-size:18px;font-weight:400;margin-bottom:4px}
.thali-rule{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-ink);font-weight:600;margin-bottom:8px}
.thali-course ul{list-style:none;margin:0;padding:0;font-size:14.5px;color:var(--ink-soft)}
.thali-course li{padding:2px 0}
.thali-note{font-size:14px;color:var(--ink-soft);margin-top:8px}

/* ----------------------------------------------------------------- outlets
   Written into restaurant.html by tools/build-restaurant.py.               */

.outlet-grid{display:grid;gap:32px;margin-top:32px}
@media(min-width:800px){.outlet-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}}
.outlet{border:1px solid var(--green-line);border-radius:2px;padding:26px 24px}
.outlet h3{font-size:24px;margin-bottom:12px}
.outlet p{color:var(--ink-soft)}
dl.outlet-facts{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:18px 0 0;font-size:14.5px}
dl.outlet-facts dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--green-ink);padding-top:3px}
dl.outlet-facts dd{margin:0}
.outlet-actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}

/* ------------------------------------------------- amenities and what is near
   Written in by tools/build-amenities.py and tools/build-nearby.py.          */

.amenity-groups{display:grid;gap:28px;margin-top:28px}
@media(min-width:760px){.amenity-groups{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.amenity-group h3{font-size:20px;margin-bottom:12px}
ul.amenities{list-style:none;margin:0;padding:0;font-size:15px}
ul.amenities li{padding:6px 0 6px 22px;position:relative;border-bottom:1px solid var(--green-tint)}
ul.amenities li:last-child{border-bottom:none}
/* A tick drawn in CSS rather than an image or an emoji: an emoji renders as a
   different picture on every phone, and half of them are yellow. */
ul.amenities li::before{content:"";position:absolute;left:2px;top:13px;width:9px;height:5px;border-left:1.5px solid var(--green);border-bottom:1.5px solid var(--green);transform:rotate(-45deg)}
ul.amenities small{display:block;color:var(--ink-soft);font-size:13px}

.nearby-grid{display:grid;gap:28px;margin-top:32px}
@media(min-width:800px){.nearby-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
.near{border:1px solid var(--green-line);border-radius:2px;padding:24px 22px}
.near h3{font-size:22px;margin-bottom:8px}
.near p{font-size:15px;color:var(--ink-soft)}
.near-far{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--green-ink);margin-bottom:12px}
.near-when{margin-top:12px;color:var(--ink);font-size:14.5px}
.near-when b{color:var(--green-ink)}

/* ------------------------------------------------------------------ gallery
   Written in by tools/build-gallery.py.                                    */

.gallery-grid{display:grid;gap:18px;margin-top:28px;grid-template-columns:1fr}
@media(min-width:620px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:22px}}
figure.shot{margin:0}
figure.shot img{width:100%;height:auto;border-radius:2px;background:var(--green-tint)}
/* A height reserved before the picture arrives, so the page does not jump
   under somebody's thumb while fifty photographs load. */
figure.shot img{aspect-ratio:3/2;object-fit:cover}
figure.shot figcaption{margin-top:8px;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.illus{display:inline-block;margin-left:6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--green-ink);border:1px solid var(--green-line);border-radius:2px;padding:1px 5px;vertical-align:1px}

/* Where a file upload used to sit. The site does not take uploads: the
   file goes to the hotel's WhatsApp, attached to a person with a number,
   and nothing anonymous is written to the server. */
.fieldmsg.sendfile{
  margin:.25rem 0 0;
  padding:.7rem .85rem;
  border-left:3px solid var(--green,#527A5C);
  background:rgba(82,122,92,.06);
  color:inherit;
  font-size:.92rem;
  line-height:1.55;
}
.fieldmsg.sendfile a{ font-weight:600; }