/* Lux Africa Tours — reference-rebuild-20260909
   Revision 01. Static and readable by default; motion is layered on only after
   motion.js initialises successfully (html.sc-ready). */

@font-face { font-family:'Montserrat'; src:url('assets/fonts/montserrat-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/montserrat-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/montserrat-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/montserrat-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/montserrat-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('assets/fonts/spectral-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('assets/fonts/spectral-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('assets/fonts/spectral-400i.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

:root{
  --dest-clear:16px;   /* painted clearance between the copy and the visual */
  --brand-blue:#264e80;
  --brand-pink:#c81d8f;
  --brand-orange:#e07422;
  --ink:#231f20;
  --paper:#f9f4f1;
  --deep:#012348;
  --sans:'Montserrat','Segoe UI',system-ui,-apple-system,sans-serif;
  --serif:'Spectral',Georgia,'Times New Roman',serif;

  --header-h:64px;
  --gutter:20px;
  --media-radius:14px;
  --intro-span:225svh;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}
@media (min-width:768px){ :root{ --header-h:72px; --gutter:28px; --media-radius:16px; --intro-span:250svh; } }
@media (min-width:1080px){ :root{ --header-h:84px; --gutter:48px; --media-radius:18px; --intro-span:275svh; --dest-clear:24px; } }

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--sans);margin:0;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

::selection{background:var(--brand-pink);color:#fff;}
/* every trailing arrow keeps its own space from the label */
.stage__link span,.dcard__link span,.close__secondary span,.cat-card a span{margin-left:.4em;}
:focus-visible{outline:2px solid var(--brand-pink);outline-offset:3px;}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.skip{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--deep);color:var(--paper);padding:.75rem 1.25rem;
  font-family:var(--sans);font-weight:600;text-decoration:none;
}
.skip:focus{top:1rem;}

/* zero-height scroll targets placed at the offset that actually shows the scene */
.scene-anchor{position:absolute;left:0;width:1px;height:1px;scroll-margin-top:calc(var(--header-h) + 8px);}
.scene-anchor--plateau{
  top:calc(100% - 100svh);
  /* This marker IS the reading plateau, not a heading that must clear the
     fixed bar. The inherited header offset landed it 72px short, at p=0.93,
     which is before the flying photographs hand over to the real cards — so
     a jump to #destinations arrived on the tiles instead of the offerings. */
  scroll-margin-top:0;
}

.section-heading{
  font-family:var(--sans);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.75rem,4vw,2.5rem);letter-spacing:.02em;color:var(--brand-blue);
  text-wrap:balance;
}
.section-heading--light{color:#fff;}

/* ============================== MASTHEAD ============================== */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:.75rem;
  height:calc(var(--header-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--gutter) 0;
  transition:background-color .25s ease;
}
.masthead.is-dark{background:var(--deep);}
.masthead.is-paper{background:var(--paper);box-shadow:0 1px 0 rgba(1,35,72,.10);}
@media (min-width:1080px){
  /* over the opening photograph the bar can be transparent; everywhere else it is a real ground */
  .masthead.is-dark.at-top{background:transparent;box-shadow:none;}
}

.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:1;min-width:0;}
.brand-icon{width:36px;height:36px;flex:none;}
.brand-type{height:21px;width:auto;}
.masthead.is-dark .brand-type--black{display:none;}
.masthead.is-paper .brand-type--white{display:none;}

.primary{display:none;}
@media (min-width:1080px){
  .primary{display:block;}
  .primary ul{display:flex;gap:2rem;}
  .primary a{
    font-family:var(--sans);font-weight:600;text-transform:uppercase;
    font-size:.875rem;letter-spacing:.06em;text-decoration:none;
    padding:.4rem 0;border-bottom:2px solid transparent;
  }
  .masthead.is-dark .primary a{color:#fff;}
  .masthead.is-paper .primary a{color:var(--brand-blue);}
  .primary a:hover,.primary a:focus-visible{border-bottom-color:var(--brand-pink);}
}

.hamburger{
  flex:none;width:44px;height:44px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;margin-right:-10px;
}
@media (min-width:1080px){ .hamburger{display:none;} }
.hamburger__bar{display:block;width:22px;height:2px;margin:2.5px 0;transition:background-color .25s ease;}
.masthead.is-dark .hamburger__bar{background:#fff;}
.masthead.is-paper .hamburger__bar{background:var(--brand-blue);}

.mobile-nav{
  position:fixed;inset:0;z-index:150;background:var(--deep);
  padding:calc(1.25rem + env(safe-area-inset-top)) var(--gutter) 1.5rem;
  display:flex;flex-direction:column;
}
.mobile-nav[hidden]{display:none;}
.mobile-nav__close{align-self:flex-end;width:44px;height:44px;color:#fff;display:flex;align-items:center;justify-content:center;}
.mobile-nav ul{margin-top:1.5rem;display:flex;flex-direction:column;gap:1.5rem;}
.mobile-nav a{
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:1.125rem;letter-spacing:.03em;color:#fff;text-decoration:none;
  display:flex;align-items:center;min-height:44px;
}
@media (min-width:1080px){ .mobile-nav{display:none !important;} }

/* ============================== INTRO ==============================
   Static default: ocean block, then the arrival statement on paper.
   With scripting: one bounded sticky composition, two layers. */
.intro{position:relative;background:var(--paper);}
.intro__stage{position:relative;}
.intro__ocean{position:relative;min-height:74svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep);}
.intro__photo{position:absolute;inset:0;}
.sc-ready:not(.sc-reduced) .intro__photo{transform-origin:50% 50%;}
.intro__photo img{width:100%;height:100%;object-fit:cover;}
.intro__ocean::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:16svh;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(249,244,241,0) 0%,rgba(249,244,241,.48) 62%,var(--paper) 100%);
}
@media (min-width:1080px){ .intro__ocean::after{display:none;} }
.intro__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,35,72,.62) 0%,rgba(1,35,72,.18) 38%,rgba(1,35,72,.30) 66%,rgba(1,35,72,.72) 100%);
}
.intro__route{position:absolute;inset:0;width:100%;height:100%;}
.intro__route-base{stroke:rgba(249,244,241,.34);stroke-width:2;stroke-linecap:round;stroke-dasharray:6 14;}
.intro__route-trace{stroke:var(--paper);stroke-width:2.5;stroke-linecap:round;}
.intro__route-start{fill:var(--paper);}
.intro__route-end{fill:var(--paper);opacity:.28;transition:opacity .3s ease;}
.intro__route-end.is-reached{opacity:1;}
/* The sky layer sits above every section, so the plane and the arriving
   journeys travel in FRONT of the map instead of behind it. Fixed, so it tracks
   the pinned stage exactly. Below the masthead (z-index 100). */
