/* ============================================================
   Eurotel — Diu
   Palette: cool paper, ink, blue accent + navy (carried from the "et" mark)
   Type:    Newsreader (display) + Figtree (interface)
   ============================================================ */

:root {
  --paper: #F4F6F9;
  --paper-2: #FFFFFF;
  --paper-3: #E8EDF4;
  --ink: #0F1620;
  --ink-2: #48545F;
  --ink-3: #7B8794;
  --blue: #1D5FA8;                        /* accent on light: eyebrows, icons, CTAs */
  --blue-deep: #164A85;                   /* its hover */
  --blue-tint: rgba(29, 95, 168, .12);
  --blue-soft: #8FB3E6;                   /* accent on navy, where --blue would sink */
  --navy: #032956;                        /* dark surfaces: footer, story panel, menu */
  --navy-2: #021C3D;
  --line: rgba(15, 22, 32, .13);
  --line-soft: rgba(15, 22, 32, .07);

  --serif: "Poppins", Arial, sans-serif;   /* display + body share Poppins, as before */
  --sans: "Poppins", Arial, sans-serif;

  --header-height: 72px;
  --shell: 1180px;
  --pad: clamp(18px, 4vw, 48px);
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(15, 22, 32, .04), 0 12px 32px -18px rgba(15, 22, 32, .35);
  --shadow-float: 0 24px 60px -28px rgba(3, 41, 86, .45);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.booking-modal-open,
body.room-modal-open { overflow: hidden; }

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Dialogs take focus programmatically — no ring on the panel itself */
.booking-dialog:focus, .booking-dialog:focus-visible,
.room-dialog:focus, .room-dialog:focus-visible { outline: none; }

.skip-link {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .82rem;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

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

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.35rem, 4.5vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 2.9vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.032em;
}

h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.015em;
}

h1 em, h2 em { font-style: italic; font-weight: 600; }

/* Signature detail: the wordmark's rule-flanked label, reused as the section eyebrow */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--blue);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.eyebrow::after {
  flex: 0 0 auto;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  content: "";
}
.eyebrow-light { color: var(--blue-soft); }
.eyebrow-center { justify-content: center; }
.eyebrow-center::before {
  order: -1;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  content: "";
}

.shell {
  width: min(100% - var(--pad) * 2, var(--shell));
  margin-inline: auto;
}

.section { padding: clamp(52px, 6vw, 78px) 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: clamp(24px, 2.6vw, 34px);
}
.section-note {
  max-width: 36ch;
  color: var(--ink-2);
  font-size: .92rem;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .005em;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.button span { transition: transform .3s var(--ease); }
.button:hover span { transform: translateX(4px); }

.button-blue { background: var(--blue); color: #fff; }
.button-blue:hover { background: var(--blue-deep); }

.button-dark { background: var(--navy); color: var(--paper); }
.button-dark:hover { background: var(--navy-2); }

.button-light { background: var(--paper-2); color: var(--ink); }
.button-light:hover { background: var(--paper-3); }

.button-lg { padding: 13px 24px; font-size: .88rem; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: .82rem;
  font-weight: 600;
}
.text-link span { transition: transform .3s var(--ease); }
.text-link:hover { color: var(--blue-deep); }
.text-link:hover span { transform: translateX(4px); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  z-index: 60;
  top: 0;
  right: 0;
  left: 0;
  height: var(--header-height);
  transition: transform .4s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-solid {
  background: rgba(244, 246, 249, .93);
  box-shadow: 0 1px 0 var(--line-soft);
  backdrop-filter: saturate(140%) blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: 100%;
  padding-inline: var(--pad);
}

/* "et" monogram + live wordmark. The mark ships as two SVGs (white / ink)
   that cross-fade, since the header is transparent over the hero and
   turns light once .is-solid kicks in. */
.brand { display: flex; flex: 0 0 auto; align-items: center; }
.brand-mark { position: relative; display: block; width: 46px; height: 46px; }
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .3s var(--ease);
}
.brand-mark .brand-ink { position: absolute; top: 0; left: 0; opacity: 0; }
.is-solid .brand-mark .brand-light { opacity: 0; }
.is-solid .brand-mark .brand-ink { opacity: 1; }

.desktop-nav {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  margin-inline: auto;
  font-size: .83rem;
  font-weight: 500;
}
.desktop-nav a {
  position: relative;
  padding-block: 4px;
  color: rgba(255, 255, 255, .88);
  transition: color .25s var(--ease);
}
.desktop-nav a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .3s var(--ease);
  content: "";
}
.desktop-nav a:hover { color: #fff; }
.desktop-nav a:hover::after { width: 100%; }
.is-solid .desktop-nav a { color: var(--ink-2); }
.is-solid .desktop-nav a:hover { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 18px; }

.header-place {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .82);
  font-size: .78rem;
  letter-spacing: .01em;
}
.header-place svg { width: 16px; height: 16px; }
.is-solid .header-place { color: var(--ink-2); }

.menu-toggle {
  display: none;              /* -> flex at <=960px */
  width: 42px;
  height: 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .32);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.menu-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: #fff;
  transition: transform .3s var(--ease);
}
/* bars fold into an X — half the 5px gap plus half a bar = 3.25px of travel each */
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.is-solid .menu-toggle { border-color: var(--line); }
.is-solid .menu-toggle span { background: var(--ink); }

