/* ══════════════════════════════════════════════════════════════════════════
   Coastaline Basera — "Brass & Tide"

   Every colour below was sampled out of the client's own logo rather than
   chosen: the brass of the ring and the BASERA plaque, the turquoise of the
   ring segments and the wave, the deep teal of the wordmark, the teak of the
   palm trunk and the roof, the coral on the palm fronds, and the warm paper
   the badge is printed on. The logo is the most ornate thing on the site by
   design, so the page type stays plain and the palette does the matching.

   The site commits to one look rather than following the OS theme: the logo
   is a warm cream artefact and an auto-inverted version of it would be a
   different, worse site. color-scheme is pinned so browsers do not re-colour
   the form controls underneath us.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  /* the paper the badge is printed on */
  --shell:    #F2EEE2;   /* page ground, sampled from the logo's own paper */
  --linen:    #E8E1D2;
  --paper:    #FFFFFF;
  --ink:      #052C35;   /* darkest tone in the logo */
  --ink-2:    #44605F;
  --ink-3:    #7E918C;
  --rule:     #DCD3C0;
  --rule-2:   #E9E3D5;

  /* the water: wordmark teal, ring turquoise */
  --sea:      #0B4450;   /* deep band ground */
  --sea-deep: #06313A;
  --tide:     #2E8C86;   /* interactive accent — the ring segments */
  --tide-ink: #1C6E6C;   /* dark enough for text on the cream ground */
  --foam:     #DEEDEA;

  /* the brass ring and the BASERA plaque */
  --gold:      #C2A05C;
  --gold-deep: #9D7F4E;
  --gold-lit:  #E6D7A4;
  --sun:       #C2A05C;  /* the sun disc in the logo is the same brass */

  /* the teak of the palm trunk and the roof, the coral on the fronds */
  --teak:      #614A3C;
  --coral:     #C98A63;
  --coral-soft:#F4E5DA;
  --sand:      #D9CDB4;

  /* on-dark */
  --on-dark:    #EFF3F0;
  --on-dark-2:  #A9C2BE;
  --on-dark-3:  #7E9A96;
  --glass:      rgba(255,255,255,.07);
  --glass-line: rgba(226,240,236,.16);

  --maxw: 74rem;
  --r: 4px;                                   /* one small radius, used sparingly */
  --lift: 0 1px 2px rgba(11,30,34,.05), 0 14px 34px -22px rgba(11,30,34,.35);
  --lift-2: 0 2px 6px rgba(11,30,34,.07), 0 30px 60px -34px rgba(11,30,34,.45);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}

/* ── Type scale ─────────────────────────────────────────────────────────── */
h1,h2,h3{
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-weight:500;letter-spacing:-.018em;text-wrap:balance;margin:0;
}
h1{font-size:clamp(2.6rem,7.4vw,5.6rem);line-height:.98;letter-spacing:-.035em}
h2{font-size:clamp(1.85rem,4.2vw,3.1rem);line-height:1.06}
h3{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.22}
em{font-style:italic}

.eyebrow{
  font-family:"DM Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tide-ink);margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.7rem;
}
/* The horizon mark: a rule with the sun sitting on it. Used as the section
   eyebrow throughout, because every room in the place faces west. */
