/* ==========================================================================
   Suryavilas Luxury Resort and Spa — site stylesheet
   Design tokens measured from the reference build.
   ========================================================================== */

:root{
  --gold:#d4a75a;
  --gold-hover:#cf9c46;
  --gold-deep:#c79134;
  --gold-pale:#e9d2ab;
  --link:#8a5f14;        /* accessible gold for text on light backgrounds (4.6:1) */
  --link-hover:#6b4910;  /* darker still for hover/focus (7.0:1) */
  --navy:#00033a;
  --navy-alt:#000337;
  --strip:#2b2a29;       /* promo strip — the reference's own charcoal, separates it from the navy navbar */
  /* #787878 is 4.42:1 on white and 4.05:1 on #f5f5f5 - both just under AA.
     #707070 clears 4.5:1 on white and on the grey section background. */
  --body:#555;
  --heading:#50383b;
  --white:#fff;
  --grey-bg:#f5f5f5;
  --line:#e5e5e5;
  --serif:'Lora',Georgia,serif;
  --sans:'Montserrat',Arial,Helvetica,sans-serif;
  --script:'Charm',cursive;
  --shell:1170px;
  /* SIDE GUTTER — 10% of the viewport on each side, so content occupies the
     middle 80%. Defined once here and consumed by every container below, so
     the gutter cannot drift between components.
     Capped at 180px: past ~1800px a true 10% would keep stretching the
     margins and squeeze the text column, so beyond that the gutter holds
     and the centred max-width takes over. No lower clamp - 10% is what was
     asked for, and on a 390px phone that is a comfortable 39px. */
  --gutter:min(10vw, 180px);
}

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

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

body{
  margin:0;
  font-family:var(--sans);
  font-size:14px;
  line-height:1.9;
  font-weight:400;
  color:var(--body);
  background:var(--white);
}

img{max-width:100%;height:auto;display:block;border:0;}

/* --gold (#d4a75a) is only 2.2:1 on white. --link is the same hue darkened
   to 4.6:1 for body text; the bright gold stays for text on dark backgrounds. */
a{color:var(--link);text-decoration:none;transition:color .25s ease;}
/* hover darkens further so the state change is still visible, and stays AA */
a:hover,a:focus{color:var(--link-hover);text-decoration:underline;}

/* Components that draw their OWN underline (or are buttons/cards/images) must not
   also get the generic text-decoration, or two lines stack on hover. */
.main-nav a:hover,.main-nav a:focus,
.sibling-nav a:hover,.sibling-nav a:focus,
.read-more:hover,.read-more:focus,
.btn:hover,.btn:focus,
.brand:hover,.brand:focus,
.social-row a:hover,.social-row a:focus,
.property-card > a:hover,.property-card > a:focus,
.blog-card > a:hover,.blog-card > a:focus,
.hero-dots button:hover,.hero-dots button:focus,
.footer-links a:hover,.footer-links a:focus,
.dropdown a:hover,.dropdown a:focus{
  text-decoration:none;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--heading);
  font-weight:400;
  margin:0 0 24px;
  line-height:1.25;
}
h1{font-size:34px;}
h2{font-size:27px;}
h3{font-size:21px;}
h4{font-size:17px;}

p{margin:0 0 20px;}

/* The side gutter lives in PADDING so it insets the CHILDREN. Setting it via
   max-width alone centres the box but lets its children reach the box edges,
   which is what made headings touch the screen on phones.
   box-sizing:border-box is global, so max-width still caps the outer width. */
.shell{
  width:100%;
  max-width:calc(var(--shell) + 2 * var(--gutter));
  margin:0 auto;
  padding-inline:var(--gutter);
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--navy);color:#fff;padding:12px 20px;font-size:13px;
}
.skip-link:focus{left:0;color:#fff;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.6px;
  line-height:1;
  padding:12px 28px;
  border:1px solid var(--gold);
  border-radius:0;
  background:var(--gold);
  /* deep navy on gold = 7.3:1 (WCAG AA). White on gold was 2.2:1 and failed. */
  color:var(--navy);
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.btn:hover,.btn:focus{background:var(--gold-hover);border-color:var(--gold-hover);color:var(--navy);}
/* --gold-deep on white is only 2.8:1; this darker tone reaches 4.6:1 */
.btn-outline{background:transparent;color:#8a5f14;border-color:var(--gold);}
.btn-outline:hover,.btn-outline:focus{background:var(--gold);color:var(--navy);}

/* Visible keyboard focus everywhere (never remove without a replacement).
   WCAG 1.4.11 needs 3:1 for the indicator: --gold is only 2.2:1 on white,
   so the ring uses navy (18:1) on light backgrounds. */
a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--navy);
  outline-offset:2px;
}
.site-header a:focus-visible,.site-header button:focus-visible,
.promo-strip a:focus-visible,.promo-strip button:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* ---------- Fixed site head (promo strip + header), as on the reference ----------
   The reference keeps <header> at position:fixed; top:0; z-index:1030 so the nav
   stays put while the page scrolls. .site-head wraps both bars so they travel
   together, and body gets padding-top equal to their height (set by main.js). */
.site-head{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1030;
}

/* Once scrolled, the head compacts to 80% of its height (main.js adds .is-compact
   past the head's own height) — logo, padding and promo strip all scale down. */
.site-head .site-header,
.site-head .promo-strip,
.site-head .brand img,
.site-head .header-inner{
  transition:padding .28s ease,height .28s ease,width .28s ease,font-size .28s ease;
}
/* Target: 111px -> 89px, i.e. exactly 20% shorter. */
.site-head.is-compact .header-inner{min-height:50px;}
.site-head.is-compact .brand img{width:92px;height:auto;}
.site-head.is-compact .promo-strip{
  padding-top:8px;padding-bottom:8px;font-size:11.5px;
}
.site-head.is-compact .main-nav a{padding-top:4px;padding-bottom:4px;}
.site-head.is-compact .header-cta .btn{padding-top:12px;padding-bottom:12px;font-size:11.5px;}

/* Mobile: the header row is taller (logo + toggle + CTA), so compact it there too. */
@media (max-width:900px){
  .site-head.is-compact .header-inner{min-height:44px;padding-top:8px;padding-bottom:8px;}
  .site-head.is-compact .brand img{width:80px;}
  .site-head.is-compact .promo-strip{padding-top:4px;padding-bottom:4px;font-size:11px;}
}

@media (prefers-reduced-motion:reduce){
  .site-head .site-header,.site-head .promo-strip,
  .site-head .brand img,.site-head .header-inner{transition:none;}
}
/* Fallback offset if JS never runs; main.js replaces this with the measured height. */
body{padding-top:104px;}
@media (max-width:900px){body{padding-top:96px;}}
@media (max-width:640px){body{padding-top:112px;}}

/* On mobile the open menu must scroll rather than overflow the viewport */
@media (max-width:900px){
  .site-head{max-height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
}

/* ---------- Promo strip ---------- */
/* The reference paints this strip #2b2a29 (warm charcoal) against the navy
   navbar, so the two bars read as separate. Measured from the live reference. */
.promo-strip{
  background:var(--strip);
  color:#fff;
  font-size:11.5px;
  letter-spacing:.3px;
  text-align:center;
  /* 20% thinner than the previous 9px/43px strip -> ~34px.
     The inline link keeps its 24px WCAG target, so the saving comes from padding. */
  padding:4px 40px 4px 20px;
  line-height:24px;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.promo-strip strong{color:var(--gold);font-weight:700;}
.promo-strip a{color:var(--gold);text-decoration:underline;}
.promo-close{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:#fff;font-size:18px;line-height:1;cursor:pointer;
  /* WCAG 2.5.8 - at least a 24x24 target */
  min-width:28px;min-height:28px;padding:0;
  display:flex;align-items:center;justify-content:center;
}

/* Inline text links inside body copy keep their layout, but get a taller hit
   area so they clear the 24px minimum target size (WCAG 2.5.8). */
.read-more,.promo-strip a,.footer-contacts a,.contact-list a,
.band-contacts a,.prose-block a,.legal a,.blog-card h2 a,.sitemap-list a{
  display:inline-block;
  min-height:24px;
  line-height:24px;
}
/* multi-line card titles must keep their own line-height, just a taller box */
.blog-card h2 a{line-height:1.4;min-height:24px;}

/* ---------- Header ---------- */
.site-header{
  background:var(--navy);
  position:relative;
  z-index:900;
}
/* The navbar shares the SAME content box as the page rows (.room-inner,
   .gallery-grid, .prose-block, footer), so the logo lines up with the room
   widget on the left and BOOK NOW lines up with the content's right edge. */
.header-inner{
  width:100%;max-width:calc(1192px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px;
}
.brand img{width:118px;}
.brand{flex:0 0 auto;}

.nav-toggle{
  display:none;background:none;border:1px solid rgba(255,255,255,.4);
  color:#fff;font-size:15px;padding:8px 12px;cursor:pointer;line-height:1;
}

.main-nav > ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:20px;}
.main-nav ul{list-style:none;margin:0;padding:0;}
.main-nav a{
  color:#fff;font-size:15.5px;font-weight:300;letter-spacing:.3px;
  padding:8px 0;display:inline-block;position:relative;
}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--gold);transition:width .3s ease;
}
.main-nav a:hover,.main-nav a:focus,.main-nav a[aria-current="page"]{color:var(--gold);}
.main-nav a:hover::after,.main-nav a:focus::after,.main-nav a[aria-current="page"]::after{width:100%;}
.header-cta{flex:0 0 auto;}

/* ---------- Our Hotels dropdown ---------- */
.has-dropdown{position:relative;}
.dropdown-trigger{display:inline-flex;align-items:center;gap:8px;}
.dropdown-trigger .caret{font-size:9px;transition:transform .25s ease;}
.has-dropdown.is-open .dropdown-trigger .caret{transform:rotate(180deg);}

/* live "from" rate beside a Book Now button.
   Empty until JS fills it, and collapses entirely if the engine is
   unreachable or out of season - so a Book Now never sits next to a blank. */
.rate-note{
  display:inline-block;margin-left:12px;
  font-size:13px;color:var(--heading);font-weight:600;white-space:nowrap;
  vertical-align:middle;
}
.rate-note:empty{display:none;}
.rate-note .d-rate-from{font-size:12px;color:var(--body);font-weight:400;}
@media (max-width:600px){
  /* on a phone the button is often full-width, so put the price on its own line */
  .rate-note{display:block;margin:12px 0 0;white-space:normal;}
  .rate-note:empty{display:none;}
}

/* live "from" rate on a property card - hidden until JS fills it */
.card-rate{margin:0 0 16px;font-size:15px;color:var(--heading);font-weight:600;}
.card-rate:empty{display:none;}
.card-rate .d-rate-from{font-size:12.5px;color:var(--body);font-weight:400;}

/* ---- Rich "Our Hotels" panel: thumbnail + name + location + live rate ---- */
.dropdown.is-rich{min-width:376px;padding:8px;}
.dropdown.is-rich li{border-bottom:0;}
.dropdown.is-rich > li > a{
  display:flex;align-items:center;gap:16px;
  padding:12px;border-radius:3px;
  transition:background .2s ease,transform .2s ease;
}
.dropdown.is-rich > li > a:hover,
.dropdown.is-rich > li > a:focus{background:var(--grey-bg);transform:translateX(2px);}
.d-thumb{flex:0 0 68px;width:68px;height:68px;overflow:hidden;border-radius:3px;background:var(--grey-bg);}
.d-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease;}
.dropdown.is-rich > li > a:hover .d-thumb img{transform:scale(1.06);}
.d-text{min-width:0;}
.dropdown.is-rich .d-name{
  font-size:15.5px;line-height:1.3;margin-bottom:4px;
  color:var(--heading);font-weight:600;   /* 10.66:1 on white, 9.78:1 on hover */
}
.dropdown.is-rich .d-loc{font-size:11.5px;line-height:1.35;}
/* the live "from" rate; stays empty (and invisible) until JS fills it */
.d-rate{display:block;margin-top:4px;font-size:11.5px;color:var(--link);font-weight:600;letter-spacing:.02em;}
.d-rate:empty{display:none;}
.d-rate .d-rate-from{color:var(--body);font-weight:400;letter-spacing:0;}
/* "up a level" row: the PARENT HOME page, above the properties.
   Deliberately not styled like a property row - no thumbnail, smaller,
   so it reads as navigation rather than as a third hotel. */
.dropdown.is-rich .d-home{margin-bottom:4px;border-bottom:1px solid var(--line);}
.dropdown.is-rich .d-home a{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--link);
}
.dropdown.is-rich .d-home a:hover,
.dropdown.is-rich .d-home a:focus{background:var(--grey-bg);color:var(--link-hover);}
.dropdown.is-rich .d-home i{font-size:10px;transition:transform .2s ease;}
.dropdown.is-rich .d-home a:hover i{transform:translateX(-3px);}
@media (prefers-reduced-motion:reduce){
  .dropdown.is-rich .d-home i{transition:none;}
  .dropdown.is-rich .d-home a:hover i{transform:none;}
}

/* footer row of the panel */
.dropdown.is-rich .d-all{margin-top:4px;border-top:1px solid var(--line);}
.dropdown.is-rich .d-all a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--link);
}
.dropdown.is-rich .d-all a:hover,
.dropdown.is-rich .d-all a:focus{background:transparent;color:var(--link-hover);}
.dropdown.is-rich .d-all i{font-size:10px;transition:transform .2s ease;}
.dropdown.is-rich .d-all a:hover i{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){
  .dropdown.is-rich > li > a,.d-thumb img,.dropdown.is-rich .d-all i{transition:none;}
  .dropdown.is-rich > li > a:hover{transform:none;}
  .dropdown.is-rich > li > a:hover .d-thumb img{transform:none;}
}

