/* ===========================================================================
   Sai Ram Developers — design system
   ---------------------------------------------------------------------------
   The whole visual identity is driven by the tokens in :root below. When the
   brand logo arrives, change the six colour tokens in the BRAND block and the
   two font tokens; nothing else in this file needs editing.
   ========================================================================= */

:root {
  /* --- LOGO COLOURS ------------------------------------------------------
     Sampled directly from the supplied Sai Ram Developers logo artwork.
     The mark is: red rooflines, a navy wordmark, a green tick, and Krishna's
     gold flute — the flute is why gold carries the accents throughout.     */
  --brand-red:   #dc1b22;   /* roofline red   — urgency, "few plots left"   */
  --brand-navy:  #22307f;   /* wordmark navy  — see the note below          */
  --brand-green: #6fc03f;   /* tick green     — availability, confirmation  */
  --brand-gold:  #e0d050;   /* flute gold                                   */

  /*  Navy is deliberately held in reserve. Dropped into a saffron-and-maroon
      field it reads as a second, competing brand rather than an accent. If a
      navy-led scheme is ever wanted, swap --maroon/--maroon-deep for navy
      tones here and the entire site follows — nothing else references them.  */

  /* --- BRAND -------------------------------------------------------------
     Saffron for action, maroon for authority, gold for the fine detail,
     cream for ground, charcoal for text. The warm end is pulled toward the
     logo's roofline red so the mark sits inside the palette rather than on
     top of it, and kept a step below "bright" so the page reads premium.   */
  --saffron:        #d9722a;
  --saffron-deep:   #b9561a;
  --saffron-soft:   #f6e2d1;
  --maroon:         #5c1626;
  --maroon-deep:    #3a0d18;
  --maroon-soft:    #efdfe2;
  --gold:           #b8912f;
  --gold-light:     #e0bf6b;
  --gold-pale:      #f2e6c9;

  --cream:          #fbf6ee;
  --cream-deep:     #f4ebdd;
  --ivory:          #fffdf9;
  --white:          #ffffff;

  --charcoal:       #191512;
  --ink:            #2b241f;
  --ink-soft:       #5d5147;
  --muted:          #857567;
  --hairline:       rgba(25, 21, 18, .10);
  --hairline-gold:  rgba(184, 145, 47, .34);

  /* --- TYPE -------------------------------------------------------------- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Devanagari needs a face designed for it — Fraunces has no Devanagari
     coverage, so Hindi set in it would silently fall back to a system font. */
  --font-hindi:   "Tiro Devanagari Hindi", "Noto Serif Devanagari", "Nirmala UI", serif;

  /* --- SHAPE + DEPTH ----------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-xs: 0 1px 2px rgba(58, 26, 8, .06);
  --shadow-sm: 0 2px 8px rgba(58, 26, 8, .07), 0 1px 2px rgba(58, 26, 8, .05);
  --shadow-md: 0 10px 30px -12px rgba(58, 26, 8, .22), 0 2px 8px rgba(58, 26, 8, .06);
  --shadow-lg: 0 28px 60px -24px rgba(58, 26, 8, .34), 0 6px 18px rgba(58, 26, 8, .08);
  --shadow-gold: 0 14px 34px -14px rgba(185, 86, 26, .48);

  /* --- RHYTHM ------------------------------------------------------------ */
  --section-y: clamp(4rem, 8vw, 7.5rem);
  --gutter:    clamp(1.15rem, 4vw, 2.5rem);
  --shell:     1240px;

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

/* ===========================================================================
   Base
   ========================================================================= */

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

/* ---------------------------------------------------------------------------
   Overflow safety net.

   A grid or flex item defaults to `min-width: auto`, which means it refuses to
   shrink below the widest thing inside it. One long word, one wide table, or a
   Swiper that sizes itself from its parent is then enough to push a whole
   column past the viewport — and because a slider re-measures after the column
   grows, the two can feed each other until the layout hits Chrome's ceiling.
   Setting min-width: 0 on every grid/flex child stops that at the source.
--------------------------------------------------------------------------- */
.split > *, .card-grid > *, .feature-grid > *, .team-grid > *,
.project-layout > *, .distance-list > *, .stat-strip > *,
.hero-trust > *, .spec-grid > *, .swiper, .chip-row > * {
  min-width: 0;
}

/* Long unbroken tokens — an email address, a URL a buyer pasted into an
   enquiry, a Devanagari compound — must wrap rather than widen the page. */
p, li, h1, h2, h3, h4, dd, dt, blockquote, figcaption, .testimonial-quote {
  overflow-wrap: break-word;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 100px;  /* clears the sticky header on anchor jumps */

  /* Nothing may widen the page. This matters more than it looks: the header is
     position:fixed so it is always exactly viewport-wide, while .shell in normal
     flow centres inside <body>. If anything stretches the body — a slider whose
     CSS has not arrived yet, a stray wide element — the header stays put while
     every section indents, and the page looks knocked out of alignment.
     `clip` rather than `hidden` so it never becomes a scroll container and
     position:sticky keeps working. `hidden` first as the pre-Safari-16 fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.68;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

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

/* Every icon() call emits class="icon". An inline SVG with only a viewBox and
   no intrinsic size expands to fill whatever box it lands in, so without this
   default an icon dropped into a context that has no explicit sizing rule
   renders enormous. Component rules further down override it as needed. */
svg.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.16em;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--charcoal);
  margin: 0 0 .6em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.95rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }

p  { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--saffron-deep); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--maroon); }

::selection { background: var(--saffron); color: #fff; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--maroon); color: #fff; padding: .8rem 1.4rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ===========================================================================
   Layout primitives
   ========================================================================= */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-narrow { max-width: 820px; }

.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }

.bg-cream  { background: var(--cream); }
.bg-ivory  { background: var(--ivory); }
.bg-deep   { background: var(--charcoal); color: #ece4da; }
.bg-maroon { background: linear-gradient(150deg, var(--maroon) 0%, var(--maroon-deep) 100%); color: #f3e8dd; }

.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4,
.bg-maroon h1, .bg-maroon h2, .bg-maroon h3, .bg-maroon h4 { color: var(--ivory); }

/* A hairline of temple-inspired gold that separates major bands. */
.rule-gold {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--hairline-gold) 22%, var(--hairline-gold) 78%, transparent);
}

/* ===========================================================================
   Section headings
   ========================================================================= */

