/* ═══════════════════════════════════════════════════════════════
   HOTEL LE PORT — Ludhiana
   assets/css/site.css

   ART DIRECTION
   Light, warm and quiet. The page is porcelain rather than white,
   and it moves through four barely-there washes — sand, blush,
   sage, powder — so that scrolling feels like walking from one
   room into the next rather than reading one long document.
   Colour is held back almost everywhere so the photographs carry
   it. One deep tone appears once, at the very bottom, to land it.

   Type is a high-contrast garamond set large and airy against a
   geometric sans in wide capitals for every small label. Nothing
   is bold. Nothing is black. The luxury is in the spacing.

   Contents
     00  Typefaces          09  The hotel
     01  Tokens             10  Rooms
     02  Reset & base       11  Facilities
     03  Type & pieces      12  Gallery + lightbox
     04  Buttons            13  Getting here
     05  Curtain            14  Reserving
     06  Header             15  Footer + floating
     07  Hero               16  Reveal
     08  Board              17  Responsive
   ═══════════════════════════════════════════════════════════════ */


/* ── 00 TYPEFACES ─────────────────────────────────────────────
   Self-hosted. The page renders the same on a slow connection as
   on a fast one, no third party is told who visited, and it works
   opened straight off a USB stick. Both families are SIL Open Font
   Licence; the licences travel with them in assets/fonts/.
   ───────────────────────────────────────────────────────────── */
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{
  font-family:"Jost";
  src:url("../fonts/jost-var.woff2") format("woff2-variations"),
      url("../fonts/jost-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}


/* ── 01 TOKENS ────────────────────────────────────────────────── */
:root{
  /* grounds — each band of the page sits on one of these */
  --porcelain:#FCFAF7;
  --sand:#F6F0E7;
  --linen:#F1E9DE;
  --blush:#F4E6DF;
  --sage:#E6EBE2;
  --powder:#E2EAEE;
  --forest:#39463E;        /* the one deep tone, used once */

  /* marks */
  --ink:#32342E;           /* headings */
  --body:#585A51;          /* running text */
  --muted:#67675E;         /* labels, captions — dark enough to pass AA */
  --hair:#E6DED2;          /* every rule on the page */
  --hair-soft:#EFE8DE;

  /* accents, all muted on purpose */
  --clay:#C08A73;
  --clay-deep:#8F5B42;
  --moss:#7E8F7C;
  --brass:#D9BC86;        /* only ever used on the dark footer */
  --brass-deep:#9C7D46;

  --shell:1280px;
  --band:clamp(5.5rem,11vw,10rem);
  --r-xs:2px;
  --r-sm:4px;
  --r-md:14px;
  --arch:clamp(110px,20vw,260px);

  --f-display:"Cormorant","Cormorant Garamond",Garamond,Georgia,serif;
  --f-text:"Jost","Futura","Century Gothic",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.68,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}


/* ── 02 RESET & BASE ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

/* `hidden` has to beat every display rule below it — the call
   buttons stay switched off until a real number is set. */
[hidden]{display:none!important}

html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--porcelain);
  color:var(--body);
  font-family:var(--f-text);
  font-size:16.5px;
  font-weight:300;
  line-height:1.72;
  letter-spacing:.005em;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:1.5px solid var(--clay);outline-offset:4px;border-radius:1px}
::selection{background:var(--blush);color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:.9rem 1.4rem}
.skip:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.shell{width:min(100% - 2.8rem,var(--shell));margin-inline:auto}
.band{padding-block:var(--band);position:relative}


/* ── 03 TYPE & PIECES ─────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:300;
  color:var(--ink);
  margin:0;
  line-height:1.02;
  letter-spacing:-.012em;
  text-wrap:balance;
}
h2{font-size:clamp(2.5rem,5.2vw,4.4rem)}
h3{font-size:clamp(1.55rem,2.4vw,2.05rem);line-height:1.12;letter-spacing:-.008em}
h4{font-size:1.1rem}
em{font-style:italic}

p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}

.measure{max-width:56ch}
.lede{
  font-family:var(--f-display);
  font-size:clamp(1.3rem,2vw,1.72rem);
  font-weight:300;
  line-height:1.4;
  letter-spacing:-.004em;
  color:var(--ink);
  max-width:38ch;
}

/* every small label on the page — wide capitals, never mono */
.eyebrow,.sect-num,.room-kicker,.card-kicker,.flap dt,.ledger span,
.card-rows span,.foot h4,.room-tag,.hero-plate figcaption,
.dist td span,.sig small,.hero-scroll-label,.fac-n{
  font-family:var(--f-text);
  font-weight:400;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  line-height:1.5;
}

