/* ===========================================================
   HousingCorner — shared stylesheet for all project pages
   Every /projects/<slug>/index.html links to this one file,
   so a brand change here updates every listing at once.
   =========================================================== */

:root {
  --forest: #2F5D3A;
  --forest-soft: #5C7A4F;
  --terracotta: #C77E52;
  --sage: #8BA888;
  --cream: #F5F0E6;
  --cream-deep: #EDE6D6;
  --ink: #1F2A24;
  --stone: #8A7E6E;
  --shadow: 0 4px 24px rgba(31, 42, 36, 0.08);
  --radius: 14px;
  --radius-sm: 8px;
  --container: 1160px;
}

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

/* ===========================================================
   NO SIDEWAYS PAGE SCROLL
   -----------------------------------------------------------
   The page itself must never scroll left-right. Individual
   regions that genuinely need it — a wide table, the chip nav —
   scroll inside themselves.

   `overflow-x: clip` and NOT `hidden`. Both stop the overflow,
   but `hidden` turns the root into a scroll container, which
   silently breaks every `position: sticky` on the page — the
   header, the desktop rail. `clip` has no such side effect.
   =========================================================== */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  overflow-x: clip;
  /* a long unbroken string — maharera.maharashtra.gov.in, a RERA number —
     is otherwise enough on its own to widen the page on a small phone */
  overflow-wrap: anywhere;
  word-break: normal;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 0.4em; }
h3 { font-size: 1.2rem; margin-bottom: 0.25em; }

/* Grid and flex items refuse to shrink below their content by default, which
   is how a long table or a wide word ends up making the whole page scroll
   sideways — and a sideways-scrolling page drags fixed bars out of alignment. */
.phero__grid > *, .conn > *, .rates > *, .gallery--mixed > *,
.gallery__stack > *, .plangrid > *, .specs > *, .amen > *, .facts > *,
.price > *, .layout > * { min-width: 0; }
img, table { max-width: 100%; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
section { padding: clamp(48px, 6vw, 84px) 0; }
/* Anchor jumps must clear both sticky bars — the brand bar and the chip nav
   stacked under it — or the heading you jumped to sits hidden behind them. */
section[id] { scroll-margin-top: 118px; }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head p { color: var(--stone); font-size: 1.03rem; margin-top: 12px; }
.eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--forest-soft);
  padding: 6px 12px; border: 1px solid var(--sage); border-radius: 999px;
  background: rgba(139, 168, 136, 0.1);
}
.alt { background: var(--cream-deep); }

/* Sections get tabindex="-1" so an anchor jump also moves keyboard focus.
   Without this, browsers draw a focus ring around the whole section. */
[tabindex="-1"]:focus { outline: none; }


/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--radius-sm);
  font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--forest); color: var(--cream); }
