/* RG — Top navigation · Hero video · Booking bar
   Shared by the parent (RG Group of Hotels) and the child (RG Royal Hotel)
   pages. Linked AFTER styles.css, BEFORE each page's inline <style>, so a page
   can still override any rule locally.

   Layout mirrors the client reference: hamburger + inline links on the left,
   wordmark centred, a Book Now pill on the right, sitting transparent over a
   full-bleed hero video, with a translucent booking bar across the hero's
   bottom edge. Fully responsive (≤820px / ≤480px) per the project rules. */

/* ── Top navigation ──────────────────────────────────────────────────── */
.rg-topnav{ position:fixed; top:0; left:0; right:0; z-index:80; color:var(--rg-ivory);
  border-bottom:1px solid transparent; background:transparent;
  transition:background var(--dur-slow,0.45s) var(--ease-out), color var(--dur-slow,0.45s) var(--ease-out),
    border-color var(--dur-slow,0.45s) var(--ease-out), box-shadow var(--dur-slow,0.45s) var(--ease-out); }
/* a soft top gradient keeps the ivory nav legible over bright video frames */
.rg-topnav::before{ content:''; position:absolute; inset:0 0 auto; height:170%; pointer-events:none;
  background:linear-gradient(to bottom, rgba(20,16,12,0.55) 0%, rgba(20,16,12,0.18) 55%, rgba(20,16,12,0) 100%);
  transition:opacity var(--dur-slow,0.45s) var(--ease-out); }
.rg-topnav.is-solid::before{ opacity:0; }
.rg-topnav.is-solid{ color:var(--rg-espresso); background:rgba(250,246,239,0.94);
  -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px);
  border-bottom-color:var(--rg-line); box-shadow:0 10px 34px rgba(26,23,20,0.07); }

.rg-topnav__inner{ position:relative; z-index:1; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
  height:var(--rg-nav-h, 100px); padding:0 clamp(1rem,6vw,150px);
  transition:height var(--dur-slow,0.45s) var(--ease-out); }
.rg-topnav.is-solid .rg-topnav__inner{ --rg-nav-h:86px; }

.rg-topnav__left{ display:flex; align-items:center; gap:clamp(0.6rem,2vw,2rem); min-width:0; }
.rg-topnav__right{ display:flex; align-items:center; justify-content:flex-end;
  gap:clamp(0.9rem,2vw,1.8rem); }

/* hamburger — opens the full slide-out menu (desktop and mobile alike) */
.rg-navburger{ flex:none; width:44px; height:44px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px; padding:0; border:0; background:transparent;
  color:inherit; cursor:pointer; }
.rg-navburger span{ display:block; width:26px; height:1px; background:currentColor; border-radius:1px;
  transition:width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.rg-navburger:hover span:nth-child(2){ width:18px; }

/* inline links */
.rg-navlinks{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.3rem); }
/* used on both <a> and <button> (Our Hotels opens the overlay), so the button
   chrome is reset here rather than in a separate rule */
.rg-navlink{ position:relative; display:inline-flex; align-items:center; gap:0.45em; min-height:44px;
  padding:0; border:0; background:transparent; cursor:pointer;
  font-family:var(--font-sans); font-size:0.76rem; font-weight:500; letter-spacing:0.16em;
  text-transform:uppercase; color:inherit; text-decoration:none; white-space:nowrap;
  transition:opacity var(--dur-base) var(--ease-out); }
.rg-navlink::after{ content:''; position:absolute; left:0; right:0; bottom:12px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur-base) var(--ease-out); }
.rg-navlink:hover::after{ transform:scaleX(1); }
/* "Go Back to RG Group" (child pages) — sits right of the wordmark, ahead of
   the Book Now pill. The arrow eases left on hover to signal the way back. */
.rg-navlink--back{ white-space:nowrap; }
.rg-navlink--back::after{ bottom:10px; }
.rg-navlink__arrow{ display:inline-block; margin-right:0.5em;
  transition:transform var(--dur-base) var(--ease-out); }
