/* ============================================================
   THREE ICC — DESKTOP LANDING PAGE
   Built to match: home landing page.psd / home screen menu.psd
   (psd/actual-size/) and Design Reference Sheet.docx (v2).

   Font: Fira Sans (not "Firo" — easy to misread on the ref sheet).
   It's a free, open-source Google Font (SIL Open Font License), so
   the @import below is not a placeholder — it's a legitimate,
   permanent way to load it and needs no upload from you. The files
   already sitting in assets/fonts/Fira_Sans/ are only needed if we
   later choose to self-host instead of calling Google's CDN (e.g.
   to drop one external request) — optional, not required for
   accuracy. Either path renders the identical typeface.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');

:root {
  /* ---- Design Reference Sheet v2 values ---- */
  --bg-cream: #FFF4EC;
  --text-black: #000000;
  --white: #FFFFFF;
  --menu-accent: #8D6A3E;      /* additional color for menu */
  --menu-highlight: #E4CA9F;   /* additional color for menu highlight */

  /* ---- Derived, for translucent overlay panels (sampled from PSD) ---- */
  --menu-panel-bg: rgba(37, 33, 32, 0.93);
  --submenu-panel-bg: rgba(97, 84, 79, 0.93);

  /* ---- Frame ---- */
  --frame-width: 1440px;
  --header-height: 96px;
  --gutter: 40px;

  /* ---- Type scale (Fira Sans, at 1440px desktop frame) ---- */
  --fs-header: 84px;   /* general landing-page header size, per design reference sheet */
  --fs-ticker: clamp(30px, 3.6vw, 55px); /* scales down on tablets/small laptops so "x BOMBAY REALTY" + the longest word fit */   /* hero ticker specifically — sized down from --fs-header so the
                           longest word ("GATED DEVELOPMENT") still fits with room to
                           spare, keeping every word the SAME size (no per-word shrink). */
  --fs-subhead: 32px;
  --fs-body: 18px;
  --fs-bullets: 15px;
  --fs-button: 18px;
  --fs-menu-item: 16px; /* NOT explicitly in ref sheet — estimated from PSD layout, confirm */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* overflow-x: clip (not hidden): with hidden on both html and body, body becomes its
   own scroll container and desktop wheel/trackpad scrolling can stall. clip trims
   sideways overflow without creating a scroller; hidden stays as the old-browser fallback. */
html, body {
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: 'Fira Sans', Arial, sans-serif;
  color: var(--text-black);
  background: var(--white);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ============================================================
   HEADER / MASTHEAD
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--bg-cream);
  z-index: 100;
}