.sky{display:none;}
/* Height is 100svh, NOT inset:0. A fixed inset:0 box is the *visual* viewport,
   which grows and shrinks by ~100px as a phone hides and shows its URL bar,
   while the route below it sits in a 100svh stage that does not. The two
   preserveAspectRatio="slice" mappings then disagreed and the plane jumped to a
   second path whenever scrolling paused. Same unit, same box, one path. */
.sc-ready:not(.sc-reduced) .sky{
  display:block;position:fixed;top:0;left:0;width:100%;height:100svh;
  z-index:40;pointer-events:none;
}
.sky__plane{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.sky__plane [data-route-plane]{
  opacity:0;
  /* brand orange, so the mark reads against the ocean; permitted by DESIGN.md
     (colour may change, but only within the brand triad) */
  filter:drop-shadow(0 3px 9px rgba(1,35,72,.42));
}
.sky__flight{position:absolute;inset:0;}

.intro__sweep-track{position:relative;width:100%;padding:0 var(--gutter) 8svh;}
.intro__sweep{
  font-family:var(--sans);font-weight:900;text-transform:uppercase;color:#fff;
  font-size:clamp(2.25rem,7.4vw,5rem);line-height:1.02;letter-spacing:-.01em;
  text-wrap:balance;max-width:14ch;
}

.intro__arrival{
  background:var(--paper);color:var(--ink);
  padding:clamp(3rem,7vw,5.5rem) var(--gutter) clamp(2rem,4vw,3rem);
  text-align:center;
}
.intro__label{
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:.8125rem;letter-spacing:.08em;color:var(--brand-blue);margin-bottom:.7rem;
}
.intro__title{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(2.25rem,3.4vw + .7rem,4.5rem);line-height:1.05;letter-spacing:-.015em;
  color:var(--ink);text-wrap:balance;max-width:16ch;margin:0 auto;
}
.intro__sub{
  font-size:clamp(.9375rem,.25vw + .85rem,1.0625rem);line-height:1.55;
  max-width:40ch;margin:.85rem auto 0;color:var(--ink);text-wrap:balance;
}
.intro__band{display:none;}
.flight__tile{
  position:absolute;margin:0;overflow:hidden;border-radius:var(--media-radius);
  width:clamp(160px,17vw,280px);aspect-ratio:326/249;
  opacity:0;will-change:transform,opacity,box-shadow;
  transform-origin:top left;
}
.flight__tile img{width:100%;height:100%;object-fit:cover;}
/* the statement sits above the arriving imagery */
.sc-ready:not(.sc-reduced) .intro__arrival{z-index:2;}

/* --- animated intro --- */
.sc-ready:not(.sc-reduced) .intro{height:var(--intro-span);}
.sc-ready:not(.sc-reduced) .intro__stage{position:sticky;top:0;height:100svh;overflow:hidden;}
.sc-ready:not(.sc-reduced) .intro__ocean{position:absolute;inset:0;min-height:0;display:block;}
/* the band sits where the route actually passes, so the plane crosses the type */
.sc-ready:not(.sc-reduced) .intro__sweep-track{
  position:absolute;top:46%;left:0;padding:0;overflow:hidden;
}
.sc-ready:not(.sc-reduced) .intro__sweep{
  display:inline-block;white-space:nowrap;max-width:none;text-wrap:nowrap;
  font-size:clamp(3rem,11vw,9rem);line-height:1;letter-spacing:.005em;
  will-change:transform;
}
.sc-ready:not(.sc-reduced) .intro__band{
  display:block;position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(249,244,241,0) 0%,
    var(--paper) var(--band-edge,30%),
    var(--paper) calc(100% - var(--band-edge,30%)),
    rgba(249,244,241,0) 100%);
}
.sc-ready:not(.sc-reduced) .intro__arrival{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(var(--header-h) + 1.75rem) var(--gutter) 0;
  /* the band supplies the ground here; the copy layer itself must stay clear,
     or it paints a sheet of paper over the ocean */
  background:none;
}
.sc-ready:not(.sc-reduced) .intro__arrival > *{opacity:0;}

/* ============================== DESTINATIONS ============================== */
/* No background of its own. The page is already paper, so this declaration
   only ever did one thing: paint an opaque sheet over the supporting copy
   the section is pulled up underneath. The clearance below is what keeps
   them apart; this is what stops a drift of a few pixels from slicing a
   line of text in half. */
.dest{position:relative;padding:var(--dest-clear,16px) 0 clamp(1.5rem,3vw,2.25rem);}
/* pulled up so the map begins directly beneath the arrival copy rather than
   after a viewport of empty paper; the pull is measured, not guessed */
.sc-ready:not(.sc-reduced) .dest{margin-top:calc(-1 * var(--dest-pull, 0px));}

/* The map owns the whole section: full document width, running from directly
   under the arrival copy and continuing BEHIND the journey cards. */