.rg-navlink--back:hover .rg-navlink__arrow{ transform:translateX(-4px); }

/* chevron drawn in CSS — no dependency on a glyph the brand font may lack */
.rg-navlink__caret{ display:inline-block; width:6px; height:6px; margin-left:0.15em;
  border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transform-origin:center;
  transition:transform var(--dur-base) var(--ease-out); }
.rg-navitem.is-open .rg-navlink__caret{ transform:translateY(1px) rotate(225deg); }

/* centred wordmark — the supplied logo art is dark, so it is flipped to ivory
   while the bar is transparent over the hero and restored once it goes solid */
.rg-topnav__brand{ display:flex; align-items:center; justify-content:center; text-decoration:none; }
.rg-topnav__brand img{ display:block; width:auto; height:clamp(56px,6.2vw,84px);
  transition:height var(--dur-slow,0.45s) var(--ease-out), filter var(--dur-slow,0.45s) var(--ease-out); }
.rg-topnav:not(.is-solid) .rg-topnav__brand img{ filter:brightness(0) invert(1) drop-shadow(0 1px 10px rgba(0,0,0,0.35)); }
.rg-topnav.is-solid .rg-topnav__brand img{ height:clamp(46px,4.8vw,66px); }

/* Book Now — THE one filled button on the site. Geometry and type are the
   .rg-btn--md recipe (2px radius, 0.95em/2.1em padding, 0.8125rem medium at
   --ls-button), so it is the same button as Contact Us and only the fill sets
   it apart: solid copper in both nav states, darkening 20% on hover rather
   than changing colour. --rg-copper-deep is the fallback for engines without
   color-mix(). */
.rg-navbook{ display:inline-flex; align-items:center; justify-content:center; gap:0.85em; min-height:44px;
  padding:0.7em 1.8em; border-radius:var(--radius-sm); border:1px solid var(--rg-copper);
  background:var(--rg-copper); color:var(--rg-ivory);
  font-family:var(--font-sans); font-size:0.8125rem; font-weight:var(--w-medium);
  letter-spacing:var(--ls-button);
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
/* The arrow is defined here rather than borrowed from .rg-btn__arrow: the two
   homepages carry their own copy of the button CSS, and this file is the one
   stylesheet every page loads. */
.rg-navbook .rg-btn__arrow{ display:inline-block;
  transition:transform var(--dur-base) var(--ease-out); }
.rg-navbook:hover .rg-btn__arrow{ transform:translateX(5px); }
.rg-navbook:hover{ background:var(--rg-copper-deep); border-color:var(--rg-copper-deep);
  background:color-mix(in srgb, var(--rg-copper) 80%, #000);
  border-color:color-mix(in srgb, var(--rg-copper) 80%, #000);
  color:var(--rg-ivory); transform:translateY(-1px); }

/* ── "Our Hotels" dropdown (reuses the .rg-sbfly-* row styles) ───────── */
.rg-navitem{ position:relative; display:flex; }
/* transparent bridge so the cursor can travel from link to panel */
.rg-navitem::after{ content:''; position:absolute; left:-12px; right:-12px; top:100%; height:18px; z-index:69; }
.rg-navdrop{ position:absolute; top:calc(100% + 14px); left:-1.1rem; width:340px; z-index:70;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
  background:rgba(250,246,239,0.99); border:1px solid var(--rg-line-gold); box-shadow:var(--shadow-lg);
  border-radius:2px; padding:0.5rem 0.5rem 0.6rem; color:var(--rg-espresso);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
    visibility 0s linear 0.28s; }
.rg-navdrop::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rule-gold); }
.rg-navitem:hover .rg-navdrop, .rg-navitem:focus-within .rg-navdrop,
.rg-navdrop:hover, .rg-navitem.is-open .rg-navdrop{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s; }

/* ── Page dropdown (inner-page navigation) ────────────────────────────
   A plain list variant of .rg-navdrop used by the Stay / Celebrate / Discover
   menus. Narrower than the hotels panel, hairline-separated rows, copper
   eyebrow head — the same vocabulary as the .rg-sbfly rows on the homepage. */
.rg-navdrop--pages{ width:250px; padding:0.35rem 0.35rem 0.45rem; }
.rg-navdrop__head{ padding:0.75rem 0.85rem 0.5rem; font-family:var(--font-sans);
  font-size:0.62rem; font-weight:500; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--rg-copper); }
