/* RG Royal — Inner pages shell
   ------------------------------------------------------------------
   The child homepage (rg-royal-hotel.html) carries its component CSS
   inline. The inner pages share this file instead, so every sub-page inherits
   the SAME design language as the homepage: copper-on-ivory, Cormorant display
   over Hanken body, uppercase letter-spaced eyebrows, hairline ornaments,
   slow scroll-reveal, and the peel-off copper footer.

   Link order on an inner page:
     styles.css  →  rg-navhero.css  →  rg-inner.css  →  (optional page <style>)

   Part 1 duplicates the homepage's shared primitives verbatim (reveal, button,
   eyebrow, band/wrap/vword, framed image, pull-quote, headings, footer) so the
   pages stand alone. Part 2 adds the inner-page-only compositions.        */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* clip (not hidden) — keeps body out of being a scroll container, which would
   break the IntersectionObserver timing the reveal utilities rely on */
html, body{ overflow-x:clip; }
body{ margin:0; background-color:var(--rg-ivory);
  background-image:url(../images/bg-2.jpg);
  background-size:cover; background-position:center top; background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--text-body); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
svg.lucide{ width:18px; height:18px; stroke-width:1.5; }

/* ==================================================================
   PART 1 — primitives shared with the homepage
   ================================================================== */

/* ---- Scroll-reveal ------------------------------------------------ */
[data-reveal]{ opacity:0; transform:translateY(28px);
  transition:opacity var(--dur-reveal) var(--ease-silk), transform var(--dur-reveal) var(--ease-silk);
  transition-delay:var(--reveal-delay,0ms); will-change:opacity,transform; }
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; } }

/* ---- Image clip-wipe reveal — directional ------------------------- */
[data-img-reveal]{ position:relative; overflow:hidden; will-change:clip-path;
  transition:clip-path 1.15s var(--ease-silk); }
[data-img-reveal] img, [data-img-reveal] > picture img, [data-img-reveal] video{
  transition:transform 1.45s var(--ease-silk); will-change:transform; }
[data-img-reveal].is-shown{ clip-path:inset(0 0 0 0) !important; }
[data-img-reveal].is-shown img, [data-img-reveal].is-shown > picture img,
[data-img-reveal].is-shown video{ transform:none !important; }
[data-img-reveal], [data-img-reveal="up"]{ clip-path:inset(0 0 100% 0); }
[data-img-reveal] img, [data-img-reveal="up"] img{ transform:translateY(5%) scale(1.12); }
[data-img-reveal="down"]{ clip-path:inset(100% 0 0 0); }
[data-img-reveal="down"] img{ transform:translateY(-5%) scale(1.12); }
[data-img-reveal="left"]{ clip-path:inset(0 0 0 100%); }
[data-img-reveal="left"] img{ transform:translateX(5%) scale(1.12); }
[data-img-reveal="right"]{ clip-path:inset(0 100% 0 0); }
[data-img-reveal="right"] img{ transform:translateX(-5%) scale(1.12); }

/* ---- Text line-rise from mask ------------------------------------- */
.rg-tl{ display:block; overflow:hidden; padding:0.04em 0; }
.rg-tl__in{ display:block; transform:translateY(115%);
  transition:transform 0.9s var(--ease-silk); will-change:transform; }
[data-text-reveal].is-shown .rg-tl__in{ transform:translateY(0); }

/* ---- Parallax ------------------------------------------------------ */
[data-parallax]{ overflow:hidden; }
[data-parallax] img{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  [data-img-reveal]{ clip-path:none !important; }
  [data-img-reveal] img{ transform:none !important; }
  .rg-tl__in{ transform:none !important; }
  [data-parallax] img{ transform:none !important; } }

/* ---- Button -------------------------------------------------------- */
.rg-btn{ display:inline-flex; align-items:center; gap:0.85em; font-family:var(--font-sans);
  font-weight:var(--w-medium); letter-spacing:var(--ls-button); text-transform:uppercase;
  text-decoration:none; line-height:1; cursor:pointer; border:1px solid transparent;
  border-radius:var(--radius-sm); -webkit-font-smoothing:antialiased;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
/* One padding pair per size, used by every button on the site including Book
   Now. min-height pins the box so the height is the same whatever the label
   or the font-size does — the md button is 44px everywhere, which is also the
   tap-target minimum. */
.rg-btn--sm{ padding:0.55em 1.4em; min-height:38px; font-size:var(--type-eyebrow); }
/* 38px is fine for a mouse but under the 44px minimum tap target the project
   holds itself to, so the small button grows on touch widths. Only the height
   changes; padding, type and colour are untouched. */
@media (max-width:820px){ .rg-btn--sm{ min-height:44px; } }
.rg-btn--md{ padding:0.7em 1.8em; min-height:44px; font-size:0.8125rem; }
/* TWO button appearances, split by job rather than by name.
   Every button on the site is hollow — a copper hairline with copper text —
   and fills solid copper on hover. Book Now is the exception: it is the one
   action we are actually selling, so it starts solid and DARKENS on hover.
   That gives the booking CTA the only filled box on a page at rest.
   --solid and --outline still resolve to the same thing; they are kept as
   separate names only because the markup on 24 pages uses both. */
/* Hairline in --rg-copper, label one step down in --rg-copper-deep: plain
   copper as small uppercase text on the ivory ground is only 3.4:1, while
   copper-deep is 4.9:1. The border is a UI edge, not text, so copper is fine
   there and the button still reads as one copper. */
.rg-btn--solid, .rg-btn--outline{
  background:transparent; border-color:var(--rg-copper); color:var(--rg-copper-deep); }
.rg-btn--solid:hover, .rg-btn--outline:hover{
  background:var(--rg-copper); border-color:var(--rg-copper); color:var(--rg-ivory); }
/* On an espresso ground copper on brown is too close a pair, so the hairline
   and the ink are ivory, and the hover fill is ivory with espresso ink. */
.rg-btn--solid.rg-btn--ondark, .rg-btn--outline.rg-btn--ondark{
  background:transparent; border-color:var(--rg-ivory); color:var(--rg-ivory); }
.rg-btn--solid.rg-btn--ondark:hover, .rg-btn--outline.rg-btn--ondark:hover{
  background:var(--rg-ivory); border-color:var(--rg-ivory); color:var(--rg-espresso); }

/* Book Now: solid at rest, darker on hover. Same recipe as the header's
   .rg-navbook and the booking bar's .rg-bookbtn, so all three read as one
   control. --rg-copper-deep is the fallback for engines without color-mix(). */
.rg-btn--book, .rg-btn--book.rg-btn--ondark{
  background:var(--rg-copper); border-color:var(--rg-copper); color:var(--rg-ivory); }
.rg-btn--book:hover, .rg-btn--book.rg-btn--ondark: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); }
/* The underline lives in the shared link rule at the foot of this file, not
   here — see "Text links". */
.rg-btn--link{ display:block; padding:0.4em 0; background:transparent; color:var(--rg-copper); border-radius:0; }
.rg-btn--link:hover .rg-btn__arrow{ transform:translateX(5px); }
/* Filled buttons space the arrow with the flex gap; the link variant is a
   block box, so there its spacing has to be a margin. */
.rg-btn--link .rg-btn__arrow{ margin-left:0.6em; }
.rg-btn__arrow{ display:inline-block; transition:transform var(--dur-base) var(--ease-out); }
.rg-btn:active{ transform:translateY(0.5px); }

/* ---- Eyebrow ------------------------------------------------------- */
.rg-eyebrow{ display:flex; align-items:center; gap:1em; margin:0; font-family:var(--font-sans);
  font-size:var(--type-eyebrow); font-weight:var(--w-medium); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--rg-copper); }
.rg-eyebrow--center{ justify-content:center; }
.rg-eyebrow--light{ color:var(--rg-gold); }
.rg-eyebrow__rule{ display:inline-block; width:34px; height:1px; background:currentColor; opacity:0.7;
  vertical-align:middle; flex:none; }

/* ---- Rail slide-out nav panel (opened by the navbar hamburger) ----- */
.rg-railnav{ position:fixed; inset:0; z-index:75; }
.rg-railnav[hidden]{ display:none; }
.rg-railnav__scrim{ position:absolute; inset:0; background:rgba(26,23,20,0.42);
  opacity:0; transition:opacity var(--dur-base) var(--ease-out); }
.rg-railnav.is-open .rg-railnav__scrim{ opacity:1; }
/* right:76px is an inset from the old fixed rail; on a phone it pushes a
   86vw panel partly off the left edge, so it goes flush below 820px (see the
   mobile block at the foot of this file). */
.rg-railnav__panel{ position:absolute; top:0; bottom:0; right:76px; width:min(360px,80vw);
  background:rgba(250,246,239,0.99); border-left:1px solid var(--rg-line-gold); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; justify-content:center;
  /* "safe" so a menu taller than the panel (RG Grand has the longest) falls
     back to top-aligned instead of overflowing past its own top padding and
     sliding the first link up under the close button. */
  justify-content:safe center; gap:0.2rem;
  /* 4.5rem of top padding reserves a row for the absolutely-positioned close
     button (which ends at 3.7rem), so the first link can never sit under it —
     it did on RG Grand, whose menu is long enough to raise a scrollbar that
     shifts the button 15px further left, straight into the back-link. */
  padding:4.5rem clamp(2rem,5vw,3.5rem) clamp(2rem,5vw,3.5rem);
  transform:translateX(12px); opacity:0; pointer-events:none; overflow-y:auto;
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.rg-railnav__panel::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rule-gold); }
.rg-railnav.is-open .rg-railnav__panel{ transform:translateX(0); opacity:1; pointer-events:auto; }
.rg-railnav__eyebrow{ font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-copper); margin-bottom:1.2rem; }
.rg-railnav__link{ position:relative; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1.62; color:var(--rg-espresso); text-decoration:none;
  width:max-content; transition:color var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out); }