.dest__mapwrap{
  position:absolute;inset:var(--dest-clear,16px) 0 0;width:100%;overflow:hidden;pointer-events:none;z-index:0;
}
.dest__map{position:absolute;inset:0;width:100%;height:100%;display:block;}
.dest__globe{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform-origin:50% 20%;opacity:var(--globe-opacity,1);}
.has-globe .dest__map,.has-globe .dest__markers{opacity:var(--flat-opacity,0);}
/* The controls belong to the globe. `--globe-right` is the sphere's own right
   edge, written by the controller, so the pair sits against it instead of
   floating out at the section's far corner on a wide screen. */
.dest__world-controls{
  position:absolute;
  right:clamp(var(--gutter), calc(100% - var(--globe-right, 0px) - 4px), 42%);
  top:var(--dest-clear,16px);
  z-index:3;display:flex;gap:8px;
}
.dest__world-controls[hidden]{display:none;}
.dest__world-controls button{font:600 12px/1.2 Montserrat,sans-serif;color:var(--brand-blue);background:var(--paper);border:1px solid rgba(38,78,128,.25);border-radius:4px;min-height:44px;padding:8px 12px;cursor:pointer;}
.dest__world-controls button:disabled{color:var(--brand-blue);cursor:default;}
.dest__world-controls button{width:44px;padding:10px;}
.dest__world-controls svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:599px){.dest__world-controls{right:12px;gap:4px;}.dest__world-controls button{font-size:10px;padding:6px 8px;}}
/* the map needs headroom above the cards; this reserves it inside the section */
.dest__lead{height:236px;}
@media (min-width:768px){ .dest__lead{height:262px;} }
@media (min-width:1080px){ .dest__lead{height:286px;} }

.map-regions circle{fill:var(--brand-blue);opacity:0;transition:opacity .16s linear;}
.wd-region.is-active circle{
  opacity:1;
  transition:opacity .16s linear;
  transition-delay:calc(var(--d,0) * 220ms);
}
.wd-region[data-region="falls"].is-active circle{fill:var(--brand-blue);}
.wd-region[data-region="island"].is-active circle{fill:var(--brand-pink);}
.wd-region[data-region="lens"].is-active circle{fill:var(--brand-orange);}
.wd-region[data-region="netball"].is-active circle{fill:var(--brand-blue);}

.dest__markers{position:absolute;inset:0;pointer-events:none;z-index:1;}
.dest__cue{position:relative;z-index:2;}
.dest__marker{
  position:absolute;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--marker-fill,var(--brand-blue));border:3px solid var(--paper);
  box-shadow:0 1px 3px rgba(1,35,72,.28);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:700;font-size:0;
  transition:width .22s var(--ease-out),height .22s var(--ease-out),
             background-color .22s ease,border-color .22s ease,font-size .22s var(--ease-out);
}
.dest__marker span{opacity:0;transition:opacity .18s ease;}
.dest__marker.is-active{
  width:30px;height:30px;border-radius:6px;font-size:.75rem;
  background:var(--marker-fill,var(--brand-blue));border-color:var(--marker-fill,var(--brand-blue));color:#fff;
}
.dest__marker.is-active span{opacity:1;}
.dest__marker[data-marker="falls"]{--marker-fill:var(--brand-blue);}
.dest__marker[data-marker="island"]{--marker-fill:var(--brand-pink);}
.dest__marker[data-marker="lens"]{--marker-fill:var(--brand-orange);}
.dest__marker[data-marker="netball"]{--marker-fill:var(--brand-blue);}

.dest__cards{
  position:relative;z-index:2;
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--gutter) .25rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.dest__cards::-webkit-scrollbar{display:none;}
.dcard{flex:0 0 82%;scroll-snap-align:start;}
@media (min-width:600px){ .dcard{flex:0 0 46%;} }
@media (min-width:1080px){
  .dest__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;overflow:visible;max-width:1600px;margin:0 auto;}
  .dcard{flex:none;}
}
.dcard{
  position:relative;border-radius:var(--media-radius);overflow:hidden;cursor:pointer;
  aspect-ratio:326/249;background:#0d1b2a;
}
.dcard figure{margin:0;position:absolute;inset:0;}
.dcard img{width:100%;height:100%;object-fit:cover;}
.dcard::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,35,72,0) 44%,rgba(1,35,72,.80) 100%);
}
.dcard__no{
  position:absolute;top:10px;left:10px;z-index:2;
  width:26px;height:26px;border-radius:6px;background:rgba(249,244,241,.92);
  color:var(--brand-blue);font-family:var(--sans);font-weight:700;font-size:.75rem;
  display:flex;align-items:center;justify-content:center;
}
.dcard__category{
  position:absolute;left:14px;right:14px;bottom:64px;z-index:2;color:var(--paper);
  font-family:var(--sans);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.6875rem;opacity:.9;
}
.dcard__title{
  position:absolute;left:14px;right:14px;bottom:36px;z-index:2;color:#fff;
  font-family:var(--sans);font-weight:700;font-size:1.0625rem;line-height:1.2;text-wrap:balance;
}
.dcard__link{
  position:absolute;left:14px;bottom:8px;z-index:3;color:var(--paper);
  font-family:var(--sans);font-weight:600;font-size:.75rem;text-decoration:underline;
  text-underline-offset:3px;display:inline-flex;align-items:center;min-height:24px;padding:2px 0;
}
.dcard.is-selected{box-shadow:0 0 0 2px var(--brand-pink);}

/* hovering one journey brings it forward and lets the others recede */
@media (hover:hover) and (min-width:1080px){
  .dcard{
    transition:transform .32s var(--ease-out),filter .32s ease,box-shadow .32s ease;
    transform-origin:center bottom;will-change:transform;
  }
  .dest__cards.is-landed:hover .dcard{filter:grayscale(1) brightness(.92);opacity:.62;}
  .dest__cards.is-landed .dcard:hover{
    filter:none;opacity:1;transform:scale(1.3);z-index:5;
    box-shadow:0 18px 44px rgba(1,35,72,.28);
  }
  .dest__cards.is-landed:hover .dcard:not(:hover) .dcard__link{pointer-events:none;}
}

