/* ==========================================================================
   Ranthambore Aangan — homepage
   Structure, scale and motion modelled on flyward.com; palette, type and
   content are the hotel's own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* ---- Colour ------------------------------------------------------------
     The homepage palette is the source of truth. Inner pages must not
     introduce new hues. */
  /* The palette is green now — the forest photograph's own range, kept soft.
     Nothing here is a saturated green: the brightest thing on the page is the
     CTA, and it sits at 34% saturation, which is about where a leaf in shade
     actually is. The old warm names are kept as aliases underneath so that
     every rule downstream keeps working untouched; the six lines below are the
     only place a hue is decided. */
  --forest:     #24331F;   /* Deep Forest — text, footer, dark sections    */
  --green:      #557A4B;   /* Green       — primary CTA, headings, figures */
  --green-dark: #446239;   /* the same hue at 80% value, for the CTA hover */
  --leaf:       #9CB27A;   /* Leaf        — illustrations, nature accents  */
  --sage:       #D8E0CE;   /* Sage        — section highlights / soft blocks */
  --paper:      #F2F2E9;   /* Paper       — primary background            */

  /* Aliases. The names are the old warm ones and the values are the new green
     ones, so the rest of the sheet did not have to be rewritten to change the
     palette. Prefer the green names above in anything new. */
  --ivory:      var(--paper);
  --peach:      var(--sage);
  --olive:      var(--leaf);
  --ochre:      var(--green);
  --ochre-dark: var(--green-dark);
  --earth:      var(--forest);

  /* roles */
  --bg:            var(--ivory);      /* primary background       */
  --bg-alt:        var(--peach);      /* alternate / soft block   */
  /* the peach let all the way down — a ground that separates from the ivory
     without competing with the photographs sitting on it. Same hue, so it
     adds nothing to the palette. */
  --bg-soft:       #E9EDE0;
  --bg-dark:       var(--earth);      /* dark section             */
  --bg-panel:      #2C3A27;           /* raised panel on dark     */
  --text:          var(--earth);      /* primary text             */
  --text-muted:    rgba(36,51,31,.7); /* secondary text           */
  --text-on-dark:  var(--ivory);
  --line:          #C2CDB6;           /* hairlines, grid overlays */
  --transparent:   transparent;

  /* driven by JS as the page scrolls past [data-nav] sections */
  --nav--text-color:        #24331F;
  --nav--border:            rgba(36,51,31,.25);
  --nav--mobile-background: #F2F2E9;
  /* bar height = the logo lockup plus the bar's own padding. The hero's top
     padding and the hero copy's centring both read from this, so changing the
     logo size here keeps the whole fold in step. */
  --nav-h: 7.5rem;                    /* 6rem logo + .75rem x 2 */
  /* The bar's height once it has condensed, measured including its rule. The
     hero measures against THIS, not --nav-h: the hero only ever reaches the top
     of the screen well past the condense threshold, so the standing height left
     a band of ivory between the bar and the photograph. */
  --nav-h-compact: 5.5625rem;         /* 89 = 4.5rem logo + .5rem x 2 + 1px */
  /* the condense: one duration and one ease for every part of it */
  --nav-condense: .55s;
  --nav-condense-ease: cubic-bezier(.22,.61,.24,1);
  --mask-fill: var(--ivory);

  /* ---- Spacing — 8px system ---------------------------------------------
     1rem = 16px at the 1440 design width. Use these; do not invent values. */
  --space-4:   .25rem;   --space-8:  .5rem;    --space-12: .75rem;
  --space-16:  1rem;     --space-20: 1.25rem;  --space-24: 1.5rem;
  --space-32:  2rem;     --space-40: 2.5rem;   --space-48: 3rem;
  --space-64:  4rem;     --space-80: 5rem;     --space-96: 6rem;
  --space-128: 8rem;     /* homepage section rhythm — see DESIGN-SYSTEM.md */

  /* Sections butt against each other with no margin, so a join is the section
     above's bottom padding plus the one below's top padding. Half of 120 on
     each, and every join on the page measures 120 exactly. */
  --section-y: 3.75rem;
  /* how far the dining panel stands clear of the photograph, top and bottom */
  --offers-inset: 3.75rem;
  /* The torn edge above is not a straight line — it dips to within 57px of the
     panel at its lowest point while running 155px clear elsewhere. Measured at
     the pinch, because that is the gap the eye reads. 43px drops it to 100. */
  --offers-lead: 2.6875rem;

  /* ---- Vertical rhythm --------------------------------------------------- */
  --rhythm-eyebrow-heading: var(--space-12);  /* 12 */
  --rhythm-heading-body:    var(--space-24);  /* 24 */
  --rhythm-body-body:       var(--space-16);  /* 16 */
  --rhythm-body-cta:        var(--space-32);  /* 32 */
  --rhythm-heading-content: var(--space-40);  /* 40 — editorial sections */

  /* ---- Layout ------------------------------------------------------------ */
  --container:        80rem;    /* 1280 — capped content            */
  --gutter:           2.5rem;   /* 40  desktop                      */
  --gutter-tablet:    2rem;     /* 32                               */
  --gutter-mobile:    1.5rem;   /* 24                               */
  --measure:          45rem;    /* 720 — paragraph maximum          */
  --measure-tight:    37.5rem;  /* 600                              */
  --measure-heading:  43.75rem; /* 700 — section heading maximum    */

  /* ---- Radius ------------------------------------------------------------
     The homepage is sharp-cornered. Only controls are rounded. */
  --radius:       0;
  --radius-pill:  100rem;

  /* ---- Typefaces ---------------------------------------------------------
     Two families, named once. Cormorant Garamond for anything that is a
     heading: it is a high-contrast serif in the same key as the wordmark's
     hairlines and flat serifs, and it carries 300-700 so every weight the
     hierarchy already asks for exists. DM Sans for reading: geometric enough
     to sit with it, but a tall x-height, so it holds up at 15px on a phone.
     Sizes, weights, line-heights and tracking are untouched — only the
     families behind them changed. */
  --font-display: 'Cormorant Garamond','Times New Roman',serif;
  --font-body:    'DM Sans','Helvetica Neue',Arial,sans-serif;
  --radius-full:  50%;

  /* The rules between the footer cells. Barely there on purpose: they only
     have to separate the columns, not draw attention to themselves. */
  /* The rules that structure the foot of the panel. .07 was set against a mid
   brown and is invisible on the green — this reads as a drawn line without
   ever competing with the type, which is what the reference's do. */
  --footer-rule: rgba(242,242,233,.17);
  /* Height of the land ridge that the footer begins on. The artwork is
     1920 x 15.42, of which the top 61% is the relief and the bottom 39% is
     solid foot buried in the panel — so roughly three fifths of this figure
     is what you actually see rising above it. */
  --footer-ridge-h: clamp(1rem, 1.4vw, 1.75rem);
  /* The tiger walking that ridge. Its drawing is 2728x1276, so this width
     carries a little under half as much height. */
  --footer-tiger-w: clamp(5.5rem, 10vw, 13rem);

  /* Gallery strip, measured off the reference: a frame is 17.5% of the
     viewport and the gap just under a tenth of a frame. Clamped at both ends
     so the strip neither shrinks to stamps on a phone nor turns into three
     billboards on a wide monitor. */
  --gallery-w:   clamp(11rem, 17.5vw, 21rem);
  --gallery-gap: clamp(.75rem, 1.7vw, 2rem);
  /* The footer panel's ground. Three stops of ONE hue, never two — the
     reference's maroon panel swings only about 12% in value from head to foot
     and never changes hue, which is what lets the mandala read as a watermark
     in the ground rather than as a shape lit from somewhere. The ramp that was
     here before broke that rule: it ran brown to olive-gold, so the middle of
     the panel lit up and the arc behind the type turned into an object.
     --footer-glow is the same hue again, only lifted, sat low and centred like
     the reference's. */
  --footer-panel: #26331F;   /* the body of the panel                     */
  --footer-top:   #3A4A31;   /* head - the lighter end, just under the turn */
  --footer-foot:  #141C10;   /* foot - the panel deepens into the page end */
  --footer-glow:  #46583A;   /* the low centred lift behind the mandala   */
  /* the turned corners on a soft block lying on the page, as on the offers */
  --radius-panel-soft: 2.5rem;

  /* ---- Controls ---------------------------------------------------------- */
  --control-h:  2.8125rem;  /* 45 — primary and secondary share this */
  --control-px: 1.75rem;    /* 28 */
  --control-fs: .875rem;    /* 14 */
  --control-fw: 500;

  /* ---- Icons ------------------------------------------------------------- */
  --icon:        1.5rem;  /* 24 — standard */
  --icon-inline: 1rem;    /* 16 — sits beside 14px text */

  /* ---- Motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --dur-fast:  .2s;
  --dur:       .35s;
  --dur-slow:  .55s;
  --dur-image: 1.2s;
}

/* --------------------------------------------------------------------------
   2. Reset + fluid root
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* Fixed 16px root at every width, so 1rem == 1px-for-px against the spec:
   64px H1 is 64px, the 1280 container is 1280. (The reference site scales its
   root with the viewport; the design system calls for fixed sizes instead.) */
html,body{font-size:16px}

body{
  margin:0;
  background-color:var(--ivory);
  color:var(--earth);
  font-family:var(--font-body);
  font-weight:300;
  font-size:1rem;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
svg{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
button,input,textarea,select{font:inherit;color:inherit}
::selection{color:var(--ivory);background:var(--earth)}
img::selection,svg::selection{background:transparent}
:focus-visible{outline:.125rem solid var(--ochre);outline-offset:.125rem}

.page-wrapper{position:relative}
.main-wrapper{position:relative}
/* Full-bleed sections with fixed gutters — see DESIGN-SYSTEM.md §Layout.
   .container-large is the 1280 capped container for inner-page content. */
/* Viewport → outer padding → 1280 container → content.
   .is-bleed opts a section out, for the image-led sections that must run
   edge to edge (the hero and the sticky imagery behind the stats). */
.container-max{width:100%;max-width:var(--container);margin-inline:auto}
.container-max.is-bleed{max-width:none}
.container-large{width:100%;max-width:var(--container);margin-inline:auto}
/* caps content that sits outside a .container-max but still needs the grid */
.container-inset{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter)}

.padding-global{padding-left:var(--gutter);padding-right:var(--gutter)}
.padding-0{padding:0}
/* Section rhythm — standard 80, image-led 96, compact 64 */
.padding-section-large{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.padding-section-medium{padding-top:var(--space-64);padding-bottom:var(--space-64)}
.padding-global.padding-section-large.is-xxl{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.padding-global.padding-section-large.is-relative-11.is-padding-5{padding-left:var(--gutter);padding-right:var(--gutter)}
.padding-global.padding-section-large.is-bottom-0{padding-bottom:0}
.padding-global.is-relative-11{z-index:11;position:relative}
.container-max.is-relative-2{z-index:2;position:relative}
.is-relative-2{z-index:2;position:relative}

/* --------------------------------------------------------------------------
   3. Typography scale
   -------------------------------------------------------------------------- */
.heading-style-h1,.heading-style-h2,.heading-style-h3,
.heading-style-h4,.heading-style-h5,.heading-style-h6{
  font-family:var(--font-display);
  /* Title case, not caps: the display face carries the hierarchy on its own,
     and all-caps was flattening the ascenders and descenders it is drawn for. */
  text-transform:capitalize;
  letter-spacing:.02em;
  font-weight:400;
}
.heading-style-h1{font-size:4rem;   line-height:1.02}  /* 64 */
.heading-style-h2{font-size:3rem;   line-height:1.06}  /* 48 */
.heading-style-h3{font-size:2rem;   line-height:1.15}  /* 32 */
.heading-style-h4{font-size:1.5rem; line-height:1.2}   /* 24 */
.heading-style-h5{font-size:1.25rem;line-height:1.25;letter-spacing:.05em;font-weight:500} /* 20 */
.heading-style-h6{font-size:1.125rem;line-height:1.3;font-weight:500}                      /* 18 */

.heading-style-h1.is-max-60rem{max-width:60rem}
/* The second fold sets its copy at 50% of the width, so the heading has to
   stop before it: 40rem keeps the line inside the left half at every width
   rather than running under the paragraph beside it. */
.heading-style-h1.is-max-40rem{max-width:40rem}
.heading-style-h1.is-stroke-white{
  color:var(--transparent);
  -webkit-text-stroke-width:1px;
  -webkit-text-stroke-color:var(--line);
}

/* Body scale. Every running paragraph is capped at 720px for readability;
   fixed-width containers (cards, columns) override it locally. */
.text-size-medium{font-size:1.125rem;font-weight:300;line-height:1.5;letter-spacing:-.01em;max-width:var(--measure)}  /* Body Large 18 */
.text-size-small{font-size:1rem;line-height:1.5;letter-spacing:-.01em}                                                /* Body 16       */
.text-size-tiny{font-size:.875rem;line-height:1.45;letter-spacing:.01em;max-width:var(--measure)}                     /* Small 14      */
/* display pull-quote, sized off H4 */
.text-size-large{font-family:var(--font-display);font-size:1.5rem;line-height:1.45;text-transform:none;max-width:var(--measure)}
.text-size-caption-large{letter-spacing:.1em;text-transform:uppercase;font-size:.875rem}
.text-size-caption-medium{letter-spacing:.1em;text-transform:uppercase;font-size:.8125rem;color:var(--ochre)}
.text-size-caption-small{letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}
.text-size-caption-small-up{letter-spacing:.14em;text-transform:uppercase;font-size:.8125rem}
/* stat figures sit at H1 so nothing outruns the heading scale */
.text-size-numbers{
  font-family:var(--font-display);
  font-size:4rem;line-height:1;font-weight:400;color:var(--ochre);
}

.text-align-center{text-align:center}
.text-align-left{text-align:left}
.text-align-right{text-align:right}
.is-no-wrap{white-space:nowrap}
.is-link{transition:opacity var(--dur-fast) var(--ease)}
.is-link:hover{opacity:.6}

/* A link that finishes a sentence rather than sitting under it. Kept on one
   line so the arrow never wraps away from its label; the rule is drawn with
   a shadow, not an underline, so descenders stay clear of it. */
.link-inline{
  display:inline-flex;align-items:center;gap:.35em;
  color:var(--ochre);white-space:nowrap;
  box-shadow:inset 0 -1px 0 0 currentColor;
  transition:opacity var(--dur-fast) var(--ease);
}
.link-inline:hover{opacity:.65}
.link-inline svg{width:var(--icon-inline);height:var(--icon-inline);flex:none;transition:transform var(--dur) var(--ease)}
.link-inline:hover svg{transform:translateX(.2rem)}

/* --------------------------------------------------------------------------
   4. Buttons
   One shape everywhere: a solid pill, ivory type, optional arrow. There is no
   outline variant any more — every call to action on the page carries the same
   weight, and only the fill separates the primary from the rest.
   -------------------------------------------------------------------------- */
/* One button, two states of fill. Every call to action on the page is the
   outline; Book Now is the only solid one, which is what makes it read as
   the primary action rather than one loud thing among several. */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-12);
  min-height:var(--control-h);
  padding:0 var(--control-px);
  background-color:transparent;
  color:var(--text);
  text-align:center;letter-spacing:.08em;text-transform:uppercase;
  font-size:var(--control-fs);font-weight:var(--control-fw);line-height:1;
  border:1px solid currentColor;border-radius:var(--radius-pill);
  cursor:pointer;
  transition:background-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
/* hover fills, so the outline is the rest state and the fill is the answer */
.button:hover{
  background-color:var(--ochre);color:var(--ivory);border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 .5rem 1.25rem rgba(36,51,31,.22);
}
.button:active{transform:translateY(0);box-shadow:none}

/* Over a photograph the outline has to be ivory to be seen at all. */
.button.is-on-dark,
.section_hero .button,
.travel_grid-item .button{color:var(--ivory)}

/* Book Now — the one solid button on the page. */
.button.is-nav,
.button.is-dark,
.button.is-primary{background-color:var(--ochre);color:var(--ivory);border-color:transparent}
.button.is-nav:hover,
.button.is-dark:hover,
.button.is-primary:hover{background-color:var(--ochre-dark);color:var(--ivory)}
/* nav wins whatever the order in the markup */
.button.is-secondary.is-nav{background-color:var(--ochre);color:var(--ivory);border-color:transparent}
.button.is-secondary.is-nav:hover{background-color:var(--ochre-dark);color:var(--ivory)}

/* the frosted variant keeps its blur, but is an outline like the rest */
.button.is-secondary.is-blur{
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  background-color:rgba(36,51,31,.18);
}

/* the arrow travels on hover */
.button-icon{width:var(--icon-inline);display:flex;align-items:center;
  transition:transform var(--dur) var(--ease)}
.button-icon svg{width:100%;height:auto}
.button:hover .button-icon{transform:translateX(.3rem)}

/* two CTAs side by side */
.button-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16)}
/* --------------------------------------------------------------------------
   5. Nav
   -------------------------------------------------------------------------- */
/* One bar, the same at the top of the page and at the bottom of it: solid
   ivory with a hairline under it, so the page runs behind it and nothing —
   a Discover pill, a heading, a photograph — is ever read through it. */
/* Transparent over the banner at rest, solid ivory once the page moves under
   it. The type and the logo swap with it: ivory over the photograph, earth on
   the ivory bar, both on the same transition so nothing flickers. */
.nav_component{
  z-index:999;position:fixed;inset:0 0 auto;
  width:100%;padding-top:.75rem;padding-bottom:.75rem;
  background-color:var(--bg);
  /* a hairline holds the bar to the page at rest; once the page moves the
     rule gives way to a shadow, so the bar lifts instead of being ruled off */
  border-bottom:1px solid var(--nav--border);
  box-shadow:0 0 0 rgba(36,51,31,0);
  /* background-color belongs in here too: without it the bar snaps from clear
     to solid ivory in one frame while the type and mark fade across it, so the
     ground arrives before the things standing on it. */
  transition:background-color var(--dur) var(--ease),
             backdrop-filter var(--dur) var(--ease),
             -webkit-backdrop-filter var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             padding-top var(--nav-condense) var(--nav-condense-ease),
             padding-bottom var(--nav-condense) var(--nav-condense-ease);
}
/* --- Glass, once the page is under way -----------------------------------
   A deep-green wash with the page blurred through it, the same idea as the
   booking bar over the banner. Worth knowing where it does and does not read
   as glass: the effect is only visible where there is something behind the bar
   to see. Over the marquee or a run of photographs the shapes come through and
   it reads as glass; over a stretch of flat ivory page there is nothing to
   reveal and it necessarily reads as a flat colour. That is the difference
   between the two frames, not a difference in the glass.

   The blur is short — 12px, not 22. At 22 a texture like the forest canopy
   averages out to a single colour before the wash even goes over it, which
   throws away the one thing that makes it look like glass. */
/* The glass is painted by a pseudo-element, NOT by the bar itself, and this is
   load-bearing: backdrop-filter on an element makes it a containing block for
   its position:fixed descendants. Put it on .nav_component and the side panel
   and the mobile drawer — both fixed, both inside the bar — stop measuring
   against the viewport and collapse to the height of the bar. On a pseudo it
   has no such effect. */
.nav_component::before{
  /* bottom:-1px so the glass runs under the bar's own border rather than
     stopping at the padding box — left at 0 the hairline composites against
     the page instead of against the bar and reads as a seam */
  content:"";position:absolute;inset:0 0 -1px;z-index:-1;
  background-color:transparent;
  transition:background-color var(--dur) var(--ease),
             -webkit-backdrop-filter var(--dur) var(--ease),
             backdrop-filter var(--dur) var(--ease);
}
.nav_component.is-scrolled::before{
  background-color:rgba(36,51,31,.70);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  backdrop-filter:blur(12px) saturate(1.3);
}
.nav_component.is-scrolled{
  background-color:transparent;
  border-bottom-color:rgba(242,242,233,.16);
  /* No shadow. The old ivory bar needed one to lift off the page, but the blur
     painted a grey band about 35px deep across the whole width, and on ivory
     that reads as a strip of its own. The glass separates it by itself. */
  box-shadow:0 0 0 rgba(20,28,16,0);
  --nav--text-color:var(--ivory);
  --nav--border:rgba(242,242,233,.22);
}
.nav_component.is-scrolled .nav_brand{color:var(--ivory)}
.nav_component.is-scrolled .brand-logo{filter:brightness(0) invert(1)}
/* Book Now is a filled green pill and the glass behind it is the same hue, so
   left alone it sank into the bar. On the glass it inverts to ivory. */
