/* ===================================================================
   UTSAV CAMP SARISKA - INNER PAGE SYSTEM
   Loaded AFTER styles.css. Inherits every token from its :root
   (palette, Playfair/Fira stack, --pad-x/--pad-y rhythm, easings)
   so inner pages sit in the same design language as the homepage.
   Only NEW components live here; nothing above is overridden.
   =================================================================== */

/* ---------- 1. PAGE HERO ------------------------------------------
   Shorter than the homepage's full-bleed hero so inner pages read as
   subordinate to it, but dark enough that the nav's white-on-dark
   default state still applies before .nav--scrolled kicks in.        */

.page-hero {
  position: relative;
  height: clamp(520px, 74vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Reserve the fixed nav's height (logo 88px + 28px padding top/bottom = 144px)
     so bottom-aligned hero content can never ride up under the logo. The media
     layer is position:absolute/inset:0 so the image still fills edge to edge. */
  padding-top: clamp(110px, 15vh, 156px);
  box-sizing: border-box;
}

/* Scroll cue at the bottom of every inner-page hero - matches the design
   vocabulary of the homepage's .hero__scroll (SCROLL label + vertical line
   with a subtle downward pulse). Applied via pseudo-elements so no HTML edit
   is needed across the 100+ inner pages that use .page-hero. */
.page-hero::before {
  content: 'SCROLL';
  position: absolute;
  bottom: calc(clamp(20px, 3vw, 32px) + clamp(40px, 5vw, 56px) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
  opacity: 0;
  animation: pageHeroCueIn 1s var(--ease-out) 1.8s forwards;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: clamp(20px, 3vw, 32px);
  left: 50%;
  z-index: 3;
  width: 1px;
  height: clamp(40px, 5vw, 56px);
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 100%);
  transform: translateX(-50%);
  transform-origin: top;
  pointer-events: none;
  opacity: 0;
  animation:
    pageHeroCueIn 1s var(--ease-out) 1.8s forwards,
    pageHeroCuePulse 2.2s var(--ease-in-out) 2.8s infinite;
}
@keyframes pageHeroCueIn {
  to { opacity: 1; }
}
@keyframes pageHeroCuePulse {
  0%, 100% { transform: translateX(-50%) scaleY(1);    opacity: 0.9; }
  50%      { transform: translateX(-50%) scaleY(0.55); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero::after {
    animation: pageHeroCueIn 1s var(--ease-out) 1.8s forwards;
  }
}

/* Bleeds past the hero box on both edges. script.js parallax offsets this layer
   by (containerCentre - viewportCentre) * -speed; because .page-hero is 74vh
   rather than the homepage hero's 100vh, that offset is non-zero even at
   scroll 0, which would otherwise expose a strip of page background on top. */
.page-hero__media {
  position: absolute;
  left: 0;
  right: 0;
  top: -8%;
  height: 116%;
  z-index: 0;
}

/* Settles on load via keyframes rather than a JS-applied class, so the hero
   never depends on a script running to become visible. NOT .img-reveal -
   that class starts fully clipped and needs JS to un-clip it. */
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: pageHeroSettle 2.4s var(--ease-image) both;
}

@keyframes pageHeroSettle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* The original ramp thinned to 0.18 at 38%, which left the breadcrumb and
   headline sitting on bare image wherever the photograph was pale -- on
   stone-cabin 45% of the backdrop behind the breadcrumb fell under 4.5:1, on
   discover-sariska 22%. This ramp keeps the top light so the image still
   reads, then deepens through the lower two thirds where the copy actually
   sits. Only .page-hero carries it, and the homepage hero is .hero, so the
   homepage is untouched. */
.page-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(20, 16, 11, 0.55) 0%,
      rgba(20, 16, 11, 0.38) 18%,
      rgba(20, 16, 11, 0.62) 40%,
      rgba(20, 16, 11, 0.80) 70%,
      rgba(20, 16, 11, 0.88) 100%);
  /* The veil sits directly over the hero photo, so it was swallowing every
     pointer event and the browser never offered "Open image in new tab" on
     the picture beneath. It is purely decorative, so let events through. */
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--pad-x) clamp(56px, 7vw, 96px);
}

/* 104px forced "Among Ancient Temples" onto a third line, which pushed the
   whole block up under the nav. 78px keeps these headlines to two lines. */
.page-hero__title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(38px, 6.1vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.8px;
  color: #fff;
  max-width: 17em;
}

.page-hero__title em {
  font-style: italic;
  color: var(--c-sand);
}

.page-hero__sub {
  margin-top: 24px;
  max-width: 58ch;
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: clamp(15px, 1.41vw, 18px);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- 1b. NAV WITH FIVE ITEMS -------------------------------
   The homepage nav carries 3 links; the new IA carries 5. Tighten
   tracking a little so the row still clears the logo + CTA between
   1024px (where .nav__menu hides) and ~1300px.                       */

.nav__menu--wide { gap: clamp(18px, 2vw, 38px); }

.nav__menu--wide a {
  font-size: 13px;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

/* Current page keeps the hover underline permanently shown.
   styles.css already positions .nav__menu a::after with left:50% AND
   transform:translateX(-50%); overriding `left` here left that transform in
   place, which slid the line half its own width to the left of the label.
   Only the width should differ from the hover state -- nothing else. */
.nav__menu a[aria-current="page"]::after { width: 100%; }

/* .mobile-menu a has no positioned ::after of its own, so an absolutely
   positioned pseudo-element would anchor to the wrong box. Underline the
   text itself instead. */
.mobile-menu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 10px;
}

/* ---------- 1c. NAV DROPDOWNS + ALWAYS-ON MENU BUTTON --------------
   Top-level items that own child pages reveal them on hover/focus, so every
   page in the IA is reachable from the bar itself. Everything that does not
   fit (Our Story, Gallery, Season Guide, FAQs, Offers, Location) lives in the
   menu button, which is now shown at every width rather than mobile only.   */

.nav__item { position: relative; display: flex; align-items: center; }

.nav__item > a::after { content: ""; }         /* keep the shared underline */

.nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 216px;
  padding: 14px 0;
  background: rgba(248, 245, 240, 0.97);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--c-line);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  z-index: 120;
}

.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown links must not inherit the white-on-hero treatment */
.nav__menu .nav__sub a {
  display: block;
  padding: 9px 24px;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
  transition: color .35s var(--ease-out), background .35s var(--ease-out);
}

.nav__menu .nav__sub a::after { display: none; }   /* no sliding underline here */
.nav__menu .nav__sub a:hover { color: var(--c-forest); background: rgba(255,255,255,0.6); }

/* a small caret so the affordance is visible */
.nav__item--has-sub > a { position: relative; padding-right: 13px; }

.nav__item--has-sub > a::before {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 5px; height: 5px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: transform .4s var(--ease-out);
}

.nav__item--has-sub:hover > a::before { transform: rotate(225deg); margin-top: -1px; }

/* Menu button at all widths, not just mobile */
/* The standalone burger beside Book Now is mobile-only again: on desktop its
   job is done by the .nav__item--more icon at the end of the menu. It must stay
   in the markup because below 1024px styles.css hides .nav__menu entirely and
   the drawer is then the only navigation. */
@media (max-width: 1023px) {
  .nav__burger { display: flex !important; }
}

/* ---------- 1c-2. "MORE" NAV ITEM ---------------------------------
   Replaces the old Plan label: a hamburger glyph that opens a two-column
   dropdown holding Plan Your Visit and Information.                        */

.nav__more {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 14px;
  padding: 0;
  border: 0;
  background: none;
}

.nav__more span {
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  transition: background .4s var(--ease-out), transform .4s var(--ease-out);
}

.nav--scrolled .nav__more span { background: var(--c-ink); }
.nav__item--more:hover .nav__more span:first-child { transform: translateX(3px); }
.nav__item--more:hover .nav__more span:last-child  { transform: translateX(-3px); }

/* the two-column panel is far wider than a normal dropdown, so it hangs off the
   right edge of the menu rather than centring on a 22px icon */
.nav__sub--wide {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(6px);
  /* single column now that the Information group has gone; 460px was sized
     for two side by side and left a large empty panel */
  min-width: 240px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 22px 26px;
}

.nav__item:hover > .nav__sub--wide,
.nav__item:focus-within > .nav__sub--wide { transform: translateX(0) translateY(0); }

.nav__sub-col { display: flex; flex-direction: column; }

.nav__sub-title {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-stone);
  padding: 0 12px 10px;
  margin: 0;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 8px;
}

@media (max-width: 1200px) {
  .nav__sub--wide { min-width: 220px; gap: 0; padding: 20px 18px; }
}
.nav--scrolled .nav__sub { background: rgba(248, 245, 240, 0.99); }