.rg-railnav__link::before{ content:''; position:absolute; left:0; top:50%; width:0; height:1px;
  background:var(--rg-copper); transition:width var(--dur-base) var(--ease-out); }
.rg-railnav__link:hover, .rg-railnav__link.is-active{ color:var(--rg-copper); padding-left:2.6rem; }
.rg-railnav__link:hover::before, .rg-railnav__link.is-active::before{ width:2rem; }
/* The back-to-group link now opens the menu rather than closing it, so its
   spacing hangs BELOW it, and a hairline separates it from the property's own
   sections. It keeps its own arrow, so it skips the sliding copper rule. */
/* NOT width:100% — a full-width box runs underneath the absolutely-positioned
   close button in the panel's top-right corner. Inheriting max-content keeps
   the rule under the label only, and clear of the X. */
.rg-railnav__link--gold{ margin:0 0 1.3rem; padding-bottom:0.9rem; padding-right:1.4rem;
  border-bottom:1px solid var(--rg-line);
  font-size:clamp(1rem,1.6vw,1.15rem); color:var(--rg-copper);
  font-family:var(--font-sans); font-weight:500; letter-spacing:0.04em; }
/* the back-link carries its own arrow, so it skips the sliding copper rule */
.rg-railnav__link--gold::before{ content:none; }
.rg-railnav__link--gold:hover, .rg-railnav__link--gold.is-active{ padding-left:0; }
.rg-railnav__close{ position:absolute; top:1.6rem; right:1.6rem; width:34px; height:34px; border:0;
  background:transparent; cursor:pointer; }
.rg-railnav__close span{ position:absolute; left:5px; top:16px; width:24px; height:1.4px; background:var(--rg-espresso);
  transition:background var(--dur-base) var(--ease-out); }
.rg-railnav__close span:nth-child(1){ transform:rotate(45deg); }
.rg-railnav__close span:nth-child(2){ transform:rotate(-45deg); }
.rg-railnav__close:hover span{ background:var(--rg-copper); }
@media(max-width:820px){
  /* MOBILE ONLY. The panel centres its links, which on a tall phone leaves a
     dead band above "Home". Start them at the top instead, with just enough
     padding to clear the absolutely-positioned close button. */
  .rg-railnav__panel{ right:0; justify-content:flex-start; padding-top:4rem; }
}

/* ---- Band / Wrap / VWord / Framed image ---------------------------- */
/* One vertical rhythm for every inner-page section. --band-y is the single
   knob: a band pays it top and bottom, so the gap between any two sections is
   always 2x --band-y regardless of what they contain. The old rule padded the
   bottom harder than the top, which made every section boundary a different
   height depending on which modifier the markup happened to carry. */
/* --band-y / --row-y / --head-gap all live in tokens/spacing.css — the one
   place the ladder is defined, shared with the homepages. */
.rg-band{ position:relative; overflow:hidden; padding:var(--band-y) 0; }
/* The tint changes the ground, NOT the rhythm. It used to carry 1.5x --band-y,
   which meant a boundary measured 144px between two plain sections, 180px when
   one side was tinted and 216px between two tinted ones — three different gaps
   for the same kind of join. One step for every section; --roomy stays as an
   opt-in for the rare panel that genuinely needs more. */
.rg-band--alt{ background:rgba(234,224,207,0.55); padding-block:var(--band-y); }
/* Kept for existing markup — symmetric now, so they scale the rhythm rather
   than breaking it on one side only. */
.rg-band--tight{ padding-block:calc(var(--band-y) * 0.62); }
.rg-band--pad{ padding-block:var(--band-y); }
/* The panel step, for a section that wants the roomier inset without the tint.
   Same value as --band-y doubled in .rg-band--alt, still off the token so it
   scales with everything else. */
.rg-band--roomy{ padding-block:calc(var(--band-y) * 1.5); }
/* An intro and the content it introduces are ONE block, so they join at the
   block gap (50px) rather than a section boundary (100px) — each side gives up
   half its step. This happens automatically for any band whose content is an
   .rg-intro, so a page does not have to be hand-tagged; the explicit classes
   below stay for markup that already carries them and resolve to the same
   number. */
.rg-band:has(.rg-intro){ padding-bottom:calc(var(--band-y) * 0.5); }
.rg-band:has(.rg-intro) + section{ padding-top:calc(var(--band-y) * 0.5); }
.rg-band--seambelow{ padding-bottom:calc(var(--band-y) * 0.5); }
.rg-band--seamabove{ padding-top:calc(var(--band-y) * 0.5); }
.rg-wrap{ position:relative; z-index:1; max-width:1140px; margin:0 auto; padding:0 clamp(1.5rem,8vw,150px); }
.rg-wrap--wide{ max-width:1320px; }
/* Inner pages sit the watermark behind body copy more often than the homepage
   does, so it is dialled back a touch to keep the text crisp. */
.rg-vword{ position:absolute; font-family:var(--font-display); font-weight:400; line-height:0.8;
  letter-spacing:0.03em; white-space:nowrap; pointer-events:none; user-select:none; z-index:0;
  color:var(--rg-espresso); opacity:0.045; }
.rg-vword--left{ left:clamp(-1.5rem,-0.5vw,-0.25rem); top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; font-size:clamp(3.5rem,10vw,10rem); }
.rg-vword--right{ right:clamp(-0.5rem,0.5vw,1rem); top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; font-size:clamp(3.5rem,10vw,10rem); }
.rg-vword--top-right{ right:clamp(1rem,3vw,4rem); top:clamp(1.5rem,4vw,4rem); font-size:clamp(4rem,12vw,12rem); }
.rg-vword--top-left{ left:clamp(1rem,3vw,4rem); top:clamp(1.5rem,4vw,4rem); font-size:clamp(4rem,12vw,12rem); }

.rg-fimg{ position:relative; }
/* was ".rg-fimg--tl .rg-fimg--br .rg-fimg-frame" — a descendant chain that can
   never match (no --br inside a --tl), so the frame lost its clipping and the
   image's hover zoom spilled outside it. */
.rg-fimg-frame{ position:relative; overflow:hidden; border-radius:var(--radius-sm); background:var(--rg-sand); z-index:1; }
.rg-fimg-frame img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-zoom) var(--ease-out); }
.rg-fimg:hover .rg-fimg-frame img{ transform:scale(1.05); }

/* ---- Pull-quote ---------------------------------------------------- */
.rg-pquote{ position:relative; max-width:980px; margin:0 auto;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:stretch; gap:clamp(1.6rem,5vw,4.5rem); }
.rg-pquote__orn{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.9rem; padding:clamp(1rem,3vw,2.4rem) 0; }
.rg-pquote__orn .vline{ width:1px; flex:1; min-height:90px;
  background:linear-gradient(to bottom, transparent, var(--rg-line-gold) 14%,
    var(--rg-line-gold) 86%, transparent); }
.rg-pquote__orn .dia{ width:7px; height:7px; flex:none; transform:rotate(45deg);
  border:1px solid var(--rg-copper); background:transparent; }
.rg-pquote__inner{ position:relative; text-align:center; display:flex;
  flex-direction:column; align-items:center; gap:var(--sp-3);
  padding:clamp(1.8rem,3.4vw,3rem) clamp(1rem,3vw,2.4rem); }
.rg-pquote__inner::before{ content:'\201C'; position:absolute; top:-0.18em; left:50%;
  transform:translateX(-50%); font-family:var(--font-display); font-weight:400;
  font-size:clamp(6rem,12vw,11rem); line-height:1; color:var(--rg-copper); opacity:0.07;
  pointer-events:none; z-index:0; }
.rg-pquote__mark{ position:relative; z-index:1; font-family:var(--font-display);
  font-size:clamp(2.2rem,3.6vw,3rem); line-height:0.5; color:var(--rg-copper); opacity:0.55; }
.rg-pquote__text{ position:relative; z-index:1; margin:0; font-family:var(--font-display);
  font-weight:300; font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.32;
  color:var(--rg-espresso); text-wrap:balance; }
.rg-pquote__rule{ position:relative; z-index:1; width:48px; height:1px; background:var(--rg-copper); }
.rg-pquote__cite{ position:relative; z-index:1; font-family:var(--font-sans);
  font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-taupe); }
@media(max-width:680px){ .rg-pquote{ grid-template-columns:1fr; gap:0; }
  .rg-pquote__orn{ display:none; } }

/* ---- Centred section heading --------------------------------------- */
.rg-chead{ text-align:center; margin-bottom:var(--head-gap); display:flex; flex-direction:column;
  gap:var(--sp-3); align-items:center; }
.rg-chead--tight{ margin-bottom:var(--head-gap); }
.rg-chead h1, .rg-chead h2{ margin:0; font-family:var(--font-display); font-weight:400; font-size:var(--type-display);
  line-height:var(--lh-snug); color:var(--rg-espresso); }
.rg-chead p{ margin:0; max-width:56ch; font-family:var(--font-sans); font-weight:300;
  font-size:var(--type-body); line-height:var(--lh-body); color:var(--text-body); }

/* ---- Editorial heading with the vertical diamond rule -------------- */
.rg-fachead{ display:flex; align-items:stretch; gap:clamp(1.4rem,2.6vw,2.4rem);
  width:fit-content; margin:0 auto var(--head-gap); }
