/* =====================================================================
   Ananya Resorts — stylesheet
   Chopdem, on the Chapora estuary, North Goa

   1 Tokens          8 Booking bar     15 Events
   2 Reset           9 Page head       16 Gallery
   3 Layout         10 About           17 Quotes
   4 Buttons        11 Rooms           18 Contact
   5 Utility bar    12 Amenities       19 Footer
   6 Header         13 Interiors band  20 Lightbox
   7 Hero           14 Facilities      21 Responsive / motion
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* shallow water — the estuary at nine in the morning rather than after
     dark. Nothing on the page is a dark block any more except the hero
     photograph itself, which is the one place the contrast is wanted.
     Token names are inherited from the earlier palettes; renaming them
     across two stylesheets would be churn for no gain. */
  --ink:#123536;            /* deep teal-green: body text */
  --grove:#D3EDE7;          /* pale aqua: the bands that used to be dark */
  --grove-2:#BFE5DD;        /* a shade deeper, for hover on those bands */
  --sand:#FBEFD6;           /* warm band, so the page is not one temperature */
  --brass:#0B7C86;          /* mid teal: buttons, focus, rules (white text clears 4.9:1) */
  --brass-dark:#075F68;     /* hover, and link text on white */
  --brass-light:#F5B841;    /* sun: the warm counterweight, used sparingly */
  --brass-soft:rgba(11,124,134,.10);
  --paper:#FFFFFF;
  --paper-2:#F1F8F6;        /* barely-there mint for alternate sections */
  --muted:#4E6B6C;
  --line:rgba(18,53,54,.13);
  --line-strong:rgba(18,53,54,.24);
  --on-band:rgba(18,53,54,.72);

  --display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --body:"Karla", "Helvetica Neue", Arial, sans-serif;

  --wrap:1240px;
  --gutter:26px;
  --util-h:40px;
  --header-h:84px;

  --r:4px;          /* controls */
  --r-card:14px;    /* surfaces */
  --lift:0 24px 60px -34px rgba(18,53,54,.55);
  --hover-lift:0 20px 40px -22px rgba(18,53,54,.34);
  --t:.32s cubic-bezier(.4,0,.2,1);
  --spring:.5s cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. RESET & BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  font-family:var(--body);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
ul{list-style:none; margin:0; padding:0}
dl,dd{margin:0}

h1,h2,h3,h4{
  font-family:var(--display); font-weight:400; margin:0; line-height:1.12;
  font-optical-sizing:auto; font-variation-settings:"SOFT" 32,"WONK" 1;
  letter-spacing:-.012em;
}
h1{font-size:clamp(2.9rem,6.1vw,5rem); line-height:1.04}
h2{font-size:clamp(2.05rem,3.7vw,3.05rem)}
h3{font-size:1.55rem}
h4{font-size:1.12rem}
p{margin:0 0 1.05em; max-width:72ch}
p:last-child{margin-bottom:0}

::selection{background:var(--brass); color:#fff}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:2px}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--brass); color:#fff; padding:14px 22px; border-radius:0 0 var(--r) 0;
}
.skip-link:focus{left:0}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}

.section{padding:clamp(66px,8.5vw,124px) 0}
.section-head{max-width:62ch; margin-bottom:clamp(38px,5vw,64px)}
.section-head h2{margin-bottom:.35em}
.section-head p{color:var(--muted); font-size:1.08rem}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:center}
.grid-2.reverse .dining-media{order:2}

/* text link with a brass underline that thickens on hover */
.link-more{
  display:inline-block; margin-top:6px; font-size:1rem; color:var(--ink);
  background-image:linear-gradient(var(--brass),var(--brass));
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:3px; transition:color var(--t), background-size var(--t);
}
.link-more:hover{color:var(--brass-dark); background-size:100% 2px}

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px; border-radius:var(--r);
  font-family:var(--body); font-size:.98rem; font-weight:500; letter-spacing:.005em;
  white-space:nowrap; border:1px solid transparent; cursor:pointer;
  transition:background var(--t), color var(--t), border-color var(--t),
             transform var(--spring), box-shadow var(--spring);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0); transition-duration:.08s}
.btn-solid:hover{box-shadow:0 12px 26px -12px rgba(11,124,134,.55)}
.btn-solid{background:var(--brass); color:#fff; border-color:var(--brass)}
.btn-solid:hover{background:var(--brass-dark); border-color:var(--brass-dark)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--brass); color:var(--brass-dark); background:var(--brass-soft)}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn-block{width:100%}