/* ---------- 1d. FULL MENU DRAWER ----------------------------------- */

.mobile-menu { overflow-y: auto; padding: 120px var(--pad-x) 60px; align-items: flex-start; }

.menu-grid {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
  text-align: left;
}

.menu-col { display: flex; flex-direction: column; }

/* the drawer's per-section dropdown control -- mobile only (see 11e) */
.menu-col__toggle { display: none; }

.menu-col__title {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-stone);
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--c-line);
}

/* override .mobile-menu a (28px serif) for the sitemap layout */
.mobile-menu .menu-grid a {
  font-family: var(--ff-sans) !important;
  font-size: 14px !important;
  font-weight: 200;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--c-muted);
  padding: 9px 0;
  border-bottom: 1px solid rgba(95, 74, 52, 0.08);
  transition: color .35s var(--ease-out), padding-left .35s var(--ease-out);
}

.mobile-menu .menu-grid a:hover { color: var(--c-forest); padding-left: 6px; }

.mobile-menu .menu-grid a.menu-col__lead {
  font-family: var(--ff-serif) !important;
  font-size: 19px !important;
  color: var(--c-ink);
}

.menu-foot {
  width: 100%;
  max-width: 1180px;
  margin: clamp(36px, 4vw, 60px) auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  align-items: center;
  justify-content: space-between;
}

/* Email and phone -- the Book Now that used to sit beside them was removed,
   since the drawer already carries Book Now in the bar above it. */
.mobile-menu .menu-foot a {
  font-family: var(--ff-sans) !important;
  font-size: 14px !important;   /* was 13px */
  color: var(--c-muted);
  border: 0;
}

@media (max-width: 560px) {
  .mobile-menu { padding-top: 100px; }
  .menu-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; }
}

/* ---------- 2. BREADCRUMB ----------------------------------------- */

.crumb {
  display: flex;
  align-items: center;
  /* Without this the row cannot break, so each segment shrinks and wraps inside
     itself -- "DISCOVER / SARISKA" on two lines. Wrapping at the flex level
     moves a whole segment down instead, and a segment too wide for a line of
     its own still wraps internally, so nothing overflows the viewport. */
  flex-wrap: wrap;
  /* 12px between segments, but the shorthand would apply that to the row axis
     too and leave wrapped trails looking loosely spaced. Wrapped lines want
     text leading, not item spacing. */
  column-gap: 12px;
  row-gap: 4px;
  margin-bottom: 30px;
  font-family: var(--ff-sans);
  font-size: 11px;      /* whole value, up from 10.5px */
  font-weight: 400;     /* was inheriting 300 -- a step up for legibility */
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.crumb a { color: rgba(255, 255, 255, 0.62); transition: color .4s var(--ease-out); }
.crumb a:hover { color: #fff; }
.crumb span[aria-current] { color: var(--c-sand); }
.crumb__sep { opacity: 0.5; }

/* ---------- 3. LEDE ----------------------------------------------- */

.lede {
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-bg);
}

/* column-gap, not gap: pages that stack this to a single column were getting
   the 85px column gap applied as a ROW gap, opening ~113px between the heading
   and the paragraph. Vertical rhythm comes from the elements' own margins. */
.lede__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 0;
  align-items: start;
}

/* Matches the inner-page .display scale below. These are both section-level
   <h2>s, but .lede__heading was 46px against .display's 56px, so a page's FIRST
   section heading rendered smaller than the ones after it. */
.lede__heading {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(32px, 4.38vw, 56px);
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: var(--c-ink);
}

.lede__heading em { font-style: italic; color: var(--c-bark); }

/* Both the wrapper-with-paragraphs form AND the class-directly-on-<p> form.
   Only `.lede__body p` existed, so a <p class="lede__body"> matched nothing
   and rendered at body defaults - wrong weight, line-height and colour. */
.lede__body,
.lede__body p {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: clamp(15px, 1.41vw, 18px);
  line-height: 1.95;
  color: var(--c-muted);
}

.lede__body p + p { margin-top: 1.5em; }

/* ---------- 4. PILLAR / CARD GRID ---------------------------------
   Used for hub pages that fan out into children (Discover Sariska,
   Experiences, Conservation, Stay categories).                       */

.pillars {
  padding: 0 var(--pad-x) var(--pad-y);
  background: var(--c-bg);
}

.pillars__head {
  max-width: 1180px;
  margin: 0 auto clamp(48px, 5vw, 78px);
}

.pillars__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(24px, 2.6vw, 40px);
}

.pillar {
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out);
}

.pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -28px rgba(43, 36, 27, 0.34);
}

.pillar__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.pillar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-image);
}

.pillar:hover .pillar__media img { transform: scale(1.07); }

.pillar__body {
  padding: clamp(26px, 2.4vw, 38px);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pillar__title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(23px, 2.35vw, 30px);
  line-height: 1.3;
  color: var(--c-ink);
  margin-bottom: 14px;
}

.pillar__text {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-muted);
  flex: 1;
  margin-bottom: 26px;
}

.pillar__link {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-forest);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--c-line);
  transition: border-color .5s var(--ease-out), gap .5s var(--ease-out);
}

.pillar__link:hover { border-color: var(--c-forest); gap: 20px; }
.pillar__link svg { width: 30px; height: 8px; overflow: visible; }
.pillar__link svg line,
.pillar__link svg polyline { stroke: currentColor; stroke-width: 1.2; fill: none; }

/* ---------- 5. ALTERNATING FEATURE ROW ---------------------------- */

.feature {
  padding: 0 var(--pad-x) var(--pad-y);
  background: var(--c-bg);
}

.feature__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: stretch;
}

.feature--flip .feature__media { order: 2; }

/* One fixed image size for every feature row, taken from the discover-sariska
   "Dry Deciduous Forests" row. Stretching the image to the copy made long rows
   run past a screen and left every row a different aspect ratio. Copy that runs
   taller than this goes behind a .read-more instead. align-self: start keeps
   the image still when a Read More opens and the copy grows below it. */
.feature__media {
  position: relative;
  height: clamp(380px, 40vw, 560px);
  align-self: start;
  overflow: hidden;
}

.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the copy is usually the taller side, but centre it so a short block does not
   sit at the top of a row the image has stretched */
.feature__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature__caption {
  margin-top: 16px;
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-stone);
}

.feature__title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.91vw, 50px);
  line-height: 1.18;
  letter-spacing: -0.5px;
  color: var(--c-ink);
  margin-bottom: 26px;
}

.feature__title em { font-style: italic; color: var(--c-bark); }

.feature__text p {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: clamp(15px, 1.33vw, 17px);
  line-height: 1.95;
  color: var(--c-muted);
}

.feature__text p + p { margin-top: 1.4em; }
.feature__text .btn { margin-top: 34px; }

/* An .eyebrow inside a feature is a <p>, so `.feature__text p` at (0,1,1) beat
   `.eyebrow` at (0,1,0) and the label rendered as 15px/200 body copy in muted
   rather than 11px/400 in stone. Restore the four properties it stole. */
.feature__text p.eyebrow {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--c-stone);
}

/* A .btn sitting at the end of a lede body needs the same standoff the feature
   rows give theirs; .lede__body carries no button rule of its own. */
.lede__body .lede__cta { margin-top: 34px; }

/* ---------- 5b. INLINE READ MORE ---------------------------------- */
/* Native <details>, same no-JS disclosure the FAQ list uses, so the toggle
   cannot navigate or reload. The label pair is swapped by [open] rather than
   generated content, keeping both strings real selectable text. The hidden
   paragraph still carries .line: the reveal observer collects it at load and
   tags it while the details is closed, so it is already settled when opened. */
.read-more {
  margin-top: 1.4em;
}

.read-more__toggle {
  list-style: none;
  display: inline-block;
  cursor: pointer;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: clamp(15px, 1.33vw, 17px);
  line-height: 1.95;
  color: var(--c-bark);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .4s var(--ease-out);
}

.read-more__toggle::-webkit-details-marker { display: none; }
.read-more__toggle:hover { color: var(--c-forest); }

.read-more__toggle .read-more__less,
.read-more[open] .read-more__toggle .read-more__more { display: none; }
.read-more[open] .read-more__toggle .read-more__less { display: inline; }

.read-more__body { margin-top: 1.4em; }

/* A <summary> always renders as the first child, so "Read Less" sat above the
   paragraph it collapses -- the reader had to scroll back up to close it. Once
   open, lay the details out as a column and send the toggle below the body, so
   "Read Less" follows the second paragraph. Closed, it stays put: no flex is
   applied, so "Read More" keeps its place under the first paragraph. */
.read-more[open] {
  display: flex;
  flex-direction: column;
}