.dropdown{
  position:absolute;top:100%;left:-16px;min-width:288px;
  display:block;
  background:#fff;border-top:2px solid var(--gold);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  list-style:none;margin:0;padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  z-index:960;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown{opacity:1;visibility:visible;transform:translateY(0);}

.dropdown li{border-bottom:1px solid var(--line);}
.dropdown li:last-child{border-bottom:0;}
.dropdown a{
  display:block;padding:12px 20px;color:var(--heading);font-size:12.5px;line-height:1.45;
}
.dropdown a::after{display:none;}
.dropdown a:hover,.dropdown a:focus{background:var(--grey-bg);color:var(--link);}
.dropdown .d-name{display:block;font-family:var(--serif);font-size:14.5px;margin-bottom:4px;color:var(--heading);font-weight:600;}
.dropdown .d-loc{display:block;font-size:11px;color:var(--body);}
.dropdown .d-soon{
  display:inline-block;margin-top:4px;background:var(--navy);color:var(--gold);
  font-size:9.5px;letter-spacing:.9px;padding:4px 8px;
}

/* ---------- Hero ---------- */
.hero{position:relative;background:#111;overflow:hidden;}
/* Homepage hero, 20% shorter at the client's request:
   the ratio's HEIGHT term drops 780 -> 624 (x0.8), and the min-height floor
   drops with it (300 -> 240) or phones would stay pinned at the old height
   and show no reduction at all. */
.hero-slides{position:relative;width:100%;aspect-ratio:1650/624;min-height:240px;}

/* ---------- Inner-page banner: 60% of the screen ----------
   Inner pages sized the banner by a fixed aspect-ratio, so its height swung from
   69% of the viewport on a 1366x768 laptop to 29% on a tablet, and object-fit
   cropped up to 49% of the image away on phones.

   .hero.is-banner sizes by the VIEWPORT instead: 60vh minus the fixed head, so
   the banner is a consistent 60% of the screen and the content below always
   starts at the same place. object-position keeps the subject centred-high,
   which is where these room/facade photos put their subject. */
.hero.is-banner .hero-slides{
  aspect-ratio:auto;
  /* Inner banners only (.is-banner); the three homepages do not carry this
     class, so their heroes are unaffected.
     60vh -> 69vh (+15%) -> 79.35vh (+15% again, this request).
     The cap rises with the height or max-height would swallow the increase. */
  height:calc(79.35vh - var(--head-h, 111px));
  min-height:344px;
  max-height:92.575vh;
}
.hero.is-banner .hero-slide img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 42%;
}

/* Short/landscape screens: 60vh would leave almost nothing for the page, so the
   banner is capped and the content keeps priority. */
@media (max-height:620px){
  .hero.is-banner .hero-slides{height:calc(92.575vh - var(--head-h, 111px));min-height:291px;}
}

/* PORTRAIT screens (tablet + phone). The banner source is a wide 2475x962 crop,
   so filling a tall 60vh box would throw away ~48% of the frame. On portrait the
   banner instead keeps a ratio close to the image's own, which shows almost all
   of it, and sits above the fold rather than filling it. */
@media (orientation:portrait) and (max-width:1024px){
  .hero.is-banner .hero-slides{height:92.575vh;aspect-ratio:auto;max-height:none;min-height:317px;}
  .hero.is-banner .hero-slide img{object-position:50% 45%;}
}

@media (max-width:640px) and (orientation:portrait){
  .hero.is-banner .hero-slides{height:92.575vh;aspect-ratio:auto;max-height:none;min-height:291px;}
}
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;
}
.hero-slide.is-active{opacity:1;}
.hero-slide picture{display:block;width:100%;height:100%;}
.hero-slide img{width:100%;height:100%;object-fit:cover;}

.hero-dots{
  position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px;z-index:6;
}
/* The dot stays 9px visually, but the button is 24x24 so it meets the
   minimum target size (WCAG 2.5.8); the dot is drawn with a border. */