/* ---------- 5. UTILITY BAR ---------- */
.utility-bar{background:var(--grove); color:var(--on-band); font-size:.85rem; line-height:1}
.utility-inner{
  min-height:var(--util-h); display:flex; align-items:center;
  justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.utility-hours{margin:0; color:var(--muted); max-width:none}
.utility-hours b{font-weight:600; color:var(--ink)}
.utility-calls{display:flex; align-items:center}
.utility-calls li + li{border-left:1px solid rgba(18,53,54,.16)}
.utility-calls a{
  display:flex; align-items:baseline; gap:8px; padding:12px 16px;
  color:var(--ink); transition:background var(--t), color var(--t);
}
.utility-calls li:last-child a{padding-right:0}
.utility-calls a:hover{color:var(--brass-dark); background:rgba(255,255,255,.6)}
.utility-calls .u-role{color:var(--muted)}
.utility-calls .u-num{font-variant-numeric:tabular-nums; letter-spacing:.01em}
.u-after a{color:var(--brass-dark); font-weight:600}
.u-after a:hover{color:var(--ink)}

/* ---------- 5b. TRACK BOOKING + LANGUAGE PILL ---------- */
.utility-right{display:flex; align-items:center; gap:18px}

.track-link{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:.85rem; font-weight:600; color:var(--brass-dark);
  transition:color var(--t);
}
.track-link svg{width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.track-link:hover{color:var(--ink)}
/* a display rule beats the hidden attribute, so say it explicitly */
.track-link[hidden]{display:none}

.lang-pill{
  display:flex; align-items:center; gap:2px; padding:3px;
  border:1px solid rgba(18,53,54,.22); border-radius:100px;
  background:rgba(255,255,255,.5);
}
.lang-pill[hidden]{display:none}
.lang-pill a{
  padding:4px 13px; border-radius:100px; font-size:.8rem; line-height:1.4;
  color:var(--muted); white-space:nowrap;
  transition:background var(--t), color var(--t);
}
.lang-pill a:hover{color:var(--ink); background:rgba(255,255,255,.8)}
.lang-pill a.is-active{background:var(--brass); color:#fff; font-weight:600}
/* a language with no translated pages yet: shown, but not a link */
.lang-pill .lang-soon{
  padding:4px 13px; border-radius:100px; font-size:.8rem; line-height:1.4;
  color:var(--muted); opacity:.5; cursor:default; white-space:nowrap;
}
/* Fraunces and Karla carry no Devanagari, so let the system font take those */
.lang-pill [lang="mr"],.lang-pill [lang="hi"]{
  font-family:"Noto Sans Devanagari","Nirmala UI",system-ui,sans-serif;
}

@media (max-width:940px){.track-link span{display:none}}
@media (max-width:640px){
  .utility-right{gap:12px}
  .track-link{display:none}
  .lang-pill a{padding:4px 10px; font-size:.76rem}
}

/* ---------- 6. HEADER ---------- */
.site-header .wrap{max-width:1440px}
.site-header{
  position:sticky; top:0; z-index:100;
  height:var(--header-h); display:flex; align-items:center;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  transition:height var(--t), box-shadow var(--t);
}
/* backdrop-filter ONLY above the drawer breakpoint. A filter on an ancestor
   makes it the containing block for position:fixed descendants, so with it
   on here the mobile nav drawer was being laid out against the 84px header
   box instead of the viewport — it rendered as a short white panel showing
   one menu item. Below 881px the header is a plain surface and the drawer
   is free to fill the screen. */
@media (min-width:881px){
  .site-header{backdrop-filter:saturate(1.4) blur(10px)}
}
.site-header.scrolled{height:68px; box-shadow:0 10px 30px -22px rgba(18,53,54,.5)}
/* Centred logo, nav split either side. The nav is display:contents on
   desktop so its two halves become grid items here and the brand sits in
   the true centre — the 1fr columns either side stay equal. Below the
   drawer breakpoint the nav goes back to being a real element. */
.header-inner{
  width:100%; display:grid; align-items:center; gap:20px;
  grid-template-columns:1fr auto 1fr;
}
.nav{display:contents}
.nav-side{display:flex; align-items:center; gap:22px; min-width:0}
/* grid-row:1 is not optional. DOM order is nav-a, nav-b, brand, so by the
   time the brand is placed the auto-placement cursor has moved past column
   2 and it drops to a second row — where the fixed header height clips it. */
.nav-a{grid-column:1; grid-row:1; justify-self:start}
.nav-b{grid-column:3; grid-row:1; justify-self:end}
.header-inner .brand{grid-column:2; grid-row:1; justify-self:center}

.header-phone{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:.88rem; color:var(--muted); transition:color var(--t);
}
.header-phone svg{width:15px; height:15px; fill:currentColor}
.header-phone:hover{color:var(--brass-dark)}
@media (max-width:1200px){.header-phone{display:none}}

/* brand lockup: verandah arch mark + wordmark */
.brand{display:flex; align-items:center; gap:13px; color:var(--ink)}
.brand img{width:auto}
.brand-mark{flex:none; width:30px; height:34px; color:var(--brass)}
.brand-mark svg{width:100%; height:100%; display:block; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.brand-word{display:flex; flex-direction:column; line-height:1}
.brand-name{
  font-family:var(--display); font-size:1.72rem; font-weight:500;
  letter-spacing:.005em; font-variation-settings:"SOFT" 32,"WONK" 1;
}
.brand-place{font-size:.72rem; color:var(--muted); letter-spacing:.09em; margin-top:5px}
/* The wordmark is now three words, not one. At 1.72rem it crowded the two nav
   halves in the header, so it steps down there and keeps the full size in the
   footer, where it has the room. */
.header-inner .brand{gap:11px}
.header-inner .brand-name{font-size:1.38rem; white-space:nowrap}
.header-inner .brand-place{font-size:.66rem; margin-top:4px}
@media (min-width:881px) and (max-width:1120px){
  .header-inner .brand-name{font-size:1.22rem}
  .nav ul{gap:16px}
  .nav-side{gap:16px}
}

.nav ul{display:flex; gap:21px; margin:0}
.nav a{color:var(--ink); font-size:.94rem; position:relative; padding-bottom:4px; transition:color var(--t)}
.nav ul a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px;
  background:var(--brass); transform:scaleX(0); transform-origin:right; transition:transform var(--t);
}
.nav ul a:hover{color:var(--brass-dark)}
.nav ul a:hover::after{transform:scaleX(1); transform-origin:left}
.nav ul a.is-current{color:var(--brass-dark)}
.nav ul a.is-current::after{transform:scaleX(1)}
.nav-cta{padding:11px 22px; font-size:.93rem}
.site-header .nav-cta{color:#fff}

.menu-toggle{display:none; width:44px; height:44px; flex-direction:column; justify-content:center; gap:6px; margin-right:-8px}
.menu-toggle span{display:block; height:1.5px; width:26px; background:var(--ink); transition:transform var(--t), opacity var(--t)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative; min-height:min(84vh,780px);
  display:flex; align-items:flex-end; color:#fff; overflow:hidden;
  padding-block:clamp(90px,13vw,150px) clamp(96px,12vw,140px);
}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,32,38,.60) 0%, rgba(6,32,38,.20) 26%, rgba(6,32,38,.58) 62%, rgba(6,32,38,.90) 100%),
    linear-gradient(90deg, rgba(6,32,38,.70) 0%, rgba(6,32,38,.30) 46%, rgba(6,32,38,0) 78%);
}

/* 360 panorama layer, sits over the static fallback once it loads */
.pano{position:absolute; inset:0; z-index:2; opacity:0; transition:opacity .8s ease}
.pano.ready{opacity:1}
.pano .pnlm-container{background:transparent}
.pano .pnlm-load-box,.pano .pnlm-about-msg{display:none !important}
#heroFallback{position:absolute; inset:0; z-index:1; transition:opacity .8s ease}

/* drags reach the panorama; buttons stay clickable */
.hero-body{position:relative; z-index:4; max-width:960px; pointer-events:none}
.hero-body a{pointer-events:auto}
.hero-kicker{
  font-size:1rem; margin-bottom:20px; color:rgba(255,255,255,.85);
  display:flex; align-items:center; gap:12px; max-width:none;
}
.hero-kicker::before{content:""; width:38px; height:1px; background:var(--brass); flex:none}
.hero-body h1{margin-bottom:.34em; text-shadow:0 2px 30px rgba(0,0,0,.42)}
.hero-lede{
  max-width:50ch; font-size:1.16rem; color:rgba(255,255,255,.94); margin-bottom:2em;
  text-shadow:0 1px 16px rgba(0,0,0,.6);
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}

.pano-hint{
  position:absolute; z-index:4; right:26px; bottom:26px; margin:0; max-width:none;
  display:flex; align-items:center; gap:10px;
  padding:9px 16px 9px 12px; border-radius:100px;
  background:rgba(8,38,44,.42); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  font-size:.85rem; color:rgba(255,255,255,.9);
  pointer-events:none; opacity:0; transition:opacity .6s ease;
}
.pano-hint.show{opacity:1}
.pano-hint.hide{opacity:0}
.pano-hint::before{
  content:""; width:16px; height:16px; flex:none; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.75); box-shadow:0 0 0 4px rgba(255,255,255,.14);
}