.rg-fachead--left{ margin-left:0; }
.rg-fachead__rule{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.7rem; flex:none; }
.rg-fachead__rule > .line{ width:1px; flex:1; min-height:42px; background:var(--rg-line-strong); }
.rg-fachead__rule > .dia{ writing-mode:vertical-rl; font-size:0.62rem; letter-spacing:0.18em;
  color:var(--rg-copper); line-height:1.5; flex:none; }
.rg-fachead__main{ display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(0.5rem,1.2vw,1rem); padding:clamp(0.4rem,1vw,0.9rem) 0; }
.rg-fachead__main h2{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.2rem,5vw,4rem); line-height:1.04; color:var(--rg-espresso); text-wrap:balance; }
.rg-fachead__sub{ font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.2rem,2vw,1.7rem); letter-spacing:0.01em; color:var(--rg-copper); }
@media(max-width:600px){ .rg-fachead{ gap:1rem; } .rg-fachead__rule > .dia{ font-size:0.55rem; } }

/* ---- Horizontal diamond rule (dining-head ornament) ---------------- */
.rg-drule{ display:flex; align-items:center; gap:0.8rem; }
.rg-drule .dia{ font-size:0.6rem; letter-spacing:0.2em; color:var(--rg-copper); }
.rg-drule .line{ height:1px; width:clamp(48px,10vw,120px); background:var(--rg-line-strong); }

/* ==================================================================
   PART 2 — inner-page compositions
   ================================================================== */

/* ---- Page hero -----------------------------------------------------
   A full-bleed still under the transparent navbar, opening with the same
   espresso curtain wipe + slow ken-burns settle as the homepage hero. The
   title block rises out of a mask over the scrim.                     */
.rg-phero{ position:relative; height:clamp(420px,82vh,900px); overflow:hidden; }
.rg-phero__media{ position:absolute; inset:0; overflow:hidden; }
.rg-phero__media img{ width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.14); animation:rgPHeroKen 7s var(--ease-silk) forwards; }
@keyframes rgPHeroKen{ to{ transform:scale(1.02); } }
/* A banner may carry footage instead of a still (about-us). It fills the frame
   the same way but takes no ken-burns push — the footage supplies its own
   movement, and scaling it would fight that. */
.rg-phero__media video{ width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; background:var(--rg-espresso); }
/* Focal-point override. `cover` at banner proportions crops a landscape
   photograph hard from top and bottom, which decapitates any subject sitting
   high in the frame — the spa Buddha (head at ~11% of a 3:2 frame) and the
   RG Grand tower (roofline at ~9%) both lose their tops at centre.
   15% clears both, and keeps clearing them on an ultrawide viewport, where
   the banner is proportionally shorter and the crop correspondingly deeper.
   The default stays centred, so no other banner moves. */
.rg-phero__media--high img,
.rg-phero__media--high video{ object-position:center 15%; }
.rg-phero__curtain{ position:absolute; inset:0; background:var(--rg-espresso); z-index:3;
  transform-origin:top; animation:rgPCurtain 1.1s var(--ease-silk) forwards; }
@keyframes rgPCurtain{ 0%{ transform:scaleY(1); } 100%{ transform:scaleY(0); } }
/* Image-only banner: the scrim exists solely to keep the transparent navbar
   legible over a bright photograph, so it fades out well before the foot. */
.rg-phero__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom,
    rgba(20,16,12,0.44) 0%, rgba(20,16,12,0.12) 38%, rgba(20,16,12,0) 72%); }
@media (prefers-reduced-motion: reduce){
  .rg-phero__curtain{ display:none; }
  .rg-phero__media img{ animation:none; transform:scale(1.02); } }

/* ---- Breadcrumb ---------------------------------------------------- */
/* 30px under the hero, 100px in from the page EDGE — the crumb aligns to the
   viewport, not to the centred content column, so its wrapper has to shed the
   .rg-wrap max-width and gutter (which put it ~231px in). Targeted with :has()
   so all 24 pages keep their existing markup.
   The 100px eases down on narrow screens; 30px is small enough to stay flat. */
.rg-wrap:has(> .rg-crumb){ max-width:none; margin:0; padding:0; }
/* The crumb is the first content under the hero, so the hero boundary is paid
   here: --hero-gap on top. The section that follows it then pays only
   --head-gap, not a full --band-y — the crumb and the page title are one head
   block, and stacking both steps is what pushed the h1 far below the hero. */
.rg-crumb{ padding:var(--hero-gap) 0 0 clamp(1.5rem,6vw,100px); }
.rg-wrap:has(> .rg-crumb) + section{ padding-top:var(--head-gap); }
/* Homepages have no crumb: the section after the hero wrapper pays the step
   directly (the wrapper itself carries no bottom padding). With no crumb line
   between them the first section opens on display type straight off the hero,
   so it pays the FULL section boundary, 2 x --band-y, not the crumb-sized
   --hero-gap. Kept in step with the copy in both homepages' own <style>. */
.rg-herowrap{ position:relative; padding-bottom:0; }
.rg-herowrap + section{ padding-top:calc(var(--band-y) * 2); }
.rg-crumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:0.55rem; margin:0; padding:0; list-style:none; }
.rg-crumb li{ display:flex; align-items:center; gap:0.55rem; font-family:var(--font-sans);
  font-size:var(--type-caption); font-weight:300; color:var(--rg-taupe); }
.rg-crumb li + li::before{ content:'/'; color:var(--rg-stone); }
.rg-crumb a{ transition:color var(--dur-base) var(--ease-out); }
.rg-crumb [aria-current]{ color:var(--rg-espresso); }

/* ---- Intro: display sentence beside a narrow body column ----------- */
/* Centred page intro — headline stacked over a single body column. This is the
   inner-page convention on all three reference sites; the two-column split it
   replaced is kept for the homepages, which do not load this file. */
/* No top padding: the band it sits in already supplies --band-y, and stacking
   the two is what made the intro sit far lower than every other section. The
   bottom is --head-gap: the intro introduces whatever follows it (the fact
   strip), so it is a heading-to-content gap, not a section gap. */
/* No bottom padding by default: when the intro is the only block in its band,
   the band's own --band-y is the whole boundary and a --head-gap on top of it
   made the first gap on those pages 150px where every other boundary is 100.
   It pays --head-gap only when another block follows it INSIDE the same band
   (the fact strip on about-us, dining, our-hotels...). */
.rg-intro{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--sp-5); padding:0; }
.rg-wrap > [data-reveal]:not(:last-child) .rg-intro{ padding-bottom:var(--head-gap); }
.rg-intro__title{ margin:0; max-width:22ch; font-family:var(--font-display); font-weight:400;
  font-size:var(--type-pagetitle); line-height:1.1; color:var(--rg-espresso); text-wrap:balance; }
.rg-intro__sub{ display:block; margin-top:0.5rem; font-family:var(--font-display);
  font-size:var(--type-sub); color:var(--rg-copper); }
.rg-intro__body{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); max-width:70ch; }
.rg-intro__body .rg-btnrow{ justify-content:center; }
.rg-intro__body .rg-chips{ justify-content:center; }
.rg-intro__body p{ margin:0; font-family:var(--font-sans); font-weight:300;
  font-size:var(--type-body); line-height:var(--lh-body); color:var(--text-body); }
/* Emphasis is colour only — the lead keeps the one paragraph family and size
   and just sits darker than the copy that follows it. */
.rg-intro__body p.lead{ color:var(--rg-bark); }


/* ---- Fact strip ----------------------------------------------------
   Layout idea taken from the reference properties' key-numbers band, drawn
   in the RG vocabulary: hairline dividers, copper serif figures.       */
.rg-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--rg-line); border-bottom:1px solid var(--rg-line); }
.rg-fact{ padding:clamp(1.4rem,3vw,2.2rem) clamp(0.8rem,2vw,1.6rem); text-align:center;
  border-left:1px solid var(--rg-line); display:flex; flex-direction:column; gap:0.45rem; }
.rg-fact:first-child{ border-left:0; }
.rg-fact__n{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.9rem,3.4vw,2.7rem);
  line-height:1; color:var(--rg-copper); }
.rg-fact__l{ font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-taupe); }
@media(max-width:640px){ .rg-fact{ border-left:0; border-top:1px solid var(--rg-line); }
  .rg-fact:first-child{ border-top:0; } }

/* ---- Editorial split row (alternating image / text) ---------------- */
.rg-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,5vw,4.5rem); align-items:center;
  padding:var(--row-y) 0; }
/* The outer split in a band drops the padding on the band's side, so a section
   boundary is 2x --band-y and never band + split + band stacked together. */
.rg-wrap > .rg-split:first-child,
.rg-wrap > [data-reveal]:first-child > .rg-split{ padding-top:0; }
.rg-wrap > .rg-split:last-child,
.rg-wrap > [data-reveal]:last-child > .rg-split{ padding-bottom:0; }
/* Each split is usually wrapped in its own [data-reveal], so the adjacent
   sibling selector alone never matched and the hairline between stacked rows
   went missing. */
.rg-split + .rg-split,
[data-reveal]:has(> .rg-split) + [data-reveal]:has(> .rg-split) > .rg-split{
  border-top:1px solid var(--rg-line); }
.rg-split--flip .rg-split__media{ order:2; }
.rg-split__media .rg-fimg-frame{ aspect-ratio:4 / 3; }
.rg-split__text{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-4); }
.rg-split__idx{ font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-copper); }
.rg-split__title{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.1; color:var(--rg-espresso); }
.rg-split__body{ margin:0; font-family:var(--font-sans); font-weight:300;
  font-size:var(--type-body); line-height:var(--lh-body); color:var(--text-body); max-width:52ch; }