.rg-navdrop__link{ position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:0.9rem; padding:0.72rem 0.85rem; border-top:1px solid var(--rg-line); text-decoration:none;
  font-family:var(--font-display); font-weight:400; font-size:1.02rem; line-height:1.2;
  color:var(--rg-espresso); text-transform:none; letter-spacing:0;
  transition:background var(--dur-fast) var(--ease-out), padding-left var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out); }
.rg-navdrop__link:hover{ background:rgba(234,224,207,0.5); padding-left:1.1rem; color:var(--rg-copper); }
.rg-navdrop__link.is-active{ color:var(--rg-copper); }
.rg-navdrop__link .a{ color:var(--rg-copper); opacity:0; transform:translateX(-5px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.rg-navdrop__link:hover .a{ opacity:1; transform:none; }

/* ── "Our Hotels" full-screen overlay ─────────────────────────────────
   Opened from the OUR HOTELS nav link. A still of the property sits behind
   equal-width columns, one per hotel: each shows a white logo pill over a
   tinted panel, and on hover an ivory sheet wipes DOWN the column while the
   address + CTA rise into view. Below 820px there is no hover, so the columns
   stack and show their detail permanently. */
.rg-hoverlay{ position:fixed; inset:0; z-index:95; opacity:0; visibility:hidden;
  transition:opacity 0.45s var(--ease-out), visibility 0s linear 0.45s; }
.rg-hoverlay[hidden]{ display:none; }
.rg-hoverlay.is-open{ opacity:1; visibility:visible; transition:opacity 0.45s var(--ease-out), visibility 0s; }

.rg-hoverlay__bg{ position:absolute; inset:0; overflow:hidden; background:var(--rg-espresso); }
/* Stacked rather than in normal flow: the default photo sits at the bottom and
   one backdrop per property is layered over it (built by site.js on first
   open, so pages where the overlay is never opened load none of them). */
.rg-hoverlay__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.06); transition:transform 1.2s var(--ease-silk), opacity 0.55s var(--ease-out); }
.rg-hoverlay.is-open .rg-hoverlay__bg img{ transform:scale(1); }
/* hovering a column cross-fades its own property photo in over the default */
.rg-hoverlay__bg img[data-hotel-bg]{ opacity:0; }
.rg-hoverlay__bg img[data-hotel-bg].is-on{ opacity:1; }
.rg-hoverlay__scrim{ position:absolute; inset:0; background:rgba(20,16,12,0.42); }

/* The close sits directly over the FIRST column, whose ivory sheet wipes down
   on hover — a bare ivory glyph vanished against it (and against the always-on
   sheet in the stacked layout below 820px). The translucent disc keeps the X
   legible on every ground instead of depending on which column is hovered. */
.rg-hoverlay__close{ position:absolute; top:clamp(1rem,2.4vw,2rem); left:clamp(1rem,2.4vw,2.4rem);
  z-index:3; width:48px; height:48px; padding:0; border:0; cursor:pointer;
  color:var(--rg-ivory); border-radius:50%;
  background:rgba(20,16,12,0.45); backdrop-filter:blur(2px);
  transition:background var(--dur-base) var(--ease-out); }
.rg-hoverlay__close span{ position:absolute; left:11px; top:23px; width:26px; height:1.6px;
  background:currentColor; transition:background var(--dur-base) var(--ease-out); }
.rg-hoverlay__close span:nth-child(1){ transform:rotate(45deg); }
.rg-hoverlay__close span:nth-child(2){ transform:rotate(-45deg); }
.rg-hoverlay__close:hover{ color:var(--rg-ivory); background:var(--rg-copper); }