.sect-num{color:var(--clay-deep);margin:0 0 1.8rem;display:flex;align-items:center;gap:1rem}
.sect-num::after{content:"";height:1px;flex:1;max-width:90px;background:var(--clay);opacity:.42}

.sect-head{margin-bottom:clamp(3.5rem,7vw,6rem);max-width:46rem}
.sect-head .lede{margin-top:1.8rem}

.eyebrow{color:var(--clay-deep);display:inline-flex;align-items:center;gap:.8rem}
.tick{
  width:5px;height:5px;border-radius:50%;background:var(--clay);
  animation:pulse 3.2s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(192,138,115,.45)}
  50%{box-shadow:0 0 0 7px rgba(192,138,115,0)}
}

/* photo frames */
.plate{margin:0;overflow:hidden;background:var(--linen);position:relative;border-radius:var(--r-md)}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out)}
.plate-arch{border-radius:var(--arch) var(--arch) var(--r-md) var(--r-md)}


/* ── 04 BUTTONS ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 2.2rem;
  font-family:var(--f-text);
  font-size:.74rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  border-radius:100px;
  border:1px solid var(--ink);
  background:var(--ink);color:var(--porcelain);
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--clay);
  transform:translateY(101%);
  transition:transform .5s var(--ease-out);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{border-color:var(--clay);color:#fff}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

.btn-sm{padding:.82rem 1.6rem;font-size:.68rem}
.btn-fill{background:var(--ink);color:var(--porcelain);border-color:var(--ink)}

/* WhatsApp: a solid glyph, so it opts out of the stroked icon rule above */
.btn-wa svg{fill:currentColor;stroke:none;width:16px;height:16px}

/* Instagram: drawn in outline, so it sits with the stroked icons */
.btn-ig svg{width:16px;height:16px}

.btn-line{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn-line:hover{color:#fff;border-color:var(--clay)}

/* the one dark ground needs its outline inverted */
.foot .btn-line{color:var(--sand);border-color:rgba(246,240,231,.32)}


/* ── 05 CURTAIN ───────────────────────────────────────────────── */
.curtain{
  position:fixed;inset:0;z-index:999;
  background:var(--porcelain);color:var(--clay);
  display:grid;place-content:center;justify-items:center;gap:1.6rem;
  transition:opacity .8s var(--ease),visibility .8s;
}
.curtain-arch{width:96px;height:74px}
.curtain-arch path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s var(--ease-out) forwards}
.curtain-arch path:nth-child(2){animation-delay:.16s}
@keyframes draw{to{stroke-dashoffset:0}}
.curtain-word{
  font-family:var(--f-display);font-size:1.5rem;font-weight:300;
  letter-spacing:.3em;color:var(--ink);
  opacity:0;animation:fadeUp .8s var(--ease) .5s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body:not(.is-loading) .curtain{opacity:0;visibility:hidden;pointer-events:none}


/* ── 06 HEADER ────────────────────────────────────────────────── */
.top{
  position:fixed;top:0;left:0;right:0;z-index:80;
  color:var(--ink);
  border-bottom:1px solid transparent;
  transition:background .55s var(--ease),backdrop-filter .55s,border-color .55s;
}
.top.is-stuck{
  background:rgba(252,250,247,.82);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--hair);
}
.top-in{display:flex;align-items:center;gap:1.5rem;min-height:88px}

.mark{display:flex;align-items:center;gap:.9rem;margin-right:auto}
.mark-glyph{width:32px;height:32px;color:var(--clay);flex:none}
.mark-text{display:block;line-height:1}
.mark-name{
  display:block;white-space:nowrap;
  font-family:var(--f-display);font-weight:400;
  font-size:1.5rem;letter-spacing:.04em;color:var(--ink);
}
.mark-sub{
  display:block;margin-top:.45rem;
  font-family:var(--f-text);font-weight:400;
  font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);
}