.mobile-menu {
  position: fixed;
  z-index: 55;
  top: var(--header-height);
  right: 0;
  left: 0;
  display: grid;
  gap: 4px;
  padding: 20px var(--pad) 30px;
  background: var(--navy);
  color: #fff;
  transform: translateY(-14px);
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mobile-menu.is-open { visibility: visible; opacity: 1; transform: none; }
.mobile-menu a {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
}

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

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(84vh, 720px);
  /* Optical centring: the header covers the top and the booking bar covers
     the bottom 46px, so each padding offsets its own obstruction plus an
     equal 30px. Content then centres in the strip you can actually see. */
  padding: calc(var(--header-height) + 30px) var(--pad) 76px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  z-index: -1;
  inset: 0;
  /* Navy-tinted scrim, weighted left where the copy sits. The house shot is
     bright (white walls, midday sky) so this runs heavier than a dusk photo
     would need — white type has to hold against it. */
  background-image:
    linear-gradient(100deg, rgba(2, 18, 38, .88) 0%, rgba(2, 18, 38, .62) 46%, rgba(2, 18, 38, .2) 100%),
    linear-gradient(to top, rgba(2, 18, 38, .55), rgba(2, 18, 38, 0) 48%),
    linear-gradient(rgba(3, 41, 86, .18), rgba(3, 41, 86, .18)),
    url("assets/hero-house.jpg");
  background-position: center 55%;
  background-size: cover;
  animation: hero-settle 1.6s var(--ease) both;
}

@keyframes hero-settle {
  from { transform: scale(1.06); opacity: .4; }
  to { transform: none; opacity: 1; }
}

.hero-inner {
  width: min(100%, var(--shell));
  margin-inline: auto;
  animation: rise .9s .15s var(--ease) both;
}

@keyframes rise {
  from { transform: translateY(22px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.hero h1 {
  max-width: 19ch;
  font-size: clamp(2.5rem, 5.2vw, 4.2rem);
  text-wrap: balance;
}
.hero-lede {
  max-width: 46ch;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, .84);
  font-size: 1rem;
}

/* Three concrete facts under the lede — gives the block texture and
   answers "what actually is this" before the booking bar. */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  margin-top: 26px;
  color: rgba(255, 255, 255, .82);
  font-size: .85rem;
  font-weight: 500;
}
.hero-facts li { display: flex; align-items: center; gap: 13px; }
.hero-facts li:not(:last-child)::after {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--blue-soft);
  content: "";
}

/* ---------- Booking bar ---------- */

/* Rides up over the hero's bottom edge, then sticks under the header as you scroll.
   It lives outside .hero because the hero clips its own overflow for the load animation. */
.booking-shell {
  position: sticky;
  top: calc(var(--header-height) + 10px);
  z-index: 45;
  margin-top: -46px;
  padding-inline: var(--pad);
  transition: top .4s var(--ease);
}
body.nav-hidden .booking-shell { top: 10px; }   /* header slid away — follow it up */

.booking-bar {
  display: flex;
  align-items: stretch;
  gap: 2px;
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  color: var(--ink);           /* the bar sits inside the white-text hero */
  box-shadow: var(--shadow-float);
}

.booking-segment {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  text-align: left;
  transition: background .25s var(--ease);
}
.booking-segment + .booking-segment { box-shadow: inset 1px 0 0 var(--line-soft); }
.booking-segment:hover { background: var(--paper-3); }

.booking-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--blue); }

.booking-copy { display: grid; gap: 1px; min-width: 0; }
.booking-label {
  color: var(--ink-3);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.booking-copy strong { font-size: .86rem; font-weight: 600; }
.booking-copy small { color: var(--ink-3); font-size: .73rem; }
.booking-mobile-copy { display: none; }

.booking-submit {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--blue);
  color: var(--paper);
  font-size: .84rem;
  font-weight: 600;
  transition: background .25s var(--ease);
}
.booking-submit span:last-child { transition: transform .3s var(--ease); }
.booking-submit:hover { background: var(--blue-deep); }
.booking-submit:hover span:last-child { transform: translateX(4px); }