.hz{
  display:inline-block;width:2.4rem;height:1px;background:currentColor;position:relative;flex:none;
}
.hz::after{
  content:"";position:absolute;right:-1px;top:-3px;
  width:7px;height:7px;border-radius:50%;background:var(--sun);
}
.coord{
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:.74rem;letter-spacing:.14em;margin:0 0 1.3rem;
}
.lede{font-size:clamp(1rem,1.6vw,1.12rem);color:var(--ink-2);max-width:56ch;margin:1rem 0 0}
.sub{
  font-family:"Figtree",sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 1.2rem;
}
.prose p{margin:0 0 1.05rem;max-width:62ch}
.prose p:last-child{margin-bottom:0}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  font-family:"Figtree",sans-serif;font-size:.95rem;font-weight:600;
  padding:.8rem 1.35rem;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  text-decoration:none;line-height:1.1;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.btn-solid{background:var(--sea);color:#fff;border-color:var(--sea)}
.btn-solid:hover{background:var(--tide);border-color:var(--tide)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-quiet{background:transparent;color:inherit;border-color:var(--rule)}
.btn-quiet:hover{border-color:var(--tide-ink);color:var(--tide-ink)}
.btn-sm{padding:.55rem 1rem;font-size:.86rem}
.btn-wide{width:100%;padding:.95rem}
.btn:active{transform:translateY(1px)}
:focus-visible{outline:2px solid var(--tide);outline-offset:3px;border-radius:2px}
.skip{
  position:absolute;left:-999px;top:0;background:var(--sea);color:#fff;
  padding:.7rem 1.1rem;z-index:100;
}
.skip:focus{left:.5rem;top:.5rem}

/* ── Header ─────────────────────────────────────────────────────────────── */
.head{
  position:fixed;inset:0 0 auto;z-index:60;
  padding:.85rem 0;
  color:var(--on-dark);
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),padding .3s var(--ease);
}
.head.stuck{
  background:rgba(242,241,234,.92);
  backdrop-filter:blur(12px) saturate(1.2);
  color:var(--ink);
  box-shadow:0 1px 0 var(--rule);
  padding:.55rem 0;
}
.head-in{display:flex;align-items:center;gap:1.4rem}
.mark{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:none}
/* The logo is a circular medallion on its own cream field. Masking it to a circle
   lets it sit on the dark hero and on the cream page without ever reading as a box. */
.mark-glyph{
  width:38px;height:38px;flex:none;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(194,160,92,.5);
  transition:box-shadow .3s var(--ease);
}
.head.stuck .mark-glyph{box-shadow:0 0 0 1px rgba(5,44,53,.14)}
.mark-words{display:flex;flex-direction:column;line-height:1.05}
.mark-words b{
  font-family:"Newsreader",serif;font-weight:500;font-size:1.12rem;letter-spacing:-.01em;
}
.mark-words i{
  font-style:normal;font-family:"DM Mono",monospace;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.72;
}
.nav{display:flex;gap:1.5rem;margin-left:auto;font-size:.92rem;font-weight:500}
.nav a{text-decoration:none;opacity:.86;position:relative;padding:.2rem 0}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;transition:right .25s var(--ease);
}
.nav a:hover{opacity:1}
.nav a:hover::after{right:0}
.head-cta{display:flex;gap:.55rem;flex:none}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;color:inherit}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;margin:4px 0;transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-5.5px) rotate(-45deg)}

.banner{
  position:relative;z-index:70;background:var(--teak);color:#fff;
  text-align:center;padding:.6rem 1rem;font-size:.88rem;font-weight:500;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:min(82vh,46rem);
  display:flex;align-items:flex-end;
  padding:9rem 0 5.5rem;
  color:var(--on-dark);
  overflow:hidden;
  isolation:isolate;
}
.hero-art{position:absolute;inset:0;z-index:-2;background:var(--sea-deep)}
.hero-svg{width:100%;height:100%;display:block}
/* When the client uploads a photo tagged "hero", site.js sets it here and the
   drawn horizon underneath stops showing. */
.hero-art.has-photo{background-size:cover;background-position:center 60%}
.hero-art.has-photo .hero-svg{display:none}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top, rgba(6,18,21,.86) 0%, rgba(6,18,21,.45) 32%, rgba(6,18,21,.12) 62%, rgba(6,18,21,.5) 100%);
}
.hero-in{
  position:relative;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
}
.hero-badge{flex:none}
.hero-badge img{
  width:clamp(8rem,15vw,13.5rem);height:auto;border-radius:50%;
  box-shadow:0 0 0 1px rgba(230,215,164,.35), 0 26px 60px -24px rgba(0,0,0,.75);
}
.hero h1{max-width:16ch}
.hero h1 em{color:var(--sun);font-style:italic}
.hero-sub{
  font-size:clamp(1.02rem,2vw,1.3rem);max-width:46ch;color:var(--on-dark-2);
  margin:1.4rem 0 0;
}
.hero-facts{
  display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;list-style:none;padding:0;
  margin:2.2rem 0 0;font-size:.86rem;color:var(--on-dark-2);
  font-family:"DM Mono",monospace;letter-spacing:.04em;
}
.hero-facts li{display:flex;align-items:center;gap:.6rem}
.hero-facts li+li::before{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--sun);
  margin-left:-1.2rem;
}