.nav{display:flex;gap:2rem;align-items:center}
.nav a{
  font-size:.72rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--body);position:relative;padding:.4rem 0;
  display:inline-flex;align-items:baseline;gap:.5rem;
  transition:color .35s var(--ease);
}
.nav a i{
  font-style:normal;font-size:.56rem;letter-spacing:.1em;
  color:var(--clay);opacity:0;transform:translateY(-2px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--clay);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nav a:hover,.nav a.is-current{color:var(--ink)}
.nav a:hover i,.nav a.is-current i{opacity:1;transform:none}
.nav a:hover::after,.nav a.is-current::after{transform:scaleX(1);transform-origin:left}

/* Contact in the top bar. Quiet by default — it sits beside the
   Reserve button without competing with it for attention. */
.top-contact{display:flex;align-items:center;gap:1rem;flex:none}
.top-wa{
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  font-family:var(--f-text);font-size:.74rem;letter-spacing:.08em;
  color:var(--body);transition:color .35s var(--ease);
}
.top-wa svg{width:15px;height:15px;fill:currentColor;flex:none;color:var(--clay-deep)}
.top-wa:hover{color:var(--ink)}
.top-ig{
  display:inline-grid;place-items:center;flex:none;
  width:34px;height:34px;border:1px solid var(--hair);border-radius:50%;
  color:var(--body);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.top-ig svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3}
.top-ig:hover{color:var(--clay-deep);border-color:var(--clay)}

.top-cta{flex:none}

.burger{
  display:none;background:none;border:1px solid var(--hair);
  width:46px;height:42px;border-radius:100px;cursor:pointer;padding:0;
}
.burger span{display:block;width:16px;height:1px;background:var(--ink);margin:0 auto;transition:transform .4s var(--ease)}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

.top-progress{
  position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  transform:scaleX(0);transform-origin:left;background:var(--clay);
}


/* ── 07 HERO ──────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding-block:clamp(8rem,14vh,11rem) clamp(5rem,10vh,8rem);
  background:var(--porcelain);
  overflow:hidden;isolation:isolate;
}
/* the WebGL wash sits under everything, barely there */
.hero-canvas{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block}
.hero-wash{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 50%,transparent 40%,rgba(252,250,247,.55) 100%);
}

.hero-in{
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(2.5rem,6vw,6rem);align-items:center;
  position:relative;z-index:2;width:min(100% - 2.8rem,var(--shell));
}
.hero .eyebrow{margin-bottom:2.4rem}

.hero-title{
  font-size:clamp(3rem,6.6vw,6rem);
  font-weight:300;
  line-height:1.0;
  letter-spacing:-.02em;
}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero-title .line>span{display:block}
.hero-title em{color:var(--clay-deep);font-style:italic}

.hero-lede{
  margin-top:2.2rem;max-width:44ch;
  font-size:1.02rem;line-height:1.78;color:var(--body);
}
.hero-acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.8rem}

/* the building, framed rather than cropped into a letterbox */
.hero-plate{
  margin:0;position:relative;
  will-change:transform;
}
.hero-plate img{
  width:100%;height:min(62svh,40rem);object-fit:cover;object-position:50% 58%;
  border-radius:var(--arch) var(--arch) var(--r-md) var(--r-md);
  filter:saturate(.86) contrast(1.02);
}
.hero-plate::after{
  content:"";position:absolute;inset:0 0 3.4rem;pointer-events:none;
  border-radius:var(--arch) var(--arch) var(--r-md) var(--r-md);
  box-shadow:inset 0 0 0 1px rgba(50,52,46,.07);
}
.hero-plate figcaption{
  display:flex;justify-content:space-between;gap:1rem;
  margin-top:1.1rem;color:var(--muted);
}
.hero-plate figcaption i{font-style:normal;color:var(--clay-deep)}

/* Sits in the right margin, clear of both the buttons and the
   caption, turned on its side so it takes almost no width. */
.hero-scroll{
  position:absolute;right:clamp(.7rem,1.8vw,1.5rem);
  bottom:clamp(2rem,6vh,4rem);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  color:var(--muted);transition:color .35s var(--ease);
}
.hero-scroll-label{writing-mode:vertical-rl;letter-spacing:.3em}
.hero-scroll:hover{color:var(--ink)}
.hero-scroll-rail{width:1px;height:54px;background:var(--hair);position:relative;overflow:hidden;order:2}
.hero-scroll-dot{position:absolute;left:-1px;top:0;width:3px;height:3px;border-radius:50%;background:var(--clay);animation:fall 2.6s var(--ease) infinite}
@keyframes fall{0%{transform:translateY(-6px);opacity:0}25%{opacity:1}100%{transform:translateY(54px);opacity:0}}
.hero-scroll-label{order:1}