.btn--primary:hover { background: #1F4429; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--accent { background: var(--terracotta); color: var(--cream); }
.btn--accent:hover { background: #B26A40; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--forest); border: 1.5px solid var(--forest); }
.btn--ghost:hover { background: var(--forest); color: var(--cream); }
.btn--whatsapp { background: #25D366; color: #fff; }
.btn--whatsapp:hover { background: #1DAE55; transform: translateY(-1px); box-shadow: var(--shadow); }

/* ===== Nav ===== */
/* The brand bar and the chip nav travel together as one sticky header. Giving
   the chips their own `top` offset meant guessing the bar's height, and a few
   pixels out shows as a gap or an overlap on small screens. */
.stickyhead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 240, 230, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}
.nav {
  background: transparent;
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(139, 168, 136, 0.25);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; max-width: var(--container); margin-inline: auto;
}
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__brand svg { height: 34px; width: auto; }
.nav__brand-text {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem;
  font-weight: 500; color: var(--ink); letter-spacing: -0.02em;
}
.nav__links { display: flex; gap: 24px; align-items: center; }
.nav__links a { font-size: 0.92rem; font-weight: 500; }
.nav__links a:hover { color: var(--forest); }
@media (max-width: 860px) { .nav__links { display: none; } }

/* ===== Section chips =====
   One section nav for every screen size, pinned under the brand bar from the
   moment the page loads. On desktop the ten chips fit the container; on narrow
   screens the row scrolls sideways, which is the pattern people already know
   from every app on their phone. Because this carries the sections, the top nav
   is left holding only the brand and the CTA. */
.chipnav {
  display: block;
  background: transparent;
  border-top: 1px solid rgba(139, 168, 136, 0.22);
}
.chipnav__scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 10px 24px;
  max-width: var(--container);
  margin-inline: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.chipnav__scroll::-webkit-scrollbar { display: none; }
.chipnav a {
  flex: none;
  scroll-snap-align: start;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(139, 168, 136, 0.55);
  background: var(--cream);
  color: var(--forest);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chipnav a:hover { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.chipnav a:active { background: var(--forest); color: var(--cream); }
@media (max-width: 860px) { .chipnav__scroll { padding: 10px 16px; } }

/* On small screens a long button label may wrap rather than run off the edge. */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .conn__row { min-width: 0; }
  .conn__row span { min-width: 0; overflow-wrap: anywhere; }
}

/* ===========================================================
   DESKTOP SIDEBAR RAIL
   -----------------------------------------------------------
   Above 1024px the page becomes a content column plus a sticky
   rail. The rail holds the facts that decide a purchase and the
   CTA, so they stay on screen through 2,600 words rather than
   living only at the top and the bottom.

   Below 1024px the whole thing collapses: the rail drops out of
   the grid and renders as a normal card after the hero, and the
   mobile action bar takes over the CTA job.
   =========================================================== */
.layout { /* mobile-first: single column, rail flows inline */ }
.rail__card {
  background: var(--cream);
  border: 1px solid rgba(139, 168, 136, 0.5);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 2px 12px rgba(31, 42, 36, 0.05);
}
.rail__eyebrow {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stone);
}
.rail__price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem; color: var(--terracotta);
  margin-top: 6px; line-height: 1.1;
}
.rail__allin { margin-top: 6px; font-size: 0.84rem; color: var(--stone); line-height: 1.45; }
.rail__facts { list-style: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(139,168,136,0.35); }
.rail__facts li {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 7px 0; font-size: 0.86rem; color: var(--stone);
}
.rail__facts b { color: var(--forest); font-weight: 600; text-align: right; }
.rail__cta { display: grid; gap: 9px; margin-top: 18px; }
.rail__cta .btn { font-size: 0.86rem; }
.rail__cta .btn { justify-content: center; padding: 12px 16px; font-size: 0.9rem; }
.rail__form { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(139,168,136,0.35); }
.rail__form label {
  display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 5px;
}
.rail__form input {
  width: 100%; padding: 10px 12px; margin-bottom: 11px;
  border: 1px solid rgba(139,168,136,0.6); border-radius: var(--radius-sm);
  background: #fff; font-family: inherit; font-size: 0.9rem; color: var(--ink);
}
.rail__form input:focus { outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest); }
.rail__note { margin-top: 10px; font-size: 0.72rem; color: var(--stone); line-height: 1.5; }
.rail__rera { margin-top: 14px; font-size: 0.68rem; letter-spacing: 0.09em; color: var(--stone); }

@media (min-width: 1025px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: 40px;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
    align-items: start;
  }
  /* sections inside the content column lose their own container width */
  .layout__main > section > .container { padding-inline: 0; max-width: none; }
  .layout__main > section { padding: clamp(40px, 4.5vw, 64px) 0; }
  /* full-bleed tinted bands would break the grid, so they become inset panels */
  .layout__main > section.alt {
    background: transparent;
    border-top: 1px solid rgba(139, 168, 136, 0.3);
  }
  .rail {
    position: sticky;
    top: 122px;               /* clears the brand bar and the chip nav */
    max-height: calc(100vh - 142px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
@media (max-width: 1024px) {
  /* The rail sits after the content in the DOM, so in a single column it would
     land at the very bottom — below the enquiry section that already does its
     job. Everything it holds is covered elsewhere on narrow screens: the hero
     fact tiles carry price, carpet and possession, and the fixed action bar
     carries the CTA. So it simply does not render. */
  .rail { display: none; }
}

/* ===== Floating WhatsApp =====
   Only used on pages that have no action bar of their own — the projects index.
   Project detail pages drop the element entirely: the action bar covers mobile
   and the sidebar rail covers desktop, and a bubble on top of either just
   overlaps the button underneath it. */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(31,42,36,0.25);
  transition: transform 0.15s ease;
}
.wa-float:hover { transform: scale(1.06); }

/* ===== Mobile action bar =====
   The floating WhatsApp bubble is easy to miss and says nothing about what
   happens if you tap it. A labelled bar that is always on screen is the single
   biggest conversion difference on a long listing page. */
.actionbar { display: none; }
@media (max-width: 860px) {
  .actionbar {
    display: grid;
    /* Two channels, equal weight. A caller and a messager are different people
       and neither should have to hunt for their option. */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    background: rgba(245, 240, 230, 0.97);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid rgba(139, 168, 136, 0.4);
    box-shadow: 0 -4px 20px rgba(31, 42, 36, 0.08);
  }
  .actionbar .btn { justify-content: center; padding: 13px 18px; }
  /* stop the bar covering the last of the page */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ===== Breadcrumb ===== */
.crumbs { padding: 18px 0 0; font-size: 0.82rem; color: var(--stone); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs a:hover { color: var(--forest); text-decoration: underline; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--sage); }

/* ===== Hero ===== */
.phero { padding-top: 28px; }
.phero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .phero__grid { grid-template-columns: 1fr; gap: 32px; } }
.phero h1 { margin: 16px 0 10px; }
.phero__loc { color: var(--stone); font-size: 1.05rem; }
.phero__lede { margin-top: 18px; color: var(--ink); font-size: 1.03rem; max-width: 52ch; }
.phero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.phero__rera {
  margin-top: 22px; font-size: 0.75rem; letter-spacing: 0.09em;
  color: var(--stone); text-transform: uppercase;
}
.phero__rera strong { color: var(--forest); letter-spacing: 0.09em; }

/* ===== Key facts strip =====
   The four numbers a buyer scans for before reading a word of prose. */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(139,168,136,0.3);
  border: 1px solid rgba(139,168,136,0.3); border-radius: var(--radius); overflow: hidden; margin-top: 44px; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.fact {
  background: var(--cream);
  padding: 22px 20px 20px;
  border-top: 3px solid var(--terracotta);
}
.fact__icon { color: var(--sage); margin-bottom: 10px; }
.fact strong { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 1.45rem; color: var(--forest); line-height: 1.1; }
.fact span { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--stone); line-height: 1.4; }

/* ===== Inline emphasis =====
   Highlights a figure inside running prose so the page can be skimmed. */
.hl {
  background: rgba(199, 126, 82, 0.14);
  box-shadow: 0 0 0 3px rgba(199, 126, 82, 0.14);
  border-radius: 3px;
  font-weight: 600;
  color: var(--ink);
}
.hl--green { background: rgba(139, 168, 136, 0.26); box-shadow: 0 0 0 3px rgba(139, 168, 136, 0.26); }

/* ===== Rate comparison =====
   Two numbers that measure different things, shown side by side rather than
   buried in a paragraph — this is the single most misunderstood figure in the
   whole listing, so it gets the most visual weight. */
.rates { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; margin: 28px 0 20px;
  border: 1px solid rgba(139,168,136,0.45); border-radius: var(--radius); overflow: hidden; background: var(--cream); }
@media (max-width: 700px) { .rates { grid-template-columns: 1fr; } }
.rate { padding: 26px 24px; }
.rate--alt { background: rgba(199, 126, 82, 0.07); }
.rate__label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.rate__figure { font-family: 'Fraunces', Georgia, serif; font-size: 2.1rem; color: var(--forest); margin-top: 8px; line-height: 1; }
.rate--alt .rate__figure { color: var(--terracotta); }
.rate__basis { margin-top: 10px; font-size: 0.87rem; color: var(--ink); line-height: 1.5; }
.rate__vs {
  display: flex; align-items: center; justify-content: center;
  padding: 0 18px; background: rgba(139,168,136,0.16);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest-soft);
}
@media (max-width: 700px) { .rate__vs { padding: 10px; } }

