/* ============================================================
   Nirvana Lakefront
   Theme: locked dark. One accent: bright gold. One radius: 2px.

   The gold is taken from the property's own warm lighting: the woven
   cane pendants through the villa, the brass lanterns in the Oasis
   room, and the lamps along the basalt steps. It is a bright, lit
   gold rather than a muted antique brass, so it reads as lamplight
   against the night photography instead of as heritage decoration.
   ============================================================ */

:root{
  /* Surfaces: warm near-black, matching the black stone and timber
     under the property's own lamplight. */
  --ink:        #0b0a08;
  --ink-2:      #12100c;
  --ink-3:      #1a1712;
  --ink-4:      #241f18;

  /* Single accent, locked. Champagne gold.
     The previous seven-stop rake read as glitter rather than metal.
     Elegance here comes from restraint: one refined gold, a soft
     vertical sheen on primary surfaces only, and no gilded text.
     --gold on --ink        = 9.4:1  (AAA)
     --gold-hi on --ink     = 13.6:1 (AAA)
     --ink on --gold        = 9.4:1  (button labels) */
  --gold-deep:   #8a6a28;
  --gold:        #dcb863;
  --gold-hi:     #f0dca8;
  --gold-bright: #f7ecc9;
  --gold-lo:     #9c7a31;

  /* A soft top-lit sheen, the way a brushed metal plate or a premium
     card catches light. Three stops, low contrast, no glitter. */
  --gold-leaf: linear-gradient(180deg, #e8cd85 0%, #d4ac55 52%, #bd9440 100%);

  /* Hairline trim. Kept quiet so it frames rather than decorates. */
  --gold-line: linear-gradient(140deg,
    rgba(220,184,99,.55), rgba(240,220,168,.85),
    rgba(220,184,99,.55), rgba(156,122,49,.55));

  /* Glass: the highlight and refraction edges used on blurred panels. */
  --glass-fill:  rgba(220,184,99,.07);
  --glass-edge:  rgba(240,220,168,.28);
  --glass-sheen: rgba(255,255,255,.12);

  --text:       #f7f3ea;
  --text-2:     #cdc5b6;
  --muted:      #968d7d;

  --line:       rgba(220,184,99,.34);
  --line-soft:  rgba(220,184,99,.17);

  --radius:     2px;

  --wrap:       1400px;
  --gutter:     clamp(1.25rem, 4vw, 4rem);

  --ease:       cubic-bezier(.16,1,.3,1);

  --font-display: "Cormorant Garamond", "Tiro Devanagari Marathi", Georgia, serif;
  --font-body:    "Outfit", "Tiro Devanagari Marathi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

::selection{ background:var(--gold); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--gold-hi);
  outline-offset:3px;
}

/* ---------- Type scale ---------- */

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
}

.h-display{ font-size:clamp(2.75rem,2rem + 3.6vw,5rem); }
.h-section{ font-size:clamp(2rem,1.5rem + 2.4vw,3.5rem); }
.h-card{    font-size:clamp(1.5rem,1.3rem + .9vw,2.125rem); }

.lead{
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  color:var(--text-2);
  max-width:60ch;
  font-weight:300;
}

.body-muted{ color:var(--text-2); max-width:65ch; }

.eyebrow{
  font-size:.6875rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:400;
}

/* Devanagari needs a touch more line height to breathe. */
html[lang="mr"] body{ line-height:1.78; }
html[lang="mr"] h1,
html[lang="mr"] h2,
html[lang="mr"] h3{ line-height:1.3; letter-spacing:0; }

/* ---------- Layout primitives ---------- */

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

section{ position:relative; }

.band{ padding-block:clamp(4.5rem,9vw,9rem); }
.band-tight{ padding-block:clamp(3.5rem,6vw,6rem); }

.band-2{ background:var(--ink-2); }
.band-3{ background:var(--ink-3); }

/* ---------- Warli rule ----------
   Hand-drawn Maharashtrian motif. Hand-rolled SVG here is deliberate:
   the brief explicitly asks for a Maharashtrian signal and no icon
   library carries Warli forms. Kept to simple geometry. */

.warli-rule{
  display:flex;
  align-items:center;
  gap:1.25rem;
  margin-block:2rem;
  color:var(--gold);
  opacity:.55;
}
.warli-rule::before,
.warli-rule::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.warli-rule svg{ flex:none; width:clamp(80px,14vw,132px); height:auto; }

/* ---------- Buttons ----------
   All buttons share radius 2px. Contrast checked:
   .btn-gold  #0b0a08 on #ffc53d -> 8.7:1
   .btn-ghost #f7f3ea on scrim   -> passes AA with the backdrop below */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  white-space:nowrap;
  padding:.95rem 1.65rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px) scale(.985); }

.btn-gold{ background:var(--gold); color:#0b0a08; }
.btn-gold:hover{ background:var(--gold-hi); }

.btn-ghost{
  background:rgba(11,10,8,.45);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-color:rgba(247,243,234,.34);
  color:var(--text);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-hi); }

@media (prefers-reduced-transparency: reduce){
  .btn-ghost{ background:var(--ink-3); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

.btn-sm{ padding:.7rem 1.15rem; font-size:.75rem; }
.btn svg{ width:1.05em; height:1.05em; flex:none; }

/* ---------- Header ----------
   Single line at desktop, 72px tall. */

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  height:72px;
  display:flex;
  align-items:center;
  transition:background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(11,10,8,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line);
}
.header-inner{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  gap:2rem;
}

.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand svg{ width:30px; height:30px; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family:var(--font-display);
  font-size:1.28rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--gold-hi);
}
.brand-sub{
  font-size:.5625rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.28rem;
}

.nav{ display:flex; align-items:center; gap:1.9rem; margin-left:auto; }
.nav a{
  font-size:.8125rem;
  letter-spacing:.06em;
  color:var(--text-2);
  transition:color .3s var(--ease);
  white-space:nowrap;
}
.nav a:hover{ color:var(--gold-hi); }