.read-more[open] .read-more__toggle {
  order: 2;
  align-self: flex-start;   /* stretch is the flex default; keep the underline
                               to the width of the words */
  margin-top: 1.4em;
}

.read-more[open] .read-more__body { margin-top: 0; }

/* ---------- 6. SPEC / DETAIL LIST --------------------------------- */

.specs {
  list-style: none;
  margin-top: 32px;
  border-top: 1px solid var(--c-line);
}

.specs li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 200;
  color: var(--c-muted);
}

.specs li strong {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-stone);
  flex-shrink: 0;
}

/* ---------- 7. DARK BAND ------------------------------------------
   Class name intentionally includes .conservation so script.js's
   dark-section detection (cursor + back-to-top inversion) picks it up. */

.band {
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-forest-deep);
  color: #fff;
  /* Sand-tone hairlines top and bottom so the transition into the adjacent
     light section reads as a designed edge rather than a hard colour slam.
     Confirmed intentional: .band is a brand accent, not a bug. Uses inset
     box-shadow so it stacks alongside the .band--texture ::before overlay. */
  box-shadow:
    inset 0 1px 0 rgba(216, 195, 165, 0.28),
    inset 0 -1px 0 rgba(216, 195, 165, 0.28);
}

/* A photograph laid over the forest green at 5%, under the copy. Opt-in via
   .band--texture so it can be trialled on one section before rolling out.
   The image sits in a ::before rather than as a background on .band itself,
   because the section's background colour has to stay solid underneath it. */
.band--texture { position: relative; overflow: hidden; }

.band--texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://assets.simplotel.com/simplotel/image/upload/q_85,w_2400,f_auto,c_limit/utsav-camp-sariska/boulder-sundowner-2');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* keeps the copy above the texture layer */
.band--texture > * { position: relative; z-index: 1; }

.band__inner { max-width: 1180px; margin: 0 auto; }

.band .eyebrow { color: var(--c-sand); }

.band__heading {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(32px, 4.54vw, 58px);
  line-height: 1.18;
  color: #fff;
  margin-bottom: 30px;
  max-width: 18ch;
}

.band__heading em { font-style: italic; color: var(--c-sand); }

.band__text {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: clamp(15px, 1.41vw, 18px);
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.78);
  max-width: 62ch;
}

.band__text p + p { margin-top: 1.5em; }

.band__stats {
  margin-top: clamp(48px, 5vw, 76px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: clamp(38px, 4vw, 56px);
}

.band__stat-num {
  font-family: var(--ff-serif);
  font-size: clamp(38px, 4.85vw, 62px);
  line-height: 1;
  color: var(--c-sand);
  display: block;
}

.band__stat-label {
  margin-top: 14px;
  display: block;
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ---------- 8. NEXT STEPS ("no dead-end pages") -------------------
   The PDF's internal-linking rule: every page must offer a way on.   */

.next-steps {
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-bg-warm);
}

/* .footer carries the same warm ground AND its own ~127px top padding, so a
   full --pad-y underneath here stacked into a ~307px band of empty colour on
   every page. Trimmed so the two together read as one normal section gap. */
/* Floor is 8px, not 40px: the footer's own top padding bottoms out at 80px,
   so a 40px floor here summed to 120px against a 72px mobile rhythm. At
   desktop 4vw wins either way, so the large-screen spacing is unchanged. */
.next-steps { padding-bottom: clamp(8px, 4vw, 60px); }

/* Likewise where a warm exp-group runs straight into next-steps: both already
   contribute --pad-y, giving ~360px. The section above supplies the space. */
.exp-group--warm + .next-steps { padding-top: 0; }

.next-steps__inner { max-width: 1180px; margin: 0 auto; }

.next-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.next-step {
  background: var(--c-bg-warm);
  padding: clamp(30px, 3vw, 46px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .6s var(--ease-out);
}

.next-step:hover { background: var(--c-paper); }

.next-step__label {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-stone);
}

.next-step__title {
  font-family: var(--ff-serif);
  font-size: clamp(21px, 2.11vw, 27px);
  line-height: 1.3;
  color: var(--c-ink);
}

.next-step__text {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-muted);
}

/* ---------- 8b. EXPERIENCE CARDS ----------------------------------
   Each live experience carries a description plus Timings and Duration,
   so the card needs a meta strip the pillar card doesn't have.        */

.exp-group { padding: 0 var(--pad-x) var(--pad-y); background: var(--c-bg); }
.exp-group--warm { background: var(--c-bg-warm); padding-top: var(--pad-y); }

/* An .exp-group leans on the PREVIOUS section's bottom padding for its top
   space, which only works while the two share a background. Across a colour
   change that padding belongs to the section above, so the heading would sit
   flush against the seam -- these groups need their own top padding. */
.exp-group--warm + .exp-group,
.band + .exp-group,
.next-steps + .exp-group,
.footer + .exp-group { padding-top: var(--pad-y); }

/* .pillars carries no top padding because it normally follows a .lede that has
   given up its own bottom padding. Following a full section instead, it needs
   the padding back or the colour change lands hard against the cards. */
.exp-group + .pillars,
.band + .pillars,
.feature + .pillars { padding-top: var(--pad-y); }

/* Same seam for .feature: it carries no top padding, so after a green band or
   a warm group the image sat flush against the colour change and read as part
   of it. A few pages patched this inline; this covers the rest. */
.band + .feature,
.exp-group--warm + .feature { padding-top: var(--pad-y); }

.exp-group__head {
  max-width: 1180px;
  margin: 0 auto clamp(40px, 4.5vw, 68px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}

.exp-group__intro {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: clamp(15px, 1.33vw, 17px);
  line-height: 1.9;
  color: var(--c-muted);
}

.exp-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(26px, 2.8vw, 44px);
}

.exp-card {
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out);
  scroll-margin-top: 160px;   /* clears the fixed nav on anchor jump */
}

.exp-group--warm .exp-card { background: var(--c-paper); }

.exp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px -30px rgba(43, 36, 27, 0.32);
}

.exp-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }

.exp-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-image);
}

.exp-card:hover .exp-card__media img { transform: scale(1.06); }

.exp-card__body {
  padding: clamp(24px, 2.2vw, 34px);
  display: flex; flex-direction: column; flex: 1;
}

.exp-card__title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(21px, 2.11vw, 27px);
  line-height: 1.3;
  color: var(--c-ink);
  margin-bottom: 14px;
}

.exp-card__text {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-muted);
  flex: 1;
}

.exp-card__meta {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}

.exp-card__meta div { display: flex; flex-direction: column; gap: 4px; }

.exp-card__meta dt,
.exp-card__meta .k {
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-stone);
}

.exp-card__meta dd,
.exp-card__meta .v {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--c-ink);
}

.exp-note {
  /* `auto` side margins centred the 74ch box, which read as indented against
     the cards. The rest of the section sits in a 1180px column centred inside
     the padding, so the note is offset by the same amount to share that left
     edge -- max() keeps it at 0 once the viewport is narrower than 1180.
     (There were two max-widths here; the 1180px one never applied.) */
  max-width: 74ch;
  margin: clamp(30px, 3vw, 44px) 0 0 max(0px, calc((100% - 1180px) / 2));
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-stone);
}

@media (max-width: 900px) {
  .exp-group__head { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- 8c. ACCOMMODATION ROWS --------------------------------
   Layout patterned on a luxury accommodations index: a category jump-nav,
   then one large alternating block per room carrying a gallery, a spec
   strip (size / bed / outlook / service) and its own booking CTA.        */

.room-nav {
  max-width: 1180px;
  margin: 0 auto clamp(48px, 5vw, 80px);
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.room-nav a {
  flex: 1 1 240px;
  background: var(--c-bg);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  transition: background .5s var(--ease-out);
}

.room-nav a:hover { background: var(--c-paper); }

.room-nav__thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-line);
}

.room-nav__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-image);
}

.room-nav a:hover .room-nav__thumb img { transform: scale(1.05); }

.room-nav__text {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 26px 24px;
}

.room-nav__name {
  font-family: var(--ff-serif);
  font-size: clamp(18px, 1.8vw, 23px);
  color: var(--c-ink);
  line-height: 1.25;
}

.room-nav__size {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-stone);
}

.rooms { padding: 0 var(--pad-x) var(--pad-y); background: var(--c-bg); }

/* On stay.html a .lede sits above and supplies the top space. The individual
   room pages open straight into .rooms after the hero, so it needs its own. */
.page-hero + .rooms { padding-top: var(--pad-y); }

.room {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(34px, 4.5vw, 82px);
  align-items: stretch;       /* image runs the full height of the row */
  scroll-margin-top: 160px;   /* clears the fixed nav on anchor jump */
}