.header-inner {
  max-width: var(--frame-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Logo & icon SVGs had a lot of built-in empty padding inside their
   own viewBox (e.g. the hamburger's 3 lines only filled ~34% of its
   canvas height) — that's what was making them render smaller than
   the pixel sizes in the design reference sheet even though the CSS
   box sizes were technically correct. Fixed by tightening each SVG's
   viewBox to its actual artwork bounds (see assets/images/.../*.svg);
   these box sizes now render at the true spec dimensions. */
.logo img {
  height: 74px; /* per design reference sheet */
  width: auto;
}

.hamburger {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;  /* 60px per design reference sheet, squeezed 30% narrower per client request — height unchanged, NOT a proportional scale-down */
  height: 40px; /* unchanged from the design reference sheet */
  display: flex;
  align-items: center;
  justify-content: center;
}
.hamburger img {
  width: 100%;
  height: 100%;
  /* fill (not contain) so the icon itself gets squeezed narrower along
     with its box — a true horizontal squeeze of the artwork, not just
     a smaller box with the same-shaped icon centered inside it */
  object-fit: fill;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.hamburger:hover img { opacity: 0.75; }
/* Opens rotated 90° — a nod to the "3" in Three ICC */
.hamburger.is-open img { transform: rotate(90deg); }

.header-contact {
  display: flex;
  align-items: center;
  gap: 28px;
}

.contact-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px;
}
.contact-icon img { width: 20px; height: 20px; object-fit: contain; } /* per design reference sheet — now fills correctly */
.contact-underline {
  position: absolute;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--menu-accent);
  opacity: 0;
  transition: opacity .2s ease;
}
.contact-icon:hover img { opacity: 0.75; }
.contact-icon:hover .contact-underline,
.contact-icon:focus-visible .contact-underline { opacity: 1; }

/* Mobile-only fixed call/email bar — hidden by default here; the mobile
   breakpoint below turns it into the visible fixed bar. Without this
   default-hidden rule it rendered as a plain block element above the
   hero on desktop, at the icons' unconstrained native size — that was
   what was pushing the hero video/ticker down. */
.bottom-bar { display: none; }

/* ============================================================
   MAIN MENU PANEL (hamburger toggles this)
   Positioned centered under the hamburger, matching the PSD.
   ============================================================ */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 90;
}
.menu-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.main-menu {
  position: fixed;
  top: var(--header-height);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  width: 253px;
  max-height: calc(100vh - var(--header-height) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain; /* scrolling to the end of the menu list doesn't carry on into the page */
  background: var(--menu-panel-bg);
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease;
  padding: 28px 0;
}
.main-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.main-menu-list {
  display: flex;
  flex-direction: column;
}

.main-menu-item {
  position: relative;
  cursor: pointer;
}
/* The label + arrow row. Kept separate from the accordion <ul> below it
   (a plain sibling, not a member of this flex row) so the collapsed
   accordion can't quietly steal horizontal space from the label — see
   main.js for why that split exists. */
.menu-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 27px;   /* row height ≈26.5px, measured off the PSD */
}
.main-menu-item a {
  flex: 1;   /* fills the row (not just its own text width) so the whole
                row — including the gap before the arrow — is one tap
                target, not just the label text itself */
  font-size: var(--fs-menu-item);
  font-weight: 300;    /* light in native/default state, per PSD */
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  transition: color .2s ease, font-weight .2s ease;
}
.main-menu-item .menu-arrow {
  font-size: 11px;
  color: var(--white);
  margin-left: 8px;
  transition: color .2s ease;
}
/* Scoped to > .menu-row-head a (not a plain descendant "a") — otherwise
   this also matches the nested .sub-menu-inline li a links on hover/tap,
   which was overriding the light-weight/white submenu styling and made
   the mobile accordion's submenu items render bold and gold. */
.main-menu-item:hover > .menu-row-head a,
.main-menu-item.active > .menu-row-head a {
  color: var(--menu-highlight);
  font-weight: 500;    /* medium on hover/active */
}
.main-menu-item:hover > .menu-row-head .menu-arrow,
.main-menu-item.active > .menu-row-head .menu-arrow {
  color: var(--menu-highlight);
}

/* Built for the mobile accordion (see main.js) but present in the DOM
   at every width — hidden by default here, the mobile breakpoint below
   is what turns it into a visible, expandable accordion row. Without
   this default-hidden rule it would render full-height on desktop too,
   underneath the flyout panel. */
.sub-menu-inline { display: none; }

/* Submenu flyout — appears to the right of the selected row.
   Positioned via JS (fixed, not nested in .main-menu) so it isn't
   clipped by the menu panel's own scroll container. */
.sub-menu {
  position: fixed;
  width: max-content;   /* auto-fits its longest item — PSD widths vary per
                            submenu (270-303px) instead of one fixed width,
                            which is what was forcing items like "Private
                            Internal Roads" to wrap onto a second line */
  max-width: 420px;
  background: var(--submenu-panel-bg);
  padding: 28px 27px;   /* matches main panel's top/bottom padding, per PSD */
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, top .25s ease;
  z-index: 96;
}
.sub-menu.open {
  opacity: 1;
  visibility: visible;
}
.sub-menu-list li {
  padding: 5px 0;   /* row height ≈26.5px, matches main menu rows */
}
.sub-menu-list a {
  font-size: var(--fs-menu-item);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--white);
  white-space: nowrap;
  transition: color .2s ease, font-weight .2s ease;
}
.sub-menu-list a:hover {
  color: var(--menu-highlight);
  font-weight: 500;
}

/* ---- Level-2 flyout (desktop only) ----
   Used solely by Three ICC's 5 nested children (The Residences, The
   Apartments, Floor Plans, The Privileges, Partners) — see nav-data.js.
   A row inside #subMenu that itself has a submenu (a "child") gets an
   inline arrow; hovering/focusing that row opens #subMenu2 beside it,
   positioned in main.js off that row's own bounding rect rather than
   the main panel's, since it can appear at any row within #subMenu. */