/* ── Enquiry bar ────────────────────────────────────────────────────────── */
.askbar{
  position:relative;margin:-3.2rem 0 0;z-index:10;
  background:var(--paper);box-shadow:var(--lift-2);
  border-radius:var(--r);
  display:grid;grid-template-columns:minmax(14rem,1fr) auto;gap:1.2rem 2rem;
  align-items:center;padding:1.25rem 1.4rem;
  border-top:3px solid var(--gold);
}
.askbar-lede{display:flex;flex-direction:column;gap:.15rem}
.askbar-lede strong{font-size:1.05rem}
.askbar-lede span{font-size:.86rem;color:var(--ink-2);max-width:40ch}
.askbar-fields{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap}
.askbar-fields .btn{height:3rem}

.fld{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.fld > span{
  font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);
}
.fld > span i{color:var(--coral);font-style:normal}
.fld input,.fld select,.fld textarea{
  font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r);
  padding:.72rem .8rem;width:100%;height:3rem;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.fld textarea{height:auto;min-height:5rem;resize:vertical;line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--tide);box-shadow:0 0 0 3px var(--foam);
}
.fld input.bad,.fld select.bad{border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-soft)}

/* ── Bands ──────────────────────────────────────────────────────────────── */
.band{padding:clamp(4rem,9vw,7.5rem) 0;position:relative}
.band-tight{padding:clamp(2rem,4vw,3rem) 0}
.band-shell{background:var(--shell)}
.band-linen{background:var(--linen)}
.band-sea{background:var(--sea);color:var(--on-dark)}
.band-ink{background:var(--ink);color:var(--on-dark)}
.band-sea .eyebrow,.band-ink .eyebrow{color:var(--on-dark-2)}
.band-sea .lede,.band-ink .lede{color:var(--on-dark-2)}
.band-sea .sub,.band-ink .sub{color:var(--on-dark-3)}
.band-sea .btn-quiet,.band-ink .btn-quiet{border-color:var(--glass-line);color:var(--on-dark)}
.sec-head{margin:0 0 clamp(2rem,4vw,3.2rem);max-width:62ch}

/* ── Room cards ─────────────────────────────────────────────────────────── */
.room-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 2rem}
.chip{
  font:inherit;font-size:.85rem;font-weight:500;
  padding:.45rem .9rem;border-radius:99px;cursor:pointer;
  border:1px solid var(--rule);background:transparent;color:var(--ink-2);
  transition:all .18s var(--ease);
}
.chip:hover{border-color:var(--tide-ink);color:var(--tide-ink)}
.chip.is-on{background:var(--sea);border-color:var(--sea);color:#fff}

.rooms{display:grid;gap:1.5rem}
.loading{color:var(--ink-3);font-size:.92rem}

/* The room card is the one place that gets elevation: it is the only thing on
   the page you act on. Everything else sits on hairlines. */
.room{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:var(--paper);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--lift);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.room:hover{box-shadow:var(--lift-2);transform:translateY(-2px)}
.room-art{position:relative;min-height:19rem;background:var(--sea-deep);overflow:hidden}
.room-art img,.room-art .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room-flags{position:absolute;top:.85rem;left:.85rem;display:flex;gap:.4rem;flex-wrap:wrap;z-index:2}
.flag{
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(8,22,25,.72);color:var(--on-dark);backdrop-filter:blur(6px);
  padding:.3rem .55rem;border-radius:2px;
}
.flag-sun{background:var(--gold);color:#2E2208}
.room-count{
  position:absolute;bottom:.85rem;right:.85rem;z-index:2;
  font-family:"DM Mono",monospace;font-size:.68rem;
  background:rgba(8,22,25,.65);color:var(--on-dark);padding:.3rem .55rem;border-radius:2px;
}
.room-body{padding:1.7rem 1.8rem;display:flex;flex-direction:column;gap:1rem}
.room-body h3{font-size:1.55rem}
.room-blurb{color:var(--ink-2);font-size:.95rem;margin:0}

.specs{
  display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;list-style:none;padding:0;margin:0;
  font-size:.84rem;color:var(--ink-2);
}
.specs li{display:flex;align-items:center;gap:.4rem}
.specs li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--sand)}
.specs li:first-child::before{display:none}