/* ---------- Rooms ---------- */

.rooms { padding-top: clamp(62px, 6vw, 84px); }

.room-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.5vw, 20px);
}

.room-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.room-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(15, 22, 32, .05), 0 26px 50px -26px rgba(15, 22, 32, .45);
}

.room-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 11;
}
.room-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.room-card:hover .room-media img { transform: scale(1.04); }

.room-chip {
  position: absolute;
  top: 11px;
  left: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.room-body { display: flex; flex-direction: column; gap: 9px; padding: 16px 16px 15px; }
.room-body > p { color: var(--ink-2); font-size: .84rem; }

.room-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
  font-size: .75rem;
}
.room-specs li { display: inline-flex; align-items: center; gap: 7px; }
.room-specs svg { width: 14px; height: 14px; color: var(--blue); }

.room-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.room-price { font-size: .94rem; font-weight: 600; }
.room-price span { color: var(--ink-3); font-size: .76rem; font-weight: 400; }

/* ---------- Amenity strip ---------- */

.amenities {
  padding: clamp(44px, 4.5vw, 64px) 0;
  border-block: 1px solid var(--line-soft);
  background: var(--paper-3);
}
.amenities .eyebrow { color: var(--blue); }

.amenity-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
}
.amenity-strip li {
  display: grid;
  gap: 10px;
  padding: clamp(32px, 3vw, 44px) clamp(24px, 2.4vw, 34px);
  background: var(--paper-3);
  text-align: center;
  justify-items: center;
}
/* type scale shared with .confidence-card so the two feature rows read as one system */
.amenity-strip svg { width: 52px; height: 52px; margin-bottom: 10px; color: var(--blue); }
.amenity-strip h3 { font-size: clamp(1.45rem, 2vw, 1.85rem); }
.amenity-strip p { max-width: 32ch; color: var(--ink-2); font-size: clamp(1.05rem, 1.15vw, 1.2rem); line-height: 1.55; }

/* ---------- Discover Diu ---------- */

.diu-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.5vw, 20px);
}

.diu-card {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.diu-card:hover { transform: translateY(-4px); }

.diu-card-toggle { display: block; width: 100%; text-align: left; }

.diu-card-photo {
  display: block;
  aspect-ratio: 16 / 10;
  background-position: center;
  background-size: cover;
  transition: transform .8s var(--ease);
}
.diu-card:hover .diu-card-photo { transform: scale(1.03); }

.diu-card-beach { background-image: url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1000&q=80"); }
.diu-card-fort { background-image: url("https://cdnbbsr.s3waas.gov.in/s371e09b16e21f7b6919bbfc43f6a5b2f0/uploads/2020/10/2020100332-scaled.jpg"); }
.diu-card-quarter { background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/St._Paul%27s_Church%2C_Diu_edited_from_St._Paul%27s_Church_Daman_%26_Diu%2C_Diu_Dsc-0004.jpg/1280px-St._Paul%27s_Church%2C_Diu_edited_from_St._Paul%27s_Church_Daman_%26_Diu%2C_Diu_Dsc-0004.jpg"); }

.diu-card-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
}
.diu-card-caption strong { display: block; font-size: .9rem; font-weight: 600; }
.diu-card-caption em { color: var(--ink-3); font-size: .76rem; font-style: normal; }

.diu-card-chevron {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--blue);
  font-size: .9rem;
  line-height: 1;
  transition: transform .35s var(--ease), background .25s var(--ease);
}
.diu-card:hover .diu-card-chevron { background: var(--blue-tint); }
.diu-card.is-expanded .diu-card-chevron { transform: rotate(180deg); }

.diu-card-details {
  display: grid;
  gap: 8px;
  padding: 0 15px;
  color: var(--ink-2);
  font-size: .83rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease), opacity .3s var(--ease), padding .45s var(--ease);
}
.diu-card.is-expanded .diu-card-details {
  max-height: 320px;
  padding: 0 15px 16px;
  opacity: 1;
}
.diu-card-details em {
  color: var(--blue-deep);
  font-size: .82rem;
}

/* ---------- Story ---------- */