/* one paragraph size sitewide — colour alone marks this as the secondary line */
.rg-split__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.9rem;
  font-family:var(--font-sans); font-weight:300; font-size:var(--type-body);
  line-height:var(--lh-body); color:var(--rg-taupe); }
/* a split can be an anchor target (our-hotels #rg-grand etc.) — clear the nav */
.rg-split[id]{ scroll-margin-top:120px; }
.rg-split__meta .sep{ color:var(--rg-stone); }
.rg-split__meta b{ font-weight:500; color:var(--rg-espresso); }
@media(max-width:860px){
  .rg-split{ grid-template-columns:1fr; gap:1.6rem; }
  .rg-split--flip .rg-split__media{ order:0; } }

/* ---- Amenity / facility chips + icon rows -------------------------- */
.rg-chips{ display:flex; flex-wrap:wrap; gap:0.55rem; }
/* borderless: an inline list of facts, not a row of boxes */
.rg-chip{ display:inline-flex; align-items:center; gap:0.5rem; padding:0;
  font-family:var(--font-sans); font-size:var(--type-caption); font-weight:300; color:var(--rg-bark);
  text-decoration:none; }
.rg-chips{ gap:0.5rem 1.6rem; }
a.rg-chip{ transition:color var(--dur-base) var(--ease-out); }
a.rg-chip:hover{ color:var(--rg-copper); }
.rg-chip svg{ width:15px; height:15px; color:var(--rg-copper); }

/* also used as a <ul>, so the list chrome is reset here */
.rg-amenrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0.9rem 1.6rem; margin:0; padding:0; list-style:none; }
/* sentence-length items, so they sit on the one paragraph size like the rest
   of the copy — colour is what marks them as a list rather than body text */
.rg-amen{ display:flex; align-items:center; gap:0.7rem; font-family:var(--font-sans);
  font-size:var(--type-body); line-height:var(--lh-body); font-weight:300; color:var(--rg-bark); }
.rg-amen svg{ width:17px; height:17px; flex:none; color:var(--rg-copper); }
.rg-amen.is-off{ color:var(--rg-stone); text-decoration:line-through; }
.rg-amen.is-off svg{ color:var(--rg-stone); }

/* ---- Facility group cards ------------------------------------------ */
.rg-fgroups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(1rem,2.4vw,1.8rem); }
.rg-fgroup{ background:rgba(255,255,255,0.62); border:1px solid var(--rg-line);
  border-radius:var(--radius-sm); padding:clamp(1.3rem,2.6vw,2rem);
  display:flex; flex-direction:column; gap:var(--sp-4); box-shadow:var(--shadow-sm); }
.rg-fgroup__head{ display:flex; flex-direction:column; gap:0.4rem; }
.rg-fgroup__head h3{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.25rem,2vw,1.55rem); color:var(--rg-espresso); }
.rg-fgroup__head .r{ width:44px; height:1px; background:var(--rg-copper); }
.rg-fgroup ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0.7rem; }

/* ---- Data table (rooms rates, venue capacities) --------------------
   Wrapped in .rg-tablewrap so wide tables scroll inside their own box
   rather than pushing the page sideways.                              */
.rg-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--rg-line); border-radius:var(--radius-sm); background:rgba(255,255,255,0.62); }
.rg-table{ width:100%; min-width:640px; border-collapse:collapse;
  font-family:var(--font-sans); font-size:var(--type-sm); }
.rg-table caption{ caption-side:top; padding:1rem 1.2rem 0; text-align:left;
  font-size:var(--type-eyebrow); font-weight:500; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--rg-copper); }
.rg-table th, .rg-table td{ padding:0.85rem 1.2rem; text-align:left; border-top:1px solid var(--rg-line);
  font-weight:300; color:var(--text-body); vertical-align:top; }
.rg-table thead th{ border-top:0; font-family:var(--font-sans); font-size:var(--type-eyebrow);
  font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--rg-espresso);
  background:rgba(234,224,207,0.6); white-space:nowrap; }
.rg-table tbody th{ font-family:var(--font-display); font-weight:500;
  font-size:1.05rem; color:var(--rg-espresso); white-space:nowrap; }
.rg-table tbody tr:hover{ background:rgba(234,224,207,0.35); }
.rg-table td.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.rg-tnote{ margin:0.9rem 0 0; font-family:var(--font-sans); font-size:var(--type-caption);
  font-weight:300; color:var(--rg-taupe); }

/* ---- Rate-plan tabs ------------------------------------------------- */
.rg-rtabs{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:var(--sp-5); }
.rg-rtab{ padding:0.7rem 1.3rem; border:1px solid var(--rg-line-gold); background:transparent;
  border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font-sans);
  font-size:var(--type-eyebrow); font-weight:500; letter-spacing:var(--ls-button);
  text-transform:uppercase; color:var(--rg-bark); min-height:44px;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out); }
.rg-rtab:hover{ color:var(--rg-copper); }
.rg-rtab.is-on{ background:var(--rg-copper); border-color:var(--rg-copper); color:var(--rg-ivory); }

/* ---- Offer / attraction / generic card grid ------------------------ */
/* a card used as a link target must clear the fixed navbar */
.rg-card[id]{ scroll-margin-top:120px; }
.rg-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--row-y); }
.rg-cards--3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
/* an even four — 2x2 rather than 3 + an orphan, and wide enough for two CTAs */
.rg-cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:820px){ .rg-cards--2{ grid-template-columns:1fr; } }
.rg-card{ display:flex; flex-direction:column; background:var(--rg-white);
  border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm);
  text-decoration:none; transition:box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out); }
.rg-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.rg-card__frame{ position:relative; overflow:hidden; aspect-ratio:3 / 2; background:var(--rg-sand); }
.rg-card__frame img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-zoom) var(--ease-out); }
.rg-card:hover .rg-card__frame img{ transform:scale(1.06); }
.rg-card__tag{ position:absolute; left:0; bottom:0; padding:0.5rem 0.9rem;
  background:rgba(26,23,20,0.72); color:var(--rg-gold-soft); font-family:var(--font-sans);
  font-size:0.66rem; font-weight:500; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; }
.rg-card__body{ display:flex; flex-direction:column; gap:0.75rem; padding:clamp(1.1rem,2.2vw,1.6rem); flex:1; }
.rg-card__title{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.25rem,2vw,1.5rem); line-height:1.16; color:var(--rg-espresso); }

/* ---- Room card head: title left, live "from" rate right ---------------
   The rate is filled by roomRates() in site.js from the Simplotel
   availability API and stays hidden until a real number arrives, so a
   sold-out room or a failed call simply shows the card as it was. */
/* baseline, not flex-start: the amount then sits on the room name's own
   baseline instead of floating above it */
.rg-card__head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:0.9rem 1.2rem; flex-wrap:wrap; }
.rg-card__head .rg-card__title{ flex:1 1 auto; min-width:0; }
/* Two tight lines, never three - "From ₹4,949" then the unit beneath. The
   block must not stand taller than the title or it opens a gap between the
   card head and the meta line below it. */
.rg-rate{ flex:none; margin:0; text-align:right; line-height:1.15; }
.rg-rate[hidden]{ display:none; }
.rg-rate__amt{ display:block; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--rg-copper); white-space:nowrap; }
.rg-rate__from{ font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-taupe); }
.rg-rate__unit{ display:block; margin-top:0.15rem; font-family:var(--font-sans); font-weight:300;
  font-size:var(--type-caption); line-height:1.3; color:var(--rg-taupe); white-space:nowrap; }
/* Narrow card: the rate drops to its own line under the name, left-aligned
   with it, rather than being squeezed into a column of its own. */
@media(max-width:520px){
  .rg-card__head{ gap:0.2rem; }
  .rg-rate{ text-align:left; }
}
.rg-card__text{ margin:0; font-family:var(--font-sans); font-weight:300;
  font-size:var(--type-body); line-height:var(--lh-body); color:var(--text-body); }
/* Room summary copy is written to land on two lines. Reserving that height
   keeps the Know More / Book Now row on the same line across a whole grid
   even when one card's text wraps shorter than its neighbour's. */
.rg-card__body .rg-card__text{ min-height:calc(2em * var(--lh-body)); }
/* Same paragraph family and size as the copy below it — only the colour marks
   it as the secondary line. */
.rg-card__meta{ margin:0; font-family:var(--font-sans); font-weight:300;
  font-size:var(--type-body); line-height:var(--lh-body); color:var(--rg-taupe); }
/* The rule sits between the title and the body copy, so its own margins are
   what open the title-to-paragraph gap on top of the flex gap. */
.rg-card__hr{ height:1px; background:var(--rg-line); margin:0.4rem 0 0.6rem; }
.rg-card .rg-btnrow{ margin-top:auto; padding-top:0.3rem; gap:0.6rem; }
/* padding-top rather than margin-top: margin-top:auto is what pins the CTA to
   the foot of an uneven card, and a second margin-top would cancel it. */
/* Block, not inline-flex: an underline propagates into every flex item, which
   is what put a separate stroke under the arrow. As a block with inline
   content the rule runs under the label only, and the inline-block arrow sits
   outside it. Underline itself: see "Text links" at the foot of this file. */
.rg-card__cta{ margin-top:auto; padding-top:0.9rem; display:block; align-self:flex-start;
  font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-button); text-transform:uppercase; color:var(--rg-copper); }
.rg-card__cta .a{ display:inline-block; margin-left:0.6em;
  transition:transform var(--dur-base) var(--ease-out); }
.rg-card:hover .rg-card__cta .a{ transform:translateX(5px); }

