/* ==========================================================================
   Nakshathra Residency

   Indian modern. Three devices carry the identity, and all three are taken
   from the property rather than applied to it:

     1. The arch      the building's own glazed entrance arch, cut as a niche
                      into the page where a portrait photograph can carry it.
     2. The jaali     a perforated screen lattice, drawn as a mask so it takes
                      its colour from the theme. Used on the colour blocks.
     3. The octagram  the eight-point Star of Lakshmi — nakshathra means star.

   Indigo and marigold: the dyer's pair. Marigold and madder are read off the
   building — the ochre facade band, the teak doors and the bed runners — and
   indigo carries them. The ground stays clean white so the colour reads as
   colour; it lives in the blocks and the rules, never in the paper.

   Display  Anek Latin (Ek Type, Mumbai) 87.5% width  ·  Text  Karla
   ========================================================================== */

@font-face {
  font-family: "Anek Latin";
  src: url("../fonts/anek-latin.woff2") format("woff2");
  /* the file carries the whole 100–800 axis; the light end was simply never
     declared, and the hero's duration ladder is set in it. No extra download. */
  font-weight: 100 800;
  font-stretch: 87.5%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("../fonts/karla.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- tokens ------------------------------------------------------------- */

:root {
  /* ground stays clean and bright — the colour lives in the blocks, not the paper */
  --bone: #ffffff;
  --bone-2: #f3f4f9;
  --bone-3: #e4e6f1;
  --ink: #141726;
  --ink-2: #474b60;
  --ink-3: #7a7f96;

  --indigo: #2b3a80;
  --indigo-deep: #1a2454;
  --marigold: #c2760f;
  --marigold-deep: #94590a;
  --madder: #93262c;

  --line: rgba(20, 23, 38, 0.14);
  --line-soft: rgba(20, 23, 38, 0.07);

  --ground: var(--bone);
  --surface: var(--bone-2);
  --surface-2: var(--bone-3);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent: var(--indigo);
  --accent-hover: var(--indigo-deep);
  --accent-on: #ffffff;
  --gold: var(--marigold);
  --red: var(--madder);

  /* the deep colour block: clean white type on indigo, in both themes */
  --block-bg: var(--indigo-deep);
  --block-text: #f4f5fb;
  --block-text-2: rgba(244, 245, 251, 0.78);
  --block-line: rgba(244, 245, 251, 0.2);
  --block-gold: #f0ad46;

  --shadow: 0 1px 2px rgba(20, 23, 38, 0.05), 0 16px 40px -24px rgba(20, 23, 38, 0.35);

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  --step-3: clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.4rem + 3.6vw, 3.9rem);
  --step-5: clamp(2.9rem, 1rem + 8vw, 7rem);

  --spine: 74rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --band: clamp(4.5rem, 9vw, 8rem);

  /* a jaali screen: diamond within square, corners tied by diagonals */
  --jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M24 1.5 46.5 24 24 46.5 1.5 24Z'/%3E%3Cpath d='M24 13 35 24 24 35 13 24Z'/%3E%3Cpath d='M0 0 11 11M48 0 37 11M0 48 11 37M48 48 37 37'/%3E%3C/g%3E%3C/svg%3E");

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0c0e1a;
    --surface: #14172a;
    --surface-2: #1e2238;
    --text: #eceef7;
    --text-2: #b2b7cc;
    --text-3: #848aa3;
    --accent: #93a4f0;
    --accent-hover: #adbaf6;
    --accent-on: #0e1330;
    --gold: #eaa94b;
    --red: #cf6067;
    --line: rgba(236, 238, 247, 0.16);
    --line-soft: rgba(236, 238, 247, 0.08);
    --block-bg: #171f47;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -20px rgba(0, 0, 0, 0.85);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #0c0e1a;
  --surface: #14172a;
  --surface-2: #1e2238;
  --text: #eceef7;
  --text-2: #b2b7cc;
  --text-3: #848aa3;
  --accent: #93a4f0;
  --accent-hover: #adbaf6;
  --accent-on: #0e1330;
  --gold: #eaa94b;
  --red: #cf6067;
  --line: rgba(236, 238, 247, 0.16);
  --line-soft: rgba(236, 238, 247, 0.08);
  --block-bg: #171f47;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -20px rgba(0, 0, 0, 0.85);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ground: var(--bone);
  --surface: var(--bone-2);
  --surface-2: var(--bone-3);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent: var(--indigo);
  --accent-hover: var(--indigo-deep);
  --accent-on: #ffffff;
  --gold: var(--marigold);
  --red: var(--madder);
  --line: rgba(20, 23, 38, 0.14);
  --line-soft: rgba(20, 23, 38, 0.07);
  --block-bg: var(--indigo-deep);
  --block-text: #f4f5fb;
  --block-text-2: rgba(244, 245, 251, 0.78);
  --block-line: rgba(244, 245, 251, 0.2);
  --shadow: 0 1px 2px rgba(20, 23, 38, 0.05), 0 16px 40px -24px rgba(20, 23, 38, 0.35);
  color-scheme: light;
}

/* --- base --------------------------------------------------------------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: "Anek Latin", "Karla", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

/* The masthead overlaps the top of the page, and on the homepage the jump bar
   sits under it, so an anchor that lands flush lands underneath both. Both
   heights are measured in JS — --jumpbar-h resolves to 0 on the inner pages,
   which have no jump bar. The fallbacks cover the moment before that runs. */
main[id], main [id] {
  scroll-margin-top: calc(var(--masthead-h, 4.75rem) + var(--jumpbar-h, 0px) + 0.75rem);
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* --- the three devices --------------------------------------------------- */

/* The building's entrance arch. Reserved for the tall niche: a portrait
   composition carries a full semicircle, where cropping a landscape room
   photograph to an arch just cuts the top of the room away. */
.arch--tall {
  border-radius: 999px 999px 4px 4px;
  overflow: hidden;
}

/* perforated screen, coloured by whatever it sits on */
.jaali { position: relative; isolation: isolate; }

.jaali::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: 0.1;
  -webkit-mask-image: var(--jaali);
  mask-image: var(--jaali);
  -webkit-mask-size: 48px 48px;
  mask-size: 48px 48px;
  pointer-events: none;
}

/* a single course of jaali, used to separate two sections */
.jaali-band {
  height: 48px;
  color: var(--gold);
  background: currentColor;
  opacity: 0.3;
  -webkit-mask-image: var(--jaali);
  mask-image: var(--jaali);
  -webkit-mask-size: 48px 48px;
  mask-size: 48px 48px;
}

.star { width: 0.9em; height: 0.9em; flex: none; fill: var(--gold); }

/* --- shared pieces ------------------------------------------------------ */

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.eyebrow::after {
  content: "";
  width: 2.5rem;
  height: 3px;
  background: var(--gold);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 46ch;
}

.prose {
  max-width: 62ch;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 1.1em;
}

.prose strong { color: var(--text); font-weight: 700; }

.sec-head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.sec-head h2 { font-size: var(--step-4); }

/* a heading with nothing to say beyond its own line, sitting tight to what
   follows — used where the content below it is the argument */
.sec-head--slim {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.sec-head--slim h2 { font-size: var(--step-3); }

.band { padding-block: var(--band); }

/* the band directly under the hero, which has to start high enough that its
   contents break the fold rather than hiding just below it */
.band--tight { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* --- buttons ------------------------------------------------------------ */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-on);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85em 1.5em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  font: inherit;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    transform 0.18s ease;
}

.btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}