.room + .room { margin-top: clamp(80px, 9vw, 150px); }

.room--flip .room__media { order: 2; }

/* Square by design. Stretching to the row height used to make each card's
   image a different shape, because the row height followed however much copy
   that room happened to have - Stone Cabin read square while the Bungalow and
   Villa came out as wide rectangles. A fixed 1/1 box makes all three match
   regardless of copy length, which is the look the client signed off on.
   align-self: start stops the grid stretching the box back out of ratio. */
.room__media {
  position: relative;
  aspect-ratio: 1 / 1;
  align-self: start;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.room__media img { width: 100%; height: 100%; object-fit: cover; }

.room__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.room__eyebrow {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-bottom: 18px;
  display: block;
}

.room__title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.5px;
  color: var(--c-ink);
  margin-bottom: 10px;
}

.room__size {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--c-bark);
  margin-bottom: 24px;
}

.room__text {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: clamp(15px, 1.33vw, 17px);
  line-height: 1.92;
  color: var(--c-muted);
}

/* Slash-separated feature strings on the live room pages become a list */
.room__features {
  list-style: none;
  margin: 26px 0 0;
  display: grid;
  gap: 9px;
}

.room__features li {
  position: relative;
  padding-left: 20px;
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-muted);
}

.room__features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 1px;
  background: var(--c-sand);
}

/* minmax(120px) let a longer value ("Forest & patio") push the fourth spec
   onto its own row on one card but not the next. 96px keeps all four inline. */
.room__specs {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 20px 22px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}

.room__specs div { display: flex; flex-direction: column; gap: 6px; }

.room__specs .k {
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-stone);
}

.room__specs .v {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--c-ink);
}

.room__amenities {
  list-style: none;
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.room__amenities li {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  border: 1px solid var(--c-line);
  padding: 7px 14px;
}

.room__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

.room__note {
  margin-top: 18px;
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-stone);
}

/* ---------- AMENITY GRID ------------------------------------------ */
.amenity-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.amenity {
  background: var(--c-bg);
  padding: clamp(26px, 2.6vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Matched to .next-step__title. It is an <h3> with no weight declared, so it
   was picking up the browser's bold default while the next-step titles render
   at the site's normal serif weight -- hence the two reading differently. */
.amenity__title {
  font-family: var(--ff-serif);
  font-weight: 300;   /* what .next-step__title inherits, being a non-heading */
  font-size: clamp(21px, 2.11vw, 27px);
  line-height: 1.3;
  color: var(--c-ink);
}

.amenity__text {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-muted);
}

/* ---------- ROOM DESIGN NOTES (icon grid) -------------------------
   The seven Utsav room details used to sit as prose bullets inside
   .room__body. That column then ran far past the bottom of the square
   .room__media beside it, which is fixed at aspect-ratio 1/1 and does NOT
   stretch, so the copy length is what throws the row out of balance.
   Moving them out to a full-width icon grid keeps the text column near the
   height of the square -- the proportion the client signed off on.

   Everything here is fluid: the mark, the glyph and both type sizes are
   clamped against vw so the set scales with the viewport instead of jumping at
   a breakpoint. Borderless on purpose -- 7 items never divide evenly into the
   column count, and a ruled grid would leave visible empty cells. */
.roomfeat {
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-bg-warm);
}

.roomfeat__head {
  max-width: 1180px;
  margin: 0 auto clamp(32px, 4vw, 62px);
}

/* min() on the track floor so a narrow phone gets one full-width column
   instead of a column wider than the screen. */
.roomfeat__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: clamp(26px, 3vw, 48px) clamp(20px, 2.4vw, 38px);
}

.roomfeat__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.1vw, 15px);
}

.roomfeat__mark {
  width: clamp(56px, 4.6vw, 68px);
  height: clamp(56px, 4.6vw, 68px);
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  color: var(--c-bark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .5s var(--ease-out), color .5s var(--ease-out);
}

.roomfeat__item:hover .roomfeat__mark {
  border-color: var(--c-primary);
  color: var(--c-forest);
}

/* The glyphs use a tight viewBox ("9 9 30 30") cropped to the artwork, so the
   svg box IS the ink -- no dead viewBox margin shrinking it. 62% of the mark
   leaves an even ring of padding inside the circle at every size. */
.roomfeat__mark svg {
  width: 62%;
  height: 62%;
  display: block;
}

.roomfeat__title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(15px, 1.45vw, 17.5px);
  line-height: 1.35;
  color: var(--c-ink);
}

.roomfeat__text {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: clamp(12.5px, 1.15vw, 13.5px);
  line-height: 1.75;
  color: var(--c-muted);
}

/* Two-up holds down to the narrowest phones: the labels are short enough that
   a single column would waste the width and stretch the section. */
@media (max-width: 700px) {
  .roomfeat__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .room { grid-template-columns: 1fr; }
  .room--flip .room__media { order: 0; }
  /* On mobile the image no longer needs to match a tall text column - trim it
     so the picture AND the slider dots fit in the viewport without scrolling. */
  .room__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 4/3;
    max-height: 62vh;
  }
}

/* ---------- 8e. FAQ ACCORDION -------------------------------------
   Native <details>/<summary> so it works without JavaScript and stays
   keyboard-accessible; only the marker and spacing are restyled.       */

/* margin-top because the .lede above it carries padding-bottom:0 and this
   section padding-top:0 -- without it the nav butts straight onto the intro. */
.faq-layout {
  max-width: 1180px;
  margin: clamp(40px, 5vw, 72px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.faq-nav {
  position: sticky;
  top: 160px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-line);
}

.faq-nav a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--ff-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color .4s var(--ease-out);
}

.faq-nav a:hover { color: var(--c-forest); }
.faq-nav a span { color: var(--c-stone); font-size: 11px; }

.faq-group { scroll-margin-top: 150px; }
.faq-group + .faq-group { margin-top: clamp(48px, 5vw, 78px); }

.faq-group__title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.66vw, 34px);
  line-height: 1.25;
  color: var(--c-ink);
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}

.faq { border-bottom: 1px solid var(--c-line); }

.faq__q {
  list-style: none;
  cursor: pointer;
  padding: 18px 40px 18px 0;
  position: relative;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.33vw, 17px);
  line-height: 1.6;
  color: var(--c-ink);
  transition: color .4s var(--ease-out);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-bark); }

/* plus / minus built from two rules so no icon font is needed */
.faq__q::after,
.faq__q::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--c-stone);
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
.faq__q::before { width: 13px; height: 1px; margin-top: -0.5px; }
.faq__q::after  { width: 1px; height: 13px; right: 12px; margin-top: -6.5px; }
.faq[open] .faq__q::after { opacity: 0; transform: rotate(90deg); }

.faq__a { padding: 0 40px 22px 0; }
.faq__a a {
  color: var(--c-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.faq__a a:hover { color: var(--c-primary); }

/* Compact FAQ block used at the foot of hub pages */
.pillars.pillars--faq { padding-top: clamp(56px, 6vw, 84px); padding-bottom: clamp(56px, 6vw, 84px); }
.pillars--faq .pillars__head { margin-bottom: clamp(12px, 1.4vw, 20px); }
.pillars--faq .pillars__head .display { margin-bottom: 12px; }

.faq__a p {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.9;
  color: var(--c-muted);
}

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-nav { position: static; margin-bottom: 8px; }
}

/* ---------- 8f. GALLERY ------------------------------------------- */

.gal-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(200px, 22vw, 300px);
  grid-auto-flow: dense;
  gap: clamp(8px, 0.9vw, 14px);
}

.gal-item {
  position: relative;
  overflow: hidden;
  display: block;
  height: 100%;
}

.gal-item[hidden] { display: none; }

/* Editorial rhythm: a tall middle anchor every 5 tiles, and an
   occasional wide tile - mirrors the Six Senses / safari-lodge pattern
   where a full-height photograph pins the grid. grid-auto-flow: dense
   backfills so category filters still lay out cleanly. */
.gal-item:nth-of-type(5n + 2) { grid-row: span 2; }
.gal-item:nth-of-type(11n + 6) { grid-column: span 2; }

.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-image);
}

.gal-item:hover img { transform: scale(1.06); }

/* ---------- 8g. OFFERS -------------------------------------------- */

.offer-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 2.6vw, 40px);
}

.offer {
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  overflow: hidden;
}

.offer__media { aspect-ratio: 16 / 10; overflow: hidden; }
.offer__media img { width: 100%; height: 100%; object-fit: cover; }

.offer__body {
  padding: clamp(26px, 2.4vw, 38px);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.offer__badge {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-forest);
  margin-bottom: 14px;
}

