/* ==========================================================================
   V2 Theme (Round 21, 2026-08-10 → Round 42, 2026-08-10)
   The user asked for Version 2 to change everything BELOW/AROUND the
   scroll-video hero — including color — while the hero mechanism itself
   ("3D scroll") stays exactly as-is. This file swaps the whole site's
   existing --clr-* token system (same tokens the Round 12 live
   color-preview switcher already runs on) for a new warm, light, earthy
   palette inspired by the reference site's cream/terracotta/sage look.

   Round 22 (2026-08-10): the user sent a reference screenshot of the
   Microvilla nav — a floating rounded "pill" bar, inset from the screen
   edges with visible margin on all sides, opaque white, always visible
   (not transparent-over-hero) — and asked for that same treatment,
   calling out that it was missing on mobile specifically. The nav (and
   mobile menu) are now LIGHT-themed and float as an inset pill on both
   mobile and desktop. Only the actual scroll-video sections (hero + any
   mid-page video moment — the video footage and its captions) stay pinned
   to the original dark palette below, since those still need light text
   over dark video.

   Round 42 (2026-08-10): through Round 41 every rule in this file was
   scoped to body[data-page="home"] only — about/services/properties/
   contact kept the original dark "Burnt-Copper" palette and the old
   full-width nav bar. The user asked for the nav, color and layout to
   match across all pages. Rules below are now split into two groups:

   (a) SITEWIDE — the base palette tokens, the pill nav + mobile menu, the
       scroll-video dark-lock, component contrast fixes, and the card
       shadow lift. These are scoped to body[data-page] (matches every
       page — home/about/services/properties/contact all set that
       attribute) so the same look now applies everywhere.

   (b) HOMEPAGE-ONLY (still body[data-page="home"], deliberately NOT
       broadened) — the ticker restyle, the card-grid masonry + 4-color
       cycle, the property-card photo aspect-ratio bump, and the CTA
       quick-enquiry-form grid. These are specific homepage CONTENT
       decisions, not palette/nav — about.html/services.html/
       properties.html all already use the plain 3-column .card-grid for
       their own, different card content, and broadening the masonry+color
       treatment to them would visually break those grids rather than
       "match" anything. Each block below is labeled accordingly.
   ========================================================================== */

body[data-page]{
  /* Warm Cream / White / Terracotta / Sage — "Version 2" palette */
  --clr-black:        #F4EEE1; /* Warm Cream — page + .bg-black section surface */
  --clr-black-soft:   #FFFFFF; /* White — .bg-panel sections, cards, ticker, footer */
  --clr-black-panel:  #EDE3D0; /* Warm Beige — input/graphic panel surfaces */
  --clr-green:        #C1613D; /* Terracotta — primary buttons, dots, borders */
  --clr-green-deep:   #6B7F5B; /* Sage Green — CTA-band/secondary accent */
  --clr-green-bright: #C1613D; /* Terracotta — headings/icons/bright accent */
  --clr-mint:         #6B7F5B; /* Sage — muted tag accent */
  --clr-white:        #2B2620; /* Charcoal — body text (was "white" in the dark theme) */
  --clr-ink:          #201B15; /* Near-black — text on bright accent backgrounds */
  --clr-green-rgb:    193,97,61;
  --clr-white-rgb:    43,38,32;
  /* --clr-mist/--clr-line/--clr-line-soft are defined in main.css's :root
     as formulas (rgba(var(--clr-white-rgb),X)) — a custom property's value
     is resolved ONCE where it's declared and inherited as an already-baked
     rgba() string, it does NOT re-resolve its inner var() at each
     descendant's own scope. Overriding --clr-white-rgb here alone left
     --clr-mist/--clr-line still resolving against :root's original
     (233,225,208) value, making nav links and muted body text nearly
     invisible against the new light background. Redefine all three
     explicitly here using the new charcoal rgb (43,38,32). */
  --clr-mist:         rgba(43,38,32,0.66);
  --clr-line:         rgba(43,38,32,0.16);
  --clr-line-soft:    rgba(43,38,32,0.09);
  color-scheme: light;
}

/* ---- Only the scroll-video sections (hero + any mid-page video moment)
   stay dark — video footage + light-on-dark captions. Sitewide: about,
   services and properties all have their own scroll-video sections too. ---- */
body[data-page] .scroll-video-wrap{
  --clr-black:        #0B0B0F;
  --clr-black-soft:   #1C1A17;
  --clr-black-panel:  #2D3138;
  --clr-white:        #E9E1D0;
  --clr-ink:          #0B0B0F;
  --clr-white-rgb:    233,225,208;
  color-scheme: dark;
}