.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: #1c1206;
}

.btn--gold:hover { background: var(--marigold-deep); border-color: var(--marigold-deep); color: #fdf7ea; }

.btn--onphoto {
  --btn-bg: transparent;
  --btn-fg: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
}

.btn--onphoto:hover { background: #ffffff; color: #141726; border-color: transparent; }

/* outline button, for the second action in a pair */
.btn--line {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line);
}

.btn--line:hover { background: var(--text); border-color: var(--text); color: var(--ground); }

.btn svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* --- header ------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.masthead[data-stuck="true"] { border-bottom-color: var(--line-soft); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.9rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  margin-right: auto;
}

.wordmark__name {
  font-family: "Anek Latin", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

.wordmark__sub {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1;
}

.wordmark .star { align-self: center; width: 0.85rem; height: 0.85rem; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

.nav a {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text-2);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav a:hover { color: var(--text); border-bottom-color: var(--gold); }

.masthead .btn { padding: 0.65em 1.1em; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover { color: var(--text); border-color: var(--gold); }

.theme-toggle svg { width: 1rem; height: 1rem; fill: currentColor; }

/* --- the menu, for screens too narrow for the nav bar -------------------- */

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2.6rem;
  height: 2.6rem;
  padding-inline: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: none;
  cursor: pointer;
}

.menu-btn span {
  display: block;
  height: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: absolute;
  inset: 100% 0 auto 0;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu[hidden] { display: none; }

.menu__nav {
  width: min(100% - var(--gutter) * 2, var(--spine));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding-block: 0.25rem 1rem;
}

.menu__nav a {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: "Anek Latin", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
}

.menu__nav a:last-child { border-bottom: 0; color: var(--accent); }

@media (max-width: 60rem) {
  .nav { display: none; }
  .menu-btn { display: flex; }
  .theme-toggle { width: 2.4rem; height: 2.4rem; }
}

@media (max-width: 46rem) {
  /* the call bar carries the same action, within thumb reach */
  .masthead__cta { display: none; }
}

@media (max-width: 34rem) {
  .masthead__inner { gap: 0.6rem; }

  .wordmark {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.1rem;
  }

  .wordmark .star { grid-row: 1 / 3; }
  .wordmark__name { grid-column: 2; font-size: 1rem; }
  .wordmark__sub { grid-column: 2; letter-spacing: 0.18em; }
  .masthead .btn { padding: 0.6em 0.9em; letter-spacing: 0.06em; }
}

/* --- the call bar ------------------------------------------------------- */

.callbar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.callbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 3.5rem;
  padding: 0.45rem 0.25rem;
  border-left: 1px solid var(--line-soft);
  color: var(--text-2);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.callbar__item:first-child { border-left: 0; }

.callbar__item svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }

.callbar__item--wa { color: var(--accent); }

.callbar__item:active { background: var(--surface); }

@media (max-width: 46rem) {
  .callbar { display: flex; }
}

/* --- hero --------------------------------------------------------------- */

.hero {
  position: relative;
  /* Deliberately short of the full screen: the top edge of the photo grid
     below has to be visible without scrolling, because that is what tells the
     reader there are photographs here at all. */
  min-height: min(70vh, 44rem);
  /* dvh where it exists: on a phone, vh counts the browser chrome as screen */
  min-height: min(70dvh, 44rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  color: #ffffff;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  animation: settle 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(10, 12, 26, 0.92) 0%,
    rgba(10, 12, 26, 0.66) 34%,
    rgba(10, 12, 26, 0.1) 68%,
    rgba(10, 12, 26, 0.28) 100%
  );
}

@keyframes settle {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}

.hero__inner {
  /* Was 6rem/3rem with a 2.25rem rhythm. Every pixel here is a pixel of the
     photo grid below pushed under the fold, and the hero reads no worse tight
     than it did loose. */
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.4vw, 1.85rem);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.hero__eyebrow .star { fill: var(--block-gold); }

/* The headline is two voices of the one family. "Book your stay." keeps the
   display cut the rest of the page uses — tight, set, decided. The four
   durations are set in Anek's light end, which reads as another face
   altogether, and they gain weight as the stay gets longer: a night is a
   hairline, a year is solid. The ladder is the offer, drawn rather than
   described. */

.hero__title {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: none;
}

/* the lead is deliberately the quieter line — the ladder is the headline */
.hero__title-lead {
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.9);
}

.ladder {
  font-size: clamp(2.1rem, 1.1rem + 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  display: flex;
  flex-wrap: wrap;
  /* the comma already carries most of the space; the gap only tops it up */
  column-gap: 0.16em;
}

.ladder__step:nth-child(1) { font-weight: 200; }
.ladder__step:nth-child(2) { font-weight: 300; }
.ladder__step:nth-child(3) { font-weight: 500; }
.ladder__step:nth-child(4) { font-weight: 700; color: var(--block-gold); }

/* At the clamp's floor the four words measure 260px, so the ladder holds one
   line down to a 320px screen. It wraps only if the copy grows. */

.hero__lede {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.88);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.hero__actions .btn {
  padding: 1em 1.6em;
  font-size: var(--step-0);
  gap: 0.7rem;
}

.hero__actions .btn svg { width: 1.3em; height: 1.3em; }

@media (max-width: 30rem) {
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}

.factstrip {
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.factstrip div {
  padding: 1.1rem 1rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.factstrip div:first-child { border-left: 0; padding-left: 0; }

@media (max-width: 46rem) {
  .factstrip { grid-template-columns: repeat(2, 1fr); }
  .factstrip div:nth-child(3) { border-left: 0; padding-left: 0; }
  .factstrip div:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
}

/* The same four facts on the inner pages, where they sit under a page intro
   on the paper rather than over the hero photograph — so the rules and the
   type take their colour from the theme instead of assuming a dark ground. */
.factstrip--page {
  border-top-color: var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 3rem;
}

.factstrip--page div {
  color: var(--text-2);
  border-left-color: var(--line-soft);
}

@media (max-width: 46rem) {
  .factstrip--page div:nth-child(-n + 2) { border-bottom: 1px solid var(--line-soft); }
}

/* --- living here -------------------------------------------------------- */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}

.intro h2 { font-size: var(--step-3); margin-bottom: 1.5rem; }

/* an arched niche cut into the page, the way the facade cuts one into itself */
.niche { margin: 0; position: relative; }

.niche img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 45%;
}

.niche figcaption {
  margin-top: 0.9rem;
  font-size: var(--step--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}

.specs {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 3px solid var(--gold);
  padding-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.specs h3 {
  font-family: "Karla", sans-serif;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.speclist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3rem);
}

.speclist li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.97rem;
  color: var(--text-2);
}

.speclist .star { width: 0.65rem; height: 0.65rem; align-self: center; }

@media (max-width: 54rem) {
  .intro { grid-template-columns: 1fr; }
  .niche { max-width: 22rem; }
  .specs { grid-template-columns: 1fr; }
}

/* --- apartment types ---------------------------------------------------- */

.units {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}

.unit { display: flex; flex-direction: column; gap: 1rem; }

.unit__media {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface-2);
}

.unit__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.unit:hover .unit__media img { transform: scale(1.04); }

.unit__index {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 0.35rem;
}

.unit__index .star { width: 0.7rem; height: 0.7rem; }

.unit h3 { font-size: var(--step-2); }

.unit p { color: var(--text-2); font-size: 0.97rem; }

.taglist {
  list-style: none;
  margin: auto 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.taglist li {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.3em 0.7em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
}

/* Every unit carries its own way out. Someone who has decided on the
   one-bedroom should not have to scroll to a general enquiry form and then
   explain which unit they meant — the button opens WhatsApp with that already
   said. .taglist keeps the auto top margin, so this rides at the very bottom
   and the three cards line their buttons up however long the prose runs. */
.unit__act {
  justify-content: center;
  margin-top: 0.85rem;
}

@media (max-width: 60rem) {
  .units { grid-template-columns: 1fr; gap: 2.5rem; }
  .unit { max-width: 34rem; }
}

/* --- the building: a deep colour block ---------------------------------- */

.block {
  background: var(--block-bg);
  color: var(--block-text);
}

.block h2, .block h3 { color: var(--block-text); }

.block .eyebrow { color: var(--block-gold); }

.block .eyebrow::after { background: var(--block-gold); }

.block .lede { color: var(--block-text-2); }

/* The amenity grid appears both on the indigo block and on plain paper, so it
   defaults to the paper palette and takes the block palette only inside
   .block. It used to be hardwired to the block tokens — near-white type, which
   is invisible on the white "Why Nakshathra" grid. */

.amenities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.amenity {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.amenity h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: "Karla", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.amenity .star { width: 0.65rem; height: 0.65rem; align-self: center; }

.amenity p { font-size: 0.94rem; color: var(--text-2); }

/* on the indigo block, the same grid switches to the on-block palette */
.block .amenities { border-top-color: var(--block-line); }
.block .amenity { border-bottom-color: var(--block-line); }
.block .amenity .star { fill: var(--block-gold); }
.block .amenity p { color: var(--block-text-2); }

.building__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.building__strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
}

@media (max-width: 62rem) {
  .amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 46rem) {
  .amenities { grid-template-columns: 1fr; }
  .building__strip { grid-template-columns: repeat(2, 1fr); }
}

/* --- full-bleed figure -------------------------------------------------- */

.bleed { position: relative; margin: 0; }

.bleed img {
  width: 100%;
  height: clamp(20rem, 52vw, 34rem);
  object-fit: cover;
}

.bleed figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
  background: linear-gradient(to top, rgba(10, 12, 26, 0.9), rgba(10, 12, 26, 0));
  color: #ffffff;
}

.bleed figcaption p {
  font-family: "Anek Latin", sans-serif;
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.2;
  max-width: 30ch;
  text-wrap: balance;
}

.bleed figcaption small {
  display: block;
  margin-top: 0.6rem;
  font-family: "Karla", sans-serif;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* --- the jump bar ------------------------------------------------------- */

/* Sits under the masthead once the hero is gone. It is how a reader who is
   comparing two or three properties gets to the photographs, the units or the
   phone number without hunting. */
/* Fixed rather than sticky, and hidden until the hero has gone by. Holding a
   permanent slot under the masthead would cost the photo grid the ~58px it
   needs to break the fold, and the bar is no use while the hero — which
   carries the same two actions — is still on screen. */
.jumpbar {
  position: fixed;
  top: var(--masthead-h, 4.75rem);
  left: 0;
  right: 0;
  z-index: 55;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  visibility: hidden;
  transform: translateY(-115%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.28s;
}

/* set once the hero is out of view */
.jumpbar[data-shown] {
  visibility: visible;
  transform: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .jumpbar { transition: visibility 0s; }
}

.jumpbar__inner {
  display: flex;
  gap: clamp(1rem, 2.6vw, 2.25rem);
  /* the strip scrolls sideways rather than wrapping to two rows on a phone */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.jumpbar__inner::-webkit-scrollbar { display: none; }

.jumpbar a {
  flex: none;
  padding: 1.05rem 0;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.jumpbar a:hover { color: var(--text); }

/* set by the scroll spy on whichever section is being read */
.jumpbar a[data-here] {
  color: var(--text);
  border-bottom-color: var(--gold);
}

/* --- gallery ------------------------------------------------------------ */

.gallery-wrap { position: relative; }

/* The count is the point: fifteen tiles do not tell anyone that twenty-four
   photographs exist. Anchored over the grid's bottom corner, where the eye
   finishes the last row. */
.gallery__all {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7em 1.15em;
  background: var(--ground);
  color: var(--text);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.gallery__all svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

.gallery__all:hover {
  transform: translateY(-1px);
  background: var(--accent);
  color: var(--accent-on);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}

.gallery button {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  grid-column: span 2;
}

.gallery button[data-span="3"] { grid-column: span 3; }

.gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.gallery button:hover img { transform: scale(1.04); opacity: 0.92; }

.gallery figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 0.85rem 0.7rem;
  background: linear-gradient(to top, rgba(10, 12, 26, 0.85), transparent);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.gallery button:hover figcaption,
.gallery button:focus-visible figcaption { opacity: 1; }

@media (max-width: 46rem) {
  /* on a phone the pill would cover a whole tile, so it drops below the grid */
  .gallery__all {
    position: static;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }

  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery button,
  .gallery button[data-span="3"] { grid-column: span 1; }
}

/* --- lightbox ----------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  background: rgba(9, 11, 24, 0.97);
  padding: clamp(1rem, 4vw, 3rem);
}

.lightbox[open] { display: grid; }

.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 3px; }

.lightbox__caption {
  position: absolute;
  inset: auto 0 clamp(1rem, 3vw, 2rem) 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lightbox__btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(9, 11, 24, 0.5);
  color: #ffffff;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.lightbox__btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.6); }

.lightbox__btn[data-dir="prev"] { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__btn[data-dir="next"] { right: clamp(0.5rem, 2vw, 2rem); }

.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.75rem);
  right: clamp(0.75rem, 2vw, 1.75rem);
  translate: none;
}

/* a section that continues onto a page of its own */
.seeall { margin-top: clamp(2rem, 4vw, 3rem); }

.prose a, .lede a { color: var(--accent); text-decoration-color: var(--line); text-underline-offset: 0.2em; }

.prose a:hover, .lede a:hover { text-decoration-color: var(--gold); }

/* --- location ----------------------------------------------------------- */

.location { background: var(--surface); }

.location__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}

/* the address is set like a nameplate: gold rule down the left of it */
.address {
  font-family: "Anek Latin", sans-serif;
  font-style: normal;
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-top: 1.75rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--gold);
}

.location__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.location__note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.75rem;
  max-width: 54ch;
  font-size: 0.94rem;
  color: var(--text-3);
}

.location__note .star { margin-top: 0.4em; }

.location__shot { margin: 0; }

.location__shot a {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface-2);
}

.location__shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.location__shot a:hover img { transform: scale(1.03); }

.location__shot figcaption {
  margin-top: 0.9rem;
  font-size: var(--step--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}

.maplink {
  width: fit-content;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.15s ease;
}

.maplink:hover { border-bottom-color: var(--gold); }

@media (max-width: 54rem) {
  .location__grid { grid-template-columns: 1fr; }
  .location__shot { max-width: 34rem; }
}

/* --- how it works ------------------------------------------------------- */

.process { color: var(--text); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1rem, 3vw, 2.5rem);
}

.steps li {
  padding: 1.75rem 0;
  border-top: 3px solid var(--red);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.steps__n {
  font-family: "Anek Latin", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}

.steps h3 { font-size: var(--step-1); }

.steps p { font-size: 0.94rem; color: var(--text-2); }

@media (max-width: 62rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 38rem) {
  .steps { grid-template-columns: 1fr; }
}

/* --- enquiry ------------------------------------------------------------ */

.enquire { background: var(--surface); }

.enquire__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}

.contacts {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.contacts li {
  padding-block: 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.contacts .label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.contacts a:not(.maplink),
.contacts .value {
  font-family: "Anek Latin", sans-serif;
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
  width: fit-content;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.contacts a:not(.maplink):hover { color: var(--accent); border-bottom-color: var(--gold); }

.contacts .maplink { margin-top: 0.45rem; }

/* a multi-line value would otherwise get a rule under every line of it */
.contacts [data-contact="address"] { border-bottom: 0; line-height: 1.45; }

.tbc {
  color: var(--text-3);
  border-bottom: 1px dashed var(--gold) !important;
}

.tbc::after {
  content: "to confirm";
  display: inline-block;
  margin-left: 0.6em;
  vertical-align: middle;
  font-family: "Karla", sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.15em 0.6em;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  background: var(--ground);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 3px;
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow);
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }

.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 0.98rem;
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.7em 0.8em;
  transition: border-color 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }

.field textarea { resize: vertical; min-height: 5.5rem; }

.form .btn { grid-column: 1 / -1; justify-content: center; }

.form__note {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--text-3);
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.form__note .star { margin-top: 0.35em; }

@media (max-width: 54rem) {
  .enquire__grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
}

/* --- footer ------------------------------------------------------------- */

.footer {
  background: var(--block-bg);
  color: var(--block-text);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}

.footer .wordmark__sub { color: var(--block-text-2); }

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
  justify-content: space-between;
  align-items: flex-start;
}

.footer__grid p { color: var(--block-text-2); font-size: 0.92rem; max-width: 38ch; }

.footer__brand { display: flex; flex-direction: column; gap: 1.1rem; max-width: 22rem; }

/* the property's own emblem, framed rather than bled — its blue is not the
   page's blue, and pretending otherwise just looks like a mismatched patch */
.crest {
  width: 12.5rem;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--block-line);
}

.footer__contact { display: flex; flex-direction: column; gap: 0.55rem; }

.footer .address {
  margin-top: 0;
  padding-left: 0.9rem;
  border-left-color: var(--block-gold);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--block-text-2);
}

.footer__phone {
  font-family: "Anek Latin", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--block-text);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid var(--block-line);
  transition: border-color 0.15s ease;
}

.footer__phone:hover { border-bottom-color: var(--block-gold); }

.footer .maplink { color: var(--block-gold); border-bottom-color: var(--block-line); }

.footer .maplink:hover { border-bottom-color: var(--block-gold); }

/* three columns once there is room; stacked and wrapping below that */
@media (min-width: 54rem) {
  .footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.7fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .footer__nav { flex-direction: column; gap: 0.7rem; }
}

.footer__nav { display: flex; flex-wrap: wrap; gap: 0.9rem 1.25rem; font-size: 0.92rem; }

.footer__nav a { color: var(--block-text-2); text-decoration: none; }

.footer__nav a:hover { color: var(--block-gold); }

.colophon {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--block-line);
  font-size: 0.8rem;
  color: var(--block-text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
}

/* the footer runs on under the call bar, so no strip of ground shows below it.
   This has to sit after the .footer padding-block above, not up with the bar. */
@media (max-width: 46rem) {
  .footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

/* --- scroll reveal ------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-in { opacity: 1; transform: none; }

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

@media print {
  .masthead, .menu, .callbar, .lightbox, .form { display: none; }
  .footer { padding-bottom: 2rem; }
}