.nav_component.is-scrolled .button.is-secondary.is-nav{
  background-color:var(--ivory);color:var(--forest);border-color:transparent;
}
.nav_component.is-scrolled .button.is-secondary.is-nav:hover{
  background-color:#FFF;color:var(--forest);
}
/* An open drawer is paper and owns the screen, so the bar gives up its glass
   rather than blurring the drawer through itself. */
.nav_component.is-scrolled.is-menu-open::before{
  background-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.nav_component.is-scrolled.is-menu-open{
  background-color:transparent;
  border-bottom-color:transparent;box-shadow:none;
  --nav--text-color:#24331F;
  --nav--border:rgba(36,51,31,.25);
}
.nav_component.is-scrolled.is-menu-open .brand-logo{filter:none}
.nav_component.is-scrolled.is-menu-open .nav_brand{color:var(--nav--text-color)}

/* --- The condense ---------------------------------------------------------
   Under way, the bar settles to about 60% of its standing height. Everything
   that moves is on the one duration and the one ease, so the mark, the padding
   and the type arrive together rather than as three separate slides. The ease
   is a long decelerating curve: it leaves quickly and lands slowly, which is
   what keeps a height change from reading as a snap. */
.nav_component.is-compact{padding-top:.5rem;padding-bottom:.5rem}
/* 4.5rem, not smaller. The mark is portrait and the wordmark sits under the
   arch, so height lost here comes straight off the type: below about this the
   "ranthambore aangan" is under five pixels a letter and stops being read. */
.nav_component.is-compact .nav_logo{height:4.5rem}
/* the links and the button draw in a touch as the bar closes, so the whole row
   condenses rather than the mark shrinking inside a bar that stands still */
.nav_component.is-compact .nav_menu-group{gap:var(--space-24)}
.nav_component.is-compact .button.is-nav{min-height:2.375rem}
/* Open, the drawer wants the mark at full size at its head — and the drawer's
   own top padding is set from --nav-h, which is the standing height. */
.nav_component.is-compact.is-menu-open{padding-top:.75rem;padding-bottom:.75rem}
.nav_component.is-compact.is-menu-open .nav_logo{height:6rem}
/* 7.5rem is the full-width gutter; below about 1600 it has to give, because the
   bar now carries links on both sides of the lockup and a flat 120 a side left
   nothing for them at laptop widths. */
.nav_component .padding-global{padding-left:clamp(2rem,7.5vw,7.5rem);padding-right:clamp(2rem,7.5vw,7.5rem)}
/* 1fr auto 1fr, not auto 1fr auto — equal outer tracks put the lockup on the
   centre of the page rather than on the centre of the gap between the two
   halves of the menu, which the heavier right-hand half would pull off true. */
.nav_container{
  display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;
  align-items:center;column-gap:clamp(1.25rem,2.75vw,3rem);width:100%;
}
/* every child is pinned to row 1 — without this, an out-of-flow menu lets
   auto-placement push the brand onto a second row */
.nav_menu-group,.nav_brand,.nav_button,.nav_contact-wrp{grid-row:1}
/* The bar is split around the lockup, so the two halves have to be grid items
   of .nav_container itself. display:contents on the <nav> and on its content
   row dissolves both boxes — left in place they would have packed the whole
   menu into a single cell and pushed the logo off to one side. */
.nav_menu,.nav_menu-content{display:contents}
.nav_menu-group{
  display:flex;align-items:center;gap:var(--space-32);
  transition:gap var(--nav-condense) var(--nav-condense-ease);
}
.nav_menu-group.is-a{grid-column:1;justify-self:start}
.nav_menu_link{
  color:var(--nav--text-color);
  transition:color .25s var(--ease),opacity .2s;
  position:relative;
  /* one line each in the bar — "About Us" was breaking after "About" and
     standing the left-hand half of the menu two rows tall */
  white-space:nowrap;
}
.nav_menu_link::after{
  content:"";position:absolute;left:0;bottom:-.5rem;height:1px;width:0;
  background-color:currentColor;transition:width .3s var(--ease);
}
.nav_menu_link:hover::after{width:100%}
.nav_menu-btn{display:none}

/* Centre column. Both flanking tracks are 1fr, so the lockup sits on the
   midline of the bar whatever each half happens to weigh. */
.nav_brand{grid-column:2;justify-self:center;color:var(--nav--text-color);transition:color .25s var(--ease)}
/* The stacked mark (665 x 801), used whole and unaltered — the same artwork the
   side panel carries. Portrait, so it needs more height than the old horizontal
   lockup did: below about 6rem the wordmark under the arch stops being legible,
   and the bar grows to suit rather than the mark shrinking to fit. */
.nav_logo{
  height:6rem;display:flex;align-items:center;justify-content:center;
  transition:height var(--nav-condense) var(--nav-condense-ease);
}
.nav_logo .brand-logo{height:100%;width:auto;max-width:none}

/* The mark is peach-and-ochre artwork, not type, so it goes white with a
   filter rather than a colour: brightness(0) crushes every pixel to solid
   black, invert(1) flips that to solid white. The arch knocked out of the
   block stays transparent throughout, so the shape survives intact. */
.brand-logo.is-on-dark,
.nav_component.is-over-dark .brand-logo{filter:brightness(0) invert(1)}
.nav_component .brand-logo{transition:filter .25s var(--ease)}

/* Alone on the right: the bar carries the burger and three links on the left,
   the lockup in the middle, and nothing but this. */
.nav_contact-wrp{grid-column:3;justify-self:end;display:flex;align-items:center}
.nav_button{display:none;padding:1rem;cursor:pointer;grid-column:3;justify-self:end}
.nav_button-content{display:flex;flex-direction:column;gap:var(--space-8);width:var(--icon)}
.nav_button-line{height:1px;width:100%;background-color:var(--nav--text-color);transition:transform .35s var(--ease),opacity .25s}
/* the bar's own button rides the condense with everything else */
.button.is-nav{transition:min-height var(--nav-condense) var(--nav-condense-ease),
                          background-color var(--dur) var(--ease),
                          color var(--dur) var(--ease),
                          border-color var(--dur) var(--ease)}

/* Laptop desktops. Three links, a lockup and a button fit a 1024 bar at full
   size; only the gaps need to give, and they close before the type or the
   lockup do. */
@media screen and (min-width:992px) and (max-width:1200px){
  .nav_menu-group{gap:var(--space-24)}
}

/* --------------------------------------------------------------------------
   6. Hero  — the signature scroll: image un-zooms while a cusped-arch
   aperture opens out past the edge of the screen.
   -------------------------------------------------------------------------- */
.section_hero{z-index:2;position:relative;overflow:clip}
.hero_content-wrapper{height:200vh;position:relative}

/* The top padding is the height of the bar, so the ivory strip the logo sits
   on is exactly as deep as the bar is. Any shallower and the lockup — which
   is taller than a line of nav type — hangs off the bar onto the photograph. */
.hero_sticky{
  z-index:1;position:sticky;top:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;height:100vh;padding-top:var(--nav-h-compact);
}
.hero_content{position:relative;width:100%;height:100%;overflow:clip;perspective-origin:50%}

.hero_bg{
  z-index:0;position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;perspective:50rem;transform:scale(1.2);
}
.hero_bg-img{z-index:0;position:relative;width:100%;height:100%;object-fit:cover;will-change:transform}
.hero_bg-img.is-top{z-index:1;position:absolute;inset:0;opacity:.3;mix-blend-mode:soft-light}
.hero_bg-tint{
  z-index:2;position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(36,51,31,.42) 100%),
    linear-gradient(to bottom, rgba(36,51,31,.42), rgba(36,51,31,.05) 35%, rgba(36,51,31,.55));
}


.hero_content_text{z-index:3;position:relative;width:100%;height:100%}

/* shared <defs> carrier — present in the DOM, absent from the layout */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

.hero_mask-wrapper{
  z-index:9;position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;height:100%;transform-origin:50%;pointer-events:none;
}
.hero_mask-inner{
  z-index:9;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100vw;height:100%;transform-origin:50% 50%;
  /* This scales 1 -> 7.5 on scroll, and what it scales is an SVG mask over a
     full-bleed photograph. Without a layer of its own the mask is rasterised
     again at every step of the scrub, and the raster area grows with the
     square of the scale.

     This was measured and REJECTED once before, at 42ms p95 against 39ms
     without — correctly, that was inside the noise. What changed since is the
     hero photograph going from 1600 to 2560 wide, which made rasterising the
     masked content far dearer and moved the balance. Re-measured over six
     interleaved rounds against baseline, p95 69.8ms -> 53.6ms with the two
     spreads barely overlapping (65-76 against 49-68).

     Two things were tried at the same time and are deliberately NOT here:
     taking the soft-light blend off .hero_bg-img.is-top (p95 108ms) and
     dropping that layer altogether (95ms). Both made it reproducibly worse —
     the blend groups the two images into one composited texture, and without
     it they become two layers that each have to be re-rastered. */
  will-change:transform;
}
.hero_mask-new{z-index:9;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:auto;flex:none}
/* Each cut carries its own ivory ground as a rect far larger than the frame
   (svg overflow stays visible), so the fill can never run out at the edges —
   which means the artwork is free to be sized by whichever of width or height
   is the binding constraint. The vh terms are the viewBox ratio held back a
   little for the sticky header, so the cloud never gets clipped at the top on
   a short or very wide window. */
.hero_mask-new svg{height:auto;overflow:visible}
.hero_mask-new.is-portrait  svg{width:min(100%,66vh)}    /* viewBox 3:4   */

/* Landscape: the element takes the whole box — full width of the window and
   the full height of the fold — and the viewBox is fitted inside it by the
   default xMidYMid meet. That is what keeps the two promises at once: the
   element always runs from the left edge to the right edge at any size,
   because it is sized in percentages and not capped; and the cut inside it is
   fitted rather than filled, so the cloud can never be clipped on any edge.

   The old `width:min(100%,150vh)` is what put ivory down both margins. 150vh
   is a hard number stading in for "as wide as the height allows", and it was
   short: at 1440x900 it resolved to 1350 against a 1440 window, so the svg was
   90px narrower than the screen before the aspect ratio was even unusual. On
   2560x900 it was 1350 against 2560. Percentages have no such gap to leave. */
.hero_mask-new.is-landscape{height:100%}
.hero_mask-new.is-landscape svg{width:100%;height:100%}

/* The drawing has to reach both screen edges, and how far past the canvas it
   must reach depends on how much narrower the svg is than the window. That
   only bites once 100vw passes 150vh — the cap on the svg's width — after
   which the shortfall grows with the aspect ratio.

   So it is stepped rather than set once: every size keeps the drawing's own
   2.186 aspect, anchored to y=848 and centred on x=720, and only the wide,
   short windows get the larger draw. Set as geometry properties in CSS, which
   override the element's own attributes.

   Sizing it for the widest case at every size was the other option, and it
   looked it — a 1.65x blow-up of the foliage on an ordinary laptop. */
/* The drawing's own colour, untouched — opacity is the only thing done to
   it. The filter and blend mode that used to be here each cost a full
   re-composite of a 2MB engraving on every frame of the hero's scrub, and
   between them they are what made the first fold stutter. */

/* One box, not four stepped ones. The steps sized the drawing to reach the
   screen's edges on wide windows, and to do that at a fixed 2.186 aspect they
   had to make it taller than the canvas — y ran to -382, which put the canopy
   and the palm above the top of the fold where .hero_content clips. Measured,
   the top was losing between 18 and 389px depending on the window.

   Height is now the canvas height exactly, so the drawing can never be cut
   vertically at any size, and the width follows its own aspect: 810 x 2.186 =
   1771, centred on x=720, which still bleeds 165 units past both sides.

   The trade is at the far end: past about 2.2:1 the drawing fits the height
   but no longer reaches the edges, because at a fixed aspect it cannot do
   both. Not being cropped wins — a cut canopy reads as a mistake, ivory at
   the margins reads as margin. */
/* .36, down from .45 — a fifth less. One value covers every size: the phone's
   separate band is display:none now, so this in-mask copy is the drawing on
   both desktop and mobile. */
.hero_toile{opacity:.36}
/* The drawing thins out as it comes down to the arch rather than stopping on a
   line. The element runs from canvas -1338 to 276, so the canvas's own top edge
   sits 83% down it: opaque to 87% and gone by 100% dissolves it across roughly
   the last 100px on screen, which is the strip between the band and the arch. */
.hero_toile.is-crown{
  /* .80, not the .45 the band carries. The band frames the drawing's rows
     56-83%, its dense part; this copy continues into rows 83-100%, which is
     the sparse ground strip the band's own offset was written to exclude. Same
     opacity therefore read as a fainter drawing below the join — measured at
     60 points of contrast against the band's 108, with the mask still at full
     alpha, so it was the content and not the fade. Contrast scales linearly
     with opacity - but the two copies meet mid-drawing, where the artwork is
     continuous, so any difference in opacity draws a line straight across it.
     They carry the same .45 and the dissolve below handles the rest. */
  /* .88, not the band's .45. Same drawing, same scale, aligned to a tenth of
     a pixel - but this copy is rasterised inside the SVG's coordinate space,
     which thins its hairlines, so at equal opacity its strokes read 38 levels
     lighter and drew a line straight across the join. Measured at both ends
     (.45 gives +38, 1.0 gives -10) and interpolated to where the two match. */
  /* .70 was where this landed once it worked alone: two layers at .45
     composited to 1-(1-.45)^2, so it held the weight the pair used to give.
     .56 now — the same fifth off that the base copy took (.45 to .36), so the
     two stay in proportion and no line appears where they meet. */
  opacity:.56;
          mask-image:linear-gradient(to bottom,#000 87%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 87%,transparent 100%);
}
/* geometry only for the landscape canvas — the portrait one carries its own in
   the markup, and CSS geometry beats an attribute, so it must not match here.

   The note above is now half true. Height is still the canvas height exactly,
   so nothing can be cut vertically — that part stands. But the width no longer
   has to follow the drawing's 2.186 aspect, because the image is drawn with
   preserveAspectRatio="none": the box is stretched to fill rather than fitted
   inside, so widening it moves the ink instead of adding empty margin.

   That breaks the deadlock the old comment described. Reaching the edges used
   to mean scaling the whole drawing up, which made it taller than the canvas
   and cut the canopy off at the top. Stretching costs a little width in the
   foliage instead, and at the ratios where it applies at all that is a far
   quieter price than either a cut canopy or a bare ivory margin.

   With the svg meet-fitted, the window is 810 * (W/H) canvas units across, so
   the width each step needs is that number with a little to spare. Ordinary
   screens — anything up to 2:1, which is every laptop and most monitors — stay
   on the base box and are not stretched at all. */
.hero_toile.is-wide{
  --toile-w:1771px;                       /* the drawing's own 2.186 aspect */
  x:calc((1440px - var(--toile-w)) / 2);  /* centred on the canvas, x=720 */
  y:0;
  width:var(--toile-w);
  height:810px;                           /* the canvas exactly: never cut */
}
/* The number each step needs is 810 * W / (H - nav), not 810 * W / H: the svg
   is fitted into the fold, which is the window less the bar, so the scale is
   set by the shorter height and the box has to be correspondingly wider.
   Measured against that, with about 8% to spare, and stretch is box width over
   1771 — so the base is untouched, 1080p is stretched 7%, and only genuine
   ultrawides pay real distortion. */
/* Measured need is about 895 * aspect canvas units; these carry ~7% over that.
   One step at 2.0 had to serve everything up to 2.4, where the need runs from
   1800 to 2150 - so anything past about 2.02 fell short and left a bare ivory
   margin down both edges. Stepping every 0.1 closes that without over-
   stretching the common 2:1 screen. */
@media (min-aspect-ratio:2/1)    { .hero_toile.is-wide{--toile-w:1920px} }  /* 2.00 */
@media (min-aspect-ratio:21/10)  { .hero_toile.is-wide{--toile-w:2020px} }  /* 2.10 */
@media (min-aspect-ratio:11/5)   { .hero_toile.is-wide{--toile-w:2120px} }  /* 2.20 */
@media (min-aspect-ratio:23/10)  { .hero_toile.is-wide{--toile-w:2215px} }  /* 2.30 */
@media (min-aspect-ratio:12/5)   { .hero_toile.is-wide{--toile-w:2600px} }  /* 2.40 */
@media (min-aspect-ratio:26/9)   { .hero_toile.is-wide{--toile-w:3300px} }  /* 2.89 */
@media (min-aspect-ratio:32/9)   { .hero_toile.is-wide{--toile-w:4400px} }  /* 3.56 */

/* The line drawing that sits on the ivory: the same hairline weight, warm
   grey and curve quality as the reference. non-scaling-stroke keeps it a
   true hairline while the frame scales open. */
.hero_map{fill:none;stroke:rgba(176,190,160,.62);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
/* the route and its marker carry their weight inline, on the definition
   itself, because <use> clones inline styles but does not reliably inherit
   class rules into its shadow tree */

/* The aperture has to keep its proportions against wildly different screen
   shapes, so there are two cuts and orientation — not width — picks one. */
.hero_mask-new.is-portrait{display:none}
@media (max-aspect-ratio:1/1){
  .hero_mask-new.is-landscape{display:none}
  .hero_mask-new.is-portrait{display:flex}
  /* the copy's vertical centring is set below, after the base rule */
}

/* --- Booking bar ----------------------------------------------------------
   Held to the foot of the fold with a 20px gap, inside the sticky, so it
   stays put for the whole hero rather than scrolling off with the copy.
   The glass is the reference's own recipe, read off it: a 40% dark ground,
   blur(20px) with a touch of saturation so the photograph behind keeps its
   colour, a 1px 18%-white edge, 28px corners, and a wide soft shadow. */
/* The banner is the fold itself: the photograph, edge to edge, from under the
   bar to the foot of the screen, with the booking form on it — the reference's
   arrangement. It sits above the cut's ivory (z-index 9) so the picture reads
   full-bleed at rest, and below the headline (11) so the copy still sits over
   it. Giving the form a parent rather than pinning it to .hero_content means
   its 20px gap is measured from the banner, not from whatever else the hero
   happens to be doing. */
.hero_book{
  z-index:12;position:absolute;left:50%;bottom:20px;
  transform:translateX(-50%);
  width:min(100% - 2 * var(--gutter), 62rem);
  display:flex;flex-direction:column;
  background-color:rgba(20,28,16,.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
  backdrop-filter:blur(20px) saturate(1.25);
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
  box-shadow:0 26px 60px -28px rgba(0,0,0,.72);
  color:var(--ivory);
  overflow:hidden;
}
.hero_book_fields{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;
  align-items:center;gap:0;padding:var(--space-16) var(--space-20);
}
.hero_book_field{
  display:flex;flex-direction:column;gap:.35rem;
  padding:.25rem var(--space-20);min-width:0;
  border-left:1px solid rgba(255,255,255,.16);
}
.hero_book_field:first-child{border-left:0}
/* The two weights are the other way round from where they started: the label
   is the full ivory and the value it carries is held back. Small caps at this
   size need the contrast to stay legible, and the values — dates, a room
   count — are large enough to read at less. */
/* The header carries the field, not the value under it: it is the larger of
   the two now (was 11 against a 15 value, which read the other way round).
   Same pixel size as the value, but uppercase, tracked and at full ivory
   against the value's 72%, so it sits clearly on top of it. */
.hero_book_label{
  font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivory);
}
/* the controls are the glass, not boxes sitting on it */
.hero_book_field input,
.hero_book_field select{
  width:100%;min-width:0;
  background:none;border:0;padding:0;
  color:rgba(242,242,233,.72);font-family:inherit;font-size:.8125rem;
  cursor:pointer;
}
/* dropped from .6 so it still reads as an empty field rather than as a value:
   at .6 against values now sitting at .72 the two were near enough identical */
.hero_book_field input::placeholder{color:rgba(242,242,233,.45)}
.hero_book_field select option{color:var(--text);background-color:var(--ivory)}
.hero_book_field input:focus-visible,
.hero_book_field select:focus-visible{outline:2px solid var(--peach);outline-offset:4px}
/* the date pickers' own icons are dark on dark, so they get inverted */
.hero_book_field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1);opacity:.7;cursor:pointer;
}
.hero_book_cta{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-12);
  margin-left:var(--space-20);padding:0 var(--control-px);
  min-height:var(--control-h);flex:none;
  background-color:var(--ochre);color:var(--ivory);
  border:0;border-radius:var(--radius-pill);cursor:pointer;
  font-family:inherit;font-size:var(--control-fs);font-weight:var(--control-fw);
  letter-spacing:.08em;text-transform:uppercase;line-height:1;
  transition:background-color var(--dur) var(--ease);
}
.hero_book_cta:hover{background-color:var(--ochre-dark)}
.hero_book_cta svg{width:var(--icon-inline);height:auto;transition:transform var(--dur) var(--ease)}
.hero_book_cta:hover svg{transform:translateX(.2rem)}
.hero_book_foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-12) var(--space-40);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.8125rem;color:rgba(242,242,233,.8);
}
.hero_book_foot a{transition:color var(--dur) var(--ease)}
.hero_book_foot a:hover{color:var(--peach)}

