/* =========================================================================
   Pincode Executive Stay — Gallant Estates
   Design by Tech Tamizhan · www.techtamizhan.com

   Contents
     01  Design tokens
     02  Reset and base
     03  Utilities
     04  Buttons
     05  Header, mobile nav, section rail, progress bar
     06  Hero
     07  Marquee band
     08  Section shells and headings
     09  The project
     10  The executive room + gallery
     11  What you get (tiles, pillars, premium amenities)
     12  Studio layout
     13  Location
     14  Why residents choose Pincode
     15  Questions (FAQ)
     16  Call to action
     17  Footer
     18  Scroll reveal animation
     19  Responsive
   ====================================================================== */


/* -------------------------------------------------------------------------
   01  Design tokens — Gallant Estates palette, sampled from the logo artwork
   ---------------------------------------------------------------------- */
:root {
  /* Burgundy — the house colour */
  --burgundy-500: #6a2030;
  --burgundy-600: #5d1c2a;
  --burgundy-700: #4a1622;
  --burgundy-900: #260b11;
  --plum-800:     #3a1119;

  /* Champagne gold — metallic, used for hairlines and eyebrows */
  --gold-200: #f6efdd;
  --gold-300: #e9d7a9;
  --gold-400: #dbc38d;
  --gold-500: #c6a463;
  --gold-600: #ac8a4a;

  /* Warm neutrals — no pure grey, no pure black anywhere */
  --sand-100: #f8f4ec;
  --sand-150: #fbf9f4;
  --sand-200: #efe8db;
  --sand-300: #ded4c2;
  --sand-500: #96876f;
  --sand-600: #6f6353;
  --sand-700: #4c443a;
  --cream-dim: #bcae98;

  /* Pincode project sub-brand */
  --navy-800: #08243d;
  --tan-400:  #d3a974;
  --amber-500: #e8a33d;

  /* Type */
  --font-brand:   "Jost", "Futura", system-ui, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Figtree", system-ui, -apple-system, sans-serif;

  /* Tracking — the most brand-defining control in this system */
  --track-wordmark: 0.42em;
  --track-eyebrow:  0.28em;
  --track-label:    0.16em;

  /* Layout */
  --container: 1280px;
  --gutter: 32px;
  --header-h: 79px;

  /* Motion — glides only, never bounce or overshoot */
  --ease: cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 420ms;
  --dur-draw: 720ms;

  /* Hairlines and shadows — always warm-tinted */
  --hairline: inset 0 0 0 1px var(--sand-300);
  --hairline-dark: inset 0 0 0 1px rgba(233, 215, 169, 0.28);
  --shadow-lift: 0 18px 40px rgba(38, 11, 17, 0.18);
  --shadow-focus: 0 0 0 3px rgba(198, 164, 99, 0.35);
}


/* -------------------------------------------------------------------------
   02  Reset and base
   ---------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sand-100);
  color: var(--sand-700);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
address { font-style: normal; }

a {
  color: var(--burgundy-600);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--gold-600); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

::selection {
  background: var(--gold-300);
  color: var(--burgundy-700);
}

/* The icon sprite itself is never rendered */
.sprite { display: none; }


/* -------------------------------------------------------------------------
   03  Utilities
   ---------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Every icon on the page is one of these, filled with currentColor stroke */
.ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--lg { width: 30px; height: 30px; }
.ico--xl { width: 32px; height: 32px; }