.sub-menu-list li:has(.sub-menu-child-arrow) > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;   /* without this the flex row only spans its own text+arrow
                    width, so justify-content:space-between had nowhere to
                    push the arrow to — it sat right next to the label
                    instead of aligned to the panel's right edge like the
                    main menu's arrows */
}
.sub-menu-child-arrow {
  font-size: 10px;
  opacity: 0.75;
}
/* Keeps the trigger row (e.g. "The Residences") lit in gold while its
   level-2 flyout is open, matching how the top-level item (e.g. "Three
   ICC") stays gold while ITS flyout is open. */
.sub-menu-child-item.active > a,
.sub-menu-child-item.active > a .sub-menu-child-arrow {
  color: var(--menu-highlight);
  font-weight: 500;
}
.sub-menu.sub-menu-lvl2 {
  /* identical panel treatment to the level-1 flyout — same background,
     padding, width behaviour — just a second instance positioned by
     openChildSubmenu() in main.js instead of openSubmenu(). */
}

/* ============================================================
   HERO / LANDING FRAME
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height));
  min-height: 600px;
  margin-top: var(--header-height);
  overflow: hidden;
  background: #22201f; /* shows briefly if video hasn't painted yet */
}

.hero-media {
  position: absolute;
  inset: 0;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}


/* ---- Ticker headline ----
   Fixed pivot layout: the "x" in "x ICC LIVING" sits at the exact
   horizontal center of the frame and never moves. "ICC LIVING"
   grows rightward from there; the changing ticker word is right-
   aligned against that same center point and grows LEFTWARD as
   longer words swap in, so its right edge never shifts either.
   Vertical position: top of the line sits at 66% of frame height.
------------------------------------------------------------------ */
.hero-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 66%;
  z-index: 5;
}

.hero-ticker {
  position: relative;
  width: 100%;
  height: 1em;
  font-size: var(--fs-ticker);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}

/* Mask anchored to the right at dead center — width is shrink-to-fit,
   so it grows leftward as the word gets longer, right edge fixed. */