/* the one orchestrated moment: hero copy arrives in sequence, on load only */
.hero-body > *{animation:rise .95s cubic-bezier(.2,.7,.3,1) both}
.hero-body > :nth-child(1){animation-delay:.10s}
.hero-body > :nth-child(2){animation-delay:.20s}
.hero-body > :nth-child(3){animation-delay:.31s}
.hero-body > :nth-child(4){animation-delay:.42s}
@keyframes rise{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}

/* ---------- 8. BOOKING BAR ---------- */
.booking{position:relative; z-index:5; margin-top:-56px}
.booking-form{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
  background:var(--paper); padding:26px 28px 28px; border-radius:var(--r-card);
  box-shadow:var(--lift); border-top:3px solid var(--brass);
}
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field label{font-size:.88rem; color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; color:var(--ink);
  padding:12px 13px; border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--paper); width:100%;
  transition:border-color var(--t), box-shadow var(--t);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brass); outline:none; box-shadow:0 0 0 3px var(--brass-soft);
}
.field textarea{resize:vertical}
.field-action{justify-content:flex-end}
.field-action .btn{padding:13px 20px}

.booking-msg,.form-msg{grid-column:1/-1; margin:0; font-size:.95rem; color:var(--brass-dark); min-height:1.2em; max-width:none}
.booking-msg.error,.form-msg.error{color:#A4392A}
.booking-note{margin:16px 0 0; font-size:.92rem; color:var(--muted); text-align:center; max-width:none}

/* ---------- 9. PAGE HEAD (inner pages) ---------- */
.page-head{
  background:var(--paper-2); border-bottom:1px solid var(--line);
  padding:clamp(52px,7vw,84px) 0 clamp(46px,6vw,72px);
}
.page-head h1{font-size:clamp(2.4rem,4.6vw,3.7rem); margin-bottom:.28em}
.page-head p{color:var(--muted); font-size:1.1rem; max-width:58ch; margin:0}
.page-eyebrow{display:flex; align-items:center; gap:11px; margin:0 0 16px; font-size:.92rem; color:var(--muted); max-width:none}
.page-eyebrow::before{content:""; width:30px; height:1px; background:var(--brass); flex:none}

/* ---------- 9b. PAGE HERO SLIDER (inner pages) ----------
   Text on one side, a rotating photo panel on the other. It is a split
   rather than a full-bleed band on purpose: at ~560px the panel can use
   the 780px event photos and the 560px spa photos at or below native
   size, where a full-width banner would upscale them roughly 1.9x and
   show it. Swap to full-bleed once there are 1600px+ originals. */
.page-hero{
  background:var(--paper-2); border-bottom:1px solid var(--line);
  padding:clamp(42px,5.5vw,76px) 0;
}
.page-hero-inner{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,4vw,64px); align-items:center;
}
.page-hero h1{font-size:clamp(2.3rem,4.4vw,3.6rem); margin-bottom:.28em}
.page-hero .lede{color:var(--muted); font-size:1.1rem; max-width:54ch; margin:0}