/* ===== Callout / disclosure boxes ===== */
.disclose__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--terracotta);
}
.disclose__head svg { flex: none; }
.disclose--warn { border-left-color: #B26A40; background: rgba(199, 126, 82, 0.05); }
.disclose--info { border-left-color: var(--sage); }
.disclose--info .disclose__head { color: var(--forest); }

/* ===== Connectivity bars =====
   A distance list is a column of numbers; bars make the shape readable. */
.conn__list li { position: relative; }
.conn__bar {
  display: block; height: 4px; border-radius: 2px;
  background: var(--sage); opacity: 0.55; margin-top: 8px;
}
.conn__row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }

/* ===== Spec headings with icons ===== */
.spec h3 { display: flex; align-items: center; gap: 9px; }
.spec h3 svg { flex: none; color: var(--terracotta); }

/* ===== Media / image slots =====
   Images are referenced by filename. Until the file exists the slot
   renders a branded placeholder instead of a broken-image icon. */
.media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--cream-deep); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 260px; padding: 28px;
  background: linear-gradient(140deg, rgba(47,93,58,0.09), rgba(139,168,136,0.16));
  border: 1px dashed var(--sage);
}
.media--empty::after {
  content: attr(data-label);
  font-size: 0.82rem; color: var(--forest-soft); letter-spacing: 0.06em; max-width: 28ch;
}
.media--hero { aspect-ratio: 4 / 3; }
.media--wide { aspect-ratio: 16 / 9; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--square { aspect-ratio: 1 / 1; }
/* Plans must never be cropped — a clipped dimension is a misleading dimension. */
.media--plan { aspect-ratio: 4 / 3; background: #fff; }
.media--plan img { object-fit: contain; }
.media--map { aspect-ratio: 8 / 5; background: #F3EFF0; }
.media--map img { object-fit: contain; }

/* Caption sits under any media slot. Used to mark renders as renders. */
.media-note {
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--stone);
}
.media-note b { color: var(--forest); font-weight: 600; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 800px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }

/* Mixed-ratio gallery: one tall portrait beside a stack of wider frames. */
.gallery--mixed { display: grid; grid-template-columns: 1fr 1.35fr; gap: 20px; align-items: start; }
@media (max-width: 800px) { .gallery--mixed { grid-template-columns: 1fr; } }
.gallery__stack { display: grid; gap: 20px; }

.plangrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 760px) { .plangrid { grid-template-columns: 1fr; } }

/* Developer / project logo lockups */
.logo-mark { max-width: 150px; border-radius: var(--radius-sm); overflow: hidden; }
.logo-mark img { width: 100%; height: auto; display: block; }
.phero__logo { max-width: 118px; margin-bottom: 20px; border-radius: 6px; overflow: hidden; }
.phero__logo img { width: 100%; height: auto; display: block; }

/* ===== Tables ===== */
.tablewrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* table scroll must not chain to the page */
  -webkit-overflow-scrolling: touch; border: 1px solid rgba(139,168,136,0.4); border-radius: var(--radius); background: var(--cream); }
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 520px; }
caption { text-align: left; padding: 16px 18px 0; font-size: 0.85rem; color: var(--stone); }
th, td { padding: 13px 18px; text-align: left; border-bottom: 1px solid rgba(139,168,136,0.25); }
thead th {
  background: rgba(139,168,136,0.16); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--forest);
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* The RERA carpet column is the one buyers are most often misled about, so it
   is tinted to pull the eye before the larger carpet-plus-balcony figure. */