.ticker-word-mask {
  position: absolute;
  right: 50%;
  top: 0;
  bottom: 0;
  max-width: calc(50% - var(--gutter));
  padding-right: 0.2em;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ticker-word {
  font-style: italic;
  white-space: nowrap;
  display: inline-block;
  transform: translateY(0);
  transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease;
}
.ticker-word.swipe-out {
  transform: translateY(-110%);
  opacity: 0;
}
.ticker-word.swipe-in-prep {
  transform: translateY(110%);
  opacity: 0;
  transition: none;
}
.ticker-word.swipe-in {
  transform: translateY(0);
  opacity: 1;
}

/* Anchored to the left at dead center — its own left edge (the "x")
   is the fixed pivot point; "ICC LIVING" extends rightward from it. */
.ticker-static {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  padding-left: 0.2em;
  display: flex;
  align-items: center;
  gap: 0.22em;   /* explicit gap between "x" and "ICC LIVING" — a plain text
                    space collapses here since flex splits them into two
                    separate anonymous items */
  white-space: nowrap;
  font-style: normal;
  font-weight: 400;
}

/* Sits under the ticker typography, anchored to the SAME fixed pivot
   as everything else in this layout — the "x" of "x ICC LIVING" — not
   to the outer frame. Right edge is fixed at that pivot (right: 50%,
   identical anchor to .ticker-word-mask above); its length runs
   leftward from there, i.e. it's shortened/lengthened from the LEFT
   side only, same shrink direction as the changing ticker word. */
.hero-underline {
  position: absolute;
  right: 50%;
  top: calc(var(--fs-ticker) + 7px);   /* 7px below the ticker line — was
                                           22px, shifted up 15px per feedback */
  width: calc(50% - var(--gutter));
  height: 2px;
  background: var(--white);
}

/* ============================================================
   MOBILE (≤767px)
   Same HTML, same nav-data.js, same main.js — this block just
   re-lays-out the identical DOM. The one place behavior (not just
   layout) differs is the submenu: desktop opens a flyout beside the
   row (positioned by JS), mobile expands an accordion in place
   (no room for a second panel at this width). main.js picks between
   the two using matchMedia("(max-width: 767px)") at the moment
   someone taps/hovers a row, so resizing the window across this
   breakpoint just switches which behavior fires next — no reload,
   no separate build.
   ============================================================ */
@media (max-width: 767px) {

  :root {
    --header-height: 64px;
    --bottom-bar-height: 60px;
    --gutter: 20px;
    --fs-ticker: 30px;   /* mobile ticker word size — desktop's 55px is
                             sized for a single wide line; mobile stacks
                             3 short lines instead, so it can run larger
                             relative to screen width without overflowing */
  }

  /* ---- Header: logo + hamburger only, contact icons move to the
     fixed bottom bar below ---- */
  .header-contact { display: none; }
  .hamburger {
    position: static;
    transform: none;
  }
  .logo img { height: 40px; }

  /* ---- Fixed bottom bar (call / email) — thumb reach, always
     visible whether the menu is open or closed ---- */
  .bottom-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--bottom-bar-height);
    background: var(--bg-cream);
    border-top: 1px solid rgba(0,0,0,0.08);
    display: flex;
    z-index: 110;
  }
  .bottom-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bottom-bar a:active { background: rgba(141,106,62,0.08); }
  .bottom-bar img { width: 20px; height: 20px; }
  .bottom-bar-divider {
    width: 1px;
    margin: 14px 0;
    background: rgba(0,0,0,0.1);
  }

  /* ---- Main menu becomes a full-screen overlay, not a small
     centered panel — no room for the desktop treatment, and it's
     the standard mobile pattern anyway ---- */
  .main-menu {
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: var(--bottom-bar-height);
    width: auto;
    max-height: none;
    transform: none;
    padding: 6px 0 24px;
  }
  .main-menu.open { transform: none; }

  .menu-row-head { padding: 13px 20px; }
  .main-menu-item a { font-size: 15px; }
  .main-menu-item .menu-arrow {
    /* Reused as the accordion chevron: rotates instead of a static ▶ */
    display: inline-block;
    transition: transform .25s ease, color .2s ease;
  }
  /* Child combinators (>) throughout: a plain descendant selector made an open
     "Three ICC" row also open (and rotate the arrows of) ALL its nested children */
  .main-menu-item.mobile-expanded > .menu-row-head .menu-arrow { transform: rotate(90deg); }
  /* Scoped to .menu-row-head's own label only (child combinator) — a plain
     descendant selector here also matched the nested .sub-menu-inline li a
     links (they're descendants of .main-menu-item.mobile-expanded too),
     which was overriding the light-weight/white submenu styling below and
     making the accordion's submenu items render bold and gold. */
  .main-menu-item.mobile-expanded > .menu-row-head a { color: var(--menu-highlight); font-weight: 500; }

  /* Desktop's beside-the-row flyout has nowhere to go at this width */
  .sub-menu { display: none; }

  /* Submenu instead renders INLINE inside each row (built once at
     page load by main.js, not lazily like the desktop flyout) and
     expands/collapses via max-height — the accordion. */
  .sub-menu-inline {
    display: block;
    max-height: 0;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    transition: max-height .35s ease;
  }
  .main-menu-item.mobile-expanded > .sub-menu-inline { max-height: 2000px; } /* 800 clipped Floor Plans/Privileges/Partners when Apartments was open */
  .sub-menu-inline li a {
    display: block;
    padding: 10px 20px 10px 34px;
    font-size: 13px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #ffffff;
  }
  .sub-menu-inline li a:active { color: var(--menu-highlight); }

  /* ---- Nested mobile accordion (Three ICC's 5 children) ----
     A .sub-menu-child-item is a full .main-menu-item row (row-head +
     arrow + its own .sub-menu-inline) living INSIDE Three ICC's
     .sub-menu-inline, one indent level deeper. Reuses every mechanic
     already built for the top level — toggleMobileSubmenu() treats
     each nesting level as its own independent single-open group (see
     main.js), so expanding "The Residences" doesn't collapse "Three
     ICC" itself, and expanding one child collapses only its siblings. */
  .sub-menu-child-item { background: rgba(0,0,0,0.12); }
  .sub-menu-child-item .menu-row-head { padding: 10px 20px 10px 34px; }
  .sub-menu-child-item > .menu-row-head a { font-size: 13px; padding: 0; } /* row-head already indents 34px; the inherited sub-link padding pushed these past their own children */
  .sub-menu-child-item.mobile-expanded > .menu-row-head .menu-arrow { transform: rotate(90deg); }
  .sub-menu-child-item.mobile-expanded > .menu-row-head a { color: var(--menu-highlight); font-weight: 500; }
  .sub-menu-inline-lvl2 {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .sub-menu-child-item.mobile-expanded > .sub-menu-inline-lvl2 { max-height: 1200px; }
  .sub-menu-inline-lvl2 li a { padding-left: 48px; font-size: 12px; }
  /* "Go to <Page>" — first row of each mobile accordion (built in main.js):
     gold with an arrow so it reads as "open this page", not another section */
  .sub-menu-inline li.sub-menu-goto > a { color: var(--menu-highlight); font-weight: 500; }
  .sub-menu-inline li.sub-menu-goto > a::after { content: " \2192"; }

  /* ---- Hero: leave room for the bottom bar ---- */
  .hero { height: calc(100vh - var(--header-height) - var(--bottom-bar-height)); }

  /* ---- Ticker: 3 stacked lines (word / x / ICC LIVING) instead of
     desktop's single horizontal line — "x" stays dead-center of the
     screen either way, same pivot idea, just running vertically. ---- */
  .hero-ticker {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ticker-word-mask {
    position: static;
    max-width: 100%;
    width: 100%;
    height: 1.15em;
    padding-right: 0;
    justify-content: center;
  }
  .hero-underline {
    position: static;
    width: 184px;   /* 46px + 300% = 4x — mobile-only widening, desktop untouched */
    height: 1.5px;
    margin: 6px 0 10px;
  }
  .ticker-static {
    position: static;
    padding-left: 0;
    flex-direction: column;
    gap: 2px;
  }
  .ticker-x { font-size: 22px; }
  .ticker-icc-living { font-size: 30px; letter-spacing: 0.02em; } /* matched to --fs-ticker (30px) so ICC LIVING reads the same size as the swapping ticker word */
}

/* ============================================================
   INSIDE PAGES — shared scaffold for every non-homepage page
   (ICC Living, Three ICC, Location, etc). Same header/nav/JS as
   the homepage; this block only styles what's unique to inside
   pages: a static masthead placeholder, a carousel placeholder,
   and the lorem-ipsum content sections built from each menu
   item's submenu array — one section per submenu entry, id'd by
   a slug so the nav can deep-link/scroll straight to it.
   Content is intentionally lorem ipsum + labelled placeholder
   boxes at this stage — swap in real photography/copy per page
   when ready, the structure won't need to change.
   ============================================================ */

body.inside-page { background: var(--bg-cream); }

.page-masthead {
  position: relative;
  margin-top: var(--header-height);
  height: 60vh;
  min-height: 420px;
  max-width: var(--frame-width);
  margin-left: auto;
  margin-right: auto;
}
.masthead-placeholder {
  position: absolute;
  inset: 0;
  background: var(--bg-cream);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
/* Dark gradient scrim behind the title so it stays legible over any
   photo, bright or dark — real photography varies in brightness in a
   way the old flat placeholder box never did. */
.masthead-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.18) 35%,
    rgba(0, 0, 0, 0) 65%
  );
}
.page-masthead-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  text-align: center;
  margin-bottom: 56px;
}
.placeholder-label {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--menu-accent);
  white-space: nowrap;
  background: rgba(255, 244, 236, 0.85);
  padding: 4px 12px;
  border-radius: 2px;
}
/* ---- Reusable placeholder image — sits inside any placeholder box
   (masthead or carousel slide) until real photography is supplied ---- */
