/* Holymont Udaipur — parent homepage. Layout matched to the client's reference (reference/REFERENCE.md,
   client 2026-09-25: "match the design 100%"). Palette: client swatch. Every word/photo is Holymont's.
   Reference rhythm (measured at 1920) is carried in tokens; every text-align carries its --align-x pair. */

/* ---------------------------------------------------------------- tokens */
:root{
  --logo-blue:#1B2F4D;   /* the logo's navy (sampled from LOGO_HM_Blue): eyebrows on light grounds, client 2026-10-14 */
  --gold:#D9B061; --gold-ink:#7A5A1C; --beige:#D9C4A9; --greige:#D8D0C5; --brown:#8D6F57; --brown-ink:#6E533F;
  --umber:#3E2A1C; --umber-2:#5C3F28; --ochre:#B8862B; --walnut:#4A3322; --walnut-2:#2E1F14;
  --white:#FFFFFF; --paper:#FFFDF9; --pale:#F3EEE6; --linen:#F6F2EC; --ink:#3E2A1C; --text:#595959;   /* client 2026-09-25 (later): paragraph text #595959 on light backgrounds */ --muted:#CFC3B4;
  --line:#E4DCD0; --line-dark:rgba(255,255,255,.16); --glass-dark:rgba(42,26,22,.55); --glass-brown:rgba(58,39,26,.84);

  --font-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;   /* client 2026-09-25: clean sans like the logo wordmark */
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* type — reference sizes at 1920 */
  --d1:44px; --d1-lh:1.15;   /* client 2026-09-25: every heading -20px */   /* welcome, map heads */
  --d2:36px; --d2-lh:1.2;   /* section heads, reveal names, offers */
  --d3:24px; --d3-lh:1.3;    /* card band */
  --d4:20px; --d4-lh:1.35;    /* stack names */
  --stat:64px;
  --body:15px; --body-lh:1.6; --sm:14px; --sm-lh:1.5; --label:13px; --nav:15px; --btn:15px;   /* client 2026-09-25: paragraphs 15px */

  /* rhythm — client 2026-09-25: every widget carries 50px top + 50px bottom, so widget-to-widget is 100px on every
     section (30 + 30 = 60 on phones); heading → content 32/24 (house table, rule 27) so a heading sits nearer its own
     content than the previous section */
  --w-pad:50px; --sec-in:42px;   /* client 2026-09-25: section head → content 42px */
  --stack-gap:44px; --card-gap:24px; --head-h:76px; --head-h-m:64px; --pill-y:12px; --pill-x:26px;
  --gutter:clamp(24px, 5vw, 96px);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-15:60px; --space-16:64px; --space-20:80px; --space-24:96px;

  --pill:999px; --radius:4px;
  --shadow:0 12px 32px rgba(62,42,28,.12);
  --dur:240ms; --ease:cubic-bezier(.2,.7,.2,1);
  --focus:var(--umber); --focus-halo:var(--white);
  --header-min:var(--head-h); --header-h:76px;
  --align-x:flex-start;
}
@media (max-width:1199px){ :root{ --d1:38px; --d2:32px; --d3:22px; --d4:20px; --stat:48px; } }
@media (max-width:767px){
  :root{ --d1:30px; --d2:28px; --d3:22px; --d4:20px; --stat:40px; --w-pad:30px; --sec-in:24px;
         --stack-gap:16px; --header-min:var(--head-h-m); --header-h:64px; }
}
.on-dark{ --focus:var(--gold); --focus-halo:var(--umber); color:var(--white); }

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:var(--header-h); }
body{ margin:0; background:var(--paper);   /* client 2026-09-25: site ground #FFFDF9 */ color:var(--text); font-family:var(--font-body);
      font-size:var(--body); line-height:var(--body-lh); font-weight:400; }
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select{ font:inherit; }
a{ color:inherit; }
address{ font-style:normal; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:1ms !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
}
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 6px var(--focus-halo); }
@media (forced-colors:active){ :focus-visible{ outline:3px solid Highlight; box-shadow:none; } }
.skip{ position:absolute; left:var(--space-4); top:-100px; z-index:100; background:var(--umber); color:var(--white); padding:var(--space-3) var(--space-4); }
.skip:focus{ top:var(--space-4); }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------------------------------------------------------------- type */
/* client 2026-09-25: "reduce all the font weight for all headers, don't change para text" — display face at 300, sub-heads at 400 */
h2{ font-family:var(--font-display); font-weight:300; font-size:var(--d2); line-height:var(--d2-lh); color:var(--ink); letter-spacing:.02em; }
h3{ font-family:var(--font-body); font-weight:400; font-size:18px; line-height:1.45; color:var(--ink); }
.quote,.link,.stats dt,.hl__num,.footer-tag{ font-weight:300; }
.on-dark h2,.on-dark h3{ color:var(--white); }
/* section eyebrow — one style everywhere (client 2026-09-25: the underlined "About Us" look on every section) */
.label{ display:inline-block; font-family:var(--font-body); font-weight:400; font-size:calc(var(--label) + 2px);   /* client 2026-10-14: "eyebrows: increase the size by 2px, all" (13 → 15) */ line-height:1.4; text-transform:uppercase; letter-spacing:.06em; color:var(--logo-blue);   /* client 2026-10-14 (to 1b): "change all the eyebrows to logo blue colour … except the dark background one, it should be white" (was gold-ink) */
        padding-block-end:var(--space-1); border-block-end:1px solid currentColor; }
.on-dark .label{ color:var(--white); }   /* was gold */
.quote{ font-family:var(--font-display); font-size:20px; line-height:1.5; color:var(--gold-ink); }
.small{ font-size:var(--sm); line-height:var(--sm-lh); }
.measure{ max-width:800px; margin-inline:auto; }
.rule{ display:block; width:40px; height:1px; background:var(--ink); }
.on-dark .rule{ background:var(--gold); }
.center .rule{ margin-inline:auto; }
.motif{ display:block; width:48px; height:5px; border-block:1px solid var(--gold); }
.motif--lg{ width:96px; height:9px; border-width:2px; }
.link{ display:inline-block; font-family:var(--font-display); font-size:16px; line-height:1.4; color:var(--ink); text-decoration:underline;
       text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:currentColor; }
.link:hover{ text-decoration-thickness:2px; }
.link--light{ color:var(--white); }
p a{ color:var(--gold-ink); }
.on-dark p a{ color:var(--gold); }

/* ---------------------------------------------------------------- alignment pair */
.center{ text-align:center; --align-x:center; }
.align-left{ text-align:left; --align-x:flex-start; }
.actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:var(--align-x); }

/* ---------------------------------------------------------------- buttons: outline pills (reference) */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:var(--pill-y) var(--pill-x);
      border:1px solid currentColor; border-radius:var(--pill); font-family:var(--font-body); font-weight:500; font-size:var(--btn); line-height:1.4;
      text-decoration:none; color:var(--ink); background:transparent;
      transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.btn--pill{ color:var(--white); border-color:rgba(255,255,255,.7); }
.btn--pill:hover{ background:var(--white); color:var(--walnut); border-color:var(--white); }
.btn--fill{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.btn--fill:hover{ background:var(--umber-2); }
/* client 2026-09-25: beige is the default Book Now colour everywhere; gold is the hover */
.btn--gold{ background:var(--beige); color:var(--umber); border-color:var(--beige); }
.btn--gold:hover{ background:#BFAC95; border-color:#BFAC95; color:var(--umber); }
.btn--line{ color:var(--ink); }

/* ---------------------------------------------------------------- widget rhythm */
.container{ width:100%; padding-inline:var(--gutter); margin-inline:auto; }
.widget .container > * + *{ margin-block-start:var(--space-4); }
.widget .container > .widget__head + *{ margin-block-start:var(--sec-in); }
.widget__head > * + *{ margin-block-start:var(--space-4); }
.widget__head > .label + h2{ margin-block-start:var(--space-6); }
.widget__head > .rule{ margin-block-start:var(--space-10); }
.widget__head > .rule + p{ margin-block-start:var(--space-8); }
/* one rule for every section (client 2026-09-25): 50 top + 50 bottom, no margins, so any two neighbours are 100px apart
   whether or not they carry a background. The hero and the footer are full-bleed photos, so the widget beside each
   takes both halves (100px from the photo edge to the content). */
.widget{ padding-block:var(--w-pad); margin-block:0; }
.widget.hero{ padding-block:0; }
/* client 2026-09-25: the hero stays pinned and the rest of the page (.pullup) slides up over it on curved top corners;
   About starts 100px below that curved edge */
main > .hero{ position:sticky; top:0; z-index:0; }   /* beats the later .hero{position:relative} */
.pullup{ position:relative; z-index:1; background:var(--paper); border-radius:48px 48px 0 0; overflow:clip; }   /* client 2026-09-25: bottom corners sharp (no wedge over the footer) */   /* curves top (over the hero) and bottom (over the footer); clip so the painted last section follows the curve */
.pullup > .widget:first-child{ padding-block-start:var(--space-20); }   /* client 2026-09-25 (~15:45, via 70): "reduce the top padding to 80px" (was 100); phones keep 60 + the overlap */
.pullup > .widget:last-of-type{ padding-block-end:calc(2 * var(--w-pad)); }
/* a section that paints its own background (offers photo, journal linen) shows its paint edge as its edge, so the
   50px inside the paint is not spacing (client 2026-09-25: "in between spacing should be 100px not only 50px"):
   the other 50 goes outside as margin. Two painted neighbours: margins collapse, so the second carries the full 100. */
.widget.widget--fill,.widget.offers{ margin-block:var(--w-pad); }
.widget--fill + .widget--fill,.offers + .widget--fill,.widget--fill + .offers{ margin-block-start:calc(2 * var(--w-pad)); }
/* client 2026-09-25: Offers runs straight into the Journal (no ground strip between); Journal -> Spa = 50 + 50 (30 + 30 on phones).
   ~19:55 (client to 70: "reduce the padding, make it compact a bit"): the band now carries the house 50 above its content
   (was 100) and 50 below */
.widget.offers:has(+ .widget.journal){ margin-block-end:0; }
.widget.offers + .widget.journal{ margin-block:0; padding-block:var(--w-pad); }   /* client 2026-09-25: journal band -> spa eyebrow = 50 (spa's own padding) */
.fill--umber{ background:var(--umber); }
.fill--pale{ background:var(--pale); }

/* ---------------------------------------------------------------- header: frosted-glass bar (client 2026-09-25: "glassmorphism")
   Same glass recipe as the booking bar: the photo shows through a light brown tint, blurred and saturated, under a
   hairline and a top highlight. Once the page scrolls past the hero (.is-past, home.js) the tint deepens so the white
   nav keeps ≥ 4.5:1 over a white page (rgba .55 over white = 3.8:1; .72 = 6.5:1). */
.site-header{ position:fixed; inset-inline:0; top:0; z-index:40; background:var(--glass-dark); color:var(--white);
              border-block-end:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(20,12,8,.10);
              transition:background-color 300ms var(--ease); --focus:var(--gold); --focus-halo:var(--walnut); }
/* the blur lives on a layer inside the bar, not on the bar itself: a backdrop-filter on the bar would make it the
   backdrop root for everything inside it, and the Hotels panel (a descendant that hangs below the bar) could then
   only blur what the bar paints, never the hero behind it. Same look; the tint stays on .site-header. */
.site-header::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
              -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); }
/* client 2026-09-25 (later): "after scroll use the original colour" — no deeper tint once scrolled (.is-past kept as a hook only) */
.site-header__in{ display:flex; align-items:center; gap:var(--space-8); min-height:var(--header-min); padding-inline:var(--gutter); }
.brand{ flex:0 0 auto; display:block; }
.brand img{ width:150px; height:auto; filter:brightness(0) invert(1); transition:filter 600ms var(--ease); }   /* navy lock-up rendered white on the bar (B-13) */
.site-header.is-scrolled .brand img{ filter:none; }   /* client 2026-09-25 18:35: after 25% of a screen scrolled, the logo eases back to its original navy */
.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; color:var(--white); }
.nav{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:var(--space-10); }
.nav__list{ display:flex; align-items:center; gap:var(--space-10); overflow:hidden; min-width:0; }
.nav__list > li{ flex:0 0 auto; }
.nav a,.nav-hotels__btn{ display:inline-flex; align-items:center; gap:var(--space-1); min-height:44px; font-family:var(--font-body); font-weight:400;
        font-size:var(--nav); line-height:1.4; color:var(--white); text-decoration:none; opacity:.92; transition:opacity var(--dur) var(--ease); }
.nav a:hover,.nav-hotels__btn:hover{ opacity:1; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
.nav-hotels,.nav-more{ position:relative; }
.nav-more__btn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--white); }
/* client 2026-09-25: narrow, flush under the header, same glass as the Hotels panel */
.nav-more__list{ position:fixed; z-index:60; width:max-content; min-width:180px; padding:var(--space-3) 0; background:rgba(42,26,22,.55);
        -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%);
        border:1px solid rgba(255,255,255,.14); border-block-start:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 24px 48px rgba(20,12,8,.22); opacity:0; visibility:hidden;
        transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); text-align:left; --align-x:flex-start; }
.nav-more__list::before{ content:""; position:absolute; inset-inline:0; top:calc(-1 * var(--space-2) - 1px); height:calc(var(--space-2) + 1px); }
.nav-more__list a{ display:flex; justify-content:flex-start; padding-inline:var(--space-6); width:100%; min-height:44px; }
.nav-more__list a:hover{ background:rgba(255,255,255,.08); text-decoration:none; }
/* the fixed pages (Contact Us, FAQ, Career — client 2026-09-25 16:30) sit under a hairline once overflow items are folded in above them */
.nav-more__list > li:not(.nav-more__fixed) + .nav-more__fixed{ border-block-start:1px solid rgba(255,255,255,.12); margin-block-start:var(--space-2); padding-block-start:var(--space-2); }
.nav-more:hover .nav-more__list,.nav-more:focus-within .nav-more__list,.nav-more__btn[aria-expanded="true"] + .nav-more__list{ opacity:1; visibility:visible; }
/* Hotels: full-width panel under the header (client 2026-09-25, reference About panel): title + intro left, one photo
   card per hotel with its name at the foot. Sits flush under the bar (site.js sets top), so hover never drops out. */
/* client 2026-09-25 (via b9): "background should be glassmorphism effect" — the header's glass recipe, so the hero shows
   through blurred; and "reduce the height of image" — cards at 12:5 (about two thirds of the first cut). Visibility
   flips at once on open (so the first card can take focus) and only after the fade on close. */
.nav-hotels__panel{ position:fixed; z-index:60; left:0; right:0; padding:var(--space-10) var(--gutter) var(--space-12); background:rgba(42,26,22,.55);
        -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); border-block-end:1px solid rgba(255,255,255,.14);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 24px 48px rgba(20,12,8,.22);
        opacity:0; visibility:hidden; transform:translateY(-6px); text-align:left; --align-x:flex-start;
        transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
.nav-hotels__in{ display:grid; grid-template-columns:minmax(0,.9fr) repeat(2,minmax(0,1.3fr)); column-gap:var(--space-6); align-items:start; }
.nav-hotels__intro{ padding-inline-end:var(--space-8); }
.nav-hotels__title{ font-family:var(--font-display); font-weight:300; font-size:32px; line-height:1.2; color:var(--white); }
.nav-hotels__text{ margin-block-start:var(--space-4); font-size:var(--body); line-height:var(--body-lh); color:rgba(255,255,255,.82); max-width:36ch; }
.nav-hotels__list{ display:contents; }
.nav .hcard{ display:block; position:relative; overflow:hidden; aspect-ratio:12/5; min-height:0; border-radius:0 0 var(--curve) 0; color:var(--white); text-decoration:none; opacity:1; }
.hcard__media,.hcard__media img{ position:absolute; inset:0; width:100%; height:100%; }
.hcard__media img{ object-fit:cover; transition:transform 900ms var(--ease); }
.hcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,20,20,.82) 0%, rgba(20,20,20,.35) 38%, rgba(20,20,20,0) 62%); }
/* client ~22:40 (both names boxed, arrow to the logo): "make this capital letters and increase the letter spacing a bit so it looks
   like the logo's Holymont name, and reduce the font weight to match the logo" — wide-tracked capitals in Jost 200, like the
   HOLYMONT wordmark; the start padding balances the trailing tracking so the name stays optically centred */
.hcard__name{ position:absolute; z-index:1; inset-inline:0; bottom:var(--space-5); text-align:center; --align-x:center; font-family:var(--font-display);
  font-weight:200; font-size:26px; line-height:1.2; text-transform:uppercase; letter-spacing:.2em; padding-inline-start:.2em; text-shadow:0 1px 14px rgba(0,0,0,.35); }   /* ~22:45 "reduce the letter space a bit" (was .3em) */
.nav .hcard:hover{ text-decoration:none; }
.hcard:hover .hcard__media img{ transform:scale(1.04); }
/* opens on hover or when the button says it is open; not on focus alone, so Escape (which re-focuses the button) really closes it */
.nav-hotels:hover .nav-hotels__panel,.nav-hotels__btn[aria-expanded="true"] + .nav-hotels__panel{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
@media (max-width:1199px){ .nav-hotels__in{ grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,1.1fr)); } .nav-hotels__title{ font-size:28px; } .nav .hcard{ aspect-ratio:2/1; } .hcard__name{ font-size:20px; letter-spacing:.16em; padding-inline-start:.16em; } }
.header-actions{ flex:0 0 auto; }
.header-actions .btn{ flex:0 0 auto; white-space:nowrap; min-height:46px; padding-block:var(--space-2); padding-inline:var(--space-5); }
@media (max-width:991px){
  .site-header__in{ display:grid; grid-template-columns:44px 1fr auto; gap:var(--space-3); }
  .burger{ display:inline-flex; }
  .nav{ display:none; }
  .brand{ justify-self:center; }
  .brand img{ width:130px; }
  .header-actions .btn{ padding-inline:var(--space-4); min-height:40px; }
}
@media (max-width:419px){ .brand img{ width:104px; } .header-actions .btn{ padding-inline:var(--space-3); } }

/* ---------------------------------------------------------------- drawer (brown, client 2026-09-25) */
.drawer{ position:fixed; inset:0; z-index:70; background:rgba(46,31,20,.6); }
.drawer__panel{ position:absolute; inset-block:0; inset-inline-start:0; width:min(360px,88vw); overflow:auto; background:var(--paper);
                padding:var(--space-16) var(--space-6) var(--space-8); --focus:var(--walnut); --focus-halo:var(--white); }
.drawer__close{ position:absolute; top:var(--space-3); right:var(--space-3); width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--walnut); }
.drawer__label{ font-weight:500; font-size:var(--label); line-height:1.4; text-transform:uppercase; letter-spacing:.06em; color:var(--walnut); }
.drawer__list + .drawer__label{ margin-block-start:var(--space-8); }
.drawer__label + .drawer__list{ margin-block-start:var(--space-2); }
.drawer__list a{ display:flex; align-items:center; min-height:48px; border-block-end:1px solid var(--line); color:var(--walnut); text-decoration:none; font-size:18px; }
.drawer__list a:hover{ color:var(--walnut-2); text-decoration:underline; }

/* ---------------------------------------------------------------- 1. hero: full-height, diagonal wipe + slow zoom, photo fades to white */
.hero{ position:relative; height:100vh; height:100svh; min-height:640px; background:var(--umber); overflow:hidden; }
.hero .swiper.hero__swiper{ position:absolute; inset:0; height:100%; }
.hero__swiper .swiper-wrapper,.hs{ height:100%; }
.hs{ position:absolute; inset:0; z-index:1; }
.hs__media,.hs__media img{ position:absolute; inset:0; width:100%; height:100%; }
.hs__media img{ object-fit:cover; object-position:50% 45%; transform:scale(1.05); }
.hs.is-under{ z-index:5 !important; }
.hs.swiper-slide-active{ z-index:6 !important; animation:hs-wipe 850ms cubic-bezier(.65,0,.2,1) both; }   /* client 2026-10-15 (to a3): "increase the speed of it a bit" — 1100 → 850ms */
/* every other slide sits at the bottom whatever the count (client 2026-10-15, to a3: "the book page change animation you removed?
   add the animation back"): Swiper's creative effect writes z-index = slide count − distance inline, so with 7 slides the next
   slide got 6 — level with the incoming slide's 6 and later in the page — and covered the wipe (it ran, unseen, under a photo
   that simply cut over). Only the incoming slide and the one it covers stack above the rest now; the resort's palace doors too. */
.hs:not(.swiper-slide-active):not(.is-under){ z-index:1 !important; }
.hs.swiper-slide-active .hs__media img{ animation:hs-zoom 4.5s linear both; }
@keyframes hs-wipe{ from{ clip-path:polygon(0 0, 0 0, -30% 100%, 0 100%); } to{ clip-path:polygon(0 0, 130% 0, 100% 100%, 0 100%); } }
@keyframes hs-zoom{ from{ transform:scale(1); } to{ transform:scale(1.05); } }
@media (prefers-reduced-motion:reduce){ .hs.swiper-slide-active,.hs.swiper-slide-active .hs__media img{ animation:none; } .hs__media img{ transform:none; } }
.hero__fade{ display:none; position:absolute; inset-inline:0; bottom:0; height:180px; z-index:7; pointer-events:none;
             background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.9)); }
/* slider lines — the ONE control for every slider on the page (client 2026-09-25: "keep all the dots like this").
   Colour comes from the container (white over photos, ink on the linen journal); the current line fills in time
   with autoplay, earlier lines stay filled. 44px targets around a 2px mark. */
.lines{ display:flex; align-items:center; justify-content:center; gap:var(--space-2); color:var(--white); }
.hs-line{ width:var(--line-w, 60px); height:44px; display:flex; align-items:center; }
.hs-line span{ position:relative; display:block; width:100%; height:2px; }
.hs-line span::before{ content:""; position:absolute; inset:0; background:currentColor; opacity:.35; }
.hs-line span::after{ content:""; position:absolute; inset:0; background:currentColor; transform:scaleX(var(--p, 0)); transform-origin:left; }
.hs-line:not([aria-current="true"]) span::after{ transform:scaleX(0); }
.hs-line[data-done="true"] span::after{ transform:scaleX(1); }
.hs-pause{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:inherit; border:1px solid currentColor; border-radius:50%; }
.hs-pause .ico{ opacity:.9; }
.hs-pause:hover{ background:rgba(255,255,255,.15); }
@media (max-width:767px){ .lines{ --line-w:40px; } }
/* hero arrows (client 2026-09-25: arrows instead of lines). Later (reference crop, "this kind of arrow and circle
   styling"): two frosted circles side by side at the bottom-right of the photo, hairline border, long thin arrows —
   this supersedes the earlier "middle align" (top 50%, left/right edges). home.js publishes --bar-h (bar height + 20). */
/* client 2026-09-25 (~15:15, via 70): "it's looking too big, reduce the size and place it middle of the image left and
   right" — same frosted circle and long arrow, 48px (44 on phones), one at each edge, centred on the photo */
/* client 2026-09-25 (~16:40, crop): "Arrow is not visible properly" — white arrow with a heavier stroke and a soft shadow,
   on a darker frosted circle with a brighter rim, so it reads over bright skies as well as dark hills */