/* ── 08 BOARD ─────────────────────────────────────────────────── */
.board{background:var(--sand);padding-block:clamp(2.6rem,5vw,3.8rem)}
.board-head{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--f-text);font-weight:400;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);
  padding-bottom:1.6rem;margin-bottom:0;
  border-bottom:1px solid var(--hair);
}
.board-lamp{
  width:5px;height:5px;border-radius:50%;background:var(--moss);
  animation:blink 4s steps(1) infinite;
}
@keyframes blink{0%,93%{opacity:1}94%,100%{opacity:.3}}
.board-title{color:var(--clay-deep)}
.board-clock{margin-left:auto;color:var(--body)}

.board-grid{
  margin:0;display:grid;grid-template-columns:repeat(4,1fr);
}
.flap{padding:1.9rem 1.6rem 1.7rem;border-right:1px solid var(--hair)}
.flap:first-child{padding-left:0}
.flap:last-child{border-right:0;padding-right:0}
.flap dt{color:var(--muted);margin-bottom:.9rem}
.flap dd{margin:0;perspective:400px}
.flap-val{
  display:block;
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.7rem,2.8vw,2.3rem);
  letter-spacing:-.01em;line-height:1.05;
  color:var(--ink);
}
.flap-val.is-flipping{animation:flip .5s var(--ease)}
@keyframes flip{
  0%{transform:rotateX(0);opacity:1}
  49%{transform:rotateX(-86deg);opacity:.2}
  51%{transform:rotateX(86deg);opacity:.2}
  100%{transform:rotateX(0);opacity:1}
}


/* ── 09 THE HOTEL ─────────────────────────────────────────────── */
.stay{background:var(--porcelain)}
.stay-grid{display:grid;grid-template-columns:.84fr 1.16fr;gap:clamp(2.5rem,6.5vw,7rem);align-items:center}
.stay-media{position:relative}
.stay-media .plate-arch{aspect-ratio:3/4}
.plate-inset{
  position:absolute;right:-14%;bottom:-7%;
  width:54%;aspect-ratio:4/3;
  border:8px solid var(--porcelain);
  border-radius:var(--r-md);
  box-shadow:0 26px 60px -30px rgba(50,52,46,.3);
}

.stay-copy h2{margin-bottom:2.2rem}
.stay-copy .lede{margin-bottom:1.8rem;max-width:34ch}

.ledger{
  list-style:none;margin:3rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;
  border-top:1px solid var(--hair);
}
.ledger li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--hair);
}
.ledger span{color:var(--muted)}
.ledger b{
  font-family:var(--f-display);font-weight:400;font-size:1.12rem;
  color:var(--ink);text-align:right;letter-spacing:0;
}

.sig{margin-top:2.8rem;font-family:var(--f-display);font-size:1.5rem;font-weight:400;color:var(--ink)}
.sig small{display:block;margin-top:.6rem;color:var(--muted)}


/* ── 10 ROOMS ─────────────────────────────────────────────────── */
.rooms{background:var(--sand)}
.room-stack{display:grid;gap:clamp(4rem,9vw,8rem)}
.room{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5.5vw,5rem);align-items:center}
.room-media{position:relative}
.room-media .plate{aspect-ratio:5/4}
.room:hover .plate img{transform:scale(1.04)}
.room-flip .room-media{order:2}

.room-tag{
  position:absolute;top:1.1rem;left:1.1rem;
  background:rgba(252,250,247,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--clay-deep);
  padding:.5rem .95rem;border-radius:100px;
}

.room-kicker{color:var(--clay-deep);margin-bottom:1.1rem}
.room-body h3{font-size:clamp(2.1rem,3.6vw,3rem);margin-bottom:.7rem}
.room-for{
  font-size:.95rem;color:var(--muted);letter-spacing:.01em;
  margin-bottom:1.7rem;padding-bottom:1.7rem;border-bottom:1px solid var(--hair);
}

.specs{list-style:none;margin:2rem 0 2.4rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1.8rem}
.specs li{position:relative;padding-left:1.7rem;font-size:.94rem;color:var(--body)}
.specs li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:10px;height:10px;
  border:1px solid var(--clay);border-bottom:0;border-radius:7px 7px 0 0;
}