.dest__cue{
  text-align:center;margin-top:.5rem;font-family:var(--sans);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;color:var(--brand-blue);opacity:.72;
}
@media (min-width:1080px){ .dest__cue{display:none;} }

/* ============================== EXPERIENCES ==============================
   Static default: chapters in ordinary flow. */
.exp{background:var(--paper);}
.exp__head{max-width:1600px;margin:0 auto;padding:clamp(3rem,6vw,5rem) var(--gutter) 0;}
.stage{position:relative;}
/* the phone chapters swipe past their own edges; clip (not hidden, which would
   break the sticky descendant on desktop) keeps that off the document scroll */
@media (max-width:1099px){ .stage,.exp{overflow-x:clip;} }
/* Phone: the closing chapter holds while corporate climbs over it, the way the
   desktop scene does. */
@media (max-width:1079px) and (min-height:600px){
  /* tail room, so the closing frame can actually reach the top and hold there
     before corporate begins to climb over it */
  .sc-ready.has-corp:not(.sc-reduced) .stage__sticky{padding-bottom:105svh;}
  /* The closing frame is held by the controller rather than by `position:sticky`:
     the swipe needs `overflow-x: clip` on this section, and clip on an ancestor
     disables sticky. The padding above is the hold's scroll budget. */
  .sc-ready:not(.sc-reduced) .corp{
    margin-top:-52svh;position:relative;z-index:3;
  }
}
.stage__sticky{
  max-width:1600px;margin:0 auto;padding:clamp(1.5rem,4vw,2.5rem) var(--gutter) 0;
  display:flex;flex-direction:column;
}
/* field and panels dissolve so slot/copy pairs are ordered siblings in flow */
.stage__field,.stage__panels{display:contents;}
.stage__slot{
  width:84%;aspect-ratio:3/4;border-radius:var(--media-radius);overflow:hidden;background:#e6ded6;
  margin-bottom:1rem;          /* tight: the portrait and its copy are one group */
  will-change:transform;
}
.stage__slot img{width:100%;height:100%;object-fit:cover;}
.stage__slot[data-slot="1"]{margin-left:16%;}
.stage__slot[data-slot="0"]{order:0;} .stage__panel[data-panel="0"]{order:1;}
.stage__slot[data-slot="1"]{order:2;} .stage__panel[data-panel="1"]{order:3;}
.stage__slot[data-slot="2"]{order:4;} .stage__panel[data-panel="2"]{order:5;}

.stage__label{
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:.75rem;letter-spacing:.08em;color:var(--brand-blue);margin-bottom:.6rem;
}
.stage__title{font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:700;margin-bottom:.75rem;color:var(--ink);}
.stage__body{font-size:1.0625rem;line-height:1.6;margin-bottom:1rem;max-width:52ch;text-wrap:pretty;}
.stage__link{
  font-family:var(--sans);font-weight:600;font-size:.875rem;text-decoration:underline;
  text-underline-offset:3px;color:var(--brand-blue);display:inline-flex;align-items:center;min-height:44px;
}

/* mid range: portrait beside its copy */
@media (min-width:768px){
  .stage__sticky{display:grid;grid-template-columns:minmax(0,58%) minmax(240px,1fr);gap:clamp(24px,3vw,40px) clamp(24px,3vw,40px);align-items:center;}
  .stage__field{display:contents;}
  .stage__slot{width:100%;margin:0 !important;}
  .stage__panel{padding:0 0 clamp(3rem,5vw,3.5rem);}
}

/* the phone swipe transform must not survive into the mid-range grid */
@media (min-width:768px) and (max-width:1099px){
  .stage__slot{transform:none !important;opacity:1 !important;}
}

/* connected choreography: only when there is genuinely room for it */
@media (min-width:1100px) and (min-height:720px){
  .sc-ready:not(.sc-reduced) .stage{height:360svh;}
  .sc-ready:not(.sc-reduced) .stage__sticky{
    position:sticky;top:0;height:100svh;
    display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;
    align-items:center;padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  }
  .sc-ready:not(.sc-reduced) .stage__field{
    display:block;position:relative;width:100%;height:100%;
  }
  .sc-ready:not(.sc-reduced) .stage__slot{
    position:absolute;top:0;left:0;margin:0;
    transform-origin:top left;will-change:transform;
    border-radius:calc(var(--media-radius) / var(--k,1));
  }
  .sc-ready:not(.sc-reduced) .stage__panels{
    display:block;position:relative;width:300px;
  }
  .sc-ready:not(.sc-reduced) .stage__panel{
    position:absolute;top:50%;left:0;width:300px;transform:translateY(-50%);
    padding:0;opacity:0;visibility:hidden;
    transition:opacity .28s var(--ease-out),visibility 0s linear .28s;
  }
  .sc-ready:not(.sc-reduced) .stage__panel.is-current{
    opacity:1;visibility:visible;transition:opacity .28s var(--ease-out),visibility 0s;
  }
}