.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--saffron-deep);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 30px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.bg-deep .eyebrow, .bg-maroon .eyebrow { color: var(--gold-light); }

.section-head { max-width: 720px; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head.is-centred { margin-inline: auto; text-align: center; }
.section-head.is-centred .eyebrow::before { display: none; }

.section-head p {
  font-size: 1.06rem;
  color: var(--ink-soft);
  max-width: 62ch;
}
.bg-deep .section-head p, .bg-maroon .section-head p { color: rgba(243, 232, 221, .78); }
.section-head.is-centred p { margin-inline: auto; }

.lede {
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ===========================================================================
   Buttons
   ========================================================================= */

.btn-srd {
  --btn-bg: var(--saffron);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body);
  font-size: .93rem; font-weight: 600; letter-spacing: .015em;
  line-height: 1;
  padding: .95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.btn-srd svg { width: 17px; height: 17px; flex: none; }
.btn-srd:active { transform: translateY(1px); }

.btn-primary-srd {
  background: linear-gradient(135deg, var(--saffron) 0%, var(--saffron-deep) 100%);
  color: #fff;
  box-shadow: var(--shadow-gold);
}
.btn-primary-srd:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 42px -16px rgba(185, 86, 26, .6);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--maroon-deep);
  box-shadow: 0 14px 32px -16px rgba(184, 145, 47, .7);
}
.btn-gold:hover { color: var(--maroon-deep); transform: translateY(-2px); }

.btn-outline-srd {
  background: transparent;
  color: var(--maroon);
  border-color: rgba(92, 22, 38, .28);
}
.btn-outline-srd:hover {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff;
  transform: translateY(-2px);
}

/* For use on photographs and dark bands. */
.btn-ghost-light {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, .95); color: var(--maroon-deep); border-color: #fff; }

/* The outline button is dark-on-light by default; over the hero photograph it
   has to flip, or the header phone number all but disappears. */
.is-over-hero .btn-outline-srd {
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.is-over-hero .btn-outline-srd:hover { background: #fff; color: var(--maroon-deep); border-color: #fff; }
.is-over-hero .btn-outline-srd svg { color: var(--gold-light); }
.is-over-hero .btn-outline-srd:hover svg { color: var(--maroon-deep); }

.btn-lg-srd { padding: 1.1rem 2.2rem; font-size: 1rem; }
.btn-sm-srd { padding: .7rem 1.25rem; font-size: .84rem; }
.btn-block  { width: 100%; }

/* Text link with an arrow that slides on hover. */
.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .93rem;
  color: var(--saffron-deep);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ===========================================================================
   Header / navigation
   ========================================================================= */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1040;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease),
              backdrop-filter .3s var(--ease), padding .3s var(--ease);
  padding-block: .85rem;
}
/* Transparent while over the hero … */
.site-header.is-over-hero {
  background: transparent;
}
.site-header.is-over-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15, 10, 6, .55), transparent);
  pointer-events: none;
}
/* … solid, condensed and shadowed once the visitor scrolls. */
.site-header.is-stuck {
  background: rgba(255, 253, 249, .93);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--hairline), 0 8px 28px -18px rgba(58, 26, 8, .5);
  padding-block: .55rem;
}

.nav-shell { display: flex; align-items: center; gap: 1.5rem; }

/* The logo is a wide lockup that already contains the wordmark, so it is sized
   by height and given its own width. No text sits beside it. */
.brand { display: inline-flex; align-items: center; flex: none; }
.brand-logo {
  height: 78px;
  width: auto;
  flex: none;
  transition: height .3s var(--ease), filter .3s var(--ease);
}
.site-header.is-stuck .brand-logo { height: 58px; }

/* Over a dark hero the deep-red wordmark and grey strapline would sink into
   the photograph. A soft light halo follows the logo's own alpha edges and
   lifts it off the background without putting a plate behind it. */
.is-over-hero .brand-logo {
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, .95))
    drop-shadow(0 0 9px rgba(255, 255, 255, .55))
    drop-shadow(0 3px 14px rgba(0, 0, 0, .45));
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.16rem; font-weight: 600; letter-spacing: .005em;
  color: var(--maroon);
}
.brand-sub {
  font-size: .6rem; font-weight: 600; letter-spacing: .21em;
  text-transform: uppercase; color: var(--gold);
}
.is-over-hero .brand-name { color: #fff; }
.is-over-hero .brand-sub  { color: var(--gold-light); }

.nav-links {
  display: flex; align-items: center; gap: .25rem;
  margin: 0 0 0 auto; padding: 0; list-style: none;
}
.nav-links > li { position: relative; }

.nav-link-srd {
  display: block;
  padding: .6rem .85rem;
  font-size: .89rem; font-weight: 500;
  color: var(--ink);
  border-radius: var(--r-sm);
  white-space: nowrap;      /* "Why Us" must never break across two lines */
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-link-srd:hover { color: var(--saffron-deep); background: rgba(217, 114, 42, .08); }
.nav-link-srd.is-current { color: var(--saffron-deep); font-weight: 600; }
.is-over-hero .nav-link-srd { color: rgba(255, 255, 255, .92); }
.is-over-hero .nav-link-srd:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.is-over-hero .nav-link-srd.is-current { color: var(--gold-light); }

/* Dropdown for Projects / Locations */
.nav-drop { position: relative; }
.nav-drop > .nav-link-srd { display: inline-flex; align-items: center; gap: .3rem; }
.nav-drop > .nav-link-srd svg { width: 13px; height: 13px; transition: transform .22s var(--ease); }
.nav-drop:hover > .nav-link-srd svg, .nav-drop.is-open > .nav-link-srd svg { transform: rotate(90deg); }

.nav-drop-menu {
  position: absolute; top: calc(100% + .5rem); left: 0;
  min-width: 268px; margin: 0; padding: .55rem;
  list-style: none;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.is-open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-drop-menu a {
  display: block; padding: .6rem .75rem;
  border-radius: var(--r-sm);
  color: var(--ink); font-size: .89rem; font-weight: 500;
}
.nav-drop-menu a:hover { background: var(--cream-deep); color: var(--maroon); }
.nav-drop-menu .drop-meta { display: block; font-size: .74rem; color: var(--muted); font-weight: 400; }

.nav-cta { display: flex; align-items: center; gap: .6rem; flex: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--hairline);
  border-radius: var(--r-sm); color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.is-over-hero .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .45); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 1060;
  background: rgba(15, 10, 6, .55);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }

.mobile-nav-panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(400px, 88vw);
  background: var(--ivory);
  padding: 1.25rem var(--gutter) 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .32s var(--ease);
  display: flex; flex-direction: column;
}
.mobile-nav.is-open .mobile-nav-panel { transform: translateX(0); }