.placeholder-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ---- Carousel placeholder — one per page, edge-to-edge ---- */
.page-carousel {
  position: relative;
  width: 100%;
  max-width: var(--frame-width);
  margin: 0 auto;
  overflow: hidden;
}
.carousel-track {
  display: flex;
  transition: transform .45s ease;
}
.carousel-slide {
  flex: 0 0 100%;
  height: 46vh;
  min-height: 320px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-cream);
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,244,236,0.85);
  border: 1px solid var(--menu-highlight);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease;
  z-index: 2;
}
.carousel-arrow:hover { background-color: rgba(228,202,159,0.25); }
.carousel-prev { left: var(--gutter); }
.carousel-next { right: var(--gutter); }
.carousel-arrow svg { display: block; }

.carousel-dots {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(141,106,62,0.35);
  border: none;
  padding: 0;
  cursor: pointer;
}
.carousel-dot.is-active { background: var(--menu-accent); }

/* ---- Content sections (one per submenu item) ---- */
.page-section {
  scroll-margin-top: calc(var(--header-height) + 24px);
  max-width: 760px;
  margin: 0 auto;
  padding: 64px var(--gutter);
}
.page-section + .page-section {
  border-top: 1px solid rgba(141,106,62,0.15);
}
.page-subhead {
  font-size: var(--fs-subhead);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.page-body {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(0,0,0,0.82);
}
.page-body + .page-body { margin-top: 16px; }

/* ---- Real-copy "sub points" groups (client's Concept Flow doc) —
   a short category label + its own line of copy, laid out as a
   2-column grid on desktop. ---- */
.page-bullet-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  margin-top: 32px;
}
.bullet-group-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--menu-accent);
  margin-bottom: 6px;
}
.bullet-group-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(0,0,0,0.82);
}
.bullet-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bullet-group-list li {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(0,0,0,0.82);
  padding-left: 16px;
  position: relative;
}
.bullet-group-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  background: var(--menu-accent);
  border-radius: 50%;
}