.rooms-note{
  margin-top:clamp(3.5rem,7vw,5.5rem);
  padding:2rem 2.4rem;
  background:var(--blush);
  border-radius:var(--r-md);
  display:flex;gap:1.3rem;align-items:flex-start;
  font-size:.97rem;color:var(--body);max-width:68ch;
}
.rooms-note b{font-weight:400;color:var(--ink)}
.rooms-note-i{
  flex:none;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--clay);color:var(--clay-deep);
  display:grid;place-content:center;
  font-family:var(--f-display);font-size:1rem;font-style:italic;
  margin-top:.1rem;
}


/* ── 11 FACILITIES ────────────────────────────────────────────── */
.facilities{background:var(--sage)}
.fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair)}
.fac{
  background:var(--sage);padding:2.8rem 2.2rem 2.6rem;
  position:relative;transition:background .5s var(--ease);
}
.fac:hover{background:var(--porcelain)}
.fac-n{position:absolute;top:1.8rem;right:1.9rem;color:var(--muted);opacity:.65}
.fac svg{
  width:28px;height:28px;margin-bottom:1.6rem;
  fill:none;stroke:var(--clay-deep);stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .55s var(--ease-out);
}
.fac:hover svg{transform:translateY(-4px)}
.fac h3{font-size:1.5rem;margin-bottom:.7rem}
.fac p{color:var(--body);font-size:.93rem;line-height:1.7}


/* ── 12 GALLERY + LIGHTBOX ────────────────────────────────────── */
.gallery{background:var(--porcelain)}
.gal{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(160px,18vw,240px);
  grid-auto-flow:dense;gap:16px;
}
.shot{
  padding:0;border:0;background:var(--linen);cursor:pointer;
  overflow:hidden;position:relative;border-radius:var(--r-md);
}
.shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out),filter .6s var(--ease);
  filter:saturate(.85);
}
.shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(50,52,46,.34),transparent 52%);
  opacity:0;transition:opacity .5s var(--ease);
}
.shot::before{
  content:"";position:absolute;z-index:2;right:1rem;bottom:1rem;
  width:34px;height:34px;border-radius:50%;
  background:rgba(252,250,247,.94);
  opacity:0;transform:scale(.7);
  transition:opacity .45s var(--ease),transform .45s var(--ease-out);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%2332342E' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.shot:hover img{transform:scale(1.055);filter:saturate(1)}
.shot:hover::after,.shot:hover::before{opacity:1}
.shot:hover::before{transform:scale(1)}
.shot-wide{grid-column:span 2}
.shot-tall{grid-row:span 2}

.lb{
  position:fixed;inset:0;z-index:200;
  background:rgba(250,246,241,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,5vw,4rem);
  opacity:0;transition:opacity .4s var(--ease);
}
.lb[hidden]{display:none}
.lb.is-open{opacity:1}
.lb-fig{margin:0;max-width:100%;display:flex;flex-direction:column;gap:1.2rem;align-items:center}
.lb-fig img{
  max-width:min(92vw,1280px);max-height:76vh;object-fit:contain;
  border-radius:var(--r-md);
  transform:scale(.97);opacity:0;
  transition:transform .55s var(--ease-out),opacity .45s var(--ease);
}
.lb.is-open .lb-fig img{transform:none;opacity:1}
.lb-fig figcaption{
  display:flex;gap:1.4rem;align-items:baseline;
  color:var(--body);font-family:var(--f-display);font-size:1.15rem;
}
.lb-fig figcaption i{
  font-style:normal;font-family:var(--f-text);font-size:.66rem;
  letter-spacing:.22em;color:var(--muted);
}
.lb-x,.lb-nav{
  position:absolute;background:var(--porcelain);cursor:pointer;
  border:1px solid var(--hair);color:var(--ink);
  width:52px;height:52px;border-radius:50%;
  display:grid;place-content:center;line-height:1;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.lb-x:hover,.lb-nav:hover{background:var(--blush);border-color:var(--clay)}
.lb-x{top:clamp(1rem,3vw,2.4rem);right:clamp(1rem,3vw,2.4rem);font-size:1.4rem}
.lb-nav{top:50%;transform:translateY(-50%);font-size:1.6rem}
.lb-prev{left:clamp(.6rem,3vw,2.4rem)}
.lb-next{right:clamp(.6rem,3vw,2.4rem)}


/* ── 13 GETTING HERE ──────────────────────────────────────────── */
.here{background:var(--powder)}
.here-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5.5vw,5rem);align-items:start}