.hero-slider{
  position:relative; overflow:hidden; aspect-ratio:4/3;
  border-radius:var(--r-card); background:var(--grove);
  box-shadow:var(--lift);
}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity .9s ease}
.hero-slide.is-on{opacity:1}
.hero-slide img{width:100%; height:100%; object-fit:cover; display:block}

.hero-dots{
  position:absolute; left:0; right:0; bottom:16px; z-index:2;
  display:flex; justify-content:center; gap:9px;
}
.hero-dots button{
  width:9px; height:9px; padding:0; border-radius:50%;
  background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.85);
  transition:background var(--t), transform var(--spring);
}
.hero-dots button[aria-selected="true"]{background:#fff; transform:scale(1.3)}
.hero-dots button:hover{background:rgba(255,255,255,.8)}

@media (max-width:880px){
  .page-hero-inner{grid-template-columns:1fr; gap:28px}
  .hero-slider{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
}

/* ---------- 10. ABOUT ---------- */
.about-media{position:relative}
.about-media img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-card)}
.stat-card{
  position:absolute; right:-20px; bottom:-26px;
  background:var(--brass-light); color:var(--ink); padding:24px 30px; text-align:center;
  border-radius:var(--r-card); box-shadow:var(--lift);
}
.stat-num{font-family:var(--display); font-size:3.1rem; line-height:1; margin:0; font-variation-settings:"SOFT" 32,"WONK" 1}
.stat-label{font-size:.86rem; margin:6px 0 0; color:rgba(18,53,54,.84); max-width:none}

.about-text h2{margin-bottom:.45em}
.about-text p{color:var(--muted)}

.tick-list{margin:26px 0; display:grid; gap:11px}
.tick-list li{position:relative; padding-left:28px; font-size:1.02rem}
.tick-list li::before{
  content:""; position:absolute; left:2px; top:.58em;
  width:8px; height:8px; border-radius:50%;
  background:var(--brass); box-shadow:0 0 0 4px var(--brass-soft);
}

/* ---------- 11. ROOMS ---------- */
.rooms{background:var(--paper-2)}
.room-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.room-card{
  background:var(--paper); display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-card); border:1px solid var(--line);
  transition:border-color var(--t), transform var(--spring), box-shadow var(--spring);
}
.room-card:hover{border-color:var(--brass); transform:translateY(-6px); box-shadow:var(--hover-lift)}
.room-media{position:relative; overflow:hidden}
.room-media img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s cubic-bezier(.4,0,.2,1)}
.room-card:hover .room-media img{transform:scale(1.045)}
.room-tag{
  position:absolute; left:16px; top:16px;
  background:rgba(255,255,255,.94); color:var(--ink);
  padding:7px 14px; font-size:.9rem; font-weight:500; border-radius:100px;
  transition:background var(--t), color var(--t), transform var(--spring);
}
.room-card:hover .room-tag{background:var(--brass); color:#fff; transform:translateY(-2px)}
.room-body{padding:26px 28px 30px; display:flex; flex-direction:column; flex:1}
.room-body h3{margin-bottom:.22em}
.room-meta{font-size:.95rem; color:var(--brass-dark); margin-bottom:.85em}
.room-body > p{color:var(--muted); font-size:1rem}
.room-feats{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 26px}
.room-feats li{font-size:.88rem; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:5px 14px}
.room-body .btn{margin-top:auto; align-self:flex-start}

/* ---------- 12. AMENITIES ---------- */
.amenity-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
}
.amenity{background:var(--paper); padding:38px 34px; transition:background var(--t)}
.amenity:hover{background:var(--paper-2)}
.amenity svg{
  width:28px; height:28px; margin-bottom:18px;
  fill:none; stroke:var(--brass); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--spring), stroke var(--t);
}
.amenity:hover svg{transform:translateY(-4px) scale(1.12); stroke:var(--brass-dark)}
.amenity h3{font-size:1.34rem; margin-bottom:.3em}
.amenity p{color:var(--muted); font-size:.99rem}

/* ---------- 13. INTERIORS BAND (dark) ---------- */
.dining{background:var(--grove); color:var(--ink)}
.dining h2{margin-bottom:.45em}
.dining p{color:var(--muted)}
.dining-media img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-card)}
.dining .link-more{color:var(--ink)}
.dining .link-more:hover{color:var(--brass-dark)}