/* Eyebrow: gold rule + wide-tracked uppercase label. Used to open every panel. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-family: var(--font-brand);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-600);
}
.eyebrow--gold { color: var(--gold-300); }
.eyebrow--tan  { color: var(--tan-400); }
.eyebrow--dark { color: var(--burgundy-600); font-weight: 400; }
.eyebrow--plain { margin-bottom: 0; }

.eyebrow__rule {
  display: block;
  width: 44px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}
.eyebrow--tan .eyebrow__rule { background: var(--amber-500); }
.eyebrow--dark .eyebrow__rule { background: var(--burgundy-600); }

.label {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--burgundy-600);
}
.label--tan { color: var(--amber-500); }
.label--cream { color: var(--gold-300); }

.display {
  max-width: 26ch;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--burgundy-600);
  text-wrap: pretty;
}
.display--light { color: var(--sand-100); }
.display--sm { font-size: clamp(28px, 3vw, 44px); }

.lead {
  max-width: 56ch;
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.62;
}
.lead--light { color: var(--sand-100); }
.lead--tan { color: var(--tan-400); }
.lead--narrow { max-width: 34ch; margin-top: 0; }

.note {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sand-600);
}
.note--tan { color: var(--tan-400); }
.note--cream { color: var(--sand-300); }

.plain-list { display: grid; gap: 10px; }
.plain-list li { font-size: 15px; line-height: 1.5; }


/* -------------------------------------------------------------------------
   04  Buttons
   ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 26px;
  border: 0;
  border-radius: 2px;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn--sm { padding: 12px 22px; }
.btn--lg { padding: 18px 32px; }
.btn--block { width: 100%; }

/* Gold is reserved for the primary call to action */
.btn--gold {
  background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-400) 40%, var(--gold-500) 100%);
  color: var(--burgundy-900);
}
.btn--gold:hover {
  background: linear-gradient(180deg, var(--gold-200) 0%, #e2cd9b 40%, #d4b87f 100%);
  color: var(--burgundy-900);
}

.btn--burgundy { background: var(--burgundy-600); color: var(--sand-100); }
.btn--burgundy:hover { background: var(--burgundy-700); color: var(--sand-100); }

/* Ghost: for dark grounds — cream ink on a gold hairline */
.btn--ghost {
  background: transparent;
  color: var(--sand-100);
  box-shadow: inset 0 0 0 1px rgba(233, 215, 169, 0.34);
}
.btn--ghost:hover {
  background: rgba(233, 215, 169, 0.08);
  color: var(--gold-300);
  box-shadow: inset 0 0 0 1px rgba(233, 215, 169, 0.6);
}

.btn--outline {
  background: transparent;
  color: var(--burgundy-600);
  box-shadow: inset 0 0 0 1px var(--gold-500);
}
.btn--outline:hover { background: rgba(198, 164, 99, 0.12); color: var(--burgundy-700); }

.btn--outline-dark {
  background: transparent;
  color: var(--burgundy-600);
  box-shadow: inset 0 0 0 1px var(--burgundy-600);
}
.btn--outline-dark:hover { background: rgba(93, 28, 42, 0.1); color: var(--burgundy-700); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 0;
  border-radius: 2px;
  box-shadow: var(--hairline);
  color: var(--burgundy-600);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.icon-btn:hover { background: rgba(198, 164, 99, 0.12); }


/* -------------------------------------------------------------------------
   05  Header, mobile nav, section rail, progress bar
   ---------------------------------------------------------------------- */
.progress {
  position: fixed;
  inset: 0 auto auto 0;
  width: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
}

/* The header always carries its burgundy plate, so the gold logo stays legible
   over the bright sky in the hero photograph. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 16px var(--gutter);
  background: rgba(58, 17, 25, 0.88);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 rgba(233, 215, 169, 0.34);
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.site-header.is-stuck {
  padding: 10px var(--gutter);
  background: rgba(58, 17, 25, 0.95);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
}

.logo { display: flex; align-items: center; gap: 14px; }
.logo__mark { height: 46px; width: auto; }
.logo__word { height: 19px; width: auto; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-family: var(--font-brand);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand-100);
}
.nav a:hover { color: var(--gold-300); }

.site-header__actions { display: flex; align-items: center; gap: 10px; }

.burger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(233, 215, 169, 0.34);
  color: var(--gold-300);
  cursor: pointer;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  max-width: var(--container);
  margin: 14px auto 0;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  padding: 15px 4px;
  font-family: var(--font-brand);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand-100);
  box-shadow: inset 0 -1px 0 rgba(233, 215, 169, 0.28);
}
.mobile-nav a:last-child { color: var(--gold-300); box-shadow: none; }

.rail {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.rail a {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--sand-500);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rail a.is-current { width: 44px; background: var(--gold-500); }


/* -------------------------------------------------------------------------
   06  Hero
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  overflow: hidden;
  background: var(--burgundy-900);
}

.hero__photo {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 28% center;
  will-change: transform;
}

/* Two scrims: one vertical, one from the left, so the headline and both
   buttons always sit on dark ground whatever the sky is doing. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(38, 11, 17, 0.9) 0%, rgba(38, 11, 17, 0.5) 46%,
                    rgba(38, 11, 17, 0.18) 78%, rgba(38, 11, 17, 0.34) 100%),
    linear-gradient(180deg, rgba(38, 11, 17, 0.82) 0%, rgba(38, 11, 17, 0.6) 34%,
                    rgba(38, 11, 17, 0.94) 100%);
}

.hero__body {
  position: relative;
  display: grid;
  gap: 44px;
  padding-top: 150px;
  padding-bottom: 56px;
}

.hero__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.hero__copy { max-width: 780px; }

.hero__title {
  max-width: 26ch;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(38px, 4.4vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--sand-100);
  text-wrap: pretty;
}
.hero__title em { font-style: italic; font-weight: 400; color: var(--gold-300); }

.hero__lead {
  max-width: 54ch;
  margin-top: 26px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--sand-100);
}

.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 36px; }

.hero__lockup { height: 168px; width: auto; opacity: 0.92; }

/* Key facts strip. Each cell carries its own hairline, so a short last row
   never leaves a dark band behind it. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px;
}
.fact {
  padding: 24px 26px;
  background: rgba(38, 11, 17, 0.5);
  box-shadow: var(--hairline-dark);
}
.fact__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 46px;
  line-height: 1;
  color: var(--gold-300);
}
.fact__label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-brand);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand-100);
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-brand);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-300);
}
.hero__cue-line {
  display: block;
  width: 1px;
  height: 26px;
  background: var(--gold-500);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 0.25; }
  50%      { transform: translateY(9px); opacity: 1; }
}


/* -------------------------------------------------------------------------
   07  Marquee band
   ---------------------------------------------------------------------- */
.band {
  padding: 20px 0;
  overflow: hidden;
  background: var(--burgundy-700);
}
.band__track {
  display: flex;
  width: max-content;
  animation: drift 34s linear infinite;
}
.band__set {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  font-family: var(--font-brand);
  font-weight: 200;
  font-size: 22px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-300);
}
.band__set i { font-style: normal; color: var(--gold-500); }
@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* -------------------------------------------------------------------------
   08  Section shells
   ---------------------------------------------------------------------- */
.section {
  position: relative;
  padding: clamp(80px, 9vw, 128px) 0;
  overflow: hidden;
}
.section--sand      { background: var(--sand-200); }
.section--navy      { background: var(--navy-800); }
.section--plum      { background: var(--burgundy-900); }
.section--burgundy  { background: linear-gradient(135deg, var(--burgundy-500) 0%, var(--burgundy-700) 100%); }

.section__watermark {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  height: 460px;
  width: auto;
  opacity: 0.28;
  pointer-events: none;
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.subsection { margin-top: clamp(56px, 7vw, 96px); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 5vw, 84px);
}
.grid-2--middle { align-items: center; }


/* -------------------------------------------------------------------------
   09  The project
   ---------------------------------------------------------------------- */
.marque {
  display: inline-block;
  margin: 30px 0;
  padding: 18px 22px;
  background: var(--sand-100);
}
.marque img { height: 74px; width: auto; mix-blend-mode: multiply; }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: 40px;
}
.pillars li {
  padding: 22px;
  font-size: 14px;
  color: var(--sand-100);
  background: var(--navy-800);
  box-shadow: var(--hairline-dark);
}
.pillars__key {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-brand);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber-500);
}