/* A real map, not a diagram. Google's own tiles are far too
   saturated to sit beside this palette, so the frame desaturates
   and warms them — the standard treatment on hotel sites — while
   leaving the street names perfectly readable. */
.map{
  margin:0;position:sticky;top:112px;
  background:var(--porcelain);
  border:1px solid var(--hair);
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 24px 60px -40px rgba(50,52,46,.4);
}
.map-frame{
  display:block;width:100%;height:clamp(380px,56vh,580px);border:0;
  filter:saturate(.58) sepia(.14) contrast(.94) brightness(1.04);
}
.map figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:1.15rem 1.4rem;
  border-top:1px solid var(--hair);
  background:var(--porcelain);
  font-size:.82rem;color:var(--body);
}
.map figcaption a{
  color:var(--clay-deep);white-space:nowrap;
  border-bottom:1px solid var(--clay);padding-bottom:1px;
}
.map figcaption a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.dist{font-size:.95rem}
.dist tr{border-bottom:1px solid var(--hair)}
.dist tr:first-child{border-top:1px solid var(--hair)}
.dist th{text-align:left;font-weight:300;padding:1.25rem 1rem 1.25rem 0;color:var(--body);vertical-align:top}
.dist th i{font-style:normal;color:var(--muted);font-size:.86em}
.dist td{text-align:right;padding:1.25rem 0;vertical-align:top}
.dist td b{
  display:block;font-family:var(--f-display);font-weight:400;
  font-size:1.35rem;color:var(--ink);letter-spacing:0;line-height:1.2;
}
.dist td span{display:block;margin-top:.3rem;color:var(--muted);font-size:.6rem}
.dist .is-key th{color:var(--ink)}
.dist .is-key td b{color:var(--clay-deep);font-style:italic}

.addr{
  font-style:normal;margin-top:2.8rem;
  font-size:1rem;line-height:1.85;color:var(--body);
  padding-left:1.5rem;border-left:1px solid var(--clay);
}
.addr b{font-family:var(--f-display);font-weight:400;font-size:1.4rem;color:var(--ink);letter-spacing:.01em}
.here-acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}


/* ── 14 RESERVING ─────────────────────────────────────────────── */
.reserve{background:var(--blush)}
.reserve-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.reserve-copy h2{margin-bottom:2rem}

.steps{list-style:none;margin:3.5rem 0 0;padding:0}
.steps li{
  display:grid;grid-template-columns:auto 1fr;gap:1.6rem;
  padding:2rem 0;border-top:1px solid var(--hair);
}
.steps li:last-child{border-bottom:1px solid var(--hair)}
.step-n{
  width:38px;height:38px;flex:none;
  border:1px solid var(--clay);border-radius:50%;
  display:grid;place-content:center;
  font-family:var(--f-display);font-size:1.1rem;color:var(--clay-deep);
}
.steps h3{font-size:1.45rem;margin-bottom:.6rem}
.steps p{color:var(--body);font-size:.95rem;margin:0}
.steps b{color:var(--ink);font-weight:400}

.card{
  background:var(--porcelain);
  border:1px solid var(--hair);
  border-radius:var(--r-md);
  padding:clamp(2rem,3.2vw,3rem);
  position:sticky;top:120px;
}
.card-kicker{color:var(--clay-deep);margin-bottom:1.3rem}
.card h3{font-size:1.9rem;margin-bottom:2.2rem;line-height:1.1}
.card-rows{list-style:none;margin:0 0 2.4rem;padding:0;border-top:1px solid var(--hair)}
.card-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--hair)}
.card-rows span{color:var(--muted)}
.card-rows b{font-family:var(--f-display);font-weight:400;font-size:1.15rem;color:var(--ink)}
.card-acts{display:grid;gap:.7rem}
.card-acts .btn{width:100%}
.card-foot{margin-top:1.5rem;font-size:.82rem;color:var(--muted);text-align:center;letter-spacing:.02em}