.hero__arrow{ --arrow:48px; position:absolute; z-index:8; top:50%; transform:translateY(-50%); width:var(--arrow); height:var(--arrow);
  display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.85); border-radius:50%; color:var(--white);
  background:rgba(42,26,22,.38); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 10px rgba(0,0,0,.18);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hero__arrow .ico--long{ width:24px; height:12px; stroke-width:2.2; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); }
.hero__arrow:hover{ background:rgba(255,255,255,.92); border-color:var(--white); color:var(--umber); }
.hero__prev{ left:var(--gutter); } .hero__next{ right:var(--gutter); }
.hero__bar{ position:absolute; z-index:9; inset-inline:0; bottom:var(--space-5); }
.widget.hero .container.hero__bar{ margin-block-start:0; }
@media (max-width:767px){
  .hero{ height:auto; min-height:0; }
  .hero .swiper.hero__swiper{ position:relative; inset:auto; height:72vh; min-height:440px; }
  .hero__fade{ display:none; }
  /* phone: the photo is 72vh with the bar in flow below it, so centre on that 72vh */
  .hero__arrow{ --arrow:44px; top:calc(72vh / 2); }
  .hero__arrow .ico--long{ width:20px; height:10px; }
  .hero__prev{ left:var(--space-4); } .hero__next{ right:var(--space-4); }
  .hero__bar{ position:relative; inset:auto; padding-inline:0; }
}

/* ---------------------------------------------------------------- booking bar (client 2026-09-25 screenshot): cream strip, boxed
   Place / Hotel selects with a lead icon and chevron, dark spaced-caps Book Now, "Why Book Direct?" and "Manage Booking" beneath */
/* client 2026-09-25 (later): back to the dark frosted glass, narrower (max 1040) so fields and button stop looking stretched */
/* client 2026-09-25 (later): "make it compact, reduce the height and extra top/bottom spacing, no width change" — 10px
   vertical padding, 18px label row, 4px gaps; the 46px controls and every width stay as they were */
.bw{ --bw-lab:18px; max-width:1040px; margin-inline:auto; background:rgba(42,26,22,.55); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%);
     border:1px solid rgba(255,255,255,.18); color:var(--white); border-radius:var(--radius); padding:10px var(--space-5);
     box-shadow:0 18px 40px rgba(0,0,0,.18); --focus:var(--gold); --focus-halo:var(--umber); }
.bw__form{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 190px; gap:var(--space-4); align-items:start; }
.bw__field{ display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
.bw__field--place{ grid-column:1 / 2; }   /* place, then hotel, then the button — explicit so a reflow never reorders them */
.bw__field--hotel{ grid-column:2 / 3; }
.bw__field label{ display:block; min-height:var(--bw-lab); font-size:var(--sm); line-height:var(--bw-lab); color:var(--white); }
.bw__ctl{ position:relative; }
.bw__ctl > .ico{ position:absolute; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--brown-ink); }
.bw__ctl > .ico:first-child{ left:var(--space-4); }
.bw__ctl > .ico:last-child{ right:var(--space-4); }
.bw__field select{ width:100%; min-height:46px; padding:var(--space-3) var(--space-10) var(--space-3) 46px; border:1px solid var(--line); border-radius:var(--radius);
        background:var(--white); color:var(--ink); font-family:var(--font-body); font-size:var(--body); line-height:1.4; cursor:pointer;
        -webkit-appearance:none; appearance:none; transition:border-color var(--dur) var(--ease); }
.bw__field select:hover{ border-color:var(--brown); }
.bw__field select option{ color:var(--ink); background:var(--white); }
.bw__submit{ display:flex; flex-direction:column; gap:var(--space-1); padding-block-start:calc(var(--bw-lab) + var(--space-1)); }
.bw__book{ width:100%; min-height:46px; padding:var(--space-3) var(--space-5); border-radius:var(--radius); background:var(--beige); color:var(--umber);
           font-family:var(--font-body); font-weight:500; font-size:14px; line-height:1.4; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
           transition:background-color var(--dur) var(--ease); }
.bw__book:hover{ background:var(--gold); }
.bw__aux{ font-size:var(--sm); line-height:var(--sm-lh); color:rgba(255,255,255,.9); }
.bw__aux-btn,.bw__aux-link{ color:inherit; text-decoration:none; }
.bw__aux-btn:hover,.bw__aux-link:hover{ text-decoration:underline; text-underline-offset:4px; }
.bw__direct{ position:relative; }
.bw__pop{ position:absolute; z-index:50; bottom:100%; left:0; width:min(320px, 80vw); margin-block-end:var(--space-3); padding:var(--space-4) var(--space-5);
          background:var(--white); color:var(--text); box-shadow:var(--shadow); --focus:var(--umber); --focus-halo:var(--white); }
.bw__pop-title{ font-size:12px; line-height:1.4; text-transform:uppercase; letter-spacing:.06em; color:var(--gold-ink); }
.bw__pop-list{ margin-block-start:var(--space-3); display:grid; gap:var(--space-2); font-size:var(--sm); line-height:var(--sm-lh); }
.bw__pop-list li{ display:flex; align-items:center; gap:var(--space-2); }
.bw__pop-list li::before{ content:""; flex:0 0 auto; width:6px; height:6px; border:1px solid var(--gold-ink); transform:rotate(45deg); }
.bw__status{ margin-block-start:var(--space-3); font-size:var(--sm); line-height:var(--sm-lh); color:var(--gold-ink); }
@media (max-width:991px){ .bw__form{ grid-template-columns:repeat(2,minmax(0,1fr)); } .bw__submit{ grid-column:1 / -1; padding-block-start:0; } }
@media (max-width:767px){ main > .hero{ position:relative; }   /* phone: the hero + in-flow bar is taller than the screen, so no pin */
  .pullup{ margin-block-start:calc(-1 * var(--space-6)); border-radius:var(--space-6) var(--space-6) 0 0; }
  .pullup > .widget:first-child{ padding-block-start:calc(2 * var(--w-pad) + var(--space-6)); }   /* give the overlap back: 60 below the bar */
  .hero .bw{ padding-block-end:calc(2 * var(--space-6)); }   /* the curve overlaps the bar's padding, never its text */
  .bw{ max-width:none; background:var(--walnut-2); border:0; border-radius:0; box-shadow:none; padding:var(--space-6) var(--gutter); }
  .bw__pop{ top:100%; bottom:auto; margin-block:var(--space-2) 0; } }
@media (max-width:599px){ .bw__form{ grid-template-columns:minmax(0,1fr); } .bw__field--place,.bw__field--hotel{ grid-column:1 / -1; } }

/* ---------------------------------------------------------------- 2. about (client 2026-09-25, Soaltee reference): centred eyebrow,
   one-colour heading (client: "ONE COLOUR HEADERS THROUGHOUT" — the reference's accent word was dropped), centred copy, a "Know More" button, then the
   client's watercolour panorama of the estate bleeding full-width below, fading in from the page ground */
.welcome h2{ font-size:var(--d1); line-height:var(--d1-lh); }
.welcome__copy{ max-width:860px; margin-inline:auto; }
.welcome__copy > * + *{ margin-block-start:var(--space-6); }
.welcome__copy > .label + h2{ margin-block-start:var(--space-6); }
.welcome__copy > .actions{ margin-block-start:var(--space-8); }   /* "Know More" is the standard outline .btn (client ~15:45: "same as other button"); the circle-arrow link is gone */
/* client 2026-09-25 (~15:35, via 70): "bottom part should blend with the website background" — the art dissolves into
   the paper at BOTH ends (mask on the wrapper), and the watercolour is multiplied over the paper so its own near-white
   ground never shows as a rectangle */
/* client ~16:10 (via b9: "reduce this spacing" — ~75px of empty cream between the button and the hills, ~160 from the
   hills to the next eyebrow): the hazy sky is CROPPED out of the picture (the img keeps a 2000:366 box, cover, anchored
   to its bottom, so the crop is the same fraction at every width — this replaces the earlier −60px lift), the fades
   are short (14% top, 12% bottom), the box sits 16 under the button and its last 24 overlap the section's own
   50 below, so the next eyebrow lands ~100 under where the hills visibly end (the site seam). Multiply + paper stay. */
.widget .container > .welcome__art{ margin-block:var(--space-6) calc(-1 * var(--space-6));   /* 24 under the paragraph now that the button is gone (client 2026-09-25 17:20) */ margin-inline:calc(-1 * var(--gutter)); background:var(--paper); overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 88%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 88%, transparent 100%); }   /* out of the gutters: edge to edge */
.welcome__art img{ display:block; width:100%; height:auto; aspect-ratio:2000 / 366; object-fit:cover; object-position:50% 100%; mix-blend-mode:multiply; }
@media (max-width:767px){ .welcome__art img{ min-height:200px; object-position:22% 100%; } }

/* ---------------------------------------------------------------- 3. two halves: centred head, photo + centred caption (reference)
   client 2026-09-25 (later): heading + paragraph above, three lines of copy and an Explore More button on each half */
.split__head{ max-width:1040px; margin-inline:auto; }   /* the heading fits one line at 1920; .measure keeps the paragraph at 800 */
.split__head > h2 + p{ margin-block-start:var(--space-4); }
.split .container + .split__grid{ margin-block-start:var(--sec-in); }
.split__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.half{ position:relative; min-height:clamp(460px, 64vh, 680px); overflow:hidden; color:var(--white); }
.half__link{ display:block; position:absolute; inset:0; }
.half__media,.half__media img{ position:absolute; inset:0; width:100%; height:100%; }
.half__media img{ object-fit:cover; transition:transform 1200ms var(--ease); }
.half:hover .half__media img{ transform:scale(1.03); }
/* property videos (client 2026-09-25): over the photo, which stays as poster/fallback; played by home.js only while in view */
.half__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.half__vbtn{ position:absolute; z-index:2; right:var(--space-6); bottom:var(--space-6); width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.55); border-radius:50%; color:var(--white); background:rgba(0,0,0,.25); opacity:.8; transition:opacity var(--dur) var(--ease); }
.half__vbtn:hover,.half__vbtn:focus-visible{ opacity:1; }
@media (max-width:767px){ .half__vbtn{ top:var(--space-4); left:var(--space-4); bottom:auto; right:auto; } }   /* phone: clear of the button row */
/* client 2026-09-25: dark grey gradient from the bottom behind the copy */
.half::after{ content:""; position:absolute; inset:0; pointer-events:none;
              background:linear-gradient(to top, rgba(20,20,20,.86) 0%, rgba(20,20,20,.62) 28%, rgba(20,20,20,.22) 52%, rgba(20,20,20,0) 68%); }
.half__copy{ position:absolute; inset-inline:0; bottom:var(--space-5); z-index:1; padding-inline:var(--space-6); pointer-events:none; }   /* client 2026-09-25 (~17:10): "reduce the space below the button so that we can see the video properly" — 20, was 40 */
.half__copy > * + *{ margin-block-start:var(--space-3); }
.half__copy > .actions{ margin-block-start:var(--space-5); align-items:center; pointer-events:auto; gap:var(--space-3) var(--space-6); }
.half__loc{ display:flex; align-items:center; justify-content:center; gap:var(--space-2); font-size:var(--nav); line-height:1.4; color:var(--white); }
.half__sub{ font-size:var(--sm); line-height:var(--sm-lh); color:rgba(255,255,255,.9); max-width:48ch; margin-inline:auto; }   /* two lines (client ~17:10: "from 3 line make the content 2 line") */
.half__btn{ min-height:44px; padding-block:var(--space-2); }
@media (max-width:767px){ .split__grid{ grid-template-columns:minmax(0,1fr); } .half{ min-height:clamp(420px, 60vh, 560px); } }

/* ---------------------------------------------------------------- 4+5. villas: centred head, image stack + sticky muted list */
.stack{ display:grid; grid-template-columns:minmax(0,53fr) minmax(0,47fr); column-gap:var(--space-24); align-items:start; }   /* reference: 864 : 768 at 1920 */
.stack__imgs{ display:flex; flex-direction:column; gap:var(--stack-gap); }
.stack__item{ position:relative; }
.stack__item img{ width:100%; aspect-ratio:11/10; object-fit:cover; }
.badge{ position:absolute; top:0; right:0; width:140px; height:140px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2);
        background:rgba(42,26,22,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--white); text-align:center; --align-x:center; }
.badge img{ width:32px; height:auto; }
.badge span{ font-size:11px; line-height:1.3; text-transform:uppercase; letter-spacing:.08em; padding-inline:var(--space-2); }
/* badge on the Resort / Fort halves — client 2026-09-25 (later): smaller, "it's covering too much of the image" */
.half .badge--lg{ z-index:1; right:var(--space-8); width:112px; height:112px; gap:var(--space-2); pointer-events:none; }
.badge--lg img{ width:28px; }
.badge--lg span{ font-size:11px; line-height:1.35; letter-spacing:.08em; }
@media (max-width:767px){ .half .badge--lg{ right:var(--space-4); width:96px; height:96px; } .badge--lg img{ width:24px; } }
.stack__side{ position:sticky; top:calc(var(--header-h) + var(--space-10)); padding-inline-start:var(--space-4); padding-block-start:var(--space-16); }   /* reference: list starts ~64px below the first image */
.vlist > * + *{ margin-block-start:var(--space-6); }
.vlist__list > * + *{ margin-block-start:var(--space-6); }
.vlist__name{ display:inline-block; font-family:var(--font-display); font-size:var(--d4); line-height:var(--d4-lh); color:var(--muted); text-decoration:none;
              transition:color 300ms var(--ease); }
.vlist__name:hover{ color:var(--brown); }
.vlist__item.is-on .vlist__name{ color:var(--ink); }
.vlist__more{ display:none; padding-block:var(--space-3) var(--space-2); }
.vlist__item.is-on .vlist__more{ display:block; }
.vlist__more > * + *{ margin-block-start:var(--space-3); }
html:not(.js) .vlist__name{ color:var(--ink); }
html:not(.js) .vlist__more{ display:block; }
@media (max-width:991px){ .badge{ width:96px; height:96px; } }
@media (max-width:767px){
  .stack{ grid-template-columns:minmax(0,1fr); row-gap:var(--space-8); }
  .stack__side{ position:static; order:-1; padding-inline-start:0; padding-block-start:0; }
  .vlist__name{ color:var(--ink); }
  .vlist__more{ display:block; }
  .stack__imgs{ flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; }
  .stack__item{ flex:0 0 85%; scroll-snap-align:start; }
}

/* ---------------------------------------------------------------- 6. highlights strip (reference: awards row) */
.hl__list{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--space-8); text-align:center; --align-x:center; }
.widget .container > .hl__list{ margin-block-start:var(--sec-in); }
.hl{ display:flex; flex-direction:column; align-items:center; gap:var(--space-3); }
.hl__ico{ width:56px; height:56px; color:var(--brown); }
.hl__num{ font-family:var(--font-display); font-size:30px; line-height:1.2; color:var(--ink); }
.hl__cap{ font-size:12px; line-height:1.4; color:var(--gold-ink); text-transform:uppercase; letter-spacing:.06em; max-width:18ch; }
@media (max-width:991px){ .hl__list{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:var(--space-10); } }
@media (max-width:479px){ .hl__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------------------------------------------------------------- 7. photo band with the dark T-shaped panel */
.cardband{ position:relative; height:43vw; min-height:560px; max-height:880px; overflow:hidden; }
.cardband__media,.cardband__media img{ position:absolute; inset:0; width:100%; height:100%; }
.cardband__media img{ object-fit:cover; }
.tshape{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:51vw; min-width:640px; height:92%; z-index:1; }
.tshape__top{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:63%; height:66%; background:var(--umber); }
.tshape__base{ position:absolute; bottom:0; left:0; width:100%; height:34%; background:var(--umber); }
.tshape__copy{ position:absolute; inset:0; padding:23% 9% 6%; display:flex; flex-direction:column; align-items:center; }
.tshape__copy > *{ max-width:520px; }
.tshape__copy > * + *{ margin-block-start:var(--space-4); }
.tshape__copy h2{ font-size:var(--d3); line-height:var(--d3-lh); }
.tshape__copy > .rule{ margin-block-start:var(--space-6); }
.tshape__copy > .rule + p{ margin-block-start:var(--space-6); }
.tshape__copy > .actions{ margin-block-start:var(--space-6); }
@media (max-width:1199px){ .tshape{ width:70vw; min-width:0; } .tshape__copy{ padding-top:16%; } }
@media (max-width:767px){
  .cardband{ height:auto; min-height:0; max-height:none; padding:var(--space-16) var(--gutter); }
  .tshape{ position:relative; top:auto; left:auto; transform:none; width:100%; height:auto; background:var(--umber); padding:var(--space-12) var(--space-6); }
  .tshape__top,.tshape__base{ display:none; }
  .tshape__copy{ position:static; padding:0; }
}

/* ---------------------------------------------------------------- 8. dark list with diamond dividers */
.venues.widget--fill{ padding-block:var(--w-pad) calc(var(--w-pad) + var(--space-16)); }
.reveal-list{ text-align:center; --align-x:center; max-width:1280px; margin-inline:auto; }
.reveal-item{ padding-block:var(--space-15); }
.reveal-item.is-on{ padding-block:var(--space-8); }
@media (max-width:767px){ .reveal-item{ padding-block:var(--space-6); } }
/* .venues prefix out-ranks .on-dark h3, which otherwise keeps every name white (found in render pass 2) */
.venues .reveal-item__name{ font-family:var(--font-display); font-weight:300; font-size:var(--d2); line-height:var(--d2-lh); color:rgba(255,255,255,.18); transition:color 500ms var(--ease); }
.venues .reveal-item.is-on .reveal-item__name{ color:var(--white); }
.reveal-item__more{ display:grid; justify-items:center; gap:var(--space-3); max-height:0; overflow:hidden; opacity:0;
                    transition:max-height 500ms var(--ease), opacity 400ms var(--ease), margin 400ms var(--ease); }
.reveal-item.is-on .reveal-item__more{ max-height:300px; opacity:1; margin-block:var(--space-6); }
.reveal-item__more p{ max-width:900px; margin-inline:auto; font-size:15px; line-height:1.5; color:rgba(255,255,255,.85); }
.reveal-item__more .small{ color:var(--gold); text-transform:uppercase; letter-spacing:.06em; font-size:12px; }
.reveal-item__mark{ width:34px; height:auto; }
.dline{ position:relative; display:none; width:100%; height:1px; background:var(--line-dark); }
.dline::after{ content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; transform:translate(-50%,-50%) rotate(45deg); border:1px solid rgba(255,255,255,.6); background:var(--umber); }
.reveal-item.is-on .dline{ display:block; }
.dline--end{ margin-block-start:var(--space-2); }
html:not(.js) .venues .reveal-item__name{ color:var(--white); }
html:not(.js) .reveal-item__more{ max-height:none; opacity:1; margin-block:var(--space-4); }
html:not(.js) .dline{ display:block; }

/* ---------------------------------------------------------------- 9. two escapes: heading, list, stats | pills + figure (reference map section) */
.escapes.widget--fill{ padding-block:var(--w-pad); }
.map{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--space-24); align-items:start; }
.widget .container.map > * + *{ margin-block-start:0; }
.map__copy > * + *{ margin-block-start:var(--space-8); }
.map__copy > .widget__head + *{ margin-block-start:var(--space-10); }
.map__copy h2{ font-size:var(--d1); line-height:var(--d1-lh); }
.map__copy .widget__head p{ max-width:560px; }
.map__media{ min-width:0; }
.map__media > * + *{ margin-block-start:var(--space-12); }
.toggle{ display:flex; justify-content:flex-end; gap:var(--space-3); flex-wrap:wrap; }
.toggle__btn{ min-height:46px; padding:var(--pill-y) var(--pill-x); border-radius:var(--pill); border:1px solid var(--ink); color:var(--ink);
              font-family:var(--font-display); font-size:16px; line-height:1.4; transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.toggle__btn:hover{ background:var(--beige); }
.toggle__btn[aria-selected="true"]{ background:var(--ink); color:var(--white); }
.places{ display:grid; gap:var(--space-3); }
.places li{ display:flex; align-items:center; gap:var(--space-3); font-size:var(--sm); line-height:var(--sm-lh); color:var(--ink); }
.places .ico{ color:var(--brown); }
.stats{ display:flex; flex-wrap:wrap; gap:var(--space-8); }
.stats > div{ padding-inline-end:var(--space-8); border-inline-end:1px solid rgba(62,42,28,.22); }
.stats > div:last-child{ border:0; padding-inline-end:0; }
.stats dt{ font-family:var(--font-display); font-size:var(--stat); line-height:1.1; color:var(--ink); }
.stats dd{ font-size:var(--sm); line-height:var(--sm-lh); color:var(--text); margin-block-start:var(--space-2); }
.map__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (max-width:991px){ .map{ grid-template-columns:minmax(0,1fr); row-gap:var(--space-10); } .toggle{ justify-content:flex-start; } }

/* ---------------------------------------------------------------- 10. offers (client 2026-09-25, venue-card reference):
   full-bleed photo, centred white heading, cream cards in a slider with every second card set lower */
.widget.offers{ position:relative; overflow:hidden; }
.offers__bg,.offers__bg img{ position:absolute; inset:0; width:100%; height:100%; }
.offers__bg img{ object-fit:cover; }
.offers__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(46,31,20,.55), rgba(46,31,20,.15) 45%, rgba(46,31,20,.35)); }
.offers__in{ position:relative; z-index:1; }
.offers__head h2{ color:var(--white); font-size:var(--d2); line-height:var(--d2-lh); }
.offers__head p.label{ margin-block-start:0; font-size:calc(var(--label) + 2px); color:var(--white); }   /* client 2026-09-25: white eyebrow on the photo */
.widget .container > .offers__note{ margin-block-start:var(--space-6); color:var(--white); font-size:var(--sm); line-height:var(--sm-lh);
  text-shadow:0 1px 10px rgba(20,12,8,.7); }   /* moved from under the heading (client 2026-09-25); shadow keeps it legible on the pavement */
.offers__head .label + h2{ margin-block-start:var(--space-6); }
.widget .container > .offers__swiper{ margin-block-start:var(--sec-in); }
.offers__swiper{ overflow:visible; }
/* client 2026-09-25 (later): "make the section more compact" — four cards fit the row from 1440 up (no slider),
   3:2 photos, 24px card padding, two-line copy, a 40px stagger instead of 96 */
.offers__swiper .swiper-slide.ocard{ width:clamp(280px, calc((100% - 3 * var(--space-8)) / 4), 360px); height:auto; padding-block-end:var(--space-10); }
.offers__swiper .swiper-slide.ocard:nth-child(even){ padding-block:var(--space-10) 0; }
.ocard__link{ display:flex; flex-direction:column; height:100%; padding:var(--space-6); background:var(--linen); color:var(--text); text-decoration:none;
  box-shadow:0 18px 40px rgba(46,31,20,.18); transition:transform var(--dur) var(--ease); }
