/* ==========================================================================
   Hotel Perfect Plaza — the stylesheet
   --------------------------------------------------------------------------
   The whole look lives here: no framework, no build step.

   A warm light page, dark type, one accent colour (the logo's red) and
   softly rounded photographs — the way a real hotel presents itself.

   The hero is the one coloured place: the hotel's own film behind a pane
   of sky-blue glass, with light frosted pills and cards on it. Glass is
   used only there, where there is a moving picture behind it to frost;
   anywhere else it reads as a flat grey box.
   ========================================================================== */

/* ----------------------------------------------------------------- TOKENS */

:root {
  --paper:   #FAF7F2;   /* the page */
  --paper-2: #F3EEE6;   /* alternate sections */
  --card:    #FFFFFF;
  --ink:     #1F1B17;   /* headings, strong text */
  --ink-2:   #4A433B;   /* body text — 9:1 on --paper */
  --ink-3:   #6B6258;   /* quieter text — 5:1 on --paper-2 */
  --rule:    #E4DCD0;
  --rule-2:  #CFC4B4;   /* input borders */

  --accent:   #BB3E3B;  /* the logo's own red — white on it is 5.4:1, it on --paper 5.1:1 */
  --accent-2: #9E302D;
  --gold:     #B08D3C;  /* the lotus mark and fine details only, never body text */

  --night:     #0C2850; /* the hero's ground under the photograph: deep ocean blue */
  --night-ink: #F3EEE6;
  --night-ink-2: rgba(243, 238, 230, .76);
  --sky-ink:   #0E2747; /* navy type on the hero's light frost */
  --sky-ink-2: #24426A; /* its quieter type — 4.8:1 or better on the frost at its darkest */
  --sky-blue:  #1B5BCF; /* the hero's glowing blue: the chosen tab, the play button — white on it 6:1 */
  --tint:      6 74 152; /* the hero glass's azure, as "r g b" for rgb(var(--tint) / alpha) */
  --tint-deep: 4 52 128; /* the same azure, deeper: the bands behind white type */

  --display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --deva:    "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif;

  --radius: 12px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* The hero's glass frame. The masthead is laid out on the same numbers,
     so that over the hero it sits inside the frame. */
  --frame-x:   clamp(.625rem, 4.5vw - .5rem, 4.5rem);  /* screen edge to frame */
  --frame-y:   clamp(.625rem, 2vw, 1.75rem);           /* top of screen to frame */
  --frame-pad: clamp(1rem, 3vw, 3rem);                 /* frame edge to its content */
  --frame-max: 78rem;
  --nav-h:     4.5rem;                                 /* the masthead's height */

  color-scheme: light;
}
@media (max-width: 1023px) { :root { --nav-h: 4rem; } }

/* ------------------------------------------------------------ FOUNDATION */

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"] { list-style: none; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* An inline <svg> with no size falls back to 300×150. This gives icons a
   sane floor; :where() keeps it at zero specificity so any class wins. */
:where(svg:not([width])) { width: 1.25em; height: 1.25em; flex: none; }

/* The one thing that must stay hidden whatever else sets `display`. */
[hidden] { display: none !important; }