.hours{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:32px 0;
  background:rgba(18,53,54,.13); border-radius:var(--r-card); overflow:hidden;
}
.hours > div{background:var(--grove); padding:17px 20px}
.hours dt{font-size:.88rem; color:var(--muted)}
.hours dd{margin:5px 0 0; font-family:var(--display); font-size:1.4rem; font-variation-settings:"SOFT" 32,"WONK" 1}

/* ---------- 14. FACILITIES (indulge / rejuvenate) ---------- */
.facilities{background:var(--paper-2)}
.fac-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.fac{margin:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden}
.fac img{width:100%; aspect-ratio:4/3; object-fit:cover}
.fac figcaption,.fac-body{padding:24px 24px 28px}
.fac h3{font-size:1.32rem; margin-bottom:.3em}
.fac p{color:var(--muted); font-size:.99rem}

.fac-grid-2{grid-template-columns:repeat(2,1fr); max-width:880px}
.fac-grid-3{grid-template-columns:repeat(3,1fr)}
a.fac{display:block; color:inherit;
  transition:border-color var(--t), transform var(--spring), box-shadow var(--spring)}
a.fac:hover{border-color:var(--brass); transform:translateY(-6px); box-shadow:var(--hover-lift)}
a.fac img{transition:transform .8s cubic-bezier(.4,0,.2,1)}
a.fac:hover img{transform:scale(1.04)}
a.fac .fac-media{overflow:hidden}
a.fac .fac-go{
  display:inline-block; margin-top:14px; font-size:.95rem; color:var(--brass-dark);
  background-image:linear-gradient(var(--brass),var(--brass));
  background-size:0 1.5px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:3px; transition:background-size var(--spring);
}
a.fac:hover .fac-go{background-size:100% 1.5px}

/* ---------- 14b. WEDDING CTA BAND ---------- */
.cta-band{background:var(--sand); color:var(--ink); padding:clamp(52px,6vw,78px) 0}
.cta-band-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:34px 48px; flex-wrap:wrap;
}
.cta-band-copy{flex:1 1 34rem; min-width:min(100%,26rem)}
.cta-band h2{font-size:clamp(1.9rem,3vw,2.6rem); margin-bottom:.35em}
.cta-band p{color:var(--muted); margin:0; max-width:52ch}
.cta-band-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.cta-phone{display:flex; flex-direction:column; gap:2px}
.cta-phone .f-role{font-size:.86rem; color:var(--muted)}
.cta-phone a{
  font-family:var(--display); font-size:1.5rem; color:var(--ink);
  font-variation-settings:"SOFT" 32,"WONK" 1; font-variant-numeric:tabular-nums;
  transition:color var(--t);
}
.cta-phone a:hover{color:var(--brass-dark)}
.rejuvenate{background:var(--paper)}
.hours-light{margin-top:46px; grid-template-columns:repeat(4,1fr); background:var(--line); border:1px solid var(--line)}
.hours-2{grid-template-columns:repeat(2,1fr)}
.fac-grid-2 ~ .hours-light{max-width:880px}
.hours-light > div{background:var(--paper-2)}
.hours-light dt{color:var(--muted)}
.hours-light dd{color:var(--ink)}

/* the kind of outlet, under its name */
.fac-kind{color:var(--brass-dark); font-size:.93rem; margin:-.3em 0 .6em}

/* treatment names — no photography for these, so they are set as plain tiles */
.treatment-block{margin-top:clamp(40px,5vw,64px)}
.treatment-block h2{font-size:1.9rem; margin-bottom:.3em}
.treatment-block > p{color:var(--muted); margin-bottom:22px}
.treatment-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:880px}
.treatment{
  border:1px solid var(--line); border-radius:var(--r-card); padding:20px 22px;
  background:var(--paper);
  transition:border-color var(--t), background var(--t), transform var(--spring);
}
.treatment:hover{border-color:var(--brass); background:var(--brass-soft); transform:translateY(-3px)}
.treatment h3{font-size:1.12rem; margin:0}
@media (max-width:880px){.treatment-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.treatment-grid{grid-template-columns:1fr}}

/* ---------- 15. EVENTS ---------- */
.events{background:var(--paper)}
.event-layout{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(34px,4vw,60px); align-items:start}
.event-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.event-grid .shot{aspect-ratio:1/1; border-radius:6px}
.event-grid .shot img{width:100%; height:100%; object-fit:cover}
.event-text h3{margin-bottom:.42em}
.event-text > p{color:var(--muted); font-size:1.02rem}
.event-text .tick-list{margin-bottom:30px}

.event-cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.event-cta .cta-phone .f-role{color:var(--muted)}
.event-cta .cta-phone a{
  font-family:var(--display); font-size:1.3rem; color:var(--ink);
  font-variation-settings:"SOFT" 32,"WONK" 1; font-variant-numeric:tabular-nums;
  white-space:nowrap; transition:color var(--t);
}
.event-cta .cta-phone a:hover{color:var(--brass-dark)}

/* ---------- 15b. EXPLORE — what's nearby ----------
   No photography for these places, so distance itself carries the visual:
   each row draws a bar scaled against the furthest entry in its own list.
   The kilometre figure is always there as text, so if the script never runs
   the page still reads correctly. */