/* ---- Round 42: same dark-lock, applied to .page-header (the photo
   header band used at the top of about/services/properties/contact —
   index.html has no equivalent, its "hero" is the scroll-video above).
   .page-header always shows a real photo under a hardcoded-dark gradient
   scrim (.page-header-media::after, rgba(11,15,20,...) in main.css, not
   themeable) and was always designed for light text on top of that dark
   scrim. With the new light body palette, --clr-white/--clr-mist/
   --clr-line flipped to charcoal-based values, which is unreadable
   dark-on-dark against the still-dark photo scrim underneath — this was
   caught in verification (the H1, lede paragraph and divider all read as
   nearly invisible on about.html's header). Re-lock the text tokens back
   to light here, same treatment as .scroll-video-wrap above. ---- */
body[data-page] .page-header{
  --clr-white:      #E9E1D0;
  --clr-mist:       rgba(233,225,208,0.66);
  --clr-line:       rgba(233,225,208,0.25);
  --clr-ink:        #0B0B0F;
  --clr-white-rgb:  233,225,208;
  color-scheme: dark;
}

/* ---- Round 42: same issue, different component — .bg-green-deep
   (contact.html's "Based near..." topo-pattern band). This uses
   --clr-green-deep as a background with color:var(--clr-white) set
   directly in main.css. --clr-green-deep is a mid-tone sage (#6B7F5B)
   under the new palette, so neither the flipped-charcoal --clr-white nor
   a plain light-cream text reaches decent contrast against it (measured
   ~3.4:1 and ~3.4:1 respectively, both under WCAG AA). Rather than
   re-lock only the text, darken the background itself into a deep forest
   green here so cream text reads clearly (~8.5:1 heading / ~4.7:1 mist
   sub-copy). ---- */
body[data-page] .bg-green-deep{
  --clr-green-deep: #33402C;
  --clr-white:      #E9E1D0;
  --clr-mist:       rgba(233,225,208,0.66);
  --clr-line:       rgba(233,225,208,0.25);
  --clr-white-rgb:  233,225,208;
  color-scheme: dark;
}

/* ---- Floating pill nav (Round 22, sitewide Round 42) — inset from the
   edges, fully rounded, opaque white, always visible (no transparent-
   over-hero state). Mobile-first: small inset/padding at the base
   breakpoint, roomier at desktop. Nav markup is identical across all 5
   pages (confirmed via diff before broadening this), so the same
   selectors apply cleanly everywhere. ---- */
body[data-page] .site-nav{
  top: 12px; left: 12px; right: 12px;
  height: auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.97);
  box-shadow: 0 14px 36px -16px rgba(43,38,32,0.35);
  border-bottom: none;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: box-shadow var(--dur-med) var(--ease-soft), background var(--dur-med);
}
@media (min-width: 768px){
  body[data-page] .site-nav{ top: 20px; left: 28px; right: 28px; padding: 8px 16px; }
}
/* The pill's height was entirely driven by the Round 16 "dominant logo"
   sizing (88px mobile / 130px desktop) — with only ~16px of padding,
   that's what made the pill tall. That logo size was chosen for the old
   full-width bar; the new floating pill reads as sleeker with a
   smaller mark, so it's scaled down specifically here (pill nav only —
   the footer logo keeps the original dominant size everywhere). ---- */
body[data-page] .site-nav .brand .mark img{ height: 40px; }
@media (min-width: 768px){
  body[data-page] .site-nav .brand .mark img{ height: 52px; }
}
body[data-page] .site-nav .brand{ font-size: 1rem; gap: 9px; }
body[data-page] .site-nav .brand small{ font-size: 0.52rem; margin-top: 1px; }
body[data-page] .site-nav .nav-link{ padding: 8px 13px; }
body[data-page] .site-nav .nav-cta .btn{ padding: 11px 20px; font-size: 0.8rem; }
body[data-page] .site-nav .wrap{
  /* .wrap normally caps at --container-max (1320px) and centers itself
     with margin:auto — inside the already-padded pill, that stacked a
     second layer of inset on top of the nav's own padding, leaving a
     visibly empty gap after "Enquire Now" before the pill's rounded
     edge. Let .wrap fill the pill's padded box exactly instead. */
  max-width: none;
  padding-left: 14px;
  padding-right: 6px;
}
@media (min-width: 768px){
  body[data-page] .site-nav .wrap{ padding-left: 22px; padding-right: 10px; }
}
body[data-page] .site-nav.is-scrolled{
  background: rgba(255,255,255,1);
  box-shadow: 0 18px 44px -16px rgba(43,38,32,0.42);
}
/* Round 42: the pill nav is much shorter than the old full-width bar it
   replaces, but --nav-h (96px/140px, main.css) is still what
   .page-header's top padding is calculated from on the four inner pages
   (index.html's hero is full-bleed behind the nav and never depended on
   --nav-h). Left un-adjusted, .page-header would carry a much bigger gap
   under the pill than the pill itself needs. Tightened to roughly match
   the pill's real footprint (inset + content height) instead. */