.hero_scrollable{
  position:absolute;inset:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  width:100%;height:100%;pointer-events:none;
}
.hero_scrollable a,.hero_scrollable button{pointer-events:auto}
/* Centred on the page horizontally, and set into the aperture vertically —
   at 70% of its height, the calm band below the scallops where the cut is at
   its widest, rather than on the page's centre line.

   --copy-drop is twice that offset, since justify-content:center moves the
   copy by half of it. It is derived from the same terms that size the cut, so
   the copy holds its place in the shape at every window size rather than
   being nudged into position at one of them.

   That derivation has to track how the cut is sized, and the landscape cut is
   no longer capped at 150vh — the svg fills the fold and the 1440x810 canvas
   is meet-fitted inside it. So the width term is now the fitted canvas: the
   window, or 1.7778 times the fold height if that is the smaller. Leaving the
   old 150vh here would have put the copy roughly 19px high at 1440x900, which
   is the sort of drift that reads as "the headline sits slightly wrong" long
   before anyone can say why. */
.hero_scrollable-top{
  --sticky-pad:var(--nav-h-compact);                     /* .hero_sticky's */
  --cut-w:min(100vw, (100vh - var(--sticky-pad)) * 1.7778);
  /* 58% down the aperture rather than 70%: the booking bar now occupies the
     foot of the fold, and at 70% the Discover button landed on top of it. */
  --copy-drop:calc(58vh + .42 * var(--sticky-pad) - .21 * var(--cut-w));
  z-index:11;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-24);width:100%;max-width:40rem;height:100vh;
  padding-top:var(--copy-drop);
  color:var(--ivory);text-align:center;
  text-shadow:0 .1rem 2rem rgba(36,51,31,.55);
  /* so the scroll-scale pivots on the copy, not on the empty box above it */
  transform-origin:50% calc(50% + var(--copy-drop) / 2);
}
/* Must come after the base rule, not up with the other portrait switches —
   a media query adds no specificity, so source order decides. */
@media (max-aspect-ratio:1/1){
  /* the portrait cut: 840x1120 canvas, svg min(100vw,66vh) wide, peak at y=150 */
  .hero_scrollable-top{--copy-drop:calc(58vh + .42 * var(--sticky-pad) - .41 * min(100vw,66vh))}
}
.hero_scrollable-top .text-size-medium{max-width:none}
/* The name and the line under it are one lockup. The column's 24 gap is right
   between the lockup and the paragraph, but between these two it would read as
   two unrelated headings, so the tagline is pulled back up under the name. */
.hero_scrollable-bottom{
  z-index:11;position:relative;
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;
  gap:var(--rhythm-heading-content);width:90%;height:100vh;color:var(--ivory);
  text-shadow:0 .1rem 2.5rem rgba(36,51,31,.5);
}
.hero_scrollable-bottom-text{width:28rem;max-width:var(--measure);margin-left:50%;font-size:1.125rem;line-height:1.45}
.display-block-mobile{display:inline}

/* --------------------------------------------------------------------------
   7. Section transition band
   -------------------------------------------------------------------------- */
.section_home-transition{
  z-index:3;position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* A tear only works if there is something behind it to be torn away to.
   Both torn zones are ~33% of the band's height, so the band has to sit that
   far over its neighbours at each end — the hero above, the stay grid below.
   Any shallower and the last of the tear falls past the neighbour onto bare
   page background, which is the ivory that was showing through the fibre.
   The band height is content + the 74vh of padding, so the tear works out at
   roughly 24vh + 6rem; the figures below carry slack on top of that. */
/* Ivory, and torn at both ends into its neighbours: the hero's photograph
   stops on a torn edge, the rooms start on one.

   The strips are a fixed --tear-h rather than a mask stretched over the whole
   section, which is what the earlier band did. That one only ran fully opaque
   across its middle third, so the taller the section grew the deeper its torn
   zones became and the less room the copy had. Fixed strips leave the body
   free to be any height at all. */
.section_home-transition.is-static{
  display:block;overflow:visible;min-height:0;
  margin-top:calc(-1 * var(--tear-h));
  margin-bottom:calc(-1 * var(--tear-h-join));
  pointer-events:none;                     /* it overlaps its neighbours */
}
.transition_tear{
  position:relative;z-index:1;
  width:100%;height:var(--tear-h);
  background-color:var(--ivory);pointer-events:none;
}
/* The join into the rooms is a shallow one: the strip has to overlap far
   enough to carry its cut and no further, because everything it overlaps is
   the empty band above that section's heading. */
.transition_tear.is-bottom{height:var(--tear-h-join)}
.transition_body{
  position:relative;z-index:1;
  background-color:var(--ivory);color:var(--text);
  padding-top:var(--section-y);padding-bottom:var(--section-y);
  pointer-events:auto;                     /* the widget below needs hover */
}
.transition_nav-marker{position:absolute;inset:0 auto auto 0;width:1px;height:1px;opacity:0;pointer-events:none}

/* --- The four lines, each with a photograph folded into it ---------------
   The row is centred, so widening the capsule pushes the words out to either
   side rather than reflowing the line. The image inside is held at its open
   width and simply uncovered, so it never squashes on the way out. */
.usp{
  display:flex;flex-direction:column;align-items:stretch;
  gap:var(--space-12);width:100%;max-width:62rem;margin:var(--space-64) auto 0;
}
.usp_row{
  display:flex;align-items:center;justify-content:center;
  gap:1.25rem;width:100%;margin:0;
  font-family:var(--font-display);
  font-size:3.75rem;line-height:1.1;text-transform:capitalize;letter-spacing:.01em;
  color:var(--text);
  transition:opacity .4s var(--ease);
}
.usp_word{white-space:nowrap;flex:none}
.usp_accent{color:var(--ochre);font-style:normal}

/* Hovering one line settles the others back, so the eye follows the one
   that is opening rather than reading all three at once. */
.usp:hover .usp_row{opacity:.45}
.usp:hover .usp_row:hover,
.usp .usp_row:focus-within{opacity:1}

/* The slab, not a pill: a wide band squared off at the top-left and rounded
   everywhere else, the shape the reference uses.
   flex:1 lets it take whatever the words leave, so the line justifies itself
   at any width instead of needing a measured size per row; max-width is what
   holds it shut, and animates cleanly on the way open. Height is in em, so
   it tracks the type at every breakpoint on its own. */
.usp_media{
  flex:1 1 0;min-width:0;overflow:hidden;
  /* about twice the cap height, the proportion the reference uses — below
     that a wide slab crops the photograph down to an unreadable strip */
  height:1.5em;border-radius:0 100rem 100rem 100rem;
  filter:saturate(.6) brightness(.98);
  max-width:9rem;                          /* enough of a glimpse to read as a photograph */
  /* a long expo-out curve: quick to open, then settling, rather than the
     linear-feeling ease the rest of the site uses for small moves */
  transition:max-width .85s cubic-bezier(.16,1,.3,1),filter .6s var(--ease);
}
.usp_media img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* The plate is 900x1349 and the chip is a wide short strip, so cover throws
     away most of the height. The eyes sit at 44% down the source; holding the
     crop there keeps them in frame both closed and open, instead of centring
     on the muzzle and cutting the face in half. */
  object-position:50% 44%;
  transform:scale(1.18);
  transition:transform .95s cubic-bezier(.16,1,.3,1);
}
.usp_row:hover .usp_media,
.usp_row:focus-within .usp_media{max-width:100%;filter:none}
.usp_row:hover .usp_media img,
.usp_row:focus-within .usp_media img{transform:scale(1)}

/* No hover to give: open them all, so the photographs are not simply lost */
@media (hover:none){
  .usp_media{max-width:100%;filter:none}
  .usp_media img{transform:none}
}

/* --------------------------------------------------------------------------
   8. Stay grid
   -------------------------------------------------------------------------- */
.section_travel{z-index:2;position:relative;overflow:hidden;color:var(--ivory);background-color:var(--earth)}

/* The heading sits on the section's own ground rather than on more of the
   page's ivory, so the rooms read as one block: peach, with the transition
   band's ivory tearing down into it and the same peach tearing on into the
   photographs below. The top padding only has to clear the strip that
   overlaps here, and that strip is a shallow join now. */
.travel_intro{
  position:relative;z-index:1;
  background-color:var(--bg-soft);color:var(--text);
  padding-top:calc(var(--tear-h-join) + var(--space-32));
  /* Nothing here. The whole of the gap between the button and the photographs
     is owned by .travel_grid-wrapper's padding-block, so there is one number to
     change rather than two that have to be added together. */
  padding-bottom:0;
}
.travel_intro-inner{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--rhythm-heading-body);text-align:center;
}
.travel_intro .heading-style-h2{max-width:var(--measure-heading)}
.travel_intro .text-size-medium{max-width:var(--measure-tight)}
.travel_intro .button{margin-top:var(--space-16)}
/* Full bleed: the cards reach the screen edges, with only a gap between them.
   The gap is ivory rather than the section's dark, so it does not leave a dark
   sliver hanging below the cards' torn bottom edges. */
/* The suite photograph is a wide frame and the card is near square, so cover
   throws most of it away. Held to the right of the plate, where the arched
   veranda and the planting are, rather than the default centre. */
.travel_grid-item.is-suite .travel_grid-item-img,
.travel_grid-item.is-suite .travel_grid-item-glass{object-position:74% 38%}

/* 40 above the pair and nothing below it. Above, the pale green carries the
   band the heading and button sit on round onto the photographs instead of
   changing colour halfway; .travel_intro's own bottom padding is zero, so this
   is the whole of the gap between the button and the images — one number, not
   two added together. Below, the cards meet the next section directly: a
   second green strip there was closing the pair off against a section that
   already brings its own top padding. */
.travel_grid-wrapper{
  z-index:1;position:relative;background-color:var(--bg-soft);
  padding-top:2.5rem;padding-bottom:0;
}
/* A hairline gutter, not the 8px one: the wrapper behind is ivory, so the gap
   reads as a bright line down the full height of the pair. At 4px it separates
   the two photographs without cutting the torn foot in half. */
.travel_grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
/* The ratio sets the shape, but on its own it ties height to width — at 1920
   each card computes to ~1100px and runs off the bottom of the screen. The cap
   keeps the pair inside one viewport at any width; the photograph is
   object-fit:cover behind the copy, so it just crops rather than distorts.
   Shorter than it was: the ratio comes off portrait and the cap is the lesser
   of two thirds of the fold and a flat 38rem, so a tall monitor does not turn
   the pair back into a full screen of photograph. */
.travel_grid-item{
  position:relative;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;
  width:100%;aspect-ratio:1/.84;max-height:min(66vh,38rem);overflow:hidden;
  /* One full-width track. Without it the implicit grid column sizes to the
     content, so the shorter card's scrim stopped short of the left edge and
     left a hard vertical seam against the blurred layer behind it. */
  grid-template-columns:minmax(0,1fr);
}
.travel_grid-item-img{
  z-index:0;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-image) var(--ease);
}
.travel_grid-item:hover .travel_grid-item-img{transform:scale(1.05)}

/* The glass the copy sits on is a second, blurred print of the same
   photograph rather than a backdrop-filter. A filter on an ordinary element
   can be faded out with a mask safely; a backdrop-filter behind a masked one
   is at the mercy of whichever layer the card gets composited into, and that
   is what was tearing sharp patches through the blur.

   It has to sit at exactly the photograph's own size — no overscan. Blowing
   it up to keep the blur off the edges re-crops it, so its features land a
   few percent off the sharp ones underneath and every upright in the picture
   doubles into a vertical seam where the plate fades in. At scale 1 the two
   are the same crop, and the couple of pixels the blur loses at the border
   just show the photograph beneath. */
.travel_grid-item-glass{
  z-index:0;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(7px);pointer-events:none;
  /* blur() samples transparency past the element's edges, which leaves a pale
     band down each side; overscanning pushes those edges outside the card */
  transform:scale(1.08);
  transition:transform var(--dur-image) var(--ease);
  -webkit-mask-image:linear-gradient(transparent 58%,#000 80%);
  mask-image:linear-gradient(transparent 58%,#000 80%);
}
/* the same scale as the photograph, so they stay registered on hover too */
.travel_grid-item:hover .travel_grid-item-glass{transform:scale(1.134)}

.travel_grid-item-bottom{
  z-index:1;position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-20);
  /* The foot used to clear the bottom cut, which painted over the card and ate
     any copy that ran into it. The cards are plain rectangles now, so the
     padding is just padding. */
  width:100%;
  padding:var(--space-32) var(--space-32) var(--space-32) var(--space-40);
  background-image:linear-gradient(rgba(36,51,31,0),rgba(36,51,31,.92));
}
.travel_grid-item-bottom-line{z-index:1;position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-32);width:100%}
.travel_grid-item-bottom-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--rhythm-heading-body)}
/* wide enough that the copy runs to four lines rather than six — the block is
   what the photograph has to give up, so every line saved is photograph */
.travel_grid-item-bottom-text{flex:none;width:21rem}
.travel_grid-item-bottom-text .text-size-medium{max-width:none}
.travel_bottom-bg{z-index:9;position:absolute;inset:auto 0 0;width:100%}

/* Both cards' copy has to begin on the same line, and the two blocks are not
   the same height — one paragraph runs a line longer than the other. So the
   grid owns the rows and each card maps onto them with subgrid: the copy row
   is sized by whichever block is taller, and both headings start at the same
   y no matter how the text wraps. The card's own aspect-ratio then gives way
   to a height on the grid — the same min(ratio, cap) it was resolving to. */
@supports (grid-template-rows:subgrid){
  @media screen and (min-width:992px){
    .travel_grid{
      grid-template-rows:1fr auto;
      /* the same min(ratio, cap) .travel_grid-item resolves to, restated here
         because subgrid takes the card's own aspect-ratio off — change one and
         this has to change with it */
      height:min(calc((100vw - .5rem)/2*.84),66vh,38rem);
    }
    .travel_grid-item{
      display:grid;grid-row:span 2;grid-template-rows:subgrid;
      aspect-ratio:auto;max-height:none;
    }
    .travel_grid-item-bottom{grid-row:2}
  }
}

/* --------------------------------------------------------------------------
   8b. Torn-paper edges
   Sections meet on a hand-torn edge rather than a hard line. The tear is a
   CSS mask, so whatever sits underneath — a photograph or a flat colour —
   stays a plain rectangle. To change a picture, change its src; the edge
   is not baked into the file.  Mask definitions live in css/tears.css.
   -------------------------------------------------------------------------- */
.tear--up,.tear--up-2,.tear--down,.tear--down-2,.tear--band{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:center;mask-position:center;
}
.tear--up    {-webkit-mask-image:var(--tear-up);mask-image:var(--tear-up)}         /* solid below a torn top edge */
.tear--up-2  {-webkit-mask-image:var(--tear-up-2);mask-image:var(--tear-up-2)}
.tear--down  {-webkit-mask-image:var(--tear-down);mask-image:var(--tear-down)}     /* solid above a torn bottom edge */
.tear--down-2{-webkit-mask-image:var(--tear-down-2);mask-image:var(--tear-down-2)}
.tear--band  {-webkit-mask-image:var(--tear-band);mask-image:var(--tear-band)}     /* torn on both edges */
.tear--card  {-webkit-mask-image:var(--card-bottom);mask-image:var(--card-bottom)}
.tear--foot{-webkit-mask-image:var(--tear-foot);mask-image:var(--tear-foot);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.tear--card-2{-webkit-mask-image:var(--card-bottom-2);mask-image:var(--card-bottom-2)}
.tear--card,.tear--card-2{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}

/* The rooms section's pair. Each file is 3.83:1 with the torn run in its last
   quarter and flat fill for the rest, so stretching one to the strip's box
   would squash the fibre. `100% auto` sizes the mask to the strip's width at
   its true ratio — taller than the strip — and the position then brings only
   the torn end into view: bottom-anchored above the photographs, so the cut
   lands on their top edge, and top-anchored below them. Everything outside
   that stays flat fill either way. Both strips run the full width of the
   screen, so each edge is one cut carried over the gap between the cards. */
.tear--rooms-top,.tear--rooms-bottom{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% auto;mask-size:100% auto;
}
.tear--rooms-top{
  -webkit-mask-image:var(--rooms-top-svg);mask-image:var(--rooms-top-svg);
  -webkit-mask-position:0 100%;mask-position:0 100%;
}
.tear--rooms-bottom{
  -webkit-mask-image:var(--rooms-bottom-svg);mask-image:var(--rooms-bottom-svg);
  -webkit-mask-position:0 0;mask-position:0 0;
}

/* The strip that closes the rooms off at the bottom. It belongs to the grid
   wrapper rather than to either card, so the cut it carries runs the whole
   width of the screen instead of stopping at the gap between the two. The
   top edge is cut the same way, by the transition band's own strip above. */
.card-tear{position:absolute;left:0;right:0;z-index:2;height:var(--card-tear-h);pointer-events:none}
/* the top cut carries the intro's ground down onto the photographs, the
   bottom one the ivory of the section that follows */
.card-tear.is-top{top:0;background-color:var(--bg-soft)}
.card-tear.is-bottom{bottom:0;background-color:var(--bg)}

/* A flat-colour strip that tears into the section above or below it. */
.section-tear{
  position:absolute;left:0;right:0;z-index:9;
  height:var(--tear-h);background-color:var(--bg);pointer-events:none;
}
.section-tear.is-bottom{bottom:0}
.section-tear.is-top{top:0}
.section-tear.is-dark{background-color:var(--bg-dark)}
/* flipping a flat strip re-uses one cut as a different profile */
.section-tear.is-flip{transform:scaleY(-1)}

/* --------------------------------------------------------------------------
   8c. Forest scene — the heading rises from behind the treeline
   -------------------------------------------------------------------------- */
.forest_scene{position:relative;z-index:3;width:100%;background-color:var(--bg);padding-top:var(--section-y)}
.forest_scene-art{
  position:relative;z-index:2;display:block;width:100%;height:auto;
  margin-bottom:-1px;                 /* kill the seam against the section below */
  pointer-events:none;
}
.forest_scene-heading{
  position:absolute;z-index:1;left:0;right:0;bottom:62%;
  display:flex;justify-content:center;
  padding-left:var(--gutter);padding-right:var(--gutter);
  text-align:center;color:var(--ochre);
}

/* --------------------------------------------------------------------------
   9. The day
   -------------------------------------------------------------------------- */
/* the CTA sits just past the canvas, at the end of the drawn line, so the
   section needs room below the canvas or the button lands in the next one */
.section_journey{z-index:3;position:relative;overflow:clip;background-color:var(--ivory);padding-bottom:var(--section-y)}

/* The whole section is one 1440 x 2103 canvas — the reference's proportions.
   Every offset below is its px value over that canvas, written as a
   percentage, so the map, the grid, the drawn path, the four photographs and
   their numbers all scale together instead of drifting apart off-size. */
.journey_canvas{position:relative;width:100%;max-width:90rem;margin-inline:auto;aspect-ratio:1440/2103}

.journey_map{z-index:1;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;pointer-events:none}

.journey_heading{
  z-index:6;position:relative;padding-top:var(--section-y);
  display:flex;flex-direction:column;align-items:center;
  gap:var(--rhythm-heading-body);text-align:center;
}
.journey_heading .text-size-medium{max-width:var(--measure-tight)}
.journey_heading .button{margin-top:var(--space-16)}

/* The line starts at the top of its box, which is where the heading sits.
   Fading its first few percent keeps it clear of the copy without moving
   any of the geometry that threads it through the numbered stops. */
.journey_path{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 3.5%,#000 8%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 3.5%,#000 8%);
  z-index:5;position:absolute;pointer-events:none;
  left:16.667%;                                  /* 240  */
  top:11.412%;                                   /* 240  */
  width:77.778%;                                 /* 1120 */
  height:88.588%;                                /* 1863 */
}
.journey_path svg{width:100%;height:100%}
/* Below 1280 the heading copy wraps to more lines and reaches about 11% down
   the box, so the first footprints landed on the text. Fade longer there;
   the trail then appears just above photograph 1. */
@media screen and (min-width:992px) and (max-width:1279px){
  .journey_path{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 11.5%,#000 14%);
    mask-image:linear-gradient(to bottom,transparent 0,transparent 11.5%,#000 14%);
  }
}

/* Footprints laid along the route by main.js (section 6). Once they're down
   the line's stroke is hidden; it stays in the markup as the route. Drawn as
   a left foot, toes up; the right is the same print mirrored. */
.journey_path.has-steps .js-draw-path{visibility:hidden}
.journey_steps{position:absolute;inset:0}
.journey_step{
  position:absolute;width:calc(var(--foot) * .55);height:var(--foot);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44' fill='%23557A4B'%3E%3Cellipse cx='17.2' cy='5.2' rx='3.3' ry='4.3'/%3E%3Ccircle cx='11.7' cy='3.4' r='2.2'/%3E%3Ccircle cx='7.7' cy='4.9' r='1.9'/%3E%3Ccircle cx='4.5' cy='7.5' r='1.7'/%3E%3Ccircle cx='2.2' cy='11' r='1.5'/%3E%3Cpath d='M20.6 14.5c1 3.6.2 7.6-2 11-1.4 2.2-1.5 4.8-1.1 7.6.7 5-1.6 10.4-6.8 10.4-4.6 0-6.4-3.6-6-7.6.4-4.4-2.4-9.6-2.6-15.2C1.9 14.8 5 11 10.6 10.6c4.6-.4 9.1.4 10 3.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;
  transform:translate(-50%,-50%) rotate(var(--a)) scale(.5);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
.journey_step.is-right{transform:translate(-50%,-50%) rotate(var(--a)) scale(-.5,.5)}
.journey_step.is-on{opacity:.85;transform:translate(-50%,-50%) rotate(var(--a)) scale(1)}
.journey_step.is-right.is-on{transform:translate(-50%,-50%) rotate(var(--a)) scale(-1,1)}

/* Under the last stop. The trail comes down the left side and ends at
   35.1% / 97.4% of the canvas, against the left end of this button. */
.journey_cta{
  z-index:8;position:absolute;
  left:35.5%;top:97.4%;transform:translateY(-50%);
}
/* This one is placed by its transform, so the shared lift would replace the
   centring and drop it half its height. It answers in colour only. */
.journey_cta:hover,
.journey_cta:focus-visible{transform:translateY(-50%);box-shadow:none}

.journey_item{
  z-index:7;position:absolute;width:22.222%;     /* 320 */
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--space-24);                           /* image → content: 24 */
}
.journey_item.is-1{left:61.111%;top:19.021%}     /* 880 / 400  */
.journey_item.is-2{left:11.111%;top:38.041%}     /* 160 / 800  */
.journey_item.is-3{left:66.667%;top:53.257%}     /* 960 / 1120 */
.journey_item.is-4{left:27.778%;top:68.474%}     /* 400 / 1440 */

.journey_image{width:100%;height:auto;aspect-ratio:325/400;object-fit:cover}
.journey_item-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-16)}
.journey_item-content .text-size-tiny{max-width:none}
.journey_item-number{
  z-index:8;position:absolute;left:93.75%;top:-1.25rem;   /* 300 of 320, -20 */
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:50%;
  background-color:var(--earth);color:var(--ivory);
  font-family:var(--font-display);font-size:1.125rem;
}
.journey_item .heading-style-h5{color:var(--ochre)}