.ocard__link:hover{ transform:translateY(-4px); }
.ocard__link > * + *{ margin-block-start:var(--space-3); }
.ocard__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.offers .ocard__title{ font-family:var(--font-body); font-weight:400; font-size:14px; line-height:1.4; text-transform:uppercase; letter-spacing:.18em; color:var(--ink); }
.ocard__arrow{ flex:0 0 auto; color:var(--ochre); transform:rotate(-45deg); transition:transform var(--dur) var(--ease); }   /* client 2026-09-25: 45° arrow */
.ocard__link:hover .ocard__arrow{ transform:rotate(-45deg) translateX(5px); }
.ocard__meta{ font-size:12px; line-height:1.4; letter-spacing:.04em; color:var(--gold-ink); }
.ocard__meta span{ padding-inline:var(--space-1); }
.ocard__text{ font-size:var(--sm); line-height:1.6; color:var(--text); min-height:3.2em; }
.widget .ocard__link > .ocard__media{ margin-block-start:auto; overflow:hidden; }   /* client 2026-09-25: photo sits on the bottom padding, so top and bottom padding match on every card */
.ocard__text{ padding-block-end:var(--space-4); }
.ocard__img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform 600ms var(--ease); }
.ocard__link:hover .ocard__img{ transform:scale(1.04); }
.ocard__img--field{ display:grid; place-items:center; background:linear-gradient(135deg, var(--ochre), var(--gold-ink)); }
.widget .container > .offers__lines{ margin-block-start:0; }   /* the staggered cards already leave 96px beneath */
/* ---------------------------------------------------------------- 10b. journal (client 2026-09-25 reference) */
.widget.journal{ background:var(--linen); }
.journal__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-6) var(--space-12); flex-wrap:wrap; }
.widget .container > .journal__head > * + *{ margin-block-start:0; }
.journal__intro{ flex:1 1 480px; max-width:720px; }
.journal__intro > .label + h2{ margin-block-start:var(--space-6); }   /* same eyebrow → heading gap as every section */
.journal__intro > h2 + p{ margin-block-start:var(--space-4); }
.journal__actions{ flex:0 0 auto; margin-inline-start:auto; padding-block-end:var(--space-2); }
.widget .container > .journal__swiper{ margin-block-start:var(--space-10); }   /* 40 under the head, not --sec-in (client ~19:55: "make it compact a bit") */
.journal__swiper .swiper-slide.jcard{ width:min(728px, 80vw); height:auto; }
.jcard__link{ display:grid; grid-template-columns:40% 1fr; height:100%; min-height:388px; background:var(--paper); color:var(--ink); text-decoration:none; }
.jcard__media{ position:relative; overflow:hidden; }
.jcard__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease); }
.jcard__link:hover .jcard__media img{ transform:scale(1.04); }
.jcard__copy{ display:flex; flex-direction:column; justify-content:center; padding:var(--space-10) var(--space-10) var(--space-10) var(--space-10); }
.jcard__copy > * + *{ margin-block-start:var(--space-4); }
.jcard__kicker{ font-family:var(--font-display); font-style:italic; font-weight:300; font-size:18px; line-height:1.3; color:var(--text); }
.jcard__title{ font-family:var(--font-display); font-weight:300; font-size:24px; line-height:1.25; color:var(--ink); }
.jcard__more{ display:inline-flex; align-self:flex-start; align-items:center; gap:var(--space-2); padding-block-end:var(--space-1);
  font-family:var(--font-body); font-size:15px; font-weight:500; line-height:1.4; letter-spacing:.02em; text-transform:none; color:var(--ink);
  background:linear-gradient(var(--gold-ink), var(--gold-ink)) left bottom / 0 1px no-repeat; transition:background-size 450ms var(--ease), color var(--dur) var(--ease); }
.jcard__link:hover .jcard__more,.jcard__link:focus-visible .jcard__more{ background-size:100% 1px; color:var(--gold-ink); }   /* client 2026-09-25: quieter link, underline draws in on hover */
.jcard__more svg{ color:var(--gold-ink); }
.widget .jcard__copy > .jcard__more{ margin-block-start:var(--space-6); }
.jcard__more svg{ transition:transform var(--dur) var(--ease); }
.jcard__link:hover .jcard__more svg{ transform:translateX(5px); }
.journal__all{ border-color:var(--gold-ink); color:var(--gold-ink); }   /* size and type come from .btn (client 2026-09-25: one button type site-wide) */
.journal__all:hover{ background:var(--gold-ink); border-color:var(--gold-ink); color:var(--white); }
.widget .container > .journal__lines{ margin-block-start:var(--space-3);   /* client 2026-09-25: ~32px of air between the cards and the lines */ color:var(--ink); }
@media (max-width:767px){
  .journal__swiper .swiper-slide.jcard{ width:min(86vw, 100%); }   /* never wider than the slider: one line per story */
  .jcard__link{ grid-template-columns:minmax(0,1fr); grid-template-rows:220px auto; }
  .jcard__copy{ padding:var(--space-6); }
  .jcard__title{ font-size:24px; }
  .journal__head{ align-items:flex-start; }
}
@media (max-width:767px){
  .offers__swiper .swiper-slide.ocard{ width:80vw; padding-block-end:0; } .offers__swiper .swiper-slide.ocard:nth-child(even){ padding-block:0; }
  .widget .container > .offers__lines{ margin-block-start:var(--space-6); }
  .offers .ocard__title{ font-size:13px; letter-spacing:.16em; }
}

/* ---------------------------------------------------------------- 11. spa (client 2026-10-01: "images 2-4 and header, para and button
   and timing, that's all"; then, on a first version: "do something else … it's the same as dining only?? … something
   creative, your own" → a5's cairn of three stacked pebble photographs; then on the cairn: "glitching … try something else"
   → an orbit of circles on gold rings ("AI made and basic … looking so blank"), then three layered prints; the client's
   last word, to 1d: "revert the stone for the spa design, I like that idea only and that was fine, better than all this").
   THE CAIRN, restored: a balancing cairn of spa stones — three photographs cut into smooth pebble shapes and stacked, the
   widest at the foot, each a little tilted and lit by a soft polish, with faint gold rings round the foot like water. The
   copy beside it (left-aligned ≥992; centred above it below). Reveal (home.js [data-reveal] → .is-in): the stones are set
   down one by one from above and settle with a small wobble, and the rings spread out from the foot — once. Transform /
   opacity only; without JS or under reduced motion the finished cairn stands still.
   What "glitched" is fixed without changing the look: (1) the top stone no longer sways for ever (a photograph rotating
   inside a rounded clip shimmers on every frame); (2) the stones' shadow is a box-shadow on the pebble shape itself, not a
   filter on the moving stone (a filter is redrawn every frame the stone moves). */
/* THE STACK (client 2026-10-01 to a0, with the Simplotel "Married to the Forest" wedding section as the reference: "left
   text, right images, but on mouse scroll the left text will be stuck at one place, and on scroll on the right one image then
   the other image will stack on top of it … 3 images, that's all"). It replaces the cairn above. CSS only: the copy and each
   card are position:sticky on the same line under the header, so the copy holds still while the three photographs rise one
   after the other and come to rest on the pile, each 16px lower than the last so the edges of the cards beneath show. The
   browser's own scrolling, no script, nothing looping. Two columns in the 1200 frame (copy 5 : stack 6, 64 apart); the copy
   is centred on the pile. Phones: the copy first, then the same pile under the header. */
.spa4{ --stack-top:calc(var(--header-h) + var(--space-10));
  --card-h:min(480px, calc(100vh - var(--header-h) - var(--space-10) - var(--space-16)));   /* a card always fits under the header */
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:start; gap:var(--space-16); }
.widget .container.spa4{ max-width:calc(1200px + 2 * var(--gutter)); }
.widget .container.spa4 > * + *{ margin-block-start:0; }
.spa4__copy{ position:sticky; top:var(--stack-top); height:var(--card-h); display:flex; align-items:center;
  text-align:left; --align-x:flex-start; }   /* as tall as the pile, so the copy sits on its middle */
.spa4__copy-in > * + *{ margin-block-start:var(--space-4); }
.spa4__copy-in > .label + h2{ margin-block-start:var(--space-6); }
.spa4__copy h2{ font-size:var(--d2); line-height:var(--d2-lh); }
.spa4__intro{ max-width:520px; color:var(--text); }
/* the hours: the day in the display face, the frieze's gold diamond, the time in paragraph grey */
.spa4__copy-in > .spa4__hours{ margin-block-start:var(--space-6); display:flex; flex-wrap:wrap; align-items:center; justify-content:var(--align-x); gap:var(--space-3); }
.spa4__hours-k{ font-family:var(--font-display); font-weight:400; font-size:18px; line-height:1.35; color:var(--brown-ink); }
.spa4__hours-v{ display:inline-flex; align-items:center; gap:var(--space-3); color:var(--text); }
.spa4__hours-v::before{ content:""; width:6px; height:6px; background:var(--gold); rotate:45deg; }
.spa4__copy-in > .actions{ margin-block-start:var(--space-8); }
/* the Noor Mahal logo above the eyebrow (client 2026-10-30: "add the logo here and make the text side align with the image side",
   then, with the Shaadi Riwaaz head beside it: "space should be same"): the logo sits 24px above its eyebrow, exactly as the Shaadi
   Riwaaz logo does (.wed__head), and on the two-column layout the copy starts on the card's top edge, so the logo's top lines up
   with the photograph's; the text below keeps its own spacing. Phones and tablets stack the copy above the pile: the logo simply
   heads the centred copy. */
.spa4__logo{ display:block; width:clamp(150px, 12.5vw, 180px); height:auto; }
.spa4__copy-in > .spa4__logo + .label{ margin-block-start:var(--space-6); }   /* = the Shaadi Riwaaz logo → eyebrow gap */
@media (min-width:992px){ .spa4__copy{ align-items:flex-start; } }
@media (max-width:991px){ .spa4__logo{ margin-inline:auto; } }
.spa4__stack{ display:grid; row-gap:var(--space-12); margin:0; padding:0; list-style:none; }
/* client 2026-10-01 (reference: a pile of loose photo prints): "images stack should look like this, little tilted" — each
   card is a print with a paper border, set down at its own small angle on the same spot, so the corners of the ones beneath
   show round the edges. The tilt is on the figure, not the sticky card. */
.spa4__card{ position:sticky; top:var(--stack-top); }
/* how far the first print's −3.5deg corner hangs below the pile: sin 3.5° (.0305 × 2) × half the print's width — the print is
   the stack column (6/11 of the 1200 frame less the 64 gap; the whole container under 992). A seam measured from the
   finished pile's lowest corner adds this to its own number (resort.css, spa → gallery band). */
.widget.spa{ --spa-card-w:calc((min(1200px, 100vw - 2 * var(--gutter)) - var(--space-16)) * 6 / 11); --spa-hang:calc(var(--spa-card-w) * .0305); }
@media (max-width:991px){ .widget.spa{ --spa-card-w:calc(100vw - 2 * var(--gutter)); } }
.spa4__card:nth-child(1){ --r:-3.5deg; }
.spa4__card:nth-child(2){ --r:2.5deg; }
.spa4__card:nth-child(3){ --r:-1deg; }
.spa4__fig{ margin:0; height:var(--card-h); overflow:hidden; rotate:var(--r, 0deg); background:var(--beige);
  border:6px solid var(--paper); outline:1px solid rgba(46,31,20,.06);   /* the print's paper edge (client: "reduce the border of the images" — 12 → 6), with a hairline so it reads on the paper ground */
  box-shadow:0 14px 34px rgba(46,31,20,.22), 0 2px 6px rgba(46,31,20,.12); }
.spa4__fig img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:991px){
  .spa4{ --stack-top:calc(var(--header-h) + var(--space-4)); --card-h:min(calc((100vw - 2 * var(--gutter)) * .75), 60vh);
    grid-template-columns:minmax(0,1fr); gap:var(--space-10); }
  .spa4__copy{ position:static; height:auto; text-align:center; --align-x:center; }
  .spa4__intro{ margin-inline:auto; }
  .spa4__stack{ row-gap:var(--space-8); }
  .spa4__fig{ border-width:var(--space-1); }
}

/* ---------------------------------------------------------------- 12. testimonials (gagehotel.com reference): a
   brown block offset behind a wide photo frame, italic serif quotes sliding over a parallax background.
   Client 2026-09-25 (later): the hero-style lines, centred at the foot of the photo, replace the dots. */
/* client 2026-09-25 (later): copy column left, photo + quotes right; the lines sit on the brown block under the photo */
/* client 2026-09-25 (later): linen band behind the section, 100px above and below inside the colour (60 on phones).
   Like every painted section it carries 50 outside above its paint edge, so the visible spa → band seam is 100
   (30/60 on phones); the 100 sits inside the colour, and the band meets the footer photo directly */
.widget.testimonials{ background:var(--linen); padding-block:calc(2 * var(--w-pad)); margin-block:var(--w-pad) 0; }
.tm-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.8fr); column-gap:var(--space-12); align-items:center; }
.widget .container.tm-grid > * + *{ margin-block-start:0; }
.tm-grid__head h2{ font-size:var(--d2); line-height:var(--d2-lh); }
.tm-grid__head > .label + h2{ margin-block-start:var(--space-6); }
.tm-grid__head > .rule{ margin-block-start:var(--space-6); }
.tm-grid__head > .rule + p{ margin-block-start:var(--space-6); max-width:40ch; }
.tm{ position:relative; padding:0 0 var(--space-15) var(--space-15); }
.tm__block{ position:absolute; left:0; top:var(--space-15); bottom:0; width:max(43%, 380px); background:var(--beige);   /* client 2026-09-25: subtler than --brown */ }
.tm .hs-line{ width:40px; }   /* keeps the lines inside the brown block at every width */
@media (max-width:359px){ .tm .hs-line{ width:32px; } }
.tm__frame{ position:relative; overflow:hidden; display:flex; align-items:center; min-height:340px; background:var(--walnut-2); }
.tm__bg{ position:absolute; inset:-40% 0; will-change:transform; }
.tm__bg img{ width:100%; height:100%; object-fit:cover; }
.tm__frame::after{ content:""; position:absolute; inset:0; background:rgba(20,16,14,.42); }
.tm__swiper{ position:relative; z-index:1; width:100%; }
.tm__quote{ margin:0; padding:var(--space-10) 8%; text-align:center; --align-x:center; }
.tm__quote p{ max-width:680px; margin-inline:auto; text-wrap:balance; text-align:center; --align-x:center;
  font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(18px, 1.35vw, 22px);   /* client 2026-09-25: smaller */
  line-height:1.5; letter-spacing:.02em; color:var(--white); text-shadow:0 1px 12px rgba(0,0,0,.25); }
.tm .tm__lines{ position:absolute; z-index:2; left:var(--space-15); bottom:calc(var(--space-15) - var(--space-8)); height:var(--space-8); justify-content:flex-start; }   /* lines 16px under the photo */
@media (max-width:991px){ .tm-grid{ grid-template-columns:minmax(0,1fr); row-gap:var(--space-10); } }
@media (max-width:767px){
  .tm{ padding:0 0 var(--space-12) var(--space-6); }
  .tm .tm__lines{ left:var(--space-6); bottom:calc(var(--space-12) - var(--space-8)); height:var(--space-8); }
  .tm__block{ top:var(--space-6); width:85%; }
  .tm__frame{ min-height:380px; }
  .tm__quote{ padding:var(--space-8) var(--space-6); } .tm__quote p{ font-size:18px; }
}

/* ---------------------------------------------------------------- footer: revealed from beneath, faded photo, big logo */
main{ position:relative; z-index:1; background:var(--paper); }   /* solid fill behind the pull-up's curved bottom corners (client 2026-09-25: no photo in the notches) */   /* client 2026-09-25: page lifts off the footer on two curves */

/* client 2026-09-25: full-screen aerial photo shown clearly, dark only where the text sits (rangedevelopmentsgroup.com ref) */
.site-footer{ position:sticky; bottom:0; z-index:0; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; background:#111111; overflow:hidden; }
.site-footer__bg,.site-footer__bg img{ position:absolute; inset:0; width:100%; height:100%; }
.site-footer__bg img{ object-fit:cover; object-position:50% 58%; }   /* client 2026-09-25: photo pushed up, less empty sky at the top */
.site-footer__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(17,17,17,0) 0%, rgba(17,17,17,.1) 25%, rgba(17,17,17,.7) 50%, rgba(17,17,17,.92) 72%, rgba(17,17,17,.97) 100%); }   /* client 2026-09-25: stronger, near-black */
.site-footer > .container{ position:relative; z-index:1; padding-block:var(--space-16) var(--space-8); }   /* client 2026-09-25: compact */
.footer-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); column-gap:var(--space-12); row-gap:var(--space-10); }
.footer-col > * + *{ margin-block-start:var(--space-4); }
.footer-col--brand{ max-width:420px; }
.footer-logo{ width:200px; height:auto;   /* client 2026-09-25: smaller */ filter:brightness(0) invert(1); }
.footer-mark{ width:48px; height:auto; }
/* client 2026-09-25: one size (15px), all white; links turn gold with an underline 2px below on hover; headings are small gold tags */
.site-footer{ --ft:var(--nav); }
.footer-tag{ font-family:var(--font-display); font-size:var(--ft); line-height:1.5; letter-spacing:.02em; color:var(--white); }
.footer-addr{ display:flex; gap:var(--space-2); font-size:var(--ft); line-height:1.5; color:var(--white); }
.site-footer .footer-h{ font-family:var(--font-body); font-size:12px; line-height:1.4; font-weight:600; text-transform:uppercase; letter-spacing:.22em; color:var(--white); }   /* client 2026-09-25: white + bold; later "reduce all the font weight" → 600 */
.footer-list{ display:flex; flex-direction:column; gap:var(--space-1); }   /* client 2026-09-25: compact rows (34px pitch) */
.footer-list a{ display:flex; align-items:center; gap:var(--space-2); min-height:30px; color:var(--white); text-decoration:none; font-size:var(--ft); line-height:1.5;
  transition:color var(--dur) var(--ease); }
.site-footer .footer-list a:hover,.site-footer .footer-legal a:hover{ color:var(--gold); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.footer-social{ display:flex; gap:var(--space-2); }
.footer-social a{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.4); border-radius:50%; color:var(--white); }
.footer-social a{ transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.footer-social a:hover{ color:var(--gold); border-color:var(--gold); }
.site-footer .container > * + *{ margin-block-start:0; }
.site-footer .container > .footer-legal{ margin-block-start:var(--space-8); }   /* client 2026-09-25: compact; later "reduce this space" → 32 */
.footer-legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-3); border-block-start:1px solid var(--line-dark);
               padding-block-start:var(--space-6); font-size:var(--ft); line-height:1.5; color:var(--white); }
.site-footer .footer-legal a{ color:var(--white); text-decoration:none; transition:color var(--dur) var(--ease); }
.footer-list a,.footer-addr,.footer-legal{ font-weight:300; }   /* client 2026-09-25: lighter footer text (screenshot) */

/* pull-up reveal + full screen height on every screen (client 2026-09-25). Content is kept compact on small
   screens so it fits; home.js adds .is-tall (normal flow) if it still can't, so nothing is ever hidden. */
@media (max-width:991px){ .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:599px){
  .site-footer__bg::after{ background:linear-gradient(to bottom, rgba(17,17,17,.1) 0%, rgba(17,17,17,.65) 18%, rgba(17,17,17,.92) 40%, rgba(17,17,17,.97) 100%); }
  .site-footer > .container{ padding-block:var(--space-10) var(--space-5); }
  .footer-grid{ row-gap:var(--space-6); column-gap:var(--space-4); }
  .footer-col--brand,.footer-col:nth-child(2){ grid-column:1 / -1; }
  .footer-col > * + *{ margin-block-start:var(--space-3); }
  .footer-logo{ width:150px; } .footer-mark{ display:none; }
  .footer-list{ gap:0; } .footer-list a{ min-height:30px; }
  .site-footer .container > .footer-legal{ margin-block-start:var(--space-6); }
  .footer-legal{ padding-block-start:var(--space-4); }
}
.site-footer.is-tall{ position:relative; }

/* ---------------------------------------------------------------- floating controls */
.fab{ position:fixed; right:var(--space-8); bottom:var(--space-8); z-index:30; width:48px; height:48px; border-radius:50%; display:inline-flex; align-items:center;
      justify-content:center; background:var(--white); color:var(--umber); box-shadow:var(--shadow); }
.fab:hover{ background:var(--gold); }
.totop{ position:fixed; right:var(--space-8); bottom:var(--space-8);   /* client 2026-09-25 16:50: the call button is gone; back-to-top takes the bottom corner */ z-index:30; width:48px; height:48px; border-radius:50%; display:inline-flex;
        align-items:center; justify-content:center; background:var(--ink); color:var(--white); box-shadow:var(--shadow); }
.totop:hover{ background:var(--gold-ink); }
/* ---------------------------------------------------------------- OFFERS POP-UP (client 2026-10-30, lamarvella.com as the reference: "make the offer pop up
   same as like this but follow our colour palette and design font style"; markup build.offers_widget, behaviour src/site.js).
   → then, on the first version (a 340px walnut block): "it's too big, please improve the design, it's too ugly in terms of colour
   and size". Now a COMPACT LIGHT CARD in the site's own colours: the page's paper ground, a gold hairline, ink type, the label
   in gold-ink like the site's eyebrows, the name in Jost, "Know More" and the arrows in gold-ink. A slim solid-gold tab on the
   left edge, mid-height (clear of the cookie bar and back-to-top at the foot), the house's bottom-right curve on tab and card.
   It slides out from behind the tab; one offer at a time, the card as tall as the tallest.
   → colour (client 2026-10-30, "improve the colour", choosing A of four drawn on the Resort page): the LOGO'S NAVY AND GOLD — a
   navy tab with gold lettering, a gold band along the card's top, the label and the name in navy, Know More in the deeper gold,
   navy-outlined arrows that fill navy with a gold arrow on hover. */
