/* Cielo Samui: "Sunrise over the Gulf" (concept c-gulf). Plain CSS, mobile first.
   Hidden states only exist under html.fx (motion allowed, set before first paint).
   html.ov = the overture runs this session. html.no-fx = the failsafe fired. */

:root {
  --paper: #F6F2EA;      /* white concrete */
  --sand: #EEE6D6;       /* pale sand */
  --stone: #E4D9C3;      /* warm stone */
  --sand-b: #DACBA7;     /* the hotel's sand */
  --ink: #222323;        /* the hotel's charcoal */
  --ink-2: #4B4842;      /* secondary text, AA on every light tone here */
  --gold: #A18955;       /* logo, hairlines, the main action */
  --gold-ink: #6E5B33;   /* gold for small text on paper and sand (5.2:1+) */
  --hair: rgba(161, 137, 85, .42);
  --e: cubic-bezier(.16, 1, .3, 1);
  --e-cur: cubic-bezier(.77, 0, .18, 1);
  --e-sw: cubic-bezier(.7, 0, .2, 1);
  --serif: 'Ibarra Real Nova', 'Iowan Old Style', Georgia, serif;
  --sans: 'Jost', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --gut: clamp(20px, 5.2vw, 76px);
  --max: 1320px;
  --hdr: 68px;
}
@media (min-width: 1024px) { :root { --hdr: 80px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.72 var(--sans); letter-spacing: .005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
@media (min-width: 768px) { body { font-size: 17px; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: rgba(161, 137, 85, .3); }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 1px; }
.hero :focus-visible, .hdr:not(.sc) :focus-visible { outline-color: #fff; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 12px 18px; background: var(--ink); color: #fff; font-size: 15px; text-decoration: none; transform: translateY(-160%); transition: transform .3s var(--e); }
.skip:focus { transform: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* the hotel's vectors are fills in currentColor */
.logo-white, .logo-draw svg, .hdr-logo svg, .foot-sym, .foot-word svg, .kc-logo svg { fill: currentColor; }

/* Lenis (only constructed on fine pointers) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ------------------------------------------------------------ type */
.h2 {
  font: 400 clamp(36px, 4.5vw, 64px)/1.04 var(--serif);
  letter-spacing: -.012em; color: var(--ink);
  text-wrap: balance;
}
.h2 > span, .h2 > em { display: block; }
.h2 em { font-style: italic; font-size: .92em; line-height: 1.1; color: var(--ink); margin-top: .04em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  background: var(--gold); color: var(--ink);
  font: 500 15px/1 var(--sans); letter-spacing: .07em;
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: background-color .5s var(--e), color .5s var(--e), transform .6s var(--e);
  will-change: transform;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 14px; }

/* text links: a 44 px target, the underline drawn under the words (not at the box edge) */
.link {
  --uy: calc(100% - 10px);
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; color: inherit;
  background: linear-gradient(currentColor, currentColor) 0 var(--uy) / 100% 1px no-repeat;
  transition: background-size .7s var(--e-sw), color .4s;
}
.link:hover { background-size: 0 1px; background-position: 100% var(--uy); }
/* a small outlined button: each room card's own action */
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--gold-ink); color: var(--ink); text-decoration: none;
  font: 500 14px/1 var(--sans); letter-spacing: .07em;
  transition: background-color .45s var(--e), color .45s var(--e), border-color .45s var(--e);
}
.btn-line:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* anchors land below the fixed header */
#about, #rooms, #stage, #experiences, #kohco, #book, #visit { scroll-margin-top: var(--hdr); }

/* Section filament: a gold hairline draws outward from the centre */
.fil { position: relative; }
.fil::before {
  content: ''; position: absolute; left: 15%; right: 15%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(161, 137, 85, .6), transparent);
}
.fx .fil::before { transform: scaleX(0); transition: transform 1.6s var(--e-sw); }
.fx .fil.in::before { transform: none; }

/* Generic reveals (only with motion allowed) */
.fx [data-r] { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1.1s var(--e), transform 1.1s var(--e), filter 1.1s var(--e); transition-delay: var(--d, 0ms); }
.fx [data-r].in { opacity: 1; transform: none; filter: none; }
.fx [data-w] .w { display: inline-block; opacity: 0; transform: translateY(.55em); filter: blur(8px); transition: opacity .9s var(--e), transform .9s var(--e), filter .9s var(--e); transition-delay: var(--wd, 0ms); }
.fx [data-w].in .w { opacity: 1; transform: none; filter: none; }

/* ------------------------------------------------------------ header */
.hdr { position: fixed; z-index: 60; top: 0; left: 0; right: 0; color: #fff; transition: background-color .5s var(--e), color .5s var(--e), box-shadow .5s var(--e); }
.hdr-in { position: relative; height: var(--hdr); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gut); }
.hdr.sc { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--hair); }
.hdr-logo { grid-column: 2; display: block; width: 44px; padding: 0 3px; color: var(--gold-ink); opacity: 0; transform: translateY(-8px); transition: opacity .6s var(--e), transform .8s var(--e); position: relative; z-index: 3; }
.hdr-logo svg { width: 100%; height: auto; }
.hdr.sc .hdr-logo { opacity: 1; transform: none; }
.hdr-act { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; position: relative; z-index: 3; }
.hdr-book-wrap { display: block; overflow: hidden; padding: 2px; box-sizing: border-box; }
.hdr-book .s { display: inline; }
.hdr-book .l { display: none; }
.js .hdr-book { transform: translateY(125%); transition: transform .7s var(--e), background-color .5s var(--e), color .5s var(--e); }
.js .hdr.sc .hdr-book, .js.menu-open .hdr-book { transform: none; }
.menu-btn { width: 48px; height: 48px; margin-right: -12px; display: grid; place-content: center; gap: 7px; background: none; border: 0; cursor: pointer; }
.menu-btn i { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .5s var(--e); }
.menu-open .menu-btn i:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-open .menu-btn i:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* mobile menu: a sand panel that drops like a blind */
.menu { grid-column: 1; grid-row: 1; }
.menu a { text-decoration: none; }
@media (max-width: 1023px) {
  .js .menu {
    position: fixed; inset: 0; z-index: 1; background: var(--paper); color: var(--ink);
    display: flex; flex-direction: column; justify-content: center; padding: calc(var(--hdr) + 20px) var(--gut) 48px;
    clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--e-cur);
  }
  .js.menu-open .menu { clip-path: inset(0 0 0 0); }
  .js .menu ul { display: grid; gap: 6px; }
  .js .menu a { display: inline-block; padding: 6px 0; font: italic 400 clamp(36px, 10vw, 48px)/1.1 var(--serif); }
  .js .menu li { transform: translateY(22px); transition: transform .9s var(--e); }
  .js.menu-open .menu li { transform: none; }
  .js.menu-open .menu li:nth-child(2) { transition-delay: .06s; } .js.menu-open .menu li:nth-child(3) { transition-delay: .12s; } .js.menu-open .menu li:nth-child(4) { transition-delay: .18s; }
  .js.menu-open .hdr { color: var(--ink); background: transparent; box-shadow: none; }
  .js.menu-open .hdr-logo { opacity: 1; transform: none; }
  html:not(.js) .menu ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
  html:not(.js) .menu a { display: inline-block; padding: 12px 0; font-size: 14px; }
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .hdr-in { grid-template-columns: 1fr auto; }
  html:not(.js) .hdr-logo { display: none; }
  html:not(.js) .hdr-act { grid-column: 2; }
}
/* without scripting the header scrolls away with the hero, so white links never sit on light sections */
html:not(.js) .hdr { position: absolute; }
@media (min-width: 1024px) {
  /* Sareeraya's split: two links left, two right, the centre left to the hero logo.
     After the first scroll the right pair slides aside (transform only) and the Book button rises into the space. */
  :root { --bkw: 168px; --ng: clamp(22px, 2.4vw, 36px); }
  .menu { position: absolute; grid-column: 1 / -1; top: 0; left: 0; right: 0; height: var(--hdr); display: flex; align-items: center; }
  .menu ul { flex: 1; display: flex; gap: var(--ng); padding-right: calc(var(--bkw) + var(--ng)); }
  .menu li:nth-child(3) { margin-left: auto; }
  .js .menu li:nth-child(n+3) { transform: translateX(calc(var(--bkw) + var(--ng))); transition: transform .9s var(--e); }
  .js .hdr.sc .menu li:nth-child(n+3) { transform: none; }
  .menu a { display: inline-block; padding: 15px 0; font: 500 14px/1 var(--sans); letter-spacing: .1em; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1px no-repeat; transition: background-size .6s var(--e-sw); }
  .menu a { position: relative; }
  .menu a::before { content: ''; position: absolute; top: 0; bottom: 0; left: -10px; right: -10px; }
  .menu a:hover { background-size: 100% 1px; }
  .menu-btn { display: none; }
  .hdr-logo { width: 50px; }
  .hdr-book-wrap { width: var(--bkw); }
  .hdr-book { width: 100%; padding: 0; }
  .hdr-book .s { display: none; }
  .hdr-book .l { display: inline; }
}
.fx.ov .hdr { animation: fadeIn .9s var(--e) 2.05s both; }