.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.mobile-nav-list { list-style: none; margin: 0; padding: 0; }
.mobile-nav-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem .25rem;
  font-size: 1.02rem; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.mobile-nav-list a:hover, .mobile-nav-list a.is-current { color: var(--saffron-deep); }
.mobile-nav-list a svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.mobile-nav-list .sub a {
  padding-left: 1.1rem;
  font-size: .92rem;
  color: var(--ink-soft);
  position: relative;
}
/* A short rule marks a child item as belonging to the project list above it. */
.mobile-nav-list .sub a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 8px; height: 1px; background: var(--hairline-gold);
}

/* The drawer sits on cream, so its scroller stays quiet rather than gold. */
.mobile-nav-panel { scrollbar-width: thin; scrollbar-color: rgba(133, 117, 103, .5) transparent; }
.mobile-nav-panel::-webkit-scrollbar { width: 6px; }
.mobile-nav-panel::-webkit-scrollbar-track { background: transparent; border: 0; }
.mobile-nav-panel::-webkit-scrollbar-thumb {
  background: rgba(133, 117, 103, .45); border: 0; border-radius: 999px;
}
.mobile-nav-foot { margin-top: auto; padding-top: 1.75rem; display: grid; gap: .6rem; }

/* ---------------------------------------------------------------------------
   Header breakpoints.

   Eight nav links plus a phone pill plus a CTA genuinely need ~1300px. Below
   that the row was overflowing by ~130px on a 1180px laptop, so each tier
   sheds the least valuable element rather than letting the bar break.
--------------------------------------------------------------------------- */

/* Tier 1 — tighten the links and drop the phone pill (calling is still one tap
   away via the floating button and the mobile bar). */
@media (max-width: 1300px) {
  .nav-links { gap: 0; }
  .nav-link-srd { padding: .6rem .58rem; font-size: .85rem; }
  .nav-cta .btn-outline-srd { display: none; }
}

/* Tier 2 — the links move into the drawer; Enquire stays, it is the CTA. */
@media (max-width: 1140px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { margin-left: auto; }
}

/* Tier 3 — the sticky bottom bar takes over the CTA, so the header clears out. */
@media (max-width: 640px) {
  .nav-cta .btn-primary-srd { display: none; }
}

/* The logo must shrink rather than shove the toggle off-screen. */
.brand { min-width: 0; }
.brand-logo { max-width: 100%; object-fit: contain; object-position: left center; }

@media (max-width: 900px) {
  .brand-logo { height: 58px; }
  .site-header.is-stuck .brand-logo { height: 48px; }
}
@media (max-width: 480px) {
  .nav-shell { gap: .7rem; }
  .brand-logo { height: 48px; }
  .site-header.is-stuck .brand-logo { height: 42px; }
}
@media (max-width: 360px) {
  .brand-logo { height: 42px; }
  .site-header.is-stuck .brand-logo { height: 38px; }
}

/* ===========================================================================
   Hero
   ========================================================================= */

.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--maroon-deep);
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.2%, -1%, 0); }
}

/* Two-layer overlay: a warm vertical wash plus a left-weighted scrim so the
   headline stays legible over any photograph the admin uploads. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(28, 8, 12, .88) 0%, rgba(28, 8, 12, .58) 42%, rgba(28, 8, 12, .18) 72%, rgba(28, 8, 12, .35) 100%),
    linear-gradient(180deg, rgba(15, 6, 8, .5) 0%, transparent 32%, rgba(15, 6, 8, .72) 100%);
}

.hero-inner { position: relative; z-index: 1; padding-block: clamp(7rem, 14vh, 10rem) clamp(5rem, 12vh, 8rem); width: 100%; }
.hero-copy { max-width: 720px; color: #fff; }

.hero-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1rem .5rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(224, 191, 107, .38);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.6rem;
}
.hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light);
  box-shadow: 0 0 0 4px rgba(224, 191, 107, .22);
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 6.4vw, 4.9rem);
  line-height: 1.04;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.hero h1 .accent {
  color: var(--gold-light);
  font-style: italic;
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 60;
}

.hero-sub {
  font-size: clamp(1.02rem, 1.8vw, 1.28rem);
  color: rgba(255, 255, 255, .86);
  max-width: 56ch;
  margin-bottom: 2.1rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.75rem; }

/* Trust strip sitting on the glass at the foot of the hero.
   Fixed column counts rather than auto-fit: with four tiles, auto-fit drops to
   three across at some widths and leaves the fourth alone beside an empty cell.
   Four, then two, then one — always a full row. */
.hero-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 660px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.hero-trust div { background: rgba(20, 10, 8, .42); padding: 1rem 1.15rem; }
.hero-trust dt {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 600; color: var(--gold-light); line-height: 1;
  margin-bottom: .3rem;
}
.hero-trust dd {
  margin: 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

/* Renders and visualisations must be identifiable as such — it is what RERA
   expects and what an honest listing does. Sits quietly in the bottom corner. */
.hero-credit {
  /* Bottom-left: the right corner belongs to the floating enquiry buttons. */
  position: absolute; left: var(--gutter); bottom: 1.35rem; z-index: 2;
  margin: 0;
  font-size: .66rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  pointer-events: none;
}
@media (max-width: 900px) {
  /* Clear the sticky conversion bar, which overlays the foot of the hero. */
  .hero-credit { bottom: 4.6rem; font-size: .6rem; letter-spacing: .1em; }
}

.scroll-cue {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.scroll-cue .track {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent);
  position: relative; overflow: hidden;
}
.scroll-cue .track::after {
  content: ""; position: absolute; top: -46px; left: 0; width: 1px; height: 46px;
  background: var(--gold-light);
  animation: cueFall 2.4s var(--ease) infinite;
}
@keyframes cueFall { to { top: 46px; } }

@media (max-width: 640px) {
  .scroll-cue { display: none; }
  .hero { min-height: 92svh; }
}

/* ===========================================================================
   Page hero (interior pages)
   ========================================================================= */

.page-hero {
  position: relative;
  padding-block: clamp(8.5rem, 17vh, 12rem) clamp(3rem, 6vw, 4.5rem);
  background: var(--maroon-deep);
  overflow: hidden;
  isolation: isolate;
}
.page-hero .hero-media::after {
  background:
    linear-gradient(100deg, rgba(28, 8, 12, .9) 0%, rgba(28, 8, 12, .62) 55%, rgba(28, 8, 12, .4) 100%),
    linear-gradient(180deg, rgba(15, 6, 8, .55) 0%, transparent 45%);
}
.page-hero h1 { color: #fff; margin-bottom: .8rem; }
.page-hero .lede { color: rgba(255, 255, 255, .82); max-width: 62ch; }

.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  list-style: none; margin: 0 0 1.15rem; padding: 0;
  font-size: .8rem;
}
.breadcrumbs li { display: flex; align-items: center; gap: .45rem; color: rgba(255, 255, 255, .6); }
.breadcrumbs a { color: rgba(255, 255, 255, .78); }
.breadcrumbs a:hover { color: var(--gold-light); }
.breadcrumbs li + li::before { content: "/"; color: rgba(255, 255, 255, .35); }
.breadcrumbs [aria-current] { color: var(--gold-light); }

/* ===========================================================================
   Cards — projects
   ========================================================================= */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
@media (max-width: 520px) {
  .card-grid { grid-template-columns: 1fr; }
}

.project-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.project-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
  border-color: var(--hairline-gold);
}