.ofx{ position:fixed; z-index:35; left:0; top:50%; translate:0 -50%; display:flex; align-items:flex-start; pointer-events:none; }
.ofx > *{ pointer-events:auto; }
.ofx__tab{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:var(--space-2); width:34px; margin:0;
  padding:var(--space-3) 0 var(--space-4); background:var(--logo-blue); color:var(--gold); border:0; border-radius:0 0 16px 0; cursor:pointer;
  box-shadow:0 6px 18px rgba(62,42,28,.18); transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ofx__tab:hover{ background:#24406A; color:#E8C77E; }   /* the navy a step lighter, the gold a step brighter */
.ofx__word{ writing-mode:vertical-rl; rotate:180deg; font-family:var(--font-body); font-size:12px; font-weight:600; line-height:1; letter-spacing:.22em; text-transform:uppercase; }
.ofx__tag{ flex:none; width:15px; height:15px; }   /* the tag icon keeps its size in the narrow tab */
.ofx__chev{ width:12px; height:12px; transition:rotate var(--dur) var(--ease); }
.ofx.is-open .ofx__chev{ rotate:180deg; }
.ofx__panel{ position:relative; z-index:1; width:min(264px, calc(100vw - 34px - var(--space-4))); padding:var(--space-4) var(--space-5) var(--space-3);
  background:var(--paper); color:var(--ink); border:1px solid var(--gold); border-top:3px solid var(--gold); border-left:0; border-radius:0 0 16px 0;
  box-shadow:0 14px 34px rgba(62,42,28,.16); transform:translateX(-100%); opacity:0; visibility:hidden;
  transition:transform 380ms var(--ease), opacity 280ms var(--ease), visibility 0s linear 380ms; }
.ofx.is-open .ofx__panel{ transform:none; opacity:1; visibility:visible; transition:transform 380ms var(--ease), opacity 280ms var(--ease), visibility 0s; }
.ofx__slides{ display:grid; margin:0; padding:0; list-style:none; }
.ofx__slide{ grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity 260ms var(--ease), visibility 0s linear 260ms; }
.ofx__slide.is-on{ opacity:1; visibility:visible; transition:opacity 260ms var(--ease), visibility 0s; }
.ofx__chip{ display:inline-block; margin:0; padding-block-end:var(--space-1); border-bottom:1px solid var(--gold); color:var(--logo-blue);
  font-size:11px; font-weight:600; line-height:1.4; letter-spacing:.18em; text-transform:uppercase; }   /* the site's eyebrow: text over a gold underline */
.ofx__name{ margin:var(--space-3) 0 0; font-family:var(--font-display); font-weight:400; font-size:19px; line-height:1.3; color:var(--logo-blue); }
.ofx__text{ margin:var(--space-2) 0 0; font-size:13px; line-height:1.55; color:var(--text); }
.ofx__more{ display:inline-flex; align-items:center; gap:var(--space-1); margin-block-start:var(--space-3); color:var(--ochre); font-size:11px;
  font-weight:600; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; transition:color var(--dur) var(--ease); }
.ofx__more svg{ width:13px; height:13px; }
.ofx__more:hover{ color:var(--logo-blue); }
.ofx__foot{ display:flex; align-items:center; justify-content:space-between; margin-block-start:var(--space-3); padding-block-start:var(--space-3);
  border-top:1px solid var(--line); }
.ofx__count{ margin:0; font-size:12px; letter-spacing:.12em; color:var(--text); }
.ofx__n{ font-variant-numeric:tabular-nums; color:var(--logo-blue); }   /* the counter keeps its width from 1 to 4 */
.ofx__nav{ display:flex; gap:var(--space-1); }
.ofx__btn{ display:grid; place-items:center; width:28px; height:28px; margin:0; padding:0; background:transparent; color:var(--logo-blue);
  border:1px solid rgba(27,47,77,.35); cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ofx__btn svg{ width:14px; height:14px; transition:translate var(--dur) var(--ease); }
.ofx__btn:hover{ background:var(--logo-blue); border-color:var(--logo-blue); color:var(--gold); }
.ofx__prev:hover svg{ translate:-2px 0; } .ofx__next:hover svg{ translate:2px 0; }   /* the arrow nudges the way it goes */
@media (max-width:767px){ .ofx__tab{ width:30px; } .ofx__panel{ width:min(248px, calc(100vw - 30px - var(--space-4))); } }
@media (prefers-reduced-motion:reduce){ .ofx__panel,.ofx.is-open .ofx__panel,.ofx__slide,.ofx__slide.is-on,.ofx__chev,.ofx__btn svg{ transition:none; } }
@media print{ .ofx{ display:none; } }
.cookie{ position:fixed; left:var(--space-4); right:var(--space-4); bottom:var(--space-4); z-index:50; max-width:560px; display:flex; flex-wrap:wrap; align-items:center;
         gap:var(--space-4); padding:var(--space-4) var(--space-6); background:var(--walnut-2); box-shadow:var(--shadow); font-size:var(--sm); line-height:var(--sm-lh); }
.cookie a{ color:var(--gold); }
.cookie a:hover{ text-decoration-thickness:2px; }
.cookie .btn--gold{ min-height:40px; padding-block:var(--space-2); }
.cookie__ok{ min-width:120px; }
.ico{ flex:0 0 auto; }
.welcome,.villas,.highlights,.venues,.escapes,.offers,.spa,.testimonials,.footer-col{ position:relative; }   /* never .stack__side: it is sticky */

/* ---------------------------------------------------------------- buttons, one style site-wide (client 2026-09-25: "use this
   kind of button throughout"): square with the curved bottom-right corner, a colour that rises from the bottom on hover,
   and the label rolling up (home.js wraps each label in .roll). Placed last so it wins over the per-button rules above. */
.btn,.bw__book{ --fill:var(--gold-ink); --fill-ink:var(--white); --btn-bg:transparent;   /* client 2026-09-25 16:52: one hover fill for every button except Book Now */
  position:relative; isolation:isolate; overflow:hidden; border-radius:var(--space-4) 0 var(--space-4) 0;   /* client 2026-09-25: top-left + bottom-right curves, 16px (softer beside the form fields) */
  transition:color 450ms var(--ease), border-color 450ms var(--ease); }
/* client 2026-09-25 16:52: "except the Book Now, all the buttons should have the same colour on hover; before hover use golden
   colours" — gold-ink outline at rest on light grounds, light gold on the photo halves; every one fills gold-ink on hover */
.btn:not(.btn--gold){ color:var(--gold-ink); border-color:var(--gold-ink); }
.btn--pill{ color:var(--gold); border-color:var(--gold); }
.btn--gold,.bw__book{ --btn-bg:var(--beige); --fill:#BFAC95; --fill-ink:var(--umber); }   /* beige default; hover = beige 12% darker (client 2026-09-25) */
.btn::before,.bw__book::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--fill);
  transform:scaleY(0); transform-origin:50% 100%; transition:transform 450ms cubic-bezier(.7,0,.2,1); }
.btn:hover::before,.btn:focus-visible::before,.bw__book:hover::before,.bw__book:focus-visible::before{ transform:scaleY(1); }
html .btn:hover,html .bw__book:hover{ background:var(--btn-bg); color:var(--fill-ink); border-color:var(--fill); }
/* one size for every button and the booking selects (client 2026-09-25): 46px tall, 12px 26px inside, no per-button overrides */
.btn,.bw__book,.header-actions .btn,.half .half__btn{ height:46px; min-height:46px; padding:var(--pill-y) var(--pill-x); }
.bw__field select{ height:46px; min-height:46px; }
/* one type for EVERY button (client 2026-09-25 16:00: "Explore More and Know More also make it capital, reduce the font
   weight, match Book Now, consistency" — Plan Your Wedding and View All Stories included) */
.btn,.bw__book{ font-family:var(--font-body); font-weight:500; font-size:14px; letter-spacing:.18em; text-transform:uppercase; }
.roll{ display:inline-grid; overflow:hidden; line-height:1.4; }
.roll > span{ grid-area:1 / 1; transition:transform 450ms cubic-bezier(.7,0,.2,1); }
.roll__b{ transform:translateY(110%); }
.btn:hover .roll__a,.bw__book:hover .roll__a{ transform:translateY(-110%); }
.btn:hover .roll__b,.bw__book:hover .roll__b{ transform:none; }
@media (prefers-reduced-motion:reduce){ .btn::before,.bw__book::before,.roll > span{ transition:none; } }

/* ---------------------------------------------------------------- footer, three columns (client 2026-09-25): brand paragraph |
   "Menu" in two columns | Follow then Contact */
.footer-grid.footer-grid--3{ grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,1fr); column-gap:var(--space-16); }
.footer-grid--3 .footer-col--brand{ max-width:none; }
.footer-col--menu .footer-list--2col{ display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); grid-auto-flow:column; grid-template-rows:repeat(5,auto); column-gap:var(--space-16); }
/* client 2026-09-25: Contact stays BELOW Follow in the third column (24px between); the "compact and balanced" ask is
   met by the tighter rows, the 40px legal gap and the wider brand column rather than by re-arranging the blocks */
.footer-col--follow > .footer-h--sub{ margin-block-start:var(--space-6); }
@media (max-width:991px){ .footer-grid.footer-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } .footer-grid--3 .footer-col--brand{ grid-column:1 / -1; } }
@media (max-width:767px){ .footer-grid.footer-grid--3{ grid-template-columns:minmax(0,1fr); }
  .footer-col--menu .footer-list--2col{ column-gap:var(--space-8); }
  .footer-col--follow > .footer-h--sub{ margin-block-start:var(--space-6); } }
/* balance (client 2026-10-14, to 1b, on the resort footer: "this is not looking balanced" — "Events and Weddings" wrapped beside
   "Holymont Fort" — then "place it properly, the below text is overlapping" — the back-to-top button sat on "Booking Engine"):
   ≥992 the menu column gets more room (2 / 1.6 / 1, was 2.2 / 1.3 / 1) and its two link columns sit 48 apart; no menu link ever
   wraps; the legal row keeps clear of the fixed back-to-top button (48px, 32 from the corner, + 16 of air = a 96px lane from the
   screen's right edge) by padding its end with whatever the page gutter leaves short of that lane (0 from 1920 up). */
@media (min-width:992px){ .footer-grid.footer-grid--3{ grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) minmax(0,1fr); } }
@media (min-width:768px){ .footer-col--menu .footer-list--2col{ column-gap:var(--space-12); } }
.footer-col--menu .footer-list--2col a{ white-space:nowrap; }
.footer-legal{ padding-inline-end:max(0px, calc(var(--space-24) - var(--gutter))); }

/* ---------------------------------------------------------------- one curve on every card and image (client 2026-09-25: "use
   this curve edges all the places" — the Book Now button's bottom-right corner). Not on the Resort/Fort halves (client's
   exclusion), the hero, the offers backdrop, the booking bar or the page-level pull-up curves. */
:root{ --curve:var(--space-6); }
.ocard__link,.jcard__link,
.tm__frame,.tm__block{ border-radius:0 0 var(--curve) 0; overflow:hidden; }
/* an image inside a curved card stayed square (client: a corner within a corner "looks off") — except the offer photos:
   client 2026-09-25 (later, screenshot marking each offer image's bottom-right corner): "bottom right make it curve" */
.widget .ocard__link > .ocard__media{ border-radius:0 0 var(--curve) 0; }
.footer-col--brand > .footer-h--sub{ margin-block-start:var(--space-6); }   /* Follow under the address (client 2026-09-25) */

/* ---------------------------------------------------------------- 3b. Shaadi Riwaz (client 2026-09-25): typeset wordmark, eyebrow,
   heading, one line; a three-column collage — a tall arched centre (the Rajasthani arch) between two staggered columns */
.wed__head > * + *{ margin-block-start:var(--space-4); }
.wed__head > .label{ margin-block-start:var(--space-6); }
.wed__mark{ display:flex; flex-direction:column; align-items:center; gap:var(--space-1); color:var(--gold-ink); }
.wed__word{ font-family:"Cormorant Garamond",var(--font-display); font-style:italic; font-weight:500; font-size:52px; line-height:1; letter-spacing:.01em; }
.wed__by{ display:block; padding-inline-start:.32em; font-size:11px; letter-spacing:.32em; text-transform:uppercase; }   /* client 2026-09-25 (~16:20): "i dont want lines in the logo" — the two hairlines beside "by Holymont" are gone; the start padding balances the tracking so the word stays optically centred */
.wed__head h2{ font-size:var(--d2); line-height:var(--d2-lh); }
.wed__head .measure strong{ font-weight:600; color:var(--brown-ink); }   /* client brief: "highlight the names of areas" (the venue names in the wedding paragraph) */
.widget .container > .wed__grid{ margin-block-start:var(--space-10); }
.weddings{ position:relative; }
/* balanced (client 2026-09-25: "no uneven spacing"): the arch sets the height; each side column splits it into two equal
   photos, so all three columns start and end together with one 24px gap throughout */
.wed__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr); gap:var(--space-6); align-items:stretch;
  height:clamp(440px, 64vh, 620px);   /* roomier (client: the tighter fit looked squeezed) */   /* client 2026-09-25: the whole section fits one viewport */
  padding-inline:clamp(0px, 6.25vw, 120px); }   /* client 2026-09-25 17:50 "left and right padding 200px", then 18:22 "increase the width a bit" → 120 at 1920, scales down */
.wed__col--c{ min-height:0; }
.wed__col{ display:grid; gap:var(--space-6); min-height:0; }
.wed__col--l,.wed__col--r{ grid-template-rows:repeat(2,minmax(0,1fr)); }
.wed__fig{ margin:0; min-height:0; }
.wed__img{ position:relative; overflow:hidden; height:100%; border-radius:0 0 var(--curve) 0; }
.wed__img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 1200ms var(--ease); }
.wed__fig:hover .wed__img img{ transform:scale(1.04); }
.wed__fig--a,.wed__fig--a .wed__img{ height:100%; }
.wed__fig--a .wed__img{ border-radius:999px 999px 0 0; }   /* the arch */
@media (max-width:767px){
  .wed__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); height:auto; padding-inline:0; }
  .wed__col--c{ grid-column:1 / -1; grid-row:1; }
  .wed__col--l,.wed__col--r{ gap:var(--space-4); grid-template-rows:none; }
  .wed__col--l .wed__img,.wed__col--r .wed__img{ height:auto; aspect-ratio:4 / 3; }

  .wed__fig--a,.wed__fig--a .wed__img{ height:auto; } .wed__fig--a .wed__img{ aspect-ratio:4 / 3.4; }
}
/* filigree in the arch's spandrels (client 2026-09-25): very light brown hairlines, behind the arched photo */
.wed__col--c{ position:relative; isolation:isolate; }
.wed__col--c > .wed__fig{ position:relative; z-index:1; }
.wed__orn{ position:absolute; z-index:0; top:0; width:36%; height:auto; pointer-events:none; opacity:.4; }   /* client: there, but not prominent */
.wed__orn--l{ left:0; } .wed__orn--r{ right:0; }   /* the client's left and right files are already mirrored */

/* ---------------------------------------------------------------- 3a. location (client 2026-09-25 ~21:30, mock + new map artwork: "redesign
   the map section just below the our property section … eyebrow, header, para and below icons with name and distance, and use
   background colour FEFCF9"; the old two-column map section above the testimonials is gone). Centred head, the client's
   watercolour map across the container (its near-white ground is multiplied into the FEFCF9 band, so no rectangle shows),
   then one row of six places: icon left, name and distance right, split by short hairlines under a full-width hairline.
   A painted mid-page band: 50 inside + 50 outside, like the dining band, so the seams stay 100 / 60. */
.widget.location{ position:relative; background:#FEFCF9; margin-block:var(--w-pad); }
.widget .container > .loc__map{ margin-block-start:var(--space-6); }
.loc__map{ margin:0 auto; max-width:1320px; }
.loc__map img{ display:block; width:100%; height:auto; mix-blend-mode:multiply; opacity:.7;   /* client ~21:40 to 70: "reduce the opacity of the map design by 30%" */
  /* the painting's ground is a shade off the band, so all four edges fade out: no rectangle */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  mask-composite:intersect; }
.widget .container > .loc__list{ margin-block-start:var(--space-6); }
.loc__list{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); max-width:1320px; margin-inline:auto; padding-block-start:var(--space-6);
  border-block-start:1px solid var(--line); }
.loc__item{ position:relative; display:flex; align-items:flex-start; gap:var(--space-4); padding-inline:var(--space-5); }
.loc__item + .loc__item::before{ content:""; position:absolute; left:0; top:4%; bottom:4%; width:1px; background:var(--line); }
.loc__ico{ flex:0 0 auto; display:inline-flex; color:var(--gold-ink); }
.loc__name{ font-size:var(--nav); line-height:1.4; color:var(--ink); }
.loc__km{ margin-block-start:var(--space-2); font-size:var(--nav); line-height:1.4; color:var(--text); white-space:nowrap; }
.loc__km--tbc{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-ink); }   /* no source for these three yet: never a guessed distance */
@media (max-width:1199px){ .loc__list{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:var(--space-6); } .loc__item:nth-child(3n + 1)::before{ display:none; } }
@media (max-width:599px){ .loc__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } .loc__item{ padding-inline:var(--space-3); gap:var(--space-3); }
  .loc__item:nth-child(3n + 1)::before{ display:block; } .loc__item:nth-child(odd)::before{ display:none; } }
.widget .wed__head > .actions{ margin-block-start:var(--space-6); justify-content:center; }

/* testimonial stars + guest name (client 2026-09-25) */
.tm__quote blockquote{ margin:0; }
.tm__quote > .tm__stars{ display:flex; justify-content:center; gap:var(--space-1); margin:0 auto var(--space-4); max-width:none; color:var(--gold); font-size:0; }
.tm__quote figcaption{ margin-block-start:var(--space-5); display:flex; flex-direction:column; align-items:center; gap:var(--space-1); color:var(--white); text-shadow:0 1px 10px rgba(0,0,0,.3); }
.tm__name{ font-size:13px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }
.tm__meta{ font-size:13px; opacity:.85; }/* Explore More on the dark property photos: white outline + white label, white fill on hover (client 2026-09-25; Book Now unchanged) */
html .half .btn.half__btn:not([data-hotel]){ --btn-bg:transparent; --fill:var(--white); --fill-ink:var(--umber); color:var(--white); border-color:rgba(255,255,255,.85); }
html .half .btn.half__btn:not([data-hotel]):hover{ color:var(--umber); border-color:var(--white); }

/* testimonial lines on the lighter beige block: dark instead of white */
.tm .tm__lines{ color:var(--ink); }
.tm .hs-line span,.tm .hs-line[aria-current="true"] span{ background:rgba(62,42,28,.25); }
.tm .hs-line span::after{ background:var(--ink); }
/* journal illustration: gone (client 2026-09-25 ~19:55 to 70: "remove the illustration from the background"); the linen band
   is plain and the View All Stories button is the ordinary outline again */
.widget.journal{ position:relative; }

/* every Book Now (client 2026-09-25: "not prominent, highlight it; hover 20% darker"): deep ochre with white text,
   hover fill 20% darker. #946A26 keeps white 14px caps at 4.6:1. */
/* client 2026-09-25 17:52: "#D5AC59 Book Now button colour". Umber text (6.4:1; white would be 2.1:1). Hover 15% darker
   (#B5924C, umber 4.6:1) — the 20% the client named earlier lands at 4.15:1, under the 4.5 floor; flagged. */