/* ------------------------------------------------------------ hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; color: #fff; background: #B9C9CF; isolation: isolate; }
.hero-media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-px { position: absolute; inset: 0; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transform-origin: 50% 42%; }
/* a cool grade that deepens the sky (multiply keeps it blue instead of grey), then one soft local scrim */
.hero-px::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgb(148, 166, 188) 0%, rgb(164, 180, 200) 38%, rgb(178, 192, 208) 58%, rgb(226, 230, 236) 72%, #fff 86%);
}
.hero-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 36% at 50% 48%, rgba(14, 38, 56, .30), rgba(14, 38, 56, 0) 78%),
    linear-gradient(180deg, rgba(14, 32, 46, .38) 0%, rgba(14, 32, 46, .12) 9%, rgba(14, 32, 46, 0) 18%, rgba(14, 32, 46, 0) 80%, rgba(14, 32, 46, .14) 100%);
}
/* .hero-in makes no stacking context: during the overture the curtain sits between the white logo,
   line and button (under it) and the gold logo (over it), so nothing white is ever seen on sand */
.hero-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--hdr) + 4px) var(--gut) max(150px, 20vh); }
.hero-logo { position: relative; width: clamp(176px, 17.5vw, 262px); aspect-ratio: 8 / 9; font-size: 16px; }
.hero-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-white { z-index: 1; color: #fff; filter: drop-shadow(0 2px 18px rgba(10, 20, 26, .22)); }
.logo-draw { position: absolute; inset: 0; z-index: 4; display: none; color: var(--gold); fill: currentColor; }
.logo-draw .ov-sky { position: absolute; inset: 0; display: block; clip-path: inset(36.667% 0 34.656% 0); } /* the sky above the horizon line: y 380 to 638.1 of the 900-unit box */
.hero-line { position: relative; z-index: 1; margin-top: clamp(22px, 3.2vh, 34px); font: italic 400 clamp(28px, 3vw, 44px)/1.12 var(--serif); letter-spacing: -.005em; text-shadow: 0 1px 22px rgba(10, 24, 34, .35); text-wrap: balance; max-width: 15em; }
.hero-line span { display: block; margin-top: .42em; font: 400 clamp(24px, 1.8vw, 26px)/1.25 var(--serif); font-style: normal; letter-spacing: .01em; }
.hero-cta { position: relative; z-index: 1; margin-top: clamp(24px, 3.6vh, 36px); }
.hero .btn { box-shadow: 0 14px 34px -14px rgba(10, 24, 34, .55); }
.hero-cue { position: absolute; z-index: 1; left: 50%; bottom: 0; width: 44px; height: 76px; margin-left: -22px; display: block; }
.hero-cue i { position: absolute; left: 50%; bottom: 0; width: 1px; height: 52px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); transform-origin: 50% 100%; }
.fx .hero-cue i { animation: cue 2.4s var(--e-sw) 3.4s infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: 50% 0; } 45% { transform: scaleY(1); transform-origin: 50% 0; } 55% { transform: scaleY(1); transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }
/* desktop: a higher crop so the sky fills the frame and the parasol only peaks at the bottom edge; a lighter, sunlit grade */
@media (min-width: 1024px) {
  .hero-media img { object-position: 50% 14%; }
  .hero-px::after { background: linear-gradient(180deg, rgb(196, 206, 220) 0%, rgb(214, 222, 232) 40%, #fff 70%); }
  /* the line carries its own soft scrim (measured: at least 3.07:1 against the brightest 1% of pixels behind it, 1024 to 1920 wide) */
  .hero-media::after {
    background:
      radial-gradient(44% 30% at 50% 56%, rgba(14, 38, 56, .36), rgba(14, 38, 56, .30) 45%, rgba(14, 38, 56, 0) 100%),
      radial-gradient(30% 34% at 50% 32%, rgba(14, 38, 56, .14), rgba(14, 38, 56, 0) 80%),
      linear-gradient(180deg, rgba(14, 32, 46, .34) 0%, rgba(14, 32, 46, .1) 9%, rgba(14, 32, 46, 0) 18%, rgba(14, 32, 46, 0) 82%, rgba(14, 32, 46, .12) 100%);
  }
}
/* narrower desktops show the photo smaller, so the parasol's peak rides higher: crop from nearer the top */
@media (min-width: 1024px) and (max-width: 1279px) { .hero-media img { object-position: 50% 4%; } }
/* portrait tablets: the photo's shape matches the screen, so the pole cannot be cropped aside; the stack sits in the sky above the canopy */
@media (min-width: 768px) and (orientation: portrait) {
  .hero-in { justify-content: flex-start; padding-top: calc(var(--hdr) + 3vh); }
  .hero-media img { object-position: 50% 0; }
  .hero-line { margin-top: 24px; }
  .hero-cta { margin-top: 28px; }
  .hero-px::after { background: linear-gradient(180deg, rgb(160, 176, 196) 0%, rgb(176, 190, 206) 30%, rgb(214, 220, 230) 46%, #fff 60%); }
  .hero-media::after {
    background:
      radial-gradient(56% 20% at 50% 24%, rgba(14, 38, 56, .34), rgba(14, 38, 56, .26) 45%, rgba(14, 38, 56, 0) 100%),
      linear-gradient(180deg, rgba(14, 32, 46, .3) 0%, rgba(14, 32, 46, 0) 10%, rgba(14, 32, 46, 0) 85%, rgba(14, 32, 46, .12) 100%);
  }
}
@media (max-width: 767px) {
  /* phones scroll natively (no drift), so the photo is only a little taller than the screen (no upscaling at 2x);
     pinned right, the parasol pole runs down the left edge and the frond frames the top right */
  .hero-media img { height: 115%; object-position: 100% 0; transform-origin: 50% 30%; }
  html.lenis .hero-media img { height: 130%; }
  .hero-px::after { background: linear-gradient(180deg, rgb(148, 166, 188) 0%, rgb(158, 175, 196) 30%, rgb(164, 180, 200) 50%, rgb(204, 212, 222) 58%, #fff 70%); }
  .hero-media::after {
    background:
      radial-gradient(80% 30% at 50% 48%, rgba(14, 38, 56, .30), rgba(14, 38, 56, .22) 50%, rgba(14, 38, 56, 0) 92%),
      linear-gradient(180deg, rgba(14, 32, 46, .28) 0%, rgba(14, 32, 46, 0) 14%, rgba(14, 32, 46, 0) 82%, rgba(14, 32, 46, .12) 100%);
  }
  .hero-in { justify-content: flex-start; padding-top: calc(var(--hdr) + 5svh); padding-bottom: clamp(150px, 28svh, 240px); }
  .hero-logo { width: min(48vw, 196px); }
  .hero-line { font-size: 30px; max-width: 11em; }
  .hero-cta { margin-top: auto; padding-top: 24px; }
}

/* hero clock, every visit with motion: the photo settles from 1.12 to 1 */
.fx .hero-media img { animation: settle 4.5s var(--e) .05s both; }
/* on very wide screens the 1280 px photo is already enlarged, so the settle starts closer to rest */
@media (min-width: 1600px) { .fx .hero-media img { animation-name: settleWide; } }
.fx .logo-white { animation: logoIn 1.3s var(--e) .1s both; }
.fx .hero-line { animation: rise .95s var(--e) .35s both; }
.fx .hero-cta { animation: rise .95s var(--e) .6s both; }
.fx .hero-cue { animation: fadeIn 1s ease 1.2s both; }
@keyframes settle { from { transform: scale(1.12); } to { transform: none; } }
@keyframes settleWide { from { transform: scale(1.06); } to { transform: none; } }
@keyframes logoIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ---------------- overture: the sun rises from the sea lines, then the curtain parts (done by about 2.4 s) */
.hero-curtain { display: none; }
.fx.ov .hero-curtain { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-curtain i { position: absolute; top: 0; bottom: 0; width: 50.4%; background: #EFE7D7; }
.hero-curtain .cl { left: 0; }
.hero-curtain .cr { right: 0; }
/* a gold hairline on each inner edge, lit only once the halves have moved */
.hero-curtain i::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(161, 137, 85, .55); opacity: 0; }
.hero-curtain .cl::after { right: 0; }
.hero-curtain .cr::after { left: 0; }
.fx.ov .hero-curtain i::after { animation: fadeIn .3s ease 1.55s both; }
/* the seam: two gold halves that grow away from the drawn logo, 16 px clear of it, never across the mark */
.fx.ov .hero-logo::before, .fx.ov .hero-logo::after {
  content: ''; position: absolute; z-index: 4; left: 50%; width: 1px; margin-left: -.5px; height: 100vh; height: 100svh; pointer-events: none;
  transform: scaleY(0); animation: seam .9s var(--e-sw) .95s both;
}
.fx.ov .hero-logo::before { bottom: calc(100% + 16px); transform-origin: 50% 100%; background: linear-gradient(rgba(161, 137, 85, 0), rgba(161, 137, 85, .9) 70%); }
.fx.ov .hero-logo::after { top: calc(100% + 16px); transform-origin: 50% 0; background: linear-gradient(rgba(161, 137, 85, .9), rgba(161, 137, 85, 0) 70%); }
.fx.ov .hero-curtain .cl { animation: curtL 1s var(--e-cur) 1.42s both; }
.fx.ov .hero-curtain .cr { animation: curtR 1s var(--e-cur) 1.42s both; }
@keyframes curtL { from { transform: none; } to { transform: translateX(-101%); } }
@keyframes curtR { from { transform: none; } to { transform: translateX(101%); } }
@keyframes seam { 0% { transform: scaleY(0); opacity: 1; } 52% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* the hand-over: the white logo already rests under the curtain; the gold one rides above it at full strength
   until the gap is wider than the logo (1.81 s at 1440, 1.91 s at 390), then fades and uncovers the white mark in place */
.fx.ov .logo-draw { display: block; animation: fadeOut .35s ease 1.82s both; }
.fx.ov .logo-white { animation: none; }
@media (max-width: 767px) { .fx.ov .logo-draw { animation-delay: 1.93s; } }
.fx.ov .hero-media img { animation-delay: 1.42s; }
.fx.ov .hero-line { animation-delay: 1.92s; }
.fx.ov .hero-cta { animation-delay: 2.16s; }
.fx.ov .hero-cue { animation-delay: 2.6s; }
/* the five layers, in the order the hotel's mark reads: each is the hotel's own vector, revealed by a clip-path wipe
   (BRAND.md method 2) so no mask content is animated. Percentages are of the shared 800 x 900 box. */
.logo-draw .ov-arch { animation: ovArch 1.15s var(--e-sw) 0s both; }          /* the window rises from its sill */
.logo-draw .ov-hz { animation: ovMid .8s var(--e-sw) .26s both; }             /* the horizon opens from the centre */
.logo-draw .ov-sea { animation: ovMid .8s var(--e-sw) .38s both; }
.logo-draw .ov-sun { animation: ovSun 1.25s cubic-bezier(.33, .1, .2, 1) .34s both; } /* the sun rises out of the sea */
/* the palm: one copy grows up the trunk (a narrow band), a second opens the crown from its centre (500, 334) */
.logo-draw .ov-trunk { animation: ovTrunk .7s var(--e) .42s both; }
.logo-draw .ov-crown { animation: ovCrown .95s var(--e) .78s both; }
.logo-draw .ov-name use { animation: glyph .8s var(--e) both; animation-delay: calc(.82s + var(--i) * 55ms); }
.logo-draw .ov-tag { animation: ovMid .9s var(--e) 1s both; }
@keyframes ovArch { from { -webkit-clip-path: inset(80.8% 0 0 0); clip-path: inset(80.8% 0 0 0); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } }
@keyframes ovTrunk { from { -webkit-clip-path: inset(77.3% 48.5% 0 48.5%); clip-path: inset(77.3% 48.5% 0 48.5%); } to { -webkit-clip-path: inset(32% 48.5% 0 48.5%); clip-path: inset(32% 48.5% 0 48.5%); } }
@keyframes ovCrown { from { -webkit-clip-path: circle(0% at 50% 31.6%); clip-path: circle(0% at 50% 31.6%); } to { -webkit-clip-path: circle(25% at 50% 31.6%); clip-path: circle(25% at 50% 31.6%); } }
@keyframes ovMid { from { -webkit-clip-path: inset(0 50% 0 50%); clip-path: inset(0 50% 0 50%); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } }
@keyframes ovSun { from { transform: translateY(14.222%); } to { transform: none; } } /* 128 of 900 units: fully below the horizon */
@keyframes glyph { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* a wheel, touch or key press fast-forwards the running animations (app.js). These rules are only the
   fallback for browsers without document.getAnimations */
.fx.ov-skip .hero-curtain { animation: fadeOut .45s ease both; }
.fx.ov-skip .hero-curtain i, .fx.ov-skip .hero-logo::before, .fx.ov-skip .hero-logo::after { animation: none; }
.fx.ov-skip .logo-draw { animation: fadeOut .35s ease both; }
.fx.ov-skip .hero-line, .fx.ov-skip .hero-cta, .fx.ov-skip .hdr, .fx.ov-skip .hero-cue { animation: fadeIn .45s ease both; }
.ov-done .hero-curtain, .ov-done .logo-draw { display: none !important; }
.ov-done .hero-logo::before, .ov-done .hero-logo::after { content: none; }

/* ------------------------------------------------------------ about: the arched windows open */
.about { background: var(--paper); padding: clamp(84px, 9vw, 130px) var(--gut) clamp(72px, 7vw, 110px); }
.about .h2 { font-size: clamp(36px, 3.9vw, 56px); }
.about-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.about-text { grid-column: 1 / -1; grid-row: 1; max-width: 34em; padding-bottom: 44px; }
.about-text .h2 { margin-bottom: 26px; }
.about-text p { color: var(--ink-2); }
.about-text p + p { margin-top: 1em; }
.win { position: relative; overflow: hidden; aspect-ratio: 4 / 5.2; border-radius: 999px 999px 0 0; background: var(--stone) center / cover no-repeat; }
.win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.win-1 { grid-column: 1; grid-row: 2; }
.win-2 { grid-column: 2; grid-row: 2; margin-top: 56px; }
@media (min-width: 768px) {
  .about-in { grid-template-columns: minmax(0, 3.2fr) minmax(0, 5fr) minmax(0, 3.2fr); gap: 0 clamp(28px, 4.5vw, 76px); align-items: start; }
  .about-text { grid-column: 2; grid-row: 1; padding: clamp(36px, 5vw, 80px) 0 0; }
  .win-1 { grid-column: 1; grid-row: 1; }
  .win-2 { grid-column: 3; grid-row: 1; margin-top: clamp(110px, 13vw, 200px); }
}
.fx .win { clip-path: inset(18% 12% 18% 12% round 999px 999px 0 0); transform: translateY(80px) scale(.96); transition: clip-path 1.6s var(--e), transform 1.6s var(--e); }
.fx .win img { transform: scale(1.18); transition: transform 2.2s var(--e); }
.fx .win.in { clip-path: inset(0 0 0 0 round 999px 999px 0 0); transform: none; }
.fx .win.in img { transform: scale(1.06); }
/* beside the text (768 px and up) the windows follow it; on phones they sit below it, so they open at once */
.fx .win-1, .fx .win-1 img { transition-delay: .1s; }
.fx .win-2, .fx .win-2 img { transition-delay: .25s; }
@media (min-width: 768px) {
  .fx .win-1, .fx .win-1 img { transition-delay: .55s; }
  .fx .win-2, .fx .win-2 img { transition-delay: .75s; }
}

/* ------------------------------------------------------------ rooms */
.rooms { background: var(--sand); padding-bottom: clamp(48px, 7vw, 110px); }
.rooms-band { max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: clamp(80px, 9vw, 132px) var(--gut) clamp(26px, 3vw, 40px); }
.rooms-head { display: grid; gap: 22px; }
.rooms-intro { max-width: 34em; color: var(--ink-2); }
.picker { display: flex; flex-wrap: wrap; gap: 6px 52px; margin-top: clamp(34px, 4vw, 56px); padding-top: 14px; border-top: 1px solid var(--hair); }
.pk-group { display: flex; align-items: baseline; gap: 22px; min-width: 0; }
.pk-label { flex: none; font: 500 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.pk-row { display: flex; flex-wrap: wrap; gap: 0 24px; }
.pk { position: relative; display: inline-block; padding: 13px 0 13px; font: 400 16px/1.2 var(--sans); color: var(--ink-2); text-decoration: none; transition: color .4s; }
.pk::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--e-sw); }
.pk::before { content: ''; position: absolute; top: 0; bottom: 0; left: -10px; right: -10px; } /* a 44 px target for short names */
.pk:hover { color: var(--ink); }
.pk:hover::after { transform: scaleX(.35); }
.js .pk[aria-current="true"] { color: var(--ink); }
.js .pk[aria-current="true"]::after { transform: none; height: 2px; background: var(--gold-ink); }
@media (min-width: 1024px) {
  .rooms-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 60px; }
  .rooms-intro { padding-bottom: 8px; }
}
@media (max-width: 767px) {
  /* every room name in view: suites and villas each wrap into plain rows */
  .picker { display: grid; gap: 8px; margin: 30px 0 0; padding: 10px 0 0; }
  .pk-group { flex-wrap: wrap; gap: 0 16px; }
  .pk-row { flex-wrap: wrap; gap: 0 20px; }
  .pk { white-space: nowrap; }
}

.stage { position: relative; outline: none; }
.stage-media { position: relative; overflow: hidden; background: var(--stone); }
.frames { position: relative; }
.frames img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background-size: cover; background-position: center; }
.stage-nav, .card-top { display: none; }
.stage-card { position: relative; }
/* without scripting: one photo, then every room as a list */
html:not(.js) .frames:not(:first-child) { display: none; }
html:not(.js) .frames img:not(:first-child) { display: none; }
html:not(.js) .frames img { max-height: 70vh; }
html:not(.js) .cards { max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: 32px var(--gut) 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
html:not(.js) .card { background: var(--paper); padding: 26px 26px 24px; }

.card-name { font: 400 clamp(27px, 2.4vw, 36px)/1.08 var(--serif); letter-spacing: -.01em; }
.card-sub { display: block; margin-top: 6px; font: italic 400 .66em/1.2 var(--serif); color: var(--ink-2); }
.card-line { margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.card-meta { margin-top: 14px; font: 500 14px/1.4 var(--sans); letter-spacing: .06em; color: var(--ink); }
.card-meta span { color: var(--gold); padding: 0 .3em; }
.card-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.price { font: 400 22px/1.2 var(--serif); color: var(--ink); }

/* with scripting: the stage */
.js .stage-media { height: 64vh; height: 64svh; min-height: 420px; max-height: 760px; }
.js .frames { position: absolute; inset: 0; }
.js .frames.on { z-index: 2; }
.js .frames.out { z-index: 1; }
.js .frames img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; opacity: 0; transform: scale(1.08); transition: opacity 1.1s ease, transform 6.5s cubic-bezier(.25, .6, .3, 1); }
.js .frames img.on { opacity: 1; transform: scale(1.02); z-index: 2; }
/* the outgoing photo holds at full strength under the incoming one, and its settle keeps running (no snap) */
.js .frames img.was { opacity: 1; z-index: 1; transform: scale(1.02); transition: transform 6.5s cubic-bezier(.25, .6, .3, 1); }
.js .stage-nav { display: flex; position: absolute; z-index: 4; right: var(--gut); bottom: 22px; gap: 10px; }
.st-btn, .rn { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(34, 35, 35, .16); background: rgba(246, 242, 234, .94); color: var(--ink); cursor: pointer; transition: background-color .4s var(--e), color .4s var(--e), border-color .4s, transform .5s var(--e); }
.st-btn:hover, .rn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.st-btn svg, .rn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.js .stage-card { position: relative; z-index: 5; margin: -56px var(--gut) 0; padding: 22px 22px 24px; }
.card-bg { display: none; }
/* the paper panel scales (transform only) to the active room's height; its top edge stays put */
.js .card-bg { display: block; position: absolute; inset: 0; background: var(--paper); box-shadow: 0 1px 0 var(--hair), 0 24px 60px -34px rgba(60, 46, 20, .4); transform-origin: 50% 0; transform: scaleY(var(--k, 1)); transition: transform .8s var(--e); }
.js .card-top, .js .cards { position: relative; }
.js .card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dashes { display: flex; gap: 6px; flex: 1; }
.dashes i { position: relative; flex: none; width: 26px; height: 2px; background: rgba(34, 35, 35, .14); overflow: hidden; }
.dashes i b { position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.dashes i.done b { transform: none; }
.dashes i.on b { transform: none; }
.dashes.playing i.on b { animation: dashfill var(--iv, 4200ms) linear both; }
.dashes.held i.on b { animation-play-state: paused; }
@keyframes dashfill { from { transform: scaleX(0); } to { transform: none; } }
.st-pause { width: 44px; height: 44px; margin: -10px 0; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--ink-2); border-radius: 50%; }
.st-pause:hover { color: var(--ink); }
.st-pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.st-pause .i-play { display: none; fill: currentColor; stroke: none; }
.st-pause[aria-pressed="true"] .i-play { display: block; }
.st-pause[aria-pressed="true"] .i-pause { display: none; }
.js .cards { display: grid; }
.js .card { grid-area: 1 / 1; align-self: start; clip-path: inset(0 0 100% 0); transition: clip-path .5s var(--e-sw); }
.js .card.on { clip-path: inset(0 0 0 0); transition: clip-path .85s var(--e) .28s; }
.js .card > * { transition: transform .9s var(--e) .3s; }
.js .card:not(.on) > * { transform: translateY(14px); transition: transform .4s; }
@media (min-width: 768px) {
  .js .stage-media { height: 80vh; height: 78svh; min-height: 540px; max-height: 900px; }
  .js .stage-card { position: absolute; left: var(--gut); top: calc(100% - 120px); margin: 0; width: min(460px, 44vw); padding: 26px 30px 28px; }
  .rooms { padding-bottom: clamp(150px, 15vw, 230px); }
  .js .stage-nav { bottom: 28px; }
}
@media (max-width: 767px) {
  .js .stage-nav { bottom: 76px; right: var(--gut); }
  .st-btn { width: 46px; height: 46px; }
}

/* ------------------------------------------------------------ experiences rail */
.places { background: var(--paper); padding: clamp(84px, 10vw, 140px) 0 0; overflow: hidden; }
.places-head { max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); display: grid; gap: 22px; }
.places-head p { color: var(--ink-2); max-width: 30em; }
.rail-nav { display: none; gap: 10px; }
@media (min-width: 900px) {
  .places-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto; align-items: end; gap: 48px; }
  .places-head p { padding-bottom: 6px; }
  .rail-nav { display: flex; padding-bottom: 4px; }
}
.rail { margin-top: clamp(40px, 5vw, 70px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 var(--gut); -webkit-overflow-scrolling: touch; outline: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -2px; }
.rail-track { display: flex; gap: clamp(18px, 2vw, 30px); width: max-content; padding: 10px var(--gut) 40px; will-change: transform; }
.pc { flex: none; width: min(76vw, 340px); scroll-snap-align: start; }
.js .pc { will-change: transform; }
@media (min-width: 768px) { .pc { width: clamp(280px, 27vw, 410px); } .pc:nth-child(even) { margin-top: 64px; } }
.pc-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone) center / cover no-repeat; }
.pc:nth-child(3n+2) .pc-media { aspect-ratio: 3 / 4; }
.pc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.pc h3 { margin-top: 20px; font: 400 clamp(24px, 2vw, 29px)/1.15 var(--serif); }
.pc h3::before { content: ''; display: block; width: 72px; height: 1px; margin-bottom: 16px; background: var(--gold); transform: scaleX(.4445); transform-origin: 0 50%; transition: transform .7s var(--e-sw); }
.pc:hover h3::before { transform: none; }
.pc p { margin-top: 8px; font-size: 16px; line-height: 1.62; color: var(--ink-2); max-width: 24em; }
/* the places without photos: an open text grid under the rail, with the hotel's banana leaf once, faint, in a corner */
.places-more { position: relative; isolation: isolate; max-width: calc(var(--max) + var(--gut) * 2); margin: clamp(20px, 3vw, 44px) auto 0; padding: 0 var(--gut) clamp(40px, 5vw, 76px); display: grid; gap: 34px clamp(40px, 6vw, 96px); }
.places-more::after {
  content: ''; position: absolute; z-index: -1; right: calc(var(--gut) * -1); bottom: -6%; width: min(560px, 74vw); aspect-ratio: 705 / 429;
  background: var(--sand-b); opacity: .5; pointer-events: none;
  -webkit-mask: url(leaf-a.webp) right bottom / contain no-repeat; mask: url(leaf-a.webp) right bottom / contain no-repeat;
  transform: scaleX(-1) rotate(-8deg);
}
.pm h3 { font: 400 26px/1.15 var(--serif); }
.pm h3::before { content: ''; display: block; width: 32px; height: 1px; margin-bottom: 14px; background: var(--gold); }
.pm p { margin-top: 8px; font-size: 16px; line-height: 1.62; color: var(--ink-2); max-width: 30em; }
@media (min-width: 768px) { .places-more { grid-template-columns: 1fr 1fr; } }
html:not(.js) .rail-nav { display: none !important; }
.js .rail { cursor: grab; }
.js .rail.drag { cursor: grabbing; scroll-snap-type: none; }
.js .rail.drag a, .js .rail.drag img { pointer-events: none; }
.rail img { -webkit-user-drag: none; user-select: none; }

/* ------------------------------------------------------------ banner: their beachfront from above, no words on the photo */
.banner { margin: 0; background: var(--paper); }
.bn-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--stone) center / cover no-repeat; }
.bn-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.fx .bn-media img { will-change: transform; }
.bn-cap { max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: 26px var(--gut) clamp(60px, 7vw, 104px); font: italic 400 clamp(23px, 2.1vw, 30px)/1.3 var(--serif); color: var(--ink); }
.bn-cap::before { content: ''; display: block; width: 32px; height: 1px; margin-bottom: 18px; background: var(--gold); }
@media (min-width: 768px) { .bn-media { aspect-ratio: 21 / 9; max-height: 88vh; } }

/* ------------------------------------------------------------ KohCo Beach */
.kohco { position: relative; background: var(--stone); display: grid; }
.kc-photo { position: relative; overflow: hidden; height: 56vh; height: 56svh; min-height: 340px; max-height: 560px; }
.kc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx .kc-photo img { animation: kb 22s ease-in-out infinite alternate; animation-play-state: paused; }
.fx .kc-photo.vis img { animation-play-state: running; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.08) translate(-1.5%, -1%); } }
.kc-panel { position: relative; padding: clamp(64px, 8vw, 120px) var(--gut) clamp(70px, 8vw, 120px); overflow: hidden; }
.kc-panel::before { content: ''; position: absolute; right: -7%; bottom: -5%; width: 52%; aspect-ratio: 638 / 351; background: url(leaf-c.webp) left bottom / contain no-repeat; transform: scaleX(-1); opacity: .72; pointer-events: none; }
.kc-panel > * { position: relative; }
.kc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.kc-logo { width: clamp(136px, 13vw, 184px); color: var(--gold-ink); font-size: 16px; padding-bottom: 4px; }
.kc-logo svg { width: 100%; height: auto; }
.kc-portrait { flex: none; width: min(34vw, 190px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--sand-b); }
.kc-portrait img { width: 100%; height: 100%; object-fit: cover; }
.kc-big { margin-top: clamp(30px, 3.6vw, 46px); font: 400 clamp(34px, 3.8vw, 56px)/1.06 var(--serif); letter-spacing: -.012em; }
.kc-big em { display: block; font-size: .92em; }
.kc-copy { margin-top: clamp(20px, 2.4vw, 30px); max-width: 31em; }
.kc-copy p { color: var(--ink-2); }
.kc-copy p + p { margin-top: 1em; }
.kc-copy .link { color: var(--ink); font-weight: 500; letter-spacing: .04em; }
@media (min-width: 1024px) {
  .kohco { grid-template-columns: 1fr 1fr; min-height: min(100vh, 880px); }
  .kc-photo { height: auto; min-height: 0; max-height: none; }
  .kc-panel { display: flex; flex-direction: column; justify-content: center; padding-left: clamp(48px, 5.5vw, 96px); padding-right: clamp(40px, 5.5vw, 96px); }
}