.header-actions{ display:flex; align-items:center; gap:.85rem; flex:none; }

.lang-toggle{
  display:flex;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.lang-toggle button{
  background:none;
  border:0;
  padding:.42rem .62rem;
  font-size:.6875rem;
  letter-spacing:.08em;
  color:var(--text-2);
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.lang-toggle button[aria-pressed="true"]{ background:var(--gold); color:#0b0a08; }

.nav-burger{
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.5rem .62rem;
  cursor:pointer;
}
.nav-burger svg{ width:20px; height:20px; }

@media (max-width:1080px){
  .nav{
    position:fixed;
    inset:72px 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(11,10,8,.97);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    padding:.5rem var(--gutter) 1.5rem;
    transform:translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav a{ padding:.9rem 0; border-bottom:1px solid var(--line-soft); font-size:.9375rem; }
  .nav-burger{ display:inline-flex; }
  .header-actions{ margin-left:auto; }
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}
/* Scrim: lifts headline contrast over photography to AA. */
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(11,10,8,.80) 0%, rgba(11,10,8,.34) 32%, rgba(11,10,8,.58) 62%, rgba(11,10,8,.95) 100%),
    radial-gradient(120% 80% at 15% 80%, rgba(11,10,8,.6), transparent 60%);
}

.hero-content{
  padding-top:6rem; /* under the 6rem cap */
  padding-bottom:clamp(2rem,4vw,3rem);
}
.hero-eyebrow{ margin-bottom:1.5rem; display:block; }
/* 20ch holds "Where the Sahyadris" on one line so the headline
   breaks to exactly two, at every width above the mobile clamp. */
.hero h1{ max-width:20ch; margin-bottom:1.5rem; }
.hero h1 em{
  font-style:italic;
  color:var(--gold-hi);
  line-height:1.1;
  padding-bottom:.06em;
  display:inline-block;
}
.hero .lead{ margin-bottom:2.25rem; max-width:46ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* Four tiles, the pattern lifted from the reference site. */
.hero-tiles{
  border-top:1px solid var(--line);
  background:rgba(11,10,8,.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
@media (prefers-reduced-transparency: reduce){
  .hero-tiles{ background:var(--ink-2); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
.hero-tiles-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.hero-tile{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:1.5rem clamp(.9rem,1.6vw,1.6rem);
  border-left:1px solid var(--line-soft);
  transition:background .35s var(--ease);
}
.hero-tile:first-child{ border-left:0; }
.hero-tile:hover{ background:rgba(201,169,97,.09); }
.hero-tile .t-val{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,1.1rem + .8vw,1.85rem);
  color:var(--gold-hi);
  line-height:1;
}
.hero-tile .t-lab{
  font-size:.6875rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
}
@media (max-width:820px){
  .hero-tiles-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-tile:nth-child(3){ border-left:0; }
  .hero-tile:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); }
}

/* ---------- Intro / owner note ---------- */

.intro-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:center;
}
.intro-figure{ position:relative; }
.intro-figure img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius);
}
.signature{
  margin-top:2.25rem;
  padding-top:1.75rem;
  border-top:1px solid var(--line);
}
.signature .sig-name{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--gold-hi);
}
.signature .sig-role{ font-size:.8125rem; color:var(--muted); letter-spacing:.04em; }

@media (max-width:900px){
  .intro-grid{ grid-template-columns:1fr; }
  .intro-figure{ order:-1; }
  .intro-figure img{ aspect-ratio:16/10; }
}

/* ---------- Stays: asymmetric bento, 3 items -> 3 cells ---------- */

/* One wide feature card, then two equal cards. The feature used to span
   two rows, which stretched it to match the side cards and forced a tall
   portrait crop out of a very wide photograph. Running it full width with
   the copy alongside uses that photo the way it was shot. */
.stays-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
}
/* Photograph on top, copy in a solid panel beneath it. The copy used to
   sit over the image, which failed on the brighter interiors: the villa
   shot has sunlit curtains and white sheers right where the paragraph
   falls, and no gradient rescues body text over that. Splitting them
   means legibility no longer depends on how bright a given photo is. */

.stay{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line-soft);
  min-height:340px;
  display:flex;
  flex-direction:column;
  background:var(--ink-2);
  isolation:isolate;
}
.stay-feature{
  grid-column:1 / -1;
  flex-direction:row;
  min-height:440px;
}
.stay-feature .stay-media{ flex:1 1 58%; }
.stay-feature .stay-body{
  flex:0 0 42%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;   /* stops the button stretching to the panel width */
  border-top:0;
  border-left:1px solid var(--glass-edge);
}
.stay-feature .stay-body > .stay-meta{ align-self:stretch; }

/* The two smaller cards keep the photo at its natural proportion
   instead of collapsing to the media min-height. */
.stay:not(.stay-feature) .stay-media{ flex:0 0 auto; aspect-ratio:16/10; }

.stay-media{
  position:relative;
  flex:1 1 auto;
  min-height:200px;
  overflow:hidden;
}
.stay-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.stay:hover .stay-media img{ transform:scale(1.04); }

/* Kept only to seat the photo against the panel, no longer doing
   contrast work for the text. */
.stay-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 62%, rgba(11,10,8,.5) 100%);
}

.stay-body{
  flex:none;
  width:100%;
  padding:clamp(1.5rem,2.6vw,2.25rem);
  background:
    linear-gradient(160deg, var(--glass-sheen), transparent 46%),
    var(--glass-fill),
    var(--ink-2);
  border-top:1px solid var(--glass-edge);
}
.stay-kicker{
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.6rem;
}
.stay h3{ margin-bottom:.6rem; }
.stay p{ color:var(--text-2); font-size:.9375rem; margin:0 0 1.1rem; max-width:44ch; }

.stay-meta{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem;
}
.chip{
  font-size:.6875rem; letter-spacing:.08em;
  padding:.35rem .7rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text-2);
  background:rgba(11,10,8,.4);
}