.photo { overflow: hidden; }
.photo img { width: 100%; transition: transform var(--dur-slow) var(--ease); }
.photo:hover img { transform: scale(1.03); }
.photo--tall img { height: clamp(280px, 38vw, 460px); object-fit: cover; }

.photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.photo-pair img { height: clamp(140px, 18vw, 220px); object-fit: cover; }


/* -------------------------------------------------------------------------
   10  The executive room + gallery
   ---------------------------------------------------------------------- */
.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 56px;
}

.room-card {
  display: flex;
  flex-direction: column;
  box-shadow: var(--hairline-dark);
  transition: box-shadow var(--dur) var(--ease);
}
.room-card:hover { box-shadow: inset 0 0 0 1px rgba(233, 215, 169, 0.5), var(--shadow-lift); }
.room-card--navy { background: var(--navy-800); }
.room-card--burgundy { background: var(--burgundy-600); }
.room-card--sand { background: var(--sand-200); box-shadow: var(--hairline); }
.room-card--sand:hover { box-shadow: var(--hairline); }

.room-card .photo img { height: 280px; object-fit: cover; }

.room-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  padding: 32px;
}

.room-card__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.14;
  color: var(--sand-100);
}

.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.chips li {
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-brand);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sand-100);
  box-shadow: inset 0 0 0 1px rgba(233, 215, 169, 0.34);
}