html .btn--gold,html .bw__book{ --btn-bg:#D5AC59; --fill:#B5924C; --fill-ink:var(--umber); background:#D5AC59; border-color:#D5AC59; color:var(--umber); }
html .btn--gold:hover,html .bw__book:hover{ background:#D5AC59; border-color:#B5924C; color:var(--umber); }
/* scrolled header (client 2026-09-25): past 25% of a screen the bar turns to LIGHT glass so the navy logo reads, and the
   nav text / icons go ink. Before the scroll it stays the dark glass with the white logo. Dropdown panels keep their own glass. */
.site-header{ transition:background-color 500ms var(--ease), border-color 500ms var(--ease), color 500ms var(--ease); }
/* client 2026-09-25 (~17:00): "nav bar increase the transparency so that we can see the background a little bit, but make
   sure the logo is visible properly and the menu items text also" — alpha .78 → .55 with a heavier blur behind it, so the
   page shows through softly while the ink text and navy logo keep their contrast over the blurred photo */
.site-header.is-scrolled{ background:rgba(255,253,249,.88);   /* client ~18:50: "increase the white background opacity a bit, the logo colour is not visible properly" (was .55) */ color:var(--ink); border-block-end-color:rgba(62,42,28,.10);
  box-shadow:0 10px 30px rgba(20,12,8,.08); --focus:var(--walnut); --focus-halo:var(--paper); }
.site-header.is-scrolled::before{ -webkit-backdrop-filter:blur(28px) saturate(120%); backdrop-filter:blur(28px) saturate(120%); }
/* client 2026-09-25 (~17:05): "after scroll this also should be lighter background, and the three line menu items
   background colour; and before keep it as it is" — the Our Properties panel and the ≡ menu follow the bar: light glass
   with ink text once scrolled, the dark glass with white text before. The photo cards keep their own white captions. */
.site-header.is-scrolled .nav-hotels__panel,.site-header.is-scrolled .nav-more__list{ background:rgba(255,253,249,.55);   /* client 2026-09-25: as transparent as the scrolled bar */ color:var(--ink);
  border-color:rgba(62,42,28,.12); box-shadow:0 24px 48px rgba(20,12,8,.14); --focus:var(--walnut); --focus-halo:var(--paper); }
.site-header.is-scrolled .nav-hotels__title{ color:var(--ink); }
.site-header.is-scrolled .nav-hotels__text{ color:var(--text); }
.site-header.is-scrolled .nav-more__list a{ color:var(--ink); }
.site-header.is-scrolled .nav-more__list a:hover{ background:rgba(62,42,28,.06); }
.site-header .nav > .nav__list a,.site-header .nav-hotels__btn,.site-header .nav-more__btn,.site-header .burger{ transition:color 500ms var(--ease); }
.site-header.is-scrolled .nav > .nav__list a,.site-header.is-scrolled .nav-hotels__btn,
.site-header.is-scrolled .nav-more__btn,.site-header.is-scrolled .burger{ color:var(--ink); }

.site-header.is-scrolled .nav-hotels__panel,.site-header.is-scrolled .nav-more__list{ -webkit-backdrop-filter:blur(28px) saturate(120%); backdrop-filter:blur(28px) saturate(120%); }   /* same blur as the scrolled bar so text stays readable at .55 */
/* Resort / Fort badge hugs its content with 10px all round (client 2026-09-25) */
html .half .badge--lg{ width:auto; height:auto; padding:10px; gap:var(--space-2); }
html .half .badge--lg span{ padding-inline:0; white-space:nowrap; }
/* location (client 2026-09-25): a hairline under the six places too, and exactly 100px from it to the Shaadi Riwaz mark */
.loc__list{ padding-block-end:var(--space-6); border-block-end:1px solid var(--line); }
.widget.location{ padding-block-end:0; margin-block-end:0; }
.widget.location + .widget.weddings{ margin-block-start:0; padding-block-start:calc(2 * var(--w-pad)); }
.widget.split:has(+ .widget.location){ padding-block-end:0; }   /* client 2026-09-25: photos -> OUR LOCATION = 100 (the location band carries 50 outside + 50 inside) */
/* balanced places row (client 2026-09-25: "looking unbalanced"): each place is a centred column — icon, name, distance —
   and every name reserves two lines, so all six distances sit on one line and the row has even space above and below */
.loc__item{ flex-direction:column; align-items:center; gap:var(--space-3); text-align:center; --align-x:center; }
.loc__item > div{ display:flex; flex-direction:column; align-items:center; }
.loc__name{ min-height:2.8em; display:flex; align-items:center; justify-content:center; }
.widget .loc__item .loc__km{ margin-block-start:var(--space-1); }
.loc__list{ padding-block:var(--space-6); }
@media (max-width:599px){ .loc__item{ gap:var(--space-2); } }
/* client 2026-09-25 ~22:30 to 70 (the six-place row boxed): "Make this compact" — the centred column the client approved
   ("looking unbalanced" → icon, name, distance centred, two lines reserved so every distance sits on one line) scaled
   down together: 24px icon, 14px type, a two-line name box at 2.7em, 8px stack, 16 inside the hairlines instead of 24 */
.loc__list{ padding-block:var(--space-4); }
.loc__item{ gap:var(--space-2); padding-inline:var(--space-4); }
.loc__ico svg{ width:24px; height:24px; }
.loc__name{ min-height:2.7em; font-size:var(--sm); line-height:1.35; }
.widget .loc__item .loc__km{ margin-block-start:var(--space-1); font-size:var(--sm); line-height:1.35; }
.loc__km--tbc{ font-size:11px; }
.loc__item + .loc__item::before{ top:10%; bottom:10%; }
@media (max-width:599px){ .loc__item{ gap:var(--space-2); padding-inline:var(--space-2); } }
/* location v3 (client 2026-09-25): section ground #FCF7ED; the new map (opaque cream paper) dissolves into it on all four
   edges via two intersected gradient masks; full strength, no blend mode */
.widget.location{ background:#FCF7ED; }
.loc__map img{ opacity:.9; mix-blend-mode:normal;   /* client ~00:45 (crop of the map): "reduce the opacity by 10%" (was 1) */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite:intersect; }
/* location fits one screen (client 2026-09-25): the map takes whatever height is left after the header, the section head
   (~178) and the places row (~151); never taller than its natural 489, never below 300 */
@media (min-width:992px){ .loc__map img{ width:auto; max-width:100%; height:clamp(300px, calc(100vh - 430px), 489px); margin-inline:auto; object-fit:contain; } }
/* location, round 3 (client 2026-09-25): no paragraph; places row compact — icon beside the name, distance under the name,
   one line each, tight padding; the freed height goes to the map */
.loc__list{ padding-block:var(--space-3); }
.loc__item{ flex-direction:row; align-items:center; justify-content:center; gap:var(--space-3); text-align:left; --align-x:flex-start; padding-inline:var(--space-3); }
.loc__item > div{ align-items:flex-start; }
.loc__ico svg{ width:22px; height:22px; }
.loc__name{ min-height:0; display:block; font-size:14px; line-height:1.3; white-space:nowrap; }
.widget .loc__item .loc__km{ margin-block-start:0; font-size:13px; line-height:1.3; }
.loc__km--tbc{ font-size:11px; }
@media (min-width:992px){ .loc__map img{ height:clamp(340px, calc(100vh - 330px), 620px); } }
@media (max-width:1199px){ .loc__name{ white-space:normal; } }
@media (min-width:1200px){ .loc__item{ gap:var(--space-2); padding-inline:var(--space-2); } .loc__list{ max-width:1400px; } }
/* location band (client 2026-09-25): no white strip above it — it meets the property photos directly — and 100 of its own
   colour above the eyebrow and below the places row (60 on phones); the next section starts 100 below the band */
.widget.location{ margin-block:0; padding-block:calc(2 * var(--w-pad)); }
.widget.location + .widget.weddings{ padding-block-start:calc(2 * var(--w-pad)); }
/* places row: names wrap below 1600 so none touches its divider */
@media (max-width:1599px){ .loc__name{ white-space:normal; } }
.widget.location{ padding-block-end:70px; } .widget.location + .widget.weddings{ padding-block-start:70px; }   /* client 2026-09-25: band 70 below the places row, then 70 of page ground to Shaadi Riwaz */
@media (max-width:767px){ .widget.location{ padding-block-end:var(--sec-in); } .widget.location + .widget.weddings{ padding-block-start:var(--sec-in); } }
/* places row, equal gaps (client 2026-09-25): each item takes its content width plus an equal share of the spare room,
   centred, so the space between neighbours is identical and each divider sits exactly midway */
@media (min-width:1200px){ .loc__list{ display:flex; } .loc__item{ flex:1 1 auto; justify-content:center; padding-inline:var(--space-3); } }
/* seven places (client 2026-10-19: Nathdwara Temple added): in the 3-across grid (600–1199) the seventh sits alone, so it takes the
   middle column; in the 2-across grid (phones) it spans the row, centred — no lone item hugging the left edge */
@media (min-width:600px) and (max-width:1199px){ .loc__item:last-child:nth-child(3n + 1){ grid-column:2; } }
@media (max-width:599px){ .loc__item:last-child:nth-child(odd){ grid-column:1 / -1; } }
/* map edges (client 2026-09-25: "it shouldn't blur the text"): the image now carries a plain paper border (5.6% sides,
   8.2% top/bottom) and the fade runs only across that border, so no label on the artwork is ever faded */
.loc__map img{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 5.6%, #000 94.4%, transparent), linear-gradient(to bottom, transparent, #000 8.2%, #000 91.8%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 5.6%, #000 94.4%, transparent), linear-gradient(to bottom, transparent, #000 8.2%, #000 91.8%, transparent); }
@media (min-width:992px){ .loc__map img{ height:clamp(380px, calc(100vh - 290px), 700px); } }
@media (min-width:992px){ .loc__map img{ height:clamp(360px, calc(100vh - 305px), 700px); } }   /* keep the whole section inside one screen with the padded art */
/* bigger map, tighter gaps (client 2026-09-25): the map's soft paper border (8.2% of its height, top and bottom) now overlaps
   the heading gap and the gap to the places row, so only real artwork takes space; the height left over goes to the map */
@media (min-width:992px){
  .loc{ --mh:clamp(420px, calc((100vh - 250px) / .86), 860px); }
  .location .loc__map img{ height:var(--mh); }
  .widget .container > .loc__map{ margin-block:calc(var(--mh) * -.07) calc(var(--mh) * -.07); }
  .widget .container > .loc__list{ margin-block-start:var(--space-2); }
  .location .container{ --mh:clamp(420px, calc((100vh - 250px) / .86), 860px); }
}
@media (min-width:992px){ .location .container{ --mh:clamp(400px, calc((100vh - 285px) / .86), 820px); } .location .loc__map{ max-width:none; } .location .loc__map img{ width:auto; max-width:100%; object-fit:fill; } }
.location .loc__head,.location .loc__list{ position:relative; z-index:1; }   /* text always sits above the map's faded border */
@media (min-width:992px){ .widget .container > .loc__map{ margin-block-start:calc(var(--mh) * -.03); } }   /* a little room under the heading so the map's faded top never reaches it (client 2026-09-25) */
/* Book Now hover (client 2026-09-25: "hover colour is looking off"): the #B5924C fill read as muddy olive, the border jumped
   darker before the fill arrived and a light seam showed mid-animation. Now a warm, richer amber gold (#C8993F, umber 5.2:1)
   and the border always matches the face, so only the colour rising from the bottom changes. */
html .btn--gold,html .bw__book{ --fill:#C8993F; }
html .btn--gold:hover,html .btn--gold:focus-visible,html .bw__book:hover,html .bw__book:focus-visible{ border-color:#C8993F; }
.btn--gold::before,.bw__book::before{ inset:-1px; }

/* ---------------------------------------------------------------- WHITE NAVBAR, ONE LOOK (client 2026-10-01: "before scroll and after scroll keep
   the navbar same colour — what we have after scroll, follow that. Change the navbar colour to white."): the bar is opaque
   white at every scroll position, with what the scrolled state already had — ink nav, ≡ and burger, the navy logo in its
   own colours, light panels with ink text. `html` lifts these over both the at-rest rules and the `.is-scrolled` rules
   above; `.is-scrolled` (home.js) stays only as a hook (the resort's back-link strip folds on it). No blur: nothing shows
   through an opaque bar. */
html .site-header,html .site-header.is-scrolled{ background:var(--white); color:var(--ink); border-block-end-color:rgba(62,42,28,.10);
  box-shadow:0 10px 30px rgba(20,12,8,.08); --focus:var(--walnut); --focus-halo:var(--white); }
html .site-header::before,html .site-header.is-scrolled::before{ -webkit-backdrop-filter:none; backdrop-filter:none; }
html .site-header .brand img{ filter:none; }
html .site-header .nav > .nav__list a,html .site-header .nav-hotels__btn,html .site-header .nav-more__btn,html .site-header .burger{ color:var(--ink); }
/* client 2026-10-14 (the ≡ menu open over the photographs: "why is the drop-down looking transparent here, it should be white, same
   as the navbar colour"): the `.is-scrolled` glass rules above (.55 paper + blur) out-ranked this one once the page had scrolled
   (0,3,0 against 0,2,1), so the menus turned see-through over photos. The scrolled state is listed here too, so both menus stay
   solid white, like the bar, at every scroll position. */
html .site-header .nav-hotels__panel,html .site-header .nav-more__list,
html .site-header.is-scrolled .nav-hotels__panel,html .site-header.is-scrolled .nav-more__list{ background:var(--white); color:var(--ink); border-color:rgba(62,42,28,.12);
  box-shadow:0 24px 48px rgba(20,12,8,.14); -webkit-backdrop-filter:none; backdrop-filter:none; --focus:var(--walnut); --focus-halo:var(--white); }
html .site-header .nav-hotels__title{ color:var(--ink); }
html .site-header .nav-hotels__text{ color:var(--text); }
html .site-header .nav-more__list a{ color:var(--ink); }
html .site-header .nav-more__list a:hover{ background:rgba(62,42,28,.06); }
html .site-header .nav-more__list > li:not(.nav-more__fixed) + .nav-more__fixed{ border-block-start-color:rgba(62,42,28,.12); }

/* client 2026-10-01: "remove this pull-up effect and make it simple" — the hero scrolls away normally and the page below it
   starts on a straight edge (no pinned hero, no curved corners, no overlap). About keeps its 80 top padding (60 on phones). */
main > .hero{ position:relative; }
.pullup{ border-radius:0; margin-block-start:0; }
@media (max-width:767px){
  .pullup{ margin-block-start:0; border-radius:0; }
  .pullup > .widget:first-child{ padding-block-start:calc(2 * var(--w-pad)); }
  .hero .bw{ padding-block-end:var(--space-6); }
}

/* About collage (client 2026-10-01): five property photos in a symmetric wave; each wipes up into view, staggered, while
   the photo settles from a slight zoom. Gated on html.js so it never hides content without the script.
   (A ten-photo scroll-scrubbed mosaic replaced this for a few hours the same day; the client, on its screenshot: "change
   this to previous one 5 images" — this is the first block again, unchanged.) */
.widget .container > .acollage{ margin-block-start:var(--sec-in); }
.acollage{ display:grid; grid-template-columns:1fr 1fr 1.3fr 1fr 1fr; gap:var(--space-6); align-items:center; }
.acollage__fig{ margin:0; overflow:hidden; border-radius:0 0 var(--curve) 0; }
.acollage__fig img{ display:block; width:100%; height:100%; object-fit:cover; }
.acollage__fig:nth-child(1),.acollage__fig:nth-child(5){ aspect-ratio:4 / 5; }
.acollage__fig:nth-child(2),.acollage__fig:nth-child(4){ aspect-ratio:3 / 4.3; }
.acollage__fig:nth-child(3){ aspect-ratio:3 / 4.1; }
html.js .acollage__fig{ clip-path:inset(100% 0 0 0); transition:clip-path 1100ms cubic-bezier(.65,0,.2,1) calc(var(--i) * 140ms); }
html.js .acollage__fig img{ transform:scale(1.18); transition:transform 1700ms cubic-bezier(.2,.7,.2,1) calc(var(--i) * 140ms); }
html.js .acollage.is-in .acollage__fig{ clip-path:inset(0 0 0 0); }
html.js .acollage.is-in .acollage__fig img{ transform:none; }
@media (prefers-reduced-motion:reduce){ html.js .acollage__fig{ clip-path:none; transition:none; } html.js .acollage__fig img{ transform:none; transition:none; } }
@media (max-width:767px){
  .acollage{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
  .acollage__fig:nth-child(3){ order:-1; grid-column:1 / -1; aspect-ratio:4 / 3; }
  .acollage__fig:nth-child(n){ aspect-ratio:4 / 5; }
  .acollage__fig:nth-child(3){ aspect-ratio:4 / 3; }
}

/* ---------------------------------------------------------------- property lock-up (client 2026-10-01, the two boxed badges on the videos: "looking
   sticky weird to the client … what can we do better here which will not look like a patch to the video"): the filled box
   over the footage is gone. The gold monogram sits beside the property's name in the copy at the foot — one lock-up in the
   logo's wide light capitals (as on the Our Properties panel), on the half's own bottom gradient, so nothing floats over
   the video. A soft shadow keeps the name legible over a bright frame. */
.half__loc{ gap:var(--space-3); }
.half__mono{ flex:0 0 auto; width:24px; height:auto; }
.half__loc span{ font-family:var(--font-display); font-weight:300; font-size:20px; line-height:1.3; letter-spacing:.16em; text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.45); }
@media (max-width:767px){ .half__loc span{ font-size:18px; letter-spacing:.14em; } }

/* ---------------------------------------------------------------- 11c. gallery (client 2026-10-01: "After spa add gallery section which will have
   2 cards one is for resort and other for fort and cta which will redirect to that particular property gallery page"):
   centred head, two photo cards side by side (stacked on phones). Each card is the Our Properties panel's look — photo,
   bottom gradient, the name in the logo's wide light capitals — with one line and the gold View Gallery button of the
   photo halves. The whole photo clicks through (.gcard__hit, kept out of the tab order; the button is the one link).
   House rhythm: an unpainted widget, 50 top + 50 bottom (30/30 on phones); one curve on the card. */
.gallery-band .container > .gal__grid{ margin-block-start:var(--sec-in); }
.gal__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--card-gap); }
.gcard{ position:relative; overflow:hidden; aspect-ratio:5 / 4; border-radius:0 0 var(--curve) 0; background:var(--umber); }
.gcard__media{ position:absolute; inset:0; margin:0; }
.gcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease); }
.gcard::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(20,20,20,.8) 0%, rgba(20,20,20,.4) 32%, rgba(20,20,20,0) 60%); }
.gcard__hit{ position:absolute; inset:0; z-index:1; }
.gcard__copy{ position:absolute; z-index:2; inset-inline:0; bottom:0; padding:var(--space-8); pointer-events:none; }
.gcard__copy .btn{ pointer-events:auto; }
.gcard__name{ font-family:var(--font-display); font-weight:300; font-size:26px; line-height:1.3; letter-spacing:.2em; padding-inline-start:.2em;
  text-transform:uppercase; color:var(--white); }
.gcard__line{ max-width:44ch; margin:var(--space-2) auto 0; color:rgba(255,255,255,.92); }
.gcard__name,.gcard__line{ text-shadow:0 1px 12px rgba(0,0,0,.45); }   /* the lock-up's shadow: holds over the fort's bright sandstone */
.gcard__copy > .actions{ margin-block-start:var(--space-5); }
/* the photo halves' Explore More: white outline, white rising fill with umber text (gold-ink would sink into the photo);
   the label turns umber on keyboard focus too, so it never sits white on the white fill */
html .gcard .btn{ --btn-bg:transparent; --fill:var(--white); --fill-ink:var(--umber); color:var(--white); border-color:rgba(255,255,255,.85); }
html .gcard .btn:hover,html .gcard .btn:focus-visible{ color:var(--umber); border-color:var(--white); }
.gcard:hover .gcard__media img,.gcard:focus-within .gcard__media img{ transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){ .gcard__media img{ transition:none; } .gcard:hover .gcard__media img,.gcard:focus-within .gcard__media img{ transform:none; } }
@media (max-width:1199px){ .gcard__name{ font-size:20px; letter-spacing:.16em; padding-inline-start:.16em; } .gcard__copy{ padding:var(--space-6); } }
@media (max-width:767px){
  .gal__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
  .gcard{ aspect-ratio:4 / 5; }
  .gcard__copy{ padding:var(--space-6) var(--space-5); }
}

/* keyboard focus = hover for a button's label (found 2026-10-01): :focus-visible already raises the fill (::before), so the
   label must take the fill's ink as it does on :hover — otherwise a focused outline button shows gold-ink on gold-ink, and
   the white "Explore More" on the property halves shows white on white. */
html .btn:not(.btn--gold):focus-visible{ background:var(--btn-bg); color:var(--fill-ink); border-color:var(--fill); }
html .half .btn.half__btn:not([data-hotel]):focus-visible{ color:var(--umber); border-color:var(--white); }
.btn:focus-visible .roll__a{ transform:translateY(-110%); }
.btn:focus-visible .roll__b{ transform:none; }

/* Gallery fits one screen (client 2026-10-01, screenshot with the cards running off the bottom: "this section should fit in one
   scroll or one viewport"): from tablet up the cards' height is capped by what is left under the fixed header after the
   section head — eyebrow, heading, intro (--gal-head, measured by home.js; 184px without the script), the head → cards gap
   and 24px of air above and below. 5:4 stays the ceiling (so the photo sizes still cover), 320px the floor (the overlay
   copy needs it). Phones keep the stacked 4:5 cards: two cards cannot share a phone screen. */
@media (min-width:768px){
  /* width:100% keeps each card as wide as its column: with a preferred 5:4 ratio alone, a capped height would narrow the card too */
  .gcard{ width:100%; max-height:max(320px, calc(100vh - var(--header-h, 77px) - var(--gal-head, 184px) - var(--sec-in) - var(--space-12))); }
  @supports (height:100svh){ .gcard{ max-height:max(320px, calc(100svh - var(--header-h, 77px) - var(--gal-head, 184px) - var(--sec-in) - var(--space-12))); } }
}

/* Gallery card names as the property lock-up (client 2026-10-01, crop of the halves' monogram + name: "write similar way for
   gallery also"): the gold monogram beside the name, the same size, tracking and gap as on the Our Properties videos. */
.gcard__name{ display:flex; align-items:center; justify-content:center; gap:var(--space-3); font-size:20px; letter-spacing:.16em; padding-inline-start:0; }
@media (max-width:767px){ .gcard__name{ font-size:18px; letter-spacing:.14em; } }

/* card photos (client 2026-10-01: "reduce the marked gap, increase the image size", parent + child, all cards): the photo
   now sits 10px from the card's left, right and bottom edges (was 24) — the text keeps its 24 — so it grows by 28px in
   width; its curve is the card's 24 minus the 10 inset, so the two corners stay concentric */
.widget .ocard__link > .ocard__media{ margin-inline:calc(10px - var(--space-6)); margin-block-end:calc(10px - var(--space-6)); border-radius:0 0 14px 0; }

/* ---------------------------------------------------------------- PAGE-GROUND PATTERN (client 2026-10-01, a reference page with a faint lattice and the file
   "background svg.svg": "use this background throughout the website with the bit of gradient like the reference image").
   img/bg-pattern.svg is ONE seamless 1160px tile cut from the client's 6961×3481 canvas (which repeats every 1160px; the
   gold fill is baked at 10% opacity — 9% at first, 6% after "reduce the opacity of the background a bit", then 10% once the tile was halved and the client said "increase the opacity of the texture" — 39 KB instead of 809). It tiles at 200px (400 at first) over the #FFFDF9 ground — the colour itself is
   unchanged — under a soft wash fixed to the screen: almost plain paper beneath the navbar, the pattern coming through and
   the ground warming slightly lower down, like the reference. The light painted bands carry the same tile over their own
   colour, so the pattern does not stop at them; the Location band stays flat (the map's feathered edges blend into a flat
   colour). Cards, panels and photographs sit on top as before. */
/* tile size (client 2026-10-01: "the background is looking too big, make it in repeat format, I want small"): 400px → 200px,
   so the motif is half the size and repeats four times as often across the same area */
/* NEW PATTERN (client 2026-10-14 to a3: "background.png … use this as a website background full website"): the gold lattice is
   replaced by the client's tumbling-block cubes. img/bg-pattern.svg is now ONE seamless 119×216 tile redrawn from the PNG's own
   geometry (3856×3881 transparent PNG, navy #102850 lines, with a stitch seam — archived in source/client-art), so it stays
   sharp at any size and weighs 0.6 KB instead of 3.9 MB. It tiles at 104px wide — the size the PNG's cubes take when it fills a
   1920 screen — in the client's navy at 12% with ~1.2px lines, so the copy keeps its contrast. Same washes, bands and flat
   Location band as before; the tile is not square, so the size is "104px auto" and the rules below use it once. */
/* → HONEYCOMB (client 2026-10-14, a screenshot of soft hexagon outlines on navy: "reduce the size of it, the pattern should look
   like this, if needed redesign, but make the pattern similar to this pattern, and background transparent and line same as this
   blue"): the tile is now a honeycomb of regular hexagons with vertical sides (side 32, tile 55.4 × 96), transparent, in the
   reference's blue #3D4762 at 22% with lines softened by a 0.5 blur like the reference; it tiles at 60px wide, the hexagon size of
   the reference. 22% is the most the strongest line pixel allows for the #595959 copy (4.77:1). The cube tile is archived. */
/* → BLENDED (client 2026-10-14: "the background is looking so ugly, blend it with the website"): the blue-grey honeycomb read as
   tiles on the warm paper. The lines are now the site's own warm brown (--brown #8D6F57) at 11% with a finer 1.2 stroke, and the
   fixed wash gains a soft oval of paper in the middle of the screen, so the honeycomb fades away behind the copy and is only
   felt towards the edges and in the gaps — a texture of the page, not a print on it. */
/* → THE CLIENT'S OWN IMAGE (client 2026-10-14, a new, wider "background.png" — 7563×3884, the same navy cubes: "use this only and
   it should blend properly, shouldn't look weird"): no redraw. img/bg-pattern.png is ONE repeat cut straight out of the client's
   PNG (measured 205.93 × 375.80 px over nine repeats; resampled to 156 × 285, 3× the drawn size, so it stays sharp on phones),
   its own navy lines kept, their alpha scaled to 15%. It tiles at 52px wide — the cube size the image has when it spans a 1920
   screen — under the same fixed wash with the paper oval in the middle, so it blends into the page and recedes behind the copy.
   The original PNG is kept in source/client-art. */
/* → SOFTER (client 2026-10-14: "I like the pattern, could you please do something with the opacity and colour, it's looking a bit
   striking on the eye"): the same cut of the client's cubes, the line shapes kept, drawn in the site's own warm --brown #8D6F57
   instead of navy and at 11% instead of 15%, so it sits in the cream paper rather than on top of it (the navy tile is archived). */
/* → LOGO BLUE (client 2026-10-14: "for the pattern background the client wants the blue colour which we have in the logo"): the
   lines are now the logo's own navy, #1B2F4D (sampled from LOGO_HM_Blue), at 10% — blue, but softer than the 15% navy that read
   as striking (8% was compared and lost the blue). The brown tile is archived.
   → 7.5% (client 2026-10-14, the plain ground beside the homepage spa boxed: "reduce the opacity a bit"). */
:root{ --pattern:url("https://assets.simplotel.com/simplotel/image/upload/holymont-udaipur/bg-pattern_75acaa18.png");   /* 2026-10-19: the tile on the CDN (client's upload), untransformed so the PNG alpha stays */ --pattern-size:52px auto;
  --pattern-wash:radial-gradient(ellipse 34% 58% at 50% 52%, rgba(255,253,249,.82), rgba(255,253,249,.35) 65%, rgba(255,253,249,0) 100%),
    linear-gradient(to bottom, rgba(255,253,249,.80) 0%, rgba(255,253,249,.25) 40%, rgba(250,243,231,.15) 100%); }
/* scroll performance (client 2026-10-01: "remove all kind of scroll glitch and lagging"): the wash stays fixed to the screen, but
   no longer as background-attachment:fixed — that repainted the whole page layer on every scroll frame. It is its own fixed
   layer (::before), drawn once and composited: above the tile, under the content; the page's clip keeps it off the hero and
   the footer. Same look, and it now holds on iPhones too (they ignored the fixed attachment). */
.pullup{ background-color:var(--paper); background-image:var(--pattern); background-size:var(--pattern-size);
  background-repeat:repeat; background-position:50% 0; isolation:isolate; clip-path:inset(0); }