.room-amen{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:0}
.room-amen li{
  font-size:.78rem;color:var(--ink-2);
  border:1px solid var(--rule-2);border-radius:2px;padding:.2rem .5rem;
}

/* The price rail. This site quotes ranges rather than live rates, so the range
   is drawn as a measured span against the whole property's spread instead of
   being hidden in a "from ₹x" line. It is the most honest chart on the page. */
.rail{margin-top:auto;padding-top:.4rem}
.rail-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.rail-price{
  font-family:"DM Mono",monospace;font-size:1.02rem;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.rail-price small{font-size:.72rem;color:var(--ink-3);font-weight:400;letter-spacing:.04em}
.rail-label{
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.rail-track{position:relative;height:5px;background:var(--rule-2);border-radius:99px;overflow:hidden}
.rail-span{
  position:absolute;top:0;bottom:0;border-radius:99px;
  background:linear-gradient(90deg,var(--tide),var(--sun));
}
.rail-foot{
  display:flex;justify-content:space-between;margin-top:.4rem;
  font-family:"DM Mono",monospace;font-size:.66rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.room-act{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.room-note{
  font-size:.82rem;color:var(--ink-2);background:var(--linen);
  border-left:2px solid var(--sand);padding:.55rem .7rem;margin:0;
}
.room-more{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:.86rem;
  color:var(--tide-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;
}
.room-detail{display:none;font-size:.92rem;color:var(--ink-2)}
.room-detail.open{display:block}

/* ── The house band ─────────────────────────────────────────────────────── */
.place-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.place-copy .prose{color:var(--on-dark-2);font-size:1.02rem}
.sunset{
  margin:1.8rem 0 0;padding:.9rem 1.1rem;font-size:.9rem;
  border-left:2px solid var(--sun);color:var(--on-dark-2);background:var(--glass);
}
.place-side{display:grid;gap:1rem}
.panel{padding:1.4rem 1.5rem;border-radius:var(--r)}
.panel-glass{background:var(--glass);border:1px solid var(--glass-line)}
.panel h3{font-size:1.1rem;margin:0 0 1rem}
.dist,.seasons{list-style:none;padding:0;margin:0;display:grid;gap:.1rem}
.dist li,.seasons li{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.5rem 0;border-bottom:1px solid var(--glass-line);font-size:.9rem;
}
.dist li:last-child,.seasons li:last-child{border-bottom:0}
.dist b,.seasons b{font-weight:500}
.dist span,.seasons span{
  font-family:"DM Mono",monospace;font-size:.78rem;color:var(--on-dark-2);
  text-align:right;flex:none;font-variant-numeric:tabular-nums;
}
.dist em{display:block;font-style:normal;font-size:.74rem;color:var(--on-dark-3)}
.seasons em{display:block;font-style:normal;font-size:.78rem;color:var(--on-dark-3);margin-top:.1rem}

.amen{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--glass-line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem;
}
.amen-group h4{
  font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-dark-3);margin:0 0 .8rem;font-weight:400;
}
.amen-group ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem;font-size:.92rem}
.amen-group li{display:flex;gap:.6rem;align-items:flex-start;color:var(--on-dark-2)}
.amen-group li::before{content:"—";color:var(--on-dark-3);flex:none}

/* ── The table ──────────────────────────────────────────────────────────── */
.table-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.meals{list-style:none;padding:0;margin:0}
.meals li{
  display:grid;grid-template-columns:1fr auto;gap:.3rem 1.5rem;align-items:baseline;
  padding:1rem 0;border-top:1px solid var(--rule);
}
.meals li:last-child{border-bottom:1px solid var(--rule)}
.meals b{font-weight:600;font-size:1rem}
.meals .price{
  font-family:"DM Mono",monospace;font-size:.92rem;color:var(--tide-ink);
  font-variant-numeric:tabular-nums;text-align:right;
}
.meals em{grid-column:1/-1;font-style:normal;font-size:.86rem;color:var(--ink-2)}

/* ── Gokarna ────────────────────────────────────────────────────────────── */
.exp{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem;margin:0 0 3.5rem}
.exp-item{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);
  padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;
}
.exp-item h4{margin:0;font-family:"Newsreader",serif;font-weight:500;font-size:1.2rem;line-height:1.2}
.exp-item p{margin:0;font-size:.89rem;color:var(--on-dark-2)}
.exp-meta{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-top:auto;padding-top:.6rem;
  font-family:"DM Mono",monospace;font-size:.76rem;
}
.exp-price{color:var(--sun);font-variant-numeric:tabular-nums}
.exp-detail{color:var(--on-dark-3)}

.nearby{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.6rem 2rem}
.nearby-item{display:grid;gap:.3rem;padding-left:1rem;border-left:1px solid var(--glass-line)}
.nearby-item h4{margin:0;font-size:1rem;font-weight:600;font-family:"Figtree",sans-serif}
.nearby-item .exp-detail{font-family:"DM Mono",monospace;font-size:.72rem;color:var(--sun)}
.nearby-item p{margin:.2rem 0 0;font-size:.87rem;color:var(--on-dark-2)}

/* ── Offers ─────────────────────────────────────────────────────────────── */
.offer-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1rem}
.offer{
  border:1px solid var(--sand);border-left:3px solid var(--gold-deep);
  padding:1.2rem 1.4rem;background:var(--paper);display:grid;gap:.4rem;
}
.offer .badge{
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-deep);
}
.offer h3{font-size:1.15rem}
.offer p{margin:0;font-size:.9rem;color:var(--ink-2)}
.offer .terms{font-size:.78rem;color:var(--ink-3)}