/* ============================== CORPORATE ============================== */
.corp{position:relative;background:var(--deep);color:var(--paper);}
/* the parallax layer is scaled past its box, so the scene always clips it */
.corp__sticky{position:relative;overflow:hidden;}
.corp__bg{position:relative;height:38svh;min-height:220px;overflow:hidden;will-change:transform;}
.corp__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;}
.corp__bg img.is-active{opacity:1;}
.corp__scrim{display:none;}
.corp__inner{position:relative;z-index:2;padding:clamp(1.5rem,4vw,2.5rem) var(--gutter) clamp(2rem,4vw,3rem);}
.corp__parent{margin-bottom:clamp(1rem,2vw,1.5rem);}
.corp__body{display:flex;flex-direction:column;gap:clamp(1.25rem,3vw,2rem);}
.corp__copy{max-width:46ch;order:2;}
.corp__service{color:#fff;font-family:var(--sans);font-size:clamp(1.375rem,3vw,2rem);font-weight:700;margin-bottom:.75rem;}
.corp__desc{color:var(--paper);font-size:1.0625rem;line-height:1.6;text-wrap:pretty;}
.corp__gallery{order:1;display:grid;grid-template-columns:1fr;gap:10px;}
.corp__frame{margin:0;border-radius:var(--media-radius);overflow:hidden;position:relative;background:#000;}
.corp__frame img{width:100%;height:100%;object-fit:cover;transition:opacity .4s ease;}
.corp__frame--full{aspect-ratio:4/3;}
.corp__frame figcaption{
  position:absolute;left:10px;bottom:8px;
  font-family:var(--sans);font-weight:600;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 6px rgba(1,35,72,.9);
}
.corp__strip{display:flex;gap:8px;margin-top:10px;overflow:hidden;}

.corp__thumb{
  flex:0 0 22%;aspect-ratio:4/3;border-radius:calc(var(--media-radius) * .6);overflow:hidden;
  background:rgba(1,35,72,.35);opacity:.55;
  transition:opacity .3s ease,outline-color .3s ease;
  outline:2px solid transparent;outline-offset:-2px;
  will-change:transform;
}
.corp__thumb img{width:100%;height:100%;object-fit:cover;}
.corp__thumb.is-current{opacity:1;outline-color:var(--brand-pink);}

.corp__controls{
  position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  margin-top:clamp(1.5rem,3vw,2rem);
}
/* a band of density behind the control row only, so labels stay legible over
   the bright half of the photograph without washing the whole frame */
.corp__controls::before{
  content:'';position:absolute;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);
  top:-14px;bottom:calc(var(--gutter) * -1);z-index:-1;
  background:linear-gradient(180deg,rgba(1,35,72,0) 0%,rgba(1,35,72,.55) 34%,rgba(1,35,72,.78) 100%);
  pointer-events:none;
}
.corp__control{
  text-align:left;padding:.7rem .25rem;border-top:2px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.66);min-height:44px;transition:color .25s ease,border-color .25s ease;
}
.corp__control .num{font-family:var(--sans);font-weight:700;font-size:.75rem;display:block;margin-bottom:.15rem;}
.corp__control .label{font-family:var(--sans);font-weight:600;font-size:.8125rem;text-transform:uppercase;letter-spacing:.03em;}
.corp__control.is-active{border-top-color:var(--brand-pink);color:#fff;}
.corp__control:hover{color:#fff;}

@media (min-width:768px){
  .corp__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,38%);align-items:end;gap:clamp(24px,4vw,48px);}
  .corp__copy{order:1;}
  .corp__gallery{order:2;}
  .corp__controls{grid-template-columns:repeat(4,1fr);gap:2px;}
}

/* Phone: the corporate scene is pinned here too, the way the reference does it.
   Full-bleed photograph, the service frames as a row across the top that travels
   in from the left, the copy over the lower half, controls at the foot. */
@media (max-width:1079px) and (min-height:600px){
  .sc-ready:not(.sc-reduced) .corp{height:340svh;}
  .sc-ready:not(.sc-reduced) .corp__sticky{position:sticky;top:0;height:100svh;overflow:hidden;}
  .sc-ready:not(.sc-reduced) .corp__bg{position:absolute;inset:0;height:auto;min-height:0;}
  .sc-ready:not(.sc-reduced) .corp__scrim{
    display:block;position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(1,35,72,.62) 0%,rgba(1,35,72,.20) 26%,rgba(1,35,72,.55) 62%,rgba(1,35,72,.90) 100%);
  }
  .sc-ready:not(.sc-reduced) .corp__inner{
    position:relative;height:100%;display:flex;flex-direction:column;
    padding:calc(var(--header-h) + .75rem) var(--gutter) 1.25rem;
  }
  .sc-ready:not(.sc-reduced) .corp__body{display:contents;}
  .sc-ready:not(.sc-reduced) .corp__gallery{order:-1;margin:0 0 auto;max-width:none;}
  .sc-ready:not(.sc-reduced) .corp__frame--full{display:none;}   /* the row is the gallery here */
  /* one frame, four pictures stacked on it — see motion.js, corporate scene */
  .sc-ready:not(.sc-reduced) .corp__strip{
    margin-top:0;display:block;position:relative;
    width:100%;aspect-ratio:16/10;border-radius:var(--media-radius);
  }
  .sc-ready:not(.sc-reduced) .corp__thumb{
    position:absolute;inset:0;flex:none;width:100%;height:100%;
    margin:0;aspect-ratio:auto;outline:0;
  }
  .sc-ready:not(.sc-reduced) .corp__parent{order:-2;margin-bottom:.9rem;}
  .sc-ready:not(.sc-reduced) .corp__copy{order:0;margin-top:auto;max-width:none;}
  .sc-ready:not(.sc-reduced) .corp__controls{
    margin-top:1.1rem;grid-template-columns:repeat(4,minmax(0,1fr));
    width:calc(200% - var(--gutter));
    transform:translate3d(var(--controls-x,0%),0,0);
    transition:transform .5s var(--ease-out);
  }
  .sc-ready:not(.sc-reduced) .corp__copy{
    will-change:transform,opacity;
  }
  .sc-ready:not(.sc-reduced) .corp__thumb{transition:none;}
}