.offer__title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.27vw, 29px);
  line-height: 1.3;
  color: var(--c-ink);
  margin-bottom: 14px;
}

.offer__text {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-muted);
  flex: 1;
  margin-bottom: 26px;
}

/* ---------- 8h. LOCATION POINTS ------------------------------------ */

.loc-group + .loc-group { margin-top: clamp(40px, 4vw, 60px); }

.loc-group__title {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-bottom: 8px;
}

.loc-list { list-style: none; border-top: 1px solid var(--c-line); }

.loc-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--c-line);
}

.loc-list__name {
  font-family: var(--ff-serif);
  font-size: clamp(17px, 1.65vw, 21px);
  color: var(--c-ink);
}

.loc-list__dist {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--c-bark);
  white-space: nowrap;
}

/* ---------- 9. JOURNAL -------------------------------------------- */

.j-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(38px, 4vw, 60px);
  margin-bottom: clamp(42px, 4vw, 64px);
}

.j-filter {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding: 11px 22px;
  border: 1px solid var(--c-line);
  background: transparent;
  cursor: pointer;
  transition: all .5s var(--ease-out);
}

.j-filter:hover { border-color: var(--c-bark); color: var(--c-ink); }

.j-filter.is-active {
  background: var(--c-forest);
  border-color: var(--c-forest);
  color: #fff;
}

.j-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 3vw, 46px);
}

.j-card { display: flex; flex-direction: column; }
.j-card[hidden] { display: none; }

.j-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: 22px;
}

.j-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-image);
}

.j-card:hover .j-card__media img { transform: scale(1.06); }

.j-card__meta {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-bottom: 14px;
}

.j-card__title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(21px, 2.11vw, 27px);
  line-height: 1.32;
  color: var(--c-ink);
  margin-bottom: 12px;
  transition: color .4s var(--ease-out);
}

.j-card:hover .j-card__title { color: var(--c-bark); }

.j-card__excerpt {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-muted);
}

/* ---------- 9b. PRESS / AWARDS CARD VARIANT -----------------------
   Same .j-card as the journal, but the media is a publication logo or an award
   badge rather than a photograph: contain it on paper instead of cropping it,
   and drop the hover zoom, which looks wrong on a wordmark.                  */

.j-card--logo .j-card__media {
  aspect-ratio: 16 / 10;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
}

.j-card--logo .j-card__media img {
  object-fit: contain;
  padding: clamp(18px, 2vw, 30px);
}

.j-card--logo:hover .j-card__media img { transform: none; }
.j-card--logo:hover .j-card__media { border-color: var(--c-sand); }

.j-card__quote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(15px, 1.33vw, 17px);
  line-height: 1.6;
  color: var(--c-bark);
  margin-bottom: 12px;
}

.j-card__source {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-top: auto;
  padding-top: 14px;
}

/* the outbound arrow only makes sense where a card actually links out */
.j-card__out {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-forest);
  transition: gap .5s var(--ease-out);
}

.j-card:hover .j-card__out { gap: 18px; }
.j-card__out svg { width: 26px; height: 8px; overflow: visible; }
.j-card__out svg line,
.j-card__out svg polyline { stroke: currentColor; stroke-width: 1.2; fill: none; }

/* ---------- 10. ARTICLE ------------------------------------------- */

.article {
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-bg);
}

.article__inner { max-width: 820px; margin: 0 auto; }

/* The last block's own bottom margin sat on top of the section's padding, so
   every article closed on 207px of space against 180px at the top. */
.article__inner > *:last-child { margin-bottom: 0; }

/* .article__inner is needed on the selector: .article__meta alone is (0,1,0)
   and loses to `.article__inner p` at (0,1,1), which was quietly cutting the
   46px below the rule down to the paragraph's own 27px. */
.article__inner .article__meta {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-stone);
  padding-bottom: 26px;
  margin-bottom: 46px;
  border-bottom: 1px solid var(--c-line);
}

.article__inner p {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 17px;
  line-height: 2;
  color: var(--c-muted);
  margin-bottom: 1.6em;
}

.article__inner h2 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(27px, 2.97vw, 38px);
  line-height: 1.28;
  color: var(--c-ink);
  margin: 2.2em 0 0.8em;
}

/* :first-child never matches here -- the meta line is always the first child --
   so an article opening on a heading started 81px lower than one opening on a
   paragraph. Target the heading that follows the rule instead. */
/* No article used an h3 until the season guide's per-season blocks. h2's rule
   is too heavy for a sub-head sitting inside one of those sections. */
.article__inner h3 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(20px, 1.72vw, 24px);
  line-height: 1.3;
  color: var(--c-ink);
  margin: 1.9em 0 0.6em;
}

.article__inner h2:first-child,
.article__inner .article__meta + h2,
.article__inner .article__meta + h3 { margin-top: 0; }

/* Lists inside an article had no styling at all, so they fell back to body
   defaults - weight 300 at 16px in ink rather than the 200/17px muted the
   paragraphs use. Worse, styles.css sets a global `ul { list-style: none }`,
   so bulleted lists rendered with no marker and no indent and read as a run of
   loose lines. Match the paragraph type and put the markers back. */
.article__inner ul,
.article__inner ol {
  margin: 0 0 1.6em;
  padding-left: 1.5em;
}

.article__inner ul { list-style: disc; }
.article__inner ol { list-style: decimal; }

.article__inner li {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 17px;
  line-height: 2;
  color: var(--c-muted);
  margin-bottom: 0.5em;
  padding-left: 0.35em;
}

.article__inner li::marker { color: var(--c-stone); }
.article__inner li:last-child { margin-bottom: 0; }

.article__inner blockquote {
  margin: 2.4em 0;
  padding-left: 32px;
  border-left: 2px solid var(--c-sand);
}

.article__inner blockquote p {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(20px, 1.96vw, 25px);
  line-height: 1.6;
  color: var(--c-bark);
  margin-bottom: 0;
}

.article__figure { margin: 2.6em 0; }
.article__figure img { width: 100%; height: auto; display: block; }

.article__figure figcaption {
  margin-top: 14px;
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-stone);
}

/* ---------- 11. CONTACT ------------------------------------------- */

.contact-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.contact-block + .contact-block { margin-top: 42px; }

.contact-block__label {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-bottom: 14px;
}

.contact-block p,
.contact-block address {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-style: normal;
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-muted);
}

.contact-block a { color: var(--c-muted); border-bottom: 1px solid var(--c-line); transition: color .4s var(--ease-out); }
.contact-block a:hover { color: var(--c-forest); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-bottom: 10px;
}

.field input,
.field select,
.field textarea {
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 15px;
  color: var(--c-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-line);
  padding: 12px 0;
  border-radius: 0;
  transition: border-color .5s var(--ease-out);
}

.field textarea { resize: vertical; min-height: 110px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--c-forest);
}

/* ---------- 11b. CHECKBOXES, MULTI-SELECT, DISTANCES --------------- */

.field--check {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.field--check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--c-forest);
  border: 1px solid var(--c-line);
}

.field--check label {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-muted);
}

.field select[multiple] {
  border: 1px solid var(--c-line);
  padding: 10px 12px;
  min-height: 150px;
}

.field select[multiple] option { padding: 5px 2px; }

.field__hint {
  margin-top: 8px;
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 12px;
  color: var(--c-stone);
}

/* Multi-select styled as a single dropdown: same closed-state appearance as
   .field select, but a panel of checkboxes so several can be chosen without
   the Ctrl/Cmd-click that a native <select multiple> demands. */
.field__label {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-bottom: 10px;
}

/* Card media links: the card already carries a text link, so the image link is
   a mouse convenience only - hidden from the tab order and the a11y tree so it
   does not read out as a second, identical destination. */
/* The link is only a click wrapper around the picture; the shape belongs to
   the container (.pillar__media, .offer__media, .stay-slider__slide all set
   their own aspect-ratio + overflow: hidden). Without height:100% here the
   img's own height:100% resolves against an auto-height box, so it falls back
   to the photo's intrinsic ratio and object-fit: cover never engages - which
   left any card whose photo was wider than its container's ratio sitting
   short, with a gap under the image. */
.card-img-link { display: block; height: 100%; }
.card-img-link img { display: block; width: 100%; }

.multiselect { position: relative; }

.multiselect__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 15px;
  text-align: left;
  color: var(--c-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-line);
  padding: 12px 0;
  border-radius: 0;
  cursor: pointer;
  transition: border-color .5s var(--ease-out);
}

.multiselect__toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-bottom: 3px;
  border-right: 1px solid var(--c-stone);
  border-bottom: 1px solid var(--c-stone);
  transform: rotate(45deg);
  transition: transform .35s var(--ease-out);
}