.rg-hoverlay__cols{ position:relative; z-index:2; height:100%; display:flex; align-items:stretch; }

/* one column per property */
.rg-hcol{ position:relative; flex:1 1 0; min-width:0; overflow:hidden; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  border-left:1px solid rgba(244,236,223,0.14);
  /* staggered rise as the overlay opens (delay set inline per column) */
  opacity:0; transform:translateY(26px);
  transition:opacity 0.6s var(--ease-out), transform 0.6s var(--ease-silk);
  transition-delay:var(--col-delay,0ms); }
.rg-hcol:first-child{ border-left:0; }
.rg-hoverlay.is-open .rg-hcol{ opacity:1; transform:none; }
/* per-column tint so the columns read as distinct panels over one image */
.rg-hcol__tint{ position:absolute; inset:0; background:rgba(20,16,12,0.26);
  transition:opacity 0.5s var(--ease-out); }
.rg-hcol:nth-child(even) .rg-hcol__tint{ background:rgba(20,16,12,0.4); }
.rg-hcol:hover .rg-hcol__tint{ opacity:0; }

/* the ivory sheet that wipes down on hover */
.rg-hcol__sheet{ position:absolute; inset:0; background:var(--rg-ivory);
  transform:translateY(-101%); transition:transform 0.55s cubic-bezier(0.76,0,0.24,1); }
.rg-hcol:hover .rg-hcol__sheet, .rg-hcol:focus-visible .rg-hcol__sheet{ transform:none; }

.rg-hcol__inner{ position:relative; z-index:1; width:100%; padding:clamp(1.4rem,3vw,2.4rem);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(0.9rem,1.8vw,1.4rem); }

/* white logo pill — loses its own background once the sheet is down */
.rg-hcol__badge{ display:flex; align-items:center; justify-content:center; flex:none;
  width:clamp(150px,13vw,190px); height:clamp(84px,7vw,104px); padding:0.9rem 1.4rem;
  background:var(--rg-white); border-radius:999px; box-shadow:0 10px 30px rgba(20,16,12,0.18);
  transition:background 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
    border-radius 0.45s var(--ease-out); }
.rg-hcol:hover .rg-hcol__badge{ background:transparent; box-shadow:none; }
/* Each property's own logo, lifted from its homepage navbar. Both marks are
   dark artwork (RG Grand black, RG Royal copper) and both grounds they ever
   sit on are light — the white pill at rest, the ivory sheet once it is down
   — so they need no recolouring, unlike the navbar copies which invert to
   white over the hero. */
.rg-hcol__badge img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.rg-hcol__mark{ font-family:var(--font-display); font-size:1.9rem; color:var(--rg-copper); letter-spacing:0.06em; }
/* City Lake has no logo file, so its badge rebuilds the CSS wordmark its own
   navbar uses (.cl-wordmark in city-lake-hotel.html) — serif name over a
   letterspaced HOTEL — in that navbar's scrolled colours, which are the ones
   that suit a light ground. This keeps all three columns reading as marks. */
.rg-hcol__mark--wordmark{ display:block; text-align:center; line-height:1;
  font-size:clamp(1.4rem,2.1vw,1.8rem); letter-spacing:0.02em; color:var(--rg-espresso); }
.rg-hcol__mark--wordmark small{ display:block; margin-top:0.35em;
  font-family:var(--font-sans); font-size:0.5em; font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-copper); }
/* hairline that appears under the badge once the sheet is down (as in the ref) */
.rg-hcol__rule{ width:100%; max-width:280px; height:1px; background:var(--rg-line);
  opacity:0; transition:opacity 0.4s var(--ease-out) 0.2s; }
.rg-hcol:hover .rg-hcol__rule{ opacity:1; }

.rg-hcol__name{ margin:0; font-family:var(--font-sans); font-weight:600;
  font-size:clamp(0.9rem,1.15vw,1.05rem); letter-spacing:0.1em; line-height:1.45;
  text-transform:uppercase; color:var(--rg-ivory);
  transition:color 0.4s var(--ease-out); }