body[data-page]{ --nav-h: 84px; }
@media (min-width: 768px){ body[data-page]{ --nav-h: 112px; } }
/* Nav sits on a light pill now, so give the page content clearance from
   the floating bar instead of the old edge-to-edge --nav-h reservation
   (the hero itself is full-bleed behind the floating pill, so this only
   needs to push down anything that relies on --nav-h for spacing). */
body[data-page] .mobile-menu{
  --clr-black:      #F4EEE1;
  --clr-black-soft: #FFFFFF;
  --clr-white:      #2B2620;
  --clr-ink:        #201B15;
  --clr-white-rgb:  43,38,32;
  color-scheme: light;
}

/* ---- Component-level fixes for chips whose backgrounds are hardcoded
   dark (they assumed a light --clr-white in the old theme, which is now
   charcoal, so their paired text needs to be forced light explicitly).
   Sitewide: properties.html has the same .property-card component. ---- */
body[data-page] .property-card .area-badge{
  color: #F4EEE1;
  border-color: rgba(233,225,208,0.25);
}
body[data-page] .property-card .status-badge.is-sold{
  background: rgba(11,15,20,0.75);
  color: #F4EEE1;
}
/* .area-card names sit on a hardcoded-dark gradient scrim (Round 20) —
   force the label back to light text regardless of the light body theme.
   (.area-card only exists on the homepage — harmless elsewhere.) */
body[data-page] .area-card .area-card-label .name{
  color: #F4EEE1;
}
/* .process-step .step-num was designed as a pale "ghost number" against a
   dark card (layout-v4.css, rgba(accent,0.5)) — on the new white card it
   reads as washed-out. Make it a solid, confident terracotta instead.
   (.process-step only exists on the homepage — harmless elsewhere.) */
body[data-page] .process-step .step-num{
  color: var(--clr-green);
  opacity: 0.85;
}
/* main.css hardcodes .field select{ color-scheme:dark } sitewide (a
   leftover from the old dark inner-page theme) and Round 39 only
   corrected it for the homepage's .cta-quick-form. Every page now runs
   the light palette, so contact.html's #enquiryForm select was left with
   a mismatched dark native dropdown against its light field styling —
   broaden the light color-scheme to every .field select. ---- */
body[data-page] .field select{ color-scheme: light; }

/* ---- Soft lift on card surfaces so white-on-cream/white sections still
   read with clear separation, not just a hairline border. Sitewide:
   .card and .property-card both appear on inner pages too. ---- */
body[data-page] .card,
body[data-page] .property-card,
body[data-page] .video-card,
body[data-page] .hero-stat-float .wrap,
body[data-page] .process-step{
  box-shadow: 0 10px 34px -16px rgba(43,38,32,0.18);
}

/* ---- Solid terracotta ticker (Round 26) — the user sent a reference
   with a full-bleed orange bar, bold white text, and small leaf-icon
   separators instead of plain dots. The dot separators (<i>&middot;</i>)
   in index.html were swapped for inline leaf SVGs (class="ticker-leaf")
   so this styles the icon itself, not just text. ---- */
body[data-page="home"] .ticker{
  background: var(--clr-green);
  border-top: none;
  border-bottom: none;
  padding: 16px 0;
}
body[data-page="home"] .ticker-track span{
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
}
body[data-page="home"] .ticker-track span em{
  color: #FFFFFF;
  font-style: normal;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.5);
  text-underline-offset: 3px;
}
body[data-page="home"] .ticker-track .ticker-leaf{
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,0.9);
}

/* ---- Round 28/29 history: tried CSS multi-column (Round 28, no visible
   stagger with only 4 similar-length cards), then switched to CSS Grid
   with a forced nth-child(even) margin-top offset (Round 29, stagger
   finally visible).

   Round 31: the Round 29 grid-offset technique is what caused the "lot of
   space, doesn't gel / fluent" feedback. Reason: CSS Grid locks every
   item in a row to a shared row track. Pushing card 2 down with
   margin-top doesn't move it into free space — it just makes row 1's
   track taller by that same amount, which leaves a matching dead gap
   under card 1 (and above card 3) before row 2 starts. That empty block
   is exactly the "extra space" being flagged.

   Fixed with true CSS masonry (column-count): columns have no shared row
   track, so each card sits directly under the one above it in its own
   column — there is no mechanism that can create a forced blank gap.
   Cards pack tightly regardless of height differences, which is what
   makes it read as fluent/gelled instead of holey. */