.multiselect__toggle:focus-visible { outline: none; border-bottom-color: var(--c-forest); }
.multiselect__toggle[aria-expanded="true"] { border-bottom-color: var(--c-forest); }
.multiselect__toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -3px; }

.multiselect__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiselect__value--empty { color: var(--c-stone); }

.multiselect__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .09);
  padding: 6px 0;
}

.field label.multiselect__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-muted);
  cursor: pointer;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}

.field label.multiselect__option:hover { background: var(--c-mist, rgba(0,0,0,.035)); color: var(--c-ink); }

.field label.multiselect__option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  accent-color: var(--c-forest);
}

/* Distances from nearby cities */
.distances {
  list-style: none;
  margin-top: 6px;
  border-top: 1px solid var(--c-line);
}

.distances li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 15px;
  color: var(--c-muted);
}

.distances li span:last-child { color: var(--c-ink); font-weight: 300; }

/* ---------- 11c. MAP + ACCREDITATIONS ------------------------------ */

.map-wrap {
  max-width: 1180px;
  margin: 0 auto;
  /* was var(--c-line), a faint brown. Solid white, no transparency, so it holds
     its edge on the darker cream of the contact page. All widths. */
  border: 1px solid #fff;
  overflow: hidden;
  line-height: 0;
}

.map-wrap iframe {
  width: 100%;
  height: clamp(340px, 46vw, 520px);
  border: 0;
  display: block;
  filter: saturate(0.85) contrast(1.02);
}

.accred {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(40px, 4vw, 64px);
  border-top: 1px solid var(--c-line);
}

.accred figure { text-align: center; }

/* These are served as true transparent PNGs from the older CDN folder
   (utsav-camp-sariska/...), not the flattened JPEG copies in the newer
   ai--- library, so no blend-mode trick is needed to hide a white box. */
.accred img {
  max-width: 100%;
  height: auto;
  max-height: 74px;
  width: auto;
  margin: 0 auto;
}

/* No figcaption: each logo carries its own wordmark, so a text label under it
   just repeats the image. The brand names live in the img alt text instead. */

/* .btn sets no line-height, so it inherits whatever wraps it. Inside an
   .article__inner paragraph (line-height 2) buttons came out 22px instead of
   the 19.25px they are everywhere else. 1.75 is the value the homepage's
   buttons already compute to, so this changes nothing there. */
.btn { line-height: 1.75; }

/* ---------- 11a. RATING ROWS (feedback form) ----------------------
   Each criterion on the feedback form is a three-option radio group. Built on
   <fieldset>/<legend> so the grouping is announced to screen readers.        */

.rating {
  grid-column: 1 / -1;
  border: 0;
  margin: 0 0 4px;
  padding: 18px 0 0;
  border-top: 1px solid var(--c-line);
}

/* float + full width takes the legend out of the fieldset's border gap; without
   it the border-top runs straight through the label text. */
.rating legend {
  float: left;
  width: 100%;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-stone);
  padding: 0;
  margin-bottom: 12px;
}

.rating__opts { clear: both; }

.rating__opts { display: flex; flex-wrap: wrap; gap: 10px 28px; }

.rating__opts label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ff-sans);
  font-weight: 200;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-muted);
  cursor: pointer;
}

.rating__opts input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: var(--c-forest);
  flex-shrink: 0;
  cursor: pointer;
}

@media (max-width: 560px) {
  .rating__opts { flex-direction: column; gap: 9px; }
}

/* ---------- 11b. FOOTER LEGAL ROW ---------------------------------
   The policy / utility pages (terms, kids policy, fact sheet ...) belong in the
   footer rather than the main nav, which is where the live site keeps them.
   Sits just above .footer__bottom and borrows its type scale.              */

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  padding-top: 26px;
  margin-top: 34px;
  border-top: 1px solid var(--c-line);
}

.footer__legal a {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color .4s var(--ease-out);
}

.footer__legal a:hover { color: var(--c-ink); }

/* the row already provides the rule, so drop the one .footer__bottom draws */
.footer__legal + .footer__bottom { border-top: 0; padding-top: 22px; }

@media (max-width: 560px) {
  .footer__legal { gap: 10px 20px; }
  .footer__legal a { font-size: 10px; letter-spacing: 0.16em; }
}

/* ---------- 11b-1. FOOTER LAYOUT ----------------------------------
   Three headings -- Discover, Contact, Quick Links -- with the social icons at
   the bottom left and Sitemap + the Simplotel credit at the bottom right.   */

.footer__cols--three {
  grid-template-columns: minmax(200px, 1fr) minmax(220px, 1fr) minmax(320px, 1.6fr);
}

/* the quick links are a long list, so they run in their own columns rather
   than one tall stack */
.footer__quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  column-gap: 30px;
}

/* Stacks the Follow Us label over a row holding the icons and the meta links.
   The rule that used to divide this row is dropped -- the columns above
   already sit on their own divider. */
.footer__bottom {
  display: block;
  border-top: 0;
  padding-top: 14px;
}

.footer__bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;      /* icons and Sitemap centred against each other */
  justify-content: space-between;
  gap: 20px 32px;
}

/* follows the column headings above rather than the row's uppercase 13px */
.footer__bottom .footer__social-title {
  margin-bottom: 10px;
  font-size: 15px;
  letter-spacing: 0.32em;
  color: var(--c-bark);
}

.footer__social-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* 17px in a 40px circle left the detailed marks -- the TripAdvisor owl, the
   Instagram camera -- reading as blobs. 18px in 40px keeps them legible. */
.footer__social-link {
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out), background .35s var(--ease-out);
}

.footer__social-link svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* the maps pin is tall and narrow and the youtube mark is wide and short, so
   at a shared box size they read as different weights -- nudged to match */
.footer__social-link[aria-label="Google Maps"] svg { width: 16px; height: 16px; }
.footer__social-link[aria-label="YouTube"] svg { width: 20px; height: 20px; }

.footer__social-link:hover {
  color: #fff;
  background: var(--c-forest);
  border-color: var(--c-forest);
}

/* Sitemap and the credit stay together at the right end of the row */
.footer__meta {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}

@media (max-width: 900px) {
  .footer__cols--three { grid-template-columns: 1fr; }
  .footer__quick { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  /* Sitemap is desktop-only; without it the credit is the sole item in the
     row, so it sits flush with the left edge rather than after a gap. */
  .footer__sitemap { display: none; }
  .footer__meta { margin-left: 0; gap: 0; }

  .footer__bottom { padding-top: 16px; }
}

/* ---------- 11b-2. FOOTER SITEMAP LINK ----------------------------
   The only Sitemap link used to sit in the drawer's Information column, which
   is hidden on phones, so on mobile the page was unreachable. It now leads
   .footer__bottom on every inner page, ahead of the Simplotel credit and set
   to exactly the same type -- 16px, --c-muted, normal case -- rather than the
   uppercase treatment the row itself carries.                              */

.footer__sitemap {
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-muted);
  white-space: nowrap;
  transition: color .35s var(--ease-out);
}

.footer__sitemap:hover { color: var(--c-earth); }

/* styles.css takes the footer links to 14px below 640px, but inner.css loads
   after it, so that rule could never reach this selector. Restated here so the
   Sitemap keeps step with the credit beside it. */
@media (max-width: 640px) {
  .footer__sitemap { font-size: 14px; }
}

/* ---------- 11c. INNER-PAGE HEADING SCALE -------------------------
   .display is 76px, set for the homepage where the h1 is 118px. On an inner
   page the h1 is 78px, so a 76px section heading sat 2px below the page title
   and the hierarchy read as flat. Scoped to the inner-page section wrappers
   only -- the homepage's .display lives in .discover / .experiences / .spa /
   .stay / .why and is untouched.

   Resulting scale: h1 78 -> section h2 56 -> article h2 37 -> h3 24.          */

.lede .display,
.pillars .display,
.exp-group .display,
.next-steps .display,
.rooms .display {
  font-size: clamp(32px, 4.38vw, 56px);
}

/* ---------- 11d. WHOLE-PIXEL TEXT, SHARED CHROME ------------------
   The footer newsletter line is a clamp that only reaches its whole 20px above
   ~1429px. Declared in styles.css, which the homepage also loads, so it is
   scoped with :has(.page-hero) to the 99 inner pages.

   The nav CTA used to be corrected here too, from 10.5px to 11px. It is now
   11px at source in styles.css for every page and width, so the override is
   gone rather than left to shadow it.                                        */

body:has(.page-hero) .footer__hero-text { font-size: clamp(17px, 1.57vw, 20px); }