/* ------------------------------------------------------------ booking */
.book { background: var(--paper); padding: clamp(84px, 10vw, 148px) var(--gut) clamp(76px, 9vw, 130px); }
.book-in { max-width: var(--max); margin: 0 auto; display: grid; gap: 40px; }
.book-head p { margin-top: 22px; color: var(--ink-2); max-width: 26em; }
.bk { display: grid; gap: 26px; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld-l { font: 500 13px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.fld input[type="date"] {
  width: 100%; min-width: 0; min-height: 52px; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(34, 35, 35, .32); border-radius: 0;
  background: transparent; color: var(--ink); font: 400 19px/1.2 var(--serif); letter-spacing: .01em; -webkit-appearance: none; appearance: none;
  transition: border-color .4s;
}
.fld input[type="date"]:focus { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }
.fld input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.fld input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.step-ctl { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid rgba(34, 35, 35, .32); }
.step-ctl input { width: 3em; min-width: 0; height: 44px; border: 0; background: transparent; text-align: center; font: 400 22px/1 var(--serif); color: var(--ink); -moz-appearance: textfield; appearance: textfield; padding: 0; }
.step-ctl input::-webkit-outer-spin-button, .step-ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-ctl input:focus { outline: none; }
.step-ctl:focus-within { border-bottom-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }
.sb { position: relative; width: 44px; height: 44px; border: 1px solid rgba(34, 35, 35, .18); border-radius: 50%; background: transparent; cursor: pointer; transition: background-color .35s, border-color .35s, color .35s; }
.sb i::before, .sb i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.4px; margin: -.7px 0 0 -6px; background: currentColor; }
.sb-plus i::after { transform: rotate(90deg); }
.sb i::after { display: none; }
.sb-plus i::after { display: block; }
.sb:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sb:disabled { opacity: .35; cursor: default; }
html:not(.js) .sb { display: none; }
html:not(.js) .step-ctl input { width: 100%; text-align: left; -moz-appearance: auto; appearance: auto; }
.bk-err { min-height: 0; color: #8A2E1C; font-size: 15px; }
.bk-err:empty { display: none; }
.bk-act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.bk-act .btn { min-width: 220px; }
.bk-act .link { font-size: 16px; color: var(--ink); }
.vbc { color: var(--ink-2); font-size: 15px; max-width: 40em; padding-top: 22px; border-top: 1px solid var(--hair); }
.vbc .link { display: flex; width: max-content; margin-top: 4px; color: var(--ink); }
@media (min-width: 1024px) {
  .book-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px 96px; align-items: start; }
  .bk { padding-top: 10px; }
  .vbc { grid-column: 2; }
}
@media (max-width: 420px) { .bk-row { gap: 14px; } .fld input[type="date"] { font-size: 17px; } }

/* ------------------------------------------------------------ closing: corner images move with the scroll */
.closing { position: relative; background: var(--sand); overflow: hidden; padding: 64px var(--gut); display: grid; gap: 40px; justify-items: center; }
.cc { overflow: hidden; background: var(--stone) center / cover no-repeat; }
.cc img { width: 100%; height: 100%; object-fit: cover; }
.cc-tl, .cc-br { display: none; }
.cc-tr { width: 100%; aspect-ratio: 3 / 2; order: 1; }
.cc-bl { width: 82%; aspect-ratio: 3 / 2; order: 3; justify-self: end; }
.closing-in { order: 2; text-align: center; max-width: 16em; }
.closing .h2 em { color: var(--ink); }
.closing-cta { margin-top: 32px; }
@media (min-width: 768px) {
  .closing { display: block; height: 100vh; min-height: 680px; max-height: 1000px; padding: 0; }
  .cc { position: absolute; display: block; will-change: transform; }
  .cc-tl { left: 4vw; top: 7%; width: min(19vw, 270px); aspect-ratio: 2 / 3; }
  .cc-tr { right: 6vw; top: 12%; width: min(25vw, 360px); aspect-ratio: 3 / 2; }
  .cc-bl { left: 8vw; bottom: 9%; width: min(24vw, 340px); aspect-ratio: 3 / 2; }
  .cc-br { right: 4vw; bottom: 6%; width: min(17vw, 240px); aspect-ratio: 2 / 3; }
  .closing-in { position: absolute; left: 50%; top: 50%; width: min(44vw, 640px); max-width: none; transform: translate(-50%, -50%); }
  .closing .h2 { font-size: clamp(36px, 4vw, 60px); }
}

/* ------------------------------------------------------------ footer: the sun sets */
.foot { background: var(--sand-b); color: var(--ink); padding: clamp(64px, 8vw, 110px) var(--gut) 24px; overflow: hidden; }
.foot-in { max-width: var(--max); margin: 0 auto; display: grid; gap: 44px; }
.foot-sign { display: flex; align-items: center; gap: 22px; }
.foot-sym { flex: none; width: 70px; height: auto; color: var(--gold-ink); overflow: visible; }
.foot-line { font: 400 clamp(28px, 3vw, 44px)/1.08 var(--serif); letter-spacing: -.01em; }
.foot-line em { display: block; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; }
.fc-h { font: 500 13px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.fc p { font-size: 16px; line-height: 1.65; color: var(--ink); }
.fc p + p { margin-top: 0; }
.foot-word { width: min(64vw, 820px); margin: clamp(56px, 7vw, 100px) auto 0; color: var(--gold); }
.foot-word svg { width: 100%; height: auto; }
.foot-base { max-width: var(--max); margin: clamp(30px, 4vw, 52px) auto 0; padding-top: 18px; border-top: 1px solid rgba(34, 35, 35, .16); display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink); }
.foot-base .demo { color: var(--ink-2); }
@media (min-width: 900px) {
  .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 60px; align-items: start; }
  .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-sym { width: 84px; }
}