.stay-story {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--navy);
  color: #fff;
}
.stay-story-image {
  min-height: 360px;
  background: url("https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&w=1400&q=80") center / cover;
}
.stay-story-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 56px);
}
.stay-story-copy h2 { color: #fff; }
.stay-story-copy p { max-width: 48ch; color: rgba(255, 255, 255, .78); font-size: .89rem; }
.stay-story-logo { display: flex; align-items: center; gap: 14px; }
.stay-story-logo img { display: block; width: 62px; height: 62px; object-fit: contain; }
.stay-story-text {
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.03em;
}
.stay-story-copy .button { justify-self: start; margin-top: 6px; }

/* ---------- Book with confidence ---------- */

.confidence { padding: clamp(44px, 4.5vw, 64px) 0; }
.confidence-head { margin-bottom: 26px; }

.confidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
.confidence-card {
  display: grid;
  gap: 12px;
  padding: clamp(32px, 3vw, 44px) clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper-2);
}
/* type scale shared with .amenity-strip — keep these in step */
.confidence-card svg { width: 52px; height: 52px; color: var(--blue); }
.confidence-card h3 { margin-bottom: 8px; font-size: clamp(1.45rem, 2vw, 1.85rem); }
.confidence-card p { color: var(--ink-2); font-size: clamp(1.05rem, 1.15vw, 1.2rem); line-height: 1.55; }

/* ---------- Location ---------- */

.diu-guide { display: grid; grid-template-columns: 1.2fr 1fr; }
.diu-map { min-height: 400px; }
.diu-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.85); }

.diu-copy {
  display: grid;
  align-content: center;
  gap: 13px;
  padding: clamp(40px, 4.5vw, 62px) clamp(24px, 3.4vw, 48px);
  background: var(--navy-2);
  color: #fff;
}
.diu-copy h2 { color: #fff; }
.location-address { display: grid; gap: 3px; font-size: .86rem; }
.location-address strong { font-size: .92rem; }
.location-address address { color: rgba(255, 255, 255, .74); }
.location-note { max-width: 42ch; color: rgba(255, 255, 255, .74); font-size: .85rem; }
.diu-copy .button { justify-self: start; margin-top: 8px; }

/* ---------- Closing band ---------- */

.closing { padding: clamp(40px, 4.5vw, 60px) 0 clamp(46px, 5vw, 66px); }
.closing-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: clamp(26px, 3vw, 36px) clamp(22px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--paper);
}
.closing-inner h2 { max-width: 18ch; color: var(--paper); }
.closing-inner p { margin-top: 7px; color: rgba(244, 246, 249, .66); font-size: .86rem; }

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

.site-footer {
  padding: clamp(38px, 4.5vw, 56px) 0 22px;
  background: var(--navy);
  color: rgba(255, 255, 255, .74);
  font-size: .83rem;
}
.footer-main {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-wordmark { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.footer-wordmark img { display: block; width: 44px; height: 44px; object-fit: contain; }
.footer-wordmark-text {
  color: #fff;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.025em;
}
.footer-brand p { max-width: 26ch; }
.footer-column { display: grid; align-content: start; gap: 10px; }
.footer-column p {
  color: var(--blue-soft);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.footer-column a { transition: color .25s var(--ease); }
.footer-column p.footer-phone {
  color: rgba(255, 255, 255, .74);
  font-size: .83rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.footer-column a:hover { color: #fff; }
.footer-location address { line-height: 1.7; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  font-size: .75rem;
}
.footer-bottom div { display: flex; gap: 20px; }

/* ---------- Booking modal ---------- */

.booking-modal, .room-modal {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  padding: clamp(12px, 3vw, 40px);
  place-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s var(--ease), visibility .3s;
}
.booking-modal.is-open, .room-modal.is-open { visibility: visible; opacity: 1; }

.booking-modal-backdrop, .room-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 24, 20, .55);
  backdrop-filter: blur(4px);
}

.booking-dialog {
  position: relative;
  width: min(100%, 460px);
  max-height: 92vh;
  padding: clamp(22px, 2.6vw, 28px);
  overflow-y: auto;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  box-shadow: var(--shadow-float);
}
.booking-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.booking-dialog-header h2 { font-size: clamp(1.5rem, 2.6vw, 1.8rem); }
.booking-modal-close, .room-modal-close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 1.2rem;
  line-height: 1;
  transition: background .25s var(--ease);
}
.booking-modal-close:hover, .room-modal-close:hover { background: var(--paper-3); }

.booking-form { display: grid; gap: 12px; }

/* One outlined group per decision, split by hairlines — flat rows instead of
   a stack of separately-bordered cards. */
.booking-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.booking-group-dates { display: grid; grid-template-columns: 1fr 1fr; }

.booking-field { display: grid; gap: 3px; padding: 13px 16px; cursor: pointer; }
.booking-field + .booking-field { border-left: 1px solid var(--line-soft); }
.booking-field-label {
  color: var(--ink-3);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.booking-field input {
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .96rem;
  font-weight: 600;
}
.booking-field small { color: var(--ink-3); font-size: .76rem; }

.guest-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; }
.guest-row + .guest-row { border-top: 1px solid var(--line-soft); }
.guest-row strong { display: block; font-size: .96rem; }
.guest-row small { color: var(--ink-3); font-size: .78rem; }

.guest-stepper { display: flex; align-items: center; gap: 4px; }
.guest-stepper button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: background .25s var(--ease), opacity .25s var(--ease);
}
.guest-stepper button:hover:not(:disabled) { background: var(--paper-3); }
.guest-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.guest-stepper output { min-width: 26px; text-align: center; font-weight: 600; }

.booking-dialog-actions { display: grid; gap: 2px; margin-top: 6px; }
.booking-cancel { padding: 11px 20px; border-radius: 999px; color: var(--ink-3); font-size: .88rem; font-weight: 600; }
.booking-cancel:hover { color: var(--ink); }
.booking-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--paper);
  font-size: .92rem;
  font-weight: 600;
}
.booking-confirm:hover { background: var(--blue-deep); }