/* ── Photos ─────────────────────────────────────────────────────────────── */
.grid-photos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));
  grid-auto-rows:11rem;gap:.6rem;
  /* dense: the 2x2 feature tiles otherwise leave holes a photo could sit in */
  grid-auto-flow:dense;
}
.shot{
  position:relative;overflow:hidden;border-radius:2px;cursor:zoom-in;
  background:var(--sea-deep);border:0;padding:0;display:block;
}
.shot:nth-child(6n+1){grid-row:span 2;grid-column:span 2}
.shot:nth-child(6n+4){grid-row:span 2}
.shot img,.shot .ph{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{
  position:absolute;inset:auto 0 0;padding:1.6rem .8rem .6rem;
  background:linear-gradient(transparent,rgba(6,18,21,.78));
  color:var(--on-dark);font-size:.8rem;
}
/* Honest about what is drawn rather than photographed. */
.ph-tag{
  position:absolute;top:.6rem;right:.6rem;z-index:2;
  font-family:"DM Mono",monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(8,22,25,.55);color:rgba(239,243,240,.78);
  padding:.25rem .45rem;border-radius:2px;backdrop-filter:blur(4px);
}

/* ── Reviews ────────────────────────────────────────────────────────────── */
.quotes{columns:3;column-gap:1.4rem}
.quote{
  break-inside:avoid;margin:0 0 1.4rem;background:var(--paper);
  padding:1.4rem 1.5rem;border:1px solid var(--rule-2);border-radius:var(--r);
}
.quote blockquote{margin:0;font-size:.97rem;line-height:1.6;color:var(--ink)}
.quote figcaption{
  margin-top:.9rem;font-size:.82rem;color:var(--ink-3);
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
}
.quote figcaption b{color:var(--ink-2);font-weight:600}
.stars{color:var(--sun);letter-spacing:.1em;font-size:.8rem;flex:none}

/* ── Good to know ───────────────────────────────────────────────────────── */
.know-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.policies{margin:2.2rem 0 0;display:grid;gap:0}
.policies > div{padding:1.05rem 0;border-top:1px solid var(--rule)}
.policies > div:last-child{border-bottom:1px solid var(--rule)}
.policies dt{
  font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 .35rem;
}
.policies dd{margin:0;font-size:.94rem;color:var(--ink-2);white-space:pre-line}

.faqs{display:grid}
.faq{border-top:1px solid var(--rule)}
.faq:last-child{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;position:relative;
  font-weight:600;font-size:.97rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  font-family:"DM Mono",monospace;color:var(--tide-ink);font-size:1.1rem;transition:transform .2s var(--ease);
}
.faq[open] summary::after{content:"−"}
.faq p{margin:0 0 1.1rem;font-size:.93rem;color:var(--ink-2);max-width:58ch}

/* ── Find us ────────────────────────────────────────────────────────────── */
.find-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.contact{margin:2rem 0 0;display:grid;gap:0}
.contact > div{display:flex;justify-content:space-between;gap:1.5rem;padding:.75rem 0;border-bottom:1px solid var(--glass-line);align-items:baseline}
.contact dt{font-size:.82rem;color:var(--on-dark-3);flex:none}
.contact dd{margin:0;text-align:right;font-size:.95rem}
.contact dd a{text-decoration:none;border-bottom:1px solid var(--glass-line)}
.contact dd a:hover{border-color:var(--sun)}
.find-cta{display:flex;gap:.7rem;margin-top:1.8rem;flex-wrap:wrap}
.find-map{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--sea-deep);border:1px solid var(--glass-line)}
.find-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.85)}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--on-dark-2);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:2rem;align-items:start}
.foot-mark{width:56px;height:56px;border-radius:50%;margin:0 0 .9rem}
.foot-brand b{
  font-family:"Newsreader",serif;font-weight:500;font-size:1.3rem;color:var(--on-dark);
  display:block;margin-bottom:.6rem;
}
.foot-brand p{margin:0 0 .4rem;font-size:.88rem;max-width:34ch}
.foot-tag{font-family:"Newsreader",serif;font-style:italic;font-size:1rem !important;color:var(--gold-lit)}
.foot-legal{color:var(--on-dark-3);font-size:.8rem !important}
.foot-nav{display:grid;gap:.45rem;font-size:.9rem}
.foot-nav a{text-decoration:none;opacity:.85}
.foot-nav a:hover{opacity:1;color:var(--sun)}
.foot-social{display:flex;gap:.8rem;font-size:.88rem}
.foot-social a{text-decoration:none;border-bottom:1px solid var(--glass-line)}
.foot-base{
  margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--glass-line);
  font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-3);
}