/* ---- Long-form prose (terms, policies, FAQ answers) -----------------
   One family and one size for every line of copy, exactly as elsewhere on
   the site — colour is the only emphasis. Bullets carry the paragraph
   metrics too, so a clause reads the same whether it is a sentence or a
   list item. Headings step down from the section head, never up. */
.rg-prose{ max-width:78ch; margin:0 auto; display:flex; flex-direction:column; gap:var(--sp-4); }
.rg-prose h3{ margin:var(--head-gap) 0 0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.3rem,2.2vw,1.75rem); line-height:var(--lh-snug); color:var(--rg-espresso); }
.rg-prose h3:first-child{ margin-top:0; }
.rg-prose p, .rg-prose li{ margin:0; font-family:var(--font-sans); font-weight:300;
  font-size:var(--type-body); line-height:var(--lh-body); color:var(--text-body); }
.rg-prose ul{ margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:0.6rem; }
.rg-prose li::marker{ color:var(--rg-copper); }
.rg-prose__note{ color:var(--rg-taupe); font-size:var(--type-sm); }

/* ---- Numbered list rows (nearby attractions) -----------------------
   Layout idea from the reference "Nearby Attractions" band, redrawn as an
   RG hairline list with copper index numerals.                        */
.rg-rows{ display:flex; flex-direction:column; }
.rg-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline;
  gap:clamp(1rem,3vw,2.4rem); padding:clamp(1.1rem,2.4vw,1.7rem) 0;
  border-top:1px solid var(--rg-line); }
.rg-row:last-child{ border-bottom:1px solid var(--rg-line); }
.rg-row__n{ font-family:var(--font-sans); font-size:var(--type-caption); font-weight:500;
  letter-spacing:0.14em; color:var(--rg-copper); font-variant-numeric:tabular-nums; }
.rg-row__main{ display:flex; flex-direction:column; gap:0.35rem; min-width:0; }
.rg-row__name{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.16; color:var(--rg-espresso); }
.rg-row__text{ margin:0; font-family:var(--font-sans); font-weight:300; font-size:var(--type-sm);
  line-height:var(--lh-body); color:var(--text-body); max-width:70ch; }
.rg-row__side{ font-family:var(--font-sans); font-size:var(--type-caption); font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--rg-taupe); white-space:nowrap; }
@media(max-width:680px){ .rg-row{ grid-template-columns:auto minmax(0,1fr); }
  .rg-row__side{ grid-column:2; } }

/* ---- Gallery grid + lightbox --------------------------------------- */
/* Editorial text tabs, not boxed buttons: one row of labels sharing a hairline
   baseline, the active one marked by a copper rule sitting on that line. No
   borders, no fills — the same underline vocabulary as .rg-btn--link. */
.rg-galfilters{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:0 clamp(1.1rem,3vw,2.6rem); margin-bottom:var(--sp-6);
  border-bottom:1px solid var(--rg-line); }
.rg-galfilter{ position:relative; display:inline-flex; align-items:center; min-height:44px;
  padding:0.5rem 0 0.7rem; border:0; background:transparent; cursor:pointer;
  font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-taupe);
  transition:color var(--dur-base) var(--ease-out); }
/* -1px so the rule sits ON the container's hairline rather than above it */
.rg-galfilter::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--rg-copper); transform:scaleX(0); transform-origin:center;
  transition:transform var(--dur-base) var(--ease-out); }
.rg-galfilter:hover{ color:var(--rg-espresso); }
.rg-galfilter.is-on{ color:var(--rg-espresso); }
.rg-galfilter.is-on::after{ transform:scaleX(1); }

.rg-gal{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(0.6rem,1.4vw,1rem); }
.rg-gal__item{ position:relative; overflow:hidden; padding:0; border:0; cursor:pointer;
  background:var(--rg-sand); border-radius:var(--radius-sm); aspect-ratio:4 / 3; }
.rg-gal__item--tall{ grid-row:span 2; aspect-ratio:4 / 6.2; }
.rg-gal__item--wide{ grid-column:span 2; aspect-ratio:8 / 3.1; }
.rg-gal__item img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-zoom) var(--ease-out); }
.rg-gal__item:hover img{ transform:scale(1.06); }
.rg-gal__item::after{ content:''; position:absolute; inset:0; background:rgba(26,23,20,0);
  transition:background var(--dur-base) var(--ease-out); }
.rg-gal__item:hover::after{ background:rgba(26,23,20,0.16); }
.rg-gal__cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:0.9rem 1rem;
  text-align:left; font-family:var(--font-sans); font-size:var(--type-caption); font-weight:300;
  color:var(--rg-ivory); background:var(--scrim-bottom);
  opacity:0; transform:translateY(6px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.rg-gal__item:hover .rg-gal__cap{ opacity:1; transform:none; }
.rg-gal__item[hidden]{ display:none; }
/* "View More" / "Show Less": the tiles past the cut are dropped with a CLASS,
   not the hidden attribute. `hidden` belongs to the category filter in
   gallery() — sharing it would mean each feature silently undoing the other —
   and leaving it alone also keeps the lightbox cycling the whole set. */
.rg-gal__item.is-clipped{ display:none; }
.rg-galmore{ display:flex; justify-content:center; margin-top:clamp(1.2rem,3vw,2rem); }
/* the chevron points the way the grid is about to move; .rg-btn__arrow already
   carries the transform transition, so this only has to set the end state */
.rg-galmore .rg-btn[aria-expanded="true"] .rg-btn__arrow{ transform:rotate(180deg); }
@media(max-width:860px){ .rg-gal{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rg-gal__item--wide{ grid-column:span 2; } }
/* MOBILE ONLY — stays a 2-up collage rather than collapsing to one image per
   row, which turned Weddings and Wellness into a long single-file strip. The
   tall/wide spans are neutralised so every tile is the same square and the
   grid reads as a mosaic. */
@media(max-width:520px){ .rg-gal{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.5rem; }
  .rg-gal__item, .rg-gal__item--tall, .rg-gal__item--wide{
    grid-row:auto; grid-column:auto; aspect-ratio:1 / 1; } }

/* Uniform variant: every tile the same square, no tall/wide spans. ------ */
.rg-gal--uniform{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.rg-gal--uniform .rg-gal__item,
.rg-gal--uniform .rg-gal__item--tall,
.rg-gal--uniform .rg-gal__item--wide{ grid-row:auto; grid-column:auto; aspect-ratio:1 / 1; }
@media(max-width:1024px){ .rg-gal--uniform{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:820px){ .rg-gal--uniform{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px){ .rg-gal--uniform{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.5rem; } }
/* captions stay visible on touch, where there is no hover to reveal them */
@media(hover:none){ .rg-gal__cap{ opacity:1; transform:none; } }

.rg-lbox{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  background:rgba(20,16,12,0.93); opacity:0; visibility:hidden;
  transition:opacity 0.4s var(--ease-out), visibility 0s linear 0.4s; }
.rg-lbox[hidden]{ display:none; }
.rg-lbox.is-open{ opacity:1; visibility:visible; transition:opacity 0.4s var(--ease-out), visibility 0s; }
.rg-lbox__fig{ margin:0; max-width:min(1200px,92vw); max-height:86vh; display:flex;
  flex-direction:column; align-items:center; gap:1rem; }
.rg-lbox__fig img{ max-width:100%; max-height:76vh; object-fit:contain; display:block;
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); }
.rg-lbox__cap{ font-family:var(--font-sans); font-size:var(--type-sm); font-weight:300;
  letter-spacing:0.04em; color:rgba(250,246,239,0.78); text-align:center; }
.rg-lbox__btn{ position:absolute; width:52px; height:52px; border:1px solid rgba(244,236,223,0.34);
  border-radius:50%; background:transparent; color:var(--rg-ivory); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out); }
.rg-lbox__btn:hover{ background:var(--rg-copper); border-color:var(--rg-copper); color:var(--rg-ivory); }
.rg-lbox__btn svg{ width:20px; height:20px; }
.rg-lbox__prev{ left:clamp(0.6rem,3vw,2.4rem); top:50%; transform:translateY(-50%); }
.rg-lbox__next{ right:clamp(0.6rem,3vw,2.4rem); top:50%; transform:translateY(-50%); }
.rg-lbox__close{ top:clamp(0.8rem,2.4vw,1.8rem); right:clamp(0.8rem,2.4vw,1.8rem); }

/* ---- FAQ / disclosure accordion ------------------------------------ */
.rg-faq{ display:flex; flex-direction:column; border-top:1px solid var(--rg-line); }
.rg-faq__item{ border-bottom:1px solid var(--rg-line); }
.rg-faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  padding:clamp(1.1rem,2.2vw,1.5rem) 0; background:transparent; border:0; cursor:pointer;
  text-align:left; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.1rem,1.9vw,1.35rem); color:var(--rg-espresso);
  transition:color var(--dur-base) var(--ease-out); }
.rg-faq__q:hover{ color:var(--rg-copper); }
.rg-faq__sign{ position:relative; width:16px; height:16px; flex:none; }
.rg-faq__sign::before, .rg-faq__sign::after{ content:''; position:absolute; left:0; top:7.5px;
  width:16px; height:1.4px; background:var(--rg-copper);
  transition:transform var(--dur-base) var(--ease-out); }
.rg-faq__sign::after{ transform:rotate(90deg); }
.rg-faq__item.is-open .rg-faq__sign::after{ transform:rotate(0deg); }
.rg-faq__a{ overflow:hidden; max-height:0; transition:max-height var(--dur-base) var(--ease-out); }
.rg-faq__a > div{ padding:0 0 clamp(1.1rem,2.2vw,1.5rem); max-width:74ch;
  font-family:var(--font-sans); font-weight:300; font-size:var(--type-body);
  line-height:var(--lh-body); color:var(--text-body); }
.rg-faq__a p{ margin:0 0 0.7rem; }
.rg-faq__a p:last-child{ margin-bottom:0; }

/* ---- Contact cards + form ------------------------------------------ */
.rg-cgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(1rem,2.4vw,1.6rem); }
/* The contact card takes an optional photo above the details. When one is
   present the padding moves onto __body so the image can bleed to the card's
   edges; a card with no __frame still lays out exactly as before. */