.pullup::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--pattern-wash) no-repeat; }
/* `html` lifts these over the bands' own `background:` shorthands (the resort's sit in resort.css, which loads after this file) */
/* linen bands (client 2026-10-01, screenshot of the resort Dining band: "in this particular background the texture is looking
   off"; then of the Testimonials band: "texture blend with the background"): the bare tile sat on the linen like a print, and
   stopped dead at the band's edge. It now lies under a wash of the band's own colour — a little under half strength through
   the middle, almost plain linen at the band's top and bottom edge — so it melts into the band instead of sitting on it */
:root{ --pattern-wash-band:linear-gradient(to bottom, rgba(246,242,236,.94) 0%, rgba(246,242,236,.58) 24%, rgba(246,242,236,.58) 76%, rgba(246,242,236,.94) 100%); }
html .widget.testimonials,html .widget.dining,html .widget.rgallery{ background-image:var(--pattern-wash-band), var(--pattern); background-size:100% 100%, var(--pattern-size);
  background-repeat:no-repeat, repeat; background-position:0 0, 50% 0; }

/* ---------------------------------------------------------------- LOCATION MAP v5 keeps the painting's proportions (client 2026-10-01:
   "Watercolour Journey Through Rajasthan.png … use this new image or the new map instead of the old one"; shipped 2172×983
   with the same feathered paper border the masks fade across). The height rule above (--mh) met max-width:100% with
   object-fit:fill, so wherever the container was narrower than the map's natural width at that height (1440×900, 1024×768 …)
   the artwork was squashed sideways (82% / 74% of its true width). --mh is now also capped by the room across, and the image
   takes its width from it, so the box and the painting always agree; the negative margins keep following --mh. */
@media (min-width:992px){
  /* v6 (client 2026-10-14, "new map 2.png" → 2427×886 with the same border, _qc/make-map-v6.py): the ratio below follows it */
  html .location .container{ --mh:min(clamp(400px, calc((100vh - 285px) / .86), 820px), calc((100vw - 2 * var(--gutter)) * 886 / 2427)); }
  html .location .loc__map img{ width:min(100%, calc(var(--mh) * 2427 / 886)); height:auto; object-fit:contain; }
}

/* ---------------------------------------------------------------- focal points for the client's section photographs (2026-10-01 image sheet:
   "use these images for the parent website … about us, website cover, weddings and offers"). Each tile cuts its own shape
   out of the photograph (tall tiles from wide frames in the About wave, wide tiles from tall frames in the offer cards);
   --op, written on the tile by build_parent.py, says which part of the picture the cut is taken around. */
.acollage__fig img,.wed__img img,.ocard__img{ object-position:var(--op, 50% 50%); }

/* ---------------------------------------------------------------- PARENT INNER PAGES (client 2026-10-13: "let's start with parent inner pages … we will
   create one by one, follow the design system spacing, padding, font hierarchy properly"; About Us first, with the Ranthambhore
   Bagh Palace About page as the layout reference: "follow the similar spacing as the screenshot"). The frame every inner page
   shares: the fixed header's height cleared, the homepage's ground (.pullup carries the tile and the wash), and the page's own
   content column — 1460px, the reference's width at 1920. Rhythm from the token scale, nearest to the reference's measures:
   header → breadcrumb 40 · breadcrumb → title 64 · title → intro 24 · intro → boxes 64 · boxes → mosaic 64 · mosaic → button
   80 · button → footer 100 (the page's last widget keeps the homepage's 100). Phones: 40 / 24 / 40 / 40 / 48 / 60. */
.page{ padding-block-start:var(--header-h); }
/* client 2026-10-13 (the About page, the gaps above the boxes, above the photographs and above the button boxed): "reduce space
   a bit, 10px" → 64 → 54 and 80 → 70 on desktop (10px is a recorded client exception, DESIGN-SYSTEM §7); breadcrumb → title keeps 64 */
.pullup > .widget.pg{ --pg-gap:calc(var(--space-16) - 10px); padding-block-start:var(--space-10); padding-block-end:calc(2 * var(--w-pad)); }
.widget .container.pg__c{ max-width:calc(1460px + 2 * var(--gutter)); }
/* side margins in proportion (client 2026-10-14: "increase the left and right padding same as Ranthambhore"): the reference's content
   is ~76% of the window (1441 of 1903), so ≥1200 the column is the smaller of 1460 and 76vw — 1460 at 1920 as before, but on a
   narrower window (or a zoomed one: the client views the site at 125%, ~1522px) the margins stay ~12% a side instead of 76px */
@media (min-width:1200px){ .widget .container.pg__c{ max-width:calc(min(1460px, 76vw) + 2 * var(--gutter)); } }
.widget .pg__c > * + *{ margin-block-start:var(--pg-gap); }
.widget .pg__c > .crumbs + .pg__head{ margin-block-start:var(--space-16); }
.widget .pg__c > :not(.facts) + .pg__cta{ margin-block-start:calc(var(--space-20) - 10px); }   /* the page's closing button: 70 under what precedes it (the offer page's button keeps 54 under its terms) */
/* breadcrumb: 14px paragraph grey, a gold chevron between the steps, the page itself in ink and not a link */
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); font-size:var(--sm); line-height:var(--sm-lh); color:var(--text); }
.crumbs a{ color:var(--text); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.crumbs a:hover{ color:var(--ink); }
.crumbs li + li::before{ content:"\203A"; margin-inline-end:var(--space-2); color:var(--gold-ink); }
.crumbs [aria-current="page"]{ color:var(--ink); }
/* page title (the house H1: display face, light, one colour) over a centred intro at the 860 measure */
.pg__title{ font-family:var(--font-display); font-weight:300; font-size:var(--d1); line-height:var(--d1-lh); letter-spacing:.02em; color:var(--ink); }
.pg__head > .pg__title + .pg__intro{ margin-block-start:var(--space-6); }
.pg__intro{ max-width:860px; margin-inline:auto; color:var(--text); }
/* three text boxes: a hairline frame with the house curve, 48 inside, the heading at the H3 size */
.tboxes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-10); }
.tbox{ padding:var(--space-8); border:1px solid var(--line); border-radius:0 0 var(--curve) 0;
  background:rgba(255,253,249,.86); }   /* client 2026-10-14 (to 1b, the Spa boxes: "background is over powering with the text, blend it a bit"): a paper veil at 86% — the cube tile still reads faintly through every box (About, Shaadi Riwaz, Careers, Spa), the copy sits on near-plain paper */   /* client 2026-10-14 (the About boxes' inner space boxed: "reduce the padding, top and bottom, left and right"): 48 → 32 (24 under 992) */
.tbox__h{ font-family:var(--font-display); font-weight:300; font-size:var(--d3); line-height:var(--d3-lh); color:var(--ink); }
.tbox > .tbox__h + p{ margin-block-start:var(--space-6); }
/* photo mosaic: three columns, 32 apart; wide tiles 3:2, the two tall tiles span two rows (the grid places them: tall, wide, wide /
   wide, tall, wide / wide, —, wide — the reference's arrangement); photographs cover their tile around their focal point */
.mosaic{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-8); }
.mfig{ margin:0; overflow:hidden; aspect-ratio:16 / 9; border-radius:0 0 var(--curve) 0; }   /* client 2026-10-14 ("reduce the aspect ratio of the collage", About / Shaadi Riwaz / Spa): wide tiles 3:2 → 16:9, the collage ~15% shorter */
.mfig--tall{ grid-row:span 2; aspect-ratio:auto; position:relative; }
/* client 2026-10-14 (the spa collage beside the Ranthambhore About page: "collage should fit like the reference image"): a tall tile
   is exactly two wide tiles and the gap between them. A PORTRAIT photograph in a tall tile used to lend the tile its own height and
   stretch the grid rows, leaving gaps under the wide tiles; the photo is now laid over the tile (absolute), so only the rows size it */
.mfig--tall img{ position:absolute; inset:0; }
.mfig img{ width:100%; height:100%; object-fit:cover; object-position:var(--op, 50% 50%); transition:transform 1200ms var(--ease); }
.mfig:hover img{ transform:scale(1.04); }
/* no entrance animation: the collage is simply there (client 2026-10-14, to 1b, the Spa collage: "remove the animation from the collage
   images from About Us, Shaadi Riwaz and Spa page, this particular animation is off" — the staggered fade-up is gone; hover zoom stays) */
.pg__cta{ justify-content:center; }
@media (max-width:991px){
  .tboxes{ gap:var(--space-6); }
  .tbox{ padding:var(--space-6); }
}
@media (max-width:767px){
  .pullup > .widget.pg{ --pg-gap:var(--space-10); padding-block-start:var(--space-6); }
  .widget .pg__c > .crumbs + .pg__head{ margin-block-start:var(--space-10); }
  .widget .pg__c > :not(.facts) + .pg__cta{ margin-block-start:var(--space-12); }
  .tboxes{ grid-template-columns:minmax(0,1fr); }
  .mosaic{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
  /* seven tiles with two tall make nine cells, so the last sat alone beside a hole (About, Spa, resort Spa; client 2026-10-15, to
     a3: "fix this layout"): it spans the row, a full-width 16:9 photograph closing the collage */
  .mosaic > .mfig--end{ grid-column:1 / -1; }
}
/* Shaadi Riwaz (client 2026-10-13: "an inner page for Shaadi Riwaz with proper detail boxes and header para and collage of images and
   contact us button"): the lock-up over the title; eight venue boxes four across (the figures in a small gold line under the name);
   the ten-photograph collage; the button. 2 across on tablets, 1 on phones. */
.pg__head > .wed__mark + .pg__title{ margin-block-start:var(--space-6); }
.tboxes--venues{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-8); }
.tboxes--venues .tbox{ padding:var(--space-8); }
.tbox__meta{ font-size:12px; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); }
.tbox > .tbox__h + .tbox__meta{ margin-block-start:var(--space-3); }
.tbox > .tbox__meta + p{ margin-block-start:var(--space-4); }
@media (max-width:1199px){ .tboxes--venues{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); } }
@media (max-width:767px){ .tboxes--venues{ grid-template-columns:minmax(0,1fr); } .tboxes--venues .tbox{ padding:var(--space-6); } }
/* Journal (client 2026-10-13: "a journal page … add cards only with images"): three cards across the 1460 frame, 32 apart — the
   photograph (3:2) on top, "Journal" in the small gold line, the title at the H3 size; no link, no body (no story exists yet). */
.stories{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-8); }
.story{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:0 0 var(--curve) 0; overflow:hidden; }
.story__media{ margin:0; overflow:hidden; aspect-ratio:3 / 2; }
.story__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--op, 50% 50%); transition:transform 600ms var(--ease); }
.story:hover .story__media img{ transform:scale(1.04); }
.story__body{ padding:var(--space-6) var(--space-8) var(--space-8); }
.story__kicker{ font-size:12px; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); }
.story__body > .story__kicker + .story__title{ margin-block-start:var(--space-3); }
.story__title{ font-family:var(--font-display); font-weight:300; font-size:var(--d3); line-height:var(--d3-lh); color:var(--ink); }
@media (max-width:1199px){ .stories{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){ .stories{ grid-template-columns:minmax(0,1fr); gap:var(--space-6); } .story__body{ padding:var(--space-5) var(--space-6) var(--space-6); } }
/* ---------------------------------------------------------------- JOURNAL POSTS (client 2026-10-19: the six live holymont.com posts, a
   summary + one page each; build_journal.py). CARDS: the .story card as one link, two across from 768 (the live blog's grid): the 3:2
   photo with a white date tile at its top-left (month in 11px caps, the day in the display face), "News", the title at H3, three lines
   of excerpt and the house "Read more" (gold arrow, the underline draws in on hover, as the homepage journal cards had). The title's
   link is stretched over the card; the focus ring is drawn round the whole card. */
@media (min-width:768px){ .stories--posts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.story--post{ position:relative; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.story--post:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.story--post .story__media{ position:relative; }
.story__date{ position:absolute; top:var(--space-5); left:var(--space-5); display:flex; flex-direction:column; align-items:center; min-width:56px;
  padding:var(--space-2) var(--space-3); background:var(--white); color:var(--ink); text-align:center; --align-x:center; }
.story__mon{ font-size:11px; line-height:1.2; letter-spacing:.14em; text-transform:uppercase; color:var(--text); }
.story__day{ font-family:var(--font-display); font-weight:300; font-size:30px; line-height:1.1; }
.story--post .story__body{ display:flex; flex-direction:column; flex:1 1 auto; }
.story__title a{ color:inherit; text-decoration:none; }
.story__title a::after{ content:""; position:absolute; inset:0; z-index:1; }
.story__title a:focus-visible{ outline:none; box-shadow:none; }
.story--post:has(.story__title a:focus-visible){ outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 6px var(--focus-halo); }
.story__body > .story__title + .story__excerpt{ margin-block-start:var(--space-4); }
.story__excerpt{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; margin-block-end:var(--space-6); color:var(--text); }
.story__more{ display:inline-flex; align-self:flex-start; align-items:center; gap:var(--space-2); margin-block-start:auto; padding-block-end:var(--space-1);
  font-size:15px; font-weight:500; line-height:1.4; letter-spacing:.02em; color:var(--ink);
  background:linear-gradient(var(--gold-ink), var(--gold-ink)) left bottom / 0 1px no-repeat; transition:background-size 450ms var(--ease), color var(--dur) var(--ease); }
.story__more svg{ color:var(--gold-ink); transition:transform var(--dur) var(--ease); }
.story--post:hover .story__more{ background-size:100% 1px; color:var(--gold-ink); }
.story--post:hover .story__more svg{ transform:translateX(5px); }
/* POST PAGE: "News · date" in 12px caps over the H1 (960 measure); the featured image WHOLE at its own proportion — three are text
   graphics, so never cropped — no wider than 860 or taller than 70% of the screen, with the house curve; the article at an 800
   measure (paragraph grey, h2 at the H3 size 48 above / 20 below, gold disc markers, links underlined in ink); the wedding post's
   sections as hairline boxes on the paper veil (the .tbox look); the post's button; previous / next; "You may also like" under a
   hairline (H2 centred, two cards). */
.post__meta{ font-size:12px; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); }
.post__meta time{ color:var(--text); }
.pg__head > .post__meta + .pg__title{ margin-block-start:var(--space-5); }
.post__head .pg__title{ max-width:960px; margin-inline:auto; }
.post__photo{ width:min(100%, 880px); aspect-ratio:9 / 4; margin:0 auto; overflow:hidden; border-radius:0 0 var(--curve) 0; }   /* client 2026-10-19 (a reference blog page, its photo ~873 × 387 in a 1529 window): "blogs inner page keep the image width this much" — a 880 banner at the reference's 9:4, each post's focal point keeping its graphic's headline in frame */
.post__photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--op, 50% 50%); }
.post{ max-width:800px; margin-inline:auto; }
.post > * + *{ margin-block-start:var(--space-5); }
.post p,.post li{ color:var(--text); }
.post .post__lead{ font-size:17px; line-height:1.65; color:var(--ink); }
.post h2{ font-family:var(--font-display); font-weight:300; font-size:var(--d3); line-height:var(--d3-lh); color:var(--ink); }
.post > * + h2{ margin-block-start:var(--space-12); }
.post ul{ display:grid; gap:var(--space-2); margin-inline:0; margin-block-end:0; padding-inline-start:var(--space-5); list-style:disc; }   /* block-start: the sibling gap */
.post li::marker{ color:var(--gold-ink); }
.post strong{ font-weight:600; color:var(--ink); }
.post a:not(.btn){ color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.post a:not(.btn):hover{ color:var(--gold-ink); }
.post__box{ padding:var(--space-8); border:1px solid var(--line); border-radius:0 0 var(--curve) 0; background:rgba(255,253,249,.86); }
.post__box > * + *{ margin-block-start:var(--space-4); }
.post__box > h2 + *{ margin-block-start:var(--space-5); }
.post > * + .post__box{ margin-block-start:var(--space-8); }
.post > .post__box + .post__box{ margin-block-start:var(--space-6); }
.post__close{ font-family:var(--font-display); font-weight:300; font-size:var(--d4); line-height:1.45; }
.post .post__close,.post .post__close strong{ color:var(--ink); font-weight:300; }
.post > * + .post__cta,.post__box > * + .post__cta{ margin-block-start:var(--space-8); }
/* previous / next post — the villa pages' pager, word for word (client 2026-10-19: "instead of this [You May Also Like] add previous and
   next like rooms inner page"; the rules live in resort.css, which the parent's stylesheet does not carry): under a hairline, the
   direction in small gold caps with the house arrow, the name at the H3 size, gold on hover. The base rules repeat resort.css's exactly
   (the resort stylesheet is this file + resort.css, so the villa pages are unchanged); .vpn--posts only: post titles run to 14 words,
   so each side keeps to 45% and on a phone the two stack (each still at its own side). */
.widget .pg__c > .vpn{ margin-block-start:var(--space-20); }
.vpn{ display:flex; justify-content:space-between; gap:var(--space-8); max-width:1200px; margin-inline:auto; padding-block-start:var(--space-8); border-block-start:1px solid var(--line); }
.vpn__link{ display:flex; flex-direction:column; gap:var(--space-2); color:var(--ink); text-decoration:none; }
.vpn--posts .vpn__link{ max-width:45%; }
/* client 2026-10-19 (the pager, one side on two lines and the other on one): "its looking ugly make it 2 line" — every title on exactly two
   balanced lines: one-line widths at the H3 size run 472–809px, so an 18.4em measure (441px at 24px, scaling with the type) breaks the
   shortest and holds the longest; capped at two lines for any title still to come */
.vpn--posts .vpn__name{ max-width:18.4em; text-wrap:balance; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.vpn__link--prev{ align-items:flex-start; }
.vpn__link--next{ align-items:flex-end; margin-inline-start:auto; text-align:end; --align-x:flex-end; }
.vpn__dir{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:12px; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); }
.vpn__name{ font-family:var(--font-display); font-weight:300; font-size:var(--d3); line-height:var(--d3-lh); transition:color var(--dur) var(--ease); }
.vpn__link:hover .vpn__name{ color:var(--gold-ink); }
@media (max-width:767px){
  .widget .pg__c > .vpn{ margin-block-start:var(--space-15); }
  .vpn__name{ font-size:var(--d4); line-height:var(--d4-lh); }
  .vpn--posts{ flex-direction:column; gap:var(--space-6); }
  .vpn--posts .vpn__link{ max-width:none; }
  .story__date{ top:var(--space-4); left:var(--space-4); }
  .post__box{ padding:var(--space-6); }
  .post .post__lead{ font-size:16px; }
}
/* Contact Us (client 2026-10-13: "first header para and then 2 cards with 2 property contact detail and explore more button inside
   the card"): two cards across the frame, 32 apart — the property's photograph (3:2) on top, 32 inside, the name at the H3 size,
   its headline facts, the address / phones / emails as an icon list, and the Explore More button at the foot. 1 across on phones. */
.ccards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8); }
.ccard{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:0 0 var(--curve) 0; overflow:hidden; }
.ccard__media{ margin:0; overflow:hidden; aspect-ratio:3 / 2; }
.ccard__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--op, 50% 50%); transition:transform 600ms var(--ease); }
.ccard:hover .ccard__media img{ transform:scale(1.04); }
.ccard__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:var(--space-8); }
.ccard__body > * + *{ margin-block-start:var(--space-4); }
.ccard__name{ font-family:var(--font-display); font-weight:300; font-size:var(--d3); line-height:var(--d3-lh); color:var(--ink); }
.ccard__list{ display:grid; gap:var(--space-3); }
.ccard__list a,.ccard__list address{ display:flex; align-items:flex-start; gap:var(--space-3); color:var(--ink); text-decoration:none; }
.ccard__list svg{ flex:0 0 auto; margin-block-start:var(--space-1); color:var(--gold-ink); }
.ccard__list a:hover span{ text-decoration:underline; text-underline-offset:4px; }
.ccard__body > .actions{ margin-block-start:auto; padding-block-start:var(--space-6); }
@media (max-width:767px){ .ccards{ grid-template-columns:minmax(0,1fr); gap:var(--space-6); } .ccard__body{ padding:var(--space-6); } }
/* ≥992 (client 2026-10-14, screenshot of the cards: "reduce the size of it, it should fit in one viewport; reduce the aspect ratio,
   don't just reduce the height of the image"): stacked as two wide cards in a 1200 column, 32 apart, each a row — the photograph
   on one half at a true 4:3 (smaller than the old 3:2 band, never a cropped strip), the details on the other, centred; the
   Fort's card mirrors. Phones and emails sit side by side under the address, so each card is ~450 tall and fits under the
   header on a 1280×720 screen. 768–991 and phones keep the stacked card above. */
@media (min-width:992px){
  .ccards{ grid-template-columns:minmax(0,1fr); max-width:1200px; margin-inline:auto; }
  .ccard{ flex-direction:row; }
  .ccard:nth-child(even){ flex-direction:row-reverse; }
  .ccard__media{ flex:0 0 50%; min-width:0; aspect-ratio:4 / 3; }
  .ccard__body{ justify-content:center; padding:var(--space-10) var(--space-12); }
  .ccard__list{ grid-template-columns:max-content minmax(0,1fr); grid-auto-flow:row dense; column-gap:var(--space-12); }
  .ccard__list > .is-addr{ grid-column:1 / -1; }
  .ccard__list > .is-tel{ grid-column:1; }
  .ccard__list > .is-mail{ grid-column:2; }
  .ccard__body > .actions{ margin-block-start:var(--space-8); padding-block-start:0; }
}
/* FAQ (client 2026-10-13: "FAQ page … with our website content"; redesigned 2026-10-14 on "improve the faq page design please").
   ≥992: one 1200 column, a 300px side column + 80 + the questions (820). The side column sticks under the header: "Topics" — the
   five groups numbered 01–05 with their question counts, each a jump link — over a pale "Still have a question?" panel with the
   reservations phone and email. The questions are white cards (hairline, the house curve), 12 apart, each group headed by its gold
   number; the question in ink beside a 36px linen disc whose plus turns to a cross on a gold disc when open; the answer under a
   hairline in paragraph grey. Native <details>; where the browser can animate to height:auto the answer slides open (motion-safe).
   Under 992 the side column dissolves: the topics become a row of chips above the questions, the help panel follows them. */
.faq-wrap{ max-width:860px; margin-inline:auto; display:flex; flex-direction:column; gap:var(--space-8); }
.faq-side{ display:contents; }
.faq-topics{ order:0; } .faqs{ order:1; } .faq-help{ order:2; }
.faq-topics__h{ font-size:var(--label); line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); }
.faq-topics ol{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-block-start:var(--space-3); }
.faq-topics a{ display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); background:var(--white); border:1px solid var(--line);
  border-radius:0 0 var(--space-3) 0; font-size:var(--sm); line-height:var(--sm-lh); color:var(--ink); text-decoration:none; transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.faq-topics a:hover{ border-color:var(--beige); color:var(--gold-ink); }