/* ---------- 11e. MOBILE DRAWER ------------------------------------
   Below 1024px the drawer IS the navigation, and it was unusable: .menu-grid
   is a flex item, so its default min-width:auto stopped it shrinking and
   auto-fit laid 7 columns across a 390px phone -- 1124px wide, columns running
   from x -374 to 750. Collapse it to one vertical list, show only the summary
   pages plus the Plan group, and give the nav its dark treatment so the logo,
   burger and CTA are not white-on-cream while the drawer is open.           */

@media (max-width: 1023px) {

  .mobile-menu { align-items: flex-start; padding: 96px 24px 56px; }

  /* align-items:flex-start makes the drawer's content shrink-wrap, so its width
     came from whatever child happened to be widest -- removing the Book Now
     link from the foot pulled the whole list in by 12px. Pin it to the full
     width so the list edge is set by the padding, not by its contents. */
  .mobile-menu nav { width: 100%; }

  .menu-grid {
    grid-template-columns: 1fr;
    gap: 0;
    min-width: 0;          /* the actual cause of the 1124px overflow */
    max-width: 460px;
    text-align: left;
  }

  .menu-col {
    min-width: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-line);
  }

  .menu-col__title { display: none; }

  /* .mobile-menu .menu-grid a (line ~297) sets font-size with !important and
     draws a rule under every link. At this width .menu-col already carries the
     divider, so the per-link border would double it. Match that selector's
     weight rather than fighting it. */
  .mobile-menu .menu-grid a.menu-col__lead {
    font-size: 24px !important;
    line-height: 1.25;
    padding: 4px 0;
    border-bottom: 0;
  }

  /* Deep child pages used to be hidden outright here, which left the Tehla
     pages, the room pages and the conservation pages unreachable from the phone
     menu. They now sit in a dropdown per section, collapsed until the guest
     taps the chevron -- the lead link still navigates to the section itself. */
  .menu-col { position: relative; }

  .menu-col > a:not(.menu-col__lead) { display: none; }

  .menu-col.is-open > a:not(.menu-col__lead) { display: block; }

  /* matches the weight of .mobile-menu .menu-grid a (line ~308), which sets
     font-size with !important and draws its own rule under every link */
  .mobile-menu .menu-grid .menu-col.is-open > a:not(.menu-col__lead) {
    font-family: var(--ff-sans) !important;
    font-size: 15px !important;
    font-weight: 200;
    letter-spacing: 0.04em;
    color: var(--c-muted);
    padding: 11px 0 11px 18px;
    border-bottom: 0;
  }

  /* the toggle sits immediately after the lead, so its adjacent sibling is the
     first child page -- :first-of-type would have matched the lead itself */
  .mobile-menu .menu-grid .menu-col.is-open > .menu-col__toggle + a {
    margin-top: 6px;
  }

  /* the chevron: same 45-degree border trick the desktop nav uses for
     .nav__item--has-sub, sized for a 44px touch target */
  .menu-col__toggle {
    display: block;
    position: absolute;
    top: 8px;
    right: 0;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  .menu-col__toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -5px 0 0 -4px;
    border-right: 1px solid var(--c-stone);
    border-bottom: 1px solid var(--c-stone);
    transform: rotate(45deg);
    transition: transform .35s var(--ease-out);
  }

  .menu-col.is-open > .menu-col__toggle::before {
    transform: rotate(225deg);
    margin-top: -2px;
  }

  /* the long Information list is secondary; it lives in the footer of the
     pages that need it rather than in the phone's main menu */
  .menu-col--info { display: none; }

  /* The Plan group loses its own label and its six pages join the main list as
     equals -- same 24px serif, each with the divider the sections carry. The
     column's padding is dropped so the links set their own rhythm. */
  .menu-col:has(> .menu-col__lead[href$="our-story.html"]) { border-bottom: 0; padding: 0; }
  .menu-col:has(> .menu-col__lead[href$="our-story.html"]) > .menu-col__lead { display: none; }

  .mobile-menu .menu-grid .menu-col:has(> .menu-col__lead[href$="our-story.html"]) > a:not(.menu-col__lead) {
    display: block;
    font-family: var(--ff-serif) !important;
    font-size: 24px !important;
    font-weight: 200;   /* the weight the section leads inherit */
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    color: var(--c-ink);
    padding: 18px 0;
    border-bottom: 1px solid var(--c-line);
  }

  /* no trailing rule at the very end of the menu -- needs the same weight as
     the rule above, which would otherwise win and keep the border */
  .mobile-menu .menu-grid .menu-col:has(> .menu-col__lead[href$="our-story.html"]) > a:last-child { border-bottom: 0; }

  .menu-foot { margin-top: 28px; }

  /* nav sits above the drawer (z 100 vs 90) with white-on-transparent styling,
     which disappears against the cream drawer. Same treatment as .nav--scrolled. */
  /* The nav is transparent until .nav--scrolled, so with the drawer open the
     list scrolled underneath it and showed through behind the logo. Give the
     bar the drawer's own background while it is open, so the list disappears
     cleanly beneath it -- which is why it already looked right after scroll. */
  body:has(#mobileMenu.is-open) .nav { background: var(--c-bg); }

  body:has(#mobileMenu.is-open) .nav__logo img { filter: brightness(0); }
  body:has(#mobileMenu.is-open) .nav__burger span { background: var(--c-ink); }

  /* Only while the nav is still transparent. Once scrolled, .nav--scrolled has
     already given the CTA a solid forest fill with white text, and forcing the
     ink colour on top of that put dark text on a dark button (~1.9:1). The
     logo and burger need no such guard -- dark is correct against both the
     cream drawer and the cream scrolled bar. */
  body:has(#mobileMenu.is-open) .nav:not(.nav--scrolled) .nav__cta {
    color: var(--c-ink);
    border-color: rgba(43, 36, 27, 0.35);
  }

  /* The desktop menu icon is .nav__item--more: three 1px bars in a 22x14 box.
     The phone burger shipped as two bars in 32x24, so the same control looked
     like a different glyph at the two widths. Match the desktop box exactly and
     let padding carry the touch target -- 32x24 was below any sensible minimum
     for the primary nav control. */
  .nav__burger {
    width: 22px;
    height: 14px;
    padding: 10px 6px;        /* 34x34 hit area around a 22x14 glyph */
    box-sizing: content-box;
  }

  /* three bars means the middle one has to go before the outer two cross */
  .nav__burger.is-open span:nth-child(2) { opacity: 0; }
  .nav__burger.is-open span:first-child { transform: translateY(6.5px) rotate(45deg); }
  .nav__burger.is-open span:last-child  { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ---------- 11e-2. BUTTON ROW -------------------------------------
   A pair of CTAs sat in a <p> separated by &nbsp;&nbsp;. Those are horizontal
   spaces: side by side on a desktop they read as a gap, but the moment the
   buttons wrap onto separate lines on a phone they contribute nothing and the
   two touch. A flex row spaces them on both axes and keeps the 34px the
   inline style used to carry.                                              */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* ---------- 11f. FILLED CTAS ON TOUCH -----------------------------
   Every button on the site is an outline that fills via a ::before sliding in
   on hover. A phone has no hover, so they all sit empty and the primary action
   on a page never announces itself. Below 900px they ship already filled --
   using exactly the colours the hover animation lands on, so no new colour is
   introduced and the desktop behaviour is untouched.

   .nav__cta is deliberately excluded: it sits over hero imagery at the top of
   every page, where an outline is what keeps it legible.

   The ::before still scales in on tap (touch fires a sticky :hover), but it is
   the same forest fill underneath, so nothing visibly changes.             */

@media (max-width: 900px) {

  .btn--outline,
  .footer__newsletter button {
    background: var(--c-forest);
    color: var(--c-bg);
    border-color: var(--c-forest);
  }

  .btn--banner {
    background: var(--c-forest);
    color: #fff;
    border-color: var(--c-forest);
  }
}

/* ---------- 11g. EYEBROW -> HEADING GAP, PHONES -------------------
   The gap under a section eyebrow is 36px, dropping to 30px below 640px. This
   takes it to 20px, on every page. Trialled on the homepage first.

   `section` keeps the footer column labels out of it: those are list headings,
   not eyebrow-plus-heading pairs, and sit at 18px.                          */

@media (max-width: 640px) {

  section .eyebrow { margin-bottom: 20px; }

  /* these two carry deliberate spacing of their own -- restored so the rule
     above does not flatten them by accident */
  .letters__head .eyebrow { margin-bottom: 24px; }
  .banner__card .eyebrow { margin-bottom: 28px; }
}

/* ---------- 11h. SMALL-CAPS LABELS, DESKTOP ----------------------
   The uppercase tracked labels were all 11px, which reads as too small on a
   desktop screen. 13px across the family, above the phone breakpoint only --
   mobile keeps 11px, which is the floor agreed for phones.

   Deliberately excluded: .nav__cta (set to 11px on request) and .btn (button
   text rather than a label).                                               */

@media (min-width: 901px) {
  .eyebrow,
  .crumb,
  .band__stat-label,
  .next-step__label,
  .j-card__meta,
  .j-filter,
  .j-count,
  .room__eyebrow,
  .room-nav__size,
  .feature__caption,
  .pillar__link,
  .offer__badge,
  .spa__meta,
  .why__cap-num,
  .info__featured-label,
  .nav__sub-title { font-size: 13px; }
}

/* ---------- 12. RESPONSIVE ---------------------------------------- */

@media (max-width: 900px) {
  .lede__inner,
  .feature__grid,
  .contact-grid { grid-template-columns: 1fr; }

  /* Once the lede stacks, the column-gap no longer separates the heading from
     the copy and .lede__heading carries no margin of its own -- so the two
     would touch. Scoped to the wrapper form: the pages that put .lede__body
     straight on a <p> already set their own heading margin inline. */
  .lede__heading + .lede__body { margin-top: clamp(24px, 4vw, 36px); }

  .feature--flip .feature__media { order: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .page-hero { height: clamp(440px, 62vh, 560px); }

  /* The hero section carries .page-hero AND .hero, and .hero brings its own
     horizontal inset (24px on phones, styles.css). That stacked on top of
     .page-hero__inner's var(--pad-x), so hero copy started at 44px while the
     body copy below it started at 20px. Drop the outer inset and let
     .page-hero__inner alone set the edge, matching every section beneath it.
     Scoped to .page-hero so the homepage's own .hero is untouched. The media
     layer is inset-positioned, so this does not move the image. */
  .page-hero { padding-left: 0; padding-right: 0; }

  /* 10px spec keys (.exp-card__meta .k, .room__specs .k) are fine on a desktop
     screen but below the 11px phone floor. Mobile only -- desktop keeps 10px. */
  .exp-card__meta .k,
  .room__specs .k { font-size: 11px; }

  /* the hero veil used to be overridden here for phones; it is now the base
     rule, since desktop needed the same treatment */
}

@media (max-width: 560px) {
  /* 11px is the floor for body text on a phone. The tracking comes down a
     notch to buy back the width the larger size costs, so long trails like
     HOME - JOURNAL - <article> still fit. */
  .crumb { font-size: 11px; letter-spacing: 0.18em; }
  .band__stats { gap: 28px; }
}

/* ---------- 13. REDUCED MOTION ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .page-hero__media img,
  .pillar,
  .pillar__media img,
  .j-card__media img {
    transition: none;
    transform: none;
  }
}

/* ---------- 11i. GALLERY LIGHTBOX ---------------------------------
   Gallery images used to open the full-size file in a new tab, which left the
   site entirely. They now open in place, as the reference does.            */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 16, 11, 0.82);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease-out), visibility .45s;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__panel {
  background: var(--c-bg);
  max-width: 1100px;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateY(12px);
  transition: transform .45s var(--ease-out);
}

.lightbox.is-open .lightbox__panel { transform: translateY(0); }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
}

.lightbox__title {
  font-family: var(--ff-serif);
  font-size: 17px;
  color: var(--c-ink);
  margin: 0;
}

.lightbox__close {
  font-size: 26px;
  line-height: 1;
  color: var(--c-muted);
  background: none;
  border: 0;
  padding: 4px 8px;
  transition: color .3s var(--ease-out);
}

.lightbox__close:hover { color: var(--c-ink); }

.lightbox__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 180px);
  display: block;
  object-fit: contain;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(20, 16, 11, 0.35);
  border: 0;
  transition: background .3s var(--ease-out);
}