.rg-hcol:hover .rg-hcol__name{ color:var(--rg-espresso); }
/* Locality, on its own line under the name. Unlike .rg-hcol__more below this
   is always visible — it identifies the property at a glance, so it must not
   wait for a hover the way the full address does. Smaller, lighter and wider
   tracked than the name so the two read as one block, not two headings. */
.rg-hcol__loc{ margin:0.4rem 0 0; font-family:var(--font-sans); font-weight:300;
  font-size:clamp(0.68rem,0.8vw,0.78rem); letter-spacing:0.16em; line-height:1.5;
  text-transform:uppercase; color:var(--rg-gold-soft);
  transition:color 0.4s var(--ease-out); }
.rg-hcol:hover .rg-hcol__loc{ color:var(--rg-copper); }

/* Live "Rooms starting from 4,049 INR/Night", filled by site.js hotelRates()
   from the engine's own rate endpoint. Like the locality above it this is
   always visible rather than waiting for the hover, and it flips dark with the
   rest of the panel when the sheet comes down. It ships hidden and only
   appears once a real price has arrived. */
.rg-hcol__rate{ margin:0.5rem 0 0; font-family:var(--font-sans); font-weight:300;
  font-size:clamp(0.66rem,0.78vw,0.76rem); letter-spacing:0.08em; line-height:1.6;
  color:var(--rg-ivory); transition:color 0.4s var(--ease-out); }
.rg-hcol__rate[hidden]{ display:none; }
.rg-hcol__rate-num{ font-family:var(--font-display); font-size:1.3em; font-weight:500; }
.rg-hcol:hover .rg-hcol__rate{ color:var(--rg-espresso); }

/* detail block — collapsed until the sheet is down */
.rg-hcol__more{ display:flex; flex-direction:column; align-items:center; gap:1rem;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height 0.5s var(--ease-out), opacity 0.35s var(--ease-out); }
.rg-hcol:hover .rg-hcol__more{ max-height:320px; opacity:1;
  transition:max-height 0.55s var(--ease-out), opacity 0.45s var(--ease-out) 0.18s; }
.rg-hcol__addr{ margin:0; max-width:30ch; font-family:var(--font-sans); font-weight:300;
  font-size:var(--type-sm); line-height:1.75; color:var(--text-body); }
.rg-hcol__btn{ display:inline-flex; align-items:center; justify-content:center; min-height:46px;
  margin-top:0.2rem; padding:0 2.2rem; border:1px solid var(--rg-copper); border-radius:999px;
  font-family:var(--font-sans); font-size:0.72rem; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--rg-ivory); background:var(--rg-copper);
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.rg-hcol:hover .rg-hcol__btn{ background:var(--rg-copper-deep); color:var(--rg-ivory); }

/* a property with no site yet — still solid, but visibly inert */
.rg-hcol--soon{ cursor:default; }
.rg-hcol--soon .rg-hcol__btn{ background:var(--rg-stone); border-color:var(--rg-stone); color:var(--rg-ivory); }
.rg-hcol--soon:hover .rg-hcol__btn{ background:var(--rg-stone); color:var(--rg-ivory); }

@media (max-width:820px){
  /* no hover on touch — stack the columns and show every detail up front */
  .rg-hoverlay__cols{ flex-direction:column; height:100%; overflow-y:auto;
    padding:72px 0 24px; -webkit-overflow-scrolling:touch; }
  .rg-hcol{ flex:0 0 auto; border-left:0; border-top:1px solid var(--rg-line); }
  .rg-hcol:first-child{ border-top:0; }
  .rg-hcol__sheet{ transform:none; }
  .rg-hcol__tint{ opacity:0; }
  .rg-hcol__badge{ background:transparent; box-shadow:none; width:150px; height:78px; }
  .rg-hcol__rule{ opacity:1; }
  .rg-hcol__name{ color:var(--rg-espresso); }
  .rg-hcol__loc{ color:var(--rg-copper); }
  .rg-hcol__rate{ color:var(--rg-espresso); }
  .rg-hcol__more{ max-height:none; opacity:1; overflow:visible; }
  /* the fill is the resting state at every width now, so nothing to restate
     here — the disc still supplies the icon's contrast, so it stays ivory */
}