.rg-ccard{ background:rgba(255,255,255,0.62); border:1px solid var(--rg-line);
  border-radius:var(--radius-sm); overflow:hidden;
  padding:clamp(1.2rem,2.4vw,1.8rem);
  display:flex; flex-direction:column; gap:0.6rem; }
.rg-ccard:has(> .rg-ccard__frame){ padding:0; gap:0; }
.rg-ccard__frame{ position:relative; aspect-ratio:3 / 2; overflow:hidden;
  background:var(--rg-sand); }
.rg-ccard__frame img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-zoom) var(--ease-out); }
.rg-ccard:hover .rg-ccard__frame img{ transform:scale(1.05); }
.rg-ccard__body{ display:flex; flex-direction:column; gap:0.6rem;
  padding:clamp(1.2rem,2.4vw,1.8rem); }
.rg-ccard__lbl{ font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-copper); }
.rg-ccard__name{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.4rem); color:var(--rg-espresso); }
.rg-ccard a, .rg-ccard span.v{ font-family:var(--font-sans); font-weight:300; font-size:var(--type-sm);
  line-height:1.7; color:var(--text-body); text-decoration:none; word-break:break-word; }
.rg-ccard a{ transition:color var(--dur-base) var(--ease-out); }
.rg-ccard a:hover{ color:var(--rg-copper); }

.rg-form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(0.9rem,2vw,1.4rem); }
.rg-field{ display:flex; flex-direction:column; gap:0.45rem; }
.rg-field--full{ grid-column:1 / -1; }
/* A submit button is a button, not a field: without this it is a stretched
   flex item and runs the full width of the form. */
.rg-field .rg-btn{ align-self:flex-start; }
.rg-field label{ font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-taupe); }
.rg-field input, .rg-field select, .rg-field textarea{ width:100%; min-height:48px;
  padding:0.8rem 1rem; border:1px solid var(--rg-line); border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.7); font-family:var(--font-sans); font-weight:300;
  font-size:var(--type-body); color:var(--rg-espresso);
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.rg-field textarea{ min-height:132px; resize:vertical; }
.rg-field input:focus, .rg-field select:focus, .rg-field textarea:focus{ outline:0;
  border-color:var(--rg-copper); box-shadow:0 0 0 3px rgba(168,124,79,0.14); }
.rg-formnote{ grid-column:1 / -1; margin:0; font-family:var(--font-sans);
  font-size:var(--type-caption); font-weight:300; color:var(--rg-taupe); }

/* ---- Simplotel webform additions ------------------------------------
   Consent row, captcha slot and inline status, added when the forms moved
   off mailto: onto the real webform endpoints (assets/js/forms.js).
   Deliberately in the site's own idiom: caption type, copper accent, no new
   colours. The label is sentence case, not the uppercase eyebrow the field
   labels use, because it is a sentence the guest reads, not a field name. */
/* .rg-field label is (0,1,1) and sets the uppercase letter-spaced eyebrow, so
   this has to be at least as specific or the consent sentence renders as a
   field label. */
.rg-field label.rg-consent{ display:flex; align-items:flex-start; gap:0.65rem; cursor:pointer;
  font-family:var(--font-sans); font-size:var(--type-sm); font-weight:300;
  line-height:1.65; letter-spacing:0; text-transform:none; color:var(--text-body); }
.rg-consent input[type="checkbox"]{ flex:none; width:18px; height:18px; min-height:0;
  margin-top:0.2rem; padding:0; accent-color:var(--rg-copper); cursor:pointer; }
/* forms.js moves this into the captcha popup on load; until then it is an empty
   cell, so it must not open a gap in the two-column grid. */
.rg-form__captcha{ grid-column:1 / -1; }
.rg-form__captcha:empty{ display:none; }
.rg-form__status{ grid-column:1 / -1; margin:0; font-family:var(--font-sans);
  font-size:var(--type-sm); font-weight:400; color:var(--rg-copper); }
/* the validation messages forms.js injects, in the site's caption style */
.rg-form .ct-err{ font-family:var(--font-sans); font-size:var(--type-caption);
  font-weight:300; letter-spacing:0; text-transform:none; }

@media(max-width:680px){ .rg-form{ grid-template-columns:1fr; } }

/* ---- Map frame ------------------------------------------------------ */
.rg-maplet{ position:relative; border:1px solid var(--rg-line-gold); border-radius:var(--radius-sm);
  overflow:hidden; background:var(--rg-sand); box-shadow:var(--shadow-sm); }
/* flex + flex:1 so the iframe grows to fill a stretched container (beside the
   address panel) while min-height keeps it sized when it stands alone */
.rg-maplet{ display:flex; }
.rg-maplet iframe{ display:block; width:100%; flex:1;
  min-height:clamp(300px,44vh,480px); border:0; }

/* ---- Button row (pairs a solid + outline button under body copy) --- */
.rg-btnrow{ display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:0.4rem; }
/* A row that closes a section on its own, rather than sitting under copy. It
   stands off the content above it by exactly half a section boundary: a
   boundary is 2x --band-y, so this is --band-y. */
.rg-btnrow--center{ justify-content:center; margin-top:var(--band-y); }

/* ---- Peel-off footer (identical to the homepage) ------------------- */
/* Fallback only — site.js:peelFooter() measures the footer and overwrites this
   with its real height. Keep it generous: too small clips the footer. */
:root{ --pfoot-h: 760px; }
/* padding-bottom completes --foot-gap: the last section already pays --band-y
   at its own foot, so the shell adds only the remainder and the measured gap
   from the last content to the footer edge is --foot-gap (100px desktop),
   not a full section boundary. */
.rg-hotel-root{ position:relative; z-index:2; margin-bottom:var(--pfoot-h);
  padding-bottom:max(0px, calc(var(--foot-gap) - var(--band-y)));
  background-color:var(--rg-ivory); background-image:url(../images/bg-2.jpg);
  background-size:cover; background-position:center top; background-repeat:no-repeat;
  box-shadow:0 40px 80px -30px rgba(20,16,12,0.55); }

/* Vertical gradient: deepest at the foot of the page, lifting to copper at the
   top. The range is deliberately held within reach of ONE text colour — every
   piece of footer text is --rg-ivory, which clears 5:1 against the lightest
   stop and 12:1 against the darkest, so nothing needs its own colour. */
.rg-pfoot{ position:fixed; left:0; right:0; bottom:0; z-index:0; height:var(--pfoot-h);
  display:flex; align-items:center; overflow:hidden; color:var(--rg-ivory);
  background:linear-gradient(to top, #3C2415 0%, #6A4128 52%, #8F5C3B 100%); }
.rg-pfoot::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, rgba(216,194,160,0.14), transparent 62%); }
.rg-pfoot__inner{ position:relative; width:100%; max-width:1100px; margin:0 auto;
  padding:clamp(32px,3.4vw,48px) 80px; display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap:clamp(1.1rem,2vw,1.6rem); }
.rg-pfoot__name{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:0.02em; color:var(--rg-ivory); }
.rg-pfoot__addr{ margin:0; max-width:60ch; font-family:var(--font-sans); font-weight:300;
  font-size:var(--type-body); line-height:1.6; color:var(--rg-ivory); }
.rg-pfoot__touch{ margin:1rem 0 0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.2rem,1.8vw,1.5rem); color:var(--rg-ivory); }
.rg-pfoot__social{ display:flex; justify-content:center; gap:0.9rem; }
/* Hollow, like every other button on the site — an espresso fill read as four
   black blocks punched into the copper gradient. Ivory hairline + ivory glyph
   keeps the footer on its single ink, and it fills ivory on hover. */
.rg-pfoot__tile{ width:46px; height:46px; flex:none; display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--rg-ivory);
  border:1px solid rgba(250,246,239,0.45); border-radius:var(--radius-sm);
  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); }
.rg-pfoot__tile:hover{ background:var(--rg-ivory); border-color:var(--rg-ivory);
  color:var(--rg-espresso); transform:translateY(-3px); }
.rg-pfoot__tile svg{ width:18px; height:18px; }
.rg-pfoot__rule{ width:100%; height:1px; background:rgba(250,246,239,0.28); margin:0.8rem 0; }
.rg-pfoot__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.6rem 1.8rem; }
.rg-pfoot__link{ font-family:var(--font-sans); font-weight:300; font-size:var(--type-sm);
  color:var(--rg-ivory); }
.rg-pfoot__link:hover{ color:var(--rg-gold-soft); }
.rg-pfoot__meta{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:0.35rem 1.7rem; margin:0.4rem 0 0; }
/* identical to .rg-pfoot__link — one text colour across the whole footer, so
   the muted alpha that made this row nearly unreadable is gone. Hover is the
   only colour change anywhere down here. */
.rg-pfoot__metalink{ font-family:var(--font-sans); font-weight:300; font-size:var(--type-sm);
  color:var(--rg-ivory); text-decoration:none;
  transition:color var(--dur-base) var(--ease-out); }
.rg-pfoot__metalink:hover{ color:var(--rg-gold-soft); }
.rg-pfoot__credit{ margin:0; font-family:var(--font-sans); font-size:var(--type-caption);
  color:var(--rg-ivory); }