/* ---------- Room modal ---------- */

.room-dialog {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: min(100%, 940px);
  max-height: 92vh;
  overflow: hidden auto;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  box-shadow: var(--shadow-float);
}
.room-modal-close { position: absolute; z-index: 3; top: 16px; right: 16px; background: rgba(255, 255, 255, .9); }

.room-dialog-gallery { display: grid; gap: 10px; padding: 14px; align-content: start; }
.room-dialog-main-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  object-fit: cover;
}
.room-dialog-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.room-dialog-thumb {
  overflow: hidden;
  border-radius: 10px;
  opacity: .62;
  outline: 2px solid transparent;
  transition: opacity .25s var(--ease), outline-color .25s var(--ease);
}
.room-dialog-thumb img { display: block; width: 100%; height: 74px; object-fit: cover; }
.room-dialog-thumb.is-selected { opacity: 1; outline-color: var(--blue); }
.room-dialog-thumb:hover { opacity: 1; }

.room-dialog-content { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 3vw, 38px) clamp(22px, 3vw, 34px); }
.room-dialog-content .eyebrow { margin-bottom: 0; }
.room-dialog-content h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.room-dialog-facts { color: var(--blue-deep); font-size: .86rem; font-weight: 600; }
.room-dialog-description { color: var(--ink-2); font-size: .95rem; }
.room-dialog-features { display: grid; gap: 9px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.room-dialog-features li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: .9rem; }
.room-dialog-features li::before {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--blue);
  content: "";
}
.room-book-button { justify-self: start; margin-top: 8px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  z-index: 150;
  bottom: 26px;
  left: 50%;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--paper);
  font-size: .88rem;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.visible { transform: translate(-50%, 0); opacity: 1; }

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

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .booking-bar { flex-wrap: wrap; }
  .booking-segment { flex: 1 1 40%; }
  .booking-segment + .booking-segment { box-shadow: none; }
  .booking-submit { flex: 1 1 100%; justify-content: center; padding: 16px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  :root { --header-height: 74px; }

  .desktop-nav, .header-place { display: none; }
  /* .desktop-nav's auto margins did the right-alignment; with it hidden
     the actions need to claim the free space themselves */
  .header-actions { margin-left: auto; }
  .menu-toggle { display: flex; }
  .brand-mark { width: 40px; height: 40px; }
  .header-book { padding: 11px 18px; font-size: .85rem; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .room-grid, .diu-card-grid, .confidence-grid { grid-template-columns: repeat(2, 1fr); }
  .amenity-strip li { padding: 40px 24px; }
  .stay-story, .diu-guide { grid-template-columns: 1fr; }
  .stay-story-image { min-height: 320px; }
  .diu-map { min-height: 340px; }
  .room-dialog { grid-template-columns: 1fr; }
  .closing-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 700px) {
  .hero {
    /* booking bar drops below the hero here, so nothing covers the bottom edge */
    min-height: min(72vh, 500px);
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 28px;
  }

  /* the sticky booking pill sits right below the hero — a second CTA
     up here just crowds the header at this width */
  .header-book { display: none; }

  /* Stack the facts: as a wrapping row the separator dot strands itself
     at the end of the broken line. Column + leading bullets reads clean. */
  .hero-facts { flex-direction: column; align-items: flex-start; gap: 7px; }
  .hero-facts li:not(:last-child)::after { display: none; }
  .hero-facts li::before {
    width: 4px;
    height: 4px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--blue-soft);
    content: "";
  }
  /* stays sticky here too — it just sits below the hero instead of
     riding up over it, so no negative margin */
  .booking-shell {
    margin-top: 18px;
    padding-inline: var(--pad);
  }
  /* Single tappable capsule: the whole pill opens the sheet, and the
     submit shrinks to a round icon so the summary gets the width.
     Overrides the <=1080px rule that puts the submit on its own row. */
  .booking-bar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 4px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
  }
  .booking-segment {
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
    padding: 6px 4px 6px 14px;
    border-radius: 999px;
  }
  .booking-icon { width: 21px; height: 21px; color: var(--ink); stroke-width: 1.7; }
  .booking-desktop-copy, .booking-date, .booking-guests { display: none; }
  .booking-mobile-copy { display: grid; min-width: 0; gap: 2px; }
  .booking-mobile-copy strong { font-size: .95rem; letter-spacing: -.01em; }
  .booking-mobile-copy small {
    overflow: hidden;
    color: var(--ink-2);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .booking-submit {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    padding: 0;
    place-items: center;
    border-radius: 999px;
  }
  .booking-submit-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);       /* keep the label for screen readers */
    white-space: nowrap;
  }
  .booking-submit span:last-child { font-size: 1.05rem; }

  .rooms { padding-top: clamp(56px, 9vw, 76px); }
  .room-grid, .confidence-grid, .amenity-strip { grid-template-columns: 1fr; }

  /* Discover Diu becomes a swipeable rail that also advances on its own.
     Negative margin + matching padding lets cards bleed to the screen edge
     while the first one still lines up with the shell. */
  .diu-card-grid {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    gap: 12px;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .diu-card-grid::-webkit-scrollbar { display: none; }
  .diu-card { scroll-snap-align: start; }
  .amenity-strip li { padding: 34px 22px; }
  .footer-main { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .toast { right: 16px; left: 16px; text-align: center; transform: translateY(20px); }
  .toast.visible { transform: none; }
}

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

/* ============================================================
   Sub-pages. Each one is laid out differently on purpose —
   they share the palette, header and footer, nothing else.
   ============================================================ */

/* Pages that open on light ground need the header in its dark state
   from the first pixel, since the mark is white by default. */
body.light-top .site-header {
  background: rgba(244, 246, 249, .93);
  box-shadow: 0 1px 0 var(--line-soft);
  backdrop-filter: saturate(140%) blur(12px);
}
body.light-top .brand-mark .brand-light { opacity: 0; }
body.light-top .brand-mark .brand-ink { opacity: 1; }
body.light-top .desktop-nav a { color: var(--ink-2); }
body.light-top .desktop-nav a:hover { color: var(--ink); }
body.light-top .header-place { color: var(--ink-2); }
body.light-top .menu-toggle { border-color: var(--line); }
body.light-top .menu-toggle span { background: var(--ink); }

.desktop-nav a.is-current { color: #fff; }
.desktop-nav a.is-current::after { width: 100%; }
.is-solid .desktop-nav a.is-current,
body.light-top .desktop-nav a.is-current { color: var(--blue); }

.footer-action {
  color: inherit;
  font: inherit;
  text-align: left;
  transition: color .25s var(--ease);
}
.footer-action:hover { color: #fff; }

/* ---------- Rooms: editorial header, then full-bleed rows ---------- */

.page-head {
  padding: calc(var(--header-height) + clamp(48px, 6vw, 84px)) 0 clamp(34px, 4vw, 52px);
  border-bottom: 1px solid var(--line-soft);
}
.page-head-tight { padding-bottom: clamp(26px, 3vw, 38px); }
.page-head h1 { max-width: 15ch; }
.page-lede {
  max-width: 52ch;
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 1.02rem;
}
.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
  margin-top: clamp(26px, 3vw, 38px);
}
.page-meta li { display: grid; gap: 3px; }
.page-meta span {
  color: var(--ink-3);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.page-meta strong { font-size: 1.05rem; font-weight: 600; }

.room-rows { display: grid; }
.room-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line-soft);
}
.room-row.is-flipped .room-row-media { order: 2; }
.room-row-media { overflow: hidden; background: var(--paper-3); }
.room-row-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.room-row:hover .room-row-media img { transform: scale(1.04); }
.room-row-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  padding: clamp(34px, 4.5vw, 68px) clamp(24px, 4vw, 64px);
}
.room-row-index {
  color: var(--blue);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
}
.room-row-rate { color: var(--ink-2); font-size: 1.02rem; font-weight: 600; }
.room-row-rate span { color: var(--ink-3); font-weight: 500; }
.room-row-copy > p { max-width: 44ch; color: var(--ink-2); }
.room-row-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.room-row-specs li {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: .8rem;
}