@media (prefers-reduced-motion: reduce){
  .rg-hoverlay, .rg-hoverlay__bg img, .rg-hcol, .rg-hcol__sheet, .rg-hcol__more,
  .rg-hcol__badge, .rg-hcol__rule, .rg-hcol__name, .rg-hcol__loc{ transition:none !important; }
  .rg-hcol{ opacity:1 !important; transform:none !important; }
}

/* ── Slide-out menu: re-anchor the existing panel to the LEFT edge ─────
   The hamburger now lives at the top-left, so the panel arrives from that
   side. Selectors are deliberately two-deep: each page's inline <style> is
   parsed after this file, so a single-class rule here would lose to it. */
.rg-railnav[data-railmenu]{ z-index:90; }
.rg-railnav .rg-railnav__panel{ right:auto; left:0; border-left:0;
  border-right:1px solid var(--rg-line-gold); transform:translateX(-12px); }
.rg-railnav.is-open .rg-railnav__panel{ transform:translateX(0); }
/* The parent links are max-content too (set in rg-inner.css and in the group
   homepage's inline style); cap them so a long one wraps inside the panel
   instead of running past it, as the hotel sub-links did. */
.rg-railnav .rg-railnav__link{ max-width:100%; }
/* Panel width: 35% of the viewport. Set here rather than in rg-inner.css
   because the group homepage carries its own inline copy of the panel rules —
   this two-deep selector outranks both, so one line governs all 49 pages.
   The floor stops it collapsing on a small laptop; the phone block further
   down still takes it to full width. */
.rg-railnav .rg-railnav__panel{ width:max(340px, 35vw); }

/* ── Hero video ──────────────────────────────────────────────────────── */
.rg-hhero__video{ position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:cover; object-position:center; background:var(--rg-espresso); }
/* The hero booking bar was removed from both pages. Its styles are parked in
   rg-bookbar.css (unlinked) — link that file and re-add the <form> markup to
   bring the component back. */

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .rg-navlinks{ gap:1.1rem; }
  .rg-navlink{ font-size:0.72rem; letter-spacing:0.12em; }
}