.who { display: grid; margin: 8px 0 auto; }
.who li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  font-size: 15px;
  box-shadow: inset 0 -1px 0 var(--sand-300);
  transition: padding var(--dur) var(--ease), background var(--dur) var(--ease);
}
.who li:hover { padding-left: 14px; background: var(--sand-150); }
.who .ico { color: var(--gold-600); width: 18px; height: 18px; }

.gallery { margin-top: 64px; }
.gallery__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.gallery__nav { display: flex; gap: 8px; }

.gallery__strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-snap-type: x mandatory;
  cursor: grab;
  scrollbar-width: thin;
}
.gallery__strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery__strip::-webkit-scrollbar { height: 2px; }
.gallery__strip::-webkit-scrollbar-thumb { background: var(--sand-300); }

.gallery__item {
  flex: 0 0 clamp(260px, 34vw, 440px);
  scroll-snap-align: start;
}
.gallery__item img {
  width: 100%;
  height: clamp(200px, 24vw, 300px);
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.gallery__item figcaption {
  margin-top: 12px;
  font-family: var(--font-brand);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand-600);
}


/* -------------------------------------------------------------------------
   11  What you get
   ---------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1px;
  margin-top: 52px;
}
.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  min-height: 172px;
  padding: 34px 30px;
  background: var(--sand-100);
  box-shadow: var(--hairline);
  transition: background var(--dur) var(--ease);
}
.tile:hover { background: var(--sand-150); }
.tile:hover .ico { transform: translateY(-3px) scale(1.06); color: var(--gold-500); }
.tile .ico {
  color: var(--gold-600);
  transition: transform var(--dur-slow) var(--ease), color var(--dur) var(--ease);
}
.tile__label {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: var(--track-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--burgundy-600);
}

.cards-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1px;
  margin-top: 44px;
}
.pillar {
  padding: 32px 28px;
  background: var(--sand-100);
  box-shadow: var(--hairline);
  transition: background var(--dur) var(--ease);
}
.pillar:hover { background: var(--sand-150); }
.pillar:hover .ico { transform: translateY(-3px); color: var(--gold-500); }
.pillar .ico {
  color: var(--gold-600);
  transition: transform var(--dur-slow) var(--ease), color var(--dur) var(--ease);
}
.pillar__title {
  margin: 22px 0 16px;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--burgundy-600);
}

.showcase {
  position: relative;
  margin-top: 26px;
  overflow: hidden;
  box-shadow: var(--hairline);
}
.showcase img {
  width: 100%;
  height: clamp(300px, 42vw, 560px);
  object-fit: cover;
}
.showcase figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 10px;
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(38, 11, 17, 0) 0%, rgba(38, 11, 17, 0.9) 100%);
}
.showcase__eyebrow {
  font-family: var(--font-brand);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-300);
}
.showcase__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.1;
  color: var(--sand-100);
}

/* One amenity per row, framed */
.amenity-rows { display: grid; gap: 1px; margin-top: 1px; }
.amenity-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
  background: var(--sand-100);
  box-shadow: var(--hairline);
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.amenity-row:hover { background: var(--sand-150); padding-left: 34px; }
.amenity-row .ico { color: var(--gold-600); width: 22px; height: 22px; }
.amenity-row__num {
  width: 22px;
  flex: 0 0 auto;
  font-family: var(--font-brand);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: var(--track-label);
  color: var(--gold-600);
}
.amenity-row__label {
  flex: 1 1 auto;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--burgundy-600);
}
.amenity-row__note { font-size: 14px; text-align: right; color: var(--sand-600); }