.faq-topics__t{ min-width:0; }
.faq-topics__n{ display:none; font-family:var(--font-display); font-size:14px; letter-spacing:.06em; color:var(--gold-ink); }
.faq-topics__c{ display:inline-grid; place-items:center; min-width:24px; height:20px; padding-inline:var(--space-2); border-radius:var(--pill); background:var(--linen); font-size:12px; line-height:1; color:var(--text); }
.faq-help{ padding:var(--space-8); background:var(--pale); border-radius:0 0 var(--curve) 0; }
.faq-help__h{ font-family:var(--font-display); font-weight:300; font-size:var(--d4); line-height:var(--d4-lh); color:var(--ink); }
.faq-help > * + *{ margin-block-start:var(--space-3); }
.faq-help > .faq-help__list{ display:grid; gap:var(--space-3); margin-block-start:var(--space-5); }
.faq-help__list a{ display:flex; align-items:center; gap:var(--space-3); color:var(--ink); text-decoration:none; }
.faq-help__list svg{ flex:0 0 auto; color:var(--gold-ink); }
.faq-help__list a:hover span{ text-decoration:underline; text-underline-offset:4px; }
.faqs > .faq-group + .faq-group{ margin-block-start:var(--space-12); }
.faq-group{ scroll-margin-top:var(--space-8); }   /* + html's scroll-padding (the header) = level with the sticky topics */
.faq-group__n{ font-family:var(--font-display); font-size:14px; line-height:1.4; letter-spacing:.12em; color:var(--gold-ink); }
.faq-group > .faq-group__n + .faq-group__h{ margin-block-start:var(--space-1); }
.faq-group__h{ font-family:var(--font-display); font-weight:300; font-size:var(--d3); line-height:var(--d3-lh); color:var(--ink); }
.faq-group > .faq-group__h + .faq{ margin-block-start:var(--space-6); }
.faq-group > .faq + .faq{ margin-block-start:var(--space-3); }
.faq{ background:var(--white); border:1px solid var(--line); border-radius:0 0 var(--curve) 0; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.faq:hover,.faq[open]{ border-color:var(--beige); }
.faq[open]{ box-shadow:0 8px 24px rgba(62,42,28,.06); }
.faq__q{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding:var(--space-5) var(--space-6); list-style:none; cursor:pointer;
  font-family:var(--font-body); font-weight:500; font-size:16px; line-height:1.5; color:var(--ink); }
.faq__q::-webkit-details-marker{ display:none; }
.faq__qt{ transition:color var(--dur) var(--ease); }
.faq__q:hover .faq__qt{ color:var(--gold-ink); }
.faq__icon{ flex:0 0 auto; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--linen); color:var(--gold-ink);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.faq__icon svg{ transition:transform var(--dur) var(--ease); }
.faq__q:hover .faq__icon{ background:var(--beige); color:var(--umber); }
.faq[open] .faq__icon{ background:var(--gold); color:var(--umber); }
.faq[open] > .faq__q svg{ transform:rotate(45deg); }
.faq__a{ margin-inline:var(--space-6); padding-block:var(--space-4) var(--space-6); border-block-start:1px solid var(--line); color:var(--text); }
.faq__a > p{ max-width:680px; }
@media (prefers-reduced-motion:no-preference){
  @supports (interpolate-size:allow-keywords){
    .faq{ interpolate-size:allow-keywords; }
    .faq::details-content{ block-size:0; overflow:clip; transition:block-size 320ms var(--ease), content-visibility 320ms allow-discrete; }
    .faq[open]::details-content{ block-size:auto; }
  }
}
@media (min-width:992px){
  .faq-wrap{ max-width:1200px; display:grid; grid-template-columns:240px minmax(0,1fr); gap:0 var(--space-12); align-items:start; }
  .faq-side{ display:grid; gap:var(--space-8); position:sticky; top:calc(var(--header-h) + var(--space-8)); }
  .faq-topics ol{ display:block; margin-block-start:var(--space-4); border-block-start:1px solid var(--line); }
  .faq-topics a{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:var(--space-3); padding:var(--space-3) 0; background:none; border:0;
    border-block-end:1px solid var(--line); border-radius:0; font-size:var(--body); }
  .faq-topics a:hover{ color:var(--gold-ink); }
  .faq-topics__n{ display:block; }
}
@media (min-width:1200px){ .faq-wrap{ grid-template-columns:300px minmax(0,1fr); column-gap:var(--space-20); } }
@media (max-width:767px){
  .faqs > .faq-group + .faq-group{ margin-block-start:var(--space-10); }
  .faq__q{ padding:var(--space-4) var(--space-5); font-size:var(--body); }
  .faq__icon{ width:32px; height:32px; }
  .faq__a{ margin-inline:var(--space-5); padding-block-end:var(--space-5); }
  .faq-help{ padding:var(--space-6); }
  /* the five topics as one swipe row, edge to edge, instead of five stacked lines */
  .faq-topics ol{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); scrollbar-width:none; }
  .faq-topics ol::-webkit-scrollbar{ display:none; }
  .faq-topics li{ flex:0 0 auto; }
}
/* Offers (client 2026-10-13: "next create offers summary and inner page", same reference). SUMMARY: four cards across the 1460 frame,
   32 apart — photograph on top (3:2, the house curve on the card), 32 inside, the name at the H3 size, the offer's line, a
   "View Offer" text link; the whole card is the link and lifts on hover like the homepage's offer cards. 2 across on tablets,
   1 on phones. */
.offer-list{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-8); }
.offer-card{ display:flex; flex-direction:column; height:100%; background:var(--white); border:1px solid var(--line); border-radius:0 0 var(--curve) 0;
  overflow:hidden; color:var(--text); text-decoration:none; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.offer-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.offer-card__media{ margin:0; overflow:hidden; aspect-ratio:3 / 2; }
.offer-card__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--op, 50% 50%); transition:transform 600ms var(--ease); }
.offer-card:hover .offer-card__media img{ transform:scale(1.04); }
.offer-card__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:var(--space-8); }
.offer-card__body > * + *{ margin-block-start:var(--space-4); }
.offer-card__title{ font-family:var(--font-display); font-weight:300; font-size:var(--d3); line-height:var(--d3-lh); color:var(--ink); }
.offer-card__body > .link{ margin-block-start:auto; padding-block-start:var(--space-6); color:var(--gold-ink); }
.offer-card:hover .link{ text-decoration-thickness:2px; }
/* DETAIL: a strip of the offers under the header (the current one in ink with a gold line), then breadcrumb → title → the offer's
   line → the photograph at the 860 measure (3:2) → paragraph → the terms as a two-column list 460 wide → the button → previous /
   next. Gaps follow the page's --pg-gap; the pager sits 70 under the button like the About page's button under its mosaic. */
.subnav{ border-block-end:1px solid var(--line); }
.subnav ul{ display:flex; justify-content:center; gap:var(--space-8); padding:var(--space-2) var(--gutter); overflow-x:auto; scrollbar-width:none; }
.subnav li{ flex:0 0 auto; }
.subnav a{ display:inline-block; padding-block:var(--space-3); font-size:var(--sm); line-height:var(--sm-lh); color:var(--text); text-decoration:none; border-block-end:1px solid transparent; transition:color var(--dur) var(--ease); }
.subnav a:hover{ color:var(--ink); }
.subnav a[aria-current="page"]{ color:var(--ink); border-color:var(--gold-ink); }
.detail__photo{ max-width:860px; margin:0 auto; overflow:hidden; aspect-ratio:3 / 2; border-radius:0 0 var(--curve) 0; }
.detail__photo img{ width:100%; height:100%; object-fit:cover; object-position:var(--op, 50% 50%); }
.facts{ max-width:460px; margin-inline:auto; border-block-start:1px solid var(--line); }
.facts__row{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-6); padding-block:var(--space-4); border-block-end:1px solid var(--line); }
.facts dt{ flex:0 0 auto; font-size:12px; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); }
.facts dd{ text-align:right; --align-x:flex-end; color:var(--ink); }
.widget .pg__c > .pg__cta + .pager{ margin-block-start:calc(var(--space-20) - 10px); }
.pager{ display:flex; justify-content:space-between; gap:var(--space-8); }
.pager__link{ display:flex; flex-direction:column; gap:var(--space-2); max-width:45%; color:var(--ink); text-decoration:none; }
.pager__link--next{ text-align:right; --align-x:flex-end; align-items:var(--align-x); }
.pager__lab{ font-size:12px; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--text); }
.pager__name{ font-family:var(--font-display); font-weight:300; font-size:var(--d3); line-height:var(--d3-lh); }
.pager__link:hover .pager__name{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
@media (max-width:1199px){ .offer-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){
  .offer-list{ grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
  .offer-card__body{ padding:var(--space-6); }
  .subnav ul{ justify-content:flex-start; gap:var(--space-6); }
  .facts dd{ text-align:left; --align-x:flex-start; }
  .facts__row{ flex-direction:column; gap:var(--space-1); }
  .widget .pg__c > .pg__cta + .pager{ margin-block-start:var(--space-12); }
  .pager__link{ max-width:48%; }
}

/* ---------------------------------------------------------------- Shaadi Riwaz lock-up (client 2026-10-13: "Holymont_Shaadi Riwaz_Logo-2-1 1.png …
   use this logo"): the client's artwork replaces the typeset wordmark (§3b's .wed__word / .wed__by rules are now unused). 220px
   wide on desktop (260 at first; client: "reduce the logo size a bit") and 180 on phones; the gap to the eyebrow is unchanged. */
.wed__logo{ display:block; width:220px; height:auto; }
@media (max-width:767px){ .wed__logo{ width:180px; } }

/* Terms & Conditions (client 2026-10-14, the Ranthambhore Bagh Palace Terms page as the reference: "create terms and conditions page
   similar to this"): the centred title and intro, then one reading column (880, the reference's measure at 1920) of sections — the
   heading at the H3 size, bullets with a gold marker or paragraphs in paragraph grey — then the button. Rhythm: intro → first
   section and last section → button keep the page's gap (54 / 40); section → section 48 (40 on phones); heading → text 20;
   bullet → bullet 8. Unconfirmed facts read "To confirm" in gold ink, as on the homepage's Location list. */
.terms{ max-width:880px; margin-inline:auto; }
.terms__sec + .terms__sec{ margin-block-start:var(--space-12); }
.terms__sec[id]{ scroll-margin-top:var(--space-6); }   /* the footer's "Privacy Policy" link lands 24 below the fixed header (html's scroll-padding already clears it) */
.terms__sec h2{ font-family:var(--font-display); font-weight:300; font-size:var(--d3); line-height:var(--d3-lh); color:var(--ink); }
.terms__sec > h2 + *{ margin-block-start:var(--space-5); }
.terms__sec ul{ display:grid; gap:var(--space-2); margin-inline:0; margin-block-end:0; padding-inline-start:var(--space-5); list-style:disc; color:var(--text); }   /* block-start is the heading's 20 */
.terms__sec li::marker{ color:var(--gold-ink); }
.terms__sec p{ color:var(--text); }
.terms__sec p + p{ margin-block-start:var(--space-4); }
.terms__sec a{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.terms__sec a:hover{ color:var(--gold-ink); }
.terms__tbc{ color:var(--gold-ink); white-space:nowrap; }
@media (max-width:767px){ .terms__sec + .terms__sec{ margin-block-start:var(--space-10); } }
/* ---------------------------------------------------------------- CAREERS (client 2026-10-14, to 1b: "where is the career page design").
   The inner-page frame: breadcrumb, H1 + intro + an Apply Now button that jumps to the form; the three About-style text boxes
   (why Holymont, DRAFT); "Where You Could Work" — four cards across the 1460 frame, 32 apart, a 4:3 photograph over the area's
   name at the H4 size and one line, fading up in turn (home.js [data-reveal]); then the application panel — white, hairline,
   the house curve, 1200 wide: the heading and a call line on the left, the form on the right (two columns of 48px fields, the
   CV drop zone and the message across both, Apply Now in the beige fill). Errors sit under their field in brick red (6.6:1 on
   white). 2 cards across under 1200, the panel stacks under 992, everything one column on phones. */
.pg__head > .pg__intro + .pg__cta{ margin-block-start:var(--space-8); }
.careas__title{ font-family:var(--font-display); font-weight:300; font-size:var(--d2); line-height:var(--d2-lh); color:var(--ink); }
.careas-wrap > .careas__title + .careas{ margin-block-start:var(--sec-in); }
.careas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-8); }
.carea{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:0 0 var(--curve) 0; overflow:hidden; }
.carea__media{ margin:0; overflow:hidden; aspect-ratio:4 / 3; }
.carea__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--op, 50% 50%); transition:transform 1200ms var(--ease); }
.carea:hover .carea__media img{ transform:scale(1.04); }
.carea__body{ padding:var(--space-6) var(--space-6) var(--space-8); }
.carea__h{ font-family:var(--font-display); font-weight:300; font-size:var(--d4); line-height:var(--d4-lh); color:var(--ink); }
.carea__body > .carea__h + p{ margin-block-start:var(--space-3); }
html.js .careas[data-reveal] .carea{ opacity:0; transform:translateY(var(--space-4)); transition:opacity 700ms var(--ease), transform 900ms var(--ease); }
html.js .careas[data-reveal] .carea:nth-child(2){ transition-delay:80ms; } html.js .careas[data-reveal] .carea:nth-child(3){ transition-delay:160ms; }
html.js .careas[data-reveal] .carea:nth-child(4){ transition-delay:240ms; }
html.js .careas[data-reveal].is-in .carea{ opacity:1; transform:none; }
/* → the application form (client 2026-10-15, to a3: "career page form should look same as child meetings and events page form, desktop
   and mobile both"): the white two-column panel is gone; the form is the resort events page's (.evform, its base rules moved here from
   resort.css so both sites share them): 70 below the work areas (no hairline here, client 2026-10-15), the heading and intro centred, the fields in a centred 760
   column, the button centred (full width on phones). */
.evform{ max-width:760px; margin-inline:auto; scroll-margin-top:calc(var(--header-h) + var(--space-6)); }
.widget .pg__c > .careas-wrap + .evform,.widget .pg__c > .ccards + .evform{ margin-block-start:calc(var(--space-20) - 10px); }   /* .ccards: the Contact page's Get in Touch form (client 2026-10-19), the same 70, no line */   /* client 2026-10-15 (the hairline above the form marked): "remove this line" — no line; the heading sits 70 under the cards */
.evform__h{ font-family:var(--font-display); font-weight:300; font-size:var(--d2); line-height:var(--d2-lh); color:var(--ink); }
.evform__intro{ max-width:560px; margin:var(--space-4) auto 0; color:var(--text); }
.evform__intro a{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; white-space:nowrap; }
.evform__intro a:hover{ color:var(--gold-ink); }
.evform__form{ margin-block-start:var(--space-10); }
.evform__consent{ display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--sm); line-height:var(--sm-lh); color:var(--text); cursor:pointer; }
.evform__consent input{ flex:0 0 auto; width:18px; height:18px; margin:0; accent-color:var(--gold-ink); cursor:pointer; }
.evform__consent input.is-bad{ outline:2px solid #A3362A; outline-offset:2px; }
.evform__actions{ justify-content:center; }
.cform{ min-width:0; }
.cform__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); }
.cform__f{ min-width:0; }
.cform__f--wide{ grid-column:1 / -1; }
.cform__lab{ display:block; margin-block-end:var(--space-2); font-size:var(--sm); line-height:var(--sm-lh); font-weight:500; color:var(--ink); }
.cform__req{ color:var(--gold-ink); }
.cform__in{ display:block; width:100%; height:48px; padding:0 var(--space-4); background:var(--paper); border:1px solid var(--line); border-radius:0; color:var(--ink);
  font:inherit; font-size:var(--body); -webkit-appearance:none; appearance:none; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
select.cform__in{ padding-inline-end:var(--space-12); cursor:pointer; background-repeat:no-repeat; background-position:right var(--space-4) center; background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5A1C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); }
.cform__ta{ height:auto; min-height:120px; padding-block:var(--space-3); line-height:var(--body-lh); resize:vertical; }
.cform__in::placeholder{ color:#767676; opacity:1; }
.cform__in:hover{ border-color:var(--beige); }
.cform__in:focus{ outline:none; border-color:var(--gold-ink); box-shadow:0 0 0 3px rgba(217,176,97,.35); }
.cform__in.is-bad,.cfile.is-bad{ border-color:#A3362A; }
.cform__err{ margin-block-start:var(--space-2); font-size:13px; line-height:1.4; color:#A3362A; }
.cfile{ position:relative; display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5) var(--space-6); background:var(--paper); border:1px dashed var(--beige);
  cursor:pointer; transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cfile__in{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.cfile:hover,.cfile.is-over{ border-color:var(--gold-ink); background:var(--linen); }
.cfile:focus-within{ border-color:var(--gold-ink); box-shadow:0 0 0 3px rgba(217,176,97,.35); }
.cfile__icon{ flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--linen); color:var(--gold-ink); transition:background-color var(--dur) var(--ease); }
.cfile.has-file .cfile__icon{ background:var(--gold); color:var(--umber); }
.cfile__text{ display:grid; gap:var(--space-1); min-width:0; }
.cfile__name{ font-weight:500; color:var(--ink); overflow-wrap:anywhere; }
.cfile__hint{ font-size:13px; line-height:1.4; color:var(--text); }
.cform__actions{ margin-block-start:var(--space-8); }
.cform__status{ margin-block-start:var(--space-4); padding:var(--space-3) var(--space-4); border-inline-start:3px solid var(--gold); background:var(--pale); font-size:var(--sm); line-height:var(--sm-lh); color:var(--ink); }
.cform__status.is-bad{ border-inline-start-color:#A3362A; }
@media (max-width:1199px){ .careas{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){
  .careas{ grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
  .widget .pg__c > .careas-wrap + .evform,.widget .pg__c > .ccards + .evform{ margin-block-start:var(--space-12); }
  .cform__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-5); }
  .cform__actions .btn{ width:100%; }
}

/* Spa page (client 2026-10-14: "create a spa page, same as the Shaadi Riwaz page"): the page head carries an eyebrow over its title,
   24 apart, as the homepage's section heads do. The boxes, collage and button are the Shaadi Riwaz page's own classes; the
   Gallery page reuses the Contact page's .ccards rows. */
.pg__head > .label + .pg__title{ margin-block-start:var(--space-6); }
.pg__head > .pg__intro + .pg__intro{ margin-block-start:var(--space-4); }   /* the About page's two intro paragraphs (client copy, 2026-10-14) */
/* Gallery page as two cards (client 2026-10-14, the page's two rows boxed: "redesign to cards"): the Contact page keeps its rows;
   here the two properties stand side by side as cards at every width — photograph on top (3:2), then name, line and button,
   the two buttons level at the cards' foot. One column on phones. */
.ccards--grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; }
.ccards--grid > .ccard:nth-child(n){ flex-direction:column; }
.ccards--grid .ccard__media{ flex:none; aspect-ratio:3 / 2; }
.ccards--grid .ccard__body{ justify-content:flex-start; padding:var(--space-8); }
.ccards--grid .ccard__body > .actions{ margin-block-start:auto; padding-block-start:var(--space-6); }
@media (max-width:767px){ .ccards--grid{ grid-template-columns:minmax(0,1fr); } .ccards--grid .ccard__body{ padding:var(--space-6); } }

/* ---- OUR PROPERTIES PANEL — monogram lock-up (72, 2026-10-14) -------------------------------------------------------------------
   client (the panel open on journal/, a box drawn before each tile name): "add logo here same as our property section" — the gold
   monogram joins the name in the two panel tiles, the homepage half__loc lock-up: a 24px mark, --space-3 gap, name unchanged.
   The name box keeps its .2em start padding, which still balances the trailing tracking so the lock-up stays optically centred. */
.hcard__name{ display:flex; align-items:center; justify-content:center; gap:var(--space-3); }
.hcard__mono{ flex:0 0 auto; width:24px; height:auto; }

/* ---- LOCATION MAP — a little bigger (72, 2026-10-14) ----------------------------------------------------------------------------
   client (the map boxed): "increase the map size a bit, it should be a little bigger". The painting sits in the middle 60 % of its
   file; the rest is paper tinted to the band, and the img already spans the whole container, so the painting is scaled up 15 % in
   place and the wrapper clips the paper that leaves the box. The layout box, the section height and the "fits below the header"
   rule are unchanged; the clipped edge is paper on a band of the same colour, inside the mask's fade. */
.location .loc__map{ overflow:hidden; }
.location .loc__map img{ transform:scale(1.15); transform-origin:50% 50%; }
/* the fade moves from the img to the wrapper: the scaled img's own fade would be cut by the clip and leave a 1-unit paper edge
   (253,248,238 on the band's 252,247,237), so the wrapper's edges fade instead — the same 5.6 % / 8.2 % bands, over the same box */
.location .loc__map{ -webkit-mask-image:linear-gradient(to right, transparent, #000 5.6%, #000 94.4%, transparent), linear-gradient(to bottom, transparent, #000 8.2%, #000 91.8%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 5.6%, #000 94.4%, transparent), linear-gradient(to bottom, transparent, #000 8.2%, #000 91.8%, transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect; }
.location .loc__map img{ -webkit-mask-image:none; mask-image:none; }

/* ---------------------------------------------------------------- LOCATION PAGE (client 2026-10-14, to 1b: "create location page same as
   this and add nearby attraction also", the Ranthambhore Bagh Palace Location page). location/ in the inner-page frame: the head
   with an "Open in Google Maps" text link; the embedded map (1200 column, hairline, the house curve; 2.35:1, 4:3 on phones);
   "Getting Here" — three white tiles (gold icon, name, the distance or "To confirm") and the airport-transfer line; "Nearby
   Attractions" — a card slider (3 / 2 / 1+peek across, js/location.js): photo 3:2, name at the H4 size, one line, the distance
   in a small linen chip, the photo credit; under it a progress line, the arrows and the "01 / 05" counter. */
.lmap__open{ margin-block-start:var(--space-6); }
.lmap__open a{ font-size:14px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); text-decoration:underline;
  text-underline-offset:6px; text-decoration-thickness:1px; }
.lmap__open a:hover{ color:var(--ink); }
.lmap,.lget,.attrs{ max-width:1200px; margin-inline:auto; }
.lmap{ overflow:hidden; border:1px solid var(--line); border-radius:0 0 var(--curve) 0; background:var(--pale); aspect-ratio:2.35 / 1; }
.lmap__frame{ display:block; width:100%; height:100%; border:0; }
.widget .pg__c > .lget,.widget .pg__c > .attrs{ margin-block-start:var(--space-20); }
.lsec__h{ font-family:var(--font-display); font-weight:300; font-size:var(--d2); line-height:var(--d2-lh); color:var(--ink); }
.lget > .lsec__h + .lget__list{ margin-block-start:var(--sec-in); }
.lget__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); max-width:900px; margin-inline:auto; }
.lget__item{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2); padding:var(--space-8) var(--space-6); background:var(--white);
  border:1px solid var(--line); border-radius:0 0 var(--curve) 0; text-align:center; --align-x:center; }
.lget__item svg{ margin-block-end:var(--space-2); color:var(--gold-ink); }
.lget__name{ color:var(--ink); }
.lget__km{ font-size:12px; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); }
.lget > .lget__list + .lget__note{ margin-block-start:var(--space-6); }
.lget__note{ font-size:var(--sm); line-height:var(--sm-lh); color:var(--text); }
.attrs__head > .lsec__h + p{ margin-block-start:var(--space-4); }
.attrs > .attrs__head + .attrs__swiper{ margin-block-start:var(--sec-in); }
.attrs__swiper .swiper-wrapper{ align-items:stretch; }
.attr{ display:flex; flex-direction:column; height:auto; background:var(--white); border:1px solid var(--line); border-radius:0 0 var(--curve) 0; overflow:hidden; }
.attr__media{ margin:0; overflow:hidden; aspect-ratio:3 / 2; }
.attr__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1200ms var(--ease); }
.attr:hover .attr__media img{ transform:scale(1.04); }
.attr__media--field{ display:grid; place-items:center; background:var(--linen); color:var(--gold-ink); }
.attr__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:var(--space-6) var(--space-6) var(--space-5); }
.attr__name{ font-family:var(--font-display); font-weight:300; font-size:var(--d4); line-height:var(--d4-lh); color:var(--ink); }
.attr__body > .attr__name + .attr__text{ margin-block-start:var(--space-3); }
.attr__km{ align-self:flex-start; margin-block-start:auto; padding:var(--space-1) var(--space-3); background:var(--linen); font-size:12px; line-height:1.4;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.attr__body > .attr__text + .attr__km{ margin-block-start:var(--space-5); }
.attr__km--tbc{ color:var(--gold-ink); }
.attr__credit{ margin-block-start:var(--space-3); font-size:11px; line-height:1.4; color:var(--text); }
.attr__credit a{ color:inherit; }
.attrs__ctrl{ display:flex; align-items:center; gap:var(--space-6); margin-block-start:var(--space-8); }
.attrs__bar{ flex:1 1 auto; height:1px; background:var(--line); }
.attrs__bar span{ display:block; width:0; height:1px; background:var(--ink); transition:width 600ms var(--ease); }
.attrs__nav{ display:grid; place-items:center; color:var(--ink); transition:color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.attrs__nav:hover{ color:var(--gold-ink); }
.attrs__nav svg{ transition:transform var(--dur) var(--ease); }
.attrs__prev:hover svg{ transform:translateX(calc(-1 * var(--space-1))); } .attrs__next:hover svg{ transform:translateX(var(--space-1)); }
.attrs__nav.swiper-button-disabled{ opacity:.35; cursor:default; }
.attrs__count{ font-size:13px; letter-spacing:.08em; color:var(--text); }
.attrs__cur{ color:var(--ink); }
.attrs__tot{ color:var(--text); }
.attrs__prev{ order:2; } .attrs__next{ order:4; } .attrs__count{ order:3; }   /* bar, ←, 01 / 05, → */
html:not(.js) .attrs__swiper .swiper-wrapper{ overflow-x:auto; scroll-snap-type:x mandatory; }
html:not(.js) .attrs__swiper .swiper-slide{ width:min(80vw, 380px); margin-inline-end:var(--space-6); scroll-snap-align:start; }
html:not(.js) .attrs__ctrl{ display:none; }
@media (max-width:767px){
  .lmap{ aspect-ratio:4 / 3; }
  .widget .pg__c > .lget,.widget .pg__c > .attrs{ margin-block-start:var(--space-15); }
  .lget__list{ grid-template-columns:minmax(0,1fr); gap:var(--space-3); }
  .lget__item{ flex-direction:row; flex-wrap:wrap; justify-content:center; padding:var(--space-5); text-align:center; --align-x:center; }
  .attrs__ctrl{ gap:var(--space-4); }
}

/* ---------------------------------------------------------------- PHONES: NO BOOKING BAR UNDER THE HERO; FULL-SCREEN MENU (client 2026-10-14,
   to 1b, parent and resort homepages: "remove booking form from mobile screen" / "remove this from mobile"; the menu drawer: "make
   it full"). Under 768 the bar is not in the page; a "Book Now" opens the same form full screen (home.js adds html.bw-sheet and a
   close button) so booking still works. The drawer panel fills the screen at every width it shows. */
.bw-sheet__close{ display:none; }
@media (max-width:767px){
  .hero__bar{ display:none; }
  html.bw-sheet{ overflow:hidden; }
  html.bw-sheet main,html.bw-sheet .hero{ z-index:90; }   /* main (z 1) and the hero (z 0) are stacking layers: lift both over the fixed header (40) while the panel is open */
  html.bw-sheet .hero__bar{ display:block; position:fixed; inset:0; z-index:80; overflow:auto; margin:0; padding:var(--space-16) 0 var(--space-6); background:var(--walnut-2); }
  html.bw-sheet .hero .bw{ padding-block-end:var(--space-6); }
  html.bw-sheet .bw-sheet__close{ display:inline-flex; align-items:center; justify-content:center; position:absolute; top:var(--space-3); right:var(--space-3);
    width:44px; height:44px; color:var(--white); }
}
.drawer__panel{ width:100%; }
/* phone header (client 2026-10-14, to 1b): "push the logo little left, gap from three line to logo 16px" — the ≡ draws its lines at
   the gutter (the button is the lines' 24px, its 44px tap area kept by an invisible ::after), the logo starts 16 after them; and
   "reduce the size of the Book Now button just 2px" — its label 14 → 12px */
@media (max-width:991px){
  .site-header__in{ grid-template-columns:var(--space-6) 1fr auto; column-gap:var(--space-4); }
  .burger{ position:relative; width:var(--space-6); }
  .burger::after{ content:""; position:absolute; inset:0 calc(-1 * var(--space-3)); }
  .brand{ justify-self:start; }
  .header-actions .btn{ font-size:12px; }
}
/* the phone menu's two property names in capitals, as the desktop Our Properties panel sets them (client 2026-10-14, to 1b: "make
   this capital letter like desktop"): the display face, light, wide-spaced — the first list in the drawer is the properties */
.drawer__panel > .drawer__list:first-of-type a{ font-family:var(--font-display); font-weight:300; font-size:var(--body); text-transform:uppercase; letter-spacing:.16em; }

/* ---------------------------------------------------------------- PHONE MENU: PROPERTIES AS A DROPDOWN (client 2026-10-14, to a3, the menu with the Hotels label
   and the Explore label boxed: "make this a dropdown for our hotels and remove that Explore"). The properties sit under one row —
   the label at the left, a chevron at the right — closed at first; a tap opens them beneath it (the chevron turns), slightly
   indented. The pages follow straight on, with no "Explore" label. The resort's menu leads with "Back to Holymont Group" (build_resort),
   level with the close button, like the strip above its header. */
/* → REDESIGNED (client 2026-10-15, to a3: "mobile view, redesign the hamburger menu inside, it's looking so blank and simple"). The
   panel wears the page's cube ground under a paper wash; a top bar holds the logo and the close button (it stays while the menu
   scrolls); the resort's "Back to Holymont Group" follows as a gold line. The properties row and the pages are set in the display
   face at 22px with hairlines between, each page with the site's long arrow at the right that slides on tap; opened, the properties
   show as two photograph cards. The foot carries Book Now (full width), the reservations number and email, and the social links.
   Opening: the panel eases in from the left and the rows rise one after another; none of it under reduced motion.
   → (client 2026-10-15, to a3: "increase the Book Now button height same as other buttons, remove the arrows, not needed, and remove
   the details below Book Now"): the page arrows are gone; the foot is Book Now alone, 46 tall (the site's button height). */
.drawer__panel{ display:flex; flex-direction:column; padding:0 var(--space-6) var(--space-8);
  background-color:var(--paper); background-image:linear-gradient(to bottom, rgba(255,253,249,.96), rgba(255,253,249,.72) 45%, rgba(252,247,237,.6)), var(--pattern);
  background-size:100% 100%, var(--pattern-size); }
.drawer__top{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h);
  margin-inline:calc(-1 * var(--space-6)); padding-inline:var(--space-6); background:var(--paper); border-block-end:1px solid var(--line); }
.drawer__brand img{ display:block; width:116px; height:auto; }
.drawer__top .drawer__close{ position:static; margin-inline-end:calc(-1 * var(--space-3)); }
.drawer__back{ display:inline-flex; align-items:center; gap:var(--space-2); align-self:flex-start; min-height:44px; margin-block-start:var(--space-3);
  color:var(--gold-ink); font-size:var(--sm); text-decoration:none; }
.drawer__back:hover{ text-decoration:underline; text-underline-offset:4px; }
.drawer__toggle{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); width:100%; min-height:var(--space-15); padding:0;
  margin-block-start:var(--space-4); border-block-end:1px solid var(--line); background:none; color:var(--walnut); cursor:pointer; text-align:start; --align-x:flex-start; }