.project-card-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--cream-deep); }
.project-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.project-card:hover .project-card-media img { transform: scale(1.07); }
.project-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20, 8, 6, .62) 100%);
}

.status-pill {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Availability tones echo the logo: its green tick for open, its roofline red
   for the last few plots. */
.status-pill.is-open     { background: rgba(35, 110, 45, .92); color: #e2f6d8; }
.status-pill.is-few      { background: rgba(196, 34, 38, .93); color: #ffe4e2; }
.status-pill.is-sold     { background: rgba(70, 62, 56, .9);   color: #ded6ce; }
.status-pill.is-upcoming { background: rgba(92, 22, 38, .9);   color: #f6dfe4; }

.project-card-place {
  position: absolute; left: 1rem; bottom: .9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .8rem; font-weight: 500; color: rgba(255, 255, 255, .93);
}
.project-card-place svg { width: 15px; height: 15px; color: var(--gold-light); }

.project-card-body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }

.project-card-type {
  font-size: .71rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .5rem;
}
.project-card h3 { font-size: 1.42rem; margin-bottom: .55rem; }
.project-card h3 a { color: inherit; }
.project-card h3 a:hover { color: var(--saffron-deep); }
.project-card-desc { font-size: .93rem; color: var(--ink-soft); margin-bottom: 1.05rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.15rem; }
.chip {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .34rem .7rem;
  border-radius: 999px;
  background: var(--cream-deep);
  border: 1px solid rgba(184, 145, 47, .2);
  font-size: .74rem; font-weight: 500; color: var(--ink-soft);
}
.chip svg { width: 13px; height: 13px; color: var(--gold); }

.project-card-foot {
  margin-top: auto; padding-top: 1.05rem;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
}
.price-tag { line-height: 1.25; }
.price-tag .label { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.price-tag .value { font-family: var(--font-display); font-size: 1.24rem; font-weight: 600; color: var(--maroon); }
.price-tag .unit  { font-size: .74rem; color: var(--muted); font-family: var(--font-body); font-weight: 400; }

.card-actions { display: flex; gap: .5rem; }

/* ===========================================================================
   Icon feature cards (values, highlights, why-us)
   ========================================================================= */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.feature-card {
  position: relative;
  padding: 1.9rem 1.6rem 1.7rem;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--saffron));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--hairline-gold); }
.feature-card:hover::before { transform: scaleX(1); }

.feature-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  margin-bottom: 1.15rem;
  background: linear-gradient(140deg, var(--saffron-soft), var(--gold-pale));
  color: var(--saffron-deep);
  border: 1px solid rgba(184, 145, 47, .28);
}
.feature-icon svg { width: 25px; height: 25px; }

.feature-card h3, .feature-card h4 { font-size: 1.16rem; margin-bottom: .5rem; }
.feature-card p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* Dark variant */
.bg-deep .feature-card, .bg-maroon .feature-card {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.bg-deep .feature-card p, .bg-maroon .feature-card p { color: rgba(240, 230, 220, .74); }
.bg-deep .feature-icon, .bg-maroon .feature-icon {
  background: rgba(224, 191, 107, .13);
  color: var(--gold-light);
  border-color: rgba(224, 191, 107, .3);
}

/* ===========================================================================
   Stats counters
   ========================================================================= */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  text-align: center;
}
.stat-item { position: relative; padding-inline: .5rem; }
.stat-item + .stat-item::before {
  content: ""; position: absolute; left: calc(-1 * clamp(.5rem, 1.5vw, 1.25rem)); top: 12%; bottom: 12%;
  width: 1px; background: var(--hairline-gold);
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.4vw, 3.4rem); font-weight: 600; line-height: 1;
  color: var(--gold-light);
  display: flex; align-items: baseline; justify-content: center; gap: .06em;
}
.stat-label {
  margin-top: .55rem;
  font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(240, 230, 220, .68);
}
.bg-cream .stat-value, .bg-ivory .stat-value { color: var(--maroon); }
.bg-cream .stat-label, .bg-ivory .stat-label { color: var(--muted); }

@media (max-width: 560px) {
  .stat-item + .stat-item::before { display: none; }
}

/* ===========================================================================
   Split media/text block
   ========================================================================= */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split-media { position: relative; }
.split-media img { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; }

/* A poster is already a finished piece of design — no frame, no overlay, and a
   softer shadow so it reads as artwork rather than a photograph in a mount. */
.split-media.is-plain img { box-shadow: var(--shadow-md); }
.split-media.is-plain::before { content: none; }

/* Gold frame offset behind the image.
   It deliberately sits 1.6rem outside the image on the right, so it only
   appears once the shell has gutters wide enough to absorb it — otherwise it
   is the rightmost thing on the page and pushes the layout sideways. */
.split-media.is-framed::before { content: none; }

@media (min-width: 1100px) {
  .split-media.is-framed::before {
    content: ""; position: absolute;
    inset: 1.6rem -1.6rem -1.6rem 1.6rem;
    border: 1px solid var(--hairline-gold);
    border-radius: var(--r-lg);
    z-index: -1;
  }
}