.lightbox__nav:hover { background: rgba(20, 16, 11, 0.7); }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }

body.lightbox-open { overflow: hidden; }

@media (max-width: 640px) {
  .lightbox { padding: 12px; }
  .lightbox__bar { padding: 14px 16px; }
  .lightbox__title { font-size: 15px; }
  .lightbox__img { max-height: calc(100vh - 150px); }
  .lightbox__nav { width: 40px; height: 40px; font-size: 22px; }
}

/* ---------- 11j. GALLERY CAROUSEL, PHONES ------------------------
   Stacked thumbnails made the gallery a very long scroll on a phone. Below
   900px the grid becomes a one-up swipeable track with the desktop arrow mark
   underneath. No dots. Desktop keeps its grid untouched.                   */

.gal-nav { display: none; }
.gal-nav__btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.1; }

@media (max-width: 900px) {
  .gal-grid {
    display: flex;
    grid-template-columns: none;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gal-grid::-webkit-scrollbar { display: none; }

  .gal-item,
  .gal-item:nth-of-type(5n + 2),
  .gal-item:nth-of-type(11n + 6) {
    flex: 0 0 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    grid-row: auto;
    grid-column: auto;
    scroll-snap-align: center;
  }

  .gal-nav {
    display: flex;
    /* pushed to the ends so each arrow sits under a corner of the image */
    justify-content: space-between;
    align-items: center;
    gap: 0;
    margin-top: 18px;
  }

  .gal-nav__btn { width: 56px; height: 22px; color: var(--c-ink); }
  .gal-nav__btn:disabled { opacity: 0.3; }
}

/* ---------- 11k. SPLIT BAND, DESKTOP -----------------------------
   Heading on the left, copy on the right -- the two-column arrangement the
   lede widget uses -- instead of one narrow column with the right half empty.
   Opt-in via .band--split so it can be judged on one page first. Below 901px
   the band keeps its single stacked column.                                */

@media (min-width: 901px) {
  .band--split .band__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Row 1 is pinned to its content. Without this the copy column, which
       spans rows 1-2, distributes its extra height across both -- inflating
       the gap under the eyebrow well beyond its 36px margin. The slack now
       falls into row 2, below the heading. */
    grid-template-rows: min-content 1fr auto;
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }

  .band--split .band__inner > .eyebrow { grid-column: 1; grid-row: 1; }

  .band--split .band__heading {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
    max-width: none;
  }

  .band--split .band__text {
    grid-column: 2;
    grid-row: 1 / span 2;   /* sits alongside the eyebrow and heading */
    max-width: none;
  }

  .band--split .band__stats { grid-column: 1 / -1; grid-row: 3; }
}

/* ---------- 11l. BOXED FORM FIELDS -------------------------------
   Underlined inputs read as faint on a pale background; these are outlined
   boxes instead, as the reference form uses. Type styles are unchanged --
   only the field container. Opt-in via .form-grid--boxed so contact-us.html can
   be judged before the other forms follow. Desktop and mobile both.       */

.form-grid--boxed .field input,
.form-grid--boxed .field select,
.form-grid--boxed .field textarea {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  padding: 13px 14px;
  transition: border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}

.form-grid--boxed .field input:focus,
.form-grid--boxed .field select:focus,
.form-grid--boxed .field textarea:focus {
  border-color: var(--c-forest);
  box-shadow: 0 0 0 2px rgba(61, 90, 72, 0.12);
}

.form-grid--boxed .field input::placeholder,
.form-grid--boxed .field textarea::placeholder { color: var(--c-stone); }

.form-grid--boxed .field textarea { min-height: 130px; }

.form-grid--boxed .field select[multiple] { padding: 10px 12px; }

/* the multi-select toggle is a field like any other, so it takes the same box */
.form-grid--boxed .multiselect__toggle {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  padding: 13px 14px;
  transition: border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}

.form-grid--boxed .multiselect__toggle:focus-visible,
.form-grid--boxed .multiselect__toggle[aria-expanded="true"] {
  border-color: var(--c-forest);
  box-shadow: 0 0 0 2px rgba(61, 90, 72, 0.12);
}

.form-grid--boxed .multiselect__panel { background: #fff; border-radius: 2px; }

/* the checkbox rows are not boxed -- only the fields that take typed input */
.form-grid--boxed .field--check input[type="checkbox"] {
  background: #fff;
  padding: 0;
  border-radius: 2px;
}

/* the asterisk marking a required field; aria-hidden because the control
   already carries the required attribute for assistive tech */
.field__req {
  color: var(--c-primary);
  margin-left: 4px;
  font-size: 1.1em;
  line-height: 1;
}

/* the whole date field is clickable, so show it */
.form-grid--boxed .field input[type="date"] { cursor: pointer; }

/* ---------- Article comparison table (journal) ---------- */
.article__table { overflow-x: auto; margin: 32px 0; }
.article__table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article__table th,
.article__table td { border: 1px solid rgba(46, 74, 52, 0.22); padding: 12px 16px; text-align: left; vertical-align: top; }
.article__table th { font-weight: 600; background: rgba(46, 74, 52, 0.06); }