/* ---- Flat bullet list (single-column, no grouping) ---- */
.flat-bullet-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  columns: 2;
  column-gap: 40px;
}
.flat-bullet-list li {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(0,0,0,0.82);
  padding-left: 16px;
  position: relative;
  break-inside: avoid;
}
.flat-bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  background: var(--menu-accent);
  border-radius: 50%;
}
.flat-bullet-list.spec-list {
  columns: 1;
  max-width: 640px;
}
/* Keeps a bullet's "— X KM (~Y Min.)" distance clause from splitting
   across a line break — if the item wraps, the whole clause moves to
   the next line together instead of breaking mid-distance. */
.bullet-distance {
  white-space: nowrap;
}

/* ---- Distance list (place name / distance value rows) ---- */
.distance-list {
  margin-top: 28px;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.distance-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.distance-name {
  font-size: 15px;
  font-weight: 300;
  color: rgba(0,0,0,0.82);
}
.distance-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--menu-accent);
  white-space: nowrap;
  padding-left: 20px;
}

/* ---- Numbered pointer list (title + its own sub-list) ---- */
.pointer-list {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
}
.pointer-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-black);
  margin-bottom: 10px;
}
.pointer-title-tail {
  white-space: nowrap;
}
.pointer-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--menu-accent);
  color: var(--menu-accent);
  font-size: 12px;
  border-radius: 50%;
}
.pointer-block .flat-bullet-list {
  columns: 1;
  margin-top: 0;
}

/* ---- Company legacy timeline ---- */
.timeline {
  margin-top: 36px;
}
.timeline-era {
  margin-bottom: 32px;
}
.timeline-era-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--menu-accent);
  margin-bottom: 16px;
}
.timeline-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.timeline-item:last-child {
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.timeline-year {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-black);
}
.timeline-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(0,0,0,0.82);
  margin: 0;
}

/* ---- FAQ accordion ---- */
.faq-accordion {
  margin-top: 28px;
}
.faq-item {
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding: 20px 0;
}
.faq-question {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-black);
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: "+";
  float: right;
  color: var(--menu-accent);
  font-weight: 300;
  font-size: 20px;
}
.faq-item[open] .faq-question::after {
  content: "\2212";
}
.faq-answer {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
}
.faq-answer .bullet-group-title {
  font-size: 13px;
}

@media (max-width: 767px) {
  .page-masthead { height: 42vh; min-height: 280px; }
  .page-masthead-title { font-size: 26px; margin-bottom: 28px; }
  .carousel-slide { height: 32vh; min-height: 220px; }
  .carousel-arrow { width: 38px; height: 38px; }
  .carousel-prev { left: 12px; }
  .carousel-next { right: 12px; }
  .page-section { padding: 40px var(--gutter); }
  .page-subhead { font-size: 22px; }
  .page-body { font-size: 15px; }
  .page-bullet-groups { grid-template-columns: 1fr; gap: 20px; }
  .flat-bullet-list { columns: 1; }
  .pointer-list { grid-template-columns: 1fr; }
  .timeline-item { grid-template-columns: 1fr; gap: 4px; }
  .faq-answer { grid-template-columns: 1fr; }
}

/* ============================================================
   SITE FOOTER — one shared footer on every page (homepage +
   all 14 inside pages). Cream background + dark text/logo,
   matching every existing brand asset (logo-primary.svg and the
   call/mail icons are all dark-on-light artwork with no reversed
   variant supplied, so a dark footer would make them illegible —
   this keeps the same light system the header already uses).

   The sitemap column (#footerSitemap) is NOT hand-typed — main.js
   builds it straight from NAV_ITEMS in nav-data.js, the exact same
   source the hamburger menu itself renders from. That's what makes
   it "foolproof": add, rename or remove a page in nav-data.js and
   the footer sitemap updates on its own, on every page, with no
   separate list to keep in sync or forget to update.
   ============================================================ */