.rg-pfoot__credit a{ color:inherit; }
.rg-pfoot__credit a:hover{ color:var(--rg-gold-soft); }

@media(max-width:980px){ .rg-pfoot__inner{ padding:clamp(28px,3vw,40px) 40px; } }
@media(max-width:680px){
  :root{ --pfoot-h:auto; }
  .rg-hotel-root{ margin-bottom:0; box-shadow:none; }
  .rg-pfoot{ position:static; height:auto; }
  .rg-pfoot__inner{ padding:32px 24px; gap:1.1rem; }
  .rg-pfoot__nav{ gap:0.6rem 1.2rem; } }
@media (prefers-reduced-motion: reduce){
  .rg-pfoot__link, .rg-pfoot__tile, .rg-card{ transition:none; } }

/* ---- Room image slider ---------------------------------------------
   One slide in view, arrows either side, a rule-style dot row beneath.
   Track translates by whole percentages so it needs no measurement.
   MOBILE ONLY: the arrows step aside below 820px and the dots carry the
   paging on their own — desktop keeps both, exactly as before. */
.rg-rsl{ position:relative; }
.rg-rsl__view{ overflow:hidden; border-radius:var(--radius-sm); background:var(--rg-sand); }
.rg-rsl__track{ display:flex; transition:transform 0.85s var(--ease-silk); will-change:transform; }
.rg-rsl__slide{ flex:0 0 100%; min-width:0; margin:0; position:relative; }
.rg-rsl__slide img{ width:100%; aspect-ratio:16 / 9; object-fit:cover; display:block; }
.rg-rsl__slide figcaption{ position:absolute; left:0; right:0; bottom:0;
  padding:clamp(1rem,2.4vw,1.6rem) clamp(1.1rem,2.6vw,1.8rem);
  background:var(--scrim-bottom); color:var(--rg-ivory);
  font-family:var(--font-sans); font-size:var(--type-caption); font-weight:300; letter-spacing:0.02em; }
.rg-rsl__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; padding:0; cursor:pointer;
  border:1px solid rgba(244,236,223,0.5); border-radius:50%;
  background:rgba(26,23,20,0.34); color:var(--rg-ivory);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.rg-rsl__arrow:hover{ background:var(--rg-copper); border-color:var(--rg-copper); }
.rg-rsl__arrow svg{ width:18px; height:18px; }
.rg-rsl__arrow--prev{ left:clamp(0.6rem,1.6vw,1.2rem); }
.rg-rsl__arrow--next{ right:clamp(0.6rem,1.6vw,1.2rem); }
.rg-rsl__dots{ display:flex; justify-content:center; gap:0.55rem; margin-top:1.1rem; }
.rg-rsl__dot{ width:30px; height:2px; padding:0; border:0; cursor:pointer;
  background:var(--rg-line-strong);
  transition:background var(--dur-base) var(--ease-out); }
.rg-rsl__dot:hover{ background:var(--rg-copper-light); }
.rg-rsl__dot.is-on{ background:var(--rg-copper); }
@media (max-width:600px){
  .rg-rsl__slide img{ aspect-ratio:4 / 3; }
}
/* MOBILE ONLY — an arrow over the image is a poor target on a swipeable
   track, so below 820px the dots carry the paging alone. */
@media (max-width:820px){
  .rg-rsl__arrow{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .rg-rsl__track{ transition:none; } }

/* ---- Multi-item slider ----------------------------------------------
   Three panels in view on desktop, two at ≤820px, one at ≤480px. Built
   on scroll-snap, so touch swipe and keyboard scrolling come for free;
   the arrows and dots below just drive scrollLeft.                     */
.rg-msl{ --msl-per:3; --msl-gap:clamp(1rem,2.4vw,1.8rem); position:relative; }
.rg-msl--2{ --msl-per:2; }   /* for wider cards that want a 2-up rhythm */
.rg-msl__view{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
.rg-msl__view::-webkit-scrollbar{ display:none; }
.rg-msl__track{ display:flex; gap:var(--msl-gap); }
.rg-msl__slide{ scroll-snap-align:start; min-width:0;
  flex:0 0 calc((100% - (var(--msl-per) - 1) * var(--msl-gap)) / var(--msl-per)); }
.rg-msl__slide > *{ height:100%; }   /* panels in a row share one height */
.rg-msl__ctrls{ display:flex; align-items:center; justify-content:center; gap:0.9rem; margin-top:0.6rem; }
.rg-msl__arrow{ flex:0 0 auto; width:44px; height:44px; padding:0; cursor:pointer;
  border:1px solid var(--rg-line-strong); border-radius:50%;
  background:transparent; color:var(--rg-espresso);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out); }
.rg-msl__arrow svg{ width:18px; height:18px; }
.rg-msl__arrow:hover:not(:disabled){ background:var(--rg-copper); border-color:var(--rg-copper); color:var(--rg-ivory); }
.rg-msl__arrow:disabled{ opacity:0.3; cursor:default; }
.rg-msl__dots{ display:flex; gap:0.55rem; }
/* 2px rule, 44px tap target — the padding is transparent (content-box clip) */
.rg-msl__dot{ width:30px; height:2px; padding:21px 0; box-sizing:content-box;
  border:0; cursor:pointer; background-color:var(--rg-line-strong); background-clip:content-box;
  transition:background-color var(--dur-base) var(--ease-out); }
.rg-msl__dot:hover{ background-color:var(--rg-copper-light); }
.rg-msl__dot.is-on{ background-color:var(--rg-copper); }
/* Wide screens: the arrows leave the dots row and flank the panels, sitting in
   the wrap's own side padding (>=78px there at this breakpoint, so a 44px
   button plus its offset still clears the text column). Below 981px the
   padding is too narrow for that, so they fall back into the row under the
   cards. */
@media (min-width:981px){
  /* both arrows go absolute, so the row they came from collapses to nothing
     and 50% is the middle of the panels */
  .rg-msl__ctrls{ margin-top:0; }
  .rg-msl__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; }
  .rg-msl__arrow[data-msl-prev]{ left:-60px; }
  .rg-msl__arrow[data-msl-next]{ right:-60px; }
}
@media (max-width:820px){ .rg-msl{ --msl-per:2; } }
@media (max-width:480px){ .rg-msl{ --msl-per:1; } }
/* MOBILE ONLY — desktop keeps the side arrows exactly as they are.
   On a phone the arrows are a poor target for a swipeable track, so the dots
   carry the paging instead, and the control row is pulled in tight rather
   than sitting in a tall empty band under the card. */
@media (max-width:820px){
  .rg-msl__arrow{ display:none; }
  .rg-msl__ctrls{ margin-top:0.9rem; gap:0; }
  .rg-msl__dots{ gap:0.5rem; }
  .rg-msl__dot{ padding:14px 0; }
}
@media (prefers-reduced-motion: reduce){ .rg-msl__view{ scroll-behavior:auto; } }

/* ---- Closing CTA band ------------------------------------------------
   A quiet centred sign-off: eyebrow, line, one sentence, one button.   */
.rg-ctaband{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(0.7rem,1.6vw,1.1rem); max-width:60ch; margin:0 auto; }
.rg-ctaband__lbl{ font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-copper); }
.rg-ctaband h2{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--type-display); line-height:1.14; color:var(--rg-espresso); }
.rg-ctaband p{ margin:0; font-family:var(--font-sans); font-weight:300;
  font-size:var(--type-sm); line-height:1.75; color:var(--rg-bark); }
.rg-ctaband .rg-btnrow{ justify-content:center; margin-top:0.5rem; }

/* ---- Facility photo tiles (image + label beneath) -------------------- */
.rg-ftiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(0.8rem,1.8vw,1.4rem); }
.rg-ftile{ display:flex; flex-direction:column; gap:0.85rem; }
.rg-ftile__frame{ position:relative; overflow:hidden; border-radius:var(--radius-sm);
  background:var(--rg-sand); aspect-ratio:4 / 3; }
.rg-ftile__frame img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-zoom) var(--ease-out); }
.rg-ftile:hover .rg-ftile__frame img{ transform:scale(1.05); }
.rg-ftile__body{ display:flex; align-items:center; gap:0.65rem; }
.rg-ftile__body svg{ width:17px; height:17px; flex:none; color:var(--rg-copper); }
.rg-ftile__name{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:1.05rem; line-height:1.3; color:var(--rg-espresso); }
@media(max-width:1024px){ .rg-ftiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:820px){ .rg-ftiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px){ .rg-ftiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.7rem; }
  .rg-ftile__name{ font-size:0.95rem; } }

/* ---- Distances hub (the property at the centre, times around it) -----
   Two flanking columns of destinations on either side of a medallion,
   joined by copper hairlines. Collapses to a plain stacked list on
   narrow screens, where the spokes would have nothing to point at.     */
.rg-hub{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:clamp(1rem,2.4vw,2.2rem); }
.rg-hub__side{ display:flex; flex-direction:column; gap:clamp(0.7rem,1.6vw,1.15rem); }
.rg-hub__side--l{ text-align:right; }
.rg-hub__pt{ position:relative; display:flex; flex-direction:column; gap:0.15rem; }
.rg-hub__side--l .rg-hub__pt{ align-items:flex-end; padding-right:1.5rem; }
.rg-hub__side--r .rg-hub__pt{ align-items:flex-start; padding-left:1.5rem; }
/* the spoke: a hairline reaching toward the medallion, with a node */
.rg-hub__pt::before{ content:''; position:absolute; top:0.62em; width:1rem; height:1px;
  background:var(--rg-line-gold); }
.rg-hub__pt::after{ content:''; position:absolute; top:calc(0.62em - 2.5px); width:5px; height:5px;
  border-radius:50%; background:var(--rg-copper); }