.drawer__toggle-t,.drawer__panel .drawer__list--pages a{ font-family:var(--font-display); font-weight:300; font-size:22px; line-height:1.3; letter-spacing:.02em; }
.drawer__toggle svg{ flex:0 0 auto; color:var(--gold-ink); transition:transform var(--dur) var(--ease); }
.drawer__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
/* the properties, opened: two photograph cards */
.drawer__list--hotels{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); padding-block:var(--space-4); border-block-end:1px solid var(--line); }
.drawer__list--hotels[hidden]{ display:none; }
.drawer__list .drawer__hcard{ display:block; min-height:0; padding:0; border:0; color:var(--walnut); text-decoration:none; }
.drawer__hcard-media{ display:block; overflow:hidden; aspect-ratio:4 / 3; border-radius:0 0 var(--space-4) 0; background:var(--pale); }
.drawer__hcard-media img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease); }
.drawer__hcard:hover .drawer__hcard-media img{ transform:scale(1.05); }
.drawer__panel > .drawer__list:first-of-type .drawer__hcard-name{ display:block; margin-block-start:var(--space-2); font-family:var(--font-display); font-weight:300;
  font-size:12px; line-height:1.4; text-transform:uppercase; letter-spacing:.14em; }
/* the pages */
.drawer__panel .drawer__list--pages a{ min-height:var(--space-15); color:var(--walnut); }
.drawer__panel .drawer__list--pages a:hover,.drawer__panel .drawer__list--pages a:focus-visible{ text-decoration:none; color:var(--ink); }
/* the foot: Book Now alone, at the site's 46 (the phone's 40 looked thin at full width) */
.drawer__foot{ display:grid; margin-block-start:auto; padding-block-start:var(--space-10); }
html .drawer__foot .drawer__book{ width:100%; height:46px; min-height:46px; }
/* opening */
@keyframes drawer-veil{ from{ opacity:0; } }
@keyframes drawer-panel{ from{ opacity:0; transform:translateX(calc(-1 * var(--space-6))); } }
@keyframes drawer-row{ from{ opacity:0; transform:translateY(var(--space-3)); } }
.drawer:not([hidden]){ animation:drawer-veil 300ms ease both; }
.drawer:not([hidden]) .drawer__panel{ animation:drawer-panel 450ms var(--ease) both; }
.drawer:not([hidden]) :is(.drawer__toggle,.drawer__list--pages li,.drawer__foot){ animation:drawer-row 500ms var(--ease) both; animation-delay:calc(120ms + var(--r, 0) * 45ms); }
.drawer__list--pages li:nth-child(1){ --r:1; } .drawer__list--pages li:nth-child(2){ --r:2; } .drawer__list--pages li:nth-child(3){ --r:3; }
.drawer__list--pages li:nth-child(4){ --r:4; } .drawer__list--pages li:nth-child(5){ --r:5; } .drawer__list--pages li:nth-child(6){ --r:6; }
.drawer__list--pages li:nth-child(7){ --r:7; } .drawer__list--pages li:nth-child(8){ --r:8; } .drawer__list--pages li:nth-child(9){ --r:9; }
.drawer__list--pages li:nth-child(n+10){ --r:10; } .drawer__foot{ --r:11; }
@media (prefers-reduced-motion:reduce){ .drawer:not([hidden]),.drawer:not([hidden]) .drawer__panel,.drawer:not([hidden]) :is(.drawer__toggle,.drawer__list--pages li,.drawer__foot){ animation:none; } }

/* ---------------------------------------------------------------- PHONE BUTTONS A LITTLE SMALLER (client 2026-10-15, to a3, the homepage Fort half at 400 with
   its Explore More / Book Now and the header Book Now: "reduce the button size a bit"). Under 768 every button is 40 tall (was 46),
   20 a side (was 26) and 13px (was 14); the header's Book Now keeps its 12px. Hover fill, rolling label and curve unchanged. */
@media (max-width:767px){
  html .btn,html .bw__book,html .header-actions .btn,html .half .half__btn{ height:var(--space-10); min-height:var(--space-10); padding-block:0;
    padding-inline:var(--space-5); font-size:13px; }   /* line 766 fixes every button at height 46: overridden here */
  html .header-actions .btn{ font-size:12px; }
}
/* ---------------------------------------------------------------- PHONE BUTTONS FILLED (client 2026-10-15, to a3: "make all the buttons in mobile
   view filled, no changes in desktop"). A phone has no hover, so under 768 every outline button rests in the state its hover rises
   to — its own fill: gold-ink with white on the light grounds, white with umber on the photographs (property halves, journal
   cards, the resort's villa band). Book Now is filled already and unchanged. Desktop and tablet unchanged. */
@media (max-width:767px){
  .btn:not(.btn--gold)::before{ transform:scaleY(1); }
  html .btn:not(.btn--gold),html .gcard .btn:not(.btn--gold),html .villas .offers__head .btn:not(.btn--gold),
  html .half .btn.half__btn:not([data-hotel]):not(.btn--gold){ color:var(--fill-ink); border-color:var(--fill); }
}

/* ---------------------------------------------------------------- ABOUT US: MISSION, VISION, VALUES AS TEXT (client 2026-10-19, to 1b: "remove
   the images from the about us page collage and add normal mission, vision and values text one below the other, no boxes,
   basically continuous paragraphs"). The three statements follow the intro in the same centred 860 reading column: each heading
   at the H3 size over its paragraph in paragraph grey, 40 between them (32 on phones); no frame, no lines, no photographs. */
.avals{ max-width:860px; margin-inline:auto; --align-x:center; }
.avals__h{ font-family:var(--font-display); font-weight:300; font-size:var(--d3); line-height:var(--d3-lh); color:var(--ink); }
.avals__item > .avals__h + p{ margin-block-start:var(--space-3); }
.avals__item p{ color:var(--text); }
.avals > .avals__item + .avals__item{ margin-block-start:var(--space-10); }
@media (max-width:767px){ .avals > .avals__item + .avals__item{ margin-block-start:var(--space-8); } }

/* ---------------------------------------------------------------- SITEMAP + 404 (61, build_seo.py; client 2026-10-19: "add sitemap here and create
   sitemap design, keep the navbar and footer same as other pages"). Both wear the inner-page frame (.pg: crumbs, centred title
   and intro). Sitemap: one white card per group (the Contact page's card: hairline, house curve), three across (two below 992,
   one on phones); a display-face heading over a hairline, then the pages as links — the name, and the long arrow sliding in on
   hover, gold-ink. 404: a large light "404" over the title, three buttons. */
/* → sitemap redesigned (client 2026-10-19, to d5: "redesign this, it's not looking nice and organized, like vedikant.com/sitemap.html"):
   one card per brand / property, three to a row and centred (so two sit side by side until the Fort's card arrives), cards in a row
   equal in height; in each, a small gold caps heading over a hairline, the card's home page as the lead link in the display face, then
   its pages as a list marked with gold dashes, each page's own pages indented under it a size smaller. Two to a row under 992, one on
   phones. */
.widget .pg__c > .smap{ margin-block-start:var(--sec-in); }
.smap{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-8); max-width:1200px; margin-inline:auto; }
.smap__card{ flex:0 1 calc((100% - 2 * var(--space-8)) / 3); min-width:0; padding:var(--space-8); background:var(--white);
  border:1px solid var(--line); border-radius:0 0 var(--curve) 0; }
.smap__eyebrow{ padding-block-end:var(--space-4); border-block-end:1px solid var(--line); font-family:var(--font-body); font-size:12px;
  font-weight:500; line-height:1.5; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); }
.smap__lead{ display:inline-block; margin-block-start:var(--space-5); font-family:var(--font-display); font-weight:300; font-size:22px;
  line-height:1.3; color:var(--ink); text-decoration:none; transition:color var(--dur) var(--ease); }
.smap__list{ display:grid; gap:var(--space-1); margin-block-start:var(--space-3); }
.smap__list a{ position:relative; display:inline-block; padding-block:var(--space-1); padding-inline-start:var(--space-6); color:var(--walnut);
  text-decoration:none; transition:color var(--dur) var(--ease); }
.smap__list a::before{ content:"\2013"; position:absolute; inset-inline-start:var(--space-1); color:var(--gold); }
.smap__sub{ display:grid; margin-block:0 var(--space-2); padding-inline-start:var(--space-6); }
.smap__sub a{ font-size:var(--sm); line-height:var(--sm-lh); }
.smap a:hover,.smap a:focus-visible{ color:var(--gold-ink); }
@media (max-width:991px){ .smap__card{ flex-basis:calc((100% - var(--space-8)) / 2); } }
@media (max-width:599px){ .smap{ gap:var(--space-4); } .smap__card{ flex-basis:100%; padding:var(--space-6); } }
.nf .pg__head{ padding-block:var(--space-8); }
.nf__code{ font-family:var(--font-display); font-weight:200; font-size:clamp(96px, 14vw, 180px); line-height:1; letter-spacing:.06em; color:var(--beige); }
.nf .pg__head > .nf__code + .pg__title{ margin-block-start:var(--space-4); }
.nf .nf__cta{ justify-content:center; }
/* 2026-10-19 — the lead forms wired to the Simplotel webform API (client: hotel 12781; contact 976774 / 8397, events 976788 / 8413).
   js/forms.js (the form-integration template) injects its own <style> for the field messages, the invalid border and the reCAPTCHA
   popup, in another hotel's green; these rules put them on the house palette — the message in .cform__err's face, the invalid border
   in the site's error red, the popup card with the house curve, ink title and gold rule. The template's logic is untouched; only its
   look is overridden. html-prefixed: the template's <style> is appended to <head> after this stylesheet's <link>, so order alone loses. */
html .ct-err{ margin:var(--space-2) 0 0; font-size:13px; line-height:1.4; color:#A3362A; }
html .ct-invalid{ border-color:#A3362A !important; }
html .cform__in.ct-invalid:focus{ box-shadow:0 0 0 3px rgba(163,54,42,.25); }
html .ct-modal{ background:rgba(46,31,20,.55); }
html .ct-modal-card{ border-radius:0 0 var(--curve) 0; padding:var(--space-8) var(--space-6) var(--space-6); background:var(--paper); box-shadow:0 22px 48px rgba(46,31,20,.32); }
html .ct-modal-title{ margin:0 0 var(--space-4); padding:0 var(--space-8); font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
html .ct-modal-close{ color:var(--ink); border-radius:0; }
html .ct-modal-close:hover,html .ct-modal-close:focus-visible{ background:var(--pale); outline:none; }
html .ct-modal-note{ margin:var(--space-3) 0 0; font-size:13px; color:var(--text); }
html .ct-modal-card::after{ content:""; display:block; width:var(--space-6); height:2px; margin:var(--space-4) auto 0; background:var(--gold); }
html .cform__status[style*="display: block"]{ display:block; }


/* ---------------------------------------------------------------- PRICE MAILER (client 2026-10-30, anantahotels.com/ananta-hotels-udaipur as the reference:
   "add this kind of email popup in the homepage, same timing and functionality, from the right side middle of the page"). Simplotel's
   server-configured delay / exit-intent email capture (tech-integration skill: src/simplotel-be.js + src/price-mailer.js build the
   markup; on / off, the delay and the POST target come from api.simplotel.com/content/<pid>/popups — OFF for 12781 today, B-30).
   Docked at the right edge, mid-height, sliding in from the edge: the site's own card — paper, a gold band along the top, the navy
   title and eyebrow, the gold button — with the × as a navy tab on the panel's left edge, as the reference's is. Only the title,
   the field, the button and the promise show (the template's sub-line and dates line are hidden, as on the reference). Under 600px
   a bottom sheet. z 36: above the offers pop-up (35), below the header (40) and the cookie bar (50). */
.pmail{ position:fixed; z-index:36; right:0; top:50%; translate:0 -50%; display:flex; align-items:center; pointer-events:none; }
.pmail__panel{ position:relative; pointer-events:auto; width:min(320px, calc(100vw - var(--space-10))); margin-inline-start:var(--space-8);
  padding:var(--space-5) var(--space-6) var(--space-4); background:var(--paper); color:var(--ink); border:1px solid var(--gold); border-top:3px solid var(--gold);
  border-right:0; border-radius:16px 0 0 0; box-shadow:0 14px 34px rgba(62,42,28,.18); animation:pmail-in 420ms var(--ease) both; }
@keyframes pmail-in{ from{ transform:translateX(100%); opacity:0; } to{ transform:none; opacity:1; } }
.pmail__close{ position:absolute; left:calc(-1 * var(--space-8)); top:0; width:var(--space-8); height:var(--space-8); display:grid; place-items:center; margin:0; padding:0;
  background:var(--logo-blue); color:var(--gold); border:0; border-radius:0 0 0 12px; font:300 22px/1 var(--font-body); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.pmail__close:hover,.pmail__close:focus-visible{ background:#24406A; color:#E8C77E; outline:none; }
.pmail__eyebrow{ display:inline-block; margin:0; padding-block-end:var(--space-1); border-bottom:1px solid var(--gold); color:var(--logo-blue);
  font-size:11px; font-weight:600; line-height:1.4; letter-spacing:.18em; text-transform:uppercase; }
.pmail__title{ margin:var(--space-3) 0 0; font-family:var(--font-display); font-weight:400; font-size:22px; line-height:1.25; color:var(--logo-blue); }
.pmail__sub,.pmail__dates{ display:none; }
.pmail__form{ margin-block-start:var(--space-4); }
.pmail__form label{ display:block; margin-block-end:var(--space-1); font-size:12px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--text); }
.pmail__form input{ display:block; width:100%; height:44px; margin:0; padding:0 var(--space-3); border:1px solid var(--line); border-radius:0; background:var(--white);
  color:var(--ink); font:400 15px/1.4 var(--font-body); }
.pmail__form input:focus-visible{ outline:2px solid var(--gold); outline-offset:0; }
.pmail__msg{ margin:var(--space-2) 0 0; font-size:13px; line-height:1.4; color:var(--text); }
.pmail__msg:empty{ display:none; }
.pmail__msg--error{ color:#9B2C2C; }
.pmail__submit{ display:inline-flex; align-items:center; justify-content:center; width:100%; height:46px; margin:var(--space-3) 0 0; padding:0 var(--space-5);
  background:var(--gold); color:var(--umber); border:1px solid var(--gold); border-radius:0 0 16px 0; font:600 12px/1 var(--font-body); letter-spacing:.18em;
  text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pmail__submit:hover,.pmail__submit:focus-visible{ background:#D5AC59; border-color:#B5924C; outline:none; }
.pmail__submit[disabled]{ opacity:.7; cursor:default; }
.pmail__fine{ margin:var(--space-3) 0 0; font-size:12px; line-height:1.4; color:var(--text); text-align:center; --align-x:center; }
@media (max-width:599px){
  .pmail{ inset:auto 0 0 0; translate:none; display:block; }
  .pmail__panel{ width:100%; margin:0; border-right:1px solid var(--gold); border-left:0; border-radius:16px 16px 0 0; animation-name:pmail-up; }
  .pmail__close{ left:auto; right:0; top:calc(-1 * var(--space-8)); border-radius:12px 0 0 0; }
  @keyframes pmail-up{ from{ transform:translateY(100%); opacity:0; } to{ transform:none; opacity:1; } }
}
@media (prefers-reduced-motion:reduce){ .pmail__panel{ animation:none; } }

/* VENDOR START swiper 11 (MIT) */
/**
 * Swiper 11.2.10
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 28, 2025
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
/* VENDOR END */