.included { padding: clamp(52px, 6vw, 80px) 0; background: var(--paper-3); }
.included h2 { margin-bottom: clamp(22px, 2.6vw, 32px); }
.included-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
}
.included-list li {
  padding: 22px 20px;
  background: var(--paper-3);
  font-size: 1rem;
}

/* ---------- Experiences: navy type hero, numbered index ---------- */

.type-hero {
  padding: calc(var(--header-height) + clamp(60px, 8vw, 118px)) 0 clamp(56px, 7vw, 96px);
  background: var(--navy);
  color: #fff;
}
.type-hero h1 { max-width: 16ch; font-size: clamp(2.4rem, 5vw, 4rem); }
.type-hero-lede {
  max-width: 46ch;
  margin-top: 22px;
  color: rgba(255, 255, 255, .78);
  font-size: 1.02rem;
}

.guide { padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 5vw, 66px); }
.guide-list { display: grid; }
.guide-item {
  display: grid;
  grid-template-columns: 64px 1fr 190px;
  align-items: center;
  gap: clamp(18px, 2.6vw, 36px);
  padding: clamp(24px, 3vw, 38px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.guide-num {
  align-self: start;
  color: var(--blue);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.guide-body h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.guide-where {
  margin: 7px 0 10px;
  color: var(--ink-3);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.guide-body > p:last-child { max-width: 52ch; color: var(--ink-2); }
.guide-photo {
  display: block;
  width: 100%;
  height: 128px;
  border-radius: var(--radius);
  background-position: center;
  background-size: cover;
}
.guide-photo-harbour { background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vanakbara_Port%2C_Diu%2C_Diu-41-_29.06.2021.jpg/1280px-Vanakbara_Port%2C_Diu%2C_Diu-41-_29.06.2021.jpg"); }
.guide-photo-lunch { background-image: url("https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&w=1000&q=80"); }
.guide-photo-sunset { background-image: url("https://images.unsplash.com/photo-1473116763249-2faaef81ccda?auto=format&fit=crop&w=1000&q=80"); }

.ask-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.ask-panel h2 { max-width: 20ch; }
.ask-panel p { max-width: 46ch; margin-top: 7px; color: var(--ink-2); font-size: .95rem; }

/* ---------- About: split hero, then a reading column ---------- */

.split-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(78vh, 640px); }
.split-hero-media {
  background-image: url("https://images.unsplash.com/photo-1571003123894-1f0594d2b5d9?auto=format&fit=crop&w=1600&q=80");
  background-position: center;
  background-size: cover;
}
.split-hero-panel {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: calc(var(--header-height) + 40px) clamp(26px, 4vw, 68px) clamp(40px, 5vw, 64px);
  background: var(--navy);
  color: #fff;
}
.split-hero-mark img { display: block; width: 58px; height: 58px; }
.split-hero-panel h1 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.split-hero-panel p { max-width: 40ch; color: rgba(255, 255, 255, .78); }

.prose { padding: clamp(54px, 7vw, 92px) var(--pad); }
.prose-inner { display: grid; gap: 20px; width: min(100%, 62ch); margin-inline: auto; }
.prose-inner p { color: var(--ink-2); font-size: 1.04rem; line-height: 1.72; }
.prose-lead { color: var(--ink) !important; font-size: 1.3rem !important; line-height: 1.5 !important; }
.prose blockquote { margin: 14px 0; padding-left: 24px; border-left: 2px solid var(--blue); }
.prose blockquote p {
  color: var(--ink) !important;
  font-family: var(--serif);
  font-size: 1.35rem !important;
  font-style: italic;
  line-height: 1.42 !important;
}

.tenets { padding: clamp(48px, 6vw, 74px) 0; background: var(--paper-3); }
.tenets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.tenet {
  display: grid;
  gap: 9px;
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.tenet-num { color: var(--blue); font-size: .74rem; font-weight: 700; letter-spacing: .22em; }
.tenet h3 { font-size: 1.22rem; }
.tenet p:last-child { color: var(--ink-2); font-size: .96rem; }

/* ---------- Contact: map band, then facts beside an aside ---------- */

.map-band { height: clamp(300px, 42vh, 460px); background: var(--paper-3); }
.map-band iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.78) contrast(.95); }

.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 64px); }
.fact-row { padding: 20px 0; border-top: 1px solid var(--line-soft); }
.fact-row:first-child { border-top: 0; padding-top: 0; }
.fact-label {
  margin-bottom: 8px;
  color: var(--ink-3);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.fact-row p, .fact-row address { max-width: 54ch; color: var(--ink-2); font-size: 1rem; line-height: 1.62; }
.contact-aside {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 14px;
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: #fff;
}
.contact-aside h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.contact-aside p { color: rgba(255, 255, 255, .78); font-size: .96rem; }

@media (max-width: 960px) {
  .room-row, .split-hero, .contact-grid { grid-template-columns: 1fr; }
  .room-row.is-flipped .room-row-media { order: 0; }
  .split-hero-media { min-height: 300px; }
  .included-list, .tenets-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-item { grid-template-columns: 48px 1fr; }
  .guide-photo { display: none; }
  .ask-panel { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 700px) {
  .included-list, .tenets-grid { grid-template-columns: 1fr; }
  .page-meta { gap: 14px 26px; }
  .prose-lead { font-size: 1.15rem !important; }
  .prose blockquote p { font-size: 1.18rem !important; }
}

/* ---------- Gallery ---------- */

.gallery { padding: clamp(30px, 4vw, 48px) 0 clamp(46px, 6vw, 72px); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 210px;
  gap: clamp(10px, 1.2vw, 16px);
}
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius);
  background: var(--paper-3);
}
.gallery-item.is-wide { grid-column: span 2; }
.gallery-item.is-tall { grid-row: span 2; }
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 34px 15px 13px;
  background: linear-gradient(to top, rgba(2, 18, 38, .78), rgba(2, 18, 38, 0));
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  text-align: left;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.gallery-item:hover .gallery-caption,
.gallery-item:focus-visible .gallery-caption { opacity: 1; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  z-index: 160;
  inset: 0;
  display: grid;
  padding: clamp(14px, 4vw, 48px);
  place-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { visibility: visible; opacity: 1; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 18, 38, .88);
  backdrop-filter: blur(5px);
  cursor: default;
}
.lightbox-inner { position: relative; display: grid; gap: 12px; max-width: min(100%, 1080px); justify-items: center; }
.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--radius);
  object-fit: contain;
}
.lightbox-caption { color: rgba(255, 255, 255, .82); font-size: .88rem; }
.lightbox-close, .lightbox-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  background: rgba(2, 18, 38, .4);
  transition: background .25s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(2, 18, 38, .8); }