.hero-dots button{
  width:24px;height:24px;padding:0;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.hero-dots button::before{
  content:"";width:9px;height:9px;border-radius:50%;
  border:1px solid #fff;background:transparent;
}
.hero-dots button[aria-current="true"]::before{background:var(--gold);border-color:var(--gold);}
/* visible keyboard focus on the dots (they had none) */
.hero-dots button:focus-visible{outline:3px solid #fff;outline-offset:1px;border-radius:50%;box-shadow:0 0 0 5px rgba(0,0,0,.55);}

/* ---------- Booking bar ---------- */
.booking-bar{
  /* opaque navy: with a translucent bar the label contrast depends on whatever
     hero image sits behind it, which cannot be guaranteed to meet AA. */
  background:var(--navy);
  padding:20px 20px;
}
.booking-form{
  /* The bar itself supplies the padding; the page gutter must NOT apply here
     or the fields are inset twice and leave a dead band inside the bar. */
  max-width:1192px;margin:0 auto;padding-inline:0;
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;
}
.booking-field{flex:1 1 170px;min-width:150px;}
.booking-field label{
  /* labels sit on the navy booking bar; white is 18:1 there.
     --gold-pale was only 1.47:1 where the bar renders over a light hero. */
  display:block;color:#fff;font-size:11px;letter-spacing:.4px;margin-bottom:4px;
}
.booking-field input,.booking-field select{
  width:100%;font-family:var(--sans);font-size:13px;color:#333;
  padding:8px 12px;border:1px solid #d9d9d9;border-radius:0;background:#fff;
}
/* Parent (group) bar: the property picker comes first and needs more room than
   a date field - "Suryavilas Luxury Resort and Spa, Solan" is a long option. */
.booking-prop{flex:2 1 260px;min-width:220px;}
@media (max-width:900px){
  /* on a narrow screen give the picker its own full-width row above the dates,
     so the option text is never truncated mid-word */
  .booking-prop{flex:1 1 100%;}
}

.booking-submit{flex:0 0 auto;}
.booking-submit .btn{padding:12px 32px;}

/* ---------- Rooms & Guests popup ---------- */
.rooms-trigger{cursor:pointer;}
.rg-overlay{
  position:fixed;inset:0;z-index:1300;
  background:rgba(0,3,58,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.rg-panel{
  background:#fff;width:100%;max-width:430px;
  max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.rg-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.rg-head h2{margin:0;font-size:17px;color:var(--heading);}
.rg-close{
  background:none;border:0;cursor:pointer;font-size:26px;line-height:1;
  color:var(--body);min-width:44px;min-height:44px;
}
.rg-close:hover,.rg-close:focus{color:var(--heading);}
.rg-body{padding:8px 20px 12px;overflow-y:auto;}
.rg-total{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;
}
.rg-total span{font-size:13.5px;color:var(--body);}
.rg-room{border-top:1px solid var(--line);padding:12px 0;}
.rg-room-title{
  margin:0 0 12px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--body);
}
.rg-guests{display:flex;flex-wrap:wrap;gap:16px 24px;}
.rg-guest{flex:1 1 150px;}
.rg-label{display:block;font-size:12.5px;color:var(--heading);margin-bottom:8px;}
.rg-counter{display:inline-flex;align-items:center;border:1px solid #d9d9d9;}
.rg-btn{
  width:38px;height:38px;border:0;background:#fff;cursor:pointer;
  font-size:17px;line-height:1;color:var(--heading);
}
.rg-btn:hover:not([disabled]),.rg-btn:focus:not([disabled]){background:var(--grey-bg);}
.rg-btn[disabled]{color:#c4c4c4;cursor:not-allowed;}
.rg-val{
  min-width:42px;text-align:center;font-size:14px;color:var(--heading);
  border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6;line-height:38px;
}
.rg-ages{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:12px;}
.rg-age label{display:block;font-size:12px;color:var(--body);margin-bottom:4px;}
.rg-age select{
  font-family:var(--sans);font-size:13px;padding:8px 12px;
  border:1px solid #d9d9d9;background:#fff;min-height:38px;min-width:86px;
}
.rg-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-top:1px solid var(--line);
}
.rg-add{
  background:none;border:0;cursor:pointer;padding:8px 0;min-height:44px;
  font-family:var(--sans);font-size:13px;color:var(--link);
}
.rg-add:hover,.rg-add:focus{color:var(--link-hover);text-decoration:underline;}
.rg-add.is-max{color:var(--body);cursor:default;font-size:12px;}
.rg-done{padding:12px 36px;min-height:44px;}
@media (max-width:600px){
  .rg-overlay{align-items:flex-end;padding:0;}
  .rg-panel{max-width:none;max-height:92vh;}
  .rg-guests{gap:16px;}
  .rg-guest{flex:1 1 100%;}
}

/* ---------- BOOK NOW popup (mobile) ---------- */
.booknow-modal{
  position:fixed;inset:0;z-index:1200;
  background:rgba(0,3,58,.62);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;
}
.booknow-panel{
  background:#fff;width:100%;max-width:520px;
  max-height:92vh;overflow-y:auto;
  padding:20px 20px 28px;
  animation:bn-rise .22s ease-out;
}
@keyframes bn-rise{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.booknow-panel{animation:none;}}
.bn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.bn-head h2{margin:0;font-size:19px;color:var(--heading);}
.bn-close{
  background:none;border:0;cursor:pointer;
  font-size:26px;line-height:1;color:var(--body);
  min-width:44px;min-height:44px;   /* 2.5.8 target size */
}
.bn-close:hover,.bn-close:focus{color:var(--heading);}
.bn-field{margin-bottom:12px;}
.bn-field label{
  display:block;font-size:11.5px;letter-spacing:.4px;
  color:var(--heading);margin-bottom:4px;
}
.bn-field input,.bn-field select{
  width:100%;font-family:var(--sans);font-size:15px;color:#333;
  padding:12px 12px;border:1px solid #cfcfcf;border-radius:0;background:#fff;
  min-height:44px;
}
.bn-go{width:100%;margin-top:8px;padding:12px 20px;min-height:44px;}
@media (min-width:761px){
  /* the popup is a mobile affordance, but if it is opened on a wider screen
     (the parent CTA, which has no single engine) centre it rather than
     leaving it stuck to the bottom edge */
  .booknow-modal{align-items:center;padding:20px;}
  .booknow-panel{max-height:86vh;}
}

/* ---------- Address band ---------- */
.address-band{background:var(--navy);color:#fff;text-align:center;padding:28px var(--gutter) 32px;}
.address-band h1,.address-band h2{color:#fff;font-size:22px;margin:0 0 12px;}
.address-band p{margin:0 0 16px;font-size:13px;color:rgba(255,255,255,.9);}
.band-contacts{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;font-size:12.5px;
}
.band-contacts a{color:#fff;}
.band-contacts a:hover{color:var(--gold);}
.band-contacts i{color:var(--gold);margin-right:8px;}

/* ---------- Alternating feature sections ---------- */
.feature{padding:72px 0;}
.feature-inner{
  /* same 1192px content box as the navbar */
  max-width:calc(1192px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px;
}
@media (max-width:1240px){.feature-inner{padding-inline:var(--gutter);}}
.feature-media img{width:100%;}
.feature-body{max-width:460px;}
.feature h2{margin-bottom:20px;}
/* In a reversed row the markup already places .feature-media first, so the image
   sits in column 1. Only the text alignment needs adjusting — adding `order`
   here would cancel the markup order and push every image back to the right. */
.feature.is-reversed .feature-body{justify-self:end;}
.feature.alt-bg{background:var(--grey-bg);}

/* ---------- Award ---------- */
.award{text-align:center;padding:40px 20px 44px;}
.award img{margin:0 auto;width:132px;height:auto;}

/* ---------- Amenities ---------- */
.amenities{padding:68px 0 76px;background:var(--grey-bg);}
.amenities h2{text-align:center;margin-bottom:40px;padding-inline:var(--gutter);}
.amenities ul{
  list-style:none;margin:0 auto;padding-inline:var(--gutter);max-width:calc(1000px + 2 * var(--gutter));
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px 36px;
}
.amenities li{display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.6;}
.amenities i{color:var(--gold);font-size:15px;width:20px;flex:0 0 20px;margin-top:4px;text-align:center;}

/* ---------- Properties grid (parent portfolio) ---------- */
.properties{padding:72px 0;}
.properties > h2{text-align:center;margin-bottom:40px;padding-inline:var(--gutter);}
.property-grid{
  /* same 1192px content box as the navbar and the room rows */
  max-width:calc(1192px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(2,1fr);gap:36px;
}
.property-card{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;}
.property-card img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.property-card .card-body{padding:24px 28px 28px;flex:1 1 auto;display:flex;flex-direction:column;}
.property-card h2,.property-card h3{font-size:21px;text-align:left;margin:0 0 8px;}
.property-card .contact-list{margin-bottom:8px;}
.property-card .card-loc{font-size:12px;letter-spacing:.4px;color:var(--link);margin-bottom:12px;}
.property-card .card-actions{margin-top:auto;padding-top:16px;}
.badge-soon{
  display:inline-block;align-self:flex-start;background:var(--navy);color:var(--gold);
  font-size:10.5px;letter-spacing:1px;padding:4px 12px;margin-bottom:12px;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding:20px 0 0;}
.breadcrumb .shell-wide{max-width:calc(1192px + 2 * var(--gutter));padding-inline:var(--gutter);}
@media (max-width:1240px){.breadcrumb .shell-wide{padding-inline:var(--gutter);}}
.breadcrumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;
  font-size:13px;line-height:1.5;color:var(--body);
}
.breadcrumb li{display:flex;align-items:center;gap:0 8px;}
/* separator is decorative - it must not be read out as content */
.breadcrumb li + li::before{content:"\203A";color:#9a9a9a;speak:never;}
.breadcrumb a{color:var(--link);text-decoration:none;}
.breadcrumb a:hover{color:var(--link-hover);text-decoration:underline;}
.breadcrumb [aria-current="page"]{color:var(--heading);font-weight:600;}
/* 2.5.8 target size: 13px text alone gives a ~20px row, so pad the tap area out */
.breadcrumb a{display:inline-block;padding:4px 0;min-height:24px;}
@media (max-width:900px){.breadcrumb{padding:16px 0 0;}.breadcrumb ol{font-size:12px;}}

/* ---------- Page intro (epigraph + lead copy) ---------- */
.page-intro{padding:60px 0 12px;text-align:center;}
.page-intro .shell{max-width:900px;}
/* Some reference pages (Dining, Wellness) left-align the h1 over the full row width */
.page-intro.is-left{text-align:left;padding:52px 0 8px;}
.page-intro .shell-wide{max-width:calc(1192px + 2 * var(--gutter));padding-inline:var(--gutter);}
@media (max-width:1240px){.page-intro .shell-wide{padding-inline:var(--gutter);}}
.epigraph{
  font-family:var(--script),var(--serif);
  font-size:20px;line-height:1.6;color:var(--link);
  margin:0 0 28px;
}
.epigraph span{display:block;}
.page-intro .lead{text-align:left;}

/* ---------- Room rows ---------- */
.room-row{padding:36px 0;border-bottom:1px solid var(--line);}
.room-row:last-of-type{border-bottom:0;}
.room-inner{
  /* matches the reference row: 1192px content box starting at x=124 on a 1440 viewport,
     columns 446 / 429 / 228 with 44px gutters */
  max-width:calc(1192px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:446fr 429fr 228fr;
  gap:0 44px;align-items:start;
}
.room-body h2{margin-bottom:16px;}
.room-body > p{margin-bottom:12px;}

/* "Read More" is an inline link after the copy, as on the reference */
.read-more{
  font-size:12.5px;letter-spacing:.3px;
  border-bottom:1px solid currentColor;padding-bottom:0;
}
.read-more:hover,.read-more:focus{border-bottom-color:var(--gold-hover);}

.room-aside{align-self:start;}
.room-highlights-title{
  font-family:var(--serif);font-size:16px;color:var(--heading);
  margin:0 0 12px;font-weight:400;
}
.room-highlights{list-style:none;margin:0 0 24px;padding:0;}
.room-highlights li{
  position:relative;padding-left:20px;margin-bottom:8px;font-size:13px;line-height:1.6;
}
.room-highlights li::before{
  content:"";position:absolute;left:0;top:8px;
  width:6px;height:6px;background:var(--gold);transform:rotate(45deg);
}
.room-actions{margin-top:20px;text-align:center;}
.room-actions .btn{padding:12px 24px;}

/* Room image carousel */
.room-gallery{position:relative;overflow:hidden;background:#f0f0f0;}
.room-gallery .slides{position:relative;aspect-ratio:4/3;}
.room-gallery .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;}
.room-gallery .slide.is-active{opacity:1;}
.room-gallery img{width:100%;height:100%;object-fit:cover;}
.room-gallery .g-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:44px;border:0;cursor:pointer;
  background:var(--navy);color:#fff;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease;
}
.room-gallery .g-nav:hover,.room-gallery .g-nav:focus{background:var(--gold);}
.room-gallery .g-prev{left:0;}
.room-gallery .g-next{right:0;}
.room-gallery .g-count{
  position:absolute;right:10px;bottom:10px;
  /* opaque navy: a translucent background cannot guarantee a contrast ratio
     because the image behind it is arbitrary. Solid navy = 18:1 with white. */
  background:var(--navy);color:#fff;font-size:11px;padding:4px 8px;letter-spacing:.4px;
}

/* Rows with no highlights column (dining venues, spa offerings) —
   image 446 + copy. The reference crops these 446x251 (16:9), not 4:3. */
.room-inner.two-col{grid-template-columns:446fr 702fr;}
/* Two-col rows carry shorter copy than room rows, so with a 4:3 image the text
   sat against ~200px of empty column. Centre it; 3-col room rows keep start. */
.room-inner.two-col{align-items:center;}
/* Dining / spa / venue rows previously rendered 16:9 while the Accommodations
   rows rendered 4:3 — the SAME row component in two different shapes. Matched
   to 4:3 so every row has one image height. object-fit:cover, so no distortion. */
.room-inner.two-col .slides{aspect-ratio:4/3;}

@media (max-width:1240px){
  .room-inner{padding-inline:var(--gutter);}
}

@media (max-width:1024px){
  /* highlights drop under the copy, image keeps its own column */
  .room-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 36px;}
  .room-aside{grid-column:2;margin-top:20px;}
}

@media (max-width:900px){
  .room-inner{grid-template-columns:1fr;gap:24px;}
  /* .room-inner.two-col is more specific than .room-inner, so it needs its own
     collapse rule - without it the dining/venue rows stayed 2-column on phones
     and squeezed the image into a ~127px sliver. */
  .room-inner.two-col{grid-template-columns:1fr;}
  .room-gallery{order:1;}
  .room-body{order:2;}
  .room-aside{order:3;grid-column:1;margin-top:0;}
  .room-row{padding:36px 0;}
}

/* ---------- Prose block (wellness sections, about, policy) ---------- */
.prose-block{padding:16px 0 36px;}
.prose-block .shell-wide{max-width:calc(1192px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);}
.prose-block h2{margin-bottom:16px;}
.prose-block ul{margin:0 0 20px;padding:0;list-style:none;}
.prose-block ul li{position:relative;padding-left:20px;margin-bottom:8px;}
.prose-block ul li::before{
  content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;background:var(--gold);transform:rotate(45deg);
}

/* Four-across image strip */
.img-strip{
  max-width:calc(1192px + 2 * var(--gutter));margin:0 auto 48px;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
}
.img-strip img{width:100%;aspect-ratio:378/213;object-fit:cover;}

/* Therapy cards (Heal with Ayurveda) */
.therapy-grid{
  max-width:calc(1192px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:28px;
}
.therapy-card{border:1px solid var(--line);padding:24px 24px 28px;display:flex;flex-direction:column;}
.therapy-card h3{font-size:15px;letter-spacing:1px;margin:0 0 8px;color:var(--link);}
.therapy-card .t-tag{font-family:var(--serif);font-size:15px;color:var(--heading);margin:0 0 12px;}
.therapy-card p{font-size:12.5px;line-height:1.75;}
.therapy-card .t-actions{margin-top:auto;padding-top:16px;display:flex;gap:12px;flex-wrap:wrap;}
.therapy-card .btn{padding:12px 20px;}

@media (max-width:1240px){
  .prose-block .shell-wide,.img-strip,.therapy-grid,.property-grid{padding-inline:var(--gutter);}
}
@media (max-width:860px){
  .img-strip{grid-template-columns:repeat(2,1fr);gap:16px;}
}

/* Two-column prose (location, contact) */
/* Travel hubs / attractions: name on its own line, mode as a quiet sub-label.
   Rows are spaced so a distance can be dropped in later without a reflow. */
.loc-list{list-style:none;margin:0 0 20px;padding:0;}
.loc-list li{padding:8px 0;border-bottom:1px solid #ece7de;}
.loc-list li:last-child{border-bottom:0;}
.loc-name{display:block;color:var(--heading);font-weight:600;}
.loc-mode{display:block;font-size:13px;color:var(--body);margin-top:4px;}

.loc-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
@media (max-width:860px){.loc-cols{grid-template-columns:1fr;gap:28px;}}

/* Offer kicker */
.offer-kicker{
  font-family:var(--serif);font-size:15px;letter-spacing:1px;
  color:var(--link);margin:-8px 0 12px;
}

/* Map */
.map-block{max-width:calc(1192px + 2 * var(--gutter));margin:0 auto 60px;padding-inline:var(--gutter);}
.map-block iframe{width:100%;height:420px;border:0;display:block;}
@media (max-width:1240px){.map-block{padding-inline:var(--gutter);}}
@media (max-width:640px){.map-block iframe{height:300px;}}

/* Contact form */
.contact-form label{
  display:block;font-size:12px;letter-spacing:.4px;color:var(--heading);margin:0 0 4px;
}
.contact-form input,.contact-form textarea{
  width:100%;font-family:var(--sans);font-size:13px;color:#333;
  padding:12px 12px;border:1px solid #d9d9d9;border-radius:0;background:#fff;
  margin-bottom:16px;
}
.contact-form input:focus,.contact-form textarea:focus{
  outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);
}
.contact-form textarea{resize:vertical;}

/* ---------- Sibling pill nav (room / dining detail pages) ---------- */
.sibling-nav{border-bottom:1px solid var(--line);background:#fff;}
.sibling-nav ul{
  max-width:calc(1192px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;
}
.sibling-nav a{
  display:inline-block;padding:16px 16px;font-size:12.5px;letter-spacing:.3px;
  color:var(--body);border-bottom:2px solid transparent;
}
.sibling-nav a:hover,.sibling-nav a:focus{color:var(--link);}
.sibling-nav a[aria-current="page"]{color:var(--link);border-bottom-color:var(--gold);}
@media (max-width:1240px){.sibling-nav ul{padding:0 12px;}}
@media (max-width:640px){.sibling-nav a{padding:12px 12px;font-size:11.5px;}}

.detail-gallery{margin-bottom:56px;}

/* Occupancy table (events) */
.occ-table{border-collapse:collapse;width:100%;max-width:420px;margin:0 0 20px;font-size:12.5px;}
.occ-table th,.occ-table td{border:1px solid var(--line);padding:8px 12px;text-align:left;}
.occ-table thead th{background:var(--grey-bg);font-family:var(--serif);font-weight:400;color:var(--heading);}
.occ-table tbody th{font-weight:400;color:var(--body);}

/* Package cards carry a full-bleed image at the top of the card */
.pkg-card{padding:0 0 28px;overflow:hidden;}
.pkg-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:0 0 16px;}
.pkg-card > :not(img){padding-left:24px;padding-right:24px;}
.pkg-card .t-actions{padding-left:24px;padding-right:24px;}
.pkg-line{margin:0 0 4px;font-size:12px;font-style:italic;}

/* ---------- Gallery ---------- */
.gallery-wrap{padding:52px 0 72px;}
.gallery-grid{
  max-width:calc(1192px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.gallery-grid figure{margin:0;overflow:hidden;background:var(--grey-bg);}
.gallery-grid img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform .5s ease;
}
.gallery-grid figure:hover img{transform:scale(1.04);}
@media (max-width:1240px){.gallery-grid{padding-inline:var(--gutter);}}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media (max-width:560px){.gallery-grid{grid-template-columns:1fr;}}

/* ---------- Image placeholders (awaiting client photography) ----------
   Grey blocks that hold the exact aspect ratio the real image will use, so
   swapping a photo in later changes nothing about the layout. */
.ph{
  display:block;width:100%;
  background:#d9d9d9;
  background-image:linear-gradient(135deg,rgba(0,0,0,.035) 25%,transparent 25%,
    transparent 50%,rgba(0,0,0,.035) 50%,rgba(0,0,0,.035) 75%,transparent 75%);
  background-size:22px 22px;
  position:relative;
}
.ph::after{
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.6px;
  color:#6f6f6f;text-align:center;padding:12px;
}
.ph-banner{aspect-ratio:2400/686;}
.ph-square{aspect-ratio:1/1;}
.ph-wide{aspect-ratio:900/506;}
.ph-room{aspect-ratio:4/3;}
@media (orientation:portrait) and (max-width:1024px){
  .ph-banner{aspect-ratio:16/9;}
}
@media (max-width:640px) and (orientation:portrait){
  .ph-banner{aspect-ratio:3/2;}
}

/* ---------- Offer filters ---------- */
/* Gallery category tabs - same visual language as the offers filter, so the
   site has ONE filter style rather than two. */
.gallery-filter{
  max-width:calc(1192px + 2 * var(--gutter));padding-inline:var(--gutter);margin:0 auto 32px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;
}
.gallery-filter button{
  font-family:var(--sans);font-size:12px;letter-spacing:.5px;
  padding:12px 20px;min-height:24px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--body);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.gallery-filter button:hover,.gallery-filter button:focus{
  border-color:var(--gold);color:var(--link);
}
.gallery-filter button[aria-selected="true"]{
  background:var(--navy);border-color:var(--navy);color:#fff;
}
.gallery-count{
  flex-basis:100%;text-align:center;margin:4px 0 0;
  font-size:12.5px;color:var(--body);
}
@media (max-width:1240px){.gallery-filter{padding-inline:var(--gutter);}}
@media (max-width:640px){
  .gallery-filter{gap:8px;}
  .gallery-filter button{padding:8px 12px;font-size:11.5px;}
}

.offer-filters{
  max-width:calc(1192px + 2 * var(--gutter));padding-inline:var(--gutter);margin:0 auto 36px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
.offer-filters button{
  font-family:var(--sans);font-size:12px;letter-spacing:.5px;
  padding:12px 20px;min-height:24px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--body);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.offer-filters button:hover,.offer-filters button:focus{
  border-color:var(--gold);color:var(--link);
}
.offer-filters button[aria-pressed="true"]{
  background:var(--navy);border-color:var(--navy);color:#fff;
}
/* Property filter row on the PARENT offers page - sits above the category row
   and reads as the primary cut, so it is filled rather than outlined. */
.offer-props{margin-bottom:16px;}
.offer-props button{
  border-color:var(--gold-pale);color:var(--heading);
}
.offer-props button[aria-pressed="true"]{
  background:var(--gold);border-color:var(--gold);color:#2b2a29;
}
.offer-props button:hover,.offer-props button:focus{
  border-color:var(--gold);color:var(--link);
}
.offer-props button[aria-pressed="true"]:hover,
.offer-props button[aria-pressed="true"]:focus{
  background:var(--gold-hover);border-color:var(--gold-hover);color:#2b2a29;
}

.offer-count{
  max-width:calc(1192px + 2 * var(--gutter));padding-inline:var(--gutter);margin:0 auto 24px;
  text-align:center;font-size:12.5px;color:var(--body);
}

/* ---------- Offer cards ---------- */
.offer-grid{
  max-width:calc(1192px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:32px;
}
.offer-card{
  border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;overflow:hidden;
}
.offer-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.offer-card .o-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1 1 auto;}
.offer-card h2,.offer-card h3{
  font-size:15px;letter-spacing:.8px;margin:0 0 8px;color:var(--link);
}
.offer-card .o-tag{
  font-family:var(--serif);font-size:14.5px;color:var(--heading);margin:0 0 12px;
}
/* "coming soon" card - a real card, visibly not a live discount.
   Declared AFTER `.offer-card .o-tag` above: same specificity (0,2,0), so
   source order decides and the badge must come later to win. */
.offer-card.is-soon img{filter:grayscale(.45);}
.offer-card.is-soon .o-tag{
  /* .o-body is a column flex container, so this <p> is a FLEX ITEM and its
     display is blockified - `inline-block` here is ignored by spec, not by
     the cascade. align-self is what actually shrinks the badge to its text. */
  align-self:flex-start;
  background:var(--navy);color:#fff;
  font-family:var(--sans);font-size:11px;letter-spacing:.09em;
  padding:4px 8px;margin:0 0 12px;
}

.offer-card .o-line{margin:0 0 4px;font-size:12px;font-style:italic;}
.offer-card p{font-size:12.5px;line-height:1.75;}
/* Parent cards show ONE line of description, then Read More on the next line. */
.offer-card .clamp-1{
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:4px;
}
.offer-card .o-more{margin:0 0 4px;}
.offer-card .o-actions{margin-top:auto;padding-top:16px;display:flex;gap:12px;flex-wrap:wrap;}
.offer-card .btn{padding:12px 20px;}
.offer-card .o-cat{
  display:inline-block;align-self:flex-start;
  background:var(--grey-bg);color:var(--body);
  font-size:10.5px;letter-spacing:.8px;padding:4px 12px;margin:0 0 12px;
}
.offer-card[hidden]{display:none;}

.offers-empty{text-align:center;padding:32px 20px;color:var(--body);}

@media (max-width:1240px){
  .offer-grid,.offer-filters,.offer-count{padding-inline:var(--gutter);}
}

/* ---------- Blog listing ---------- */
.blog-wrap{padding:44px 0 72px;}
.blog-grid{
  max-width:calc(1192px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px 32px;
}
.blog-card{display:flex;flex-direction:column;border:1px solid var(--line);background:#fff;}
.blog-card img{width:100%;aspect-ratio:550/309;object-fit:cover;display:block;}
.blog-body{padding:20px 20px 24px;}
.blog-card h2{font-size:16px;line-height:1.4;margin:0 0 8px;}
.blog-card h2 a{color:var(--heading);}
.blog-card h2 a:hover,.blog-card h2 a:focus{color:var(--link);}
.blog-card p{font-size:12.5px;line-height:1.7;margin:0;}
@media (max-width:1240px){.blog-grid{padding-inline:var(--gutter);}}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:24px 20px;}}
@media (max-width:560px){.blog-grid{grid-template-columns:1fr;}}

/* Blog article body */
.blog-post img{max-width:100%;height:auto;margin:20px 0;}
.blog-post h2{font-size:20px;margin:32px 0 12px;}
.blog-post h3{font-size:16px;margin:24px 0 12px;}

/* ---------- Sitemap ---------- */
.sitemap-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;}
.sitemap-cols h2{font-size:17px;margin-bottom:12px;}
.sitemap-list{list-style:none;margin:0;padding:0;}
.sitemap-list li{margin-bottom:8px;font-size:13px;}
.sm-soon{font-size:10.5px;color:var(--body);opacity:.7;}

/* ---------- Legal / long-form text ---------- */
.legal .shell{max-width:860px;}
.legal p{margin:0 0 16px;font-size:14px;line-height:1.85;color:#3d3d3d;}
.legal h2{font-size:19px;margin:32px 0 12px;}
.legal h3{font-size:16px;margin:24px 0 12px;}
.legal ul,.legal ol{margin:0 0 16px;padding-left:20px;}
.legal li{margin-bottom:8px;font-size:14px;line-height:1.8;color:#3d3d3d;}
.legal a{word-break:break-word;}

/* ---------- Simple content page ---------- */
.page-head{background:var(--navy);color:#fff;text-align:center;padding:48px 20px;}
.page-head h1{color:#fff;margin:0;}
.page-body{padding:68px 0 76px;}
.page-body .shell{max-width:860px;}

/* ---------- Contact list ---------- */
.contact-list{list-style:none;margin:0 0 24px;padding:0;}
.contact-list li{margin-bottom:8px;font-size:13.5px;}
.contact-list i{color:var(--gold);width:20px;margin-right:8px;text-align:center;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#fff;padding:52px 20px 28px;text-align:center;}
.site-footer h2,.site-footer h3{color:#fff;font-size:20px;margin-bottom:12px;}
.site-footer p{color:rgba(255,255,255,.88);font-size:13px;margin:0 0 16px;}
.footer-contacts{
  list-style:none;margin:0 0 28px;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;font-size:12.5px;
}
.footer-contacts a{color:#fff;}
.footer-contacts a:hover{color:var(--gold);}
.footer-contacts i{color:var(--gold);margin-right:8px;}

.footer-social-title{font-family:var(--serif);font-size:15px;margin-bottom:16px;color:#fff;}
.social-row{display:flex;justify-content:center;gap:12px;margin-bottom:28px;}
.social-row a{
  width:34px;height:34px;border:1px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.social-row a:hover{background:var(--gold);color:#fff;}
/* Tripadvisor is NOT in Font Awesome 6's free brands set (content renders as
   `none`, 0px wide), so that one icon is an inline SVG using currentColor. */
.ta-icon{display:block;}

/* ---------- Fixed social rail (as on the reference) ----------
   40x40 brand-coloured tiles pinned to the left edge, vertically centred.
   Colours are the reference's own measured values. */
.social-rail{
  /* Sat at the vertical centre, where it overlapped the hero subject and the
     booking bar. Moved down to 72% so it clears both and sits nearer the
     lower third, which is where the eye already is after the hero. */
  position:fixed;left:0;top:72%;transform:translateY(-50%);
  z-index:1040;display:flex;flex-direction:column;
}
.social-rail a{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;text-decoration:none;
  transition:width .18s ease;
}
.social-rail a:hover,.social-rail a:focus{width:46px;color:#fff;}
.social-rail a:focus-visible{outline:3px solid var(--navy);outline-offset:-3px;}
.social-rail .sr-fb{background:#4867aa;}
.social-rail .sr-ig{background:#cd486b;}
/* The mint Tripadvisor tile is light: white on it is 1.68:1, well under the
   3:1 that 1.4.11 wants for a graphical object. The reference does exactly
   that; here the glyph takes the brand's own dark green instead (7.31:1).
   Scoped under .social-rail so it beats `.social-rail a{color:#fff}`, which
   has equal specificity and comes first. */
.social-rail .sr-trip{background:#51e0a2;color:#0a3d2a;}
.social-rail .sr-trip:hover,
.social-rail .sr-trip:focus{color:#0a3d2a;}

@media (prefers-reduced-motion:reduce){.social-rail a{transition:none;}
  .social-rail a:hover,.social-rail a:focus{width:40px;}}

@media (max-width:900px){
  /* on a phone a left rail sits over the content; move it to the bottom edge
     as a horizontal strip, which is the usual mobile treatment */
  .social-rail{
    top:auto;bottom:0;left:0;right:0;transform:none;
    flex-direction:row;justify-content:center;
  }
  .social-rail a{flex:1 1 auto;max-width:96px;height:44px;}
  .social-rail a:hover,.social-rail a:focus{width:auto;}
}
@media print{.social-rail{display:none;}}

.footer-divider{border:0;border-top:1px solid rgba(255,255,255,.18);max-width:960px;margin:0 auto 20px;}
.footer-links{
  list-style:none;margin:0 0 16px;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font-size:12px;
}
.footer-links a{
  color:rgba(255,255,255,.85);
  display:inline-block;min-height:24px;line-height:24px;   /* WCAG 2.5.8 */
}
.footer-links a:hover{color:var(--gold);}
.footer-note{font-size:11.5px;color:rgba(255,255,255,.6);margin:0;}
.footer-note a{color:rgba(255,255,255,.75);}

/* ---------- Responsive ---------- */
/* Below ~1240px a full 10vw inset each side squeezes the 9 nav items onto two
   lines, so the inset tapers off before the hamburger takes over at 900px. */
/* Below the 1192px content box the rows take a 20px gutter — match it exactly. */
@media (max-width:1240px){
  .header-inner{padding-inline:var(--gutter);}
}

/* 9 nav items must stay on ONE line all the way down to the 900px hamburger. */
@media (max-width:1100px){
  .main-nav > ul > li > a{white-space:nowrap;}
  .header-inner{gap:16px;}
}

@media (max-width:1024px){
  .feature-inner{gap:40px;}
  .amenities ul{grid-template-columns:repeat(2,1fr);}
  .header-inner{gap:12px;}
}

@media (max-width:980px){
  .brand img{width:96px;}
  .header-cta .btn{padding:12px 16px;font-size:11px;}
}

@media (max-width:900px){
  .nav-toggle{display:inline-block;order:3;}
  .header-inner{flex-wrap:wrap;min-height:58px;padding:12px 20px;}
  .header-cta{order:2;margin-left:auto;}
  .main-nav{order:4;flex:1 1 100%;display:none;}
  .main-nav.is-open{display:block;}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 0 12px;}
  .main-nav > ul > li{border-top:1px solid rgba(255,255,255,.12);}
  .main-nav a{display:block;padding:12px 4px;font-size:16px;}
  .main-nav a::after{display:none;}

  /* Dropdown becomes an inline expandable group on mobile */
  .dropdown{
    position:static;min-width:0;left:auto;
    background:transparent;border-top:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;
    display:none;padding:0 0 8px;
  }
  .has-dropdown.is-open .dropdown{display:block;}
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown{display:none;}
  .has-dropdown.is-open:hover .dropdown,
  .has-dropdown.is-open:focus-within .dropdown{display:block;}
  .dropdown li{border-bottom:0;}
  .dropdown a{padding:8px 0 8px 16px;color:rgba(255,255,255,.85);}
  .dropdown a:hover,.dropdown a:focus{background:transparent;color:var(--gold);}
  .dropdown .d-name{color:#fff;font-size:14px;font-weight:600;}
  .dropdown .d-loc{color:rgba(255,255,255,.6);}
  /* rich panel inside the dark mobile drawer */
  .dropdown.is-rich{min-width:0;padding:0;}
  .dropdown.is-rich > li > a{gap:12px;padding:8px 0 8px 16px;border-radius:0;}
  .dropdown.is-rich > li > a:hover,
  .dropdown.is-rich > li > a:focus{background:transparent;transform:none;}
  .d-thumb{flex:0 0 46px;width:46px;height:46px;}
  .dropdown.is-rich .d-name{font-size:14px;font-weight:600;color:#fff;}  /* must restate: the desktop .is-rich rule sets --heading and outranks .dropdown .d-name */
  .d-rate{color:var(--gold);}
  .d-rate .d-rate-from{color:rgba(255,255,255,.6);}
  .dropdown.is-rich .d-all{border-top:1px solid rgba(255,255,255,.14);}
  .dropdown.is-rich .d-all a{justify-content:flex-start;padding-left:16px;color:var(--gold);}
  .dropdown.is-rich .d-home{border-bottom:1px solid rgba(255,255,255,.14);}
  .dropdown.is-rich .d-home a{padding-left:16px;color:var(--gold);}
  .dropdown.is-rich .d-home a:hover,
  .dropdown.is-rich .d-home a:focus{background:transparent;color:var(--gold);}

  .feature{padding:48px 0;}
  .feature-inner{grid-template-columns:1fr;gap:28px;}
  /* stacked: image always above the copy, whichever side it took on desktop */
  .feature .feature-media{order:1;}
  .feature .feature-body{order:2;justify-self:start;}
  .feature-body{max-width:none;}

  .property-grid{grid-template-columns:1fr;gap:28px;padding-inline:var(--gutter);}
}

@media (max-width:640px){
  h1{font-size:26px;}
  h2{font-size:22px;}
  .hero-slides{aspect-ratio:4/2.4;}   /* was 4/3; height x0.8 */
  .booking-field{flex:1 1 100%;}
  .booking-submit,.booking-submit .btn{width:100%;}
  .amenities ul{grid-template-columns:1fr;}
  .address-band h1,.address-band h2{font-size:18px;}
  .band-contacts{flex-direction:column;gap:8px;}
  .feature{padding:40px 0;}
  .site-footer{padding:40px 20px 24px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

/* ==========================================================================
   NAV SIZING (Isvara carries 8 content links + the Our Hotels dropdown)

   The navbar base size was raised 3px at the client's request. At that full
   size the row needs ~1,440px against a 1,192px content box, so BOOK NOW would
   be pushed off-screen. The steps below shave the size back on narrower
   desktops and hand over to the hamburger before the row can break.
   Measured, not guessed - see the notes file.
   ========================================================================== */
@media (min-width:1261px){
  .header-inner{gap:12px;}
  .header-cta .btn{padding:12px 20px;font-size:10px;letter-spacing:.1em;}
}
@media (min-width:1261px) and (max-width:1400px){
  .header-cta .btn{padding:12px 16px;font-size:9.5px;}
}

/* Hand over to the hamburger while the row is still comfortable. The 900px
   rules already style the drawer; these only move the switch point up. */
@media (max-width:900px){  /* was 1260px: Priority+ nav absorbs the squeeze, so the bar holds to the real mobile breakpoint */
  .nav-toggle{display:inline-block;order:3;}
  .header-inner{flex-wrap:wrap;min-height:60px;padding:12px 20px;}
  .header-cta{order:2;margin-left:auto;}
  .main-nav{order:4;flex:1 1 100%;display:none;}
  .main-nav.is-open{display:block;}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 0 12px;}
  .main-nav > ul > li{border-top:1px solid rgba(255,255,255,.12);}
  .main-nav a{display:block;padding:12px 4px;font-size:15px;letter-spacing:.14em;}
  .main-nav a::after{display:none;}

  .dropdown{
    position:static;min-width:0;left:auto;
    background:transparent;border:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;
    display:none;padding:0 0 8px;
  }
  .has-dropdown.is-open .dropdown{display:block;}
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown{display:none;}
  .has-dropdown.is-open:hover .dropdown,
  .has-dropdown.is-open:focus-within .dropdown{display:block;}
  .dropdown li{border-bottom:0;}
  .dropdown a{padding:12px 0 12px 16px;color:rgba(255,255,255,.85);}
  .dropdown a:hover,.dropdown a:focus{background:transparent;color:var(--gold);}
  .dropdown .d-name{color:#fff;font-size:14px;font-weight:600;}
  .dropdown .d-loc{color:rgba(255,255,255,.6);}
  .dropdown.is-rich{min-width:0;padding:0;}
  .dropdown.is-rich > li > a{gap:12px;padding:12px 0 12px 16px;}
  .dropdown.is-rich > li > a:hover,
  .dropdown.is-rich > li > a:focus{background:transparent;transform:none;}
  .d-thumb{flex:0 0 46px;width:46px;height:46px;}
  .dropdown.is-rich .d-name{font-size:14px;font-weight:600;color:#fff;}  /* must restate: the desktop .is-rich rule sets --heading and outranks .dropdown .d-name */
  .d-rate{color:var(--gold);}
  .d-rate .d-rate-from{color:rgba(255,255,255,.6);}
  .dropdown.is-rich .d-all{border-top:1px solid rgba(255,255,255,.14);}
  .dropdown.is-rich .d-all a{justify-content:flex-start;padding-left:16px;color:var(--gold);}
  .dropdown.is-rich .d-home{border-bottom:1px solid rgba(255,255,255,.14);}
  .dropdown.is-rich .d-home a{padding-left:16px;color:var(--gold);}
  .dropdown.is-rich .d-home a:hover,
  .dropdown.is-rich .d-home a:focus{background:transparent;color:var(--gold);}
}

/* ==========================================================================
   VENUE CARDS (weddings, meetings & events)
   Client asked for these specific cards 20% WIDER and 10% TALLER than the
   standard two-col row, without touching the dining/spa rows that share the
   same component - hence the scoped .is-venue class.

     width : 446fr -> 535fr  (+20%)
     height: the image is 4:3 by default; 20% more width already adds 20%
             height, so the ratio is opened to 4/2.75 to land at +10% overall
             rather than +20%.
   ========================================================================== */
.room-inner.two-col.is-venue{grid-template-columns:535fr 613fr;}
.room-inner.two-col.is-venue .slides{aspect-ratio:4/2.75;}

@media (max-width:900px){
  /* stacked: keep the single column, let the image use the 4:3 it had */
  .room-inner.two-col.is-venue{grid-template-columns:1fr;}
  .room-inner.two-col.is-venue .slides{aspect-ratio:4/3;}
}

/* ==========================================================================
   ISVARA HERO — SHOW THE FULL FRAME
   The Isvara photographs are 4240x2384 (16:9). The default hero box is ~2.5:1
   with object-fit:cover, so 29% of every picture was cropped away at display
   time even after the CDN crop was widened.

   Giving the Isvara hero the photos' own 16:9 ratio means nothing is cut: the
   whole view of the property is visible. Scoped to .hero-isvara so the
   Suryavilas heroes, whose source crops are genuinely panoramic, are untouched.
   ========================================================================== */
/* Homepage hero: 15% shorter than the photo's own 16/9, at the client's
   request. This does crop the frame slightly - object-position keeps the
   subject centred so the crop comes off the top and bottom evenly. */
.hero-isvara .hero-slides{
  aspect-ratio:16/6.12;          /* was 16/7.65; height x0.8 */
  height:auto;
  max-height:none;
  min-height:163px;              /* 204 x 0.8 */
}
/* INNER pages: Isvara deliberately carries NO height override. It had one
   (a bare 70vh, no max-height) which rendered 630px where every parent and
   Suryavilas inner banner rendered 435px. The shared .hero.is-banner rule
   above is the single source of truth for inner-banner height, so Isvara now
   inherits it and the three sets match. Only the crop is Isvara-specific. */
.hero-isvara .hero-slide img{object-position:50% 50%;}

@media (max-width:640px){
  /* only the HOME hero keeps the 16/9 crop; the inner banner follows the
     same height as every other inner page so the set stays consistent */
  .hero-isvara:not(.is-banner) .hero-slides{aspect-ratio:16/7.2;max-height:none;}   /* was 16/9; height x0.8 */
}

/* ==========================================================================
   BOOKING BAR OVER THE HERO
   Inset from BOTH sides and floated on the image, 30% up from its foot, on a
   translucent panel — matching the client's reference shot.

   TRANSPARENCY IS AT ITS LIMIT, NOT AN ARBITRARY CHOICE.
   The panel sits over an arbitrary photograph, so contrast must hold against
   the WORST case: a blown-out white sky. Composited over pure white:
       alpha .50  -> rgb(146,140,136)  white label 3.32:1   fails
       alpha .60  -> rgb(124,118,113)  white label 4.48:1   fails (just)
       alpha .62  -> rgb(119,113,108)  white label 4.81:1   PASSES
   .62 is therefore the most transparent the panel can be while every label
   still clears WCAG AA. Going lighter would make the labels unreadable over a
   bright hero, which no amount of blur can rescue.
   ========================================================================== */
@media (min-width:901px){
  .hero-with-bar{position:relative;}
  .hero-with-bar .booking-bar{
    position:absolute;
    /* inset from both sides, centred on the site's content box */
    left:50%;
    transform:translateX(-50%);
    right:auto;
    width:min(1192px, calc(100vw - 2 * var(--gutter)));
    /* Sits just above the slider dots. A PERCENTAGE offset drifted with the
       viewport - the gap to the dots measured 44px at 1200px and 93px at
       1920px - so this is a fixed distance from the foot of the hero instead:
       14px (dots inset) + ~10px dot height + 18px breathing space. */
    bottom:58px;   /* 42px left only a 4px gap to the dots; 58px reads as deliberate */
    z-index:7;
    background:rgba(36,26,18,.06);
    -webkit-backdrop-filter:blur(2px) saturate(1.02);
    backdrop-filter:blur(2px) saturate(1.02);
    border:1px solid rgba(230,214,171,.28);
    padding:20px 28px;
  }
  /* Label ON TOP, field BELOW — as in the reference. The row stays a single
     row of fields; each field is a small stack of label + input. */
  .hero-with-bar .booking-form{flex-wrap:nowrap;align-items:flex-end;gap:16px;}
  .hero-with-bar .booking-field{
    display:flex;flex-direction:column;align-items:stretch;gap:8px;
    min-width:0;
  }
  /* per-field widths are set once, further down */
  /* PARENT form: the first field is the Property picker and must hold a full
     hotel name ("Suryavilas Luxury Resort and Spa, Solan"), so it is given
     materially more width than the date fields. These nth-child weights would
     otherwise outrank the .is-group rule. */
  .hero-with-bar .booking-form.is-group .booking-field:nth-child(1){flex:2.6 1 320px;min-width:280px;}
  /* Dates need the most room after the property picker - "09/18/2026" plus a
     calendar icon was cramping at the old flat width. Promo Code gives some
     back. These carry .is-group because that selector outranks a plain
     .booking-field:nth-child() rule later in the sheet. */
  .hero-with-bar .booking-form.is-group .booking-field:nth-child(2),
  .hero-with-bar .booking-form.is-group .booking-field:nth-child(3){flex:1 1 148px;}
  .hero-with-bar .booking-form.is-group .booking-field:nth-child(4){flex:1 1 168px;}
  .hero-with-bar .booking-form.is-group .booking-field:nth-child(5){flex:1 1 96px;}
  .hero-with-bar .booking-field label{
    color:#fff;margin:0;white-space:nowrap;
    font-size:10px;letter-spacing:.16em;
  }
  .hero-with-bar .booking-field input,
  .hero-with-bar .booking-field select{
    width:100%;min-width:0;padding:12px 12px;font-size:13px;
    background:rgba(255,255,255,.94);
    border-color:rgba(255,255,255,.55);
  }
  .hero-with-bar .booking-submit{flex:0 0 auto;}
  .hero-with-bar .booking-submit .btn{padding:12px 24px;white-space:nowrap;}
  .hero-with-bar .hero-dots{bottom:14px;}
}

@media (min-width:901px) and (max-width:1300px){
  /* was width:calc(100% - 72px), a fixed 36px inset that ignored the page
     gutter and left the bar out of line with every row below it */
  .hero-with-bar .booking-bar{width:calc(100vw - 2 * var(--gutter));padding:20px 20px;}
}

@media (max-width:900px){
  .hero-with-bar .booking-bar{position:static;background:var(--paper-alt);}
}

/* ==========================================================================
   WHY BOOK DIRECT / MANAGE BOOKING / FROM-RATE
   Mirrors the client's reference: the live "from" rate sits above the button,
   with Why Book Direct? and Manage Booking beneath it.

   The rate element is EMPTY until the booking engine answers and collapses if
   it never does, so a Book Now button is never left beside a blank price.
   ========================================================================== */
.booking-submit{display:flex;flex-direction:column;align-items:stretch;gap:8px;}

.bs-rate{
  margin:0;
  font-size:12px;line-height:1.3;
  color:var(--heading);
  text-align:right;
  white-space:nowrap;
}
.bs-rate:empty{display:none;}
.bs-rate .d-rate-from{font-size:11px;color:var(--body);font-weight:400;}

.bs-links{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  font-size:11px;
}
.wbd{position:relative;}
.wbd-trigger{
  background:none;border:0;padding:4px 0;cursor:pointer;
  font-family:var(--sans);font-size:11px;
  color:var(--link);text-decoration:underline;
  min-height:24px;                      /* WCAG 2.5.8 target size */
}
.wbd-trigger:hover,.wbd-trigger:focus{color:var(--link-hover);}
.bs-manage{
  font-size:11px;color:var(--body);
  min-height:24px;line-height:24px;
}
.bs-manage:hover,.bs-manage:focus{color:var(--link-hover);}

/* the benefits popover — matches the client's reference: centred under the
   link, small caret pointing up at it, no divider lines between rows. */
.wbd-panel{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%);
  right:auto;
  z-index:40;
  width:310px;max-width:80vw;
  background:var(--white);
  border:0;
  border-radius:2px;
  box-shadow:0 18px 50px rgba(29,26,18,.26);
  padding:16px 20px;
}
.wbd-panel::before{                    /* the pointer caret */
  content:"";
  position:absolute;
  top:-7px;left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:14px;height:14px;
  background:var(--white);
}
.wbd-panel[hidden]{display:none;}
.wbd-panel ul{list-style:none;margin:0;padding:0;}
.wbd-panel li{
  display:flex;align-items:flex-start;gap:16px;
  padding:12px 0;
  font-size:13px;line-height:1.45;color:var(--body);
  border-bottom:0;                     /* reference has no dividers */
}
.wbd-panel i{color:var(--gold);width:18px;flex:0 0 18px;margin-top:4px;text-align:center;}

/* On the translucent bar over the hero the labels are white, so these must be
   too - the underlying panel is dark. */
.hero-with-bar .bs-rate{color:#fff;}
.hero-with-bar .bs-rate .d-rate-from{color:rgba(255,255,255,.82);}
.hero-with-bar .wbd-trigger{color:#fff;}
.hero-with-bar .wbd-trigger:hover,.hero-with-bar .wbd-trigger:focus{color:var(--gold);}
.hero-with-bar .bs-manage{color:rgba(255,255,255,.88);}
.hero-with-bar .bs-manage:hover,.hero-with-bar .bs-manage:focus{color:var(--gold);}
/* the panel itself stays on white, so its own text keeps its colours */

@media (max-width:900px){
  .booking-submit{align-items:stretch;}
  .bs-rate{text-align:left;}
  .bs-links{flex-direction:row;gap:16px;align-items:center;}
  /* The desktop rule centres this panel with translateX(-50%), which is right
     under a wide bar but throws it OFF THE LEFT EDGE inside the narrow mobile
     sheet (measured left:-123px at 394px wide). Setting left:0 alone does not
     help - the transform has to be cancelled too.
     On a phone the panel simply spans the sheet, so it can never overflow. */
  .wbd-panel{
    right:auto;
    left:0;
    transform:none;
    /* the link sits ~16px inside the bar, so 100vw minus both sheet margins
       and that inset keeps the panel inside the sheet at every width */
    width:max-content;
    max-width:calc(100vw - 64px);
  }
  /* .wbd STAYS position:relative. Making it static sent the panel past the bar
     to the fixed overlay, so it spanned the whole screen and sat flush left of
     the sheet at 600 and 860px. Anchored to the link instead, and simply
     bounded so it can never exceed the sheet. */
  .wbd{position:relative;}
  .wbd-panel::before{display:none;}   /* no caret when it is full-width */
}

/* ==========================================================================
   SIX-FIELD BOOKING ROW
   Every bar now carries Our Property + Check In + Check Out + Rooms & Guests
   + Promo Code + Book Now. The property name is the longest value in the row,
   so it keeps the most width and the rest are trimmed to fit one line.
   ========================================================================== */
.booking-field.bf-property{flex:2.2 1 260px;min-width:220px;}

@media (min-width:901px){
  .hero-with-bar .booking-form{gap:12px;}
  .hero-with-bar .booking-field.bf-property{flex:0 0 250px;min-width:250px;}
  /* Per-field weights. A blanket :not(.bf-property) rule here outranked the
     nth-child weights below and flattened every field to 106px, cramping the
     dates. Dates need the most room after the property picker. */
  .hero-with-bar .booking-field:not(.bf-property){min-width:0;}
  .hero-with-bar .booking-field:nth-child(2),
  .hero-with-bar .booking-field:nth-child(3){flex:1.3 1 0;}   /* Check In / Out */
  .hero-with-bar .booking-field:nth-child(4){flex:1.25 1 0;}  /* Rooms & Guests */
  .hero-with-bar .booking-field:nth-child(5){flex:.9 1 0;}    /* Promo Code */
  .hero-with-bar .booking-field label{font-size:9.5px;letter-spacing:.13em;}
  .hero-with-bar .booking-field input,
  .hero-with-bar .booking-field select{padding:8px 8px;font-size:12.5px;}
  .hero-with-bar .booking-submit .btn{padding:12px 20px;}
}
@media (min-width:901px) and (max-width:1300px){
  .hero-with-bar .booking-field.bf-property{flex:1.8 1 200px;min-width:180px;}
  .hero-with-bar .booking-field label{font-size:9px;}
}
@media (max-width:900px){
  .booking-field.bf-property{flex:1 1 100%;}
}



/* ==========================================================================
   COMPACT ROOMS & GUESTS POPUP
   The panel read as oversized for its content: 430px wide with 16-20px
   padding and a 17px heading, to hold a handful of counters. Tightened to
   360px with smaller padding and type. Tap targets stay >=24px (WCAG 2.5.8)
   and the close button keeps a comfortable 36px.
   ========================================================================== */
.rg-panel{max-width:360px;}
.rg-head{padding:12px 16px;}
.rg-head h2{font-size:15px;}
.rg-close{font-size:20px;min-width:36px;min-height:36px;}
.rg-body{padding:4px 16px 8px;}
.rg-total{padding:12px 0;font-size:12.5px;}
.rg-room{padding:8px 0;}
.rg-room-title{margin:0 0 8px;font-size:9.5px;letter-spacing:.16em;}
.rg-label{font-size:11.5px;}
.rg-counter .rg-btn{width:28px;height:28px;font-size:13px;}
.rg-val{min-width:30px;line-height:28px;font-size:12.5px;}
.rg-foot,.rg-actions{padding:12px 16px;}
.rg-guests{gap:12px;}

@media (max-width:640px){
  .rg-panel{max-width:none;}
}

/* ==========================================================================
   BOOKING BAR — ALIGNMENT PASS
   Measured problems this fixes (at 1440px):
     * the Book Now button sat at y=548 while the input row sat at y=605,
       so the button floated 19px above the fields it belongs to
     * the bar was 158px tall for ONE row of inputs
     * date fields were 106px, cramping "09/18/2026" against its icon, while
       Promo Code held the same 106px it did not need
     * "Why Book Direct?" was underlined and "Manage Booking" was not, so two
       peer links read as different ranks
   ========================================================================== */
@media (min-width:901px){
  /* 1. everything sits on the INPUT baseline, not the top of the column */
  .hero-with-bar .booking-form{align-items:flex-end;}
  .hero-with-bar .booking-submit{
    display:flex;flex-direction:column;align-items:flex-end;
    gap:4px;
    align-self:flex-end;        /* sit on the input baseline, not the top */
  }
  .hero-with-bar .bs-rate{margin:0 0 4px;}
  .hero-with-bar .booking-submit .btn{width:100%;}
  .hero-with-bar .bs-links{align-items:flex-end;gap:0;}

  /* 2. tighter label-to-field gap => shorter bar */
  .hero-with-bar .booking-field{gap:4px;}
  .hero-with-bar .booking-bar{padding:16px 24px;}

  /* 3. give the dates the room they need; take it from Promo Code */
  .hero-with-bar .booking-field:nth-child(2),
  .hero-with-bar .booking-field:nth-child(3){flex:1.25 1 0;}
  .hero-with-bar .booking-field:nth-child(5){flex:.85 1 0;}

  /* 4. the two links are peers - same weight, same treatment */
  .hero-with-bar .wbd-trigger,
  .hero-with-bar .bs-manage{
    text-decoration:none;
    font-size:11px;
    line-height:18px;
    min-height:24px;
    display:inline-flex;align-items:center;
  }
  .hero-with-bar .wbd-trigger:hover,
  .hero-with-bar .wbd-trigger:focus-visible,
  .hero-with-bar .bs-manage:hover,
  .hero-with-bar .bs-manage:focus-visible{text-decoration:underline;}
}

/* ==========================================================================
   LINKS UNDER THEIR OWN FIELDS
   "Why Book Direct?" now sits under Rooms & Guests and "Manage Booking" under
   the Book Now button, so each link belongs to the control above it instead
   of both stacking in the submit column.

   The links are absolutely positioned so they do NOT add height to the row -
   the fields stay on one baseline and the bar does not grow.
   ========================================================================== */
@media (min-width:901px){
  .hero-with-bar .booking-field{position:relative;}
  .wbd-under-rooms{
    position:absolute;top:100%;left:0;
    margin-top:8px;
    z-index:8;
  }
  .wbd-under-rooms .wbd{position:relative;}
  /* the popover opens from the link, left-aligned to the field */
  .wbd-under-rooms .wbd-panel{left:0;transform:none;}
  .wbd-under-rooms .wbd-panel::before{left:26px;transform:rotate(45deg);}

  .hero-with-bar .booking-bar{position:absolute;}   /* already; kept for clarity */
  .hero-with-bar .bs-links{
    position:absolute;
    top:auto;bottom:10px;               /* sit inside the bar's bottom padding */
    right:22px;                         /* line up with the bar's inner edge */
    margin-top:0;
  }

  /* the bar needs a little room beneath the fields for both links */
  .hero-with-bar .booking-bar{padding-bottom:40px;}
}

@media (max-width:900px){
  /* stacked: the links return to normal flow */
  .wbd-under-rooms{position:static;margin-top:8px;}
  .hero-with-bar .bs-links{position:static;margin-top:8px;}
}

/* ==========================================================================
   MOBILE BOOKING SHEET
   On a phone the bar is long and pushes the page down. Instead the header's
   BOOK NOW opens the same form as a centred sheet, sized to fit INSIDE the
   viewport (max 92vw x 86vh) with its own scroll if the content is taller.
   The in-flow bar is hidden while the sheet is the entry point.
   ========================================================================== */
@media (max-width:900px){
  .booking-bar{display:none;}                 /* the sheet is the way in */

  .bk-overlay{
    position:fixed;inset:0;z-index:1400;
    background:rgba(20,16,12,.62);
    display:flex;align-items:center;justify-content:center;
    padding:16px;
  }
  .bk-overlay[hidden]{display:none;}

  .bk-overlay .booking-bar{
    display:block;
    position:static;
    width:100%;max-width:min(420px,92vw);
    max-height:86vh;overflow-y:auto;
    background:var(--white);
    border:0;border-radius:2px;
    box-shadow:0 20px 60px rgba(0,0,0,.34);
    padding:16px 16px 20px;
    transform:none;
  }
  .bk-overlay .booking-form{flex-direction:column;align-items:stretch;gap:12px;}
  .bk-overlay .booking-field{width:100%;flex:none;}
  .bk-overlay .booking-field label{color:var(--heading);font-size:10.5px;}
  .bk-overlay .booking-submit{width:100%;align-items:stretch;}
  .bk-overlay .booking-submit .btn{width:100%;}
  .bk-overlay .bs-rate{text-align:left;color:var(--heading);}
  .bk-overlay .wbd-under-rooms,
  .bk-overlay .bs-links{position:static;margin-top:8px;}
  .bk-overlay .wbd-trigger,
  .bk-overlay .bs-manage{color:var(--link);}

  .bk-head{
    display:flex;align-items:center;justify-content:space-between;
    margin:0 0 12px;
  }
  .bk-head span{font-family:var(--serif);font-size:16px;color:var(--heading);}
  .bk-close{
    background:none;border:0;cursor:pointer;
    font-size:22px;line-height:1;color:var(--body);
    min-width:40px;min-height:40px;
  }
}
@media (min-width:901px){
  .bk-overlay{display:none;}
  .bk-head{display:none;}
}

/* ==========================================================================
   ANCHOR THE OCCUPANCY POPUP TO ITS FIELD (desktop)
   It was a full-screen centred modal, so clicking "Rooms & Guests" threw the
   panel to the middle of the viewport - a long way from the control the guest
   just touched, and it dimmed the whole page for a two-counter task.

   On desktop it now opens directly under the field, like the Why Book Direct
   popover, with no screen dimming. On phones a centred/bottom sheet is still
   the right pattern, so the <=900px rules below are left alone.
   ========================================================================== */
@media (min-width:901px){
  .rg-overlay{
    position:absolute;
    inset:auto;
    background:none;            /* no full-page dim for a small task */
    display:block;
    padding:0;
    z-index:60;
  }
  /* The panel now lives inside a ~150px field, so width:100% collapsed it to
     205px. Give it its own fixed width and let it overhang the field. */
  .rg-overlay{width:300px;}
  .rg-panel{
    width:300px;max-width:300px;
    max-height:none;
    box-shadow:0 18px 50px rgba(29,26,18,.26);
  }

  /* The panel holds a handful of counters, so it is sized to them rather
     than to a generic dialog width. Every tap target stays >=24px per
     WCAG 2.5.8 - the counter buttons are 26px and the close button 32px,
     so nothing here trades accessibility for compactness. */
  .rg-head{padding:8px 16px;}
  .rg-head h2{font-size:14px;}
  .rg-close{font-size:18px;min-width:32px;min-height:32px;}
  .rg-body{padding:0 16px 8px;}
  .rg-total{padding:8px 0;font-size:12px;}
  .rg-total span{font-size:12px;}
  .rg-room{padding:8px 0;}
  .rg-room-title{margin:0 0 8px;font-size:9px;}
  .rg-label{font-size:11px;margin-bottom:4px;}
  .rg-guests{gap:12px;}
  .rg-guests{flex-wrap:nowrap;gap:12px;}
  .rg-guest{flex:1 1 0;min-width:0;}   /* Adults and Children share one row */
  .rg-label{font-size:10.5px;line-height:1.25;}
  .rg-counter .rg-btn{width:26px;height:26px;font-size:12px;}
  .rg-val{min-width:28px;line-height:26px;font-size:12px;}
  .rg-ages{gap:8px 12px;margin-top:8px;}
  .rg-age label{font-size:11px;margin-bottom:4px;}
  .rg-foot{padding:8px 16px;}
  .rg-add{font-size:11.5px;}
  .rg-done{padding:8px 20px;min-height:32px;font-size:10.5px;}
}

/* ==========================================================================
   ROOMS & GUESTS INSIDE THE MOBILE BOOK NOW SHEET
   The sheet is itself an overlay, so the occupancy panel must NOT open as a
   second full-screen layer on top of it - that is what put two booking forms
   on the screen at once. Inside the sheet it opens anchored under its own
   field, scrolling with the form, exactly like the desktop behaviour.
   ========================================================================== */
@media (max-width:900px){
  .bk-overlay .rg-overlay{
    position:absolute;
    inset:auto;
    background:none;
    display:block;
    padding:0;
    width:auto;
    left:0;right:0;
    z-index:60;
  }
  .bk-overlay .rg-panel{
    width:100%;max-width:none;
    max-height:none;
    box-shadow:0 14px 40px rgba(29,26,18,.28);
  }
  .bk-overlay .rg-guests{flex-wrap:nowrap;gap:12px;}
  .bk-overlay .rg-guest{flex:1 1 0;min-width:0;}
}

/* ==========================================================================
   PROMO STRIP ON ONE LINE (mobile)
   At 390px the message wrapped to two lines (59px tall). The text must stay
   on ONE line, so on narrow screens the type and tracking tighten and the
   side padding is trimmed to give the words their full width. The close
   button keeps a 28px target (WCAG 2.5.8) and the strip reserves room for
   it, so the text never runs underneath it.

   nowrap is deliberate: it guarantees a single line at any width. Should the
   string ever grow past the viewport, the strip scrolls horizontally rather
   than silently wrapping again.
   ========================================================================== */
@media (max-width:640px){
  .promo-strip{
    font-size:10px;
    letter-spacing:0;
    padding:4px 32px 4px 8px;
    line-height:22px;
    white-space:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .promo-strip::-webkit-scrollbar{display:none;}
  .promo-close{right:4px;min-width:26px;min-height:26px;font-size:16px;}
}

@media (max-width:380px){
  /* 320px is the narrowest phone worth supporting; at 9.5px the string still
     overflowed by 39px, so the tracking is pulled in slightly as well. */
  .promo-strip{font-size:8.5px;letter-spacing:-.2px;padding-left:4px;padding-right:28px;}
  .promo-close{right:1px;font-size:15px;}
  /* the &nbsp; before BOOK NOW! costs a space we cannot afford at 320px */
  .promo-strip a{margin-left:-4px;}
}

/* ==========================================================================
   LONG URLS MUST NOT OVERFLOW THE GUTTER
   The legal pages quote full URLs in running text. An unbreakable string is
   wider than a 312px phone column, so it spilled past the right gutter
   (measured 24px where 39px was expected) even though its paragraph box was
   correctly inset. Allow a break inside such words on those pages only.
   ========================================================================== */
.legal p,.legal li,.page-body p,.page-body li{overflow-wrap:break-word;}

/* ==========================================================================
   MORE TRANSPARENT BOOKING BAR — LEGIBILITY HELD BY SHADOW, NOT BY OPACITY
   The panel went .62 -> .46 alpha so the photo reads through, as requested.

   Measured: .62 espresso over a blown-out WHITE sky composites to
   rgb(119,113,108) and white label text scores 4.81:1 — just over AA. At .46
   it composites to rgb(154,150,146) and the same text scores 2.94:1, which
   FAILS. Rather than refuse the transparency, the labels carry a dark shadow:
   it darkens the few pixels immediately behind each glyph, so the effective
   local contrast stays high on any photograph while the panel itself stays
   see-through. The Book Now button keeps its own opaque gold fill and the
   inputs keep a near-solid white face, so neither depends on the panel.
   ========================================================================== */
@media (min-width:901px){
  .hero-with-bar .booking-field label,
  .hero-with-bar .bs-rate,
  .hero-with-bar .wbd-trigger,
  .hero-with-bar .bs-manage{
    text-shadow:0 1px 2px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,1), 0 0 12px rgba(0,0,0,.95), 0 0 22px rgba(0,0,0,.75);
  }
  /* inputs stay essentially opaque - a translucent field over a busy photo is
     where value text becomes unreadable */
  .hero-with-bar .booking-field input,
  .hero-with-bar .booking-field select,
  .hero-with-bar .rooms-trigger{
    background:rgba(255,255,255,.97);
  }
}

/* ==========================================================================
   ENQUIRY FORM (parent contact / dining / meetings pages)
   Two columns on desktop, one on phones. Reuses .contact-form styling so the
   fields match the child property forms exactly.
   ========================================================================== */
.enquiry-block{padding-bottom:72px;}
/* The form sat hard left in a 1192px column, which left it looking stranded.
   It is now a centred 760px block with its heading and intro centred over it.
   The FIELDS keep their left-aligned labels - centring label text would hurt
   scannability, so only the block is centred, not the form's internals. */
.enquiry-block .shell,
.enquiry-block .shell-wide{text-align:center;}
.enquiry-block h2,
.enquiry-block .lead{text-align:center;}
.enquiry-form{
  max-width:760px;
  margin-left:auto;margin-right:auto;
  text-align:left;
}
.enquiry-form .btn{display:block;margin-left:auto;margin-right:auto;}
.ef-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 20px;
}
.enquiry-form select{
  width:100%;font-family:var(--sans);font-size:13px;color:#333;
  padding:12px 12px;border:1px solid #d9d9d9;border-radius:0;background:#fff;
  margin-bottom:16px;min-height:40px;          /* WCAG 2.5.8 target size */
}
.enquiry-form select:focus{
  outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);
}
.enquiry-form .btn{margin-top:4px;}

@media (max-width:640px){
  .ef-grid{grid-template-columns:1fr;gap:0;}
}

/* ==========================================================================
   PRIORITY+ NAV — the "More" overflow menu
   Items move here when the row runs out of room and move BACK when it gains
   room, so the bar adapts to browser zoom with no breakpoint involved.
   ========================================================================== */
.nav-more{position:relative;}
.nav-more[hidden]{display:none;}
.nav-more-btn{
  background:none;border:0;cursor:pointer;
  font-family:var(--sans);
  font-size:inherit;letter-spacing:inherit;
  color:inherit;
  padding:0;
  display:inline-flex;align-items:center;gap:8px;
  min-height:24px;                      /* WCAG 2.5.8 */
}
.nav-more-btn i{font-size:1.05em;line-height:1;}
.nav-more-btn:hover i,.nav-more-btn:focus-visible i{color:var(--gold);}
.nav-more.is-open .nav-more-btn i{color:var(--gold);}
.nav-more-btn{min-width:28px;justify-content:center;}   /* WCAG 2.5.8 target */

/* the panel reuses .dropdown, so it inherits the existing menu styling */
.nav-more-list{
  /* .dropdown carries a 2px gold top border for the Our Hotels menu; the
     overflow panel does not want it, so it is cleared here rather than on
     .dropdown, which would change that menu too. */
  border-top:0;
  display:none;
  position:absolute;top:calc(100% + 10px);right:0;left:auto;
  min-width:190px;
  z-index:60;
}
.nav-more.is-open .nav-more-list{
  display:block;
  /* .dropdown hides itself with opacity/visibility for its hover animation,
     so display alone is not enough - the panel opened but stayed invisible. */
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.nav-more-list li{display:block;}
.nav-more-list a{display:block;white-space:nowrap;}

/* Below the mobile breakpoint the whole nav is already a drawer, so nothing
   should be hidden behind a second menu inside it. */
@media (max-width:900px){
  .nav-more{display:none;}
  .main-nav li[data-nav-priority]{display:list-item;}
}

/* ==========================================================================
   NAV LABELS NEVER WRAP
   "Our Hotels" and "Meetings & Events" were breaking onto two lines at 110%
   zoom, which is what made the bar look like two rows. nowrap was only
   applied below 1100px, so above that the labels wrapped freely.
   With nowrap on at every width, running out of room becomes a measurable
   OVERFLOW instead of silent wrapping - which is the signal the Priority+
   script needs in order to move an item into "More".
   ========================================================================== */
.main-nav > ul > li > a,
.main-nav > ul > li > .nav-more-btn{white-space:nowrap;}
.main-nav > ul{flex-wrap:nowrap;}

/* ==========================================================================
   HERO PREV / NEXT ARROWS
   Clickable controls on every hero, working alongside the dots and the
   Left/Right keys - all three call the same show().

   CONTRAST, computed not guessed: the button sits over an arbitrary photo, so
   the worst case is a blown-out white sky. Espresso at .52 alpha composites
   over pure white to about rgb(138,136,132); a white chevron scores ~3.5:1,
   clearing the 3:1 minimum for UI components (WCAG 1.4.11). At .42 it would
   be 2.65:1 and fail, which is why the panel is not lighter.
   ========================================================================== */
.hero-arrow{
  /* 42%, not 50%: the booking bar sits across the lower third, so a true
     centre reads as low and crowds it. */
  position:absolute;top:42%;transform:translateY(-50%);
  z-index:6;
  width:44px;height:44px;                 /* invisible but WCAG 2.5.8 sized */
  display:flex;align-items:center;justify-content:center;
  border:0;
  background:none;
  color:#fff;
  cursor:pointer;
  padding:0;
  /* No disc and no panel, at the client's request, so the glyph alone has to
     stay readable over an arbitrary photo. A layered dark shadow darkens only
     the pixels immediately behind the chevron - the same technique the
     booking-bar labels use - which holds legibility over a blown-out sky
     without putting a shape on the image. */
  /* the shadow goes on the SVG, not the box, so only the stroke is darkened
     behind - that is what keeps a 1.5px line readable over a bright photo */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 6px rgba(0,0,0,.75));
  transition:color .2s ease,transform .2s ease;
}
.hero-arrow svg{width:30px;height:30px;display:block;}
.hero-arrow:hover,.hero-arrow:focus-visible{color:var(--gold);}
.hero-prev:hover{transform:translateY(-50%) translateX(-3px);}
.hero-next:hover{transform:translateY(-50%) translateX(3px);}
.hero-arrow:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:3px;}
/* The social rail is fixed at 72% of the VIEWPORT; the arrows sit at 42% of
   the HERO. On a short window those coincide, and the rail (z-index 1040)
   paints over the arrow (z-index 6) - the left arrow vanished at 150% zoom.
   Both arrows are inset past the rail's 40px so they can never collide, and
   the pair stays symmetric. */
.hero-prev{left:56px;}
.hero-next{right:56px;}

/* The inset that cleared the social rail is no longer needed: the arrows were
   raised to 42% and measure vertically apart from the rail, so the left one
   sits at the SAME 18px as the right. Verified equal glyph insets. */

@media (max-width:640px){
  .hero-arrow{width:40px;height:40px;}
  .hero-arrow svg{width:24px;height:24px;}
  /* below 640px the rail moves to a bottom bar, so it is out of the way */
  .hero-prev{left:8px;}
  .hero-next{right:8px;}
}

/* the arrows are controls, not content - never print them */
@media print{.hero-arrow{display:none;}}

/* ==========================================================================
   NAV SPACING — ONE STANDARD
   The old rules were written to cram nine items onto the bar and shrank the
   gap and the type as the viewport GREW: 13px gap at 1600px against 20px at
   1152px, with the font dropping 13.5px -> 13px on wider screens. Backwards.

   Priority+ now caps the bar at six items, so spacing no longer has to
   compensate for crowding and can follow the standard instead:
     - 28px between items (a clear 24px+ separation, on the 4px scale the
       rest of the site uses)
     - 14px body-relative size held at every desktop width, above the 12px
       floor for secondary UI text
     - 44px minimum tap height (WCAG 2.5.8 asks 24px; 44px is the comfortable
       target and matches the CTA button)
   ========================================================================== */
@media (min-width:901px){
  .main-nav > ul{gap:28px;}
  .main-nav a,
  .main-nav .nav-more-btn{
    font-size:14px;
    letter-spacing:.06em;
    padding-top:12px;padding-bottom:12px;   /* -> 44px tap height */
  }
}

/* Between 901 and 1100px the six items plus the brand and the CTA are tight,
   so the gap steps down one notch on the 4px scale rather than the type. */
@media (min-width:901px) and (max-width:1100px){
  .main-nav > ul{gap:20px;}
}

/* ==========================================================================
   BOOKING BAR — NARROW DESKTOP BAND (901-1200px)
   At 150% zoom a 1536px screen is 1024 CSS px, and at that width the bar was
   still trying to hold six fields in one row: "Rooms & Guests" and "Promo
   Code" collided with their labels clipped (measured scrollWidth > clientWidth
   on 18 page/width combinations from 1093px down).

   The property picker was pinned at flex:0 0 250px and could not give ground,
   so every other field absorbed the squeeze. Below 1200px the row wraps to two
   tidy lines instead: five fields cannot sit legibly in ~950px of usable bar.
   ========================================================================== */
@media (min-width:901px) and (max-width:1200px){
  .hero-with-bar .booking-form,
  .hero-with-bar .booking-form.is-group{flex-wrap:wrap;row-gap:12px;}

  /* the picker may now shrink - it was the field refusing to give way */
  .hero-with-bar .booking-field.bf-property,
  .hero-with-bar .booking-form.is-group .booking-field:nth-child(1){
    flex:1 1 260px;min-width:0;
  }
  /* dates share the first row with the picker */
  .hero-with-bar .booking-form.is-group .booking-field:nth-child(2),
  .hero-with-bar .booking-form.is-group .booking-field:nth-child(3),
  .hero-with-bar .booking-field:nth-child(2),
  .hero-with-bar .booking-field:nth-child(3){flex:1 1 150px;min-width:140px;}
  /* rooms + promo drop to the second row with room to breathe */
  .hero-with-bar .booking-form.is-group .booking-field:nth-child(4),
  .hero-with-bar .booking-field:nth-child(4){flex:1 1 200px;min-width:180px;}
  .hero-with-bar .booking-form.is-group .booking-field:nth-child(5),
  .hero-with-bar .booking-field:nth-child(5){flex:1 1 150px;min-width:130px;}

  .hero-with-bar .booking-submit{flex:1 1 170px;}

  /* a label must never be cut off - it is the only thing naming the field */
  .hero-with-bar .booking-field label{
    white-space:nowrap;overflow:visible;text-overflow:clip;
  }
}

/* ==========================================================================
   HEADER GUTTER — CAPPED
   The header inherited the page's 10% side gutter, which is 136px a side at
   1366px and 192px at 1920px. Body copy wants that measure; a navigation bar
   does not - it left only ~1090px for the brand, six nav items and the CTA,
   and the BOOK NOW button was pushed against the edge at 150% zoom.

   The bar is full-bleed navy, so its inset is a comfort margin rather than a
   reading measure: capped at 48px, and it still never goes below the page
   gutter on small screens where 10% is the smaller number.
   ========================================================================== */
@media (min-width:901px){
  .header-inner{padding-inline:min(var(--gutter), 48px);}
}

/* ==========================================================================
   BOOKING BAR -> SHEET FROM 1152px DOWN (i.e. 125% zoom and tighter)
   125% on a 1440px screen is 1152 CSS px. At and below that the six-field
   inline bar has no legible room left, so it behaves exactly as it does on
   tablet and mobile: the bar is hidden and BOOK NOW opens the fitted sheet,
   which is already built, accessible and reuses the real form.
   Raising this from 900px to 1152px means zoomed desktop users get the
   layout that actually works instead of a cramped one.
   ========================================================================== */
@media (max-width:1152px){
  .hero-with-bar .booking-bar{display:none;}
}


/* ==========================================================================
   STABLE HEAD (no gap under the nav, no jerk on navigation)
   The head's height used to be decided late - web fonts changed the header
   from 66px to 70px after first paint, and the page offset caught up 1s later.
   Fixed minimum heights make the height identical before and after the fonts
   load, and the fallback offsets below equal what main.js measures, so the
   JS write is a no-op instead of a shift.
   ========================================================================== */
:root{--head-h:105px;}
body{padding-top:104px;}
.site-head .site-header{min-height:70px;}
@media (max-width:900px){
  :root{--head-h:112px;}
  body{padding-top:112px;}
  .site-head .site-header{min-height:77px;}
}
@media (max-width:640px){
  :root{--head-h:110px;}
  body{padding-top:112px;}
}
/* A hard scroll-up at the top rubber-bands the page and shows whatever is
   behind it. Stop the bounce, and make the backdrop the navy of the head. */
html{overscroll-behavior-y:none;background:var(--navy);}
/* Priority+ nav: hidden for the instant before it has measured itself, so the
   items do not visibly jump into the menu after load. */
@media (min-width:901px){
  .nav-pending .main-nav{visibility:hidden;}
}

/* A lone offer card sits in the middle of the page, not in the first grid column. */
.offer-grid.is-single{grid-template-columns:minmax(0,420px);justify-content:center;}


/* ==========================================================================
   BREADCRUMB - Home in the accent colour, a thin chevron, current page in
   regular dark text (matches the client's reference).
   ========================================================================== */
.breadcrumb{padding:28px 0 0;}
.breadcrumb ol{font-size:16px;line-height:1.5;gap:0 12px;}
.breadcrumb li{gap:0 12px;}
.breadcrumb li + li::before{
  content:"";width:7px;height:7px;flex:0 0 auto;
  border-top:1.5px solid #555;border-right:1.5px solid #555;
  transform:rotate(45deg);margin-right:4px;
}
.breadcrumb a{color:#8f6b46;}
.breadcrumb a:hover{color:#5f4528;}
.breadcrumb [aria-current="page"]{color:#1f1f1f;font-weight:400;}
@media (max-width:900px){.breadcrumb{padding:20px 0 0;}.breadcrumb ol{font-size:14px;gap:0 8px;}.breadcrumb li{gap:0 8px;}}

/* Location: the closing Contact Us button and the hub note */
.loc-note{font-size:12.5px;color:var(--body);margin:0;}
.loc-cta{margin-top:12px;}
.prose-block .loc-list a{text-decoration:underline;}

/* FAQs */
.faq-list .faq-item{border-bottom:1px solid #ece7de;}
.faq-list .faq-item summary{
  cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;
  font-family:var(--serif);font-size:17px;color:var(--heading);
}
.faq-list .faq-item summary::-webkit-details-marker{display:none;}
.faq-list .faq-item summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:22px;color:var(--gold);}
.faq-list .faq-item[open] summary::after{content:"\2212";}
.faq-list .faq-item summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.faq-list .faq-item p{margin:0 0 20px;max-width:820px;}
.faq-list .faq-more{margin:32px 0 8px;font-family:var(--serif);font-size:17px;}


/* ==========================================================================
   HERO CROP - the banner box is now ~2:1 at any desktop size (it was 2.4-2.6:1,
   which cut sofas and pillows in half), and the photo is anchored low where the
   furniture sits. Portrait screens get a 4:3 box instead of a tall sliver.
   ========================================================================== */
.hero.is-banner .hero-slides{
  height:min(calc(100vh - var(--head-h,105px)),50vw);
  min-height:300px;max-height:none;
}
.hero.is-banner .hero-slide img{object-position:50% 62%;}
.hero-isvara .hero-slide img{object-position:50% 60%;}
@media (orientation:portrait) and (max-width:1024px){
  .hero.is-banner .hero-slides{height:auto;aspect-ratio:4/3;min-height:0;max-height:none;}
}

/* ==========================================================================
   FOOTER - hotel name centred on top, then Address | Quick Links | Contact Us
   ========================================================================== */
.site-footer{padding:56px 20px 28px;}
.site-footer .footer-name{font-size:28px;margin:0 0 40px;text-align:center;}
.footer-grid{
  max-width:1192px;margin:0 auto 36px;text-align:left;
  display:grid;grid-template-columns:1fr 1.5fr 1.1fr;gap:44px;
}
.footer-grid h3{
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin:0 0 20px;
}
.footer-grid p{font-size:13.5px;line-height:1.8;}
.quick-links{list-style:none;margin:0;padding:0;columns:2;column-gap:40px;}
.quick-links li{break-inside:avoid;margin:0 0 12px;font-size:13.5px;}
.quick-links a{color:#fff;}
.quick-links a:hover,.quick-links a:focus{color:var(--gold);}
.footer-grid .footer-contacts{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:16px;margin:0 0 32px;font-size:13.5px;}
.footer-grid .social-row{justify-content:flex-start;margin-bottom:0;}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .quick-links{columns:2;}
}
@media (max-width:420px){.quick-links{columns:1;}}

/* In Every Room (rooms summary): centred amenities grid, same look as Facilities */
.amenities.in-room{text-align:center;}
.amenities.in-room .amenities-note{max-width:760px;margin:36px auto 0;padding-inline:var(--gutter);font-size:13px;}
/* Mobile: amenities heading (and note) sit on the list's left edge, not centred */
@media (max-width:640px){
  .amenities h2,.amenities.in-room,.amenities.in-room .amenities-note{text-align:left;}
}

/* Privacy Policy: body text starts on the same left edge as the heading */
.legal .shell.shell-wide{max-width:calc(1192px + 2 * var(--gutter));padding-inline:var(--gutter);}

/* Location: the hub note closes the left column level with the attractions list */
.loc-note{margin-top:24px;}

/* Contact form: consent line and status message */
.enquiry-form .ef-consent{display:flex;align-items:flex-start;gap:12px;margin:16px 0 20px;font-size:13px;line-height:1.6;}
.enquiry-form .ef-consent input{width:auto;margin-top:4px;flex:0 0 auto;}
.enquiry-form #contact-status{margin:0 0 16px;padding:12px 16px;font-size:13px;}

/* footer: Get In Touch sits under the address */
.footer-grid .footer-git{margin-top:28px;}

/* Contact/location lists already carry a Font Awesome icon per row; the
   diamond bullet from .prose-block ul li made it two icons. */
.prose-block .contact-list li{padding-left:0;}
.prose-block .contact-list li::before{display:none;}

/* Phone field: country box and number input share one height so they align. */
.enquiry-form .ccp-field{align-items:stretch;margin-bottom:16px;}
.enquiry-form .ccp-field input[type=tel]{margin-bottom:0;height:42px;box-sizing:border-box;}
.enquiry-form .ccp-field .ccp-box{height:42px;box-sizing:border-box;}

/* The occupancy popup sits inside the booking bar, so it inherited the bar's
   dark label shadow; on its white panel that blurred the child-age text. */
.hero-with-bar .rg-panel label,
.hero-with-bar .rg-panel span,
.hero-with-bar .rg-panel button{text-shadow:none;}

/* Mobile home hero: a taller frame so the photo isn't a thin strip, and no
   pause button over it. */
@media (max-width:640px){
  .hero-isvara:not(.is-banner) .hero-slides{aspect-ratio:4/3;}
}

/* Gallery lightbox */
.gallery-grid figure{cursor:zoom-in;}
body.lb-open{overflow:hidden;}
.lb{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;}
.lb[hidden]{display:none;}
.lb img{max-width:90vw;max-height:88vh;object-fit:contain;}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;line-height:1;padding:8px 16px;}
.lb button:hover,.lb button:focus-visible{color:var(--gold);}
.lb-close{top:10px;right:14px;font-size:40px;}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:56px;}
.lb-prev{left:6px;}
.lb-next{right:6px;}

/* Simplotel credit: its own row under the copyright, set off by a hairline. */
.site-footer .footer-credit{
  width:100%;max-width:960px;margin:28px auto 0;padding:20px 0 4px;box-sizing:border-box;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;font-size:11.5px;
}
.footer-credit a{color:rgba(255,255,255,.75);}
.footer-credit a:hover,.footer-credit a:focus{color:var(--gold);}

/* Location lists: name left, distance right, no diamond bullet. */
.prose-block .loc-list li{padding-left:0;margin-bottom:0;display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:baseline;}
.prose-block .loc-list li::before{display:none;}
.loc-dist{color:var(--heading);font-weight:600;white-space:nowrap;}
.loc-list .loc-mode{grid-column:1 / -1;}


/* ==========================================================================
   QC 3.10 FIXES (QC report 2026-10-13)
   Everything below answers a FAIL row in the QC report. It sits at the end of
   the sheet on purpose, so it overrides the older rules above without editing
   them one by one. Row IDs are noted against each group.
   ========================================================================== */

/* ---- TYP-04: line spacing 1.4-1.7 on every text element ---- */
body{line-height:1.6;}
h1,h2,h3,h4{line-height:1.4;}
/* ---- TYP-08: no heading ends on a lonely word; button labels never wrap ---- */
h1,h2,h3,h4,.footer-name{text-wrap:balance;}
.btn{white-space:nowrap;}

/* ---- TYP-02: one size per heading level; the home title is the largest ---- */
.address-band h1{font-size:34px;}
.site-footer p.footer-name{
  font-family:var(--serif);font-size:28px;line-height:1.4;font-weight:400;
  color:#fff;margin:0 0 40px;text-align:center;
}
.room-highlights-title{line-height:1.4;}

/* ---- TYP-03 / TYP-09: text at least 14px (labels and captions at least
   12px); normal-case text keeps letter spacing near zero, capitals ~0.08em ---- */
.skip-link{font-size:14px;}
.promo-strip{font-size:13px;letter-spacing:0;}
.btn{font-size:14px;letter-spacing:0;line-height:1.4;padding:12px 28px;}
.header-cta .btn{font-size:14px;letter-spacing:0;}
.booking-submit .btn,.hero-with-bar .booking-submit .btn{padding:12px 24px;}
.main-nav a,.main-nav .nav-more-btn{letter-spacing:.02em;}
.dropdown a{font-size:14px;}
.dropdown .d-loc,.dropdown.is-rich .d-loc{font-size:12px;line-height:1.4;}
.dropdown.is-rich .d-name{line-height:1.4;}
.d-rate{font-size:12px;}
.address-band p,.band-contacts{font-size:14px;}
.amenities li,.room-highlights li{font-size:14px;}
.read-more{font-size:14px;letter-spacing:0;}
.sibling-nav a{font-size:14px;letter-spacing:0;}
.gallery-filter button,.offer-filters button{font-size:14px;letter-spacing:0;}
.offer-card h2,.offer-card h3{letter-spacing:0;margin-bottom:12px;}   /* LAY-04: 6px was cramped */
.offer-card p{font-size:14px;line-height:1.6;}
.offer-card.is-soon .o-tag,.offer-card .o-cat{font-size:12px;letter-spacing:0;}
.occ-table{font-size:14px;}
.sitemap-list li,.contact-list li,.loc-mode,.loc-note{font-size:14px;}
.room-gallery .g-count{font-size:12px;letter-spacing:0;}
.wbd-panel li{font-size:14px;}
.legal p,.legal li{line-height:1.65;}
/* booking bar */
.booking-field label,
.hero-with-bar .booking-field label{font-size:12px;letter-spacing:0;}
.booking-field input,.booking-field select,
.hero-with-bar .booking-field input,.hero-with-bar .booking-field select{font-size:14px;}
.bs-rate{font-size:12px;line-height:1.4;}
.bs-rate .d-rate-from{font-size:12px;}
.wbd-trigger,.bs-manage,
.hero-with-bar .wbd-trigger,.hero-with-bar .bs-manage{font-size:12px;}
.bs-manage{line-height:1.6;}
.bk-overlay .booking-field label{font-size:12px;}
/* rooms & guests panel */
.rg-room-title{font-size:12px;letter-spacing:.08em;}
.rg-label,.rg-age label,.rg-total span{font-size:12px;line-height:1.4;}
.rg-add{font-size:12px;}
.rg-done{font-size:14px;letter-spacing:0;}
.rg-btn,.rg-close,.bk-close,.bn-close{line-height:1.4;}
.rg-val{line-height:1.4;display:flex;align-items:center;justify-content:center;align-self:stretch;}
.rg-age select{font-size:14px;}
.bn-field label{font-size:12px;letter-spacing:0;}
/* contact form */
.contact-form label{font-size:13px;letter-spacing:0;}
.contact-form input,.contact-form textarea,.enquiry-form select{font-size:14px;}
.enquiry-form{--ccp-fs:14px;}
.enquiry-form .ccp-search,.enquiry-form .ccp-opt,.enquiry-form .ccp-empty{font-size:14px;}
.enquiry-form .ef-consent,.enquiry-form #contact-status{font-size:14px;}
/* footer */
.site-footer p,.footer-grid p{font-size:14px;line-height:1.6;}
.quick-links li,.footer-grid .footer-contacts,.footer-contacts,.footer-links{font-size:14px;}
.footer-grid h3{letter-spacing:.08em;}
.site-footer .footer-note{font-size:13px;}
.site-footer .footer-credit{font-size:13px;}
/* inline-block links that carried a fixed 24px line box (24/14 = 1.71) */
.read-more,.promo-strip a,.footer-contacts a,.contact-list a,.band-contacts a,
.prose-block a,.legal a,.sitemap-list a,.footer-links a{line-height:1.6;}
.promo-close,.nav-toggle{line-height:1.4;}

/* ---- TYP-05: comfortable line length (45-80 letters desktop, 45-60 tablet) ---- */
.page-intro .lead,.prose-block p,.legal p,.legal li,.faq-list p,
.room-body > p,.amenities.in-room .amenities-note{max-width:40em;}
.site-footer .footer-note{max-width:38em;margin-left:auto;margin-right:auto;}
.enquiry-block .lead,.amenities.in-room .amenities-note{margin-left:auto;margin-right:auto;}
@media (min-width:641px) and (max-width:1024px){
  .page-intro .lead,.prose-block p,.legal p,.legal li,.faq-list p,.room-body > p,
  .feature-body p,.amenities.in-room .amenities-note{max-width:31em;}
  .site-footer .footer-note{max-width:31em;}
}
@media (max-width:640px){
  .site-footer .footer-note{max-width:26em;}
}

/* ---- COL-02 / COL-06: the booking bar over the photo gets a real dark layer,
   so its white labels pass 4.5:1 on every slide (navy at .6 over pure white
   composites to about rgb(102,103,125): white text = 5.8:1) ---- */
@media (min-width:1153px){
  .hero-with-bar .booking-bar{background:rgba(0,3,58,.6);}
}

/* ---- COL-03 / BTN-01 / BTN-03: gold fill is for booking only; everything
   else is an outline that fills on hover. #6b4910 keeps 7:1 on white and on
   the grey section background (#8a5f14 was 4.2:1 on #f5f5f5). ---- */
.btn-outline{background:transparent;color:var(--link-hover);border-color:var(--gold);}
.btn-outline:hover,.btn-outline:focus{background:var(--gold);border-color:var(--gold);color:var(--navy);}

/* ---- COL-04 / BTN-02: every link and control changes visibly on hover ---- */
.promo-strip a:hover,.promo-strip a:focus{color:#fff;text-decoration:none;}
.promo-close:hover,.promo-close:focus-visible{color:var(--gold);}
.nav-toggle{transition:border-color .2s ease,color .2s ease;}
.nav-toggle:hover,.nav-toggle:focus-visible{border-color:var(--gold);color:var(--gold);}
.hero-dots button:hover::before,.hero-dots button:focus-visible::before{background:rgba(255,255,255,.75);}
.hero-dots button[aria-current="true"]:hover::before{background:var(--gold-pale);}
.brand img{transition:opacity .2s ease;}
.brand:hover img,.brand:focus-visible img{opacity:.8;}
.faq-list .faq-item summary:hover{color:var(--link);}

/* ---- ACC-01: focus ring always differs from the surface behind it ---- */
.site-footer a:focus-visible,.site-footer button:focus-visible,
.address-band a:focus-visible,.hero-with-bar .booking-bar a:focus-visible,
.hero-with-bar .booking-bar button:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
@media (min-width:901px){
  .site-header .dropdown a:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;}
}

/* ---- ACC-03: links inside running text are underlined, not colour-only ---- */
main p a:not(.btn):not(.read-more),
main .lead a:not(.btn){text-decoration:underline;text-underline-offset:2px;}

/* ---- NAV-02: current page stays visible when it sits in the More menu ---- */
.nav-more.has-current .nav-more-btn{color:var(--gold);box-shadow:inset 0 -1px 0 var(--gold);}
.nav-more-list a[aria-current="page"]{color:var(--link);font-weight:600;box-shadow:inset 3px 0 0 var(--gold);}

/* ---- NAV-11 / NAV-12: back-to-top, bottom right, after one screen ---- */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:1000;
  width:44px;height:44px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:var(--gold);border:1px solid var(--gold);
  font-size:16px;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:background .2s ease,color .2s ease;
}
.to-top[hidden]{display:none;}
.to-top:hover,.to-top:focus-visible{background:var(--gold);color:var(--navy);}
.to-top:focus-visible{outline:3px solid var(--navy);outline-offset:2px;}
@media print{.to-top{display:none;}}

/* ---- RES-05: side-by-side buttons never touch ---- */
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.award.btn-row{justify-content:center;padding:32px 20px 56px;}

/* ---- FRM-04: one height for every box in the contact form ---- */
.contact-form input:not([type=checkbox]),.enquiry-form select,
.enquiry-form .ccp-field input[type=tel],.enquiry-form .ccp-field .ccp-box{height:44px;}
.enquiry-form .ef-consent input{width:20px;height:20px;margin-top:4px;}

/* ---- FUN-03: the hotel picker is the same height in every browser ---- */
.booking-field input,.booking-field select,
.hero-with-bar .booking-field input,.hero-with-bar .booking-field select{height:44px;}
.booking-field select,.hero-with-bar .booking-field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:32px;
  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='%23555' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;
}

/* ---- RES-06: the booking bar is also shown on tablets and phones, as a
   navy band under the banner (the header Book Now still opens the sheet) ---- */
@media (max-width:1152px){
  .hero-with-bar .booking-bar{
    display:block;position:static;left:auto;right:auto;bottom:auto;transform:none;width:auto;
    background:var(--navy);border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
    padding:20px var(--gutter) 24px;
  }
  .hero-with-bar .booking-form,
  .hero-with-bar .booking-form.is-group{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px;max-width:none;
    align-items:start;
  }
  .hero-with-bar .booking-form .booking-field,
  .hero-with-bar .booking-form.is-group .booking-field:nth-child(n){
    min-width:0;flex:none;position:relative;display:flex;flex-direction:column;gap:4px;
  }
  .hero-with-bar .booking-field label{text-shadow:none;white-space:normal;}
  .hero-with-bar .booking-submit{align-self:end;}
  .hero-with-bar .booking-submit .btn{width:100%;}
  .hero-with-bar .wbd-under-rooms,
  .hero-with-bar .bs-links{position:static;margin-top:4px;}
  .hero-with-bar .bs-links{flex-direction:row;gap:16px;}
}
@media (max-width:640px){
  .hero-with-bar .booking-form,
  .hero-with-bar .booking-form.is-group{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-with-bar .booking-field.bf-property,
  .hero-with-bar .booking-submit{grid-column:1 / -1;}
  /* 16px stops iOS zooming into the field on focus */
  .booking-field input,.booking-field select,.contact-form input,.contact-form textarea{font-size:16px;}
}

/* ---- NAV-05 / BTN-04 / SEO-26: phone tap targets at least 44x44, top strip
   text at least 12px ---- */
@media (max-width:900px){
  .nav-toggle{min-width:44px;min-height:44px;font-size:17px;}
  .header-cta .btn{min-height:44px;display:inline-flex;align-items:center;}
  .promo-strip{padding-right:48px;}
  .promo-close{right:2px;min-width:44px;min-height:44px;}
  .promo-strip a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;vertical-align:middle;}
  .hero-arrow{width:44px;height:44px;}
  .hero-dots{gap:0;}
  .hero-dots button{width:44px;height:44px;}
  .breadcrumb a,.read-more,.sibling-nav a,
  .band-contacts a,.contact-list a,.footer-contacts a,.quick-links a,.footer-links a,
  .footer-credit a,.sitemap-list a,.wbd-trigger,.bs-manage,.loc-list a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .gallery-filter button,.offer-filters button{min-height:44px;}
  .social-row a{width:44px;height:44px;}
  .quick-links li{margin:0 0 8px;}
  .footer-grid .footer-contacts{gap:8px;}
  .band-contacts{gap:8px 24px;}
  .rg-counter .rg-btn{width:44px;height:44px;}
  .rg-close,.bk-close{min-width:44px;min-height:44px;}
  .rg-done{min-height:44px;}
  .rg-age select{min-height:44px;}
  /* links inside running text: taller hit area without changing the line */
  main p a:not(.btn):not(.read-more){padding:12px 0;}
}
@media (max-width:640px){
  .promo-strip{font-size:12px;line-height:1.6;white-space:normal;overflow-x:visible;padding:8px 48px 8px 12px;}
  .promo-strip a{margin:-12px 0;}
  .sibling-nav a{font-size:14px;}
  .gallery-filter button{font-size:14px;}
}
@media (max-width:380px){
  .promo-strip{font-size:12px;letter-spacing:0;padding-left:8px;}
  .promo-strip a{margin-left:0;}
  .promo-close{right:2px;font-size:18px;}
}

/* ---- INT-03: one transition speed (0.2s) for hover changes ---- */
a{transition:color .2s ease;}
.btn{transition:background .2s ease,border-color .2s ease,color .2s ease;}
.main-nav a::after{transition:width .2s ease;}
.dropdown-trigger .caret{transition:transform .2s ease;}
.d-thumb img{transition:transform .2s ease;}
.dropdown{transition:opacity .2s ease,transform .2s ease,visibility .2s;}
.room-gallery .g-nav{transition:background .2s ease;}
.gallery-grid img{transition:transform .2s ease;}
.site-head .site-header,.site-head .promo-strip,.site-head .brand img,.site-head .header-inner{
  transition:padding .2s ease,height .2s ease,width .2s ease,font-size .2s ease,opacity .2s ease;
}

/* ---- LAY-03: content sections share one vertical padding ---- */
.amenities,.page-body{padding:72px 0;}

/* ---- QC pass 2: remaining TYP-03 / TYP-04 / TYP-05 / TYP-09 / BTN-04 items ---- */
.promo-strip{font-size:14px;line-height:1.6;}
.footer-grid h3{font-size:14px;}
.amenities.in-room .amenities-note{font-size:14px;}
.legal strong,.legal .caps{letter-spacing:.05em;}
.faq-list .faq-item p{max-width:40em;}
@media (min-width:641px) and (max-width:1024px){
  .page-intro .lead,.prose-block p,.legal p,.legal li,.faq-list p,.faq-list .faq-item p,.room-body > p,
  .feature-body p,.amenities.in-room .amenities-note{max-width:28em;}
}
@media (max-width:640px){
  .address-band h1{font-size:26px;}
  .promo-strip{font-size:14px;}
}
@media (max-width:900px){
  .quick-links a,.footer-links a,.footer-credit a,.sitemap-list a,.breadcrumb a,
  .band-contacts a,.contact-list a,.footer-contacts a{min-width:44px;}
}@media (max-width:1152px){.hero-with-bar .booking-bar{border-bottom:1px solid rgba(255,255,255,.14);}}