/* ------------------------------------------------------------ reduced motion: no movement, crossfades only */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .js .frames img, .js .frames img.on { transform: none !important; transition: opacity .9s ease !important; }
  .js .card, .js .card.on, .js .card > * { transition: none !important; transform: none !important; }
  .pc, .pc-media img, .rail-track, .cc, .hero-px, .bn-media img { transform: none !important; }
  .btn, .link, .btn-line, .pk::after, .pc h3::before { transition-duration: .001ms !important; }
  /* nothing slides: the header Book is there from the start, a quiet white outline over the hero */
  .js .menu li, .js .hdr-book, .hdr-logo { transform: none !important; }
  .js .hdr-book { transition: background-color .3s ease, color .3s ease, box-shadow .3s ease !important; }
  .js .hdr:not(.sc) .hdr-book { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); }
  .js.menu-open .hdr .hdr-book { background: var(--gold); color: var(--ink); box-shadow: none; }
  .hdr-logo { transition: opacity .3s ease !important; }
  .js .card-bg { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
  .js .menu { clip-path: none !important; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s !important; }
  .js.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .3s ease !important; }
}
/* failsafe or hidden tab at load: show everything as it rests */
.no-fx *, .no-fx *::before, .no-fx *::after { animation: none !important; transition: none !important; }