.float-stat {
  position: absolute; right: -1rem; bottom: -1.35rem;
  background: var(--ivory);
  border: 1px solid var(--hairline-gold);
  border-radius: var(--r-md);
  padding: 1rem 1.35rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.float-stat .value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--maroon); line-height: 1; }
.float-stat .label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
@media (max-width: 640px) { .float-stat { position: static; margin-top: 1rem; } }

/* Checklist */
.tick-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .8rem; }
.tick-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: .96rem; color: var(--ink-soft); }
.tick-list svg { width: 20px; height: 20px; flex: none; margin-top: .18rem; color: var(--saffron); }
.bg-deep .tick-list li, .bg-maroon .tick-list li { color: rgba(240, 230, 220, .82); }
.bg-deep .tick-list svg, .bg-maroon .tick-list svg { color: var(--gold-light); }

/* ===========================================================================
   Team
   ========================================================================= */

/* Flex rather than grid: with an odd number of people a grid leaves the last
   card stranded hard-left. Wrapping flex items centre their final row, so the
   section stays balanced whether there are four members or seven. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
}
.team-grid > * {
  flex: 1 1 195px;   /* five across fit a 1240px shell; they grow to fill it */
  max-width: 300px;
  min-width: 0;
}
@media (max-width: 560px) {
  /* One per row on a phone — a half-width portrait card is unreadable. */
  .team-grid > * { flex: 1 1 100%; max-width: none; }
}

.team-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--charcoal);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.team-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.team-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  filter: saturate(.94) contrast(1.02);
  transition: transform .7s var(--ease), filter .5s var(--ease);
}
.team-card:hover .team-photo img { transform: scale(1.05); filter: saturate(1.04); }
.team-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(15, 8, 6, .55) 66%, rgba(15, 8, 6, .93) 100%);
}

.team-body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 1.25rem 1.3rem 1.35rem;
  color: #fff;
}
.team-body h3 { color: #fff; font-size: 1.22rem; margin-bottom: .18rem; }
.team-role {
  font-size: .73rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-light);
}
.team-bio {
  font-size: .87rem; line-height: 1.55;
  color: rgba(255, 255, 255, .8);
  margin-top: .7rem;
  /* Revealed on hover on pointer devices; always visible on touch. */
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s var(--ease), opacity .35s var(--ease), margin-top .45s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .team-card:hover .team-bio, .team-card:focus-within .team-bio { max-height: 12rem; opacity: 1; }
}
@media (hover: none) {
  .team-bio { max-height: none; opacity: 1; }
}

.team-social { display: flex; gap: .4rem; margin-top: .9rem; }
.team-social a {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
}
.team-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--maroon-deep); }
.team-social svg { width: 15px; height: 15px; }

/* ===========================================================================
   Testimonials
   ========================================================================= */

.testimonial-card {
  height: auto;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 2rem 1.8rem 1.7rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.testimonial-mark { width: 34px; height: 34px; color: var(--gold-pale); margin-bottom: .9rem; }
.testimonial-quote {
  font-family: var(--font-display);
  font-size: 1.06rem; line-height: 1.62; font-weight: 400;
  color: var(--ink);
  margin-bottom: 1.4rem;
  flex: 1;
}
.testimonial-meta { display: flex; align-items: center; gap: .85rem; padding-top: 1.1rem; border-top: 1px solid var(--hairline); }
.testimonial-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--gold-pale);
  background: var(--cream-deep);
}
.testimonial-avatar.is-initial {
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  color: var(--maroon); background: var(--gold-pale);
}
.testimonial-name { font-weight: 600; font-size: .96rem; color: var(--charcoal); }
.testimonial-where { font-size: .79rem; color: var(--muted); }
.stars { display: flex; gap: 2px; margin-bottom: .7rem; color: var(--gold); }
.stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }

/* Swiper chrome, restyled to the brand.
   The clipping here duplicates Swiper's own stylesheet on purpose: until that
   file arrives the slides sit side by side at natural width, and an unclipped
   wrapper is wide enough to stretch the whole page. */
.swiper { overflow: hidden; max-width: 100%; }
.swiper-slide { max-width: 100%; }

.swiper { padding-bottom: 3.25rem !important; }
.swiper-slide { height: auto; display: flex; }
.swiper-slide > * { width: 100%; }
.swiper-pagination-bullet { background: var(--muted); opacity: .35; }
.swiper-pagination-bullet-active { background: var(--saffron); opacity: 1; width: 22px; border-radius: 4px; }
.swiper-button-next, .swiper-button-prev {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ivory); border: 1px solid var(--hairline);
  color: var(--maroon); box-shadow: var(--shadow-sm);
  top: auto; bottom: 0; transform: none;
}
.swiper-button-next::after, .swiper-button-prev::after { font-size: 15px; font-weight: 700; }
.swiper-button-prev { left: auto; right: 56px; }
.swiper-button-next { right: 0; }
.swiper-button-next:hover, .swiper-button-prev:hover { background: var(--saffron); color: #fff; border-color: var(--saffron); }
@media (max-width: 640px) { .swiper-button-next, .swiper-button-prev { display: none; } }

/* ===========================================================================
   Gallery (masonry + lightbox)
   ========================================================================= */

.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter-btn {
  padding: .55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;
  font-size: .84rem; font-weight: 500; color: var(--ink-soft);
  cursor: pointer;
  transition: all .22s var(--ease);
}
.filter-btn:hover { border-color: var(--saffron); color: var(--saffron-deep); }
.filter-btn.is-active {
  background: linear-gradient(135deg, var(--saffron), var(--saffron-deep));
  border-color: transparent; color: #fff;
  box-shadow: var(--shadow-gold);
}

.masonry { columns: 3 300px; column-gap: 1rem; }
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--cream-deep);
  box-shadow: var(--shadow-xs);
  transition: opacity .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.masonry-item img { width: 100%; transition: transform .6s var(--ease); }
.masonry-item:hover { box-shadow: var(--shadow-md); }
.masonry-item:hover img { transform: scale(1.05); }
.masonry-item[hidden] { display: none; }

.masonry-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 2.2rem .95rem .85rem;
  background: linear-gradient(180deg, transparent, rgba(15, 8, 6, .86));
  color: #fff; font-size: .84rem; font-weight: 500;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.masonry-item:hover .masonry-cap { opacity: 1; transform: translateY(0); }
