/* ==========================================================================
   Propvider — Brand theme (matches propvider.com)
   Loaded LAST on every page. Light ivory pages, white header, solid navy
   top bar / footer / feature bands, Poppins headings + Lato body,
   white form cards with a gold top edge, gold used sparingly.

   Palette taken from the live site's own CSS variables:
     navy #0A0F47 · navy-soft #12194F · navy-deep #060933
     gold #B8912A · gold-soft #D4AF4A · ivory #FAF8F3 · charcoal #2B2E3A · muted #767A87
   ========================================================================== */

:root {
  --c-brand: #0A0F47;
  --c-brand-mid: #12194F;
  --c-brand-deep: #060933;

  --c-bg: #FAF8F3;
  --c-bg-alt: #F3F0E8;
  --c-bg-sink: #ECE8DD;
  --c-surface: #FFFFFF;

  --c-ink: #2B2E3A;
  --c-ink-soft: #5A5E6D;
  --c-ink-faint: #767A87;

  --c-accent: #D4AF4A;
  --c-accent-strong: #B8912A;
  --c-accent-soft: #F1E3B8;

  --c-line: rgba(10, 15, 71, .12);
  --c-line-strong: rgba(10, 15, 71, .22);

  --c-ondark-ink: #F5F6FB;
  --c-ondark-ink-soft: #B8BDDA;
  --c-ondark-line: rgba(255, 255, 255, .16);

  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Poppins is a wide face — scale the display sizes down to the live site's proportions */
  --step-2: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --step-3: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
  --step-4: clamp(1.65rem, 1.2rem + 1.5vw, 2.3rem);
  --step-5: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  --step-6: clamp(2.2rem, 1.4rem + 3vw, 3.5rem);

  --g-gold: linear-gradient(135deg, #D4AF4A 0%, #B8912A 100%);
  --g-green: linear-gradient(135deg, #0A0F47 0%, #12194F 100%);
  --g-night: radial-gradient(120% 90% at 85% 0%, #1a2370 0%, #0A0F47 48%, #060933 100%);

  --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --r-xl: 18px;
  --shadow-soft: 0 2px 10px rgba(10, 15, 71, .06);
  --shadow-ambient: 0 2px 10px rgba(10, 15, 71, .06);
  --shadow-deep: 0 12px 30px rgba(10, 15, 71, .10);
  --shadow-lift: 0 24px 56px rgba(10, 15, 71, .16);
  --glow-gold: 0 14px 30px rgba(184, 145, 42, .24);
  --glass-line: rgba(255, 255, 255, .18);
}

/* ---- Type ---------------------------------------------------------------------- */
body { background: var(--c-bg); color: var(--c-ink); font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--c-brand); letter-spacing: -.015em; line-height: 1.18; }
h1 em, h2 em, h3 em, h4 em { font-style: normal; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.lede { font-size: var(--step-0); line-height: 1.7; }
.eyebrow { font-family: var(--font-display); font-size: .75rem; letter-spacing: .18em; color: var(--c-accent-strong); }
.hero .eyebrow, .page-hero .eyebrow, .on-dark .eyebrow, .bento-section .eyebrow, .story .eyebrow { color: var(--c-accent); }
.serif-num, .stat b, .fact b, .case-metric b { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }

/* ---- Buttons: rounded-rectangle like the live site -------------------------------------- */
.btn { border-radius: var(--r-md); text-transform: none; letter-spacing: .01em; font-family: var(--font-display); font-weight: 600; font-size: .9rem; padding: .95em 1.7em; background-image: none; box-shadow: none; }
.btn--sm { padding: .72em 1.25em; font-size: .82rem; }
.btn--gold { background-image: var(--g-gold); --btn-fg: var(--c-brand); box-shadow: var(--glow-gold); }
.btn--gold:hover { box-shadow: 0 18px 36px rgba(184, 145, 42, .34); }
.btn--ghost { box-shadow: none; }
.hero .btn--ghost, .page-hero .btn--ghost, .cta-band .btn--ghost { background-color: rgba(255, 255, 255, .08); }
.arrow-link { font-family: var(--font-display); letter-spacing: .04em; }

/* ---- Top bar + header (white, like the live site) ----------------------------------------- */
body .topbar { background: var(--c-brand); border-bottom: 0; }
body .topbar__tag { letter-spacing: .06em; text-transform: none; font-size: .75rem; }

body[data-root] .site-header,
body[data-root] .site-header[data-scrolled] {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-bottom: 1px solid var(--c-line);
}
body[data-root] .site-header[data-scrolled] { box-shadow: 0 8px 24px -16px rgba(10, 15, 71, .35); }
.site-header::after { display: none; }
.brand__logo { height: 3.2rem; }
body[data-root] .site-header .brand { color: var(--c-brand); }
body[data-root] .site-header .nav-toggle span { background: var(--c-brand); }
@media (min-width: 1024px) {
  body[data-root] .site-header .nav a:not(.btn) { font-family: var(--font-display); font-weight: 500; font-size: .92rem; letter-spacing: 0; color: var(--c-ink-faint); }
  body[data-root] .site-header .nav a:not(.btn):hover,
  body[data-root] .site-header .nav a[aria-current="page"] { color: var(--c-brand); }
  .nav a::after { background: var(--c-accent-strong); height: 2px; }
}
.header-cta { background-image: none; --btn-bg: var(--c-brand); --btn-fg: #fff; background-color: var(--c-brand); color: #fff; box-shadow: none; }
.header-cta:hover { background-color: var(--c-brand-mid); }
@media (max-width: 1023px) { .nav a { font-family: var(--font-display); } }

/* ---- Hero ------------------------------------------------------------------------------------------------ */
body[data-page="home"] { background: var(--c-bg); }
body[data-page="home"] .hero { margin-top: 0; padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.hero { background: var(--c-brand-deep); }
.hero__bg::after { background: linear-gradient(90deg, rgba(6, 9, 51, .94) 0%, rgba(10, 15, 71, .72) 55%, rgba(10, 15, 71, .5) 100%); }
.hero--lead .hero__bg::after { background: linear-gradient(90deg, rgba(6, 9, 51, .95) 0%, rgba(10, 15, 71, .78) 50%, rgba(10, 15, 71, .55) 100%); }
.hero--lead h1, .hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem); line-height: 1.14; letter-spacing: -.02em; }
.hero h1 em { background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
.hero--lead .lede { font-size: 1rem; line-height: 1.75; max-width: 33rem; }
.hero__word { font-weight: 700; font-size: clamp(4rem, 2rem + 11vw, 13rem); -webkit-text-stroke: 1px rgba(212, 175, 74, .14); }
.hero__points li { font-size: .98rem; }
.hero__points svg { background: rgba(212, 175, 74, .16); }
.hero__call a { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }

/* white form card with a gold top edge — as on the live site */
.hero__form {
  background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-accent-strong); border-radius: var(--r-lg);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-lift); color: var(--c-ink);
}
.hero__form .badge { background: var(--c-bg-alt); color: var(--c-brand); border-color: transparent; }
.hero__form h2 { color: var(--c-brand); font-size: 1.45rem; line-height: 1.25; }
.hero__form h2 em { background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* light form controls (hero card + popup body) */
.hero__form .lead-form .field label, .lead-modal__body .lead-form .field label { color: var(--c-ink-soft); }
.hero__form .lead-form .field input, .hero__form .lead-form .field select,
.lead-modal__body .lead-form .field input, .lead-modal__body .lead-form .field select {
  background: #fff; border: 1px solid var(--c-line-strong); color: var(--c-ink); border-radius: var(--r-md);
}
.hero__form .lead-form .field input::placeholder, .lead-modal__body .lead-form .field input::placeholder { color: #9a9eb0; }
.hero__form .lead-form .field input:focus, .hero__form .lead-form .field select:focus,
.lead-modal__body .lead-form .field input:focus, .lead-modal__body .lead-form .field select:focus { background: #fff; border-color: var(--c-accent-strong); box-shadow: 0 0 0 3px rgba(184, 145, 42, .2); }
.hero__form .phone, .lead-modal__body .phone { background: #fff; border-color: var(--c-line-strong); border-radius: var(--r-md); }
.hero__form .phone span, .lead-modal__body .phone span { color: var(--c-accent-strong); border-right-color: var(--c-line); }
.hero__form .lead-form .phone input, .lead-modal__body .lead-form .phone input { border: 0; background: transparent; }
.hero__form .consent, .lead-modal__body .consent, .hero__form .lead-form__trust, .lead-modal__body .lead-form__trust { color: var(--c-ink-faint); }
.hero__form .consent a, .lead-modal__body .consent a { color: var(--c-brand); }
.hero__form .lead-form__trust svg, .lead-modal__body .lead-form__trust svg { color: var(--c-accent-strong); }
.hero__form .lead-form__msg, .lead-modal__body .lead-form__msg { color: #8a2a2a; background: #fbe9e9; border-color: #e9b4b4; }
.hero__form .lead-success, .lead-modal__body .lead-success { color: var(--c-ink); }
.hero__form .lead-success .btn--ghost, .lead-modal__body .lead-success .btn--ghost { --btn-fg: var(--c-brand); border-color: var(--c-line-strong); }

/* lead popup: white panel, navy side */
.lead-modal__panel { background: #fff; color: var(--c-ink); border: 0; border-radius: var(--r-lg); box-shadow: 0 40px 100px -24px rgba(6, 9, 51, .7); }
.lead-modal__body h2 { color: var(--c-brand); font-size: 1.5rem; }
.lead-modal__ctx { background: var(--c-accent-soft); color: var(--c-brand); }
.lead-modal__close { background: var(--c-bg-alt); border-color: var(--c-line); color: var(--c-brand); }
.lead-modal__close:hover { background: var(--c-brand); color: #fff; }
.lead-modal__aside { background: linear-gradient(to top, rgba(6, 9, 51, .94), rgba(10, 15, 71, .62)), url("../img/art-dusk.svg") center / cover no-repeat; border-radius: var(--r-lg) 0 0 var(--r-lg); }
.lead-modal__aside h3 { font-size: 1.5rem; }
.lead-modal__aside li svg { background: rgba(212, 175, 74, .18); }

/* ---- Ticker --------------------------------------------------------------------------------------------- */
.ticker { background: var(--c-brand); border-block: 0; padding-block: .95rem; }
.ticker span { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ondark-ink-soft); }

/* ---- Proof strip: white, hairline-divided, plain gold icons (like the live site's stats) ----------- */
.proof { background: #fff; border-bottom: 1px solid var(--c-line); padding-block: 0; }
.proof__grid { gap: 0; }
.proof__item { background: transparent; border: 0; border-radius: 0; border-left: 1px solid var(--c-line); padding: 2.2rem 1.8rem; text-align: center; justify-items: center; }
.proof__item:first-child { border-left: 0; }
.proof__item:hover { transform: none; border-color: var(--c-line); background: var(--c-bg); }
.proof__item svg { width: 2rem; height: 2rem; padding: 0; background: none; color: var(--c-accent-strong); }
.proof__item h3 { color: var(--c-brand); font-size: 1.05rem; margin-top: .5rem; }
.proof__item p { color: var(--c-ink-faint); }
@media (max-width: 960px) { .proof__item { border-top: 1px solid var(--c-line); } .proof__item:nth-child(odd) { border-left: 0; } }

/* ---- Interactive plan: light card on ivory ------------------------------------------------------------ */
.plan { background: var(--c-bg); color: var(--c-ink); }
.plan::before { background: none; }
.plan__head h2 { color: var(--c-brand); }
.plan__head .lede { color: var(--c-ink-soft); }
.plan__map { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-deep); }
.plan__legend { color: var(--c-ink-faint); }
.lg--sold { background: #c9cddf; }
.pl-road { fill: #E9EBF4; }
.pl-dash { stroke: rgba(10, 15, 71, .25); }
.pl-park { fill: var(--c-brand); stroke: var(--c-accent); }
.pl-label { fill: rgba(255, 255, 255, .75); }
.plot rect { stroke: #fff; }
.plot--sold rect { fill: #D3D6E6; }
.plot--sold text { fill: #8e93ad; }
.plot--hold rect { fill: #D4AF4A; }
.plot--hold text { fill: var(--c-brand); }
.plot:hover rect, .plot:focus-visible rect { stroke: var(--c-brand); }
.plot.is-sel rect { stroke: var(--c-brand); }
.plot:hover, .plot.is-sel { filter: drop-shadow(0 6px 10px rgba(10, 15, 71, .3)); }
.chip { border-color: var(--c-line-strong); color: var(--c-ink-soft); background: #fff; }
.chip b { color: var(--c-brand); }
.chip:hover { border-color: var(--c-accent-strong); color: var(--c-brand); }
.chip.is-on { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.chip.is-on b { color: var(--c-accent); }
.plot-card { background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-accent-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-deep); }
.plot-card__empty { color: var(--c-ink-faint); }
.plot-card__id { color: var(--c-brand); font-size: 2rem; }
.plot-card__tag--available { background: #e3f3ea; color: #1e6b49; }
.plot-card__tag--hold { background: var(--c-accent-soft); color: #7a5d12; }
.plot-card__tag--sold { background: #e8eaf3; color: #6b7088; }
.plot-card dl { border-color: var(--c-line); }
.plot-card dt { color: var(--c-ink-faint); }
.plot-card dd { color: var(--c-brand); font-size: 1rem; }
.plot-card__price { font-size: 2rem; }
.plot-card__price small { -webkit-text-fill-color: var(--c-ink-faint); }

/* ---- Projects showcase: light ----------------------------------------------------------------------------- */
.hscroll { background: var(--c-bg); color: var(--c-ink); }
.hscroll__intro h2 { color: var(--c-brand); }
.hscroll__bar { background: var(--c-line); }
.hpanel { border-color: var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-deep); }
.hpanel__body h3 { color: #fff; font-size: var(--step-4); }
.hpanel__no { font-weight: 700; -webkit-text-stroke: 1px rgba(255, 255, 255, .4); font-size: clamp(3.5rem, 2rem + 7vw, 8rem); }

/* ---- Navy feature bands (story, bento) keep a deep navy ----------------------------------------------------- */
.story, .bento-section { background: var(--g-night); }
.story__step h2 { font-size: var(--step-5); }
.story__step p { font-size: 1.05rem; }
.bento__tile { border-radius: var(--r-lg); }
.bento__tile b { font-weight: 600; }
.bento__tile--lg b { font-size: var(--step-6); }

/* ---- Cards: 18px radius like the live site ----------------------------------------------------------------------------- */
.who__card, .step, .apart, .feature, .team-card, .leader, .project-card, .post-card, .post-feature, .calc, .cta-band, .about-cols .about-col, .value-list > div,
.faq__item, .news-item, .case-metric, .enquiry-card, .contact-grid > :first-child, .map-wide .map-embed, .post-cover, .post-cta, .post-lead, .post-toc, .prose__toc, .amenity { border-radius: var(--r-lg); }
.who__card, .step, .project-card, .post-card, .team-card, .value-list > div, .about-cols .about-col { box-shadow: var(--shadow-soft); }
.who__card:hover, .step:hover, .project-card:hover, .post-card:hover { box-shadow: var(--shadow-deep); }
.cta-band { border-radius: 20px; }
.calc { border-radius: 20px; }
.faq__item { border-radius: 14px; }
.who__card > svg, .feature__icon, .apart svg, .amenity svg, .adv-list svg { border-radius: 12px; }
.who__card > svg, .apart svg, .amenity svg { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.who__card:hover > svg { background: var(--g-gold); color: var(--c-brand); }
.project-card__price { background: var(--c-accent-soft); color: var(--c-brand); }
.fact + .fact::before { background: var(--c-line); }

/* ---- Footer: solid navy with a gold top line (as live site) ---------------------------------------------------------------- */
.footer-cta { background: var(--g-green); }
.footer-cta h2 { font-size: var(--step-3); }
.site-footer { background: var(--c-brand); border-top: 2px solid var(--c-accent-strong); }
.site-footer::before { display: none; }
.footer-col h5 { font-family: var(--font-display); color: #fff; letter-spacing: .14em; }
.callback input[type="text"], .callback input[type="tel"] { border-radius: var(--r-md); background: rgba(255, 255, 255, .08); }

/* ---- Inner / blog heroes ------------------------------------------------------------------------------------------------------ */
.page-hero { margin-top: 0; padding-top: clamp(3rem, 2rem + 5vw, 6rem); background:
    linear-gradient(90deg, rgba(6, 9, 51, .94) 0%, rgba(10, 15, 71, .72) 60%, rgba(10, 15, 71, .55) 100%),
    url("../img/art-dusk.svg") center 72% / cover no-repeat, var(--c-brand-deep); }
.page-hero h1, .project-hero h1, .post-hero h1 { font-weight: 700; font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3rem); line-height: 1.16; }
.page-hero::before { font-weight: 700; font-size: clamp(3.5rem, 1.5rem + 10vw, 11rem); -webkit-text-stroke: 1px rgba(212, 175, 74, .14); }
.page-hero p { font-size: 1.02rem; }
.project-hero h1 { max-width: 20ch; }
.post-feature__body h2 { font-size: var(--step-4); }
.post-card__body h3 { font-size: 1.15rem; line-height: 1.3; }
.post-body h2 { font-size: var(--step-4); }
.post-body h3 { font-size: var(--step-3); }
.post-body { color: var(--c-ink); }
.editorial__text h2, .showcase__head h2, .plan__head h2, .hscroll__intro h2 { font-size: var(--step-5); }
.cta-band h2 { font-size: var(--step-5); }
.facts-bar .fact b, .fact b { color: var(--c-brand); background: none; -webkit-text-fill-color: initial; }
.stat-band .stat b { background: none; -webkit-text-fill-color: initial; color: var(--c-accent); }
.value-list > div::before, .step::before { font-weight: 700; }
.timeline li::before { background: var(--g-gold); color: var(--c-brand); font-family: var(--font-display); font-weight: 700; }

/* ---- Small details ---------------------------------------------------------------------------------------------------------------- */
.badge { font-family: var(--font-display); }
.wa-float { box-shadow: 0 10px 24px -6px rgba(31, 122, 77, .6); }
.lead-pill { border-radius: var(--r-md); }
.lead-pill, .action-bar__main { font-family: var(--font-display); }
.faq__q { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
.data-table td:first-child { font-family: var(--font-display); font-size: 1rem; font-weight: 500; }

/* footer list text: consistent size for plain (non-link) items */
.footer-col li { font-family: var(--font-body); font-size: var(--step--1); color: var(--c-ondark-ink-soft); }
.footer-col li a { font-size: inherit; }

/* ---- Footer: every line readable on navy ---- */
.site-footer, .site-footer .muted, .footer-brand p { color: #D5D9EE; }
.footer-brand p { font-size: .95rem; line-height: 1.7; max-width: 36ch; }
.footer-disclaimer { color: #B8BDDA; font-size: .8rem; line-height: 1.7; }
.footer-bottom, .footer-bottom span { color: #D5D9EE; }
.footer-col li, .footer-col li a, .site-footer a { color: #E4E7F6; }
.site-footer a:hover, .footer-col li a:hover { color: var(--c-accent); }
.footer-cta p, .footer-cta .muted { color: #D5D9EE; }
.consent--dark, .consent--dark span { color: #D5D9EE; }

/* ---- Photos from the admin (About page, team) ---- */
.split__media img, .team-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-card > img { aspect-ratio: 1 / 1; height: auto; }
.project-hero__bg img, .hero__bg img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Heading levels 1–5 inside articles and long text pages ---- */
h5 { font-family: var(--font-display); font-weight: 600; color: var(--c-brand); line-height: 1.3; }
.post-body h1, .prose h1 { margin-top: 3rem; font-size: var(--step-5); line-height: 1.12; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.post-body h4, .prose h4 { margin-top: 1.8rem; font-size: var(--step-1); line-height: 1.25; }
.post-body h5, .prose h5 { margin-top: 1.5rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-accent-strong); }
.post-body h1 + *, .post-body h4 + *, .post-body h5 + *, .prose h1 + *, .prose h4 + *, .prose h5 + * { margin-top: .7rem; }
.post-body > h1:first-child, .post-body > h4:first-child, .post-body > h5:first-child { margin-top: 0; }

/* ==========================================================================
   Consistent vertical rhythm — one spacing rule for the whole website.
   --section-y is the single gap. Where two sections share the same background
   they would add their paddings together (a double gap), so the second one drops
   its top padding; colour changes already show one gap on each side.
   ========================================================================== */
:root { --section-y: clamp(3rem, 2rem + 4vw, 6rem); }

/* "light" sections = ivory page background */
:is(.section:not(.section--alt):not(.section--sink):not(.on-dark), .plan, .hscroll:not(.is-pinned)) + .section:not(.section--alt):not(.section--sink):not(.on-dark),
:is(.section:not(.section--alt):not(.section--sink):not(.on-dark), .plan, .hscroll:not(.is-pinned)) + .plan { padding-top: 0; }

/* the same for two alternating-colour (beige) or sunken sections in a row */
.section--alt + .section--alt, .section--sink + .section--sink { padding-top: 0; }

/* project strip: a plain section before it -> no double gap (the pinned desktop layout is handled below) */
:is(.section:not(.section--alt):not(.section--sink):not(.on-dark), .plan) + .hscroll:not(.is-pinned) .hscroll__sticky { padding-top: 0; }

/* pinned (desktop) project strip: start right under the header and top-align, instead of centring inside a full-screen box */
@media (min-width: 900px) {
  .hscroll.is-pinned .hscroll__sticky { top: var(--header-h); height: auto; padding-block: 1.25rem var(--section-y); justify-content: flex-start; }
}

/* page banners and article layout use the same single gap as every other section */
.page-hero { padding-bottom: var(--section-y); }
.post-layout { padding-block: var(--section-y); }

/* =========================================================================
   Responsive hardening — every device, 320px up
   ========================================================================= */
/* grid/flex children may shrink below their content, so nothing can push the page wider than the screen */
main :is(div, section, article, aside, form, ul, ol, li, figure, header, footer, nav) { min-width: 0; }
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
.prose, .post-body, .project-section, .faq__a { overflow-wrap: anywhere; }
.prose table, .post-body table { display: block; max-width: 100%; overflow-x: auto; }
.post-body pre, .prose pre { max-width: 100%; overflow-x: auto; }
.post-body img, .prose img { max-width: 100%; height: auto; }
/* contact map: min-height + aspect-ratio must never force it wider than its column */
.map-wide .map-embed { width: 100%; max-width: 100%; }
@media (max-width: 700px) { .map-wide .map-embed { aspect-ratio: auto; min-height: 340px; } }
/* touch devices: comfortable (≥44px) hit areas without changing the layout */
@media (pointer: coarse) {
  .footer-col a, .topbar a, .breadcrumb a, .arrow-link, .footer-bottom a, .post-card__more, .toc a, .post-toc a {
    padding-block: .8rem; margin-block: -.8rem; display: inline-flex; align-items: center; position: relative;
  }
  .footer-col li, .topbar > * { line-height: 1.4; }
  .btn, .filter-chip, .chip, .pill, .tab, .calc button { min-height: 44px; }
  input, select, textarea { font-size: 16px; }      /* stops iOS zooming into focused fields */
}
/* phones: keep plot squares tappable — the map scrolls sideways instead of shrinking */
.plan__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
@media (max-width: 640px) {
  .plan__scroll #planSvg { min-width: 560px; }
  .plan__scroll::after { content: "Swipe to explore the map →"; display: block; position: sticky; left: 0; padding-top: .5rem; font-size: .75rem; letter-spacing: .08em; color: var(--c-ink-faint); }
}
/* project cards: stronger scrim so text stays readable over light cover images */
.hpanel::before { background: linear-gradient(to top, rgba(4,6,31,.97) 8%, rgba(4,6,31,.78) 45%, rgba(4,6,31,.3) 100%); }
@media (min-width: 900px) { .hpanel::before { background: linear-gradient(to top, rgba(4,6,31,.96) 5%, rgba(4,6,31,.55) 45%, rgba(4,6,31,.15) 75%); } }
@media (max-width: 960px) {
  .plot-card { min-height: 9rem; padding: 1.4rem; }
  .plot-card dl { margin-block: 1.1rem; padding-block: 1rem; }
}
/* price table: fit phones without sideways scrolling */
@media (max-width: 640px) {
  .table-scroll .data-table { min-width: 0; font-size: .88rem; }
  .data-table th, .data-table td { padding: .75rem .6rem; }
  .data-table thead th { font-size: .75rem; letter-spacing: .06em; }
  .data-table td:first-child { font-size: .92rem; }
  .data-table caption { padding: .8rem .75rem .6rem; }
}
.data-table th, .btn, .chip, .eyebrow, .arrow-link { overflow-wrap: normal; word-break: normal; }
@media (max-width: 640px) { .data-table thead th { font-size: .75rem; letter-spacing: .03em; padding-inline: .45rem; } }
@media (max-width: 640px) { .data-table td:first-child { white-space: nowrap; } }

/* ---- Phone fixes ---- */
.topbar__actions { align-items: center; flex-wrap: nowrap; }
.topbar__actions a, .topbar__phone { white-space: nowrap; }
@media (max-width: 1023px) {
  /* mobile menu: full-screen panel that sits behind the logo and the close button */
  .nav { inset: 0; height: 100dvh; z-index: 1; padding: 10rem 2rem 6rem; justify-content: flex-start; align-items: center; }
  .nav a { text-align: center; }
  .site-header__inner > a, .site-header__inner > button, .nav-toggle { position: relative; z-index: 3; }
  /* the bottom action bar already has Call / WhatsApp, so the floating bubble only gets in the way */
  body.has-action-bar .wa-float { display: none; }
}
@media (max-width: 520px) {
  .proof__item, .proof__item:first-child, .proof__item:nth-child(odd) { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 1.6rem 1.3rem; }
  .proof__grid { gap: .8rem; }
}

/* plot map: clearly visible swipe hint + scrollbar */
.plan__scroll { scrollbar-width: auto; scrollbar-color: var(--c-accent-strong) #e6e8f2; padding-bottom: .4rem; }
.plan__scroll::-webkit-scrollbar { height: 10px; }
.plan__scroll::-webkit-scrollbar-track { background: #e6e8f2; border-radius: 10px; }
.plan__scroll::-webkit-scrollbar-thumb { background: var(--c-accent-strong); border-radius: 10px; }
@media (max-width: 640px) {
  .plan__scroll::after {
    content: "\2194  Swipe to explore the map"; width: fit-content; margin-top: .8rem; padding: .6rem 1.1rem;
    border-radius: var(--r-pill); background: var(--c-brand); color: #fff; border: 1px solid var(--c-accent);
    font-size: .78rem; font-weight: 600; letter-spacing: .04em; box-shadow: 0 8px 18px -8px rgba(8,12,70,.6);
  }
}

/* "View project" on the project cards: a real, visible button */
.hpanel__go {
  padding: .8rem 1.4rem; margin-top: .6rem; border: 1px solid var(--c-accent); border-radius: var(--r-pill);
  background: rgba(212, 175, 74, .14); color: #fff; font-size: .78rem; letter-spacing: .12em;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.hpanel__go svg { color: var(--c-accent); }
.hpanel:hover .hpanel__go, .hpanel__go:hover, .hpanel__go:focus-visible { background: var(--g-gold); color: #060a33; border-color: transparent; }
.hpanel:hover .hpanel__go svg, .hpanel__go:hover svg { color: #060a33; }

/* "arrow" links (Get investment plots →, Read more →, Get directions →): real buttons */
.arrow-link {
  display: inline-flex; align-items: center; gap: .6rem; padding: .75rem 1.3rem; border: 1px solid var(--c-brand); border-radius: var(--r-pill);
  background: transparent; color: var(--c-brand); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.arrow-link:hover, .arrow-link:focus-visible, .who__card:hover .arrow-link { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.on-dark .arrow-link, .post-feature__body .arrow-link, .map-embed__card .arrow-link, .hpanel .arrow-link {
  color: #fff; border-color: var(--c-accent); background: rgba(212,175,74,.14);
}
.on-dark .arrow-link:hover, .post-feature__body .arrow-link:hover, .map-embed__card .arrow-link:hover { background: var(--g-gold); color: #060a33; border-color: transparent; }
@media (pointer: coarse) { .arrow-link { padding-block: .75rem; margin-block: 0; } }

/* hero "Prefer to talk?" phone link: visible call button */
.hero__call a {
  margin-left: .6rem; padding: .65rem 1.2rem; border: 1px solid var(--c-accent); border-radius: var(--r-pill);
  background: rgba(212,175,74,.14); border-bottom-width: 1px; text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.hero__call a:hover, .hero__call a:focus-visible { background: var(--g-gold); color: #060a33; }
@media (max-width: 520px) { .hero__call { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .hero__call a { margin-left: 0; } }

/* "Who we help" cards: compact one-line buttons, readable on the dark hover state */
.who__card .arrow-link { width: fit-content; max-width: 100%; white-space: nowrap; padding: .7rem 1.1rem; font-size: .75rem; letter-spacing: .06em; gap: .5rem; align-self: flex-start; }
.who__card:hover .arrow-link, .who__card:focus-within .arrow-link { background: var(--g-gold); color: #060a33; border-color: transparent; }
@media (min-width: 561px) and (max-width: 1180px) { .who__card .arrow-link { font-size: .75rem; padding-inline: .9rem; } }

/* ---- Responsive type ---- */
/* big monitors: scale the whole interface (all rem-based type and spacing) up a notch */
@media (min-width: 1700px) { html { font-size: 112.5%; } }
@media (min-width: 2200px) { html { font-size: 125%; } }
/* phones: keep the small caps labels / meta text legible and headings from crowding */
@media (max-width: 640px) {
  .eyebrow, .post-card__tag, .chip, .plot-card dt, .hpanel__meta, .project-hero__meta span, .contact-detail dt { font-size: 12px; }
  h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
  .lede, .section-head p { font-size: var(--step-0); }
  .btn, .arrow-link { font-size: max(.78rem, 12.5px); }
}
@media (min-width: 641px) { h1, h2 { text-wrap: balance; } }
p, li { text-wrap: pretty; }