th.is-key { background: rgba(199,126,82,0.16); color: var(--terracotta); }
td.is-key { background: rgba(199,126,82,0.06); font-weight: 600; }

/* ===== Price panel ===== */
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .price { grid-template-columns: 1fr; } }
.price__card { background: var(--cream); border: 1px solid rgba(139,168,136,0.4); border-radius: var(--radius); padding: 28px; }
.price__label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.price__figure { font-family: 'Fraunces', Georgia, serif; font-size: 2rem; color: var(--terracotta); margin-top: 8px; }
.price__note { margin-top: 12px; font-size: 0.86rem; color: var(--stone); line-height: 1.55; }
.price__list { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(139,168,136,0.3); list-style: none; }
.price__list li { font-size: 0.88rem; padding: 5px 0 5px 20px; position: relative; color: var(--ink); }
.price__list li::before { content: "·"; position: absolute; left: 6px; color: var(--terracotta); font-weight: 700; }

/* ===== Amenities ===== */
.amen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .amen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .amen { grid-template-columns: 1fr; } }
.amen__item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--cream); border: 1px solid rgba(139,168,136,0.35);
  border-radius: var(--radius-sm); padding: 16px;
}
.amen__item svg { flex: none; color: var(--forest); margin-top: 2px; }
.amen__item span { font-size: 0.9rem; line-height: 1.45; }