@media (max-width:900px){
  .stays-grid{ grid-template-columns:1fr; }
  .stay-feature{ flex-direction:column; min-height:0; }
  .stay-feature .stay-media{ flex:0 0 auto; aspect-ratio:16/10; }
  .stay-feature .stay-body{
    flex:none;
    border-left:0;
    border-top:1px solid var(--glass-edge);
  }
}

/* ---------- Full-bleed statement (aerial / the land) ---------- */

.statement{
  position:relative;
  min-height:82vh;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.statement-media{ position:absolute; inset:0; z-index:-1; }
.statement-media img{ width:100%; height:100%; object-fit:cover; }
.statement-media::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(80% 70% at 50% 50%, rgba(11,10,8,.55), rgba(11,10,8,.88));
}
.statement-body{ max-width:52ch; padding-inline:var(--gutter); }
.statement-body p{ color:var(--text-2); margin-top:1.5rem; }

/* Pure-CSS scroll-driven parallax. No scroll listeners. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .statement-media img{
      animation:drift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes drift{
      from{ transform:scale(1.16) translateY(-2.5%); }
      to  { transform:scale(1.16) translateY(2.5%); }
    }
  }
}

/* ---------- Carousel (gallery + surroundings) ---------- */

.carousel{ position:relative; }
.carousel-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:1.25rem;
  scrollbar-width:thin;
  scrollbar-color:var(--gold-lo) transparent;
}
@media (prefers-reduced-motion: reduce){ .carousel-track{ scroll-behavior:auto; } }

.carousel-track::-webkit-scrollbar{ height:3px; }
.carousel-track::-webkit-scrollbar-track{ background:var(--line-soft); }
.carousel-track::-webkit-scrollbar-thumb{ background:var(--gold-lo); }

.slide{
  flex:0 0 clamp(280px,42vw,620px);
  scroll-snap-align:start;
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
}
.slide img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  transition:transform 1s var(--ease);
}
.slide:hover img{ transform:scale(1.04); }
.slide figcaption{
  padding:.9rem .25rem 0;
  font-size:.8125rem;
  color:var(--muted);
  letter-spacing:.03em;
}

.carousel-nav{ display:flex; gap:.6rem; margin-top:.5rem; }
.carousel-nav button{
  width:44px; height:44px;
  display:grid; place-items:center;
  background:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.carousel-nav button:hover{ border-color:var(--gold); color:var(--gold-hi); background:rgba(201,169,97,.08); }
.carousel-nav button svg{ width:18px; height:18px; }

/* ---------- Split (dining) ---------- */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:center;
}
.split-media img{
  width:100%;
  aspect-ratio:5/6;
  object-fit:cover;
  border-radius:var(--radius);
}
@media (max-width:900px){
  .split{ grid-template-columns:1fr; }
  .split-media img{ aspect-ratio:16/10; }
}

/* Menu columns, grouped rather than a long bulleted list. */
.menu-cols{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem 2.5rem;
  margin-top:2.25rem;
}
.menu-col h4{
  font-family:var(--font-body);
  font-size:.6875rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  margin-bottom:.9rem;
}
.menu-col ul{ list-style:none; margin:0; padding:0; }
.menu-col li{ padding:.34rem 0; color:var(--text-2); font-size:.9375rem; }
@media (max-width:560px){ .menu-cols{ grid-template-columns:1fr; } }

/* ---------- Experience tiles ---------- */

.exp-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.25rem;
}
.exp{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line-soft);
  padding:clamp(1.5rem,2.4vw,2.25rem);
  min-height:230px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:var(--ink-3);
  isolation:isolate;
}
.exp h3{
  font-family:var(--font-body);
  font-size:1.125rem;
  font-weight:500;
  letter-spacing:-.005em;
  margin-bottom:.5rem;
}
.exp p{ margin:0; font-size:.875rem; color:var(--text-2); }
.exp-icon{ color:var(--gold); margin-bottom:auto; }
.exp-icon svg{ width:26px; height:26px; }

/* Photographic cells for visual variation. */
.exp-photo{ border:0; }
.exp-photo .exp-bg{ position:absolute; inset:0; z-index:-1; }
.exp-photo .exp-bg img{ width:100%; height:100%; object-fit:cover; }
.exp-photo .exp-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,10,8,.15) 30%,rgba(11,10,8,.94) 100%);
}
.exp-soon{
  align-self:flex-start;
  margin-bottom:.75rem;
  font-size:.625rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--line);
  padding:.24rem .55rem;
  border-radius:var(--radius);
}

.exp-a{ grid-column:span 5; }
.exp-b{ grid-column:span 7; }
.exp-c{ grid-column:span 4; }
.exp-d{ grid-column:span 4; }
.exp-e{ grid-column:span 4; }
@media (max-width:900px){
  .exp-a,.exp-b,.exp-c,.exp-d,.exp-e{ grid-column:span 12; }
}

/* ---------- Getting here ---------- */

.route-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}
@media (max-width:900px){ .route-grid{ grid-template-columns:1fr; } }

.origin-list{ display:grid; gap:.85rem; }
.origin{
  display:flex;
  align-items:baseline;
  gap:1.25rem;
  padding:1.15rem 1.35rem;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:var(--ink-3);
  transition:border-color .35s var(--ease);
}
.origin:hover{ border-color:var(--line); }
.origin-city{ font-size:1rem; flex:1; }
.origin-time{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--gold-hi);
  line-height:1;
}
.origin-mode{ font-size:.75rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }

.map-frame{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--ink-3);
}
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.35) contrast(1.05); }

.route-note{
  margin-top:1.5rem;
  padding:1.25rem 1.35rem;
  border-left:2px solid var(--gold);
  background:var(--ink-3);
  font-size:.9375rem;
  color:var(--text-2);
}

/* ---------- Testimonials ---------- */