/* ── WhatsApp float ─────────────────────────────────────────────────────── */
.wa-float{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:55;
  width:3.2rem;height:3.2rem;border-radius:50%;
  background:#1FA855;color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 26px -10px rgba(14,79,87,.6);
  transition:transform .2s var(--ease);
}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:1.7rem;height:1.7rem}

/* ── Dialogs ────────────────────────────────────────────────────────────── */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none}
dialog::backdrop{background:rgba(6,18,21,.62);backdrop-filter:blur(3px)}
.sheet{
  width:min(40rem,100vw);margin:auto;background:var(--paper);color:var(--ink);
  border-radius:var(--r);box-shadow:var(--lift-2);position:relative;
  max-height:94vh;overflow:auto;
}
.sheet-x{position:sticky;top:0;float:right;z-index:3;margin:.5rem .5rem -3rem}
.sheet-x button{
  background:var(--shell);border:1px solid var(--rule);width:2.1rem;height:2.1rem;
  border-radius:50%;cursor:pointer;font-size:.9rem;color:var(--ink-2);line-height:1;
}
.sheet-in{padding:clamp(1.6rem,4vw,2.4rem)}
.sheet h2{font-size:clamp(1.6rem,3.4vw,2.1rem);margin-bottom:.5rem}
.sheet-lede{color:var(--ink-2);font-size:.93rem;margin:0 0 1.6rem;max-width:48ch}
.sheet form{display:grid;gap:.95rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{
  margin:0;background:var(--coral-soft);border-left:3px solid var(--coral);
  color:#7A4A2E;padding:.7rem .9rem;font-size:.89rem;
}
.sheet-fine{font-size:.78rem;color:var(--ink-3);margin:0;text-align:center}

.done{text-align:center;display:grid;gap:.6rem;justify-items:center;padding:1rem 0 .5rem}
.done-tick{width:3.4rem;height:3.4rem;color:var(--tide)}
.done h3{font-size:1.5rem}
.done p{color:var(--ink-2);font-size:.95rem;max-width:40ch;margin:0}
.done b{font-family:"DM Mono",monospace;color:var(--ink);letter-spacing:.04em}
.done .btn{margin-top:.6rem;min-width:14rem}

.lightbox{
  width:100vw;height:100vh;display:none;place-items:center;
  grid-template-columns:auto 1fr auto;gap:1rem;padding:1rem;
}
.lightbox[open]{display:grid}
.lightbox figure{margin:0;max-width:min(78rem,92vw);max-height:88vh;display:grid;gap:.7rem;justify-items:center}
.lightbox img{max-height:82vh;width:auto;border-radius:2px}
.lightbox figcaption{color:var(--on-dark-2);font-size:.86rem;text-align:center}
.lb-x{
  position:fixed;top:1rem;right:1rem;z-index:3;width:2.4rem;height:2.4rem;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;font-size:1rem;
}
.lb-nav{
  background:rgba(255,255,255,.1);color:#fff;border:0;cursor:pointer;
  width:2.8rem;height:4.4rem;border-radius:2px;font-size:1.6rem;line-height:1;
}
.lb-nav:hover{background:rgba(255,255,255,.2)}

/* ── Reveal on scroll. The class is added by JS; with JS off or reduced
      motion on, nothing is ever left invisible. ─────────────────────────── */
.rv{transform:translateY(12px);transition:transform .6s var(--ease)}
.rv.in{transform:none}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .quotes{columns:2}
  .room{grid-template-columns:1fr}
  .room-art{min-height:15rem}
}
@media (max-width:860px){
  .nav{
    position:fixed;inset:4.2rem .8rem auto;flex-direction:column;gap:0;
    background:var(--paper);color:var(--ink);border-radius:var(--r);
    box-shadow:var(--lift-2);padding:.4rem;display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:.85rem 1rem;border-bottom:1px solid var(--rule-2);opacity:1}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
  .burger{display:block;margin-left:auto}
  .head-cta{order:3}
  .head-cta .btn-quiet{display:none}
  .place-grid,.table-grid,.know-grid,.find-grid,.foot-in{grid-template-columns:1fr}
  .hero-in{grid-template-columns:1fr;align-items:start}
  .hero-badge{order:-1}
  .hero-badge img{width:7rem}
  .askbar{grid-template-columns:1fr;margin-top:-2rem}
  .askbar-fields{display:grid;grid-template-columns:1fr 1fr}
  .askbar-fields .btn{grid-column:1/-1}
  .grid-photos{grid-auto-rows:9rem}
  .shot:nth-child(6n+1){grid-column:span 2}
}
@media (max-width:620px){
  .quotes{columns:1}
  .hero{min-height:auto;padding:7.5rem 0 3.5rem}
  .f2{grid-template-columns:1fr}
  .room-body{padding:1.3rem 1.3rem}
  .exp{grid-template-columns:1fr}
  .grid-photos{grid-template-columns:1fr 1fr;grid-auto-rows:7.5rem}
  .hero-facts{gap:.4rem 1.2rem}
  .hero-facts li+li::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .rv{transform:none}
}

@media print{
  .head,.askbar,.wa-float,.find-map,.room-act,.btn{display:none !important}
  body{background:#fff}
  .band{padding:1.5rem 0;background:#fff !important;color:#000 !important}
}