.site-footer {
  background: var(--bg-cream);
  border-top: 1px solid rgba(0,0,0,0.1);
}
.footer-top {
  max-width: var(--frame-width);
  margin: 0 auto;
  padding: 72px var(--gutter) 56px;
  display: grid;
  grid-template-columns: 0.9fr 1.6fr;
  gap: 48px;
}
.footer-logo { height: 48px; width: auto; }
.footer-tagline {
  margin-top: 20px;
  max-width: 320px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(0,0,0,0.7);
}
.footer-contact {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-black);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
}
.footer-contact a img { width: 15px; height: 15px; opacity: 0.75; }
.footer-contact a:hover { color: var(--menu-accent); }
.footer-cta {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 32px;
  border: 1px solid var(--menu-accent);
  color: var(--menu-accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}
.footer-cta:hover { background: var(--menu-accent); color: var(--white); }

.footer-sitemap {
  columns: 4;
  column-gap: 32px;
}
.footer-sitemap-col {
  break-inside: avoid;
  margin-bottom: 28px;
}
.footer-sitemap-heading {
  display: block;
  margin-bottom: 14px;
  color: var(--text-black);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-sitemap-heading:hover { color: var(--menu-accent); }
.footer-sitemap-children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-sitemap-children li { margin-bottom: 10px; }
.footer-sitemap-children a {
  color: rgba(0,0,0,0.65);
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
}
.footer-sitemap-children a:hover { color: var(--menu-accent); }

.footer-bottom {
  border-top: 1px solid rgba(0,0,0,0.1);
  padding: 22px var(--gutter);
  max-width: var(--frame-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copyright {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  color: rgba(0,0,0,0.55);
}
.footer-legal-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--menu-accent);
  text-decoration: none;
}
.footer-legal-link:hover { text-decoration: underline; }

.footer-rera {
  max-width: var(--frame-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 48px;
}
.footer-rera img {
  width: 100%;
  max-width: 450px; /* halved from 900px per client art changes 01/10/26 */
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .footer-top { grid-template-columns: 1fr; padding: 56px var(--gutter) 40px; gap: 40px; }
  .footer-sitemap { columns: 2; column-gap: 24px; }
  .footer-rera { padding: 0 var(--gutter) 32px; }
  .footer-rera img { max-width: 60%; } /* was 100% — halved-ish; kept slightly larger so the RERA numbers stay legible on phones */
  .footer-bottom { flex-direction: column; align-items: flex-start; padding-bottom: calc(22px + var(--bottom-bar-height)); }
}

/* Nested sub-points (e.g. the three lift types under "6 High-Speed Elevators…")
   — indented under their parent bullet with a smaller, hollow marker. */
.flat-bullet-list .sub-bullet-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 6px;
}
.flat-bullet-list .sub-bullet-list li {
  padding-left: 18px;
  margin-left: 6px;
}
.flat-bullet-list .sub-bullet-list li::before {
  width: 4px;
  height: 4px;
  top: 12px;
  background: transparent;
  border: 1px solid var(--menu-accent);
}


/* FAQ questions are <h3>s inside <summary> for a proper heading outline;
   keep them looking exactly like the old plain-text summaries. */
.faq-question h3 {
  display: inline;
  font: inherit;
  color: inherit;
}

/* ---- Footer offices (Sales + Corporate) — details from bombayrealty.in/contact-us ---- */
.footer-offices {
  max-width: var(--frame-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 48px;
}
.footer-office {
  font-style: normal;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(0,0,0,0.7);
}
.footer-office-label {
  display: block;
  margin-bottom: 10px;
  color: var(--text-black);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-office-map {
  display: block;
  width: fit-content;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--menu-accent);
  text-decoration: none;
}
.footer-office-map:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .footer-offices { grid-template-columns: 1fr; gap: 28px; }
}

/* Footer legal links (RERA & Disclaimer + Privacy Policy) */
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 24px; }

/* Screen-reader-only text (the homepage h1, the skip link). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Skip link appears for keyboard users on first Tab */
.skip-link.visually-hidden:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  clip: auto;
  background: var(--white);
  color: var(--text-black);
  outline: 2px solid var(--menu-accent);
}