/* --------------------------------------------------------------------------
   9b. Gallery — a strip that runs on its own
   Proportions taken off the reference rather than judged: every frame the
   same width, at 17.5% of the viewport; heights alternating in a 3:2 ratio,
   so one is slightly portrait (8:9) and the next slightly landscape (4:3);
   the gap just under a tenth of a frame; and all of them centred on one line
   rather than pushed to the top and bottom of the row.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Offers
   A sand panel that runs off the right edge of the screen, the photograph
   laid across its left edge so the two overlap rather than sit side by side,
   and the copy set on the panel itself.
   -------------------------------------------------------------------------- */
/* Pulled up over the facilities section by one tear depth and stacked above
   it, so it travels up across the pinned dusk instead of waiting below it.
   The ground is on the ::after rather than on the section, because a
   background here would cover the sky with a straight edge and there would
   be nothing for the torn strip to tear into. */
.section_offers{
  z-index:5;position:relative;
  /* Starts a whole viewport before the pinned stage lets go, and carries the
     same distance back as padding so the copy stays where it was. That gap is
     the travel: the torn edge and the ivory behind it rise the full height of
     the screen while the dusk is still pinned, instead of the two releasing
     together and moving off as one — which is what made it look like the
     section stopped short. */
  margin-top:calc(-100vh - var(--tear-h));
  /* 8.5vh of travel rather than the full 100vh — about a third of what it
     was. Carrying the whole margin back as padding parked the copy a screen
     below the torn edge, so the panel arrived a viewport ahead of anything
     written on it. Now the copy follows the tear up rather than trailing it,
     which is also how the reference behaves. */
  /* One inset, used at both ends, so the panel clears the photograph by the
     same amount top and bottom. It was 137 above against 60 below, which put
     the shape visibly off-centre; both are now the smaller of the two. The
     top has to carry the torn strip's depth on top of it, since the strip
     sits inside the section rather than above it. */
  padding-top:calc(var(--tear-h) + var(--offers-lead) + var(--offers-inset));
  padding-bottom:var(--offers-inset);
}
.section_offers::after{
  content:"";position:absolute;z-index:-1;
  /* stays flush with the tear — this is the ivory the torn edge lands on, and
     dropping it with the panel opens a band of sky between the two */
  left:0;right:0;top:var(--tear-h);bottom:0;
  background-color:var(--ivory);
}
/* Full-bleed to the right, turned on the left, and taller than the photograph
   so its two turned corners clear the picture and can actually be seen.
   It was inset var(--space-64) top and bottom, which left the photograph
   standing proud of it by 4px — nothing — while the 40px curve sat entirely
   behind the picture. The section read as one flat block because every part
   of the shape that gives it its character was hidden. */
.offers_panel{
  position:absolute;z-index:0;
  /* starts under the torn strip, so the tear reveals the sky and not this */
  left:24%;right:0;top:calc(var(--tear-h) + var(--offers-lead));bottom:0;
  background-color:var(--bg-soft);
  border-radius:var(--radius-panel-soft) 0 0 var(--radius-panel-soft);
}
.offers_grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5.5vw,6rem);align-items:center;
}
.offers_media{margin:0;width:100%}
/* Held to a landscape plate and capped against the viewport, so the whole
   section — picture, heading, copy and the way in — is readable without
   scrolling it past. cover keeps the crop honest at any cap. */
/* Square-cornered, and lifted off the panel — the picture is an object lying
   on the shape, which is the whole relationship the section is built on. */
.offers_media img{
  width:100%;display:block;
  aspect-ratio:1/.66;height:auto;max-height:52vh;
  object-fit:cover;object-position:50% 62%;
  box-shadow:0 1.25rem 2.75rem rgba(36,51,31,.16);
}
.offers_body{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--rhythm-heading-body);
}
/* The two lines are one lockup: the same face and size, told apart by the
   italic and the colour rather than by weight. */
.offers_heading{display:flex;flex-direction:column;gap:.08em;margin:0}
.offers_heading-name,
.offers_heading-accent{
  font-family:var(--font-display);
  font-size:clamp(1.625rem,3.1vw,2.75rem);line-height:1.12;
  text-transform:capitalize;font-weight:400;
}
.offers_heading-name{letter-spacing:.07em;color:var(--text)}
.offers_heading-accent{letter-spacing:.045em;color:var(--ochre);font-style:italic}
.offers_body .text-size-medium{max-width:32rem}

/* the offers CTA is a .button like every other one on the page */
.offers_body .button{margin-top:var(--space-16)}

.section_gallery{
  z-index:4;position:relative;overflow:hidden;
  background-color:var(--ivory);
  /* The panel above ends flush with its section, so this padding is the whole
     gap. The heading's own box starts 20px inside the section, which is why
     the token alone measured 100 to the type rather than 120. */
  padding-top:calc(var(--section-y) + 1.25rem);
  padding-bottom:var(--section-y);
}
/* --------------------------------------------------------------------------
   Testimonials
   One quote at a time on the page's own ivory — no band, no illustration
   behind the type. The arrows sit either side of the quote, the dots beneath.
   -------------------------------------------------------------------------- */
.section_testimonials{
  z-index:4;position:relative;
  background-color:var(--bg);color:var(--text);
  padding-top:var(--section-y);padding-bottom:var(--section-y);
}
.testimonials_inner{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--space-32);text-align:center;
}
/* Set like the gallery's own heading above it, so the two read as a pair of
   sections rather than a section and a caption. */
.testimonials_heading{margin:0 0 var(--space-32)}
/* arrow | quote | arrow, on one centre line. The middle track is minmax(0,1fr)
   so a long quote wraps rather than pushing the arrows off the container. */
.testimonials_stage{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(1rem,3vw,2.75rem);
  width:100%;max-width:calc(var(--measure) + 12rem);
}
/* The opening mark is set behind the type rather than in it, so the quote's
   first line still starts on the centre line the rest of the block is on. */
.testimonials_viewport{display:grid;position:relative}
.testimonials_viewport::before{
  content:"\201C";position:absolute;z-index:0;
  left:50%;top:.06em;transform:translate(-50%,-50%);
  font-family:var(--font-display);
  font-size:9rem;line-height:1;color:var(--ochre);opacity:.11;
  pointer-events:none;
}
/* Every slide in the one grid cell: the tallest sets the height once, so
   changing quote cannot shift anything below it. */
.testimonials_slide{
  grid-area:1/1;position:relative;z-index:1;margin:0;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-32);
  opacity:0;visibility:hidden;transform:translateY(.5rem);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur);
}
.testimonials_slide.is-active{
  opacity:1;visibility:visible;transform:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s;
}
.testimonials_quote{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.42;font-weight:400;
}
/* No portrait. The only images in the folder are buildings, and a cropped
   facade beside a name reads as a person who is not there. Name and stay are
   enough attribution; drop a real guest photo in here when there is one. */
.testimonials_by{display:flex;flex-direction:column;align-items:center;gap:var(--space-8)}
.testimonials_name{font-size:1rem;font-weight:500}
.testimonials_meta{
  letter-spacing:.1em;text-transform:uppercase;font-size:.75rem;
  color:var(--ochre);
}
.testimonials_arrow{
  display:flex;align-items:center;justify-content:center;
  width:2.625rem;height:2.625rem;flex:none;padding:0;
  background:none;color:var(--text);cursor:pointer;
  border:1px solid currentColor;border-radius:50%;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.testimonials_arrow svg{width:1.125rem;height:1.125rem}
.testimonials_arrow:hover{background-color:var(--ochre);color:var(--ivory);border-color:transparent}
.testimonials_dots{display:flex;align-items:center;gap:var(--space-8)}
/* The hit area stays 24px square while the mark itself is 8 - small target,
   full-size tap. */
.testimonials_dot{
  display:flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;padding:0;
  background:none;border:0;cursor:pointer;
}
.testimonials_dot::before{
  content:"";width:.5rem;height:.5rem;border-radius:50%;
  background-color:var(--text);opacity:.28;
  transition:opacity var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.testimonials_dot[aria-selected="true"]::before{background-color:var(--ochre);opacity:1}
.gallery_head{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--space-12);text-align:center;margin-bottom:var(--space-64);
}
.gallery_head .text-size-caption-large{color:var(--ochre)}
.gallery_marquee{width:100%;overflow:hidden}
/* Two identical rows side by side; the track slides exactly half its own
   width, which puts copy two where copy one started — no seam, no jump. */
.gallery_track{display:flex;width:max-content;animation:gallery-run 46s linear infinite}
.gallery_marquee:hover .gallery_track{animation-play-state:paused}
.gallery_row{
  display:flex;align-items:center;                /* one shared centre line */
  gap:var(--gallery-gap);padding-right:var(--gallery-gap);
}
.gallery_item{
  flex:none;margin:0;overflow:hidden;
  width:var(--gallery-w);background-color:rgba(36,51,31,.06);
}
/* the alternation is positional, so it can never fall out of step */
.gallery_item:nth-child(odd) {aspect-ratio:8/9}    /* the taller frame  */
.gallery_item:nth-child(even){aspect-ratio:4/3}    /* the shorter frame */
.gallery_item img{width:100%;height:100%;object-fit:cover;display:block}

@keyframes gallery-run{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .gallery_track{animation:none}
  .gallery_marquee{overflow-x:auto}
}

/* --------------------------------------------------------------------------
   10. Numbers
   -------------------------------------------------------------------------- */
.section_numbers{z-index:4;position:relative;overflow:clip;padding-bottom:var(--section-y)}
.section_numbers .padding-global{padding-left:0;padding-right:0}   /* full-bleed imagery */
.section_numbers.is-mask{margin-top:-13rem;padding-top:13rem}
/* That 13rem overhang sits on top of the section above and was eating the
   pointer: "Explore all experiences" ended up under it and could be neither
   hovered nor clicked. Nothing in this section needs the pointer except its
   own CTA, so the section passes events through and the link takes them back. */
.section_numbers{pointer-events:none}
.section_numbers a,
.section_numbers button{pointer-events:auto}
/* Tall enough that the sky and treeline stay pinned while the copy travels
   the whole way up from behind them. */
/* 160vh not 200: the copy clears the treeline about two-thirds of the way
   through, and the last screenful was pinned sky with nothing moving in it. */
/* Tall enough for the copy to rise the whole way through the ridge and clear
   it, plus the extra viewport the section below spends travelling up over the
   pinned dusk — see .section_offers, which is pulled back up into it. */
.numbers_wrapper{height:245vh;position:relative}

/* --- dusk stage -----------------------------------------------------------
   Three layers pinned to the viewport: the sky, the copy, then the treeline
   in front of it. Sticky elements make their own stacking context, so the
   treeline sits in a second sticky whose negative margin cancels the layout
   height it would otherwise add. */
/* clips the sky's overhang — see .numbers_sky. Making a sticky element its
   own scroll container does not affect its stickiness. */
.numbers_stage{position:sticky;top:0;height:100vh;z-index:1;overflow:hidden}
/* Dusk over the park: a low sun burning off to the left, the sky deepening
   through sand into ochre at the horizon where the treeline meets it. The
   ochre at the foot is what gives the ridges something to stand against —
   drained of it, the whole scene goes to haze. */
/* The sky runs 8rem past the top of the stage, and the stage clips it. The
   torn strip is anchored to the wrapper's top edge, so a sky that stops there
   too has nothing in hand: drift it either way and its own straight top edge
   slides out from under the strip, which is the hard flat line that kept
   reading as a cut across the tear. Overhanging and clipped, that edge is
   always outside the stage and the drift has room to move in. */
.numbers_sky{
  position:absolute;inset:-8rem 0 0;
  background:
    radial-gradient(58% 42% at 16% 78%, rgba(238,246,214,.92), rgba(238,246,214,0) 62%),
    /* The sky opens on its own colour, not on the page's ivory. Opening it on
       ivory did remove the hard line at the section's top edge, but it took
       the torn edge with it: the strip that tears the section above into this
       one is painted ivory, so against an ivory sky there was nothing to see
       and the join became a long soft wash instead. The join is meant to be
       torn paper, and a tear only reads if the two sides differ. */
    linear-gradient(to bottom,
      #C2CDB6 0%, #CFDCC2 20%, #DDE7CB 44%,
      #C9D9AE 68%, #A8BE86 86%, #7E9A63 100%);
}
.numbers_forest-wrap{
  position:sticky;top:0;height:100vh;margin-top:-100vh;
  z-index:3;pointer-events:none;overflow:hidden;
}
.numbers_forest{position:absolute;left:0;bottom:-1px;width:100%;height:auto;display:block}
/* The foot of the scene. Sits in the pinned layer under the treeline, so the
   two hold together while the copy travels past them. */
/* The sheet of ivory that closes the dusk scene. It hangs off the foot of the
   wrapper while the stage inside stays pinned, so scrolling the last stretch
   draws it up over the treeline rather than sliding it across. Above every
   pinned layer, or it would rise behind the trees instead of over them. */
.numbers_foot{position:absolute;left:0;right:0;bottom:0;z-index:5;
  height:9vh;background-color:var(--bg);pointer-events:none}
/* the torn lip, carried above the sheet at the artwork's own 5.33:1 so the
   fibre never stretches, however tall the sheet itself is asked to be */
/* dropped a pixel into the sheet rather than sat on it: the mask's last row is
   only part-opaque, so butting the two flush leaves a hairline of sky between */
.numbers_foot::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);
  /* the artwork's own 5.33:1, but held against viewport height too: on a wide
     short screen the vw figure alone rises far enough to cut through the copy */
  height:min(18.75vw,22vh);background-color:var(--bg);
  -webkit-mask-image:var(--tear-foot);mask-image:var(--tear-foot);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
/* The heading is meant to rise from behind the treeline, so the copy layer sits
   under it. The paragraph and its way in are not — on a short window the ridge
   climbs into them and swallows the button whole. This block alone comes
   forward of the trees; the ivory sheet at z5 still closes over it at the end. */
/* Below the treeline's z-index 3, so the copy travels up behind the ridge
   rather than over it — it was on 4, which put it in front of the mountains. */
.facilities{position:relative;z-index:2}

.numbers_sticky{position:sticky;top:0}
.numbers_sticky.is-1{z-index:1}
.numbers_sticky.is-2{z-index:3;pointer-events:none}
.numbers_image-main{z-index:-1;position:absolute;top:0;left:0;right:0;width:100%;height:100vh}
/* starts flush with the wrapper so the torn edge lands on the image's real top */
.numbers_image-main.numbers-mask{object-fit:cover;height:calc(100vh + 15rem);margin-top:0}
.numbers_sticky.is-2 .numbers_image-main{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 80%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,transparent 80%,#000 100%);
}
.numbers_scrim{
  position:absolute;top:0;left:0;right:0;z-index:0;height:100vh;pointer-events:none;
  background:linear-gradient(to bottom,rgba(36,51,31,.82) 0%,rgba(36,51,31,.55) 45%,rgba(36,51,31,.8) 100%);
}
/* The copy is the only thing that scrolls here — the sky and the treeline are
   pinned. So the heading sits alone in the first screen, and the figures are
   parked a screenful lower, out of sight behind the trees, until scrolling
   carries them up past the ridge. */
/* z-index:auto on purpose. A number here would open a stacking context and trap
   both children inside it, so neither could ever out-paint the treeline. Left
   transparent, the two below compete with the forest layer directly: the
   heading under it, the copy and its way in over it. */
.numbes_abs{z-index:auto;position:absolute;inset:0 0 auto;width:100%;padding-top:40vh;color:var(--earth)}
.numbes_abs > .heading-style-h2{position:relative;z-index:2}
/* --- Facilities: four to a row, sliding for the rest ----------------------
   Set far enough down that the cards themselves start out of sight behind the
   ridge and are carried up through it as the section scrolls — but no further:
   a screenful of gap left the head arriving after a whole fold of empty sky.
   This is the least that still hides the cards and keeps the head in view. */
.facilities{width:100%;max-width:76rem;margin:28vh auto 0}
/* heading, one paragraph, one way in — no carousel to keep off the ridge */
.facilities_head{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--rhythm-heading-body);color:var(--earth);
}
.facilities_head .heading-style-h3{max-width:34rem}
.facilities_head .text-size-medium{max-width:var(--measure-tight);text-align:center}
/* 150px of clear ground under the button, so it never finishes flush against
   the torn edge the section closes on */
.facilities_head .button{margin-top:var(--space-16);margin-bottom:170px}

/* --------------------------------------------------------------------------
   12. The house
   -------------------------------------------------------------------------- */