/* ===== Spec columns ===== */
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .specs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .specs { grid-template-columns: 1fr; } }
.spec h3 { font-size: 1rem; color: var(--forest); padding-bottom: 8px; border-bottom: 1px solid var(--sage); margin-bottom: 12px; }
.spec ul { list-style: none; }
.spec li { font-size: 0.89rem; color: var(--ink); padding: 6px 0 6px 18px; position: relative; line-height: 1.5; }
.spec li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }

/* ===== Connectivity ===== */
.conn { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .conn { grid-template-columns: 1fr; } }
.conn__list { list-style: none; }
.conn__list li {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px dashed rgba(139,168,136,0.5); font-size: 0.95rem;
}
.conn__list li:last-child { border-bottom: 0; }
.conn__list b { font-weight: 600; color: var(--forest); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== FAQ ===== */
.faq__list { max-width: 820px; }
details {
  border-bottom: 1px solid rgba(139,168,136,0.4);
  padding: 18px 0;
}
summary {
  cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none;
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--terracotta); font-size: 1.4rem; line-height: 1; flex: none; }
details[open] summary::after { content: "–"; }
details p { margin-top: 12px; color: var(--stone); font-size: 0.95rem; line-height: 1.65; }

/* ===== Enquiry band ===== */
.enq { background: var(--forest); color: var(--cream); border-radius: var(--radius); padding: clamp(32px, 5vw, 56px); }
.enq h2 { color: var(--cream); }
.enq p { color: rgba(245,240,230,0.82); margin-top: 14px; max-width: 60ch; }
.enq__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ===== Disclosure ===== */
.disclose {
  border: 1px solid rgba(139,168,136,0.5); border-left: 4px solid var(--terracotta);
  border-radius: var(--radius-sm); background: var(--cream);
  padding: 22px 24px; font-size: 0.86rem; color: var(--stone); line-height: 1.65;
}
.disclose strong { color: var(--ink); }
.disclose + .disclose { margin-top: 14px; }

/* ===== Footer ===== */
.foot { background: var(--ink); color: rgba(245,240,230,0.72); padding: 56px 0 32px; font-size: 0.9rem; }
.foot a:hover { color: var(--cream); text-decoration: underline; }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
@media (max-width: 720px) { .foot__grid { grid-template-columns: 1fr; gap: 28px; } }
.foot h4 { color: var(--cream); font-size: 0.95rem; margin-bottom: 12px; }
.foot ul { list-style: none; }
.foot li { padding: 4px 0; }
.foot__legal {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(245,240,230,0.16);
  font-size: 0.78rem; line-height: 1.7; color: rgba(245,240,230,0.55);
}
.foot__legal strong { color: rgba(245,240,230,0.85); }


@media print {
  .stickyhead, .actionbar, .wa-float, .enq__cta { display: none; }
  body { background: #fff; }
}