body[data-page="home"] .card-grid{
  display: block;
  column-count: 1;
  column-gap: 22px;
}
body[data-page="home"] .card-grid .card{
  display: block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 22px;
}
@media (min-width: 640px){
  body[data-page="home"] .card-grid{ column-count: 2; column-gap: 24px; }
}
@media (min-width: 1100px){
  body[data-page="home"] .card-grid{ column-gap: 28px; }
  body[data-page="home"] .card-grid .card{ padding: 34px 30px; margin-bottom: 28px; }
}

/* ---- Round 30: solid/tinted card backgrounds — every card was plain
   white, so even with the Round 29 stagger the grid still read as one
   flat block instead of a real Pinterest board (Pinterest tiles carry
   their own distinct colors). Cycle 4 variants by position: white,
   a soft terracotta wash, a soft sage wash, and one bold solid
   terracotta "featured" card with light text — applies to both 4-card
   grids on the homepage since they share .card-grid. ---- */
body[data-page="home"] .card-grid .card:nth-child(4n+2){
  background: #F6E1D2; /* soft terracotta wash */
  border-color: rgba(193,97,61,0.18);
}
body[data-page="home"] .card-grid .card:nth-child(4n+3){
  background: #E7EDDF; /* soft sage wash */
  border-color: rgba(107,127,91,0.2);
}
body[data-page="home"] .card-grid .card:nth-child(4n+4){
  background: var(--clr-green); /* bold solid terracotta */
  border-color: transparent;
}
body[data-page="home"] .card-grid .card:nth-child(4n+4) h3,
body[data-page="home"] .card-grid .card:nth-child(4n+4) p{
  color: #FFFFFF;
}
body[data-page="home"] .card-grid .card:nth-child(4n+4) .icon{
  background: rgba(255,255,255,0.22);
  color: #FFFFFF;
}

/* ---- Round 37: taller property photos in the "Currently listed" carousel.
   Base .plot-graphic is aspect-ratio:16/10 (main.css, shared with
   properties.html) — overridden taller here, homepage-only, so the main
   properties grid page is unaffected. ---- */
body[data-page="home"] .property-card .plot-graphic{
  aspect-ratio: 4/3;
}

/* ---- Round 39: bigger, more important closing CTA -- two columns instead
   of a thin text+button band: headline/copy/buttons on the left, a raised
   white "quick enquiry" card on the right that submits straight to
   WhatsApp (via the free wa.me click-to-chat link -- no backend, so this
   is the only real way a static site can hand off a filled-in form to an
   actual human). Originally homepage-only; broadened sitewide (Round 44,
   see below) once the user pointed out it was missing on the 4 inner
   pages -- moved from body[data-page="home"] to body[data-page] so it
   renders correctly everywhere, same triage pattern as Round 42. ---- */
body[data-page] .cta-grid{
  display: grid;
  gap: 36px;
  padding: 56px 0;
}
@media (min-width: 900px){
  body[data-page] .cta-grid{
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 56px;
    padding: 76px 0;
  }
}
body[data-page] .cta-grid-copy h2{
  font-size: clamp(2.1rem, 4vw, 2.7rem);
  max-width: 15ch;
  color: var(--clr-ink);
}
body[data-page] .cta-grid-copy .eyebrow{ color: var(--clr-ink); opacity: 0.7; }
body[data-page] .cta-grid-copy .lede{ color: rgba(32,27,21,0.72); max-width: 44ch; }
body[data-page] .cta-grid-copy .btn-row{ margin-top: 26px; }
body[data-page] .cta-grid-copy .btn-light{ background: var(--clr-black); color: var(--clr-white); }
body[data-page] .cta-grid-copy .btn-light:hover{ background: var(--clr-black-soft); }
body[data-page] .cta-direct-phone{
  margin-top: 20px;
  font-size: 0.86rem;
  color: rgba(32,27,21,0.65);
}
body[data-page] .cta-direct-phone a{
  color: var(--clr-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-page] .cta-quick-form{
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: 0 34px 64px -22px rgba(32,27,21,0.4);
}
body[data-page] .cta-quick-form-title{
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--clr-ink);
  margin-bottom: 18px;
}
body[data-page] .cta-quick-form .field select{ color-scheme: light; }
body[data-page] .cta-quick-form-submit{ width: 100%; justify-content: center; margin-top: 4px; }
body[data-page] .cta-quick-form .form-note{ text-align: center; }