.section_security{z-index:10;position:relative;padding-bottom:5rem;background-color:var(--ivory);color:var(--earth)}
/* stays in flow so the wrapper keeps its height */
/* The 500–700px section-heading measure assumes the guideline's 40–48px H2.
   Against the homepage's 62px H2 it stacks to four lines, so this is held at
   880 until the type-scale question is settled. See DESIGN-SYSTEM.md. */
.security_heading{width:100%;max-width:55rem}
.security_heading .heading-style-h2{color:var(--ochre)}
.security_block1{width:100%;max-width:35rem;margin-top:var(--space-64);margin-left:25%}
.security_block2{width:100%;max-width:24rem;margin-top:var(--space-48);margin-bottom:var(--space-64);margin-left:50%;
  background-color:var(--bg-alt);padding:var(--space-40);color:var(--earth);border-radius:var(--radius)}
.security_block1 .text-size-medium,.security_block2 .text-size-medium{max-width:none}
.security_bottom-heading{margin-left:25%}
.security_bg{z-index:-1;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.09;background-color:var(--ivory)}
.security_grid{z-index:0;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.security_grid svg{width:100%;height:100%}

/* --------------------------------------------------------------------------
   13. CTA + form
   -------------------------------------------------------------------------- */
.section_cta{z-index:2;position:relative;overflow:hidden}
.section_cta.is-mask{z-index:11;margin-top:-12.5rem}
.cta_content{position:relative}
.cta_bg{z-index:-1;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;will-change:transform}
.cta_bg.is-top{z-index:1;pointer-events:none;opacity:0;height:0}
.cta_content::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to bottom,var(--ivory) 0%,rgba(36,51,31,.55) 30%,rgba(36,51,31,.86) 70%,var(--earth) 100%);
}
.cta_heading-wrp{z-index:2;position:relative;padding-top:16rem}
.cta_heading{z-index:0;position:relative;width:100%;max-width:64rem;margin-inline:auto;color:var(--ivory)}
.display-block-tablet{display:inline}

.cta_form-wrapper{z-index:2;position:relative;margin-top:12rem;padding-bottom:6rem}
.cta_form{
  width:100%;max-width:45rem;margin-inline:auto;
  background-color:#2C3A27;color:var(--ivory);
  border:1px solid rgba(216,224,206,.28);
  box-shadow:0 2rem 5rem rgba(20,28,16,.45);
}
.form{display:grid;grid-template-columns:1.35fr 1fr}
.form_left{display:flex;flex-direction:column;gap:var(--space-16);padding:var(--space-48) var(--space-40)}
.form_row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16) var(--space-24)}
.form_field-wrapper{display:flex;flex-direction:column;gap:var(--space-8)}   /* label → input: 8 */
.form_field-wrapper label{color:rgba(242,242,233,.65);font-size:var(--control-fs);letter-spacing:.02em}
.form_field{
  width:100%;min-height:var(--control-h);
  background-color:transparent;border:0;border-bottom:1px solid rgba(242,242,233,.3);
  border-radius:var(--radius);
  padding:var(--space-12) 0;font-size:1rem;color:var(--ivory);
  transition:border-color var(--dur) var(--ease);
}
.form_field::placeholder{color:rgba(242,242,233,.4)}
.form_field:focus{outline:0;border-bottom-color:var(--peach)}
.form_field.is-area{min-height:5rem;resize:vertical}
.form_field:user-invalid{border-bottom-color:#c2603a}
.form_right{display:flex;flex-direction:column;justify-content:space-between;background-color:rgba(216,224,206,.12)}
.form_right-content{display:flex;flex-direction:column;gap:var(--rhythm-body-cta);align-items:flex-start;padding:var(--space-48) var(--space-40)}
.form_right-content .heading-style-h6{color:var(--peach)}


.form_image{width:100%;height:12rem;object-fit:cover}
.form_message-success,.form_message-error{padding:var(--space-48) var(--space-40);background-color:var(--earth);color:var(--ivory)}
.form_message-error{color:#e8a184}

.cta_nav-animation{z-index:-1;position:absolute;inset:0 auto calc(100vh + 3.5rem) 0;width:1px;opacity:0;pointer-events:none}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.footer_wrapper{position:relative;background-color:var(--earth);color:var(--ivory);overflow:hidden}
.section_footer{position:relative;z-index:2}
.footer_content{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;width:100%;height:100%;padding-top:6rem}
.footer_main{z-index:1;position:relative}
.footer_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-24);width:50%}
.footer_column{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-32)}
.footer_column .text-size-caption-large{color:var(--peach)}
.footer_column-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-24)}
.footer_bottom-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:var(--space-4);margin-top:-3rem;pointer-events:none;opacity:.75}
.footer_bottom{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--space-40);margin-bottom:var(--space-32);opacity:.6}
.footer_bottom-links{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-16)}
/* Display exception: the footer wordmark is a graphic, not type on the scale —
   it is sized to span its container, so it uses clamp() rather than a step. */
.footer_logo{
  z-index:1;position:relative;width:100%;max-width:var(--container);
  margin:var(--space-32) auto 0;
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--font-display);color:var(--ochre);
  user-select:none;
}
.footer_logo-line{font-size:clamp(2.25rem,14vw,13rem);line-height:.95;letter-spacing:.01em}
/* padding in em keeps the descender of the "g" inside the clipped wrapper */
.footer_logo-line.is-two{font-size:clamp(3rem,24.5vw,22.5rem);line-height:1;letter-spacing:.05em;padding-bottom:.22em}
.footer-bg-img{z-index:0;position:absolute;inset:auto 0 0;width:100%;height:auto;object-fit:contain;object-position:50% 100%;opacity:.1}
.footer_bottom-nav-animation{z-index:-1;position:absolute;inset:-.75rem auto 0 0;width:1px;opacity:0;pointer-events:none}

/* Phone only — hidden everywhere else, where the booking bar does its job. */
.book-sticky{display:none}

/* --------------------------------------------------------------------------
   15. Reveal-on-scroll
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(var(--space-40))}

/* --------------------------------------------------------------------------
   16. Tablet — 991px and down
   -------------------------------------------------------------------------- */
@media screen and (max-width:991px){
  .padding-global{padding-left:var(--gutter-tablet);padding-right:var(--gutter-tablet)}
  .container-inset{padding-left:var(--gutter-tablet);padding-right:var(--gutter-tablet)}
  /* tablet section rhythm: 56–72 */
  .padding-section-large{padding-top:var(--space-64);padding-bottom:var(--space-64)}
  .padding-section-medium{padding-top:var(--space-48);padding-bottom:var(--space-48)}
  .padding-global.padding-section-large.is-xxl{padding-top:4.5rem;padding-bottom:4.5rem}
  .padding-global.padding-section-large.is-relative-11.is-padding-5{padding-left:var(--gutter-tablet);padding-right:var(--gutter-tablet)}

  .heading-style-h1{font-size:3.25rem}   /* 52 */
  .heading-style-h2{font-size:2.5rem}    /* 40 */
  .heading-style-h3{font-size:1.75rem}   /* 28 */
  .heading-style-h4{font-size:1.375rem}  /* 22 */
  .text-size-numbers{font-size:3rem}     /* 48 */
  .text-size-large{font-size:1.375rem}

  /* nav → full-screen drawer, rows with rules between them.
     The 120px bar margin is desktop-only; below it the page gutter wins. */
  .nav_component{padding-top:1rem;padding-bottom:1rem}
  /* the condense, at this bar's own proportions */
  .nav_component.is-compact{padding-top:.625rem;padding-bottom:.625rem}
  .nav_component.is-compact .nav_logo{height:3.5rem}
  .nav_component.is-compact.is-menu-open{padding-top:1rem;padding-bottom:1rem}
  .nav_component.is-compact.is-menu-open .nav_logo{height:4.5rem}
  .nav_component .padding-global{padding-left:var(--gutter-tablet);padding-right:var(--gutter-tablet)}
  .nav_container{grid-template-columns:auto 1fr auto}
  /* Centring the lockup is a desktop arrangement — it balances the two halves
     of the menu either side of it. There is no menu in the bar on a phone, so
     the mark stays on the left where it was, opposite the burger. */
  .nav_brand{z-index:100;grid-column:1;justify-self:start}
  .nav_logo{justify-content:flex-start}
  .nav_contact-wrp{display:none}
  /* Was 24x24 with no padding — under the 44px a finger needs. The bars stay
     where they are; the box around them grows. */
  .nav_button{display:flex;align-items:center;justify-content:flex-end;z-index:100;padding:.625rem 0 .625rem .625rem;min-width:2.75rem;min-height:2.75rem;grid-column:3;justify-self:end}
  .nav_button-content{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:7px;width:1.5rem;height:1.5rem}
  /* 1px reads as a hairline on a phone and all but disappears over a
     photograph. 2px is the thinnest that still looks drawn rather than faint. */
  .nav_button-line{width:11px;height:2px;border-radius:100rem;background-color:var(--nav--text-color);transition:width .3s var(--ease),transform .35s var(--ease),opacity .25s}
  .nav_button-line.is-2{width:16px}
  .nav_button-line.is-3{width:21px}
  /* the open drawer is the ground while it is up, so the bar drops its own
     ivory — otherwise the ivory burger lines and the logo land on ivory */
  .nav_component.is-menu-open{background-color:transparent;border-bottom-color:transparent}
  /* The drawer is paper now, so the lockup keeps its own colours instead of
     being knocked out to white, and the close cross goes dark to be seen. */
  .nav_component.is-menu-open .brand-logo{filter:none}
  .nav_component.is-menu-open .nav_button-line{width:21px;background-color:var(--nav--text-color)}
  .nav_component.is-menu-open .nav_button-line.is-1{transform:translateY(8px) rotate(45deg)}
  .nav_component.is-menu-open .nav_button-line.is-2{opacity:0}
  .nav_component.is-menu-open .nav_button-line.is-3{transform:translateY(-8px) rotate(-45deg)}

  .nav_menu{
    position:fixed;inset:0 0 auto;z-index:95;
    /* tracks the bar rather than a fixed 4.5rem — the stacked mark made the bar
       taller and the lockup was sitting on the first row of the list */
    width:100%;height:100dvh;padding-top:calc(var(--nav-h) + .5rem);
    /* Paper, not forest. --nav--mobile-background has been sitting in the
       tokens unused since the start; this is the one thing it is for. */
    background-color:var(--nav--mobile-background);
    display:flex;align-items:stretch;justify-content:flex-start;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .55s var(--ease);
  }
  .nav_menu.is-open{clip-path:inset(0 0 0 0)}
  .nav_menu-content{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:0;width:100%;height:100%;padding:0 2rem 2.5rem;
    /* ten rows and a button do not fit a short phone at any comfortable row
       height, so the column scrolls rather than running off the bottom */
    overflow-y:auto;
  }
  /* 16 a side rather than 32. The bar carries ten destinations now, not six;
     at the old padding the list ran past the foot of the screen before the
     Book Now button was reached. */
  /* Dark type on the paper, and the hairline swaps too: --footer-rule is a pale
     rgba meant for a dark panel and would be invisible here. */
  /* .75rem rows, not 1rem: the drawer carries thirteen destinations now and at
     the old size the list ran past the foot of the screen. */
  .nav_menu_link{
    width:100%;padding-top:.75rem;padding-bottom:.75rem;text-align:left;
    border-top:1px solid var(--nav--border);color:var(--earth);
  }
  .nav_menu_link::after{display:none}
  .is-mobile-h5{font-family:var(--font-display);font-size:1.125rem;font-weight:500;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}
  /* The two halves of the bar are a desktop arrangement only; in the drawer
     they dissolve so every row is a flex child of the one column. Splitting
     the links also split their document order, with the overflow list landing
     ahead of About Us, so order restores the reading sequence: the six bar
     destinations, then the seven from the dropdown, then Book Now. */
  .nav_menu-group{display:contents}
  .nav_menu_link{order:1}
  .nav_more-link{order:2}
  .nav_menu-btn{display:flex;flex-direction:column;width:100%;margin-top:auto;order:3}
  /* the drawer's Book Now is the same primary as the bar's */
  .nav_logo{height:4.5rem}
  :root{--nav-h:6.5rem;--nav-h-compact:4.8125rem}   /* 104 standing, 77 condensed */

  /* hero */
  .hero_bg{transform:none}
  /* Stays one row. Going two-up here made the bar 249px tall and it ate the
     headline on a short tablet; dropping the promo field instead keeps three
     fields and the button on a single line at ~110px. */
  .hero_book_fields{grid-template-columns:repeat(3,minmax(0,1fr)) auto;padding:var(--space-12)}
  .hero_book_field{padding:.25rem var(--space-12)}
  .hero_book_field:nth-child(4){display:none}          /* promo code */
  .hero_book_cta{margin-left:var(--space-12);padding:0 var(--space-20)}
  .hero_book_foot{padding-left:var(--space-24);padding-right:var(--space-24)}
  .hero_scrollable-top{gap:var(--space-24);max-width:32rem;padding-left:var(--gutter-tablet);padding-right:var(--gutter-tablet)}
  .hero_scrollable-bottom{gap:var(--space-32)}
  .hero_scrollable-bottom-text{width:auto;margin-left:0}
  .display-block-mobile{display:block}
  .display-block-tablet{display:block}

  /* the setting — height follows the type, so only the shut width is set here */
  .usp_row{font-size:2.5rem;gap:.875rem}
  .usp_media{max-width:6.5rem}
  .usp{margin-top:var(--space-48)}

  /* offers — one column, so the panel goes back to being a plain ground
     behind the whole block rather than something the picture lies across */
  .offers_grid{grid-template-columns:1fr;gap:var(--space-40)}
  /* The panel ended 2px ABOVE the button — it is inset from the section by 32
     top and bottom, and on a phone the content is taller than that leaves. Its
     foot goes to the section's, and the grid carries the 20 instead, so the
     button always sits 20 clear of the panel's edge whatever the copy runs to.

     The card's three parts are centred here too: the body is a flex column
     aligned to its start on a desktop, where the picture sits beside it. */
  .offers_body{align-items:center;text-align:center}
  .offers_body .text-size-medium{max-width:none}
  /* The section already leaves 30 under the grid, so the panel is pulled up
     10 from its foot to land exactly 20 below the button. */
  .offers_panel{left:0;right:0;top:2em;bottom:10px;
    border-radius:var(--radius-panel-soft)}
  .offers_media img{aspect-ratio:1/.7}
  .offers_body .text-size-medium{max-width:none}

  /* stay grid */
  .travel_grid{grid-template-columns:1fr}
  /* the strips are full-width in both layouts now, and vw-sized, so the cut
     scales itself — no separate depth needed below the desktop grid */
  .travel_grid-item{aspect-ratio:1/1.05}
  .travel_grid-item-bottom{padding:3rem 2rem 5rem}
  .travel_grid-item-bottom.is-pb-mobile-small{padding-bottom:5rem}
  .travel_grid-item-bottom-line{flex-direction:column}
  .travel_grid-item-bottom-text{width:auto}

  /* the day — under the desktop canvas the zig-zag has no room to read, so
     the composition stacks and the drawn path drops out */
  .journey_canvas{aspect-ratio:auto;padding-bottom:var(--space-80)}
  .journey_path{display:none}
  .journey_cta{position:relative;left:auto;top:auto;transform:none;margin:var(--space-48) auto 0;display:inline-flex}
  .journey_item{
    position:relative;left:auto;top:auto;
    width:100%;max-width:22rem;margin:var(--space-64) auto 0;
  }
  .journey_item.is-1,.journey_item.is-2,
  .journey_item.is-3,.journey_item.is-4{left:auto;top:auto}

  /* facilities */
  .facilities{margin-top:29vh}
  .numbes_abs{padding-top:35vh}
  .is-wrap-mobile{white-space:normal}
  /* the house */
  .security_block1{margin-left:auto;max-width:none;margin-top:2.5rem}
  .security_block2{margin-left:auto;max-width:35rem;margin-top:2.5rem;margin-bottom:3rem}
  .security_bottom-heading{margin-left:0}

  /* cta + form */
  .cta_heading-wrp{padding-top:9rem}
  .cta_heading{padding-left:2rem;padding-right:2rem}
  .cta_form-wrapper{margin-top:7rem;padding-bottom:4rem;padding-left:1rem;padding-right:1rem}

  /* footer */
  .footer_grid{width:100%;grid-template-columns:1fr 1fr;gap:2.5rem}
  .footer_bottom-right{align-items:flex-end;margin-top:2rem;pointer-events:auto}
  .footer_bottom{grid-template-columns:.75fr .75fr 1fr}
}

/* --------------------------------------------------------------------------
   16b. Mobile landscape — 767px and down
   -------------------------------------------------------------------------- */