.explore{background:var(--paper)}
.nearby{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(30px,3.6vw,58px)}
.near-group > h2{font-size:1.75rem; margin-bottom:.4em}
.near-group > p{color:var(--muted); font-size:1rem; margin-bottom:22px}

.near-list li{
  display:grid; grid-template-columns:1fr auto; align-items:baseline;
  gap:9px 14px; padding:14px 0 12px; border-bottom:1px solid var(--line);
}
.near-list li:first-child{border-top:1px solid var(--line)}
.near-name{transition:color var(--t), transform var(--t)}
.near-km{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.95rem; white-space:nowrap}
.near-list li:hover .near-name{color:var(--brass-dark); transform:translateX(4px)}
.near-list li:hover .near-km{color:var(--brass-dark)}

.near-bar{grid-column:1/-1; display:block; height:3px; border-radius:2px; background:var(--line)}
.near-bar > span{
  display:block; height:100%; width:0; border-radius:2px; background:var(--brass);
  transition:width .9s cubic-bezier(.22,1,.36,1) var(--d,0s);
}
.near-list.is-armed .near-bar > span{width:var(--w,0)}

.near-notes li{padding:0 0 22px}
.near-notes li + li{border-top:1px solid var(--line); padding-top:22px}
.near-notes h3{font-size:1.24rem; margin-bottom:.35em}
.near-notes p{color:var(--muted); font-size:1rem; margin:0}

@media (max-width:1100px){
  .nearby{grid-template-columns:repeat(2,1fr)}
  .near-group:last-child{grid-column:1/-1}
  .near-notes{display:grid; grid-template-columns:repeat(2,1fr); gap:30px}
  .near-notes li + li{border-top:0; padding-top:0}
}
@media (max-width:700px){
  .nearby,.near-notes{grid-template-columns:1fr}
}

/* ---------- 16. GALLERY ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:238px; gap:14px}
.shot{padding:0; overflow:hidden; position:relative; display:block; border-radius:var(--r-card); background:var(--paper-2)}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.4,0,.2,1), filter var(--t)}
.shot:hover img{transform:scale(1.06); filter:brightness(.82)}
.shot::after{
  content:""; position:absolute; inset:auto 14px 14px auto;
  width:34px; height:34px; border-radius:50%;
  background:var(--brass) no-repeat center/13px 13px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  opacity:0; transform:scale(.6); transition:opacity var(--t), transform var(--spring);
  pointer-events:none;
}
.shot:hover::after,.shot:focus-visible::after{opacity:1; transform:scale(1)}
.shot-wide{grid-column:span 2; grid-row:span 2}

/* ---------- 17. QUOTES ---------- */
.quotes{background:var(--paper-2); text-align:center}
.quote-stage{position:relative; max-width:46rem; margin-inline:auto; min-height:220px}
.quote{margin:0; position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .55s ease}
.quote.is-active{opacity:1; visibility:visible; position:relative}
.quote blockquote{
  margin:0 0 26px; font-family:var(--display);
  font-size:clamp(1.42rem,2.5vw,2rem); line-height:1.4; color:var(--ink);
  font-variation-settings:"SOFT" 32,"WONK" 1;
}
.quote blockquote::before{content:"\201C"}
.quote blockquote::after{content:"\201D"}
.quote figcaption{font-size:.95rem; color:var(--muted)}
.quote-dots{display:flex; justify-content:center; gap:11px; margin-top:38px}
.quote-dots button{
  width:9px; height:9px; border-radius:50%; padding:0;
  background:transparent; border:1px solid var(--line-strong);
  transition:background var(--t), border-color var(--t);
}
.quote-dots button[aria-selected="true"]{background:var(--brass); border-color:var(--brass)}

/* ---------- 18. CONTACT ---------- */
.contact-layout{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(34px,5vw,72px); align-items:start}

/* the three phone lines, given the weight a venue enquiry deserves */
.call-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
  max-width:820px; margin-bottom:clamp(38px,4.5vw,60px)}
.call-card{
  display:flex; flex-direction:column; gap:4px;
  padding:22px 22px 24px; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--paper); transition:border-color var(--t), background var(--t);
}
.call-card{transition:border-color var(--t), background var(--t),
            transform var(--spring), box-shadow var(--spring)}
.call-card:hover{border-color:var(--brass); background:var(--brass-soft);
            transform:translateY(-4px); box-shadow:var(--hover-lift)}