.rg-hub__side--l .rg-hub__pt::before{ right:0; }
.rg-hub__side--l .rg-hub__pt::after{ right:-2.5px; }
.rg-hub__side--r .rg-hub__pt::before{ left:0; }
.rg-hub__side--r .rg-hub__pt::after{ left:-2.5px; }
.rg-hub__name{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.35; color:var(--rg-espresso); }
.rg-hub__time{ font-family:var(--font-sans); font-size:var(--type-caption); font-weight:400;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--rg-copper); }
.rg-hub__core{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:0.3rem; width:clamp(158px,17vw,208px); aspect-ratio:1;
  border:1px solid var(--rg-line-gold); border-radius:50%;
  background:rgba(255,255,255,0.6); padding:1.2rem; }
.rg-hub__core .k{ font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-copper); }
.rg-hub__core .n{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.2; color:var(--rg-espresso); }
.rg-hub__core .s{ font-family:var(--font-sans); font-size:var(--type-caption); font-weight:300;
  color:var(--rg-taupe); }
@media(max-width:820px){
  .rg-hub{ grid-template-columns:1fr; gap:clamp(1.2rem,3vw,1.8rem); justify-items:center; }
  .rg-hub__core{ order:-1; }
  .rg-hub__side{ width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.4rem; }
  .rg-hub__side--l{ text-align:left; }
  .rg-hub__side--l .rg-hub__pt, .rg-hub__side--r .rg-hub__pt{
    align-items:flex-start; padding:0 0 0 1rem; }
  .rg-hub__side--l .rg-hub__pt::before, .rg-hub__side--r .rg-hub__pt::before{ left:0; width:0.55rem; }
  .rg-hub__side--l .rg-hub__pt::after, .rg-hub__side--r .rg-hub__pt::after{ left:0; right:auto; }
}
@media(max-width:480px){ .rg-hub__side{ grid-template-columns:1fr; } }

/* ---- Getting here: the address block beside the map ----------------- */
/* stretch, not start: the address panel and the map are one row and should end
   on the same line — the map fills whatever height the panel sets */
.rg-getthere{ display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:clamp(1.2rem,3vw,2.6rem); align-items:stretch; }
.rg-getthere__panel{ display:flex; flex-direction:column; gap:1.1rem;
  padding:clamp(1.4rem,3vw,2.1rem); background:rgba(255,255,255,0.62);
  border:1px solid var(--rg-line); border-radius:var(--radius-sm); }
.rg-getthere__lbl{ font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-copper); }
.rg-getthere__addr{ margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.28rem); line-height:1.5; color:var(--rg-espresso); }
.rg-getthere__note{ margin:0; font-family:var(--font-sans); font-weight:300;
  font-size:var(--type-sm); line-height:1.75; color:var(--rg-bark); }
.rg-getthere__lines{ display:flex; flex-direction:column; gap:0.6rem;
  padding-top:1rem; border-top:1px solid var(--rg-line); }
.rg-getthere__lines a{ display:flex; align-items:center; gap:0.7rem; min-height:28px;
  font-family:var(--font-sans); font-weight:300; font-size:var(--type-sm);
  color:var(--rg-bark); text-decoration:none; transition:color var(--dur-base) var(--ease-out); }
.rg-getthere__lines a:hover{ color:var(--rg-copper); }
.rg-getthere__lines svg{ width:16px; height:16px; flex:none; color:var(--rg-copper); }
@media(max-width:900px){ .rg-getthere{ grid-template-columns:1fr; } }

/* ---- Room key facts (a plain definition row, no boxes) -------------- */
/* Redrawn on the About Us .rg-facts pattern — a row of hairline-divided cells,
   the value in copper display type over an uppercase label. column-reverse
   puts the value on top without reordering the markup (which reads better as
   label-then-value for a screen reader). Sized down from .rg-fact because
   these values are phrases ("3 adults + 1 child"), not short numerals. */
.rg-rfacts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--rg-line); border-bottom:1px solid var(--rg-line); }
.rg-rfact{ padding:clamp(1.1rem,2.4vw,1.7rem) clamp(0.8rem,2vw,1.4rem); text-align:center;
  border-left:1px solid var(--rg-line);
  display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:0.45rem; }
.rg-rfact:first-child{ border-left:0; }
.rg-rfact__l{ font-family:var(--font-sans); font-size:var(--type-eyebrow); font-weight:500;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--rg-taupe); }
.rg-rfact__v{ font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.15; color:var(--rg-copper); }
@media(max-width:640px){ .rg-rfact{ border-left:0; border-top:1px solid var(--rg-line); }
  .rg-rfact:first-child{ border-top:0; } }

/* ---- Text links — ONE treatment, site-wide --------------------------
   Every link that is not a filled button, a nav item or a whole clickable
   card uses this and nothing else:

     rest   no underline, the link keeps its context colour
     hover  a 1px underline in the link's own colour, plus a 5px nudge on
            any trailing arrow

   It replaces the four treatments that had grown up separately — a scaleX
   pseudo-rule on .rg-btn--link, a width pseudo-rule in the footer nav, a
   permanent border-bottom on the credit line, and the browser's own
   underline wherever a component forgot text-decoration:none (which is
   what put the ragged stroke under the card CTAs and their arrows).

   Written as longhands and placed last in the file so it beats the earlier
   `text-decoration:none` shorthands at equal specificity. Add .rg-link to
   any new inline link rather than inventing a fifth underline. */
.rg-link,
.rg-btn--link,
.rg-card__cta,
.rg-ccard a,
.rg-getthere__lines a,
.rg-pfoot__link,
.rg-pfoot__metalink,
.rg-pfoot__credit a{
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-decoration-color:transparent;
  text-underline-offset:0.3em;
  transition:color var(--dur-base) var(--ease-out),
             text-decoration-color var(--dur-base) var(--ease-out);
}
.rg-link:hover,
.rg-btn--link:hover,
.rg-card__cta:hover,
.rg-card:hover .rg-card__cta,
.rg-ccard a:hover,
.rg-getthere__lines a:hover,
.rg-pfoot__link:hover,
.rg-pfoot__metalink:hover,
.rg-pfoot__credit a:hover{ text-decoration-color:currentColor; }

/* The breadcrumb's ancestor link is the one link on a page the guest is meant
   to notice at rest, so it is the exception to the reveal-on-hover underline
   above: brand copper and a visible rule from the start. --rg-copper-deep, not
   --rg-copper, because this is caption-sized text and plain copper is only
   3.7:1 on the ivory ground while the deep tone is 5.3:1. The current page is
   a <span>, not an <a>, so it keeps espresso and no underline — that contrast
   is what tells the two apart. */
.rg-crumb a{ color:var(--rg-copper-deep);
  text-decoration-line:underline; text-decoration-thickness:1px;
  text-decoration-color:currentColor; text-underline-offset:0.28em; }
.rg-crumb a:hover{ color:var(--rg-espresso); }
/* Arrows ride outside the underline: an inline-block is an atomic inline, so
   the propagated decoration stops at its edge. */
.rg-link .a, .rg-link .rg-btn__arrow{ display:inline-block; margin-left:0.6em;
  transition:transform var(--dur-base) var(--ease-out); }
.rg-link:hover .a, .rg-link:hover .rg-btn__arrow{ transform:translateX(5px); }
.rg-card__cta:hover .a{ transform:translateX(5px); }
@media (prefers-reduced-motion: reduce){
  .rg-link .a, .rg-link .rg-btn__arrow, .rg-card__cta .a, .rg-btn__arrow{ transition:none; }
}

/* ====================================================================
   MOBILE — the shared corrections
   Component-level breakpoints live with their components above; what is
   collected here is the handful of things that are wrong across the whole
   site on a phone rather than inside one block.
   ==================================================================== */
@media (max-width:820px){
  /* 1. The slide-out panel sits flush to the edge. Its 76px inset dates from
        a fixed rail that no longer exists in the markup, and at 86vw wide it
        pushed the panel's left edge past the viewport on a 375px screen. */
  .rg-railnav__panel{ right:0; width:min(360px,88vw); }

  /* 2. Tap targets. Text links are set in small caps at 12-14px, which is a
        legible label but a ~18px target; the padding here lifts every one of
        them to the 44px minimum without touching how they read. */
  .rg-card__cta{ padding-top:1.15rem; padding-bottom:0.4rem; }
  .rg-pfoot__link, .rg-pfoot__metalink{ padding-block:0.55rem; }
  .rg-ccard a, .rg-getthere__lines a, .rg-crumb a{ padding-block:0.5rem; }
  .rg-crumb li{ min-height:32px; }
}
/* 3. On touch there is no hover, so the affordance that hover would have
      revealed has to be there from the start — the gallery captions already
      work this way, and the card CTAs now follow. Keyed to the pointer, not
      the width: a narrow desktop window still has a cursor. */
@media (hover:none){
  .rg-card__cta, .rg-btn--link, .rg-link{ text-decoration-color:currentColor; }
}
@media (max-width:480px){
  /* The hero is the only element still asking for most of a small screen;
     82vh leaves almost nothing of the page above the fold on a phone. */
  .rg-phero{ height:clamp(360px,62vh,560px); }
}

/* ---- Mobile buttons -------------------------------------------------
   MOBILE ONLY. The fill is no longer a hover state, so all that is left here
   is the arrow: any button whose markup carries no arrow span gets one drawn
   in, so the whole set reads consistently on a phone. */
@media (max-width:820px){
  .rg-btn:not(:has(.rg-btn__arrow)):not(.rg-btn--link)::after{
    content:'\2192'; display:inline-block; }
}