@media screen and (max-width:767px){
  /* ---- Phone spacing, per COMMON-GUIDELINES §4 ---------------------------
     Set on the tokens rather than section by section, so every section on the
     page moves together and there is one place to change it again.

       section → section  60, as 30 bottom + 30 top (a join is the two added)
       heading → paragraph 20
       paragraph → button  20
     -------------------------------------------------------------------- */
  :root{
    --section-y:1.875rem;             /* 30 a side → 60 between sections */
    --rhythm-heading-body:1.25rem;    /* heading → paragraph 20 */
  }
  /* The h2 carries no padding of its own; the gap belongs to the block under
     it, so it is set once by --rhythm-heading-body rather than twice. */
  .heading-style-h2{padding-bottom:0}

  /* Paragraph → button is 20, and it comes from the parent's row-gap alone.
     This used to add 1.25rem on top of that gap, so the measured distance was
     40 — 20 of gap plus 20 of margin. The margin comes off; the gap is already
     --rhythm-heading-body, which is the 20 this block sets above.

     Still listed selector by selector rather than as a bare .button: each of
     these carries its own margin-top at a higher specificity, so a lone
     .button rule would lose to every one of them. */
  .button,
  .travel_intro .button,
  .journey_heading .button,
  .offers_body .button,
  .facilities_head .button,
  .page-cta .button,
  .travel_grid-item-bottom-head .button{margin-top:0}

  /* the two sections that set their padding in px rather than the token */
  .section_esg{padding-top:1.875rem;padding-bottom:1.875rem}
  .section_gallery{padding-top:1.875rem}

  /* ---- The booking bar, and what replaces it ------------------------------
     Four date and occupancy fields in a glass panel need width this screen
     does not have — collapsed to one column it was a stack of controls sitting
     on the photograph. Hidden here; the sticky button below carries the job. */
  .hero_book{display:none}

  .book-sticky{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    position:fixed;z-index:900;
    left:50%;transform:translateX(-50%);
    /* clear of the home indicator on a phone that has one */
    bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
    min-height:3rem;padding:0 1.75rem;
    background-color:var(--green);color:var(--ivory);
    border-radius:var(--radius-pill);
    font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
    box-shadow:0 .5rem 1.5rem rgba(20,28,16,.28);
    transition:background-color var(--dur) var(--ease);
  }
  .book-sticky:hover,.book-sticky:active{background-color:var(--green-dark);color:var(--ivory)}
  .book-sticky svg{width:.875rem;height:.875rem;flex:none}
  /* it floats over everything, so the page ends with room for it rather than
     with the button sitting on top of the last line of the footer */
  .footer{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom, 0px))}

  /* ---- Mobile: the reference's order, and buttons you can see -------------
     The reference sets each room card as heading, then copy, then the way in.
     Ours nests the heading and the button together in one box and the copy in
     another, so stacking the two boxes put the button in the middle. Flattening
     the heading box with display:contents lets all three order freely. */
  .travel_grid-item-bottom-line{display:flex;flex-direction:column;align-items:center;text-align:center}
  .travel_grid-item-bottom-head{display:contents}
  .travel_grid-item-bottom-head .heading-style-h3{order:1}
  /* 8 and 16, down from 12 and 24: the block is three short things and it was
     carrying desktop-sized air between them on a 390px screen. */
  .travel_grid-item-bottom-text{order:2;margin-top:.5rem}
  .travel_grid-item-bottom-head .button{order:3;margin-top:0}
  /* Sized like the sticky Book Now rather than stretched edge to edge — one
     button shape on the page, not two. */
  .travel_grid-item .button.is-secondary.is-blur{
    width:auto;min-height:3rem;padding:0 1.75rem;
    font-size:.8125rem;letter-spacing:.14em;
  }

  /* Every button solid on a phone. An outline pill over a photograph is hard
     to pick out on a small screen, and the blurred one was nearly invisible. */
  .button,
  .button.is-secondary,
  .button.is-secondary.is-blur{
    background-color:var(--green);
    color:var(--ivory);
    border-color:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .button:hover,
  .button.is-secondary:hover,
  .button.is-secondary.is-blur:hover{background-color:var(--green-dark);color:var(--ivory)}

  /* The drawn route is hidden on a phone, so its CTA is no longer positioned
     against it — it is just a button under centred copy, and it belongs on the
     same centre line. margin:auto alone cannot centre an inline-flex box. */
  .journey_cta{display:flex;width:fit-content;margin-inline:auto}

  .padding-global{padding-left:var(--gutter-mobile);padding-right:var(--gutter-mobile)}
  .container-inset{padding-left:var(--gutter-mobile);padding-right:var(--gutter-mobile)}

  /* Two 42px arrows either side leave the quote about 230px on a phone, which
     breaks it to four or five words a line. The quote takes the full width and
     the pair drops onto its own row beneath, centred. */
  .testimonials_stage{
    grid-template-columns:auto auto;
    grid-template-areas:"quote quote" "prev next";
    justify-content:center;
    gap:var(--space-24) var(--space-40);
  }
  .testimonials_viewport{grid-area:quote}
  /* the quote spans both tracks, so each one is half its width — without this
     the pair sits at the outer edges of the row instead of together */
  .testimonials_arrow.is-prev{grid-area:prev;justify-self:end}
  .testimonials_arrow.is-next{grid-area:next;justify-self:start}
  /* mobile section rhythm: 40–56 */
  .padding-section-large{padding-top:var(--space-48);padding-bottom:var(--space-48)}
  .padding-section-medium{padding-top:var(--space-40);padding-bottom:var(--space-40)}
  .padding-global.padding-section-large.is-xxl{padding-top:3.5rem;padding-bottom:3.5rem}
  .padding-global.padding-section-large.is-relative-11.is-padding-5{padding-left:var(--gutter-mobile);padding-right:var(--gutter-mobile)}

  .heading-style-h1,
  .heading-style-h1.is-max-60rem.is-mobile-48,.heading-style-h1.is-max-40rem.is-mobile-48,.heading-style-h1.is-mobile-48{font-size:2.5rem} /* 40 */
  .heading-style-h2{font-size:2rem}      /* 32 */
  .heading-style-h3{font-size:1.5rem}    /* 24 */
  .heading-style-h4{font-size:1.375rem}  /* 22 */
  .heading-style-h5{font-size:1.125rem}  /* 18 */
  .text-size-medium{font-size:1.0625rem} /* 17 */
  .text-size-large{font-size:1.125rem}
  .text-size-small{font-size:1rem}
  .text-size-numbers{font-size:2.5rem}   /* 40 */
  .text-align-left-mobile{text-align:left}
  .heading-style-h2.text-align-center{text-align:center}

  .nav_menu-content{padding-left:1.5rem;padding-right:1.5rem}
  /* the stacked mark is portrait; at 2.75rem the wordmark under the arch was
     four pixels tall and gone */
  .nav_logo{height:3.75rem}
  .nav_component.is-compact .nav_logo{height:3rem}
  .nav_component.is-compact.is-menu-open .nav_logo{height:3.75rem}

  /* hero */
  :root{--nav-h:5.75rem;--nav-h-compact:4.3125rem}  /* 92 standing, 69 condensed */
  /* Four stacked fields came to 380px of an 844px screen and swallowed the
     headline whole. On a phone the bar keeps the glass and the way in, and
     the dates are picked on the enquiry page instead. */
  .hero_book{border-radius:20px}
  .hero_book_fields{grid-template-columns:1fr;padding:var(--space-12)}
  .hero_book_field{display:none}
  .hero_book_cta{grid-column:1;margin:0;width:100%}
  .hero_book_foot{padding:var(--space-12) var(--space-16);font-size:.75rem}
  .hero_scrollable-top{gap:var(--space-24);max-width:none;padding-left:2.75rem;padding-right:2.75rem}
  .hero_scrollable-bottom{width:100%;padding-left:1.5rem;padding-right:1.5rem;gap:2rem}

  /* the setting */
  .usp_row{font-size:1.625rem;gap:.625rem}
  .usp_media{max-width:4rem}

  /* stay grid — the Explore pill drops below the copy, full width */
  .travel_grid-item{aspect-ratio:1/1.2}
  .travel_grid-item-bottom{padding:3rem 1.5rem 4rem;gap:1.5rem}
  .travel_grid-item-bottom.is-pb-mobile-small{padding-bottom:4rem}
  .travel_grid-item-bottom-head{width:100%}
  .button.is-secondary.is-blur{width:100%;justify-content:center}

  /* the day */
  .journey_item{max-width:20rem;margin-top:var(--space-48)}
  .journey_image{aspect-ratio:1/.9}

  /* facilities */
  .numbers_image-main.numbers-mask{height:calc(100vh + 26rem);margin-top:-11.5rem}
  /* Measured at 390x844: 30vh put the heading 211px down the pinned fold and
     26vh left another 219px under it — two empty bands on a screen that has
     844px in total. 16/9 keeps the copy clear of the treeline (top at 729)
     while giving the band back to the picture. */
  .facilities{margin-top:9vh}
  .numbes_abs{padding-top:16vh}
  .section_numbers.is-mask{margin-top:-8rem;padding-top:8rem}
  .numbes_abs{padding-left:1.5rem;padding-right:1.5rem}

  /* the house */
  .security_block1{margin-top:2rem}
  .security_block2{margin-top:2rem;margin-bottom:2.5rem;padding:2rem 1.75rem}

  /* cta + form */
  .cta_heading-wrp{padding-top:7rem}
  .cta_heading{padding-left:1.5rem;padding-right:1.5rem}
  .cta_form-wrapper{margin-top:5rem;padding-bottom:3rem;padding-left:.5rem;padding-right:.5rem}
  .form{grid-template-columns:1fr}
  .form_left{padding:var(--space-32) var(--gutter-mobile);gap:var(--space-16)}
  .form_row{grid-template-columns:1fr;gap:var(--space-16)}
  .form_right{width:100%;overflow:clip}
  .form_right-content{padding:var(--space-32) var(--gutter-mobile);gap:var(--rhythm-body-cta);align-items:stretch;text-align:center}
  .form_image{height:9rem}
  .form_message-success,.form_message-error{padding:var(--space-32) var(--gutter-mobile)}

  /* footer */
  .footer_content{padding-top:4rem}
  .footer_grid{grid-template-columns:1fr 1fr;gap:2.5rem 1.25rem}
  .footer_column{gap:1.5rem}
  .footer_bottom-right{align-items:flex-end;margin-top:2rem}
  .footer_bottom{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;text-align:left;margin-top:1.5rem;margin-bottom:2rem}
  .footer_bottom-links{justify-content:flex-start;flex-wrap:wrap;gap:1rem;width:100%}
  .footer_logo{margin-top:1.5rem}
}

/* --------------------------------------------------------------------------
   17. Phone — 479px and down
   -------------------------------------------------------------------------- */
@media screen and (max-width:479px){
  .heading-style-h1,
  .heading-style-h1.is-max-60rem.is-mobile-48,.heading-style-h1.is-max-40rem.is-mobile-48,.heading-style-h1.is-mobile-48{font-size:2.25rem} /* 36 */
  .heading-style-h2{font-size:1.875rem}  /* 30 */
  .heading-style-h3{font-size:1.5rem}    /* 24 */
  .text-size-numbers{font-size:2.25rem}
  .text-size-caption-large{font-size:.75rem}
  /* the hero headline has to sit inside the arch aperture */
  .hero_scrollable-top .heading-style-h1{font-size:1.75rem}
  /* h3 is 1.5 by this width, which would leave the tagline all but the same
     size as the name above it — it steps down with the name instead */
  .hero_scrollable-top .heading-style-h3{font-size:1.125rem}
  .hero_scrollable-top .text-size-medium{font-size:1rem}

  .numbes_abs{padding-top:14vh}
  .footer_column-content{gap:1rem}
  .footer_grid{grid-template-columns:1fr 1fr;gap:2rem 1rem}
  .footer_logo{margin-top:1rem}
}

/* --------------------------------------------------------------------------
   18. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .hero_content-wrapper{height:100vh}
  .hero_mask-inner{transform:scale(7.5)}
  .hero_bg{transform:none}
}

/* --------------------------------------------------------------------------
   Footer
   Panel shape and the split Enquiry / Book head follow the reference layout;
   the columns carry the property's own details from the fact sheet.
   -------------------------------------------------------------------------- */
.footer{
  position:relative;z-index:20;
  /* was overflow:hidden, for a mandala that used to be bigger than the panel.
     It is object-fit:contain now and cannot spill, and the clip would have cut
     off the ridge above the top edge. */
  overflow:visible;
  /* half of 120, like every other section join — the section above supplies the
     other half as its bottom padding */
  margin-top:var(--section-y);
  /* Square. The panel used to turn its two top corners so the ivory carried on
     around them; it now meets the page on a straight edge, so the footer reads
     as the end of the page rather than as a card lying on it. */
  border-radius:0;
  color:var(--text-on-dark);
  /* Two layers, as the reference builds it: a vertical ramp for the body of
     the panel, and over it one soft lift sat low and centred, which is what
     stops a tall panel reading as a flat slab. Both stay inside the one hue
     (see the tokens) — the swing is value only, near-black at the head to a
     warm brown at the foot, so the panel grades without ever changing colour.
     background-color stays as the fallback and as the colour behind the
     turned corners. */
  background-color:var(--footer-panel);
  /* The lift that used to sit here was there to raise the mandala off the
     panel, and the mandala is gone. Sat at the head it also made the top edge
     far lighter than --footer-top, which is the flat colour the torn ridge
     above is painted in — so the two could never meet. One clean ramp now:
     the top edge is exactly --footer-top, and the ridge matches it. */
  background-image:
    linear-gradient(to bottom,
                    var(--footer-top) 0%,
                    var(--footer-panel) 48%,
                    var(--footer-foot) 100%);
}
/* The land edge at the head of the panel: the footer does not begin on a
   ruled line but on an irregular ridge, with the ivory above it reading as
   sky. It sits ABOVE the panel's own top edge and is painted in the panel's
   top colour, so ridge and panel are one shape.

   A mask rather than an <img>, so the colour comes from --footer-top and the
   two can never drift apart when the palette changes. Masks are CORS-blocked
   on file:// — this has to be served over http to show up. */
/* --------------------------------------------------------------------------
   The tiger crossing the ridge
   A strip sitting directly on top of the panel, exactly as tall as the animal.
   It clips its own overflow, so the walk starts and finishes off the side of
   the screen rather than at a visible edge — the animal appears from nowhere
   on the left and leaves the same way on the right.
   -------------------------------------------------------------------------- */
.footer_walk{
  position:absolute;left:0;right:0;bottom:100%;z-index:1;
  /* 7vw is 27px on a 390 phone, so the clamp floor was doing all the work and
     the animal sat at 56px — a smudge on the ridge. 22vw floors it at 86px on
     a phone while the ceiling keeps the desktop size exactly where it was. */
  height:clamp(5.375rem,22vw,6.5rem);
  overflow:hidden;pointer-events:none;
}
/* The plate is 1280x720 with the animal small inside it, so the box is set
   wide and the height follows — what reads as the tiger's size is the height
   of the strip above, not this. */
.footer_tiger{
  position:absolute;left:0;
  /* The plate carries 97px of empty frame under the feet - 13.5% of its own
     height - so sitting it flush left the animal hovering that far above the
     ridge. Dropped by exactly that, the feet land on the panel's top edge and
     the empty band below them falls outside the strip, which clips it. */
  bottom:-13.5%;
  width:auto;height:100%;
  transform:translateX(-100%);
  animation:tiger-walk 24s linear infinite;
}
/* From entirely off the left edge to entirely off the right one. Both ends are
   outside the strip, so neither the entrance nor the exit happens on screen. */
/* Starts with its trailing edge on the left of the screen and ends with its
   leading edge on the right - both just out of sight, and nothing further. The
   extra tiger-width that used to be tacked on the end was travel nobody could
   see, which is what read as a wait before it came back round. */
@keyframes tiger-walk{
  from{transform:translateX(-100%)}
  to  {transform:translateX(100vw)}
}
/* An animal pacing the foot of the page is exactly the kind of unattended
   movement the setting is asking to be rid of. */
@media (prefers-reduced-motion:reduce){
  .footer_walk{display:none}
}

.footer::before{
  content:"";
  /* Sat INTO the panel rather than exactly on its top edge, by a share of its
     own height so it holds at every size rather than only at one.

     Two things were leaving a hairline of ivory right across the width. The
     join between two boxes lands on a fractional pixel at most window sizes;
     and the artwork as supplied was a ribbon, feathering away at the foot as
     well as the top, so it had no solid edge to meet the panel with at all.
     It is redrawn as a ground — its own top silhouette carried straight down
     to a solid foot — and this overlap buries that foot. 30% against a foot
     that is 39% of the box, so the overlap can never outrun the solid part.
     A thinner foot did hold at desktop widths but not at 390, where the mask
     is squeezed from 1920 and its foot lands on part-opaque pixels. */
  position:absolute;left:0;right:0;
  bottom:calc(100% - var(--footer-ridge-h) * .30);z-index:0;
  height:var(--footer-ridge-h);
  background-color:var(--footer-top);
          mask-image:url("../assets/art/footer-ridge.svg");
  -webkit-mask-image:url("../assets/art/footer-ridge.svg");
          mask-size:100% 100%;   -webkit-mask-size:100% 100%;
          mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
  pointer-events:none;
}

/* ruled contact cells */
/* The foot of the panel is ruled the way the reference rules it: the columns
   divided from each other by uprights, then one line under the block, the
   sitemap row, another line, and the credit on its own at the bottom. The
   lines are inset by the page gutter rather than run to the edges, so the
   whole foot reads as one ruled block sitting inside the panel. */
.footer_cells{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-inline:var(--gutter);
  border-bottom:1px solid var(--footer-rule);
}
/* The panel carries only two blocks — the four cells and the sitemap — so it
   has to earn its height from the air inside them rather than from a stack of
   content. These are the numbers that do it: the cells take a deep 64 top and
   bottom, and the lines inside a cell sit 12 apart instead of 4, which is what
   stops a two-line address reading as one wrapped line. */
.footer_cell{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-12);
  padding:var(--space-64) var(--space-24);text-align:center;
}
/* between the columns only — never before the first one */
.footer_cell + .footer_cell{border-left:1px solid var(--footer-rule)}
/* One voice through the whole panel: every line the same ivory at the same
   strength, so nothing in it is quieter than anything else. The column labels
   are told apart by weight and letterspacing rather than by colour. */
.footer_cell-label{
  margin-bottom:var(--space-16);
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--ivory);
}
.footer_cell-body{font-size:.9375rem;line-height:1.55;color:var(--ivory);transition:color var(--dur) var(--ease)}
a.footer_cell-body:hover{color:var(--peach)}
.footer_cell-body.is-muted{margin-top:var(--space-4);font-size:.8125rem}
.footer_socials{display:flex;gap:var(--space-12);margin-top:var(--space-4)}
.footer_socials a{
  display:flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:var(--radius-full);
  border:1px solid rgba(242,242,233,.3);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.footer_socials a:hover{background-color:var(--peach);color:var(--earth);border-color:var(--peach)}
.footer_socials svg{width:1.125rem;height:auto}

/* sitemap + legal */
.footer_bar{
  position:relative;z-index:1;
  /* the links and the credit line are two separate things, not one stack of
     small type — the gap is what tells them apart */
  display:flex;flex-direction:column;align-items:center;gap:var(--space-40);
  padding:var(--space-48) var(--gutter) var(--space-48);
}
/* the second rule of the pair, so the sitemap row is bracketed above and
   below exactly as the reference brackets its links */
.footer_legal{
  width:100%;
  padding-top:var(--space-40);
  border-top:1px solid var(--footer-rule);
}
.footer_sitemap{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-8) var(--space-24)}
.footer_sitemap a{font-size:.8125rem;letter-spacing:.04em;color:var(--ivory);transition:color var(--dur) var(--ease)}
.footer_sitemap a:hover{color:var(--peach)}
/* one line, centred where the copyright line used to sit */
.footer_legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--space-8) var(--space-16);
  /* set as written rather than upper-cased — the wide tracking that went with
     the caps comes off with them */
  font-size:.8125rem;letter-spacing:.01em;
  color:var(--ivory);text-align:center;
}
.footer_legal a{color:inherit;transition:color var(--dur) var(--ease)}
.footer_legal a:hover{color:var(--peach)}

/* Hover rule under every link in the footer bar, drawn the way the top bar
   draws its own: a 1px line that grows out from the left rather than a
   text-decoration that simply appears. currentColor, so it arrives peach along
   with the word it sits under. */
.footer_sitemap a,
.footer_legal a{position:relative}
.footer_sitemap a::after,
.footer_legal a::after{
  content:"";position:absolute;left:0;bottom:-.35rem;
  width:0;height:1px;background-color:currentColor;
  transition:width .3s var(--ease);
}
.footer_sitemap a:hover::after,
.footer_sitemap a:focus-visible::after,
.footer_legal a:hover::after,
.footer_legal a:focus-visible::after{width:100%}

@media screen and (max-width:991px){
  .footer{margin-top:var(--space-64)}
  
  /* two cells to a row here, so the panel gets its height from the extra row
     as well — 48 rather than the desktop 64, or it runs very long */
  .footer_cell{padding:var(--space-48) var(--space-24)}
  .footer_cells{grid-template-columns:1fr 1fr;margin-inline:var(--gutter-tablet)}
  /* two up: the upright belongs between the pair, so only the right-hand cell
     of each row carries it, and the second row is divided by a rule instead */
  .footer_cell + .footer_cell{border-left:0}
  .footer_cell:nth-child(even){border-left:1px solid var(--footer-rule)}
  .footer_cell:nth-child(n+3){border-top:1px solid var(--footer-rule)}
  /* contain already handles the deeper panel — it picks the axis that runs
     out first — so there is nothing to override here any more */
  .footer_bar{padding-left:var(--gutter-tablet);padding-right:var(--gutter-tablet)}
}
@media screen and (max-width:767px){
  .footer_cells{grid-template-columns:1fr;margin-inline:var(--gutter-mobile)}
  /* Everything below is the phone's own set of numbers, not the desktop's.

     The desktop footer earns its height from air because it carries only two
     blocks across four columns. Stacked, that same air is paid four times over
     and the panel ran to 1133px — most of a phone screen of nothing but
     contact details. These are the values that close it up without letting the
     four cells run into each other. */
  .footer_cell{padding:var(--space-20) var(--gutter-mobile);gap:var(--space-4)}
  .footer_cell-label{margin-bottom:var(--space-8)}
  .footer_cell-body{line-height:1.45}
  /* one up: nothing to divide sideways, so every cell after the first is
     separated by a rule instead */
  .footer_cell:nth-child(even){border-left:0}
  .footer_cell:nth-child(n+2){border-top:1px solid var(--footer-rule)}
  /* the sitemap is a wrapped list of twelve short links; it needs the row gap
     far less than the desktop's two-block stack does */
  .footer_bar{
    gap:var(--space-20);
    padding:var(--space-24) var(--gutter-mobile);
  }
  .footer_sitemap{gap:var(--space-8) var(--space-16)}
  .footer_legal{padding-top:var(--space-20)}
}

/* A short landscape tablet has less fold to share between the copy and the
   booking bar, so the copy sits a little higher there — 52% down the aperture
   instead of 58%. Guarded on aspect and kept out of the max-width:991px block
   above: unguarded it also caught portrait phones, whose --copy-drop is set
   from the portrait cut's own maths and which come earlier in the file. */
@media screen and (max-width:991px) and (min-aspect-ratio:1/1){
  .hero_scrollable-top{--copy-drop:calc(52vh + .48 * var(--sticky-pad) - .24 * var(--cut-w))}
}


/* ==========================================================================
   ILLUSTRATIONS
   The four botanical drawings are ornament, not content: they sit behind
   their section, take no pointer events, and carry no alt text. Each is
   anchored to the corner it was drawn for and sized in vw, so it scales with
   the page rather than stepping at breakpoints. Sections that hold one clip
   their overflow, otherwise a drawing hung off the edge widens the document
   and gives the whole page a horizontal scrollbar.
   ========================================================================== */
.art{
  position:absolute;z-index:0;height:auto;
  pointer-events:none;user-select:none;
}
/* Mirrored rather than redrawn, so one file can open from either hand. */
.art.is-flip{transform:scaleX(-1)}