.call-role{font-size:.93rem; color:var(--muted)}
.call-num{
  font-family:var(--display); font-size:1.55rem; font-variation-settings:"SOFT" 32,"WONK" 1;
  color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.call-note{display:block; font-size:.87rem; line-height:1.45; color:var(--muted); margin-top:6px; max-width:none}
.call-role{display:block}
.call-num--mail{font-size:1.12rem; white-space:normal; word-break:break-word;
  font-variant-numeric:normal; letter-spacing:0}
.call-num{display:block}
.call-card--after{background:var(--brass); border-color:var(--brass)}
.call-card--after .call-role,.call-card--after .call-note{color:rgba(255,255,255,.95)}
.call-card--after .call-num{color:#fff}
.call-card--after:hover{background:var(--brass-dark); border-color:var(--brass-dark)}

.info-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px 40px; margin-bottom:36px}
.info-block h3{font-size:1.16rem; margin-bottom:.5em}
.info-block p{margin:0; color:var(--muted); font-size:1rem}
.info-block address{font-style:normal; color:var(--muted); font-size:1rem}
.plus-code{
  display:inline-block; margin-top:11px; padding:4px 11px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  font-size:.9rem; color:var(--ink); font-variant-numeric:tabular-nums;
}
.hours-table{margin:0}
.hours-table div{display:flex; justify-content:space-between; gap:18px; padding:9px 0; border-bottom:1px solid var(--line)}
.hours-table div:last-child{border-bottom:0}
.hours-table dt{color:var(--muted); font-size:1rem}
.hours-table dd{font-variant-numeric:tabular-nums; white-space:nowrap}

.map-frame{border:1px solid var(--line); border-radius:var(--r-card); height:300px; overflow:hidden}
.map-frame iframe{width:100%; height:100%; border:0; display:block}

.contact-form{
  background:var(--paper-2); padding:clamp(26px,3.4vw,40px);
  display:grid; gap:18px; border-radius:var(--r-card); border-top:3px solid var(--brass);
  position:sticky; top:calc(var(--header-h) + 22px);
}
.contact-form h2{font-size:1.85rem; margin-bottom:-6px}
.contact-form > p{color:var(--muted); font-size:.98rem; margin:0}

/* ---------- 19. FOOTER ---------- */
.site-footer{background:var(--paper-2); color:var(--muted); padding-top:78px; border-top:1px solid var(--line-strong)}
.footer-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.25fr; gap:44px; padding-bottom:56px}
.footer-brand .brand{color:var(--ink); margin-bottom:18px}
.footer-brand .brand-place{color:var(--muted)}
.footer-brand p{font-size:.98rem; max-width:36ch}
.footer-col h4{color:var(--ink); font-size:1.06rem; margin-bottom:18px}
.footer-col li{margin-bottom:11px; font-size:.98rem}
.footer-col a{display:inline-block; transition:color var(--t), transform var(--t)}
.footer-col a:hover{color:var(--brass-dark); transform:translateX(4px)}
.footer-calls li{display:flex; flex-direction:column; gap:1px; margin-bottom:14px}
.footer-calls .f-role{font-size:.85rem; color:var(--muted)}
.footer-calls a{color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums}
.footer-address{font-style:normal; font-size:.98rem; line-height:1.6; margin-top:18px; color:var(--muted)}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:24px 26px; border-top:1px solid var(--line); font-size:.9rem;
}
.footer-bottom p{margin:0; max-width:none}
.footer-bottom a:hover{color:var(--brass-dark)}

/* ---------- 19b. FOOTER PHOTO STRIP ---------- */
.footer-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:0 26px 30px}
.footer-strip a{display:block; overflow:hidden; border-radius:8px; aspect-ratio:1/1; background:var(--grove)}
.footer-strip img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9); transition:transform .7s cubic-bezier(.4,0,.2,1), filter var(--t);
}
.footer-strip a:hover img{transform:scale(1.08); filter:saturate(1.1)}
@media (max-width:640px){
  .footer-strip{grid-template-columns:repeat(3,1fr)}
  .footer-strip a:nth-child(n+4){display:none}
}

/* ---------- 20. LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(6,32,38,.95);
  display:flex; align-items:center; justify-content:center; padding:64px 74px;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%; max-height:82vh; object-fit:contain; border-radius:6px}
.lb-caption{
  position:absolute; bottom:26px; left:0; right:0; text-align:center;
  color:rgba(255,255,255,.72); font-size:.92rem; margin:0; max-width:none;
}
.lb-close,.lb-prev,.lb-next{
  position:absolute; color:#fff; line-height:1;
  width:50px; height:50px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); transition:background var(--t), border-color var(--t);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.5)}
.lb-close{top:22px; right:22px; font-size:1.7rem}
.lb-prev{left:20px; top:50%; transform:translateY(-50%); font-size:2rem}
.lb-next{right:20px; top:50%; transform:translateY(-50%); font-size:2rem}

/* ---------- 20b. SECTION BACKGROUND MODIFIERS ---------- */
.section.section--paper{background:var(--paper)}
.section.section--sage{background:var(--paper-2)}

/* ---------- 20c. SCROLL REVEAL & BACK TO TOP ----------
   The .reveal class is applied by main.js, never in the HTML, so if the
   script fails or motion is reduced the content is simply visible. */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--d,0s),
             transform .7s cubic-bezier(.22,1,.36,1) var(--d,0s);
  will-change:opacity, transform;
}
.reveal.is-in{opacity:1; transform:none}

.to-top{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:48px; height:48px; border-radius:50%;
  background:var(--brass); color:#fff; display:grid; place-items:center;
  box-shadow:0 14px 30px -14px rgba(18,53,54,.7);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.85);
  transition:opacity var(--t), visibility var(--t), transform var(--spring), background var(--t);
}
.to-top.is-shown{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--brass); transform:translateY(-3px)}
.to-top svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}

/* the counting stat settles rather than snapping */
.stat-num{font-variant-numeric:tabular-nums}

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width:1000px){
  .room-grid{grid-template-columns:1fr}
}