/* -------------------------------------------------------------------------
   12  Studio layout
   ---------------------------------------------------------------------- */
.plan-list { display: grid; gap: 1px; margin-top: 36px; }
.plan-list__item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 6px;
  font-size: 16px;
  color: var(--sand-100);
  box-shadow: inset 0 -1px 0 rgba(233, 215, 169, 0.24);
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.plan-list__item span {
  width: 22px;
  font-family: var(--font-brand);
  font-size: 11px;
  letter-spacing: var(--track-label);
  color: var(--gold-500);
}
.plan-list__item.is-active { background: var(--plum-800); padding-left: 16px; }

.plan {
  padding: 22px;
  background: var(--sand-100);
  box-shadow: inset 0 0 0 1px rgba(233, 215, 169, 0.34);
}
.plan__frame { position: relative; }
.plan figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  font-family: var(--font-brand);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand-600);
}
.plan__tag { color: var(--gold-600); }

.pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 0;
  border-radius: 999px;
  background: var(--burgundy-600);
  color: var(--gold-300);
  font-family: var(--font-brand);
  font-size: 11px;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pin.is-active {
  background: var(--gold-500);
  color: var(--burgundy-900);
  transform: scale(1.22);
  box-shadow: 0 0 0 6px rgba(198, 164, 99, 0.24);
}


/* -------------------------------------------------------------------------
   13  Location
   ---------------------------------------------------------------------- */
.places {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1px;
  margin-top: 52px;
}
.place {
  position: relative;
  padding: 30px 28px;
  background: var(--sand-100);
  box-shadow: var(--hairline);
  transition: background var(--dur) var(--ease);
}
.place:hover { background: var(--sand-150); }
.place:hover .ico { transform: scale(1.1); color: var(--gold-500); }
.place .ico {
  color: var(--gold-600);
  transition: transform var(--dur-slow) var(--ease), color var(--dur) var(--ease);
}
.place__name {
  display: block;
  margin-top: 16px;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--burgundy-600);
}
.place__meta { display: block; margin-top: 8px; font-size: 14px; }
.place__figure {
  position: absolute;
  right: 28px;
  top: 26px;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--sand-300);
}


/* -------------------------------------------------------------------------
   14  Why residents choose Pincode
   ---------------------------------------------------------------------- */
.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1px;
  margin-top: 52px;
}
.reason {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  background: var(--burgundy-700);
  box-shadow: var(--hairline-dark);
  transition: background var(--dur) var(--ease);
}
.reason:hover { background: var(--burgundy-600); }
.reason:hover .reason__rule { width: 72px; background: var(--gold-500); }

.reason__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.reason__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  color: var(--gold-500);
}
.reason__rule {
  display: block;
  width: 34px;
  height: 1px;
  background: rgba(233, 215, 169, 0.5);
  transition: width var(--dur-slow) var(--ease), background var(--dur) var(--ease);
}
.reason__title {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: var(--track-label);
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--sand-100);
}
.reason__text { font-size: 15px; line-height: 1.55; color: var(--gold-300); }

.pull-quote {
  max-width: 44ch;
  margin-top: 56px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.26;
  color: var(--gold-300);
}


/* -------------------------------------------------------------------------
   15  Questions (FAQ)
   ---------------------------------------------------------------------- */
.contact-list { display: grid; gap: 1px; margin-top: 40px; }
.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 4px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--sand-100);
  box-shadow: inset 0 -1px 0 rgba(233, 215, 169, 0.24);
}
.contact-list .ico { margin-top: 3px; color: var(--amber-500); }
.contact-list a { color: var(--sand-100); }
.contact-list a:hover { color: var(--amber-500); }