/* --- the band the four lines sit in ------------------------------------- */
.transition_body{overflow:hidden}
/* the copy has to come back over the drawings it is laid on */
.transition_body > .padding-global{position:relative;z-index:1}
.art--branch{top:0;left:0;width:clamp(8rem,16vw,19rem);opacity:.85}
/* These two grow upward, unlike the frond they replace, so they stand on the
   foot of the band rather than hanging from its head. Flush to their corner,
   not hung past it: the band clips its own overflow, and anything pushed
   outside reads as a drawing cut off against the edge rather than tucked into
   it. The tall one takes the right hand the palm had; the lower one balances
   the left, well clear of the branch above it. */
.art--plant-top{right:0;bottom:0;width:clamp(6rem,11vw,13rem);opacity:.6}
.art--plant-low{left:0;bottom:0;width:clamp(4rem,7vw,8.5rem);opacity:.5}

/* --- testimonials: the drawing on the left, the quote keeps the middle --- */
.section_testimonials{overflow:hidden}
.section_testimonials > .padding-global{position:relative;z-index:1}
/* Lifted off the foot of the band and drawn in off their edges, rather than
   sitting flush in the two corners. Flush read as two drawings pinned to the
   frame; standing them in and up lets the ivory carry round each one, and the
   right hand comes in furthest so the pair is not a mirror of itself.

   The section still clips its own overflow, so these stay inside it — nothing
   is hung past an edge where it would read as cut off. */
.art--plant-tall{left:clamp(.75rem,2.5vw,3.5rem);bottom:clamp(2rem,6vw,7.5rem);
                 width:clamp(5rem,10vw,12rem);opacity:.7}
.art--plant-mid {right:clamp(1.5rem,9.5vw,12rem);bottom:clamp(2.5rem,6.5vw,8rem);
                 width:clamp(4rem,7.5vw,9rem);opacity:.6}


/* The drawings are ornament at any width, so on a phone they go smaller and
   fainter still rather than competing with the copy for the fold. */
@media screen and (max-width:767px){
  .art--branch,.art--plant-top{width:7rem;opacity:.45}
  /* the left hand already carries the branch on a phone */
  .art--plant-low{display:none}
  .art--plant-tall{width:5.5rem;opacity:.4}
  /* the right hand is where the arrows sit on a phone, so it comes off */
  .art--plant-mid{display:none}
}


/* ==========================================================================
   BANNER
   The first section on the page. It begins at y=0, not below the bar, so the
   photograph runs up behind the fixed nav and the fold is a whole screen
   rather than a screen minus the bar.

   Height: svh, not vh. On a phone 100vh is the viewport with the browser
   chrome *retracted*, so a vh-tall banner is always taller than what you can
   actually see and the booking bar on its foot starts life below the fold.
   svh is the viewport with the chrome showing — the smallest it ever gets —
   which is the one height that reaches the bottom of the screen and no
   further at every resolution. vh stays first as the fallback.
   ========================================================================== */
.section_banner{
  z-index:1;position:relative;overflow:clip;
  height:100vh;
  height:100svh;
  background-color:var(--earth);
}
/* One rule for both plates: the still and the video are the same box, the same
   crop, and the same place. Source order alone decides which is on top. */
.banner_img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
/* A tall screen shows only a narrow band of the 16:9 clip, and the tiger walks
   a little right of centre, so the band is moved over to keep it in frame. */
@media (max-width:900px){
  .banner_img{object-position:64% 50%}
}
/* Asked for no motion, and the moving plate simply gets out of the way —
   the still underneath is already the same frame, so nothing else changes. */
@media (prefers-reduced-motion:reduce){
  .banner_img.is-motion{display:none}
}
/* Enough shading top and bottom to carry the nav's type and the glass of the
   booking bar; the middle of the picture is left alone. */
.banner_tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(36,51,31,.46) 0%,
    rgba(36,51,31,.08) 30%,
    rgba(36,51,31,.10) 58%,
    rgba(36,51,31,.60) 100%);
}
/* The booking bar keeps the styling it already had; it just measures its
   bottom against the banner now instead of the hero. */
.section_banner .hero_book{bottom:clamp(1rem,3.5vh,2.5rem)}

/* --- the bar while it is over the banner --------------------------------
   Transparent, so the photograph reads as running underneath it, and the
   type inverted to sit on the picture. Everything is a plain colour swap on
   the existing rules, so scrolling past the banner returns the bar to solid
   ivory with no second set of styles to keep in step. */
.nav_component.is-over-banner{
  background-color:transparent;
  border-bottom-color:transparent;
  box-shadow:0 0 0 rgba(36,51,31,0);
}
/* is-scrolled is already on by the time the reader is a few pixels down the
   banner, so the glass has to be called off here too — otherwise it paints
   over the photograph the bar is supposed to be transparent against. */
.nav_component.is-over-banner::before{
  background-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.nav_component.is-over-banner{--nav--text-color:var(--ivory)}
.nav_component.is-over-banner .nav_brand{color:var(--ivory)}
.nav_component.is-over-banner .brand-logo{filter:brightness(0) invert(1)}
/* Nothing here for Book Now. It is .is-secondary.is-nav, which is already a
   solid ochre pill with border-color:transparent, and it reads perfectly well
   against the photograph as it is. The outline that used to be set here was
   written for an outline-style button that this never was, and all it did was
   draw a pale ring around a filled pill. */

/* The bar is fixed and the menu drops out of it, so an open mobile menu has
   to have its own ground back — a transparent bar would leave the links on
   the photograph. */
.nav_component.is-over-banner.is-menu-open{
  background-color:var(--bg);
  --nav--text-color:#24331F;
}
.nav_component.is-over-banner.is-menu-open .brand-logo{filter:none}
.nav_component.is-over-banner.is-menu-open .nav_brand{color:var(--nav--text-color)}

/* On a phone the four fields stack, which makes the bar far too tall to sit
   on the foot of one screen. It goes back into the flow under the banner. */
@media screen and (max-width:767px){
  .section_banner{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
  .section_banner .hero_book{
    position:relative;left:auto;bottom:auto;transform:none;
    width:calc(100% - 2 * var(--gutter-mobile));
    margin:0 auto var(--space-24);
  }
}

/* ==========================================================================
   NAV — the overflow menu
   Six destinations earn a place in the bar; the other eight hang off a button
   at the end of it. Above 991 that button opens a dropdown panel. Below 991
   the bar is already a full-screen drawer, so the button gets out of the way
   and its list simply joins the drawer's own — the drawer carries all
   fourteen, which is why the panel is authored as flow content and only
   lifted out of the flow on the desktop side.
   ========================================================================== */
.nav_more{position:relative;display:flex;align-items:center}
.nav_more-toggle{
  display:flex;flex-direction:column;justify-content:center;
  gap:5px;width:1.25rem;height:1.25rem;
  padding:0;border:0;background:none;cursor:pointer;
  /* the bar's own type colour, not inherit — inherit resolves to the document
     text colour, which left the icon dark green and all but invisible while
     the bar is transparent over the banner photograph */
  color:var(--nav--text-color);
  /* the panel slides out underneath it, so the cross has to stay on top */
  position:relative;z-index:130;
}
/* Open, the cross stands on the panel's own paper rather than on the bar, so it
   takes the panel's ink whatever the bar behind it is doing. */
.nav_more.is-open .nav_more-toggle{color:var(--earth)}
.nav_more-line{
  display:block;width:100%;height:1.5px;background-color:currentColor;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
/* the three rules fold into a cross while the panel is open */
.nav_more.is-open .nav_more-line.is-1{transform:translateY(6.5px) rotate(45deg)}
.nav_more.is-open .nav_more-line.is-2{opacity:0}
.nav_more.is-open .nav_more-line.is-3{transform:translateY(-6.5px) rotate(-45deg)}

/* A standing panel down the left edge rather than a dropdown hung off the
   button: the mark at its head, the ten destinations set at reading size down
   the middle, and the address at its foot. Fixed to the viewport, so it is the
   full height of the window however far down the page the reader is. */
.nav_more-panel{
  position:fixed;inset:0 auto 0 0;z-index:120;
  display:flex;flex-direction:column;align-items:center;
  width:clamp(20rem,30vw,28rem);max-width:88vw;
  /* clears the bar, so the cross at the top of it has room of its own */
  padding:calc(var(--nav-h) + 2.25rem) var(--space-40) var(--space-48);
  background-color:var(--nav--mobile-background);
  border:0;
  box-shadow:.75rem 0 3rem -1rem rgba(61,52,40,.18);
  text-align:center;
  /* a tall window shows all ten and the address at once; a short one scrolls
     rather than pushing the address off the bottom */
  overflow-y:auto;overscroll-behavior:contain;
  /* visibility as well as the transform: a panel merely slid off-screen is
     still in the tab order */
  visibility:hidden;transform:translateX(-100%);
  transition:transform .5s var(--ease), visibility 0s linear .5s;
}
.nav_more.is-open .nav_more-panel{
  visibility:visible;transform:none;
  transition:transform .5s var(--ease), visibility 0s;
}
.nav_more-brand{display:block;width:clamp(4.5rem,6vw,6.5rem);margin-bottom:var(--space-40)}
.nav_more-brand img{width:100%;height:auto;display:block}
.nav_more-list{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.5rem,1.4vh,1.15rem);width:100%;
}
/* Display face at reading size, not the bar's caption type — in a panel this
   wide the old 13px uppercase read as a utility list rather than as the menu. */
.nav_more-link{
  padding:0;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.0625rem,1.35vw,1.375rem);
  line-height:1.25;letter-spacing:.06em;text-transform:uppercase;
  color:var(--earth);white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
/* Set the way the footer sets its small print, and held to the foot of the
   panel so it stays put whether the list is ten items or four. */
.nav_more-address{
  margin-top:auto;padding-top:var(--space-40);
  font-size:.75rem;line-height:1.9;letter-spacing:.14em;text-transform:uppercase;
  color:var(--earth);opacity:.55;
}
/* Underlined on the text itself, not drawn as a bar across the link.

   These links fill the panel so the whole row is clickable, which meant an
   absolutely-positioned rule at the link's own width ran well past the end of
   the word — a line with nothing over it. text-decoration takes the width of
   the glyphs and nothing more, and the row stays clickable end to end. */
.nav_more-link:hover,
.nav_more-link:focus-visible{
  color:var(--ochre);
  text-decoration:underline;
  text-underline-offset:.35em;
  text-decoration-thickness:1px;
}

/* Over the banner the bar is transparent and its type inverted; the panel is
   its own ivory block, so it keeps the dark type it always had. */
.nav_component.is-over-banner .nav_more-panel{--nav--text-color:#3D3428}

@media screen and (max-width:991px){
  /* display:contents on BOTH the wrapper and the panel. It was only on the
     wrapper, so the panel stayed a flex column of its own and its four links
     were laid out inside it rather than becoming rows of the drawer — six
     spacious ruled rows followed by four cramped lines with no rules, which is
     what made the drawer read as two different menus stuck together. */
  .nav_more{display:contents}
  /* visibility must still be reset here. display:contents removes the panel's
     own box but not its inherited visibility, and the desktop panel is hidden
     until it opens — without this the four links are in the drawer's flow and
     invisible. */
  .nav_more-panel{display:contents;visibility:visible;opacity:1}
  .nav_more-list{display:contents}
  /* The drawer already carries the lockup in the bar above it and the address
     in the footer below, so the panel's own head and foot would be a second
     copy of each. */
  .nav_more-brand,.nav_more-address{display:none}
  .nav_more-toggle{display:none}
  /* Identical to .nav_menu_link, so all thirteen rows read as one list. */
  .nav_more-link{
    width:100%;padding:.75rem 0;text-align:left;
    border-top:1px solid var(--nav--border);
    font-family:var(--font-display);font-size:1.125rem;font-weight:500;
    line-height:1.2;letter-spacing:.08em;
    color:var(--earth);
    text-decoration:none;
  }
}


/* ==========================================================================
   RESPONSIBILITY  — the ESG wheel, between Dining and the Gallery
   Three columns on a desktop: the nine commitments split five and four either
   side of the ring. The ring is an inline SVG on a 720 square viewBox, so it
   is one asset-free element that scales with its column and keeps real text.
   ========================================================================== */
.section_esg{
  z-index:4;position:relative;
  background-color:var(--bg);color:var(--text);
  /* 50 a side rather than the page's usual --section-y of 60. Both joins around
     this section are meant to total 100, and a join is the section above's
     bottom padding plus the one below's top padding — so each half is 50. */
  padding-top:3.125rem;padding-bottom:3.125rem;
}
/* The gallery's own top padding is --section-y plus 20, which would have made
   this join 130. Reset to 50 only where it follows this section, so the
   gallery's spacing everywhere else is untouched. */
.section_esg + .section_gallery{padding-top:3.125rem}
.esg_head{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--rhythm-heading-body);text-align:center;
  max-width:48rem;margin:0 auto;
}

/* 1fr for each column of type and a fixed-ish middle, so the ring stays round
   and the two lists take whatever is left rather than the ring shrinking. */
.esg_layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(20rem,34rem) minmax(0,1fr);
  align-items:center;gap:clamp(1.5rem,3vw,3.5rem);
  margin-top:var(--space-64);
}
.esg_wheel{width:100%}
.esg_wheel svg{width:100%;height:auto;display:block}

.esg_col{display:flex;flex-direction:column;gap:clamp(1.25rem,2.4vw,2.25rem)}
/* The lists face the ring: the left column is set ragged-left so its lines end
   at the wheel, the right column ragged-right so its lines begin at it. */
.esg_col.is-left{text-align:right}
.esg_col.is-right{text-align:left}
.esg_item-title{
  font-family:var(--font-display);
  font-size:1.375rem;font-weight:500;line-height:1.2;
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--green);
}
.esg_item-text{
  margin-top:.5rem;
  font-size:1rem;line-height:1.55;color:var(--text);
}

/* type inside the ring — set here rather than as attributes so it scales with
   the sheet and stays in one place */
.esg_seg-label{
  font-family:var(--font-body);
  font-size:12.5px;font-weight:500;letter-spacing:.07em;
  text-anchor:middle;dominant-baseline:middle;
}
.esg_pillar{
  font-family:var(--font-body);
  font-size:14px;font-weight:500;letter-spacing:.26em;
}
.esg_hub{
  font-family:var(--font-display);
  font-size:30px;line-height:1.05;text-anchor:middle;
}

/* Below the desktop grid the ring goes first and the nine read as one list
   under it, both columns left-aligned — a 320px-wide ring cannot carry
   nine labels legibly, so the wheel becomes the illustration and the list
   becomes the content. */
@media screen and (max-width:991px){
  .esg_layout{
    grid-template-columns:1fr;justify-items:center;
    gap:var(--space-40);margin-top:var(--space-48);
  }
  .esg_wheel{order:-1;max-width:30rem}
  .esg_col{width:100%;max-width:34rem}
  .esg_col.is-left,.esg_col.is-right{text-align:left}

}
@media screen and (max-width:767px){
  .esg_item-title{font-size:1.25rem}
  .esg_wheel{max-width:100%}
}

/* ==========================================================================
   Mobile corrections — last in the file on purpose
   Each of these lost to a later rule when it was written further up: the
   gallery join to .section_esg + .section_gallery, and the card's spacing to
   the flex gap on .travel_grid-item-bottom-line. Putting them at the end is
   what makes them hold.
   ========================================================================== */
@media screen and (max-width:767px){
  /* 60 between the sections, split evenly, rather than 50 + 50 = 100.
     .section_esg, not #responsibility — the id is what the page calls it, the
     class is what the stylesheet styles it by, and only the class matches. */
  .section_esg{padding-bottom:30px}
  .section_gallery,
  .section_esg + .section_gallery{padding-top:30px}

  /* The line carries a 32px flex gap, which was adding to the margins below
     and making them 40 and 48. Zero here, so the margins are the whole story. */
  .travel_grid-item-bottom-line{gap:0}
  .travel_grid-item-bottom-text{margin-top:.5rem}      /* heading → copy 8 */
  .travel_grid-item-bottom-head .button{margin-top:0}  /* no space above a button */

  /* One body size everywhere on a phone. .text-size-tiny was 14 against
     .text-size-medium's 17, so the same kind of paragraph read at two
     different sizes depending on which section it sat in. Both are 16/24 now,
     which is what COMMON-GUIDELINES gives for mobile body copy. */
  .text-size-medium,
  .text-size-regular,
  .text-size-tiny{font-size:1rem;line-height:1.5}

  /* The four route stops were the smallest type on the page — a 20px heading
     is the guidelines' mobile H5, and the copy now matches every other
     paragraph. */
  .journey_item .heading-style-h5{font-size:1.25rem;line-height:1.4}
  .journey_item-content{gap:.5rem}
}

/* --------------------------------------------------------------------------
   The dusk scene's treeline on a phone
   Its height follows its width, and at 390 that leaves the drawing 116px tall
   in an 844px frame — 14% of the height it is given, against 53% on a desktop,
   which is the empty space above it.

   Scaled up 40% rather than stretched: width 140% with a matching negative
   offset keeps the artwork's proportions and lets the extra bleed off both
   sides, which .numbers_forest-wrap already clips. Setting a taller height
   directly would have squashed the mountains.
   -------------------------------------------------------------------------- */
@media screen and (max-width:767px){
  /* max-width:none as well: the global img rule caps every picture at 100% of
     its container, which held this to 390 and let only the offset through. */
  .numbers_forest{width:140%;max-width:none;left:-20%}
}

/* Dusk section on a phone: 76px between the heading and the copy and 40 under
   the copy, on a block that is three short things. Halved, and the h2's own
   20px bottom padding comes off here so it is not counted twice. */
@media screen and (max-width:767px){
  .facilities{margin-top:4vh}
  .numbes_abs .heading-style-h2{padding-bottom:0}
  .facilities_head{gap:1rem}
}

/* The sticky Book Now only — not the card buttons, which keep the shared
   width. 162px read as a small pill floating over a full-width footer; 232
   gives it the weight of the page's one standing call to action. */
@media screen and (max-width:767px){
  .book-sticky{min-width:14.5rem}
}

/* --------------------------------------------------------------------------
   Mobile rhythm, as marked: a heading sits 20 above what it introduces, and
   one section sits 60 from the next. The h2's own 20px bottom padding is
   cleared wherever a margin already carries that gap, so it is never doubled.
   -------------------------------------------------------------------------- */
@media screen and (max-width:767px){
  .gallery_head{margin-bottom:20px}
  .gallery_head .heading-style-h2{padding-bottom:0}

  /* gallery → testimonials: 30 and 30 */
  .section_gallery{padding-bottom:30px}
  .section_testimonials{padding-top:30px}

  /* heading → quote was 64: a 32 margin and the inner's own 32 gap, one on top
     of the other. Both come down so the pair reads as the same 20. */
  .testimonials_inner{gap:1.25rem}
  .testimonials_heading{margin-bottom:0;padding-bottom:0}
}

/* The gallery heading's margins were collapsing straight out of its
   .padding-global wrapper, so the wrapper ended above the heading did and the
   marquee sat 20px OVER the type instead of 20px under it. flow-root contains
   them, and the 20 then means what it says. */
@media screen and (max-width:767px){
  .section_gallery > .padding-global{display:flow-root}
}

/* Stacked on a phone, the two commitment lists read as one column of nine, so
   the grid's own 40px row gap surfaced as a wider join between the fifth and
   sixth commitments than between any other pair. Match the row gap to the item
   gap, and let the wheel carry its own separation so only that join changes. */
@media screen and (max-width:991px){
  /* Asked for on a phone: 60 above the heading, 20 under it, 20 before the
     wheel. Measured before: 50 / 24 / 48. The section's own top padding sets
     the first, the head's flex gap the second, and the layout's top margin the
     third — the 40 that comes off there is the biggest of the three. */
  .section_esg{padding-top:60px}
  .esg_head{gap:20px}
  .esg_layout{margin-top:20px}
  .esg_layout{row-gap:clamp(1.25rem,2.4vw,2.25rem)}
  .esg_wheel{margin-bottom:calc(var(--space-40) - clamp(1.25rem,2.4vw,2.25rem))}
}