/* pinned corporate scene, only where the viewport can hold it */
@media (min-width:1080px) and (min-height:640px){
  .sc-ready:not(.sc-reduced) .corp{height:380svh;}
  /* the experiences stage holds its last frame while corporate climbs over it */
  /* radius lives on the sticky surface: overflow on .corp itself would break the
     sticky child inside it */
  .sc-ready:not(.sc-reduced) .corp{margin-top:-60svh;position:relative;z-index:3;}
  .sc-ready:not(.sc-reduced) .corp__sticky{
    border-radius:28px 28px 0 0;
    box-shadow:0 -28px 60px rgba(1,35,72,.30);
  }
  .sc-ready:not(.sc-reduced) .exp{position:relative;z-index:1;}
  .sc-ready:not(.sc-reduced) .corp__sticky{position:sticky;top:0;height:100svh;overflow:hidden;}
  .sc-ready:not(.sc-reduced) .corp__bg{position:absolute;inset:0;height:auto;min-height:0;}
  /* a column of density under the copy only, so the photograph keeps its contrast */
  .sc-ready:not(.sc-reduced) .corp__scrim{
    display:block;position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(1,35,72,.88) 0%,rgba(1,35,72,.72) 34%,rgba(1,35,72,.12) 58%,rgba(1,35,72,0) 72%);
  }
  .sc-ready:not(.sc-reduced) .corp__inner{
    height:100%;display:flex;flex-direction:column;
    padding:calc(var(--header-h) + 28px) var(--gutter) 32px;
  }
  .sc-ready:not(.sc-reduced) .corp__parent{margin-bottom:auto;}
  .sc-ready:not(.sc-reduced) .corp__body{align-items:end;}
  .sc-ready:not(.sc-reduced) .corp__gallery{max-width:420px;justify-self:end;}
}