main > section { position: relative; overflow-x: clip; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip {
  position: fixed; left: 50%; top: .75rem; z-index: 300;
  translate: -50% -160%;
  padding: .7rem 1.2rem; border-radius: 4px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: .9rem;
  transition: translate .25s var(--ease);
}
.skip:focus { translate: -50% 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* on the hero's blue glass and the dark footer the red ring is too faint */
.hero :focus-visible, .footer :focus-visible,
.masthead:not(.is-stuck) :focus-visible { outline-color: var(--night-ink); }
/* A section link (main.js) moves focus to the section itself, to take
   keyboard and screen-reader users there. That marks their place on the
   page; a ring round the whole section would only be noise. */
main:focus, main > section:focus { outline: none; }

.wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .wrap { padding-inline: 2rem; } }

.deva { font-family: var(--deva); }

/* ------------------------------------------------------------- TYPOGRAPHY */

.h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 1.55rem + 1.7vw, 2.9rem);
  line-height: 1.1; letter-spacing: -.005em;
  color: var(--ink); text-wrap: balance;
}
.h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.5rem; line-height: 1.2; color: var(--ink);
}
.label {
  margin-bottom: .6rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.prose { margin-top: 1.4rem; }
.prose p { font-size: 1.05rem; line-height: 1.75; }
.prose p + p { margin-top: 1em; }

.textlink {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  color: var(--accent); font-size: .92rem; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.textlink:hover { color: var(--accent-2); }
.textlink svg { width: 1.05em; height: 1.05em; }

/* ----------------------------------------------------------------- BUTTONS */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.3rem;
  border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent); color: #fff;
  font-size: .92rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(187, 62, 59, .55);
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn svg { width: 1.05em; height: 1.05em; }

.btn--lg { padding: .9rem 1.55rem; font-size: .98rem; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- MASTHEAD */

/* Over the hero the bar sits inside the glass frame: same width, same inner
   padding, and as far from the top of the screen as the frame is. Once the
   page scrolls it rises to the top and turns into a white bar; its content
   stays where it was, so nothing jumps sideways. */
.masthead {
  position: fixed; inset: 0 0 auto; z-index: 100;
  top: var(--frame-y);
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: top .3s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.masthead.is-stuck,
.masthead:has([aria-expanded="true"]) {
  top: 0;
  background: #fff; color: var(--ink); border-bottom-color: var(--rule);
}
/* Once scrolled, the bar frosts over the page instead of hiding it. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .masthead.is-stuck {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
  }
}
.masthead__bar {
  display: flex; align-items: center; gap: 1.25rem;
  width: min(100% - 2 * var(--frame-x), var(--frame-max)); height: var(--nav-h);
  margin-inline: auto; padding-inline: var(--frame-pad);
}
/* Wide screens: logo | the links, centred | phone and "Book now". */
@media (min-width: 1024px) {
  .masthead__bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; }
}

.brand { display: flex; align-items: center; gap: .65rem; margin-right: auto; }
/* The real logo, on its own white card so it reads the same over the blue
   hero, the white scrolled header, and the drawer. alt="" here: the anchor
   already carries the accessible name, and the footer's copy repeats it
   for anyone who lands lower on the page first. */
.brand__logo { height: 2.5rem; width: auto; display: block; border-radius: 6px; }
.brand__tag { font-size: .72rem; opacity: .72; white-space: nowrap; }
:where(.masthead:not(.is-stuck)) .brand__tag { opacity: 1; text-shadow: 0 0 10px rgba(4, 30, 84, .7); }
/* the links need the room between 1024 and 1280 — measured in em, so a
   larger browser font hides it over a wider range, before it runs into
   "Home" */
@media (min-width: 1024px) and (max-width: 79.99em) { .brand__tag { display: none; } }

.masthead__nav { display: none; gap: 1.9rem; font-size: .9rem; }
@media (min-width: 1024px) { .masthead__nav { display: flex; } }
.navlink { position: relative; padding: .3rem 0; opacity: .78; white-space: nowrap; transition: opacity .2s; }
/* over the blue glass the links need a little more presence, and a halo */
:where(.masthead:not(.is-stuck)) .navlink { opacity: .96; text-shadow: 0 0 10px rgba(4, 30, 84, .6), 0 1px 2px rgba(4, 30, 84, .45); }
/* over the hero, the current link's bar is lit */
.masthead:not(.is-stuck) .navlink::after { background: #BFE6FF; box-shadow: 0 0 10px rgba(120, 210, 255, .8); }
.navlink:hover { opacity: 1; }
/* The section in view (ui.js): a short bar under the link. */
.navlink[aria-current="true"] { opacity: 1; }
.navlink::after {
  content: ""; position: absolute; left: 50%; bottom: -.7rem;
  width: 1.6rem; height: 2px; border-radius: 2px; translate: -50% 0;
  background: currentColor; opacity: 0; transition: opacity .25s;
}
.navlink[aria-current="true"]::after { opacity: 1; }

.masthead__end { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }

/* The phone, as a pill — glass over the hero, outlined on the white bar. */
.masthead__tel {
  display: none; align-items: center; gap: .45rem;
  padding: .5rem .95rem; border-radius: 999px;
  border: 1px solid rgba(214, 236, 255, .5); background: rgb(var(--tint) / .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  font-size: .86rem; white-space: nowrap;
  text-shadow: 0 0 10px rgba(4, 30, 84, .6);
  transition: background-color .2s, border-color .2s;
}
.masthead__tel:hover { background: rgb(var(--tint) / .36); border-color: #fff; }
.masthead__tel svg { width: .95rem; height: .95rem; }
@media (min-width: 1200px) { .masthead__tel { display: inline-flex; } }
.is-stuck .masthead__tel { border-color: var(--rule-2); background: transparent; box-shadow: none; text-shadow: none; }
.is-stuck .masthead__tel:hover { border-color: var(--accent); color: var(--accent); }

/* "Book now": a white pill over the hero, the red one on the white bar. */
.masthead__book { display: none; border-radius: 999px; padding: .6rem 1.2rem; }
@media (min-width: 640px) { .masthead__book { display: inline-flex; } }
.masthead:not(.is-stuck) .masthead__book { background: #fff; border-color: #fff; color: var(--sky-ink); box-shadow: 0 10px 28px -12px rgba(110, 185, 255, .75); }
.masthead:not(.is-stuck) .masthead__book:hover { background: rgba(255, 255, 255, .86); }
/* With the phone menu open at the top of the page the masthead is the white
   bar without being .is-stuck: none of the over-hero looks above apply. */
.masthead:has([aria-expanded="true"]) .brand__tag { opacity: .72; text-shadow: none; }
.masthead:has([aria-expanded="true"]) .masthead__book { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px rgba(187, 62, 59, .55); }
.masthead:has([aria-expanded="true"]) .masthead__book:hover { background: var(--accent-2); border-color: var(--accent-2); }
.masthead:has([aria-expanded="true"]) :focus-visible { outline-color: var(--accent); }

.burger {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  border: 1px solid currentColor; border-radius: 50%; background: transparent;
  cursor: pointer; opacity: .9;
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger__bars, .burger__bars::before, .burger__bars::after {
  content: ""; display: block; width: 18px; height: 1.5px; background: currentColor;
  transition: transform .25s var(--ease), background-color .25s;
}
.burger__bars::before { transform: translateY(-6px); }
.burger__bars::after  { transform: translateY(4.5px); }
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after  { transform: rotate(-45deg) translateY(-1.5px); }

.drawer {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 6rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
  background: #fff;
}
.drawer__nav { display: flex; flex-direction: column; }
.drawer__link {
  padding: .7rem 0; border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-size: 1.9rem; font-weight: 600; color: var(--ink);
}
.drawer__foot { display: grid; gap: .9rem; }
.drawer__tel { text-align: center; font-size: .95rem; color: var(--ink-2); }

/* ---------------------------------------------------------------------- HERO
   A glass window over the hotel's film. The film (or, before it arrives,
   the lobby photograph) fills the hero; the frame is a tinted pane inset
   from the screen's edges, so the film shows through it and around it. In
   the frame, from the top: the masthead, the heading, the availability bar,
   the switch and its row of cards, and the facts. */

.hero {
  position: relative; isolation: isolate;
  overflow: hidden; overflow: clip;   /* clip, not hidden: hidden would stop the film sticking */
  padding-block: var(--frame-y);
  background: var(--night); color: rgba(255, 255, 255, .84);
}

/* The grade over the photograph and the film alike: one definition, so
   nothing about the frame changes when the film fades in. Light — the frame
   carries the shade — a cool cast and a soft blue vignette, so around the
   frame the film looks nearly as it was shot. */
.hero {
  --hero-grade:
    radial-gradient(120% 90% at 50% 40%, rgba(8, 36, 78, 0) 30%, rgba(8, 36, 78, .36) 100%),
    linear-gradient(rgba(36, 104, 190, .1), rgba(36, 104, 190, .1));
}

/* The photograph and the film each hold one screen's height and stick to
   the top while the hero scrolls past, rather than stretching to the whole
   hero: a 720p film enlarged to fill a hero taller than the screen would
   blur. */
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img {
  position: sticky; top: 0;
  width: 100%; height: 100vh; object-fit: cover; object-position: 55% 50%;
  animation: hero-drift 24s ease-in-out infinite alternate;
  /* The lobby is shot brighter than the film (its ceiling is all lights):
     brought down to the film's level, so the light glass reads the same
     over either — and stays legible for those who only ever see this. */
  filter: brightness(.85);
}
@keyframes hero-drift { from { transform: scale(1.02); } to { transform: scale(1.08); } }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--hero-grade); }

/* Hidden until film.js has the loop actually playing, then faded in over
   the photograph, which fades out beneath it. Absolutely placed against the
   hero itself: neither the frame nor the window is positioned here. */
.hero__film {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 1.8s var(--ease);
}
.hero.has-film .hero__film { opacity: 1; }
.hero__film video {
  position: sticky; top: 0; display: block;
  width: 100%; height: 100vh; object-fit: cover; object-position: 50% 50%;
}
.hero__bg { transition: opacity 1.2s var(--ease); }
.hero.has-film .hero__bg { opacity: 0; }
.hero__scrim { position: absolute; inset: 0; background: var(--hero-grade); }

/* On wide screens the window takes no room; see HERO ON PHONES. */
.hero__window { display: contents; }

/* The frame: a pane of sky-blue glass. A saturated blue rather than a grey
   smoke, so the film keeps its colour and light behind it — blue has little
   luminance of its own, so white type keeps its contrast even over the
   film's brightest rooms. Azure rather than a violet blue, which turned
   the warm cream rooms lavender. A light rim, a sheen at the top corner
   and a cool glow round the edge. Tinted, not blurred: a backdrop blur here would also stop the
   cards inside it frosting the film (they would only see the tint). */
.hero__frame {
  width: min(100% - 2 * var(--frame-x), var(--frame-max));
  margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(1.75rem, 4vw, 3.5rem)) var(--frame-pad) clamp(1.5rem, 2.4vw, 2.25rem);
  border: 1px solid rgba(206, 232, 255, .5);
  border-radius: clamp(20px, 2.4vw, 32px);
  /* One even wash, deeper only at the top edge where the links sit. The
     extra shade behind the other white type is not painted here but
     attached to that type (.hero__head::before and the two below it), so it
     moves with it at any width or font size and never crosses the pane as a
     stripe. */
  background:
    linear-gradient(115deg, rgba(235, 245, 255, .1) 0%, rgba(235, 245, 255, 0) 22%),
    linear-gradient(180deg,
      rgb(var(--tint-deep) / .66) 0,
      rgb(var(--tint-deep) / .63) 4.5rem,          /* the links */
      rgb(var(--tint-deep) / .6) 6rem,
      rgb(var(--tint-deep) / .55) 7.75rem,
      rgb(var(--tint) / .52) 9.5rem,
      rgb(var(--tint) / .48) 11.5rem,
      rgb(var(--tint) / .46) 14rem,
      rgb(var(--tint) / .46) calc(100% - 9rem),
      rgb(var(--tint) / .5) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 0 70px rgba(130, 195, 255, .14),
    0 0 0 1px rgba(120, 190, 255, .14),
    0 0 50px -6px rgba(90, 170, 255, .35),
    0 40px 120px -40px rgba(8, 44, 104, .7);
}

/* Shade that follows the white type: behind the headline and lede, the
   row's label and the facts, soft-edged panels of the deeper azure. They
   sit with the film, under the frame's wash (z-index -1 in the hero, which
   isolates), so the frosted pieces still see the film through them; and
   they are anchored to the type itself, so they stay behind it at any
   width or font size. Their soft edges are masks on the panels alone —
   never on anything that holds glass. Phones and tablets do without: there
   the type sits over the soft ground, not the film. */
.hero__head, .deck__head, .strip { position: relative; }
.hero__head::before, .deck__head::before, .strip::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: rgb(var(--tint-deep) / .45);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* Each panel's edges ease out over a long distance (a smooth curve, not a
   straight ramp, whose ends would show as lines), so on a plain wall no
   shape can be made out — only the glass deepening where the words are.
   --fx and --fy are the fade lengths across and down. */

/* behind the headline and the lede: the solid middle covers the lede (36rem
   wide) even when a large browser font makes it nearly frame-wide */
.hero__head::before {
  --fx: clamp(2rem, (100% - 38rem) / 2, 16rem);
  --fy: 8rem;
  top: calc(5rem - var(--fy)); bottom: calc(0rem - var(--fy));
  inset-inline: calc((100% - min(76rem, 100vw - 2 * var(--frame-x) - 3rem)) / 2);
  -webkit-mask-image:
      linear-gradient(90deg, transparent 0, rgb(0 0 0 / .1) calc(var(--fx) * .2), rgb(0 0 0 / .35) calc(var(--fx) * .4), rgb(0 0 0 / .65) calc(var(--fx) * .6), rgb(0 0 0 / .9) calc(var(--fx) * .8), #000 var(--fx), #000 calc(100% - var(--fx)), rgb(0 0 0 / .9) calc(100% - var(--fx) * .8), rgb(0 0 0 / .65) calc(100% - var(--fx) * .6), rgb(0 0 0 / .35) calc(100% - var(--fx) * .4), rgb(0 0 0 / .1) calc(100% - var(--fx) * .2), transparent 100%),
      linear-gradient(180deg, transparent 0, rgb(0 0 0 / .1) calc(var(--fy) * .2), rgb(0 0 0 / .35) calc(var(--fy) * .4), rgb(0 0 0 / .65) calc(var(--fy) * .6), rgb(0 0 0 / .9) calc(var(--fy) * .8), #000 var(--fy), #000 calc(100% - var(--fy)), rgb(0 0 0 / .9) calc(100% - var(--fy) * .8), rgb(0 0 0 / .65) calc(100% - var(--fy) * .6), rgb(0 0 0 / .35) calc(100% - var(--fy) * .4), rgb(0 0 0 / .1) calc(100% - var(--fy) * .2), transparent 100%);
          mask-image:
      linear-gradient(90deg, transparent 0, rgb(0 0 0 / .1) calc(var(--fx) * .2), rgb(0 0 0 / .35) calc(var(--fx) * .4), rgb(0 0 0 / .65) calc(var(--fx) * .6), rgb(0 0 0 / .9) calc(var(--fx) * .8), #000 var(--fx), #000 calc(100% - var(--fx)), rgb(0 0 0 / .9) calc(100% - var(--fx) * .8), rgb(0 0 0 / .65) calc(100% - var(--fx) * .6), rgb(0 0 0 / .35) calc(100% - var(--fx) * .4), rgb(0 0 0 / .1) calc(100% - var(--fx) * .2), transparent 100%),
      linear-gradient(180deg, transparent 0, rgb(0 0 0 / .1) calc(var(--fy) * .2), rgb(0 0 0 / .35) calc(var(--fy) * .4), rgb(0 0 0 / .65) calc(var(--fy) * .6), rgb(0 0 0 / .9) calc(var(--fy) * .8), #000 var(--fy), #000 calc(100% - var(--fy)), rgb(0 0 0 / .9) calc(100% - var(--fy) * .8), rgb(0 0 0 / .65) calc(100% - var(--fy) * .6), rgb(0 0 0 / .35) calc(100% - var(--fy) * .4), rgb(0 0 0 / .1) calc(100% - var(--fy) * .2), transparent 100%);
}
/* behind the row's label: deepest at the frame's left edge, easing away to
   the right and up and down (under the switch and the cards, which are
   frost). It never reaches past the frame's edge. */
.deck__head::before {
  --fy: 8rem;
  top: calc(0rem - var(--fy)); bottom: calc(0rem - var(--fy));
  left: calc(-1 * var(--frame-pad)); width: min(60rem, 90%);
  -webkit-mask-image:
      linear-gradient(90deg, #000 0, #000 30%, rgb(0 0 0 / .9) 44%, rgb(0 0 0 / .65) 58%, rgb(0 0 0 / .35) 72%, rgb(0 0 0 / .1) 86%, transparent 100%),
      linear-gradient(180deg, transparent 0, rgb(0 0 0 / .1) calc(var(--fy) * .2), rgb(0 0 0 / .35) calc(var(--fy) * .4), rgb(0 0 0 / .65) calc(var(--fy) * .6), rgb(0 0 0 / .9) calc(var(--fy) * .8), #000 var(--fy), #000 calc(100% - var(--fy)), rgb(0 0 0 / .9) calc(100% - var(--fy) * .8), rgb(0 0 0 / .65) calc(100% - var(--fy) * .6), rgb(0 0 0 / .35) calc(100% - var(--fy) * .4), rgb(0 0 0 / .1) calc(100% - var(--fy) * .2), transparent 100%);
          mask-image:
      linear-gradient(90deg, #000 0, #000 30%, rgb(0 0 0 / .9) 44%, rgb(0 0 0 / .65) 58%, rgb(0 0 0 / .35) 72%, rgb(0 0 0 / .1) 86%, transparent 100%),
      linear-gradient(180deg, transparent 0, rgb(0 0 0 / .1) calc(var(--fy) * .2), rgb(0 0 0 / .35) calc(var(--fy) * .4), rgb(0 0 0 / .65) calc(var(--fy) * .6), rgb(0 0 0 / .9) calc(var(--fy) * .8), #000 var(--fy), #000 calc(100% - var(--fy)), rgb(0 0 0 / .9) calc(100% - var(--fy) * .8), rgb(0 0 0 / .65) calc(100% - var(--fy) * .6), rgb(0 0 0 / .35) calc(100% - var(--fy) * .4), rgb(0 0 0 / .1) calc(100% - var(--fy) * .2), transparent 100%);
}
/* the facts: easing in well above them, down to the frame's rounded foot */
.strip::before {
  --fy: 7.5rem;
  top: calc(-1.25rem - var(--fy)); bottom: calc(-1 * clamp(1.5rem, 2.4vw, 2.25rem)); inset-inline: calc(-1 * var(--frame-pad));
  border-radius: 0 0 calc(clamp(20px, 2.4vw, 32px) - 1px) calc(clamp(20px, 2.4vw, 32px) - 1px);
  background: rgb(var(--tint-deep) / .32);
  -webkit-mask-image:
      linear-gradient(180deg, transparent 0, rgb(0 0 0 / .1) calc(var(--fy) * .2), rgb(0 0 0 / .35) calc(var(--fy) * .4), rgb(0 0 0 / .65) calc(var(--fy) * .6), rgb(0 0 0 / .9) calc(var(--fy) * .8), #000 var(--fy));
          mask-image:
      linear-gradient(180deg, transparent 0, rgb(0 0 0 / .1) calc(var(--fy) * .2), rgb(0 0 0 / .35) calc(var(--fy) * .4), rgb(0 0 0 / .65) calc(var(--fy) * .6), rgb(0 0 0 / .9) calc(var(--fy) * .8), #000 var(--fy));
}
@media (max-width: 1023px) {
  .hero__head::before, .deck__head::before, .strip::before { display: none; }
}

/* Frosted glass, for everything that sits on the frame: the tour button,
   the availability bar, the switch, the arrows and the cards. White frost
   with a blue cast — the film's colour comes through it, blurred and
   lifted — and navy type, which stays legible whatever the film is
   showing. The place pill is part of a white line of type, so it is the
   one piece of deep-blue glass. A solid fallback first, for browsers
   without backdrop-filter. */
.hero__tour, .booking, .seg, .deck__btn, .tcard, .tcard__tag, .tcard__go {
  background: rgba(236, 244, 255, .95);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 #fff, 0 12px 32px -18px rgba(6, 34, 90, .6);
  color: var(--sky-ink);
}
.pill {
  background: rgb(5 60 132 / .92);
  border: 1px solid rgba(214, 236, 255, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  color: #fff;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero__tour, .booking, .seg, .deck__btn, .tcard, .tcard__tag, .tcard__go {
    background: linear-gradient(180deg, rgba(246, 250, 255, .74), rgba(228, 239, 255, .64));
    -webkit-backdrop-filter: blur(22px) saturate(150%) brightness(1.15);
            backdrop-filter: blur(22px) saturate(150%) brightness(1.15);
  }
  .pill {
    background: rgb(var(--tint) / .42);
    -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(.72);
            backdrop-filter: blur(16px) saturate(160%) brightness(.72);
  }
  /* over the brightest rooms the phone pill has to frost the film, not
     just tint it */
  .masthead:not(.is-stuck) .masthead__tel {
    -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(.9);
            backdrop-filter: blur(16px) saturate(150%) brightness(.9);
  }
  /* the tag and the arrow sit on a photograph: thinner frost turned grey on
     a night shot and pink on a red wall */
  .tcard__tag, .tcard__go { background: rgba(248, 251, 255, .94); }
}

/* ...................................................... heading */

.hero__head {
  display: flex; flex-direction: column; align-items: center;
  max-width: 48rem; margin-inline: auto; text-align: center;
}

/* "Watch the hotel tour": a pill above the heading. */
.hero__tour {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .3rem 1rem .3rem .3rem; border-radius: 999px;
  font-size: .88rem; font-weight: 500;
  transition: border-color .2s;
}
.hero__tour:hover { border-color: #fff; }
/* a bead of glowing blue — the same as the switch's chosen tab */
.hero__tour-play {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: none;
  border-radius: 50%; color: #fff;
  /* a fixed highlight over a colour that changes: swapping the gradient
     itself would flash the button pale as it faded */
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)) var(--sky-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 12px -2px rgba(27, 91, 207, .7);
  transition: background-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.hero__tour-play svg { width: .85rem; height: .85rem; margin-left: .1rem; }
.hero__tour:hover .hero__tour-play { background-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 12px -2px rgba(187, 62, 59, .6); transform: scale(1.06); }
.hero__tour-time { margin-left: .3rem; color: var(--sky-ink-2); font-variant-numeric: tabular-nums; }

.hero__title {
  margin-top: 1.4rem;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.4rem); line-height: 1.04; letter-spacing: -.035em;
  color: #fff; text-wrap: balance;
  text-shadow: 0 2px 22px rgba(4, 30, 84, .5), 0 0 48px rgba(110, 190, 255, .22);
}
/* White type straight on the frame carries a soft navy halo: over the
   film's brightest rooms it is what keeps it readable. */
.hero__lede {
  max-width: 36rem; margin-top: 1.1rem;
  font-size: 1rem; line-height: 1.65; color: #fff;
  text-shadow: 0 0 10px rgba(4, 30, 84, .6), 0 1px 2px rgba(4, 30, 84, .45);
}

/* A short, quiet entrance. CSS, so nothing can be left stuck invisible if a
   script fails. Only on things that are glass themselves or hold no glass:
   while an element fades, glass inside it cannot see past it. */
@keyframes rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
.hero-in { animation: rise .8s var(--ease) both; }
.hero-in--1 { animation-delay: .1s; }
.hero-in--2 { animation-delay: .2s; }
.hero-in--3 { animation-delay: .32s; }
.hero-in--4 { animation-delay: .44s; }
.hero-in--5 { animation-delay: .56s; }

/* ............................................ the availability bar */

/* One pill on wide screens: check-in | check-out | guests | the button. */
.booking {
  display: grid; grid-template-columns: 1fr 1fr .7fr auto; align-items: center;
  max-width: 50rem; margin: 2rem auto 0; padding: .45rem .45rem .45rem .6rem;
  border-radius: 999px;
}
.booking .field-min { gap: .1rem; padding: .3rem 1.1rem; }
.booking .field-min + .field-min { border-left: 1px solid rgba(14, 39, 71, .12); }
.booking .field-min label {
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sky-ink-2);
}
.booking .field-min input {
  color-scheme: light;
  padding: .1rem 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--sky-ink); font-size: .95rem;
}
.booking .field-min input:focus { box-shadow: 0 0 0 2px var(--sky-blue); border-color: transparent; }
/* The one warm thing in the blue: the brand's red, as everywhere else on
   the page, with a soft glow of its own. */
.booking__go {
  border-radius: 999px; padding: .85rem 1.4rem;
  box-shadow: 0 10px 26px -10px rgba(187, 62, 59, .75), inset 0 1px 0 rgba(255, 255, 255, .22);
}
/* in the hero a white ring, a little heavier than the page's, to hold
   against the lighter pane — and navy on the white frost, where white
   would vanish */
.hero :focus-visible { outline-width: 3px; outline-color: #fff; }
.booking :focus-visible, .seg :focus-visible { outline-color: var(--sky-ink); }

/* ........................................... the switch and the cards */

.deck { margin-top: clamp(2rem, 4vw, 3rem); }
.deck:focus { outline: none; }       /* a section link (main.js) moves focus here */

/* Hidden until ui.js has wired it, like the facilities tabs: without the
   script all three rows simply show. */
.seg { display: none; }
.ui-ready .seg {
  display: flex; gap: .2rem; width: fit-content; max-width: 100%;
  margin-inline: auto; padding: .3rem; border-radius: 999px;
}
.seg__tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.15rem; border: 0; border-radius: 999px;
  background: none; color: var(--sky-ink);
  font-size: .88rem; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.seg__tab:hover { background: rgba(255, 255, 255, .55); }
/* the chosen tab: a bead of white, in the hero's blue, glowing faintly */
.seg__tab[aria-selected="true"] {
  background: #fff; color: var(--sky-blue);
  box-shadow: 0 1px 2px rgba(6, 34, 90, .18), 0 4px 16px -4px rgba(27, 91, 207, .55);
}
.seg__tab svg { width: 1rem; height: 1rem; }

.deck__panel { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.deck__panel:focus-visible { outline-offset: 6px; border-radius: 14px; }

.deck__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.deck__label {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem;
  font-size: 1.05rem; font-weight: 500; color: #fff;
  text-shadow: 0 0 10px rgba(4, 30, 84, .6), 0 1px 2px rgba(4, 30, 84, .45);
}
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem .35rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 500;
  text-shadow: none;
  transition: border-color .2s;
}
.pill:hover { border-color: #fff; }
.pill svg { width: .95rem; height: .95rem; }

.deck__nav { display: flex; gap: .5rem; flex: none; }
.deck__btn {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; cursor: pointer;
  transition: border-color .2s, opacity .2s;
}
.deck__btn:hover:not(:disabled) { border-color: #fff; }
.deck__btn:disabled {
  cursor: default; box-shadow: none;
  background: rgb(var(--tint) / .22); border-color: rgba(214, 236, 255, .35); color: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.deck__btn svg { width: 1.1rem; height: 1.1rem; }

/* The row runs out to the frame's edges, so the last card is cut by the
   glass itself — the cue that there is more to swipe. */
.deck__track {
  --card-w: clamp(15.5rem, 22vw, 19rem);
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w);
  gap: clamp(.85rem, 1.4vw, 1.25rem);
  /* room round the cards for their glow and shadow, which a scroller would
     clip: what fits above (the label's gap), more below; the row's place in
     the layout is unchanged */
  margin: -1rem calc(-1 * var(--frame-pad)) -2rem;
  padding: 1.25rem var(--frame-pad) 2.75rem;
  scroll-padding-inline: var(--frame-pad);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.deck__track::-webkit-scrollbar { display: none; }

/* A card: the photograph on top fading into the frost, a pill and an
   arrow over the photograph, then the name, a line, the chips and the
   price. The title's link is stretched over the whole card. */
.tcard {
  position: relative; display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden; scroll-snap-align: start;
  /* an ice rim and a soft cyan halo round each card */
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(160, 215, 255, .3), 0 0 24px -2px rgba(72, 178, 255, .38), 0 24px 50px -28px rgba(6, 34, 84, .75);
  transition: border-color .3s, box-shadow .3s, translate .3s var(--ease);
}
/* Two classes, to outweigh .frame__media's stone ground further down: the
   photograph has to fade into the glass, not into a cream band. */
.tcard .tcard__media { aspect-ratio: 16 / 11; background: none; }
.tcard__media img {
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  transition: transform .8s var(--ease);
}
/* a photograph that has not arrived: the lotus, in the frame's own light */
.tcard .frame__media.has-ph { background: rgba(14, 39, 71, .05); }

.tcard__tag, .tcard__go { position: absolute; top: .7rem; z-index: 1; }
.tcard__tag {
  left: .7rem; display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .6rem; border-radius: 999px;
  font-size: .74rem; font-weight: 500;
}
/* a fine navy edge on both, so they hold against a bright ceiling */
.tcard__tag, .tcard__go { box-shadow: 0 0 0 1px rgba(14, 39, 71, .16), 0 4px 12px -4px rgba(6, 34, 90, .45); }
.tcard__tag svg { width: .85rem; height: .85rem; }
.tcard__go {
  right: .7rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; transition: background-color .25s, color .25s;
}
.tcard__go svg { width: 1rem; height: 1rem; }

.tcard__body { display: flex; flex-direction: column; gap: .55rem; flex: 1; padding: .15rem 1.05rem 1.05rem; }
.tcard__title { font-size: 1.1rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--sky-ink); }
.tcard__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.tcard__link:focus-visible { outline: none; }
.tcard__link:focus-visible::after { outline: 2px solid var(--sky-blue); outline-offset: -2px; border-radius: 18px; }
.tcard__text { font-size: .83rem; line-height: 1.55; color: var(--sky-ink-2); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.chips li {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .26rem .6rem; border: 1px solid rgba(14, 39, 71, .14); border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  font-size: .74rem; color: var(--sky-ink); white-space: nowrap;
}
.chips svg { width: .9rem; height: .9rem; opacity: .85; }

.tcard__foot { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .15rem; margin-top: auto; padding-top: .6rem; color: var(--sky-ink); }
.tcard__foot strong { font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.tcard__foot span { font-size: .84rem; color: var(--sky-ink-2); }

@media (hover: hover) {
  .tcard:hover {
    border-color: #fff; translate: 0 -3px;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(160, 215, 255, .45), 0 0 18px -2px rgba(72, 178, 255, .6), 0 22px 44px -22px rgba(27, 91, 207, .75);
  }
  .tcard:hover .tcard__media img { transform: scale(1.04); }
  .tcard:hover .tcard__go { background: var(--sky-blue); border-color: var(--sky-blue); color: #fff; }
}

/* .............................................. the facts along the foot */

/* Five across on wide screens (in the reference design, the row of partner
   logos), three and two on tablets, two columns on phones. */
.strip {
  display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 1rem 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: clamp(1.25rem, 2.2vw, 1.75rem);
  border-top: 1px solid rgba(214, 236, 255, .26);
}
@media (max-width: 1023px) { .strip { grid-template-columns: repeat(3, auto); } }
.strip li {
  display: flex; align-items: center; gap: .6rem; font-size: .86rem; line-height: 1.35; color: #fff;
  text-shadow: 0 0 10px rgba(4, 30, 84, .6), 0 1px 2px rgba(4, 30, 84, .45);
}
.strip strong { font-weight: 600; }
.strip svg { width: 1.3rem; height: 1.3rem; filter: drop-shadow(0 0 6px rgba(150, 210, 255, .6)); }

/* ------------------------------------------------------- HERO ON PHONES
   Below 1024px a 16:9 film stretched behind an upright screen shows only a
   sliver of each shot, enlarged until it blurs. So here it plays in a
   window at the top of the frame instead — 4:3 on phones, 16:9 on tablets,
   sharp and nearly whole — with the film's opening shot as its cover until
   the loop starts. The lobby photograph becomes a soft, blue-washed ground
   behind the frame. */
@media (max-width: 1023px) {
  /* Here the type sits over the soft ground, not the film: the pane can be
     lighter and even, with no deeper patches behind the words. */
  .hero__frame {
    padding-top: var(--nav-h);
    background:
      linear-gradient(115deg, rgba(235, 245, 255, .08) 0%, rgba(235, 245, 255, 0) 22%),
      linear-gradient(180deg, rgb(var(--tint) / .46) 0%, rgb(var(--tint) / .36) 30%, rgb(var(--tint) / .42) 100%);
  }
  .hero__window {
    display: block; position: relative; overflow: hidden;
    aspect-ratio: 4 / 3; border-radius: 16px;
    background: #17406F url("../video/hotel-tour-poster.jpg") center / cover;
    box-shadow: 0 0 0 1px rgba(214, 236, 255, .42), 0 14px 34px -14px rgba(6, 34, 84, .7);
  }
  .hero__film { z-index: 0; }
  .hero__film video { position: absolute; inset: 0; height: 100%; }
  .hero__scrim { background: linear-gradient(180deg, rgba(10, 44, 96, 0) 60%, rgba(10, 44, 96, .28) 100%); }

  /* drained of the lobby's warm light, which turned the blue wash lavender,
     and brought down like the desktop photograph (brightness .85) */
  .hero__bg img { position: absolute; inset: 0; height: 100%; filter: blur(14px) grayscale(1) brightness(.85); transform: scale(1.12); animation: none; }
  .hero__bg::after { background: rgba(12, 62, 132, .44); }
  .hero.has-film .hero__bg { opacity: 1; }

  .hero__head { margin-top: 1.6rem; }
  .hero__title { margin-top: 1.1rem; }
  .hero__lede { font-size: .97rem; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hero__window { aspect-ratio: 16 / 9; }
}

/* The availability bar as a small card below 768px: two fields to a row. */
@media (max-width: 767px) {
  .booking {
    grid-template-columns: 1fr 1fr; align-items: end; gap: .8rem .7rem;
    margin-top: 1.6rem; padding: 1rem; border-radius: 18px;
  }
  .booking .field-min { padding: 0; gap: .35rem; }
  .booking .field-min + .field-min { border-left: 0; }
  .booking .field-min input {
    padding: .6rem .7rem; border: 1px solid rgba(14, 39, 71, .16); border-radius: 10px;
    background: rgba(255, 255, 255, .66);
  }
  .booking .field-min input:focus { border-color: var(--sky-blue); box-shadow: 0 0 0 3px rgb(27 91 207 / .3); }
  .booking__go { width: 100%; padding: .8rem .6rem; border-radius: 10px; }
}

@media (max-width: 639px) {
  .deck__track { --card-w: min(78vw, 18rem); }
  .deck__label { font-size: 1rem; }
  /* the facts as two tidy columns */
  .strip { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
  .strip li { align-items: flex-start; font-size: .82rem; }
  .strip svg { width: 1.15rem; height: 1.15rem; }
}
/* the switch fits without its icons on narrow phones */
@media (max-width: 479px) {
  .seg__tab { padding-inline: .9rem; font-size: .85rem; }
  .seg__tab svg { display: none; }
}

.field-min { display: grid; gap: .35rem; min-width: 0; }
.field-min label, .field label { font-size: .84rem; font-weight: 600; color: var(--ink); }
.field-min input, .field input, .field select, .field textarea {
  width: 100%; min-width: 0;
  padding: .7rem .8rem;
  background: #fff; border: 1px solid var(--rule-2); border-radius: 8px;
  color: var(--ink); font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
/* Date fields on phones. iPhones otherwise shrink an empty date box to a
   sliver and ignore its width; Android squeezes "mm/dd/yyyy" against the
   calendar icon when two sit side by side. A fixed height, room for the
   icon, and a left-aligned value keep both tidy. 16px text stops an iPhone
   zooming the page when a field is tapped. */
@media (max-width: 639px) {
  input[type="date"] {
    -webkit-appearance: none; appearance: none;
    min-height: 2.9rem; padding-inline: .6rem .45rem;
    font-size: 1rem; text-align: left;
  }
  input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
  input[type="date"]::-webkit-calendar-picker-indicator { margin-left: .2rem; padding: 0; }
  .field input, .field select, .field textarea, .field-min input { font-size: 1rem; }
}

.field-min input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(187, 62, 59, .16);
}

/* ----------------------------------------------------------------- SECTIONS */

.section { padding-block: clamp(3.75rem, 2.75rem + 4vw, 6.5rem); }
.section--alt { background: var(--paper-2); }

.section__head { max-width: 44rem; margin-bottom: 2.5rem; }
.section__head--split { max-width: none; display: grid; gap: 1rem; }
@media (min-width: 1024px) {
  .section__head--split { grid-template-columns: 1fr auto; align-items: end; gap: 3rem; }
}
.section__note { max-width: 26rem; font-size: .95rem; color: var(--ink-3); }
.section__intro { margin-top: 1rem; font-size: 1.05rem; }

.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.split__media { aspect-ratio: 4 / 3; border-radius: var(--radius); }

.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink-2);   /* its own ink: it also sits on the coloured bands */
  box-shadow: 0 1px 2px rgba(31, 27, 23, .04), 0 12px 32px -20px rgba(31, 27, 23, .22);
  transition: box-shadow .3s var(--ease), translate .3s var(--ease);
}
.card .frame__media img { transition: transform .8s var(--ease); }
@media (hover: hover) {
  .place:hover { box-shadow: 0 2px 4px rgba(31, 27, 23, .05), 0 22px 44px -22px rgba(31, 27, 23, .32); }
  .place:hover .frame__media img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .card .frame__media img { transition: none; } }
.card__body { display: flex; flex-direction: column; gap: .65rem; padding: 1.35rem; flex: 1; }
.card__body > p { font-size: .95rem; }

/* --------------------------------------------------------------- IMAGERY */

.frame__media { position: relative; overflow: hidden; background: #E9E2D7; }
.frame__media img { width: 100%; height: 100%; object-fit: cover; }
img[data-failed] { visibility: hidden; }

/* A photograph that has not arrived yet (main.js adds .has-ph when an image
   fails to load): a plain stone-coloured frame with the lotus mark, small,
   rather than a broken-image icon. */
.frame__media.has-ph::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 22%; max-width: 110px; aspect-ratio: 64 / 40; height: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cg fill='none' stroke='%23B3A286' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 35C26.5 27.5 26.5 15.5 32 5.5c5.5 10 5.5 22 0 29.5Z'/%3E%3Cpath d='M31.6 35C24 33 18.6 25.2 17.6 13.8c8.4 2.2 13.4 10 14 21.2Z'/%3E%3Cpath d='M32.4 35C40 33 45.4 25.2 46.4 13.8c-8.4 2.2-13.4 10-14 21.2Z'/%3E%3Cpath d='M31 35.4C21.6 36.6 12.8 32 7.4 23.4c9-1.8 17.6 3 23.6 12Z'/%3E%3Cpath d='M33 35.4c9.4 1.2 18.2-3.4 23.6-12-9-1.8-17.6 3-23.6 12Z'/%3E%3Cpath d='M13 38.2h38'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------------- TABS */

/* Hidden until ui.js has wired them. Without the script they would be
   buttons that do nothing, over three panels that all show anyway. */
.tablist { display: none; }
.ui-ready .tablist {
  display: flex; gap: 1.75rem;
  border-bottom: 1px solid var(--rule-2);
  overflow-x: auto; scrollbar-width: none;
}
.tab {
  margin-bottom: -1px; padding: .8rem 0;
  border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--ink-3); font-size: .98rem; font-weight: 500; white-space: nowrap;
  cursor: pointer; transition: color .2s, border-color .2s;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* Phones: an underlined row of three tabs does not fit — the last one was
   cut off mid-word. Here they become pills that wrap onto a second line. */
@media (max-width: 639px) {
  .ui-ready .tablist { flex-wrap: wrap; gap: .5rem; border-bottom: 0; overflow: visible; }
  .tab {
    margin: 0; padding: .6rem 1rem;
    border: 1px solid var(--rule-2); border-radius: 999px;
    font-size: .92rem; color: var(--ink-2);
  }
  .tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
}

.panel { margin-top: 1.75rem; display: grid; }
@media (min-width: 1024px) { .panel { grid-template-columns: 1fr 1fr; } }
.panel__media { min-height: 240px; }
@media (min-width: 1024px) { .panel__media { min-height: 440px; } }
/* The restaurant's three photographs: the room across the top, two plates
   below, parted by fine gold lines. On phones it keeps a near-square shape,
   so the plates are not squeezed into slivers. */
.panel__mosaic {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 3fr 2fr; gap: 3px;
  background: var(--gold-bright, #D4AE5A);
}
.panel__mosaic .frame__media { min-height: 0; }
/* the photographs fill their tiles without setting the mosaic's height:
   the panel's text does, as it did for the single picture */
.panel__mosaic .frame__media img { position: absolute; inset: 0; }
.panel__mosaic-main { grid-column: 1 / -1; }
@media (max-width: 1023px) { .panel__mosaic { aspect-ratio: 1 / 1.05; min-height: 0; } }
@media (hover: hover) {
  .panel__mosaic .frame__media img { transition: transform .8s var(--ease); }
  .panel__mosaic .frame__media:hover img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .panel__mosaic .frame__media img { transition: none; } }
.panel__body { display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; padding: 1.6rem; }
@media (min-width: 640px) { .panel__body { padding: 2.5rem; } }
.panel__cta { align-self: flex-start; }
.ui-ready .panel { animation: panel-in .35s var(--ease); }
@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }

.hours { display: grid; }
.hours > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .65rem 0; border-bottom: 1px solid var(--rule);
}
.hours dt { font-size: .92rem; color: var(--ink-3); }
.hours dd { font-weight: 600; color: var(--ink); }
.hours--inline { grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.hours--inline > div { flex-direction: column; gap: .15rem; }

.ticks { display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.2rem; font-size: .95rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent);
}

/* ------------------------------------------------------------------ JANAKPUR */

/* The temple picture is wide, with towers at both ends, so it runs the full
   width at its own proportions — nothing is cropped — with the words below. */
.feature__media { aspect-ratio: 1048 / 558; }
.feature__body { display: grid; gap: 1.25rem; padding: 1.6rem; }
@media (min-width: 640px) { .feature__body { padding: 2.25rem 2.75rem 2.5rem; } }
@media (min-width: 1024px) { .feature__body { grid-template-columns: 1.2fr 1fr; gap: 3.5rem; align-items: center; } }
.feature__title { margin-bottom: .6rem; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); }
.feature__quote {
  padding-left: 1rem; border-left: 2px solid var(--gold);
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: 1.3rem; line-height: 1.35; color: var(--ink);
}

.places { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 640px)  { .places { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .places { grid-template-columns: repeat(3, 1fr); } }
.place__media { aspect-ratio: 16 / 10; }
.place .h3 { font-size: 1.35rem; }
.place .card__body > p { font-size: .93rem; }

/* The photographers' credits the Creative Commons licences require. */
.credits { margin-top: 1.5rem; font-size: .78rem; line-height: 1.6; color: var(--ink-3); }
.credits a { text-decoration: underline; text-underline-offset: 2px; }
.credits a:hover { color: var(--accent); }

/* ------------------------------------------------------------------- CONTACT */

.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.contact-side { display: flex; flex-direction: column; gap: 2rem; }

.contact-list { border-top: 1px solid var(--rule); }
.contact {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem;
  padding: .95rem 0; border-bottom: 1px solid var(--rule);
  transition: color .2s;
}
.contact:hover { color: var(--accent); }
.contact svg { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.contact__what { font-weight: 600; color: var(--ink); }
.contact:hover .contact__what { color: var(--accent); }
.contact__detail { font-size: .9rem; color: var(--ink-3); white-space: nowrap; }

/* The Mobile row: two numbers, each its own link, so the row itself is not
   a link and does not change colour on hover. */
.contact--multi:hover, .contact--multi:hover .contact__what { color: inherit; }
.contact__nums { font-size: .9rem; color: var(--ink-3); text-align: right; }
.contact__nums a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.contact__nums a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Phones: the number or address moves under its label rather than being
   hidden — on a phone it is exactly what the guest came for. After the
   rules above on purpose: it has to win over them. */
@media (max-width: 479px) {
  .contact { grid-template-columns: auto 1fr; row-gap: .15rem; }
  .contact svg { grid-row: 1 / span 2; align-self: start; margin-top: .15rem; }
  .contact__detail, .contact__nums { grid-column: 2; text-align: left; white-space: normal; font-size: .92rem; }
}

.getting { display: flex; flex-direction: column; gap: 1rem; }
.getting .h3 { font-size: 1.35rem; }
.routes { display: grid; gap: .85rem; }
.routes li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; font-size: .93rem; line-height: 1.6; }
.routes svg { width: 1.2rem; height: 1.2rem; margin-top: .2rem; color: var(--accent); }
.routes strong { font-weight: 600; color: var(--ink); }

.enquiry { padding: 1.5rem; }
@media (min-width: 640px) { .enquiry { padding: 2.25rem; } }
.enquiry__title { margin-bottom: 1.25rem; }
.enquiry__send { margin-top: 1.5rem; }

.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}
/* Phones: long fields full width, the short ones (dates, guests, room) two
   to a row — a shorter form with nothing cramped. */
@media (max-width: 639px) {
  .form-grid { grid-template-columns: 1fr 1fr; column-gap: .75rem; }
  .form-grid > .field { grid-column: 1 / -1; }
  .form-grid > .field--pair { grid-column: auto; }
}
.field { display: grid; gap: .4rem; min-width: 0; }
.field textarea { resize: vertical; }
.field__opt { font-weight: 400; color: var(--ink-3); }
.field__err { font-size: .84rem; color: #A3261B; }

/* main.js toggles .is-bad on each input's parent and rewrites the status
   line's whole className — which is why these are plain classes here. */
.field.is-bad input, .field.is-bad select { border-color: #B3261E; background: #FFF6F5; }
.form__status { margin-top: 1rem; min-height: 1.5em; text-align: center; font-size: .93rem; color: var(--ink-2); }
.form__status.is-ok  { color: #2E6A3A; }
.form__status.is-bad { color: #A3261B; }
.form__status .link  { color: var(--accent); text-decoration: underline; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------------- FOOTER */

.footer { background: var(--ink); color: rgba(243, 238, 230, .72); padding-bottom: 5rem; }
@media (min-width: 1024px) { .footer { padding-bottom: 0; } }
.footer__grid { display: grid; gap: 2.25rem; padding-block: 3.5rem; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer__logo { height: 2.75rem; width: auto; display: block; border-radius: 5px; }
.footer__tag { margin-top: .3rem; font-size: .85rem; }
.footer__addr { margin-top: 1.1rem; font-style: normal; font-size: .92rem; line-height: 1.7; }
.footer__addr .deva { font-size: 1.05rem; color: #E6D6A8; }
.footer__links { display: grid; align-content: start; gap: .6rem; font-size: .93rem; }
.footlink:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__mobiles a { white-space: nowrap; }
.footer__mobiles a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__legal {
  padding: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center; font-size: .82rem;
}

/* ------------------------------------------------- COLOUR BELOW THE HERO
   The hotel's own colours, section by section: warm ivory with a marigold
   glow for the welcome; the logo's sindoor red as a rich band for the
   restaurant and events; a dusk sky — the hero's azure deepening into
   temple wine — for Janakpur; marigold for the contact section; and deep
   indigo for the footer. Ornament is drawn from Mithila painting, the
   city's own art: a border band of triangles and dots, the scalloped edge,
   the lotus and the paired fish — fine line-work in temple gold, never
   pictures. All of it is CSS and inline SVG: nothing extra to download. */

:root {
  --sindoor-deep: #7E2226;
  --wine:         #5A1A22;
  --marigold:     #F2A93B;
  --marigold-ink: #FFD98F;  /* marigold for type on the dark bands — 4.8:1 or better there, even on the glow */
  --gold-bright:  #D4AE5A;
  --ivory:        #FFF8EC;
  --leaf:         #2F7A55;
  --indigo:       #13214A;
  --mithila-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Crect width='40' height='20' fill='%235A1A22'/%3E%3Cpath d='M0 2.5h40M0 17.5h40' stroke='%23D4AE5A' stroke-width='1'/%3E%3Cpath d='M0 15.5 10 5.5 20 15.5Z' fill='%23F2A93B'/%3E%3Cpath d='M20 15.5 30 5.5 40 15.5Z' fill='%23FFF3DF'/%3E%3Ccircle cx='10' cy='12' r='1.7' fill='%23BB3E3B'/%3E%3Ccircle cx='30' cy='12' r='1.7' fill='%23BB3E3B'/%3E%3Ccircle cx='20' cy='6.2' r='1.2' fill='%23D4AE5A'/%3E%3Ccircle cx='0' cy='6.2' r='1.2' fill='%23D4AE5A'/%3E%3Ccircle cx='40' cy='6.2' r='1.2' fill='%23D4AE5A'/%3E%3C/svg%3E");
}

/* The lotus and a hairline, under a section's heading; on the two centred
   heads (the red and the dusk bands), a hairline either side. */
.ornament { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; color: var(--gold); }
.ornament::after { content: ""; flex: 0 1 4.5rem; height: 1px; background: linear-gradient(90deg, currentColor, transparent); }
.ornament svg { width: 2.6rem; height: 1.6rem; }
/* the paired fish of Mithila wedding painting, either side of the lotus */
.ornament--fish { gap: .55rem; }
.ornament .ornament__fish { width: 3rem; height: 1.3rem; }
.ornament__fish--r { transform: scaleX(-1); }

/* A Mithila border band along a section's edge. */
.section--welcome::before, .section--sindoor::before, .section--sindoor::after, .footer::before {
  content: ""; position: absolute; left: 0; right: 0; height: 20px;
  background: var(--mithila-band) repeat-x center / auto 20px;
}
.section--welcome::before, .section--sindoor::before, .footer::before { top: 0; }
.section--sindoor::after { bottom: 0; }

/* ...................................................... welcome */

.section--welcome {
  background:
    radial-gradient(56rem 30rem at 92% 0%, rgba(242, 169, 59, .2), transparent 70%),
    radial-gradient(40rem 26rem at 0% 100%, rgba(187, 62, 59, .08), transparent 70%),
    var(--ivory);
}
/* the lobby in a double frame — gold, then sindoor — like a painted border */
.section--welcome .split__media {
  box-shadow:
    0 0 0 8px var(--ivory), 0 0 0 9px var(--gold-bright),
    0 0 0 15px var(--ivory), 0 0 0 16px rgba(187, 62, 59, .55),
    0 36px 70px -30px rgba(90, 26, 34, .45);
}
@media (max-width: 1023px) { .section--welcome .split__media { margin-inline: 16px; } }

/* ............................................... restaurant & events */

.section--sindoor {
  color: rgba(255, 244, 228, .86);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 4 18 14 14 24 10 14Z' fill='none' stroke='%23F2C46B' stroke-width='.7' opacity='.5'/%3E%3Ccircle cx='0' cy='0' r='1' fill='%23F2C46B' opacity='.55'/%3E%3Ccircle cx='28' cy='0' r='1' fill='%23F2C46B' opacity='.55'/%3E%3Ccircle cx='0' cy='28' r='1' fill='%23F2C46B' opacity='.55'/%3E%3Ccircle cx='28' cy='28' r='1' fill='%23F2C46B' opacity='.55'/%3E%3C/svg%3E") center / 28px 28px,
    radial-gradient(64rem 36rem at 12% 0%, rgba(242, 169, 59, .18), transparent 62%),
    radial-gradient(56rem 36rem at 100% 100%, rgba(19, 33, 74, .4), transparent 62%),
    linear-gradient(160deg, #8E2A27 0%, #742126 52%, #571A24 100%);
}
.section--sindoor .section__head { margin-inline: auto; text-align: center; }
.section--sindoor .ornament { justify-content: center; color: var(--gold-bright); }
.section--sindoor .ornament::before, .section--dusk .ornament::before { content: ""; flex: 0 1 4.5rem; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.section--sindoor .label, .section--dusk .label { color: var(--marigold-ink); text-shadow: 0 1px 3px rgba(50, 8, 14, .55); }
.section--sindoor .h2, .section--dusk .h2 { color: #FFF6E8; }

/* the switch on the red: ivory type, marigold for the open tab, centred */
.ui-ready .section--sindoor .tablist { justify-content: center; border-bottom-color: rgba(255, 236, 205, .22); }
.section--sindoor .tab { color: rgba(255, 244, 228, .8); }
.section--sindoor .tab:hover { color: #fff; }
.section--sindoor .tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--marigold); }
@media (max-width: 639px) {
  .ui-ready .section--sindoor .tablist { justify-content: flex-start; }
  .section--sindoor .tab { border-color: rgba(255, 236, 205, .4); color: #FFF4E4; }
  .section--sindoor .tab[aria-selected="true"] { background: var(--marigold); border-color: var(--marigold); color: #3B1212; }
}
/* the panel: a white card floating on the red, edged in gold */
.section--sindoor .panel {
  border: 0;
  box-shadow: 0 0 0 1px rgba(212, 174, 90, .55), 0 0 0 7px rgba(255, 236, 205, .07), 0 40px 80px -36px rgba(20, 4, 8, .7);
}
.section--sindoor .ticks li::before { background: var(--marigold); box-shadow: 0 0 0 2px rgba(242, 169, 59, .25); }

/* ............................................................ janakpur */

/* Dusk over the Janaki Mandir: the hero's azure at the top, deepening
   through indigo and plum into temple wine, with a few early stars. */
.section--dusk {
  color: rgba(255, 244, 228, .86);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='160' viewBox='0 0 220 160'%3E%3Cg fill='%23FFE7B0'%3E%3Ccircle cx='18' cy='22' r='1.1' opacity='.7'/%3E%3Ccircle cx='96' cy='12' r='.8' opacity='.5'/%3E%3Ccircle cx='160' cy='40' r='1.2' opacity='.6'/%3E%3Ccircle cx='60' cy='78' r='.7' opacity='.45'/%3E%3Ccircle cx='200' cy='96' r='.9' opacity='.5'/%3E%3Ccircle cx='128' cy='132' r='.7' opacity='.4'/%3E%3Ccircle cx='30' cy='140' r='.9' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") top center / 220px 160px no-repeat,
    radial-gradient(60rem 28rem at 50% 0%, rgba(27, 91, 207, .38), transparent 70%),
    radial-gradient(50rem 30rem at 50% 100%, rgba(242, 169, 59, .16), transparent 70%),
    linear-gradient(180deg, #0F2352 0%, #1A2B66 26%, #33215E 58%, #561C3E 86%, #5E1D33 100%);
}
.section--dusk .section__head { margin-inline: auto; text-align: center; }
.section--dusk .ornament { justify-content: center; color: var(--gold-bright); }
.section--dusk .section__intro { color: rgba(255, 244, 228, .88); }
.section--dusk .feature {
  border: 0;
  box-shadow: 0 0 0 1px rgba(212, 174, 90, .7), 0 0 0 7px rgba(212, 174, 90, .1), 0 50px 90px -40px rgba(6, 4, 20, .8);
}
.section--dusk .feature__quote { border-left-color: var(--accent); }
/* each place card tipped in a colour of Mithila painting */
.section--dusk .place { border: 0; border-top: 4px solid var(--accent); box-shadow: 0 30px 60px -32px rgba(6, 4, 20, .75); }
.section--dusk .place:nth-child(2) { border-top-color: var(--marigold); }
.section--dusk .place:nth-child(3) { border-top-color: var(--leaf); }
.section--dusk .credits { color: rgba(255, 244, 228, .8); }
.section--dusk .credits a:hover { color: var(--marigold-ink); }

/* on the two dark bands the page's red ring would vanish: a light one —
   but the page's own red again on the white cards */
.section--sindoor :focus-visible, .section--dusk :focus-visible { outline-color: #FFE2A8; }
.section--sindoor .card :focus-visible, .section--dusk .card :focus-visible { outline-color: var(--accent); }

/* ............................................................. contact */

/* Marigold, with the dusk's lace edge hanging into it. */
.section--marigold {
  background:
    radial-gradient(50rem 28rem at 0% 8%, rgba(255, 255, 255, .7), transparent 62%),
    radial-gradient(46rem 30rem at 100% 100%, rgba(187, 62, 59, .1), transparent 62%),
    linear-gradient(180deg, #FEF2DA 0%, #FBE4BA 100%);
}
.section--marigold::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='13' viewBox='0 0 24 13'%3E%3Cpath d='M0 0H24V1C24 7.6 18.6 12 12 12S0 7.6 0 1Z' fill='%235E1D33'/%3E%3Cpath d='M0 1C0 7.6 5.4 12 12 12S24 7.6 24 1' fill='none' stroke='%23D4AE5A' stroke-width='.9'/%3E%3Ccircle cx='12' cy='5.5' r='1.4' fill='%23D4AE5A'/%3E%3C/svg%3E") repeat-x left top / 24px 13px;
}
.section--marigold .label, .section--marigold .textlink { color: var(--sindoor-deep); }
.section--marigold .section__intro, .section--marigold .routes li { color: #3F362D; }
.section--marigold .contact-list,
.section--marigold .contact,
.section--marigold .hours > div { border-color: rgba(126, 34, 38, .18); }
.section--marigold .contact__detail, .section--marigold .contact__nums,
.section--marigold .hours dt { color: #5A4E42; }
/* each way to reach the hotel in its own colour */
.section--marigold .contact svg {
  width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 14px -6px rgba(126, 34, 38, .6);
}
.section--marigold .contact--multi svg { background: var(--sindoor-deep); }
.section--marigold .contact[data-whatsapp] svg { background: #1E7F4E; box-shadow: 0 6px 14px -6px rgba(30, 127, 78, .6); }
.section--marigold .contact[data-email] svg { background: var(--sky-blue); box-shadow: 0 6px 14px -6px rgba(27, 91, 207, .6); }
@media (max-width: 479px) { .section--marigold .contact svg { margin-top: 0; } }
.section--marigold .routes svg {
  width: 2rem; height: 2rem; margin-top: 0; padding: .4rem; border-radius: 50%;
  background: #fff; color: var(--accent); box-shadow: 0 4px 10px -4px rgba(126, 34, 38, .35);
}
/* the form: a white card in a double frame, red along its top */
.section--marigold .enquiry {
  border: 0; border-top: 5px solid var(--accent);
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, .5), 0 0 0 8px var(--gold-bright),
    0 40px 80px -36px rgba(110, 40, 20, .45);
}

/* ............................................................. footer */

.footer {
  position: relative; padding-top: 20px;
  background:
    radial-gradient(50rem 20rem at 85% 0%, rgba(27, 91, 207, .25), transparent 70%),
    linear-gradient(180deg, #16244F 0%, var(--indigo) 60%, #0D1736 100%);
  color: rgba(232, 236, 252, .8);
}
.footer__addr .deva { color: var(--marigold-ink); }
.footer__tag { color: var(--marigold-ink); letter-spacing: .02em; }
.footer__legal { border-top-color: rgba(212, 174, 90, .25); }


/* ............................................ more ornament, Mithila way
   The second layer of decoration: a marigold toran hung across the top of
   the welcome, Mithila sun mandalas as faint watermarks, a row of lit
   diyas at the foot of the Janakpur dusk, gold corner flourishes on the two
   framed pictures, festival bunting on the place cards, gold diamonds
   either side of each label, and a fine double gold frame inside the two
   dark bands. All drawn here; the diyas' flicker stops for visitors who ask
   for less motion. */

:root {
  --toran: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='66' viewBox='0 0 120 66'%3E%3Cpath d='M0 5Q30 15 60 5T120 5' fill='none' stroke='%23D4AE5A' stroke-width='1.6'/%3E%3Cpath d='M30 10V57.0' stroke='%23D4AE5A' stroke-width='1'/%3E%3Cpath d='M30 11c-6 1-9 5-10 9 6-1 9-4 10-9Z' fill='%233F7D4E'/%3E%3Cpath d='M30 11c6 1 9 5 10 9-6-1-9-4-10-9Z' fill='%232F6B41'/%3E%3Ccircle cx='30' cy='19.0' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='30' cy='19.0' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='30' cy='29.5' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='30' cy='29.5' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='30' cy='40.0' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='30' cy='40.0' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='30' cy='50.5' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='30' cy='50.5' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='30' cy='57.5' r='2.1' fill='%23BB3E3B'/%3E%3Cpath d='M30 59.5v4' stroke='%23BB3E3B' stroke-width='1.2'/%3E%3Cpath d='M90 10V57.0' stroke='%23D4AE5A' stroke-width='1'/%3E%3Cpath d='M90 11c-6 1-9 5-10 9 6-1 9-4 10-9Z' fill='%233F7D4E'/%3E%3Cpath d='M90 11c6 1 9 5 10 9-6-1-9-4-10-9Z' fill='%232F6B41'/%3E%3Ccircle cx='90' cy='19.0' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='90' cy='19.0' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='90' cy='29.5' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='90' cy='29.5' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='90' cy='40.0' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='90' cy='40.0' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='90' cy='50.5' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='90' cy='50.5' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='90' cy='57.5' r='2.1' fill='%23BB3E3B'/%3E%3Cpath d='M90 59.5v4' stroke='%23BB3E3B' stroke-width='1.2'/%3E%3Cpath d='M0 5V31.0' stroke='%23D4AE5A' stroke-width='1'/%3E%3Cpath d='M0 6c-6 1-9 5-10 9 6-1 9-4 10-9Z' fill='%233F7D4E'/%3E%3Cpath d='M0 6c6 1 9 5 10 9-6-1-9-4-10-9Z' fill='%232F6B41'/%3E%3Ccircle cx='0' cy='14.0' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='0' cy='14.0' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='0' cy='24.5' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='0' cy='24.5' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='0' cy='31.5' r='2.1' fill='%23BB3E3B'/%3E%3Cpath d='M0 33.5v4' stroke='%23BB3E3B' stroke-width='1.2'/%3E%3Cpath d='M60 5V31.0' stroke='%23D4AE5A' stroke-width='1'/%3E%3Cpath d='M60 6c-6 1-9 5-10 9 6-1 9-4 10-9Z' fill='%233F7D4E'/%3E%3Cpath d='M60 6c6 1 9 5 10 9-6-1-9-4-10-9Z' fill='%232F6B41'/%3E%3Ccircle cx='60' cy='14.0' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='60' cy='14.0' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='60' cy='24.5' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='60' cy='24.5' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='60' cy='31.5' r='2.1' fill='%23BB3E3B'/%3E%3Cpath d='M60 33.5v4' stroke='%23BB3E3B' stroke-width='1.2'/%3E%3Cpath d='M120 5V31.0' stroke='%23D4AE5A' stroke-width='1'/%3E%3Cpath d='M120 6c-6 1-9 5-10 9 6-1 9-4 10-9Z' fill='%233F7D4E'/%3E%3Cpath d='M120 6c6 1 9 5 10 9-6-1-9-4-10-9Z' fill='%232F6B41'/%3E%3Ccircle cx='120' cy='14.0' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='120' cy='14.0' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='120' cy='24.5' r='4.6' fill='%23F2A93B' stroke='%23E07B24' stroke-width='1.7' stroke-dasharray='1.5 1.1'/%3E%3Ccircle cx='120' cy='24.5' r='1.93' fill='%23C9561E'/%3E%3Ccircle cx='120' cy='31.5' r='2.1' fill='%23BB3E3B'/%3E%3Cpath d='M120 33.5v4' stroke='%23BB3E3B' stroke-width='1.2'/%3E%3C/svg%3E");
  --mandala-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23B08D3C' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M194.0 100.0 L165.5 92.0 L165.5 108.0Z'/%3E%3Cpath d='M186.8 136.0 L163.6 117.6 L157.4 132.5Z'/%3E%3Cpath d='M166.5 166.5 L152.0 140.6 L140.6 152.0Z'/%3E%3Cpath d='M136.0 186.8 L132.5 157.4 L117.6 163.6Z'/%3E%3Cpath d='M100.0 194.0 L108.0 165.5 L92.0 165.5Z'/%3E%3Cpath d='M64.0 186.8 L82.4 163.6 L67.5 157.4Z'/%3E%3Cpath d='M33.5 166.5 L59.4 152.0 L48.0 140.6Z'/%3E%3Cpath d='M13.2 136.0 L42.6 132.5 L36.4 117.6Z'/%3E%3Cpath d='M6.0 100.0 L34.5 108.0 L34.5 92.0Z'/%3E%3Cpath d='M13.2 64.0 L36.4 82.4 L42.6 67.5Z'/%3E%3Cpath d='M33.5 33.5 L48.0 59.4 L59.4 48.0Z'/%3E%3Cpath d='M64.0 13.2 L67.5 42.6 L82.4 36.4Z'/%3E%3Cpath d='M100.0 6.0 L92.0 34.5 L108.0 34.5Z'/%3E%3Cpath d='M136.0 13.2 L117.6 36.4 L132.5 42.6Z'/%3E%3Cpath d='M166.5 33.5 L140.6 48.0 L152.0 59.4Z'/%3E%3Cpath d='M186.8 64.0 L157.4 67.5 L163.6 82.4Z'/%3E%3Ccircle cx='100' cy='100' r='64'/%3E%3Ccircle cx='100' cy='100' r='51'/%3E%3Ccircle cx='158.0' cy='100.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='156.0' cy='115.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='150.2' cy='129.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='141.0' cy='141.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='129.0' cy='150.2' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='115.0' cy='156.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='100.0' cy='158.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='85.0' cy='156.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='71.0' cy='150.2' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='59.0' cy='141.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='49.8' cy='129.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='44.0' cy='115.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='42.0' cy='100.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='44.0' cy='85.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='49.8' cy='71.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='59.0' cy='59.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='71.0' cy='49.8' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='85.0' cy='44.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='100.0' cy='42.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='115.0' cy='44.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='129.0' cy='49.8' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='141.0' cy='59.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='150.2' cy='71.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Ccircle cx='156.0' cy='85.0' r='1.7' fill='%23B08D3C' stroke='none'/%3E%3Cpath d='M122.0 100.0Q137.0 91.5 147.0 100.0Q137.0 108.5 122.0 100.0Z'/%3E%3Cpath d='M119.1 111.0Q136.3 111.1 140.7 123.5Q127.8 125.9 119.1 111.0Z'/%3E%3Cpath d='M111.0 119.1Q125.9 127.8 123.5 140.7Q111.1 136.3 111.0 119.1Z'/%3E%3Cpath d='M100.0 122.0Q108.5 137.0 100.0 147.0Q91.5 137.0 100.0 122.0Z'/%3E%3Cpath d='M89.0 119.1Q88.9 136.3 76.5 140.7Q74.1 127.8 89.0 119.1Z'/%3E%3Cpath d='M80.9 111.0Q72.2 125.9 59.3 123.5Q63.7 111.1 80.9 111.0Z'/%3E%3Cpath d='M78.0 100.0Q63.0 108.5 53.0 100.0Q63.0 91.5 78.0 100.0Z'/%3E%3Cpath d='M80.9 89.0Q63.7 88.9 59.3 76.5Q72.2 74.1 80.9 89.0Z'/%3E%3Cpath d='M89.0 80.9Q74.1 72.2 76.5 59.3Q88.9 63.7 89.0 80.9Z'/%3E%3Cpath d='M100.0 78.0Q91.5 63.0 100.0 53.0Q108.5 63.0 100.0 78.0Z'/%3E%3Cpath d='M111.0 80.9Q111.1 63.7 123.5 59.3Q125.9 72.2 111.0 80.9Z'/%3E%3Cpath d='M119.1 89.0Q127.8 74.1 140.7 76.5Q136.3 88.9 119.1 89.0Z'/%3E%3Ccircle cx='100' cy='100' r='14'/%3E%3Ccircle cx='100' cy='100' r='5' fill='%23B08D3C'/%3E%3C/g%3E%3C/svg%3E");
  --mandala-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23F2C46B' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M194.0 100.0 L165.5 92.0 L165.5 108.0Z'/%3E%3Cpath d='M186.8 136.0 L163.6 117.6 L157.4 132.5Z'/%3E%3Cpath d='M166.5 166.5 L152.0 140.6 L140.6 152.0Z'/%3E%3Cpath d='M136.0 186.8 L132.5 157.4 L117.6 163.6Z'/%3E%3Cpath d='M100.0 194.0 L108.0 165.5 L92.0 165.5Z'/%3E%3Cpath d='M64.0 186.8 L82.4 163.6 L67.5 157.4Z'/%3E%3Cpath d='M33.5 166.5 L59.4 152.0 L48.0 140.6Z'/%3E%3Cpath d='M13.2 136.0 L42.6 132.5 L36.4 117.6Z'/%3E%3Cpath d='M6.0 100.0 L34.5 108.0 L34.5 92.0Z'/%3E%3Cpath d='M13.2 64.0 L36.4 82.4 L42.6 67.5Z'/%3E%3Cpath d='M33.5 33.5 L48.0 59.4 L59.4 48.0Z'/%3E%3Cpath d='M64.0 13.2 L67.5 42.6 L82.4 36.4Z'/%3E%3Cpath d='M100.0 6.0 L92.0 34.5 L108.0 34.5Z'/%3E%3Cpath d='M136.0 13.2 L117.6 36.4 L132.5 42.6Z'/%3E%3Cpath d='M166.5 33.5 L140.6 48.0 L152.0 59.4Z'/%3E%3Cpath d='M186.8 64.0 L157.4 67.5 L163.6 82.4Z'/%3E%3Ccircle cx='100' cy='100' r='64'/%3E%3Ccircle cx='100' cy='100' r='51'/%3E%3Ccircle cx='158.0' cy='100.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='156.0' cy='115.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='150.2' cy='129.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='141.0' cy='141.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='129.0' cy='150.2' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='115.0' cy='156.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='100.0' cy='158.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='85.0' cy='156.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='71.0' cy='150.2' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='59.0' cy='141.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='49.8' cy='129.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='44.0' cy='115.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='42.0' cy='100.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='44.0' cy='85.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='49.8' cy='71.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='59.0' cy='59.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='71.0' cy='49.8' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='85.0' cy='44.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='100.0' cy='42.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='115.0' cy='44.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='129.0' cy='49.8' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='141.0' cy='59.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='150.2' cy='71.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Ccircle cx='156.0' cy='85.0' r='1.7' fill='%23F2C46B' stroke='none'/%3E%3Cpath d='M122.0 100.0Q137.0 91.5 147.0 100.0Q137.0 108.5 122.0 100.0Z'/%3E%3Cpath d='M119.1 111.0Q136.3 111.1 140.7 123.5Q127.8 125.9 119.1 111.0Z'/%3E%3Cpath d='M111.0 119.1Q125.9 127.8 123.5 140.7Q111.1 136.3 111.0 119.1Z'/%3E%3Cpath d='M100.0 122.0Q108.5 137.0 100.0 147.0Q91.5 137.0 100.0 122.0Z'/%3E%3Cpath d='M89.0 119.1Q88.9 136.3 76.5 140.7Q74.1 127.8 89.0 119.1Z'/%3E%3Cpath d='M80.9 111.0Q72.2 125.9 59.3 123.5Q63.7 111.1 80.9 111.0Z'/%3E%3Cpath d='M78.0 100.0Q63.0 108.5 53.0 100.0Q63.0 91.5 78.0 100.0Z'/%3E%3Cpath d='M80.9 89.0Q63.7 88.9 59.3 76.5Q72.2 74.1 80.9 89.0Z'/%3E%3Cpath d='M89.0 80.9Q74.1 72.2 76.5 59.3Q88.9 63.7 89.0 80.9Z'/%3E%3Cpath d='M100.0 78.0Q91.5 63.0 100.0 53.0Q108.5 63.0 100.0 78.0Z'/%3E%3Cpath d='M111.0 80.9Q111.1 63.7 123.5 59.3Q125.9 72.2 111.0 80.9Z'/%3E%3Cpath d='M119.1 89.0Q127.8 74.1 140.7 76.5Q136.3 88.9 119.1 89.0Z'/%3E%3Ccircle cx='100' cy='100' r='14'/%3E%3Ccircle cx='100' cy='100' r='5' fill='%23F2C46B'/%3E%3C/g%3E%3C/svg%3E");
  --diya: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23FFD27A' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23FFD27A' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='.5' cy='.7' r='.6'%3E%3Cstop offset='0' stop-color='%23FFF6C8'/%3E%3Cstop offset='.5' stop-color='%23FFC23D'/%3E%3Cstop offset='1' stop-color='%23F07A1A'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='28' r='22' fill='url%28%23g%29'/%3E%3Cpath d='M32 12C37 21 38 28 32 34 26 28 27 21 32 12Z' fill='url%28%23f%29'/%3E%3Cpath d='M9 38Q32 60 55 38Z' fill='%23C9561E'/%3E%3Cpath d='M9 38H55' stroke='%23D4AE5A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M17 45Q32 54 47 45' fill='none' stroke='%23F2A93B' stroke-width='1.2' stroke-dasharray='2 2'/%3E%3Cellipse cx='32' cy='54' rx='9' ry='2.2' fill='%238E2A27'/%3E%3C/svg%3E");
}
.section--welcome, .section--sindoor, .section--dusk, .section--marigold, .footer { isolation: isolate; }
/* the sections clip their sides already (main > section); the footer has to
   as well, or its mandala widens the page on a phone */
.footer { overflow-x: hidden; overflow-x: clip; }

/* the label between two gold diamonds */
:is(.section--welcome, .section--sindoor, .section--dusk, .section--marigold) .label {
  display: inline-flex; align-items: center; gap: .65rem;
}
:is(.section--welcome, .section--sindoor, .section--dusk, .section--marigold) .label::before,
:is(.section--welcome, .section--sindoor, .section--dusk, .section--marigold) .label::after {
  content: ""; width: .42rem; height: .42rem; rotate: 45deg; background: var(--gold-bright); flex: none;
}

/* the marigold toran, hung just under the border band */
.section--welcome::after {
  content: ""; position: absolute; top: 20px; left: 0; right: 0; height: 66px; pointer-events: none;
  background: var(--toran) repeat-x center top / 120px 66px;
  filter: drop-shadow(0 3px 3px rgba(90, 26, 34, .18));
}
.section--welcome { padding-top: calc(clamp(3.75rem, 2.75rem + 4vw, 6.5rem) + 3.5rem); }

/* Mithila sun mandalas, faint, behind the content */
.section--welcome .split, .section--marigold .contact-grid, .section--sindoor .section__head, .footer__grid { position: relative; }
.section--welcome .split::before, .section--marigold .contact-grid::before,
.section--sindoor .section__head::before, .footer__grid::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1;
  background: var(--mandala-gold) center / contain no-repeat;
}
.section--welcome .split::before { width: min(30rem, 70vw); right: -9rem; bottom: -9rem; opacity: .16; }
.section--marigold .contact-grid::before { width: min(26rem, 70vw); right: -10rem; top: -8rem; opacity: .18; }
.section--sindoor .section__head::before {
  width: 19rem; left: 50%; top: 50%; translate: -50% -50%; opacity: .1;
  background-image: var(--mandala-light);
}
.footer__grid::before { width: 22rem; right: -6rem; top: -2rem; opacity: .08; background-image: var(--mandala-light); }

/* gold corner flourishes over the two framed pictures */
.section--welcome .split__media::before, .section--dusk .feature__media::before {
  content: ""; position: absolute; inset: 12px; z-index: 1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform=''%3E%3Cg fill='none' stroke='%23D4AE5A' stroke-linecap='round'%3E%3Cpath d='M3 45V12Q3 3 12 3H45' stroke-width='1.8'/%3E%3Cpath d='M9 45V17Q9 9 17 9H45' stroke-width='1'/%3E%3Cpath d='M17 17c7 0 12 4 13 10M17 17c0 7 4 12 10 13' stroke-width='1'/%3E%3C/g%3E%3Ccircle cx='17' cy='17' r='2.6' fill='%23D4AE5A'/%3E%3Ccircle cx='45' cy='3' r='1.6' fill='%23D4AE5A'/%3E%3Ccircle cx='3' cy='45' r='1.6' fill='%23D4AE5A'/%3E%3C/g%3E%3C/svg%3E") left top / 44px 44px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='translate%2848 0%29 scale%28-1 1%29'%3E%3Cg fill='none' stroke='%23D4AE5A' stroke-linecap='round'%3E%3Cpath d='M3 45V12Q3 3 12 3H45' stroke-width='1.8'/%3E%3Cpath d='M9 45V17Q9 9 17 9H45' stroke-width='1'/%3E%3Cpath d='M17 17c7 0 12 4 13 10M17 17c0 7 4 12 10 13' stroke-width='1'/%3E%3C/g%3E%3Ccircle cx='17' cy='17' r='2.6' fill='%23D4AE5A'/%3E%3Ccircle cx='45' cy='3' r='1.6' fill='%23D4AE5A'/%3E%3Ccircle cx='3' cy='45' r='1.6' fill='%23D4AE5A'/%3E%3C/g%3E%3C/svg%3E") right top / 44px 44px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='translate%280 48%29 scale%281 -1%29'%3E%3Cg fill='none' stroke='%23D4AE5A' stroke-linecap='round'%3E%3Cpath d='M3 45V12Q3 3 12 3H45' stroke-width='1.8'/%3E%3Cpath d='M9 45V17Q9 9 17 9H45' stroke-width='1'/%3E%3Cpath d='M17 17c7 0 12 4 13 10M17 17c0 7 4 12 10 13' stroke-width='1'/%3E%3C/g%3E%3Ccircle cx='17' cy='17' r='2.6' fill='%23D4AE5A'/%3E%3Ccircle cx='45' cy='3' r='1.6' fill='%23D4AE5A'/%3E%3Ccircle cx='3' cy='45' r='1.6' fill='%23D4AE5A'/%3E%3C/g%3E%3C/svg%3E") left bottom / 44px 44px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='translate%2848 48%29 scale%28-1 -1%29'%3E%3Cg fill='none' stroke='%23D4AE5A' stroke-linecap='round'%3E%3Cpath d='M3 45V12Q3 3 12 3H45' stroke-width='1.8'/%3E%3Cpath d='M9 45V17Q9 9 17 9H45' stroke-width='1'/%3E%3Cpath d='M17 17c7 0 12 4 13 10M17 17c0 7 4 12 10 13' stroke-width='1'/%3E%3C/g%3E%3Ccircle cx='17' cy='17' r='2.6' fill='%23D4AE5A'/%3E%3Ccircle cx='45' cy='3' r='1.6' fill='%23D4AE5A'/%3E%3Ccircle cx='3' cy='45' r='1.6' fill='%23D4AE5A'/%3E%3C/g%3E%3C/svg%3E") right bottom / 44px 44px no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(30, 10, 10, .55));
}

/* festival bunting across each place card, in its Mithila colour */
.section--dusk .place { border-top: 0; }
.section--dusk .place__media::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14' viewBox='0 0 22 14'%3E%3Cpath d='M0 1.2H22' stroke='%23D4AE5A' stroke-width='1.4'/%3E%3Cpath d='M2 1.5H20L11 13Z' fill='%23BB3E3B'/%3E%3Ccircle cx='11' cy='5' r='1.4' fill='%23FFF3DF'/%3E%3C/svg%3E") repeat-x left top / 22px 14px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}
.section--dusk .place:nth-child(2) .place__media::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14' viewBox='0 0 22 14'%3E%3Cpath d='M0 1.2H22' stroke='%23D4AE5A' stroke-width='1.4'/%3E%3Cpath d='M2 1.5H20L11 13Z' fill='%23F2A93B'/%3E%3Ccircle cx='11' cy='5' r='1.4' fill='%23FFF3DF'/%3E%3C/svg%3E"); }
.section--dusk .place:nth-child(3) .place__media::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14' viewBox='0 0 22 14'%3E%3Cpath d='M0 1.2H22' stroke='%23D4AE5A' stroke-width='1.4'/%3E%3Cpath d='M2 1.5H20L11 13Z' fill='%232F7A55'/%3E%3Ccircle cx='11' cy='5' r='1.4' fill='%23FFF3DF'/%3E%3C/svg%3E"); }
/* and a fine triple gold rule along the top of the temple's card */
.section--dusk .feature__body {
  background:
    linear-gradient(var(--gold-bright), var(--gold-bright)) top / 100% 3px no-repeat,
    linear-gradient(var(--gold-bright), var(--gold-bright)) 0 6px / 100% 1px no-repeat,
    #fff;
}

/* a fine double gold frame inside the two dark bands, like a painting's border */
@media (min-width: 1024px) {
  .section--sindoor > .wrap, .section--dusk > .wrap { position: relative; }
  .section--sindoor > .wrap::before, .section--dusk > .wrap::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: -2.75rem -1.25rem -2.75rem;
    border: 1px solid rgba(212, 174, 90, .38); border-radius: 22px;
    outline: 1px solid rgba(212, 174, 90, .2); outline-offset: 6px;
  }
}

/* a row of lit diyas at the foot of the dusk, just above the scalloped edge */
.section--dusk { padding-bottom: calc(clamp(3.75rem, 2.75rem + 4vw, 6.5rem) + 4.5rem); }
.section--dusk::after {
  content: ""; position: absolute; left: 50%; bottom: 1.75rem; translate: -50% 0; pointer-events: none;
  width: min(44rem, calc(100% - 2.5rem)); height: 64px;
  background: var(--diya) space center / 64px 64px;
  animation: diya-flicker 3.2s ease-in-out infinite;
}
@keyframes diya-flicker { 0%, 100% { opacity: 1; } 35% { opacity: .82; } 60% { opacity: .95; } 80% { opacity: .86; } }

/* a small sun mandala over the footer's last line */
.footer__legal { position: relative; padding-top: 2.4rem; }
.footer__legal::before {
  content: ""; position: absolute; top: .55rem; left: 50%; translate: -50% 0; width: 9rem; height: 1.4rem;
  background: var(--mandala-light) center / 1.4rem 1.4rem no-repeat;
  opacity: .7;
}

@media (prefers-reduced-motion: reduce) { .section--dusk::after { animation: none; } }

/* ---------------------------------------------------------- PHONE ACTION BAR */

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: .5rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 20px -12px rgba(31, 27, 23, .25);
  translate: 0 110%;
  transition: translate .35s var(--ease);
}
.actionbar.is-up { translate: 0 0; }
@media (min-width: 1024px) { .actionbar { display: none; } }
.actionbar__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem .5rem; border: 1px solid var(--rule-2); border-radius: 4px;
  font-size: .88rem; font-weight: 600; color: var(--ink);
}
.actionbar__btn svg { width: 1.05rem; height: 1.05rem; color: var(--accent); }
.actionbar__btn--book { background: var(--accent); border-color: var(--accent); color: #fff; }

/* -------------------------------------------------------------- TOUR PLAYER */

/* The full tour, in a native <dialog>: it traps focus, closes on Escape, and
   returns focus to "Watch the hotel tour" (film.js). */
.tour {
  width: min(100% - 2rem, 70rem); max-width: none; max-height: none;
  padding: 0; margin: auto; border: 0; background: transparent; color: #fff;
  overflow: visible;
}
.tour::backdrop { background: rgba(8, 11, 20, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tour__box { display: grid; gap: .75rem; }
.tour__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tour__title { font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); }
.tour__close {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
  transition: background-color .2s;
}
.tour__close:hover { background: rgba(255, 255, 255, .22); }
.tour__close svg { width: 1.2rem; height: 1.2rem; }
.tour__video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  max-height: calc(100svh - 7rem);
  border-radius: 12px; background: #000;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
/* the page behind stays put while the tour is open */
html.tour-open { overflow: hidden; }
/* the red ring is too faint on the dark backdrop */
.tour :focus-visible { outline-color: #fff; }

/* -------------------------------------------------------------------- REVEAL */

/* Hidden only once ui.js has confirmed it can bring them back (.js). If the
   script never runs, nothing is ever hidden. */
.js [data-reveal] {
  opacity: 0; translate: 0 16px;
  transition: opacity .7s var(--ease) var(--d, 0s), translate .7s var(--ease) var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------ REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-in, .ui-ready .panel, .hero__bg img { animation: none; }
  .js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
}