/* --------------------------------------------------------------------------
   Dusk scene on a phone: give the illustration a real share of the screen, and
   let the copy travel up behind the ridge the way it does on the desktop.

   The treeline was drawn 162px tall on a 844px screen, a fifth of the fold, so
   the scene read as a band of empty sky with a strip of green at the foot. At
   300% the artwork stands 348px tall and paints from 595 down, so the mountains
   themselves hold 30% of the screen — the file carries a third of its own
   height as empty sky above the ridge, which is why the box has to be taller
   than the figure the eye is judging. It is scaled, not stretched: the 3.36:1
   of the file is untouched and the extra width bleeds off both sides, which
   .numbers_forest-wrap already clips.

   The copy then has to start low enough to be behind the new ridge. Two things
   pull against each other here: the copy has to sit low to be tucked behind the
   mountains, and high to keep the sky between the torn edge and the heading
   short. The lever is the ridge, not the copy - 340% is as far as the artwork
   goes before the peak crops out of frame and the pines turn coarse, and it
   brings the painted ridge up to 562 of 844. Heading top to button foot is only
   296, so at 38vh the button starts 55px under the mountains with 17px less sky
   above the heading than 40vh gave.
   -------------------------------------------------------------------------- */
@media screen and (max-width:767px){
  /* Held to the left rather than centred. At this zoom the centre of the
     artwork is its palest, flattest stretch; the left holds the pine stand and
     the one real peak, which is what makes the scene read at all. */
  .numbers_forest{width:340%;max-width:none;left:-8%}
  .numbes_abs{padding-top:38vh}
}

/* The attractions list ended 140px above the torn edge of the dusk section: the
   canvas the items are laid out on carried 80px of its own padding under the
   last item and the section's 60px sat under that. The section padding is
   already the 60 the join wants, so the canvas gives up all of its own. */
@media screen and (max-width:767px){
  .journey_canvas{padding-bottom:0}
}

/* Dining on a phone: 103px of ivory between the torn edge and the photograph
   against 60px under the panel. The lead exists because the torn edge dips
   toward the panel at its lowest point, but on a phone the strip is 59px deep
   rather than 216, so the dip it was compensating for is a quarter of the size.
   Dropping the lead leaves the inset, and the band above the photograph then
   matches the one below it. */
@media screen and (max-width:767px){
  .section_offers{--offers-lead:0rem}
}

/* --------------------------------------------------------------------------
   The band between the tiger and the jharokha, phone only.

   Upright, the drawn park is almost entirely behind the arch, so the fold
   under the banner was bare ivory. This puts the same drawing back into that
   band - its left panel, where the leopard, the tree and the little dome are,
   because the middle of the drawing is deliberately empty (that is where the
   arch stands on the desktop) and would have shown as nothing at all.

   Cropped by a window rather than positioned by a negative offset: the drawing
   has to be 333% wide before its left panel fills 390px, which makes it 595
   tall against a 200px band, and the overhang would otherwise ride up over the
   video. The image is anchored bottom-left inside the window, so what shows is
   the foot of that panel.

   It rides .hero_scrollable, which scrolls, not .hero_sticky, which pins - and
   z-index 1 puts it under the mask's 9. So the jharokha's sheet takes it as it
   goes past, rather than it sliding across the open aperture.
   -------------------------------------------------------------------------- */
.hero_toile-band{display:none}
@media screen and (max-width:767px){
  /* NOTE: this band and the .is-crown copy inside the mask paint the SAME
     drawing over each other. The portrait svg is overflow:visible, so that
     copy spans canvas -1338..276 and reaches well above the svg's own box.
     Above the join the ink is therefore doubled and below it single, which is
     the faint step across the drawing. Hiding this band removes the step but
     leaves the top blank, because the crown's ink does not reach that high. */
  /* Off: there were two of the same drawing on a phone. This band and the
     .is-crown copy inside the mask painted the identical rectangle - both
     measured at -241..508 and 1638 wide - because the portrait svg is
     overflow:visible and that copy is not clipped to it. The ink was doubled
     where this band's box reached and single below, and this band's clip edge
     drew the line across the animal. One drawing now; the in-mask one, which
     is the copy that carries on behind the arch. */
  /* Two of the same drawing were showing on a phone: this original portrait
     toile, sat on the canvas floor at y=736, and the .is-crown copy that
     spans the canvas. One animal, so the floor one comes off and the crown
     carries it. */
  /* Asked for: no top padding on the pinned fold on a phone. */
  .hero_sticky{padding-top:0}
  .hero_toile:not(.is-wide):not(.is-crown){display:none}
  .hero_toile-band{
    display:none;z-index:1;position:absolute;top:0;left:0;right:0;
    height:12.5rem;overflow:hidden;opacity:.45;pointer-events:none;
    /* The fade was 62% to 98%, which washed out the bottom third of the band
       and left it reading as blank paper under the drawing.

       Its purpose was to stop the drawing's own ground line — which is dead
       straight — ruling a hard edge across the screen. That line now sits
       below the band entirely (see the image's offset), so the band's foot
       cuts through foliage instead and there is no straight edge to hide.
       What is left is a few pixels of softening on the very last row. */
    /* Fades in at the TOP, not the bottom. Its foot is no longer an edge -
       the in-mask copy carries the drawing on below it - but its head was
       meeting the photograph on a hard cut: 141 levels of step in a single
       row, measured. And the crop opens on a thin part of the drawing, so the
       first 40% of the band was pale and sparse (13-30% inked) before the
       artwork became dense (54-88%).

       One gradient answers both: the drawing now arrives out of the
       photograph instead of starting against it, and the sparse rows are the
       fade rather than a washed-out strip. */
    /* No fade at the head. Fading here uncovers the pale page ground rather
       than the photograph above, so it washed the drawing's first rows out -
       the white strip - instead of blending anything. */
  }
  /* Dropped below the band's foot so the drawing's own empty ground - the
     sparse strip it ends on - falls outside the band, and what shows is the
     dense part: the plants and the cat. Ink now reaches both edges. */
  .hero_toile-band img{
    /* -8, not -4: at 420% the drawing stands taller than the 200px band, and at
     -4 the window fell on the animal's legs. This lifts it to rows 56-83%,
     which carries its body. Cropping a wallpaper motif reads as wallpaper;
     a pattern that visibly runs out reads as a mistake. */
  position:absolute;left:0;bottom:-8rem;display:block;
    /* 420, not 333. At 333 the window covered the drawing's left 30%, and its
     last tenth carries 5% ink — the wallpaper visibly ran out before the right
     edge of the screen. At 420 the window is the densest 24% instead: measured
     across ten columns, the weakest went from 4.8% ink to 55%. */
  width:420%;max-width:none;height:auto;
  }
}

/* The dusk section's motion, phone, matched to the desktop.

   Measured at 1600x900: at rest the heading sits 362..464 against a painted
   ridge at 472, so it is fully readable, while the paragraph starts at 716 and
   the button at 837 - both a long way behind the mountains. Scrolling lifts
   them out. The whole effect is one number, .facilities' top margin, which is
   28vh on the desktop and had been cut to 4vh here, so all three arrived
   together and nothing ever came out from behind anything.

   48vh, not 28: the phone's ridge sits at 563 of 844 rather than 472 of 900,
   so the paragraph has further to fall before it is behind the treeline. This
   puts it 195px under the ridge, against the desktop's 244 on a taller screen.
   The heading does not move. */
@media screen and (max-width:767px){
  .facilities{margin-top:48vh}
}

/* Taking the slack out of the dusk section on a phone, without giving up the
   reveal.

   Two different lines matter in the artwork. The tallest pine tip is where it
   first paints, at 562; the line that actually hides a paragraph is where it
   goes opaque right across the text column, and that is 682. The paragraph has
   to start at or below 682 or its first line shows through the branches.

   The heading bottom sits at 384, so the smallest gap that still hides the
   paragraph is 298px, not the 405 it was carrying. 35vh is that number, and the
   copy block reaches its foot at 879 rather than 1027.

   The wrapper can then give some of that back, but not as much as the copy
   saved. What limits it is not the copy at all: the dining section is pulled up
   over the pinned dusk by a fixed negative margin, so a shorter wrapper brings
   its torn edge in earlier. At 200vh that edge cut straight through the button
   at every screen size tested. 230vh is the shortest that still clears, by
   110px at 360x640 and more everywhere else. */
@media screen and (max-width:767px){
  /* The heading was floating 178px clear of the treeline with sky above it and
     sky below it - two empty bands rather than one. On the desktop it sits 8px
     off the ridge, so the fold reads as a horizon with a title on it. Same
     here: 58vh puts its foot at 553 against a first paint of 562. */
  .numbes_abs{padding-top:58vh}
  /* Which lets the gap collapse from 298 to 130, because the heading now ends
     just above the treeline instead of a long way above it. The paragraph still
     starts at 683, on the line where the drawing goes opaque. */
  .facilities{margin-top:15.5vh}
  /* 230vh is the floor, not a preference. Two things hold it there. Below
     205vh the pin releases while the paragraph is still mid-screen, so the
     mountains slide out from under it - at 161vh the treeline was gone
     entirely with the copy still at 366. And the dining section's torn edge,
     pulled a viewport up over the pinned dusk, reaches the button: 215vh
     leaves only 10px of clearance at 360x640, 230 leaves 107. */
  .numbers_wrapper{height:230vh}
}

/* --------------------------------------------------------------------------
   The four attractions on a phone: the drawn line comes back, and the cards
   step left and right along it.

   Stacked and centred there was nothing for a line to thread, which is why the
   path was dropped here in the first place. Narrowing the card to 17rem leaves
   86px of swing between a left card and a right one, which is enough for the
   curve to read without the photographs getting small.

   The cards alternate in the desktop order - right, left, right, left - and
   the line sits behind them at z-index 5 against the cards' 7, so it passes
   under each photograph the way it does on the desktop.

   The box is placed against measured positions rather than guessed ones: the
   heading ends at 14% of the canvas and the button under it at 16%, and the
   four photographs centre on 26.9 / 48.0 / 68.1 / 88.5. Those hold to within
   a percent from 360 up to 767, so 18% down and 84% tall puts the curve's four
   turns on the four photographs at every width in between.
   -------------------------------------------------------------------------- */
.journey_path-mob{display:none}
@media screen and (max-width:767px){
  .journey_path-desk{display:none}
  .journey_path-mob{display:block}
  /* Runs from just under the heading to the button at the foot. Only the head
     of the line fades: it now ends ON the button, so a fade at the foot would
     eat the arrival. */
  .journey_path{
    display:block;left:0;width:100%;top:14%;height:85%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 5%);
  }
  /* above the line, so the trail arrives behind the button rather than over it */
  .journey_cta{position:relative;z-index:8}
  /* Capped, or the composition comes apart at the top of the range: at 767 the
     auto margins threw one card to 479 and the next to 16 while the line, which
     is drawn in its own 390-wide box, stayed near the middle. Bounded to 26rem
     the cards and the curve keep the same proportions at every width. */
  /* Flex, so the button can be ordered to the foot of the list. In source it
     sits between the heading and the cards, which is where the desktop wants
     it - the desktop places it by coordinates, and upright it would otherwise
     land directly under the heading. The map and the line are absolute, so
     they are out of flow and the flex container does not touch them. */
  .journey_canvas{display:flex;flex-direction:column;max-width:26rem;margin-inline:auto}
  .journey_heading{order:1}
  .journey_item.is-1{order:2}
  .journey_item.is-2{order:3}
  .journey_item.is-3{order:4}
  .journey_item.is-4{order:5}
  .journey_cta{order:6;margin-top:3.5rem}
  /* The badge overhangs the card by 20px, which put it past the right edge of
     the screen on the two cards that step right. Half that here. */
  .journey_item-number{left:auto;right:-.5rem}
  /* 3.5rem literal, not a token: there is no --space-56, and an undefined
     variable does not fall back to the earlier declaration - it makes the whole
     shorthand invalid at computed-value time, which zeroed the auto margins and
     the gap between cards along with it. */
  .journey_item{max-width:17rem;margin:3.5rem auto 0}
  /* Offset with left, not transform: these cards are GSAP reveal targets and it
     animates transform, so a translateX here would be wiped on first paint. */
  .journey_item.is-1,.journey_item.is-3{left:2.75rem}
  .journey_item.is-2,.journey_item.is-4{left:-2.75rem}
}

/* ==========================================================================
   PHONE SPACING — the last word
   --------------------------------------------------------------------------
   COMMON-GUIDELINES §4: section → section 60, as 30 bottom + 30 top; heading →
   paragraph 20; paragraph → button 20.

   This sits at the end of the sheet on purpose. Several sections set their own
   padding rather than reading --section-y, and a handful of equal-specificity
   rules further up already touch the same properties — with equal specificity
   the last rule wins, so this is the only place the numbers can be stated once
   and be certain to hold.
   ========================================================================== */
@media screen and (max-width:767px){
  /* Dining's bottom padding is --offers-inset, not --section-y, which is why
     the join into Responsibility measured 120 while every other join was 60. */
  :root{--offers-inset:1.875rem}                    /* 30 */

  .section_esg{padding-top:1.875rem;padding-bottom:1.875rem}
  .section_gallery,
  .section_esg + .section_gallery{padding-top:1.875rem}

  /* Paragraph → button is 20 and the parent's row-gap already provides it.
     This margin added a second 20 on top, so the measured distance was 40.
     There is an identical block earlier in this file; both are zeroed, and
     this later one is the one that was actually winning. */
  .button,
  .travel_intro .button,
  .journey_heading .button,
  .offers_body .button,
  .facilities_head .button,
  .page-cta .button,
  .travel_grid-item-bottom-head .button{margin-top:0}

  .heading-style-h2{padding-bottom:0}
  .esg_head{gap:1.25rem}                            /* heading → paragraph 20 */
}


/* ==========================================================================
   Two more phone spacings, stated last so they hold
   ========================================================================== */
@media screen and (max-width:991px){
  /* Wheel → the nine commitments. It was 40 between the boxes: a 20 row gap
     plus a 20 margin under the wheel, one on top of the other. The ring also
     carries its own inset inside its square viewBox, which reads as more space
     again, so 40 measured closer to 56 on screen. The margin goes; the row gap
     alone is the join. */
  .esg_wheel{margin-bottom:0}

  /* Explore all experiences: 20 above it rather than 48. Below 992 the button
     leaves the drawn path's terminus and returns to the flow, so this is a
     plain top margin rather than the absolute placement it has on a desktop. */
  .journey_cta{margin-top:1.25rem}
}

/* --------------------------------------------------------------------------
   One hamburger, two places.

   The bar's own "more" toggle on the desktop is three equal bars, 20 wide and
   1.5 tall, square ended, 5px apart. The phone drawer button had drifted into a
   different mark: staggered widths of 11, 16 and 21, 2px tall, fully rounded
   and 7px apart. Same icon, two designs.

   These are the desktop's numbers exactly. The 44px tap target is untouched -
   it is the box around the bars that makes the target, not the bars.

   The open cross has to follow: with 1.5px bars 5px apart the stack is 14.5
   tall and the outer bars sit 6.5 from the middle, not the 8 the old geometry
   needed.
   -------------------------------------------------------------------------- */
@media screen and (max-width:991px){
  .nav_button-content{gap:5px;width:20px;height:auto}
  .nav_button-line,
  .nav_button-line.is-1,
  .nav_button-line.is-2,
  .nav_button-line.is-3{width:20px;height:1.5px;border-radius:0}
  .nav_component.is-menu-open .nav_button-line{width:20px}
  .nav_component.is-menu-open .nav_button-line.is-1{transform:translateY(6.5px) rotate(45deg)}
  .nav_component.is-menu-open .nav_button-line.is-3{transform:translateY(-6.5px) rotate(-45deg)}
}


/* ==========================================================================
   ROUND 6 (client, 2026-10-30) - homepage reading blocks on a phone
   The Where The Jungle section already sets its copy to the gutter; the
   other section heads now do the same, so the page has one left edge.
   Copy laid over a photograph (hero, room cards) stays centred.
   ========================================================================== */
@media screen and (max-width:767px){
  .travel_intro-inner,.journey_heading,.gallery_head,.esg_head{align-items:flex-start;text-align:left}
  .journey_heading .heading-style-h2.text-align-center{text-align:left}
  .offers_body{align-items:flex-start;text-align:left}
  .esg_head{margin-inline:0}
}


/* Round 7 (client, 2026-10-30): the fort photograph is a tall frame that is
   mostly sky; anchor it to the building so every crop shows the gateway. */
img[src$="fort.webp"]{object-position:50% 92%}


/* ==========================================================================
   ROUND 7d (client, 2026-10-30) - hero video controls, every device
   ========================================================================== */
.hero_vid{
  position:absolute;z-index:13;
  right:max(var(--gutter), calc((100% - 62rem) / 2));
  bottom:calc(20px + 129px + 16px);           /* the booking bar's top, plus 16 */
  display:flex;align-items:center;gap:12px;color:var(--ivory,#F2F2E9);
}
.hero_vid-toggle{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,28,16,.45);border:1px solid rgba(242,242,233,.45);color:inherit;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background-color var(--dur,.3s) var(--ease,ease),border-color var(--dur,.3s) var(--ease,ease);
}
.hero_vid-toggle:hover,.hero_vid-toggle:focus-visible{background:rgba(20,28,16,.7);border-color:currentColor}
.hero_vid-toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.hero_vid-toggle svg{width:16px;height:16px}
.hero_vid-toggle .is-play,.hero_vid-toggle.is-paused .is-pause{display:none}
.hero_vid-toggle.is-paused .is-play{display:block}
.hero_vid-bar{display:flex;align-items:center;gap:10px;height:44px}
.hero_vid-seek{
  -webkit-appearance:none;appearance:none;width:clamp(96px,11vw,160px);height:24px;margin:0;
  background:transparent;cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.hero_vid-seek::-webkit-slider-runnable-track{
  height:2px;border-radius:2px;
  background:linear-gradient(to right,currentColor var(--p,0%),rgba(242,242,233,.35) var(--p,0%));
}
.hero_vid-seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;border-radius:50%;background:currentColor;border:0}
.hero_vid-seek::-moz-range-track{height:2px;border-radius:2px;background:rgba(242,242,233,.35)}
.hero_vid-seek::-moz-range-progress{height:2px;border-radius:2px;background:currentColor}
.hero_vid-seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:currentColor;border:0}
.hero_vid-seek:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.hero_vid-time{font-size:.75rem;letter-spacing:.06em;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.5);white-space:nowrap}
/* a phone: the booking bar becomes the sticky Book Now, so the controls sit
   above that instead, and the clock gives way to the bar */
@media screen and (max-width:767px){
  .hero_vid{right:var(--gutter);bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .hero_vid-time{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero_vid{display:none}
}


/* ==========================================================================
   ROUND 8 (client, 2026-10-31) - the video controls span the booking bar
   ========================================================================== */
.hero_vid{
  left:max(var(--gutter), calc((100% - 62rem) / 2));
  right:max(var(--gutter), calc((100% - 62rem) / 2));
  bottom:calc(clamp(1rem,3.5vh,2.5rem) + 129px + 12px);   /* the bar's top, plus 12 */
  gap:16px;
}
.hero_vid-toggle{order:1;flex:none}
.hero_vid-bar{order:2;flex:1;min-width:0;gap:16px}
.hero_vid-seek{flex:1;width:auto;min-width:0}
.hero_vid-seek::-webkit-slider-runnable-track{height:3px}
.hero_vid-seek::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5.5px}
.hero_vid-seek::-moz-range-track,.hero_vid-seek::-moz-range-progress{height:3px}
.hero_vid-seek::-moz-range-thumb{width:14px;height:14px}
.hero_vid-time{font-size:.8125rem}
@media screen and (max-width:767px){
  .hero_vid{left:var(--gutter);right:var(--gutter);bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .hero_vid-time{display:inline}
}


/* ==========================================================================
   ROUND 11 (client, 2026-11-02) - Discover wild strip: one crop line per image
   ========================================================================== */
/* All three are now wide frames in a strip about 7:1 open, so each holds its
   subject's own band: the tiger's head and back, the deer on the shoreline,
   the arches and the hills. */
.usp_row:nth-child(1) .usp_media img{object-position:50% 38%}
.usp_row:nth-child(2) .usp_media img{object-position:50% 62%}
.usp_row:nth-child(3) .usp_media img{object-position:50% 42%}
/* On a touch screen there is no hover to open them, and the phone and tablet
   caps above kept them as small chips, which hid the photographs the block
   is there to show. Open them, as the hover:none rule already intends. */
@media (hover:none){.usp_media{max-width:100%}}