.lightbox-close { top: 18px; right: 18px; width: 42px; height: 42px; font-size: 1.4rem; line-height: 1; }
.lightbox-nav { top: 50%; width: 46px; height: 46px; font-size: 1.8rem; line-height: 1; transform: translateY(-50%); }
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }

@media (max-width: 960px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 700px) {
  .gallery-grid { grid-auto-rows: 150px; }
  .gallery-caption { opacity: 1; padding: 26px 12px 10px; font-size: .76rem; }
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}

/* ---------- Language toggle ---------- */

.lang-toggle {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .32);
  color: rgba(255, 255, 255, .92);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.lang-toggle:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.is-solid .lang-toggle,
body.light-top .lang-toggle { border-color: var(--line); color: var(--ink-2); }
.is-solid .lang-toggle:hover,
body.light-top .lang-toggle:hover { background: var(--paper-3); color: var(--ink); }

/* ---------- Legal pages ---------- */

.legal-page {
  background: var(--paper);
}
.legal-head {
  padding-top: clamp(88px, 10vw, 124px);
  padding-bottom: clamp(20px, 3vw, 30px);
}
.legal-meta {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: .9rem;
}
.legal-content {
  padding-top: 0;
}
.legal-content .prose-inner {
  max-width: 76ch;
}
.legal-content h2 {
  margin-top: 1.3em;
  margin-bottom: .5em;
  color: var(--ink);
}
.legal-content ul {
  margin: .3em 0 1.1em 1.1em;
}
.legal-content li {
  margin: .28em 0;
}
.legal-links {
  display: grid;
  gap: 8px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Devanagari runs taller than Latin — give the Hindi build a little more room */
html[lang="hi"] .desktop-nav { gap: clamp(12px, 1.6vw, 22px); }
html[lang="hi"] h1, html[lang="hi"] h2 { line-height: 1.28; letter-spacing: -.01em; }
html[lang="hi"] h3 { letter-spacing: 0; }
html[lang="hi"] .eyebrow { letter-spacing: .1em; }
html[lang="hi"] body { line-height: 1.7; }

@media (max-width: 700px) {
  .lang-toggle { padding: 6px 11px; font-size: .74rem; }
}