/* ── 15 FOOTER + FLOATING ─────────────────────────────────────── */
.foot{background:var(--forest);color:rgba(246,240,231,.74);font-size:.92rem}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:3rem;padding-block:clamp(4rem,8vw,6.5rem) 3.5rem}
.foot .mark-name{color:var(--sand);font-size:1.7rem}
.foot .mark-sub{margin-bottom:1.8rem;color:rgba(246,240,231,.62)}
.foot p{margin-bottom:1rem;line-height:1.85}
.foot-mail a{border-bottom:1px solid rgba(195,162,104,.6);padding-bottom:2px;color:var(--sand)}
.foot-mail a:hover{border-bottom-color:var(--brass);color:#fff}
.foot h4{
  color:var(--sand);font-family:var(--f-text);font-weight:400;
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  margin-bottom:1.4rem;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.foot-col b{color:var(--sand);font-weight:300}
.foot-col a{transition:color .35s var(--ease)}
.foot-col a:hover{color:var(--brass)}

.legal{
  border-top:1px solid rgba(246,240,231,.14);
  padding-block:1.8rem 2.2rem;
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font-size:.76rem;letter-spacing:.06em;color:rgba(246,240,231,.68);
}
.legal a{color:var(--brass)}
.legal a:hover{color:#fff}

.float{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--ink);color:var(--porcelain);
  padding:1rem 1.7rem;border-radius:100px;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 18px 40px -18px rgba(50,52,46,.45);
  transform:translateY(140%);
  transition:transform .6s var(--ease-out),background .35s var(--ease);
}
.float.is-in{transform:none}
.float:hover{background:var(--clay)}
.float svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}

/* The WhatsApp pill rides above the Reserve one, in the deep green the
   footer uses — related to it rather than shouting over it. The delay
   makes the pair read as one move instead of a double pop. */
.float-wa{bottom:86px;background:var(--forest);transition-delay:.12s}
.float-wa:hover{background:var(--clay)}
.float-wa svg{fill:currentColor;stroke:none;width:17px;height:17px}


/* ── 16 REVEAL ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0;transform:translateY(26px);
    transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out);
    transition-delay:var(--d,0ms);
  }
  .reveal.is-in{opacity:1;transform:none}

  .hero-title .line>span{
    transform:translateY(106%);
    transition:transform 1.15s var(--ease-out);
    transition-delay:var(--d,0ms);
  }
  .hero-title .line.is-in>span{transform:none}
  .hero-title .line{opacity:1;transform:none}
}


/* ── 17 RESPONSIVE ────────────────────────────────────────────── */
/* Between a full nav and the Reserve button there is no room left for
   eleven digits, so from here down the number keeps its glyph — and gets
   its text back below 900px, where the nav has folded into the menu. */
@media (max-width:1260px){
  .top-wa span{display:none}
}

@media (max-width:1120px){
  .top-in{gap:1.2rem}
  .nav{gap:1.7rem}
  .top-contact{gap:.6rem}
  /* A full nav, the number and the button will not share this width.
     The button is the one with a standing replacement — the floating
     Reserve pill — so it is the one that stands down. */
  .top-cta{display:none}
  .hero-in,.stay-grid,.here-grid,.reserve-grid{grid-template-columns:1fr}
  .hero{min-height:auto;padding-block:8.5rem 4rem}
  .hero-plate{max-width:30rem;margin-inline:auto}
  .hero-plate img{aspect-ratio:4/3;object-position:50% 68%}
  .hero-scroll{display:none}
  .hero-title{max-width:14ch}
  .plate-inset{right:0;bottom:-9%;width:46%}
  .card,.map{position:static}
  .fac-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  html{scroll-padding-top:78px}
  .top-in{min-height:74px;gap:1rem}
  .burger{display:block}
  .top-cta{display:none}
  .mark-sub{display:none}          /* the strapline yields its room to the number */
  .top-contact{gap:.8rem}
  .top-wa span{display:inline}
  .top-wa{font-size:.68rem;letter-spacing:.02em}
  .top-ig{width:32px;height:32px}
  .top:not(.is-stuck){background:linear-gradient(180deg,rgba(252,250,247,.9),transparent)}
  .nav{
    position:fixed;inset:74px 0 auto;
    background:rgba(252,250,247,.98);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem 1.4rem 2.2rem;
    border-bottom:1px solid var(--hair);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .55s var(--ease-out);
  }
  .nav.is-open{clip-path:inset(0 0 0 0)}
  .nav a{
    padding:1.15rem 0;font-size:1.5rem;letter-spacing:0;text-transform:none;
    font-family:var(--f-display);color:var(--ink);
    border-bottom:1px solid var(--hair-soft);
  }
  .nav a::after{display:none}
  .nav a i{opacity:1;transform:none;font-size:.6rem;letter-spacing:.2em;color:var(--muted)}

  .room,.room-flip .room-media{grid-template-columns:1fr;order:0}
  .room-media .plate{aspect-ratio:16/11}
  .stay-media .plate-arch{aspect-ratio:4/3;border-radius:clamp(80px,22vw,170px) clamp(80px,22vw,170px) var(--r-md) var(--r-md)}
  .board-grid{grid-template-columns:1fr 1fr}
  .flap{padding:1.5rem 1.2rem}
  .flap:nth-child(odd){padding-left:0}
  .flap:nth-child(even){border-right:0;padding-right:0}
  .flap:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .gal{grid-auto-rows:clamp(130px,23vw,190px);gap:12px}
}

/* Phones. The number is the reason most people open this page on a
   phone at all, so everything else in the bar gives up a little room
   to keep the digits readable rather than hiding them behind a glyph. */
@media (max-width:480px){
  .top-in{gap:.7rem}
  .mark{gap:.6rem}
  .mark-glyph{width:27px;height:27px}
  .mark-name{font-size:1.22rem}
  .top-contact{gap:.5rem}
  .top-wa{font-size:.63rem;letter-spacing:0;gap:.4rem}
  .top-wa svg{width:13px;height:13px}
  .top-ig{width:29px;height:29px}
  .top-ig svg{width:13px;height:13px}
  .burger{width:40px;height:38px}
}

@media (max-width:400px){
  .mark-glyph{display:none}        /* the wordmark alone carries it here */
}

/* Below this the digits genuinely do not fit; the glyph still opens chat. */
@media (max-width:339px){
  .top-wa span{display:none}
}

@media (max-width:620px){
  body{font-size:16px}
  :root{--band:clamp(4rem,12vw,5.5rem)}
  .shell{width:min(100% - 2.2rem,var(--shell))}

  .hero{padding-block:7rem 3rem}
  .hero-title{font-size:clamp(2.6rem,11vw,3.6rem);max-width:none}
  /* let the headline break where the screen wants it to, rather than
     holding three desktop line-breaks that no longer fit */
  .hero-title .line{display:inline;overflow:visible}
  .hero-title .line>span{display:inline;transform:none!important}
  .hero-acts .btn{flex:1 1 100%}
  .eyebrow{font-size:.6rem;letter-spacing:.18em}

  .mark-glyph{width:28px;height:28px}
  .mark-name{font-size:1.24rem}

  .board-grid{grid-template-columns:1fr}
  .flap{padding:1.4rem 0;border-right:0;border-bottom:1px solid var(--hair)}
  .flap:last-child{border-bottom:0;padding-bottom:0}
  .ledger,.specs{grid-template-columns:1fr;gap:0}
  .fac-grid{grid-template-columns:1fr}
  .fac{padding:2.2rem 1.6rem}
  .gal{grid-template-columns:repeat(2,1fr)}
  .shot-wide{grid-column:span 2}
  .shot-tall{grid-row:span 1}
  .plate-inset{display:none}
  .rooms-note{padding:1.6rem}

  /* the distance table reads better stacked than squeezed */
  .dist tr{display:block;padding:1.1rem 0}
  .dist th,.dist td{display:block;padding:0;text-align:left}
  .dist td{margin-top:.35rem}
  .dist td b{display:inline;font-size:1.25rem}
  .dist td span{display:inline;margin-left:.7rem}

  .map-frame{height:clamp(300px,52vh,420px)}
  .map figcaption{flex-direction:column;gap:.5rem;font-size:.8rem}

  .foot-top{grid-template-columns:1fr;gap:2.6rem}
  .legal{flex-direction:column;gap:.5rem;padding-bottom:4rem}
  .float span{display:none}
  .float{padding:.95rem 1.1rem;right:16px;bottom:16px}
  .float-wa{bottom:74px}
  .lb-nav{width:44px;height:44px}
  .steps li{grid-template-columns:1fr;gap:1rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}
}

@media print{
  .top,.float,.hero-canvas,.hero-scroll,.map,.curtain{display:none!important}
  body{background:#fff;color:#000}
  .band{padding-block:2rem}
}