/* ============================== CLOSE + FOOTER ============================== */
.close{
  background:var(--deep);color:var(--paper);
  padding:clamp(3rem,7vw,5rem) var(--gutter) clamp(3rem,6vw,4rem);
  text-align:center;
}
.close__title{
  font-family:var(--sans);font-weight:900;color:#fff;
  font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.1;letter-spacing:-.01em;text-wrap:balance;
  max-width:18ch;margin:0 auto;
}
.close__body{
  font-size:1.0625rem;line-height:1.6;color:var(--paper);opacity:.88;
  max-width:52ch;margin:1.25rem auto 0;text-wrap:pretty;
}
.close__actions{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  display:flex;flex-direction:column;align-items:center;gap:1.25rem;
}
@media (min-width:600px){ .close__actions{flex-direction:row;justify-content:center;gap:2rem;} }
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  background:var(--brand-pink);color:var(--paper);font-family:var(--sans);font-weight:700;
  text-transform:uppercase;font-size:.875rem;letter-spacing:.06em;padding:0 2rem;border-radius:4px;text-decoration:none;
  transition:background-color .2s ease;
}
.btn-primary:hover,.btn-primary:focus-visible{background:#fff;color:var(--deep);}
.close__secondary{
  font-family:var(--sans);font-weight:600;font-size:.875rem;color:var(--paper);
  text-decoration:underline;text-underline-offset:4px;
  display:inline-flex;align-items:center;min-height:44px;
}

.foot{
  background:var(--deep);color:var(--paper);text-align:center;
  padding:clamp(2.5rem,5vw,3.5rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(249,244,241,.12);
}
.foot__mark{margin:0 auto 1.25rem;}
.foot__slogan{font-family:var(--sans);font-weight:500;font-size:1.125rem;margin-bottom:1.5rem;}
.foot__social{display:flex;justify-content:center;gap:1rem;margin-bottom:1.5rem;}
.foot__social a{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(249,244,241,.4);
  display:flex;align-items:center;justify-content:center;color:var(--paper);text-decoration:none;
  transition:border-color .2s ease,color .2s ease;
}
.foot__social a:hover{border-color:var(--brand-pink);color:#fff;}
.foot__legal{font-size:.8125rem;opacity:.72;}

/* ============================== CATEGORY PAGES ============================== */
.cat-hero{
  position:relative;min-height:46svh;display:flex;align-items:flex-end;
  padding:calc(var(--header-h) + 3rem) var(--gutter) clamp(2rem,4vw,3rem);
  background:var(--deep);overflow:hidden;
}
.cat-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;}
.cat-hero__inner{position:relative;z-index:1;max-width:1600px;margin:0 auto;width:100%;}
.cat-hero__label{
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:.875rem;letter-spacing:.08em;color:var(--paper);
}
.cat-hero h1{
  font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:.01em;color:var(--paper);
  font-size:clamp(2rem,5vw,3.25rem);margin:.5rem 0 0;text-wrap:balance;
}
.cat-body{max-width:1600px;margin:0 auto;padding:clamp(2.5rem,5vw,3.5rem) var(--gutter) clamp(3rem,6vw,4rem);}
.cat-body p{font-size:1.0625rem;line-height:1.6;color:var(--ink);max-width:68ch;margin-bottom:1.25rem;text-wrap:pretty;}
.cat-grid{display:grid;gap:2rem;margin:2.5rem 0;grid-template-columns:1fr;}
@media (min-width:720px){ .cat-grid{grid-template-columns:1fr 1fr;} }
.cat-card figure{aspect-ratio:4/3;overflow:hidden;margin:0 0 1rem;background:rgba(1,35,72,.06);border-radius:var(--media-radius);}
.cat-card img{width:100%;height:100%;object-fit:cover;}
.cat-card h2{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.0625rem;margin:0 0 .5rem;color:var(--brand-blue);}
.cat-card p{font-size:.9375rem;margin:0;}
.cat-note{border-left:3px solid var(--brand-orange);padding-left:1rem;font-size:.9375rem;color:var(--ink);max-width:60ch;margin:2rem 0;}

/* ============================== REDUCED MOTION ==============================
   A real static layout, not skipped updaters. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
.sc-reduced .intro{height:auto;}
.sc-reduced .intro__stage{position:static;height:auto;}
.sc-reduced .intro__ocean{position:relative;inset:auto;}
.sc-reduced .intro__arrival{position:static;opacity:1 !important;}
.sc-reduced .intro__arrival > *{opacity:1 !important;}
.sc-reduced .stage{height:auto;}
.sc-reduced .stage__sticky{position:static;height:auto;}
.sc-reduced .corp{height:auto;}
.sc-reduced .corp__sticky{position:static;height:auto;}

/* ======================================================================
   OFFERING HUB — v0.15.0
   The homepage is a gateway to four offerings, and the same stage
   transforms into the Holidays region chooser. Everything below is
   additive: the hub state is what a browser paints with no JavaScript.
   ====================================================================== */

/* --- source rasters that carry a light frame border of their own -------- */
.dcard__img--inset{ transform:scale(1.035); transform-origin:50% 50%; }

/* --- the eyebrow the plane wipes -------------------------------------- */
.intro__label-layer{ position:relative; display:inline-block; }
.intro__label-word{
  display:block; text-align:center;
  clip-path:inset(0 calc(var(--wipe,0) * 100%) 0 0);
}
/* both words are centred in the same box, so the plane's edge crosses each of
   them through its middle rather than clipping one from an offset start */
.intro__label-word--next{
  position:absolute; left:0; top:0; right:0; text-align:center;
  clip-path:inset(0 0 0 calc((1 - var(--wipe,0)) * 100%));
}

/* --- the split-flap headline ------------------------------------------
   One semantic heading underneath, always carrying the true text. The flap
   layer sits over it and is aria-hidden. Nothing is clipped: the wrap keeps
   overflow visible so descenders survive the hinge. */
.intro__title-wrap{ position:relative; overflow:visible; }
.intro__title-wrap.is-flapping .intro__title{ visibility:hidden; }
.flap{
  position:absolute; inset:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start;
  gap:0 .26em;
  perspective:700px;
  font-family:var(--sans); font-weight:900;
  font-size:clamp(2.25rem,3.4vw + .7rem,4.5rem); line-height:1.05; letter-spacing:-.015em;
  color:var(--ink);
  pointer-events:none;
}
.flap__word{
  display:inline-block; white-space:nowrap;
  transform-origin:50% 50%; backface-visibility:hidden;
  transition:transform .15s linear;
}
.flap__word.is-turning{ transform:rotateX(90deg); }
.flap__word.is-gone{ display:none; }

/* --- the Holidays state ------------------------------------------------ */
.intro__sub--holidays[hidden]{ display:none; }

/* The room above the cards is derived from the height actually available, not
   from three fixed numbers that each happened to suit one screen. `--hub-lead`
   is written by the controller from the measured viewport; the values here are
   the pre-script fallback. */
.dest__lead{ height:var(--hub-lead, 236px); }
@media (min-width:768px){ .dest__lead{ height:var(--hub-lead, 262px); } }
@media (min-width:1080px){ .dest__lead{ height:var(--hub-lead, 286px); } }

/* --- short landscape region strips ------------------------------------- */
/* .dest__cards sets display:flex, which outranks the user-agent rule for the
   hidden attribute, so a hidden card set would still paint without this. */
.dest__cards[hidden]{ display:none; }
@media (min-width:1080px){
  .dest__cards--regions{ grid-template-columns:repeat(3,1fr); }
}
.dcard--strip{
  aspect-ratio:auto;
  height:104px;
}
@media (min-width:768px){ .dcard--strip{ height:118px; } }
@media (min-width:1080px){ .dcard--strip{ height:132px; } }

.dcard--strip::after{
  background:linear-gradient(90deg,rgba(1,35,72,.86) 0%,rgba(1,35,72,.62) 58%,rgba(1,35,72,.34) 100%);
}
.dcard--strip .dcard__no{ left:auto; right:10px; }
.dcard--strip .dcard__category{ bottom:auto; top:12px; left:14px; right:52px; }
.dcard--strip .dcard__title{ bottom:auto; top:30px; left:14px; right:52px; font-size:1.125rem; }
.dcard--strip .dcard__link{ bottom:10px; left:14px; }
@media (min-width:1080px){
  .dcard--strip .dcard__category{ top:16px; }
  .dcard--strip .dcard__title{ top:36px; font-size:1.25rem; }
  .dcard--strip .dcard__link{ bottom:14px; }
}
/* a short strip has no room to scale 1.3x without leaving the section */
@media (hover:hover) and (min-width:1080px){
  .dest__cards--regions.is-landed .dcard:hover{ transform:scale(1.06); }
}

/* --- the swap between the two card sets --------------------------------
   Photographs may crossfade here; the owner asked for exactly that. */
/* Keyframes, not transitions: the scroll loop writes inline opacity on the hub
   list every frame during the landing, and a base transition on that property
   would smear the handover the intro depends on. */
@keyframes cardSetOut{ to{ opacity:0; transform:translate3d(0,-10px,0); } }
@keyframes cardSetIn { from{ opacity:0; transform:translate3d(0,14px,0); } }
.dest__cards.is-leaving{  animation:cardSetOut .3s ease both; }
.dest__cards.is-arriving{ animation:cardSetIn .46s var(--ease-out) both; }

/* --- a real way back to the hub ---------------------------------------- */
.dest__back{
  position:relative; z-index:2;
  text-align:center; margin:.75rem 0 0;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.dest__back[hidden]{ display:none; }
.dest__back a{
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:44px; padding:0 .5rem;
  font-family:var(--sans); font-weight:600; font-size:.8125rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand-blue); text-decoration:underline; text-underline-offset:4px;
}

@media (prefers-reduced-motion:reduce){
  .flap__word{ transition:none; }
  .dest__cards.is-leaving,.dest__cards.is-arriving{ animation:none; }
}

/* --- leaving the hub for a dedicated page ------------------------------- */
.leave{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  will-change:transform,opacity;
}
.leave[hidden]{ display:none; }
.leave__frame{
  width:100%; height:100%; object-fit:cover; object-position:70% 50%; display:block;
}
.leave--fade{
  background:var(--paper); opacity:0;
  transition:opacity .3s ease;
}
.leave--fade.is-out{ opacity:1; }
.leave--rise{
  background:#012348; transform:translate3d(0,100%,0);
  transition:transform .56s var(--ease-out);
}
.leave--rise.is-out{ transform:translate3d(0,0,0); }

@media (prefers-reduced-motion:reduce){
  .leave{ display:none !important; }
}

/* --- category pages: regions and a secondary way out -------------------- */
.cat-regions__heading{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(1.5rem,1.4vw + 1.1rem,2.25rem);line-height:1.1;letter-spacing:-.01em;
  color:var(--ink);margin:clamp(2.5rem,5vw,3.5rem) 0 1.25rem;
}
.cat-region{
  border-top:1px solid rgba(38,78,128,.18);
  padding:1.25rem 0 .25rem;max-width:68ch;
}
.cat-region h3{
  font-family:var(--sans);font-weight:700;font-size:1.125rem;
  color:var(--brand-blue);margin-bottom:.5rem;
}
.cat-region p{margin-bottom:1rem;}

.cat-more{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:1.25rem;border-top:1px solid rgba(38,78,128,.18);
}
.cat-more__lead{
  font-family:var(--sans);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-size:.75rem;color:var(--brand-blue);opacity:.8;margin-bottom:.75rem;
}
.cat-more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;}
.cat-more a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--sans);font-weight:600;font-size:.9375rem;
  color:var(--brand-blue);text-decoration:underline;text-underline-offset:4px;
}