@media (max-width:1100px){
  .footer-top{grid-template-columns:1fr 1fr; gap:38px}
  .amenity-grid{grid-template-columns:repeat(2,1fr)}
  .event-layout{grid-template-columns:1fr}
  .booking-form{grid-template-columns:repeat(2,1fr)}
  .field-action{grid-column:1/-1}
  .contact-layout{grid-template-columns:1fr}
  .contact-form{position:static}
}

@media (max-width:940px){
  .utility-hours{display:none}
  .utility-inner{justify-content:center}
  .utility-calls li:last-child a{padding-right:16px}
}

@media (max-width:880px){
  .menu-toggle{display:flex}
  /* The drawer sits flush to the right edge and is revealed with a clip
     wipe rather than parked off-screen. A position:fixed element translated
     to translateX(100%) is measured against the viewport, so body's
     overflow-x:hidden cannot clip it and it adds ~335px of horizontal scroll
     on every phone. Clipping keeps the slide and keeps the page 390px wide. */
  .nav{
    /* display:contents on desktop makes the nav generate no box, which
       would silently cancel position:fixed here — put the box back. */
    display:flex;
    position:fixed; inset:0 0 0 auto; width:min(86vw,350px);
    background:var(--paper); flex-direction:column; align-items:flex-start;
    justify-content:flex-start; gap:0; padding:104px 32px 32px;
    visibility:hidden; clip-path:inset(-50px 0 -50px 100%);
    transition:clip-path var(--t), visibility var(--t);
    box-shadow:-26px 0 60px -34px rgba(18,53,54,.6); z-index:110;
  }
  .nav.open{visibility:visible; clip-path:inset(-50px 0 -50px -50px)}
  .nav > *{transform:translateX(26px); transition:transform var(--t)}
  .nav.open > *{transform:none}
  .header-inner{display:flex; justify-content:space-between}
  .nav-side{flex-direction:column; align-items:stretch; gap:0; width:100%}
  .header-phone{display:none}
  .nav ul{flex-direction:column; gap:0; width:100%}
  .nav ul li{border-bottom:1px solid var(--line)}
  .nav a{display:block; padding:16px 0; font-size:1.08rem}
  .nav ul a::after{display:none}
  /* .nav a sets display:block above, which strips the button's flex
     centring — put it back so the CTA reads as a button, not a link */
  .site-header .nav-cta{
    display:flex; align-items:center; justify-content:center;
    margin-top:28px; width:100%; padding:15px 22px;
  }

  .grid-2{grid-template-columns:1fr}
  .grid-2.reverse .dining-media{order:0}
  .about-media img,.dining-media img{aspect-ratio:3/2}
  .stat-card{right:18px; bottom:-22px; padding:18px 24px}
  .stat-num{font-size:2.4rem}

  .room-grid{grid-template-columns:1fr}
  .call-cards{grid-template-columns:1fr}
  .hours-light{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:190px}
  .shot-wide{grid-column:span 2; grid-row:span 1}

  .footer-top{grid-template-columns:1fr; gap:34px}
  .lightbox{padding:74px 16px}
  .lb-prev{left:6px} .lb-next{right:6px}
}

@media (max-width:640px){
  body{font-size:16px}
  .utility-calls .u-sales,.utility-calls .u-after{display:none}
  .utility-calls li:last-child a{padding-right:0}
  .utility-calls a{padding:12px 0; gap:7px}
  .hero{min-height:min(88vh,700px)}
  .pano-hint{right:16px; bottom:16px; font-size:.8rem}
  .booking{margin-top:-34px}
  .booking-form{grid-template-columns:1fr; padding:22px}
  .amenity-grid{grid-template-columns:1fr}
  .fac-grid,.fac-grid-2{grid-template-columns:1fr}
  .event-grid{grid-template-columns:repeat(2,1fr)}
  .hours,.hours-light,.info-grid{grid-template-columns:1fr}
  .hero-actions .btn{flex:1 1 100%}
  .gallery-grid{grid-template-columns:1fr; grid-auto-rows:230px}
  .shot-wide{grid-column:span 1}
  .footer-bottom{flex-direction:column}
  .to-top{right:14px; bottom:14px; width:44px; height:44px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .hero-body > *{animation:none; opacity:1; transform:none}
  .reveal,.reveal.is-in{opacity:1; transform:none}
  .btn:hover,.room-card:hover,a.fac:hover,.call-card:hover,.to-top:hover,
  .footer-col a:hover,.amenity:hover svg,.nav > *{transform:none}
}

/* ---------- BRAND LOGO (client artwork, replaces the drawn mark) ----------
   Header uses the horizontal lockup (mark beside the name) so the words stay
   legible inside an 84px bar; the footer has room for the full stacked logo. */
.brand-logo{display:block; width:auto; max-height:none; object-fit:contain}
.header-inner .brand{gap:0}
.header-inner .brand-logo{height:60px}
.site-header.scrolled .header-inner .brand-logo{height:52px}
.footer-brand .brand{margin-bottom:22px}
.footer-brand .brand-logo{height:150px}
@media (max-width:880px){
  .header-inner .brand-logo{height:48px}
  .site-header.scrolled .header-inner .brand-logo{height:44px}
  .footer-brand .brand-logo{height:120px}
}