.faq { display: grid; gap: 1px; align-content: start; }
.faq > .label { padding-bottom: 12px; }

.faq__item {
  background: var(--sand-100);
  box-shadow: var(--hairline);
  transition: box-shadow var(--dur) var(--ease);
}
.faq__item[open] { box-shadow: inset 0 0 0 1px var(--gold-500); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--burgundy-600);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .ico {
  color: var(--gold-600);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] summary .ico { transform: rotate(180deg); }

.faq__item p {
  max-width: 56ch;
  padding: 0 26px 24px;
  font-size: 15px;
  line-height: 1.6;
}


/* -------------------------------------------------------------------------
   16  Call to action
   ---------------------------------------------------------------------- */
.cta {
  padding: clamp(64px, 7vw, 104px) 0;
  background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-400) 45%, var(--gold-500) 100%);
}
.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 72px);
  flex-wrap: wrap;
}
.cta__title {
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--burgundy-700);
}
.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }


/* -------------------------------------------------------------------------
   17  Footer
   ---------------------------------------------------------------------- */
.site-footer {
  padding: clamp(56px, 6vw, 88px) 0 32px;
  background: var(--burgundy-900);
  color: var(--sand-100);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 64px);
}
.site-footer__brand img { height: 132px; width: auto; }

.site-footer__col h2 {
  margin-bottom: 18px;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.site-footer__col ul { display: grid; gap: 10px; }
.site-footer__col li,
.site-footer__col address {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cream-dim);
}
.site-footer__col a { color: var(--cream-dim); }
.site-footer__col a:hover { color: var(--gold-300); }

.site-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid rgba(233, 215, 169, 0.24);
  font-family: var(--font-brand);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.site-footer__legal a { color: var(--gold-300); }
.site-footer__legal a:hover { color: var(--gold-200); }


/* -------------------------------------------------------------------------
   18  Scroll reveal animation
        .reveal starts lowered and transparent; main.js adds .is-visible.
        If JavaScript never runs, the :not(.js) rule below keeps everything
        visible — nothing can be permanently hidden.
   ---------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-draw) var(--ease-reveal),
              transform var(--dur-draw) var(--ease-reveal);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* The signature move: a gold hairline drawing in from the left */
.js .reveal .eyebrow__rule { transform: scaleX(0); transition: transform var(--dur-draw) var(--ease-reveal); }
.js .reveal.is-visible .eyebrow__rule { transform: scaleX(1); }

/* Icons stroke themselves in when they scroll into view.
   stroke-dasharray is an inherited SVG property, so setting it on the <svg>
   reaches the geometry cloned in by <use>. 2000 is longer than any path here,
   so the glyph is fully hidden at offset 2000 and fully drawn at offset 0. */
.js .draw { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.js .draw.is-drawn {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-draw) var(--ease-reveal);
}


/* -------------------------------------------------------------------------
   19  Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .rail { display: none; }
}

@media (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }

  .nav { display: none; }
  .burger { display: grid; }

  .hero__body { padding-top: 130px; }
  .hero__lockup { height: 110px; }
  .band__set { font-size: 16px; }
  .amenity-row { flex-wrap: wrap; gap: 12px 16px; }
  .amenity-row__note { text-align: left; width: 100%; padding-left: 44px; }
  .place__figure { display: none; }
}

@media (max-width: 560px) {
  .logo__word { display: none; }
  .hero__title { font-size: clamp(30px, 8vw, 40px); }
  .fact__value { font-size: 36px; }
  .hero__lockup { display: none; }
  .photo-pair { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__brand img { height: 104px; }
  .cta__actions .btn { width: 100%; }
}

/* Honour the operating-system reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal .eyebrow__rule { transform: none; }
  .js .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* Print: flatten to something readable on paper */
@media print {
  .site-header, .rail, .progress, .band, .hero__cue, .gallery__nav { display: none; }
  body { background: #fff; color: #000; }
  .section { padding: 24px 0; }
}