.sample-flag{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1.5rem;
  padding:.5rem .85rem;
  border:1px dashed var(--gold-lo);
  border-radius:var(--radius);
  font-size:.75rem;
  color:var(--gold);
  letter-spacing:.06em;
}
.sample-flag svg{ width:15px; height:15px; flex:none; }

.quote-card{
  flex:0 0 clamp(280px,32vw,420px);
  scroll-snap-align:start;
  padding:2rem;
  /* Gold-tinted border and a darker fill than the band, so the card still
     reads as a card once the dashed sample border comes off. */
  border:1px solid var(--line);
  border-top:2px solid var(--gold-lo);
  border-radius:var(--radius);
  background:var(--ink);
  display:flex;
  flex-direction:column;
}
.quote-card.is-sample{ border-style:dashed; border-color:var(--gold-lo); }
.quote-card blockquote{
  margin:0 0 1.5rem;
  font-family:var(--font-display);
  font-size:1.3125rem;
  line-height:1.42;
  color:var(--text);
}
.quote-stars{ color:var(--gold); letter-spacing:.18em; font-size:.8125rem; margin-bottom:1.1rem; }
.quote-who{ margin-top:auto; }
.quote-name{ font-size:.9375rem; color:var(--text); }
.quote-role{ font-size:.8125rem; color:var(--muted); }

/* ---------- Policies accordion ---------- */

.policy-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
}
@media (max-width:900px){ .policy-grid{ grid-template-columns:1fr; } }

.acc{ border-top:1px solid var(--line-soft); }
.acc details{ border-bottom:1px solid var(--line-soft); }
.acc summary{
  list-style:none;
  cursor:pointer;
  padding:1.4rem 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  font-size:1.0625rem;
  transition:color .3s var(--ease);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--gold-hi); }
.acc summary .acc-sign{
  flex:none; width:20px; height:20px;
  position:relative;
  color:var(--gold);
}
.acc summary .acc-sign::before,
.acc summary .acc-sign::after{
  content:""; position:absolute; inset:50% 0 auto 0;
  height:1px; background:currentColor;
  transition:transform .35s var(--ease);
}
.acc summary .acc-sign::after{ transform:rotate(90deg); }
.acc details[open] summary .acc-sign::after{ transform:rotate(0deg); }
.acc-body{ padding-bottom:1.5rem; color:var(--text-2); font-size:.9375rem; max-width:62ch; }
.acc-body ul{ margin:.5rem 0 0; padding-left:1.1rem; }
.acc-body li{ padding:.22rem 0; }

/* ---------- Enquiry form ---------- */

.enquire{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--ink-3);
}
.enquire-media{ position:relative; min-height:100%; }
.enquire-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.enquire-form{ padding:clamp(2rem,4vw,3.5rem); }
@media (max-width:900px){
  .enquire{ grid-template-columns:1fr; }
  .enquire-media{ min-height:240px; }
}