.masonry-cap span { display: block; font-size: .71rem; font-weight: 400; color: var(--gold-light); letter-spacing: .1em; text-transform: uppercase; }

.lightbox {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(12, 7, 5, .94);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.lightbox-cap { color: rgba(255, 255, 255, .8); text-align: center; margin-top: 1rem; font-size: .9rem; }
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24);
  color: #fff; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox-close { top: 1.25rem; right: 1.25rem; }
.lightbox-nav.prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--saffron); border-color: var(--saffron); }
.lightbox svg { width: 20px; height: 20px; }

@media (max-width: 700px) { .masonry { columns: 2 150px; column-gap: .6rem; } .masonry-item { margin-bottom: .6rem; } }

/* ===========================================================================
   Forms
   ========================================================================= */

.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ink); margin-bottom: .4rem;
}
.field .req { color: var(--saffron-deep); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .82rem 1rem;
  font: inherit; font-size: .93rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(25, 21, 18, .16);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  appearance: none;
}
.field textarea { min-height: 108px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857567' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 17px;
  padding-right: 2.4rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--saffron);
  box-shadow: 0 0 0 3px rgba(217, 114, 42, .15);
}
.field input::placeholder, .field textarea::placeholder { color: #ab9c8e; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #c0392b; }
.field-error { display: block; font-size: .78rem; color: #c0392b; margin-top: .3rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.form-note { font-size: .78rem; color: var(--muted); line-height: 1.5; margin-top: .9rem; }

.form-card {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-md);
}

/* Success / error banners */
.alert-srd {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .95rem 1.15rem;
  border-radius: var(--r-sm);
  font-size: .9rem;
  margin-bottom: 1.15rem;
  border: 1px solid;
}
.alert-srd svg { width: 19px; height: 19px; flex: none; margin-top: .12rem; }
.alert-success { background: #eaf6ef; border-color: #b8e0c8; color: #1b6640; }
.alert-error   { background: #fdecea; border-color: #f5c2bc; color: #a3271a; }
.alert-info    { background: var(--gold-pale); border-color: var(--hairline-gold); color: #6d551a; }

/* ===========================================================================
   Enquiry modal
   ========================================================================= */

.srd-modal {
  position: fixed; inset: 0; z-index: 1070;
  display: grid; place-items: center;
  padding: clamp(.75rem, 3vw, 2rem);
  background: rgba(20, 10, 8, .62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.srd-modal.is-open { opacity: 1; visibility: visible; }

.srd-modal-panel {
  position: relative;
  width: min(940px, 100%);
  max-height: min(92svh, 820px);
  overflow: auto;
  background: var(--ivory);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: .82fr 1fr;
  transform: translateY(18px) scale(.985);
  transition: transform .35s var(--ease);
}
.srd-modal.is-open .srd-modal-panel { transform: none; }

.srd-modal-aside {
  position: relative;
  padding: 2.25rem 1.9rem;
  background: linear-gradient(155deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  color: #f3e8dd;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.srd-modal-aside::after {
  content: ""; position: absolute; right: -70px; bottom: -70px;
  width: 230px; height: 230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 191, 107, .22), transparent 68%);
}
.srd-modal-aside h3 { color: #fff; font-size: 1.6rem; margin-bottom: .7rem; }
.srd-modal-aside p { font-size: .92rem; color: rgba(243, 232, 221, .78); }

.srd-modal-body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.srd-modal-close {
  position: absolute; top: .85rem; right: .85rem; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(25, 21, 18, .07); border: 1px solid var(--hairline);
  color: var(--ink); cursor: pointer;
}
.srd-modal-close:hover { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.srd-modal-close svg { width: 17px; height: 17px; }

@media (max-width: 780px) {
  .srd-modal-panel { grid-template-columns: 1fr; }
  .srd-modal-aside { padding: 1.6rem 1.4rem; }
  .srd-modal-aside .aside-extra { display: none; }
}

/* Thank-you state */
.form-success { text-align: center; padding: 1.5rem 0; }
.form-success .tick {
  width: 68px; height: 68px; margin: 0 auto 1.15rem;
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #d8f3e3, #b8e0c8);
  color: #1b6640;
  animation: pop .45s var(--ease);
}
.form-success .tick svg { width: 32px; height: 32px; stroke-width: 2.4; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===========================================================================
   Sticky conversion bar (mobile) + floating button (desktop)
   ========================================================================= */

.sticky-bar {
  position: fixed; inset: auto 0 0 0; z-index: 1050;
  display: none;
  background: rgba(255, 253, 249, .97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -6px 24px -12px rgba(58, 26, 8, .35);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-bar-inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.sticky-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .22rem;
  padding: .7rem .4rem calc(.7rem);
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  color: var(--ink);
  min-height: 60px;
  border-right: 1px solid var(--hairline);
}
.sticky-bar a:last-child { border-right: 0; }
.sticky-bar a svg { width: 20px; height: 20px; }
.sticky-bar .is-call { color: var(--maroon); }
.sticky-bar .is-wa   { color: #16803c; }
.sticky-bar .is-enq  { background: linear-gradient(135deg, var(--saffron), var(--saffron-deep)); color: #fff; }

@media (max-width: 900px) {
  .sticky-bar { display: block; }
  body { padding-bottom: 62px; }
}

.float-enquire {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1045;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--saffron), var(--saffron-deep));
  color: #fff; font-size: .9rem; font-weight: 600;
  border: 0; cursor: pointer;
  box-shadow: 0 18px 40px -14px rgba(185, 86, 26, .68);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.float-enquire::before {
  content: ""; position: absolute; inset: -5px; border-radius: 999px;
  border: 1px solid rgba(217, 114, 42, .4);
  animation: haloPulse 2.6s var(--ease) infinite;
}
@keyframes haloPulse {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}
.float-enquire:hover { transform: translateY(-3px); color: #fff; }
.float-enquire svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .float-enquire { display: none; } }

.float-wa {
  position: fixed; right: 1.5rem; bottom: 5.4rem; z-index: 1045;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 14px 30px -12px rgba(37, 211, 102, .8);
  transition: transform .25s var(--ease);
}
.float-wa:hover { transform: translateY(-3px) scale(1.05); color: #fff; }
.float-wa svg { width: 26px; height: 26px; }
@media (max-width: 900px) { .float-wa { display: none; } }

/* ===========================================================================
   Project detail page
   ========================================================================= */

/* Dividers are drawn as inset shadows on each cell rather than as a 1px grid
   gap, so a part-filled last row does not leave a grey rectangle behind. */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.spec-item {
  padding: 1.25rem 1.35rem;
  box-shadow: inset -1px -1px 0 var(--hairline);
}
.spec-item dt {
  font-size: .71rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .35rem;
}
.spec-item dd {
  margin: 0; font-family: var(--font-display); font-size: 1.14rem; font-weight: 600; color: var(--charcoal);
  line-height: 1.3;
}

.distance-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .55rem; }
.distance-row {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.distance-row:hover { border-color: var(--hairline-gold); transform: translateX(3px); }
.distance-row .ico {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: var(--gold-pale); color: var(--saffron-deep);
}
.distance-row .ico svg { width: 18px; height: 18px; }
.distance-row .label { flex: 1; font-size: .92rem; font-weight: 500; }
.distance-row .value { text-align: right; }
.distance-row .value b { display: block; font-size: .93rem; color: var(--maroon); font-weight: 600; }
.distance-row .value span { font-size: .73rem; color: var(--muted); }

/* The rate table never crushes — below this width .table-wrap scrolls instead. */
.price-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .93rem; }
.price-table th {
  text-align: left; padding: .8rem 1rem;
  font-size: .71rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--hairline);
}
.price-table td { padding: .95rem 1rem; border-bottom: 1px solid var(--hairline); }
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:hover { background: var(--cream); }
.price-table .size { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--charcoal); }
.table-wrap {
  overflow-x: auto;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.avail-tag { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 999px; }
.avail-tag.is-available { background: #eaf6e2; color: #2c6b23; }
.avail-tag.is-few-left  { background: #fceceb; color: #a3211f; }
.avail-tag.is-sold-out  { background: #efece9; color: #6a5f56; }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q {
  width: 100%; text-align: left;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  padding: 1.2rem 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; color: var(--charcoal);
  line-height: 1.4;
}
.faq-q:hover { color: var(--saffron-deep); }
.faq-q .marker {
  flex: none; width: 26px; height: 26px; margin-top: .1rem;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--hairline-gold); color: var(--saffron-deep);
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.faq-q .marker svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.faq-item.is-open .faq-q .marker { background: var(--saffron); border-color: var(--saffron); color: #fff; }
.faq-item.is-open .faq-q .marker svg { transform: rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a-inner { padding: 0 0 1.35rem; color: var(--ink-soft); font-size: .96rem; max-width: 72ch; }

/* Sticky enquiry rail on project pages */
.project-layout { display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.project-rail { position: sticky; top: 100px; }
@media (max-width: 1080px) {
  /* minmax(0, 1fr), not 1fr — a bare 1fr keeps min-width:auto, and the Swiper
     inside this column then sizes itself from a column that is sizing itself
     from the Swiper. That loop blew the page out to Chrome's layout ceiling. */
  .project-layout { grid-template-columns: minmax(0, 1fr); }
  .project-rail { position: static; }
}

.rail-card {
  background: var(--ivory);
  border: 1px solid var(--hairline-gold);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-md);
}
.rail-card h3 { font-size: 1.28rem; margin-bottom: .35rem; }
.rail-advisor { display: flex; align-items: center; gap: .85rem; padding: 1rem 0 0; margin-top: 1.15rem; border-top: 1px solid var(--hairline); }
.rail-advisor img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center 15%; border: 2px solid var(--gold-pale); }

/* Map */
.map-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  background: var(--cream-deep);
  aspect-ratio: 16 / 9;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .map-frame { aspect-ratio: 4 / 3; } }

/* ===========================================================================
   CTA band
   ========================================================================= */

.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 62%, #24080f 100%);
  color: #f4e9de;
  isolation: isolate;
}
/* Faint jaali-inspired lattice, drawn in CSS so it costs no request. */
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16;
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 22px, rgba(224, 191, 107, .5) 22px 23px),
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(224, 191, 107, .5) 22px 23px);
  mask-image: radial-gradient(ellipse at 78% 25%, #000 0%, transparent 62%);
  -webkit-mask-image: radial-gradient(ellipse at 78% 25%, #000 0%, transparent 62%);
}
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: rgba(244, 233, 222, .82); max-width: 56ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.85rem; }

/* ===========================================================================
   Philosophy quote band
   The one place on the site that speaks in the company's own voice, so it is
   given a whole band and nothing else competes with it.
   ========================================================================= */

.quote-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--maroon-deep) 0%, var(--maroon) 46%, #6d1c2e 100%);
  color: #f6ece1;
  text-align: center;
  padding-block: clamp(3.25rem, 8vw, 6rem);
}

/* Jaali lattice, drawn in CSS so it costs no request. */
.quote-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .15;
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 24px, rgba(224, 191, 107, .55) 24px 25px),
    repeating-linear-gradient(-45deg, transparent 0 24px, rgba(224, 191, 107, .55) 24px 25px);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 72%);
}

/* A warm sunrise wash behind the words. */
.quote-band::after {
  content: ""; position: absolute; inset: auto 0 -55% 0; height: 110%; z-index: -1;
  background: radial-gradient(ellipse at 50% 100%, rgba(224, 145, 63, .38), transparent 62%);
}

.quote-band .shell { position: relative; }

/* Krishna's flute, the motif from the logo, as a divider above the quote. */
.quote-flute {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.quote-flute i {
  display: block; height: 1px; width: clamp(38px, 9vw, 92px);
  background: linear-gradient(90deg, transparent, var(--gold-light));
}
.quote-flute i + i { background: linear-gradient(90deg, var(--gold-light), transparent); }
.quote-flute svg {
  width: clamp(78px, 13vw, 104px);
  height: auto;
  color: var(--gold-light);
  flex: none;
}

.quote-hi {
  font-family: var(--font-hindi);
  font-size: clamp(1.5rem, 4.4vw, 3.1rem);
  line-height: 1.62;                 /* Devanagari needs headroom for matras */
  font-weight: 400;
  color: #fff;
  margin: 0 auto clamp(1.25rem, 2.6vw, 1.9rem);
  max-width: 22ch;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .3);
}

.quote-en {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.02rem, 1.9vw, 1.42rem);
  line-height: 1.5;
  color: var(--gold-light);
  margin: 0 auto;
  max-width: 46ch;
  text-wrap: balance;
}

.quote-attrib {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(246, 236, 225, .62);
}
.quote-attrib::before {
  content: ""; width: 26px; height: 1px; background: var(--gold);
}

@media (max-width: 560px) {
  .quote-hi { max-width: 100%; }
  .quote-en { max-width: 100%; }
}

/* ===========================================================================
   Footer
   ========================================================================= */

.site-footer { background: var(--charcoal); color: #b9aa9c; font-size: .92rem; }
.footer-top { padding-block: clamp(3rem, 6vw, 4.75rem); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.55fr repeat(3, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
@media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { display: inline-flex; align-items: center; margin-bottom: 1.15rem; }
.footer-brand img {
  height: 82px; width: auto;
  /* Same halo trick as the header — the footer ground is near-black. */
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, .9))
    drop-shadow(0 0 10px rgba(255, 255, 255, .38));
}
.footer-about { color: #9d8f81; max-width: 40ch; line-height: 1.7; }

.footer-title {
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.15rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-links a { color: #b9aa9c; font-size: .91rem; }
.footer-links a:hover { color: var(--gold-light); padding-left: 3px; }

.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; }
.footer-contact li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.55; }
.footer-contact svg { width: 17px; height: 17px; flex: none; margin-top: .22rem; color: var(--gold); }
.footer-contact a { color: #d6c9bc; }
.footer-contact a:hover { color: var(--gold-light); }

.footer-social { display: flex; gap: .55rem; margin-top: 1.5rem; }
.footer-social a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  color: #cfc2b5;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--maroon-deep); }
.footer-social svg { width: 17px; height: 17px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-block: 1.35rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  font-size: .82rem; color: #8b7d70;
}
.footer-bottom a { color: #a6978a; }
.footer-bottom a:hover { color: var(--gold-light); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.15rem; }

.footer-disclaimer {
  background: rgba(0, 0, 0, .32);
  padding-block: 1.1rem;
  font-size: .76rem; line-height: 1.6; color: #7d7064;
}

/* ===========================================================================
   Scroll-reveal animations (progressive enhancement — see main.js)
   ========================================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="zoom"]  { transform: scale(.95); }

/* On a narrow screen a column already fills the width, so sliding it sideways
   pushes it past the edge until it reveals. Slide up instead. */
@media (max-width: 900px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(22px); }
}

/* Never let animation get in the way of reading. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-media img { animation: none; }
}

/* If JS never runs, content must still be visible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ===========================================================================
   Scrollbars — brand-tinted, in both the standards syntax and WebKit's
   ========================================================================= */

/* Firefox / spec */
html {
  scrollbar-color: var(--gold) var(--cream-deep);
  scrollbar-width: thin;
}

/* Chromium, Edge, Safari */
::-webkit-scrollbar { width: 12px; height: 12px; }

::-webkit-scrollbar-track {
  background: var(--cream-deep);
  border-left: 1px solid rgba(184, 145, 47, .18);
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border: 3px solid var(--cream-deep);   /* inset, so the thumb reads as a pill */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--saffron), var(--saffron-deep));
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active { background: var(--maroon); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: var(--cream-deep); }

/* Inner scrollers on dark ground get a dark track so they do not glare. */
.bg-deep ::-webkit-scrollbar-track,
.bg-maroon ::-webkit-scrollbar-track,
.srd-modal ::-webkit-scrollbar-track { background: rgba(0, 0, 0, .25); border-left: 0; }
.bg-deep ::-webkit-scrollbar-thumb,
.bg-maroon ::-webkit-scrollbar-thumb,
.srd-modal ::-webkit-scrollbar-thumb { border-color: rgba(0, 0, 0, .25); }

/* Horizontal scrollers inside content (rate tables, wide blocks) sit slimmer. */
.table-wrap::-webkit-scrollbar { height: 9px; }

/* ===========================================================================
   Responsive refinements
   Sizes and spacing that need a nudge below the main breakpoints, gathered
   here rather than scattered so they are easy to review together.
   ========================================================================= */

@media (max-width: 900px) {
  /* Buttons that sit side by side should fill the row rather than stack ragged. */
  .hero-actions .btn-srd,
  .cta-actions .btn-srd { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 560px) {
  :root { --gutter: 1.15rem; }

  .hero-actions, .cta-actions { display: grid; gap: .6rem; }
  .hero-actions .btn-srd, .cta-actions .btn-srd { width: 100%; }

  /* Card footers stop fighting for one line. */
  .project-card-foot { flex-direction: column; align-items: stretch; gap: .85rem; }
  .card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

  .btn-lg-srd { padding: .95rem 1.4rem; font-size: .93rem; }

  /* Breathing room, trimmed — long pages otherwise become a lot of scrolling. */
  .section { padding-block: clamp(2.75rem, 9vw, 4rem); }
  .cta-band { padding: 2rem 1.35rem; border-radius: var(--r-lg); }
  .form-card, .rail-card { padding: 1.25rem 1.1rem; }

  .spec-item { padding: 1rem 1.1rem; }
  .spec-item dd { font-size: 1.05rem; }

  .filter-bar { gap: .4rem; }
  .filter-btn { padding: .45rem .9rem; font-size: .8rem; }

  /* Tap targets: 44px minimum on anything a thumb has to hit. */
  .nav-toggle, .team-social a, .footer-social a { min-width: 44px; min-height: 44px; }
}

@media (max-width: 820px) {
  .hero-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .hero-trust { grid-template-columns: minmax(0, 1fr); }
  .hero-trust dt { font-size: 1.4rem; }
  .card-actions { grid-template-columns: 1fr; }
}

/* Landscape phones: the full-height hero would leave no room to read. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero-inner { padding-block: 6rem 3rem; }
  .hero-trust { display: none; }
}

/* ===========================================================================
   Small utilities
   ========================================================================= */

.text-centre { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.prose p { max-width: 72ch; color: var(--ink-soft); font-size: 1.01rem; }
.prose h2, .prose h3 { margin-top: 2.25rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { color: var(--ink-soft); max-width: 72ch; padding-left: 1.25rem; }
.prose li { margin-bottom: .5rem; }

/* Editorial note inside a page body — used for "replace before launch" flags. */
.body-note {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--gold);
  background: var(--gold-pale);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .92rem;
  color: #6d551a;
  max-width: 72ch;
}