/* --- the corporate scene as its own page -------------------------------- */
/* Landing on the scene means its opening frame is the first impression, so the
   ground behind the inset is darkened enough for the inset to read as a framed
   picture rather than as a lighter patch of the same photograph. */
/* the pinned mobile rule above sets this too, so match its specificity */
.sc-ready:not(.sc-reduced) .corp--page .corp__scrim,
.corp--page .corp__scrim{
  background:linear-gradient(180deg,rgba(1,35,72,.72) 0%,rgba(1,35,72,.46) 34%,rgba(1,35,72,.62) 66%,rgba(1,35,72,.92) 100%);
}

/* Owner revision: a single scroll-scrubbed ground through discovery. */
.discovery-backdrop{display:none;}
.sc-ready:not(.sc-reduced) .discovery-page{isolation:isolate;}
.sc-ready:not(.sc-reduced) .discovery-backdrop{display:block;position:fixed;inset:calc(var(--header-h) + env(safe-area-inset-top)) 0 0;z-index:-1;background:var(--deep);pointer-events:none;}
.discovery-backdrop video{width:100%;height:100%;object-fit:cover;object-position:30% 35%;}
.sc-ready:not(.sc-reduced) .discovery-page .close{background:transparent;}
.home-page .masthead,.home-page .masthead.is-tucked{background:var(--deep);transform:none;}
.discovery-backdrop::after{content:'';position:absolute;inset:0;background:rgba(1,35,72,.64);}
.sc-ready:not(.sc-reduced) .discovery-page .intro,
.sc-ready:not(.sc-reduced) .discovery-page .intro__ocean{background:transparent;}
.sc-ready:not(.sc-reduced) .discovery-page .intro__photo,
.sc-ready:not(.sc-reduced) .discovery-page .intro__scrim,
.sc-ready:not(.sc-reduced) .discovery-page .intro__ocean::after,
.sc-ready:not(.sc-reduced) .discovery-page .intro__band{display:none;}
.sc-ready:not(.sc-reduced) .discovery-page .intro__label,
.sc-ready:not(.sc-reduced) .discovery-page .intro__title,
.sc-ready:not(.sc-reduced) .discovery-page .intro__sub,
.sc-ready:not(.sc-reduced) .discovery-page .dest__cue,
.sc-ready:not(.sc-reduced) .discovery-page .dest__back a{color:var(--paper);}
/* One native link covers each card, including its photograph and empty space. */
.dcard .dcard__link{inset:0;display:flex;align-items:flex-end;padding:0 14px 12px;}
.dcard .dcard__link:focus-visible{outline:3px solid var(--brand-orange);outline-offset:-4px;border-radius:inherit;}
.dcard__link span{margin-left:.4em;}
.masthead{transition:transform .22s ease,background-color .22s ease;}
.masthead.is-tucked{transform:translateY(-110%);}
.masthead:focus-within{transform:none;}
@media(max-width:1199px){.masthead.is-tucked{transform:none;}}
@media(prefers-reduced-motion:reduce){.masthead{transition:none;}}

/* Letter hinges share the exact headline measure and word wrapping. */
.flap{display:block;max-width:16ch;margin:0 auto;gap:0;text-align:center;text-wrap:balance;color:var(--paper);}
.flap__group{display:inline-block;white-space:nowrap;}
.flap__letter{display:inline-block;transform-origin:50% 50%;backface-visibility:hidden;}
.sc-reduced .flap{color:var(--ink);}

/* Visitor audit: preserve the reading area, native targets and short screens. */
.discovery-page .dcard__title{bottom:40px;line-height:1.2;min-height:2.4em;display:flex;align-items:flex-end;}
.discovery-page .dcard__category{bottom:86px;}
.discovery-page .dcard--strip .dcard__title{min-height:0;display:block;bottom:auto;}
.discovery-page .dcard--strip .dcard__category{bottom:auto;}
.discovery-page .dcard__link{isolation:isolate;}
.discovery-page .dest__back{margin-top:8px;}
@media(hover:hover) and (min-width:1080px){
  .discovery-page .dest__cards.is-landed .dcard:hover{transform:translateY(-8px) scale(1.04);}
  .discovery-page .dest__cards.is-landed:hover .dcard{opacity:1;filter:none;}
  .discovery-page .dest__cards.is-landed:hover .dcard:not(:hover) .dcard__link{pointer-events:auto;}
}
@media(max-height:540px) and (min-width:600px){
  .discovery-page .intro__arrival{padding-top:calc(var(--header-h) + 12px);}
  .discovery-page .intro__title,.discovery-page .flap{font-size:2rem;max-width:24ch;}
  .discovery-page .intro__sub{font-size:.9rem;max-width:60ch;margin-top:.5rem;}
  .discovery-page .dcard{flex-basis:31%;min-height:180px;aspect-ratio:1.35;}
  .discovery-page .dcard--strip{min-height:112px;}
}