.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.25rem; }
.field label{
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-2);
}
.field input,
.field select,
.field textarea{
  font:inherit;
  font-size:.9375rem;
  padding:.85rem 1rem;
  background:var(--ink);
  border:1px solid rgba(247,243,234,.20);
  border-radius:var(--radius);
  color:var(--text);
  transition:border-color .3s var(--ease);
}
/* Placeholder contrast: #8f8a7e on #0b0a08 -> 6.4:1, passes AA. */
.field input::placeholder,
.field textarea::placeholder{ color:var(--muted); }
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--gold); outline:none; }
.field textarea{ resize:vertical; min-height:110px; }
.field-error{ color:#e2896b; font-size:.8125rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

.form-status{
  margin-top:1.25rem;
  padding:1rem 1.15rem;
  border-radius:var(--radius);
  font-size:.9375rem;
  display:none;
}
.form-status.is-ok{ display:block; background:rgba(201,169,97,.12); border:1px solid var(--line); color:var(--gold-hi); }
.form-status.is-err{ display:block; background:rgba(226,137,107,.1); border:1px solid rgba(226,137,107,.35); color:#e2896b; }

.btn[data-loading="true"]{ opacity:.6; pointer-events:none; }

/* ---------- Floating contact widgets ---------- */

.floaters{
  position:fixed;
  right:clamp(1rem,2.5vw,1.75rem);
  /* Cleared to sit above the hosting platform's own badge (Netlify's
     free-tier "Powered by Netlify" pill, roughly 60px tall with its
     margin). This site does not control that badge's markup, so the
     buttons keep this clearance permanently rather than only when the
     badge happens to be present. */
  bottom:calc(clamp(1rem,2.5vw,1.75rem) + 60px);
  z-index:70;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.floater{
  width:54px; height:54px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  color:#0b0a08;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  transition:transform .3s var(--ease);
  position:relative;
}
.floater:hover{ transform:translateY(-3px); }
.floater:active{ transform:translateY(0) scale(.96); }
.floater svg{ width:25px; height:25px; }
.floater-wa{ background:#25d366; border-color:#25d366; }
.floater-call{ background:var(--gold); border-color:var(--gold); box-shadow:0 8px 28px -6px rgba(255,197,61,.55); }
.floater-bot{ background:var(--ink-3); border-color:var(--line); color:var(--gold-hi); }

.floater-tip{
  position:absolute;
  right:calc(100% + .65rem);
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  background:var(--ink-3);
  border:1px solid var(--line);
  color:var(--text);
  font-size:.75rem;
  letter-spacing:.05em;
  padding:.45rem .7rem;
  border-radius:var(--radius);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease);
}
.floater:hover .floater-tip,
.floater:focus-visible .floater-tip{ opacity:1; }

/* Widgets are the whole point on mobile, so keep them full size. */
@media (max-width:560px){
  .floater{ width:50px; height:50px; }
  .floater-tip{ display:none; }
}

/* ---------- Chatbot ---------- */

.bot{
  position:fixed;
  right:clamp(1rem,2.5vw,1.75rem);
  bottom:calc(clamp(1rem,2.5vw,1.75rem) + 60px + 3.75rem + .75rem);
  z-index:75;
  width:min(370px, calc(100vw - 2rem));
  max-height:min(560px, calc(100dvh - 8rem));
  display:flex;
  flex-direction:column;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(0,0,0,.65);
  opacity:0;
  transform:translateY(14px) scale(.98);
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.bot.is-open{ opacity:1; transform:none; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  .bot{ transition:opacity .01s; transform:none; }
}

.bot-head{
  display:flex; align-items:center; gap:.75rem;
  padding:1rem 1.15rem;
  border-bottom:1px solid var(--line);
  flex:none;
}
.bot-head svg{ width:24px; height:24px; color:var(--gold); flex:none; }
.bot-title{ font-size:.9375rem; line-height:1.2; }
.bot-sub{ font-size:.75rem; color:var(--muted); }
.bot-close{
  margin-left:auto; background:none; border:0; cursor:pointer;
  color:var(--muted); padding:.25rem; line-height:0;
}
.bot-close:hover{ color:var(--text); }
.bot-close svg{ width:18px; height:18px; color:currentColor; }

.bot-log{
  flex:1;
  overflow-y:auto;
  padding:1.15rem;
  display:flex;
  flex-direction:column;
  gap:.85rem;
  scrollbar-width:thin;
  scrollbar-color:var(--gold-lo) transparent;
}
.bot-msg{
  max-width:85%;
  padding:.7rem .95rem;
  border-radius:var(--radius);
  font-size:.9375rem;
  line-height:1.5;
  animation:bot-in .35s var(--ease) both;
}
@media (prefers-reduced-motion: reduce){ .bot-msg{ animation:none; } }
@keyframes bot-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.bot-msg.from-bot{ background:var(--ink-4); color:var(--text); align-self:flex-start; }
.bot-msg.from-user{ background:var(--gold); color:#0b0a08; align-self:flex-end; }

.bot-options{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding:0 1.15rem 1.15rem;
  flex:none;
}
.bot-opt{
  background:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--gold-hi);
  padding:.55rem .85rem;
  font-size:.8125rem;
  cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.bot-opt:hover{ background:rgba(201,169,97,.12); border-color:var(--gold); }
.bot-opt:active{ transform:scale(.97); }

.bot-input{
  display:flex; gap:.5rem;
  padding:0 1.15rem 1.15rem;
  flex:none;
}
.bot-input input{
  flex:1;
  font:inherit; font-size:.9375rem;
  padding:.65rem .85rem;
  background:var(--ink);
  border:1px solid rgba(247,243,234,.20);
  border-radius:var(--radius);
  color:var(--text);
}
.bot-input input::placeholder{ color:var(--muted); }
.bot-input input:focus{ border-color:var(--gold); outline:none; }
.bot-input button{
  background:var(--gold); color:#0b0a08;
  border:0; border-radius:var(--radius);
  padding:0 .95rem; cursor:pointer; line-height:0;
}
.bot-input button svg{ width:18px; height:18px; }

[hidden]{ display:none !important; }

/* ---------- Footer ---------- */

.site-footer{
  background:var(--ink-2);
  border-top:1px solid var(--line);
  padding-block:clamp(3.5rem,6vw,5.5rem) 2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  margin-bottom:3.5rem;
}
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr; } }

.footer-col h4{
  font-family:var(--font-body);
  font-size:.6875rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  margin-bottom:1.15rem;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ padding:.3rem 0; }
.footer-col a{ color:var(--text-2); font-size:.9375rem; transition:color .3s var(--ease); }
.footer-col a:hover{ color:var(--gold-hi); }

.socials{ display:flex; gap:.75rem; margin-top:1.25rem; }
.social{
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text-2);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.social:hover{ color:var(--gold-hi); border-color:var(--gold); }
.social svg{ width:18px; height:18px; }

.footer-base{
  border-top:1px solid var(--line-soft);
  padding-top:1.75rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:space-between;
  font-size:.8125rem;
  color:var(--muted);
}

/* ---------- Scroll reveal ---------- */

@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .85s var(--ease), transform .85s var(--ease);
  }
  .reveal.is-in{ opacity:1; transform:none; }
  .reveal-d1{ transition-delay:.08s; }
  .reveal-d2{ transition-delay:.16s; }
  .reveal-d3{ transition-delay:.24s; }
}

/* Grain, fixed and pointer-events-none so it never repaints on scroll. */
.grain{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Icons (Phosphor web font) ----------
   Icon glyphs come from @phosphor-icons/web. No hand-drawn icon paths.
   The only hand-drawn SVGs on this page are the brand mark and the Warli
   rule, both explicitly requested and both simple geometry. */

i[class*="ph-"]{ line-height:0; display:inline-block; }
.btn i[class*="ph-"]{ font-size:1.15em; }
.floater i[class*="ph-"]{ font-size:25px; }
.social i[class*="ph-"]{ font-size:18px; }
.carousel-nav i[class*="ph-"]{ font-size:18px; }
.exp-icon i[class*="ph-"]{ font-size:26px; }
.bot-head i[class*="ph-"]{ font-size:24px; color:var(--gold); flex:none; }
.bot-close i[class*="ph-"]{ font-size:18px; }
.bot-input button i[class*="ph-"]{ font-size:18px; }
.sample-flag i[class*="ph-"]{ font-size:15px; flex:none; }
.nav-burger i[class*="ph-"]{ font-size:20px; }

/* Devanagari has no capital forms and no tradition of wide tracking,
   so the uppercase label treatment is dialled back under Marathi. */
html[lang="mr"] .eyebrow,
html[lang="mr"] .t-lab,
html[lang="mr"] .stay-kicker,
html[lang="mr"] .menu-col h4,
html[lang="mr"] .footer-col h4,
html[lang="mr"] .field label,
html[lang="mr"] .origin-mode,
html[lang="mr"] .exp-soon{ letter-spacing:.04em; text-transform:none; }
html[lang="mr"] .btn{ letter-spacing:.02em; text-transform:none; font-size:.875rem; }

/* ---------- Small phones ----------
   At 375px the brand plus the actions cluster overflowed the header by
   39px, pushing the menu button off screen. Trim both sides to fit. */

@media (max-width:560px){
  .header-inner{ gap:.5rem; }
  .brand svg{ width:26px; height:26px; }
  .brand-name{ font-size:1.08rem; }
  .brand-sub{ display:none; }
  .lang-toggle button{ padding:.4rem .45rem; font-size:.625rem; }
  .header-actions .btn-sm{ padding:.6rem .8rem; font-size:.6875rem; letter-spacing:.08em; }
  .nav-burger{ padding:.45rem .5rem; }

  /* Keep the last tile's label clear of the floating contact buttons. */
  .hero-tile:last-child{ padding-right:4.5rem; }
}

/* ============================================================
   GLASS
   Web glassmorphism approximation, not Apple's Liquid Glass.
   Blur plus a bright top edge and an inner sheen, so panels read as
   lit glass sheets rather than flat translucent boxes. The property
   is literally a glass building lit from inside, so this is the
   material the architecture already uses.
   ============================================================ */

.glass{
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(160deg, var(--glass-sheen), transparent 42%),
    var(--glass-fill);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 rgba(255,197,61,.10),
    0 18px 50px rgba(0,0,0,.55);
}

/* Solid fallbacks wherever blur is unavailable or unwanted. */
@media (prefers-reduced-transparency: reduce){
  .glass{ background:var(--ink-3); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass{ background:var(--ink-3); }
}

/* Apply the material to the panels that float above content. */
.bot,
.quote-card,
.exp:not(.exp-photo),
.origin,
.route-note,
.map-frame,
.enquire{
  /* No position here. .bot is position:fixed and setting relative on
     this shared list dropped it out of the viewport. */
  isolation:isolate;
  background:
    linear-gradient(160deg, var(--glass-sheen), transparent 42%),
    var(--glass-fill);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 18px 50px rgba(0,0,0,.45);
}

@media (prefers-reduced-transparency: reduce){
  .bot,.quote-card,.exp:not(.exp-photo),.origin,.route-note,.map-frame,.enquire{
    background:var(--ink-3);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* The quote card keeps its accent top edge on top of the glass. */
.quote-card{ border-top:2px solid var(--gold); }
.route-note{ border-left:2px solid var(--gold); }

/* Chips read as small glass tags rather than outlined boxes. */
.chip{
  background:rgba(11,10,8,.5);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-color:var(--glass-edge);
}

/* Electric edge on hover, replacing the previous flat tint. */
.hero-tile:hover{ background:var(--glass-fill); }
.bot-opt:hover{ background:var(--glass-fill); border-color:var(--gold); }
.carousel-nav button:hover{ background:var(--glass-fill); }

/* A contained glow on the primary action only. Used once per view so
   it reads as emphasis rather than decoration. */
.btn-gold{
  box-shadow:0 0 0 0 rgba(255,197,61,.45);
  transition:background .35s var(--ease), box-shadow .45s var(--ease),
             transform .18s var(--ease);
}
.btn-gold:hover{ box-shadow:0 6px 26px -4px rgba(255,197,61,.55); }

.floater-gold{ box-shadow:0 6px 26px -4px rgba(255,197,61,.5); }

/* The hero eyebrow sits high, where the scrim is lightest and the lake
   is brightest. The mid accent loses contrast there, so it uses the
   light tint plus a soft shadow instead. */
.hero-eyebrow{
  color:var(--gold-hi);
  text-shadow:0 1px 12px rgba(11,10,8,.9);
}

/* ---------- Glass needs a floor ----------
   A 7% tint reads as glass only when it sits over photography. Over a
   flat band it disappears, and over scrolling content it makes text
   unreadable. Each panel therefore gets an opaque base under the tint,
   weighted by how much it has to survive behind it. */

.quote-card,
.exp:not(.exp-photo),
.origin,
.route-note,
.map-frame,
.enquire{
  background:
    linear-gradient(160deg, var(--glass-sheen), transparent 42%),
    var(--glass-fill),
    rgba(11,10,8,.55);
}

/* The assistant floats over whatever the guest happens to be reading,
   so it is nearly opaque and keeps the blur only for the edge quality. */
.bot{
  background:
    linear-gradient(160deg, var(--glass-sheen), transparent 38%),
    var(--glass-fill),
    rgba(11,10,8,.94);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 24px 70px rgba(0,0,0,.75);
}

/* ============================================================
   ROYAL PASS
   Metal, gold lining, and glass contact buttons.
   ============================================================ */

/* ---------- Metallic surfaces ----------
   A flat gold reads as mustard. Metal needs the raking-light gradient
   plus a bright inner top edge and a dark inner bottom edge, which is
   what makes a surface look struck rather than painted. */

.btn-gold{
  background:var(--gold-leaf);
  color:#0b0a08;
  border:1px solid rgba(240,220,168,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(120,88,10,.3);
  transition:filter .35s var(--ease), box-shadow .35s var(--ease),
             transform .18s var(--ease);
}
.btn-gold:hover{
  filter:brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 6px 20px -8px rgba(220,184,99,.55);
}
@media (prefers-reduced-motion: reduce){
  .btn-gold{ transition:none; }
}

/* Accent text is solid gold. Gradient-filled lettering reads as
   costume jewellery at small sizes and was the main thing making the
   palette look cheap rather than expensive. */
.brand-name{ color:var(--gold-hi); }
.hero h1 em{ color:var(--gold-hi); }
.hero-tile .t-val,
.origin-time{ color:var(--gold-hi); }

/* ---------- Gold lining on every boundary ----------
   A gradient border needs two background layers: the surface fill
   clipped to the padding box, and the gold gradient clipped to the
   border box so it shows only in the 1px ring. The clip list must have
   one entry per layer, and each selector must match or beat the
   specificity of the glass rules above, or the flat border wins. */

.stay,
.quote-card,
.exp:not(.exp-photo),
.origin,
.map-frame,
.enquire,
.chip,
.lang-toggle,
.nav-burger,
.carousel-nav button,
.social,
.field input,
.field select,
.field textarea,
.bot{
  border:1px solid transparent;
  background-origin:border-box;
}

/* Two layers: fill, lining. */
.stay{
  background-image:linear-gradient(var(--ink-2),var(--ink-2)), var(--gold-line);
  background-clip:padding-box, border-box;
}
.enquire{
  background-image:linear-gradient(rgba(11,10,8,.62),rgba(11,10,8,.62)), var(--gold-line);
  background-clip:padding-box, border-box;
}
.chip{
  background-image:linear-gradient(rgba(11,10,8,.55),rgba(11,10,8,.55)), var(--gold-line);
  background-clip:padding-box, border-box;
}
.lang-toggle,
.nav-burger,
.carousel-nav button,
.social{
  background-image:linear-gradient(rgba(11,10,8,.74),rgba(11,10,8,.74)), var(--gold-line);
  background-clip:padding-box, border-box;
}
.field input,
.field select,
.field textarea{
  background-image:linear-gradient(var(--ink),var(--ink)), var(--gold-line);
  background-clip:padding-box, border-box;
}

/* Three layers: sheen, fill, lining. */
.quote-card{
  background-image:
    linear-gradient(160deg,var(--glass-sheen),transparent 42%),
    linear-gradient(rgba(11,10,8,.72),rgba(11,10,8,.72)),
    var(--gold-line);
  background-clip:padding-box, padding-box, border-box;
}
.exp:not(.exp-photo),
.origin,
.map-frame{
  background-image:
    linear-gradient(160deg,var(--glass-sheen),transparent 42%),
    linear-gradient(rgba(11,10,8,.6),rgba(11,10,8,.6)),
    var(--gold-line);
  background-clip:padding-box, padding-box, border-box;
}
.bot{
  background-image:
    linear-gradient(160deg,var(--glass-sheen),transparent 38%),
    linear-gradient(rgba(11,10,8,.95),rgba(11,10,8,.95)),
    var(--gold-line);
  background-clip:padding-box, padding-box, border-box;
}

/* Rules and dividers take the same lining. */
.acc{ border-top:1px solid transparent; border-image:var(--gold-line) 1; }
.acc details{ border-bottom:1px solid transparent; border-image:var(--gold-line) 1; }
.stay-body{ border-top:1px solid transparent; border-image:var(--gold-line) 1; }
.stay-feature .stay-body{ border-top:0; border-left:1px solid transparent; border-image:var(--gold-line) 1; }
.hero-tiles{ border-top:1px solid transparent; border-image:var(--gold-line) 1; }
.hero-tile{ border-left-color:var(--line-soft); }
.site-footer{ border-top:1px solid transparent; border-image:var(--gold-line) 1; }
.signature{ border-top:1px solid transparent; border-image:var(--gold-line) 1; }

/* ---------- Contact buttons as glass ----------
   Present on every screen, but they should sit behind the content
   rather than compete with it, so they become tinted glass discs. */

.floater{
  background:rgba(255,204,51,.09);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,226,122,.32);
  color:var(--gold-hi);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 8px 26px rgba(0,0,0,.45);
  transition:background .35s var(--ease), border-color .35s var(--ease),
             transform .3s var(--ease);
}
.floater:hover{
  background:rgba(255,204,51,.20);
  border-color:rgba(255,243,196,.6);
  transform:translateY(-3px);
}
.floater-wa{
  background:rgba(37,211,102,.14);
  border-color:rgba(94,242,160,.38);
  color:#6ef2a8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 26px rgba(0,0,0,.45);
}
.floater-wa:hover{ background:rgba(37,211,102,.26); border-color:rgba(110,242,168,.7); }
.floater-call{ box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 8px 26px rgba(0,0,0,.45); }

@media (prefers-reduced-transparency: reduce){
  .floater{ background:var(--ink-3); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .floater-wa{ background:#146c37; color:#eafff2; }
}

/* ============================================================
   MOBILE
   Audited at 375px. Every control below was under the 44px
   minimum touch target, and the menu button had collapsed to
   16px tall because its icon sets line-height 0.
   ============================================================ */

/* Touch targets, applied at every width since they cost nothing on desktop. */
.nav-burger{
  min-width:44px;
  min-height:44px;
  display:none;              /* restored to inline-flex in the query below */
  align-items:center;
  justify-content:center;
}
.lang-toggle button{ min-width:44px; min-height:44px; }
.social{ width:44px; height:44px; }
.header-actions .btn-sm{ min-height:44px; }
.carousel-nav button{ min-width:44px; min-height:44px; }

@media (max-width:1080px){
  .nav-burger{ display:inline-flex; }
  .nav a{ min-height:44px; display:flex; align-items:center; }
}

@media (max-width:760px){
  /* The page runs long on a phone, so the vertical rhythm tightens
     without letting sections run into each other. */
  .band{ padding-block:clamp(3.25rem,11vw,4.5rem); }
  .band-tight{ padding-block:clamp(2.5rem,8vw,3.5rem); }

  /* Display type stays generous but stops swallowing the screen. */
  .h-display{ font-size:clamp(2.5rem,10.5vw,3.4rem); }
  .h-section{ font-size:clamp(1.75rem,7.5vw,2.4rem); }
  .h-card{ font-size:clamp(1.375rem,6vw,1.75rem); }
  .lead{ font-size:1.0625rem; }

  .hero-content{ padding-top:5rem; }
  .hero h1{ max-width:none; }
  .hero .lead{ max-width:none; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ width:100%; }

  /* Full-width taps for the primary actions inside cards. */
  .stay-body .btn{ width:100%; }
  .stay-feature .stay-body{ align-items:stretch; }

  /* Carousel slides show one at a time with a peek of the next,
     which is what signals the row can be swiped. */
  .slide{ flex:0 0 82vw; }
  .quote-card{ flex:0 0 82vw; }

  /* Footer links need real height to be tappable. */
  .footer-col li{ padding:0; }
  .footer-col a{ display:inline-flex; align-items:center; min-height:44px; }
  .footer-base{ flex-direction:column; gap:.5rem; }

  /* Accordion rows are already large; keep the summary comfortable. */
  .acc summary{ padding:1.15rem 0; min-height:56px; }

  /* The assistant becomes a near full-width sheet rather than a
     floating card squeezed against the edge. */
  .bot{
    right:.75rem;
    left:.75rem;
    width:auto;
    max-height:min(70dvh, calc(100dvh - 9rem));
  }

  /* Keep the contact buttons clear of the form's submit button. */
  .enquire-form{ padding-bottom:5.5rem; }
}

@media (max-width:420px){
  .hero-tiles-grid{ grid-template-columns:1fr 1fr; }
  .hero-tile{ padding:1.1rem .9rem; }
  .hero-tile .t-val{ font-size:1.3rem; }
  .hero-tile .t-lab{ font-size:.625rem; letter-spacing:.1em; }
  .field-row{ grid-template-columns:1fr; }
}

/* The close control collapsed to 10px because its icon sets line-height 0. */
.bot-close{
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* The wordmark is a link as well as a logo, so give it a real target. */
.brand{ min-height:44px; }

/* ============================================================
   BRAND LOCKUP
   The wordmark was sized like a utility label. It is the first
   thing a guest reads, so it now carries the weight of a name.
   ============================================================ */

.site-header{ height:88px; }
.brand{ gap:.85rem; }
.brand svg,
.brand .brand-mark{ width:46px; height:46px; }

.brand-name{
  font-size:1.95rem;
  font-weight:700;
  letter-spacing:.005em;
  line-height:1;
  color:var(--gold-hi);
}
.brand-sub{
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:.45rem;
  opacity:.95;
}

/* The mobile menu panel hangs off the header, so it follows the height. */
@media (max-width:1080px){
  .nav{ inset:88px 0 auto 0; }
}

/* Hero copy starts below the taller header. */
.hero-content{ padding-top:6.5rem; }

/* The footer lockup is the sign-off, so it goes larger still. */
.site-footer .brand svg,
.site-footer .brand .brand-mark{ width:54px; height:54px; }
.site-footer .brand-name{ font-size:2.25rem; }
.site-footer .brand-sub{ font-size:.75rem; }

@media (max-width:560px){
  /* Still the loudest thing in the header, just sized to fit 375px. */
  .brand svg,
  .brand .brand-mark{ width:38px; height:38px; }
  .brand-name{ font-size:1.5rem; }
  .brand-sub{ display:block; font-size:.5625rem; letter-spacing:.3em; margin-top:.3rem; }
  .site-header{ height:80px; }
  .hero-content{ padding-top:5.5rem; }
}
@media (max-width:1080px) and (max-width:560px){
  .nav{ inset:80px 0 auto 0; }
}

/* At 375px the enlarged lockup plus the full actions cluster overflowed
   the header by 24px and pushed the menu button off screen. The header
   Enquire is the item that gives way: the hero carries a full-width
   Enquire immediately below, and the three floating contact buttons are
   on screen at all times, so nothing is lost. */
@media (max-width:560px){
  .header-actions .btn-sm{ display:none; }
  .header-inner{ gap:.75rem; }
}

/* ============================================================
   UTILITY BAR
   Phone and location sit above the lockup rather than inside it,
   so the number stays readable without crowding the brand. It
   collapses once the guest scrolls, keeping the sticky header
   compact.
   ============================================================ */

.site-header{
  height:auto;
  flex-direction:column;
  align-items:stretch;
}

.topbar{
  height:42px;
  overflow:hidden;
  background:rgba(11,10,8,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  border-image:var(--gold-line) 1;
  transition:height .45s var(--ease), opacity .35s var(--ease);
}
.site-header.is-stuck .topbar{
  height:0;
  opacity:0;
  border-bottom-width:0;
}
@media (prefers-reduced-motion: reduce){
  .topbar{ transition:none; }
}
@media (prefers-reduced-transparency: reduce){
  .topbar{ background:var(--ink-2); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

.topbar-inner{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.topbar-item{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:42px;
  font-size:.75rem;
  letter-spacing:.07em;
  color:var(--text-2);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.topbar-item i[class*="ph-"]{ color:var(--gold); font-size:1.05rem; }
.topbar-item:hover{ color:var(--gold-hi); }

/* The number is the point of the bar, so it carries the accent. */
.topbar-phone{
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.05em;
  color:var(--gold-hi);
  font-variant-numeric:tabular-nums;
}

/* The lockup row keeps its own height below the bar. */
.header-inner{ height:88px; flex:none; }

/* The mobile menu now hangs off the header itself, so it follows the
   header's height whether or not the utility bar is collapsed. */
@media (max-width:1080px){
  .nav{
    position:absolute;
    inset:auto 0 auto 0;
    top:100%;
  }
}

@media (max-width:560px){
  .header-inner{ height:80px; }
  .topbar,
  .topbar-inner{ height:38px; }
  .topbar-item{ min-height:38px; font-size:.6875rem; letter-spacing:.04em; gap:.4rem; }
  .topbar-phone{ font-size:.75rem; }
  .topbar-item i[class*="ph-"]{ font-size:.95rem; }
}

/* The address gets a genuinely shorter label on phones rather than a
   mid-word ellipsis, so the number (the actionable half) keeps its room. */
.loc-short{ display:none; }
@media (max-width:560px){
  .loc-full{ display:none; }
  .loc-short{ display:inline; }
}

/* The header is now 130px at rest (utility bar plus lockup), so the hero
   copy starts clear of it on short viewports. */
.hero-content{ padding-top:9.5rem; }
@media (max-width:560px){ .hero-content{ padding-top:8rem; } }