@media (max-width:820px){
  .rg-topnav__inner{ --rg-nav-h:74px; padding:0 0.9rem; gap:0.5rem; }
  .rg-topnav.is-solid .rg-topnav__inner{ --rg-nav-h:68px; }

  /* ---- Two bars on mobile -------------------------------------------
     A strip carrying "Go Back to RG Group", and under it the real navbar:
     hamburger, wordmark, Book Now. The link cannot share a line with the
     wordmark on a phone (it needs ~157px and there are ~122px going spare),
     and it is the only way back to the group site without opening the menu,
     so it gets a strip of its own rather than being buried.

     display:contents dissolves .rg-topnav__left so the hamburger and the
     link become grid items of the bar itself — that is what lets the link
     span the full width above while the hamburger stays bottom-left. The
     markup is untouched, which matters: this nav is on all 49 pages. */
  .rg-topnav__left{ display:contents; }
  /* 1fr auto 1fr, not auto 1fr auto: equal side tracks are what actually
     centres the wordmark in the bar. Sizing the sides to their content
     instead centres it in the leftover space, which lands off-centre because
     Book Now is far wider than the hamburger. */
  /* row-gap and padding-bottom are deliberately the SAME value: the gap above
     the button is the row-gap and the gap below it is the bottom padding, so
     any difference reads as the button sitting off-centre between the hairline
     and the bar's edge. They were 3.2px and 6.4px. Where the row is taller
     than the button (the wordmark is 50px above 600px) the button centres in
     it, which adds the same few pixels to both gaps and keeps them even. */
  .rg-topnav__inner{ grid-template-columns:1fr auto 1fr; grid-template-rows:auto auto;
    height:auto; min-height:var(--rg-nav-h); align-items:center;
    padding-top:0.35rem; padding-bottom:0.5rem; row-gap:0.5rem; column-gap:0.5rem; }

  .rg-navlinks{ display:flex; grid-column:1 / -1; grid-row:1; width:100%; }
  /* "Our Hotels" stays in the slide-out menu — only the back link rides the strip */
  .rg-navlinks .rg-navlink:not(.rg-navlink--back){ display:none; }
  .rg-navlink--back{ display:inline-flex; justify-content:center; width:100%;
    min-height:32px; font-size:0.66rem; letter-spacing:0.1em; }
  /* hairline under the strip, as a separate bar reads. :has() keeps it off the
     group's own pages, where the strip is empty and a rule would be a stray
     line; without :has() support you simply lose the hairline. */
  .rg-navlinks:has(.rg-navlink--back){ border-bottom:1px solid rgba(244,236,223,0.20); }
  .rg-topnav.is-solid .rg-navlinks:has(.rg-navlink--back){ border-bottom-color:var(--rg-line); }
  /* the strip's own underline pseudo would double up with that hairline */
  .rg-navlink--back::after{ content:none; }

  .rg-navburger{ grid-column:1; grid-row:2; justify-self:start; }
  .rg-topnav__brand{ grid-column:2; grid-row:2; justify-self:center; margin-left:0; }
  .rg-topnav__right{ grid-column:3; grid-row:2; justify-self:end; }
  .rg-topnav__brand img{ height:50px; }
  .rg-topnav.is-solid .rg-topnav__brand img{ height:46px; }
  /* padding stays the em pair from the base rule — only the type shrinks, so
     the button keeps the same proportions as every other button */
  .rg-navbook{ font-size:0.72rem; letter-spacing:0.12em; }
  /* Book Now sits 20% darker on touch — the same value its desktop :hover
     used, promoted to the resting state since there is no hover to reveal it.
     --rg-copper-deep is the fallback where color-mix() is unsupported. */
  .rg-navbook{ background:var(--rg-copper-deep); border-color:var(--rg-copper-deep);
    background:color-mix(in srgb, var(--rg-copper) 80%, #000);
    border-color:color-mix(in srgb, var(--rg-copper) 80%, #000); }
  /* Edge to edge on a phone. It used to stop at 86vw, leaving a strip of
     scrim down one side — and the hotel names now carry their locality
     ("RG Royal Hotel & Convention, Mahalakshmi Layout"), which needs the
     full width. Tapping the scrim to close is gone at this width; the close
     button in the corner is the way out. */
  .rg-railnav .rg-railnav__panel{ width:100%; max-width:none; }
}

@media (max-width:480px){
  .rg-topnav__inner{ --rg-nav-h:66px; }
  .rg-topnav__brand img{ height:44px; }
  .rg-navbook{ font-size:0.66rem; }
}

@media (prefers-reduced-motion: reduce){
  .rg-topnav, .rg-topnav__inner, .rg-topnav__brand img, .rg-navbook, .rg-navdrop{
    transition:none !important; }
}

/* ── Slide-out menu: property sub-list under "Our Hotels" ─────────────
   The three hotels hang off the Our Hotels entry as a subordinate group —
   smaller sans type against the Cormorant parents, indented behind a copper
   hairline. Lives here rather than in rg-inner.css because the group
   homepage links only styles.css + rg-navhero.css. */
.rg-railnav__sub{ display:flex; flex-direction:column;
  margin:0.3rem 0 0.7rem 0.15rem; padding-left:1.05rem;
  border-left:1px solid var(--rg-line-gold); }
/* max-content keeps the hit area tight to the text, but on its own it lets a
   long name overrun the panel — max-width caps it so the line wraps instead. */
.rg-railnav__sublink{ position:relative; width:max-content; max-width:100%;
  font-family:var(--font-sans); font-weight:300; font-size:0.84rem;
  letter-spacing:0.03em; line-height:2.1; color:var(--rg-taupe); text-decoration:none;
  transition:color var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out); }
.rg-railnav__sublink:hover{ color:var(--rg-copper); padding-left:0.4rem; }
/* A property whose own site does not exist yet: same row, muted, and not a
   link at all (it is rendered as a <span>). It gets its destination when the
   child site is built — matches .rg-hcol--soon in the hotels overlay. */
.rg-railnav__sublink.is-soon{ color:var(--rg-stone); cursor:default; }
.rg-railnav__sublink.is-soon::after{ content:'Soon'; margin-left:0.6em;
  font-size:0.62rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--rg-taupe); opacity:0.75; }
.rg-railnav__sublink.is-soon:hover{ color:var(--rg-stone); padding-left:0; }
@media (max-width:820px){
  /* Full-width rows so a wrapped name has the whole panel to use, with the
     leading dropped to 1.5 — 2.2 was set for single lines and would gape
     between two. Padding + min-height hold the 44px tap target that the tall
     line-height used to provide on its own. */
  .rg-railnav__sublink{ display:flex; align-items:center; width:auto; max-width:100%;
    min-height:44px; padding:0.3rem 0; font-size:0.86rem; line-height:1.5; }
}


/* ---- Slider dots ------------------------------------------------------
   THE paging control for every carousel on the site — there are no prev/next
   arrows anywhere except the full-screen lightbox, where a dot row for forty
   images would be unusable. One geometry everywhere: a 30x2 rule, ink at 28%
   until it is the active slide, then copper. The vertical padding is
   transparent (background-clip:content-box) so the hairline still carries a
   44px tap target. Defined here because this is the one stylesheet both
   homepages and every inner page link. */
.rg-dots{ --dot-w:30px; --dot-pad:21px;
  --dot-ink:var(--rg-line-strong);
  --dot-ink-hover:var(--rg-copper-light);
  --dot-ink-on:var(--rg-copper);
  display:flex; align-items:center; justify-content:center; gap:0.55rem; }
.rg-dot{ width:var(--dot-w); height:2px; padding:var(--dot-pad) 0; box-sizing:content-box;
  border:0; border-radius:0; cursor:pointer;
  background-color:var(--dot-ink); background-clip:content-box;
  transition:background-color var(--dur-base) var(--ease-out); }
.rg-dot:hover{ background-color:var(--dot-ink-hover); }
.rg-dot.is-on{ background-color:var(--dot-ink-on); }
/* over a photograph the ink flips — the 28% espresso rule disappears on one */
.rg-dots--dark{ --dot-pad:12px;
  --dot-ink:rgba(244,236,223,0.5);
  --dot-ink-hover:rgba(244,236,223,0.85);
  --dot-ink-on:var(--rg-gold); }
@media (max-width:820px){ .rg-dots{ --dot-pad:14px; --dot-w:26px; gap:0.5rem; } }
@media (prefers-reduced-motion: reduce){ .rg-dot{ transition:none; } }

/* ---- Accessibility utilities ----------------------------------------
   Both selectors are referenced by the markup on every page: an <h1
   class="sr-only"> carrying the site name for search and screen readers, and
   the "Skip to main content" link that must precede the navbar in the DOM.
   Neither had a rule anywhere in the stylesheets, so both were painting as
   plain black text over the top of the hero. Defined here because every page
   that uses them already links this file. */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0; }

/* Off-screen until tabbed to, then it drops down over the navbar. Kept
   focusable (not display:none) — hiding it outright would defeat its purpose. */
.skip-link{ position:fixed; left:50%; top:0; z-index:200;
  transform:translate(-50%,-130%);
  padding:0.85rem 1.6rem; background:var(--rg-espresso); color:var(--rg-ivory);
  font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-button); text-transform:uppercase; text-decoration:none;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  transition:transform var(--dur-base) var(--ease-out); }
.skip-link:focus{ transform:translate(-50%,0);
  outline:2px solid var(--rg-gold); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .skip-link{ transition:none; } }