/* Brochure theme, taken from Emaar's Lavita brochure (6 Oct 2026).
   Colours sampled off the brochure itself: warm ivory paper, bronze display type, warm
   dark-grey body, muted sand accent. Applied with a body class so it is opt-in and the
   live pages are untouched. Presentation only: no markup, text or schema changes, which
   is why the content on a themed page is byte-identical to the page it was made from. */
.brochure-theme{
  --b-paper:#eeeade; --b-paper-2:#f6f3ea; --b-bronze:#9f815b; --b-bronze-dk:#7d6444;
  --b-ink:#3a3935; --b-body:#4e4d48; --b-sand:#aa997d; --b-line:#ddd5c4;
  background:var(--b-paper); color:var(--b-body);
}
/* paper, with the faint stone marbling the brochure prints on */
.brochure-theme::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(900px 600px at 95% 15%, rgba(214,203,180,.35), transparent 65%),
    linear-gradient(160deg, #f3efe4 0%, #eeeade 45%, #e9e4d5 100%);}

.brochure-theme .section--white,
.brochure-theme .section--texture,
.brochure-theme .section--compact{background:transparent}
/* Was clamp(56px,9vw,132px), which put up to 264px of nothing between sections and made
   the page read as empty rather than airy. Tightened 6 Oct 2026. */
.brochure-theme .section{padding:clamp(40px,5.2vw,78px) 0}
.brochure-theme .section + .section{padding-top:clamp(32px,4.2vw,62px)}
.brochure-theme .prose > h2{margin-bottom:.35em}

/* Display type: large, light, wide-tracked and bronze, as the brochure sets its headings */
.brochure-theme h1,.brochure-theme h2{
  color:var(--b-bronze);font-weight:300;letter-spacing:.005em;line-height:1.06}
.brochure-theme h2{font-size:clamp(30px,4.2vw,54px);margin:0 0 .5em;max-width:18ch}
.brochure-theme h3{color:var(--b-ink);font-weight:500;letter-spacing:.01em}
.brochure-theme .eyebrow{color:var(--b-bronze-dk);letter-spacing:.22em;font-size:10.5px;
  text-transform:uppercase;font-weight:600}
.brochure-theme .section p,.brochure-theme .section li{color:var(--b-body);font-weight:400;line-height:1.72}
.brochure-theme .section .lead{color:var(--b-ink);font-size:clamp(16px,1.5vw,19px);max-width:46ch}

/* The brochure's signature: a narrow heading column, a wide text column, big gutter */
@media (min-width:900px){
  .brochure-theme .section .container > .prose,
  .brochure-theme .section .container > .section-head + *{max-width:none}
  .brochure-theme .prose{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.9fr);
    gap:clamp(24px,3.4vw,62px);align-items:start}
  .brochure-theme .prose > h2{grid-column:1;position:sticky;top:120px}
  .brochure-theme .prose > *:not(h2){grid-column:2}
}
.brochure-theme .prose p{max-width:62ch}

/* Rules and tables, printed rather than boxed */
.brochure-theme .elev-table{border-top:1px solid var(--b-line);background:transparent}
.brochure-theme .elev-row{border-bottom:1px solid var(--b-line);background:transparent}
.brochure-theme .elev-row--head{color:var(--b-bronze-dk);letter-spacing:.14em;
  text-transform:uppercase;font-size:10.5px;border-bottom:1px solid var(--b-sand)}
.brochure-theme table{border-color:var(--b-line)}
.brochure-theme td,.brochure-theme th{border-color:var(--b-line);color:var(--b-body)}

/* An image sits proud of a sand block, the way the brochure offsets its photography */
.brochure-theme figure.post-fig,.brochure-theme .split-media{position:relative}
.brochure-theme figure.post-fig::before,.brochure-theme .split-media::before{
  content:"";position:absolute;left:-18px;top:28px;bottom:28px;width:46%;
  background:linear-gradient(180deg,var(--b-sand),rgba(170,153,125,.18));z-index:0}
.brochure-theme figure.post-fig img,.brochure-theme .split-media img{position:relative;z-index:1}
.brochure-theme figcaption{color:var(--b-bronze-dk);font-size:12.5px;letter-spacing:.04em}

/* Cards and FAQ: hairlines, no boxes */
.brochure-theme .faq-item{border-bottom:1px solid var(--b-line);background:transparent}
.brochure-theme .faq-item summary{color:var(--b-ink);font-weight:500}
/* The community flip cards and anything with its own dark face are excluded: giving them
   the paper background while the dark-surface rule kept their text white produced white
   on white at 1.02:1. */
.brochure-theme :is(.journal-card,.card):not(.community-front):not(.flip-front):not(.flip-back){
  background:var(--b-paper-2);border:1px solid var(--b-line);box-shadow:none}
.brochure-theme .btn--primary{background:var(--b-bronze-dk);border-color:var(--b-bronze-dk);color:#fff}
.brochure-theme .btn--primary:hover{background:#654f31;border-color:#654f31}
.brochure-theme .btn--line{border-color:var(--b-sand);color:var(--b-bronze-dk)}
/* buttons bring their own background and their own text colour; the paper link
   colour must not reach them or it lands bronze-on-teal at 1.55:1 */
.brochure-theme .section a:not(.btn){color:var(--b-bronze-dk)}
.brochure-theme .section a:not(.btn):hover{color:var(--b-ink)}
.brochure-theme .page-fact{border-color:rgba(255,255,255,.4)}

/* ---- DARK SURFACES KEEP LIGHT TYPE -------------------------------------------------
   The paper palette above belongs to the paper. Every selector below paints a dark green
   (#0b302e, #061f1e, #0d2a28) or sits over a photograph, and forcing cream and bronze on
   to them made the type unreadable. This list is taken from the stylesheet itself rather
   than guessed: every rule in styles.css whose background computes below 0.18 luminance.
   It is last in the file so it beats the .section rules above. */
.brochure-theme :is(.section--dark,.hero,.page-hero,.cta-panel,.cta-band-inner,.broch-cta,
  .community-front,.newsletter,.map-note,.mt-note,.back-top,.flip-back,.site-footer,.scrub,
  .plan-lightbox,.pv-stage,.pv-bar){
  --b-body:#fff; --b-ink:#fff; --b-bronze:#e9d7b4; --b-bronze-dk:#f0e2c8}
.brochure-theme :is(.section--dark,.hero,.page-hero,.cta-panel,.cta-band-inner,.broch-cta,
  .community-front,.newsletter,.map-note,.mt-note,.back-top,.flip-back,.site-footer,.scrub,
  .plan-lightbox,.pv-stage,.pv-bar) :is(h1,h2,h3,h4,p,li,span,summary,strong,b,em,figcaption,td,th){
  color:#fff}
.brochure-theme :is(.section--dark,.hero,.page-hero,.cta-panel,.cta-band-inner,.broch-cta,
  .newsletter,.site-footer) :is(h1,h2,h3,h4){color:#f0e2c8}
.brochure-theme :is(.section--dark,.hero,.page-hero,.cta-panel,.cta-band-inner,.broch-cta,
  .newsletter,.site-footer) .eyebrow{color:#e8d9b6}
.brochure-theme :is(.section--dark,.hero,.page-hero,.cta-panel,.cta-band-inner,.broch-cta,
  .newsletter,.site-footer) :is(p,li){color:rgba(255,255,255,.94)}
.brochure-theme :is(.section--dark,.hero,.page-hero,.cta-panel,.cta-band-inner,.broch-cta,
  .newsletter,.site-footer) a:not(.btn){color:#f0e2c8}

/* STACKING: styles.css sets `.page-hero > * { z-index: 1 }`, which lifts the hero IMAGE
   above the ::after scrim (z-index auto), so the scrim was painting underneath the photo
   and doing nothing at all. Strengthening the gradient could never have worked. The three
   layers have to be ordered explicitly: photo, then scrim, then text. */
.brochure-theme .page-hero > img{z-index:0}
.brochure-theme .page-hero::after{z-index:1}
.brochure-theme .page-hero > .container,
.brochure-theme .page-hero .container{z-index:2}

/* A cluster hero sits over a bright interior render, so white type needs a real scrim and
   not just a tint. Lloyd reported the Palmiera hero as unreadable on 6 Oct 2026. */
.brochure-theme .page-hero::after{
  background:linear-gradient(180deg,rgba(6,20,18,.28) 0%,rgba(6,20,18,.58) 30%,
    rgba(6,20,18,.86) 58%,rgba(6,20,18,.92) 100%)}
.brochure-theme .page-hero :is(h1,.lead,p,.eyebrow){text-shadow:0 1px 18px rgba(4,14,13,.8)}
.brochure-theme .page-hero .lead,.brochure-theme .page-hero p{color:#fff}

/* buttons bring their own background and their own text colour */
.brochure-theme .btn--whatsapp,.brochure-theme .btn--whatsapp *{color:#fff!important}
.brochure-theme .btn--primary{background:var(--b-bronze-dk);border-color:var(--b-bronze-dk);color:#fff}
.brochure-theme .btn--light,.brochure-theme .btn--light *{color:#3a3935!important}

/* Community flip cards: the site's own scrim runs 0deg from .92 at the foot to .04 at 65%,
   so the upper third of the card is effectively unscrimmed — and that is where the cluster
   name and its description sit, over a bright render. Reported unreadable 6 Oct 2026. */
.brochure-theme .community-front::after{
  background:linear-gradient(0deg,rgba(4,20,19,.94) 0%,rgba(4,20,19,.86) 46%,
    rgba(4,20,19,.66) 80%,rgba(4,20,19,.48) 100%)}
.brochure-theme .community-front :is(h2,h3,h4,p,li,span){
  text-shadow:0 1px 14px rgba(4,14,13,.7)}

/* ---- Aerial hero (home page) -------------------------------------------------------
   RESTORED 7 Oct 2026. An earlier edit rebuilt the dark-surface block by truncating the
   file at a marker and lost everything after it, including this. The logo then fell below
   the photograph at full width instead of sitting over it.
   Layers are ordered explicitly, for the same reason the cluster heroes needed it. */
.aerial-hero{position:relative;display:grid;place-items:center;overflow:hidden;
  min-height:clamp(420px,66svh,760px);background:#0b302e}
.aerial-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;z-index:0}
.aerial-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(118% 88% at 50% 48%, rgba(6,20,18,.40) 0%,
    rgba(6,20,18,.58) 56%, rgba(6,20,18,.78) 100%)}
.aerial-hero-inner{position:relative;z-index:2;text-align:center;padding:40px 20px}
.aerial-hero-mark{width:min(420px,62vw);height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 3px 26px rgba(4,14,13,.55))}
.aerial-hero-note{margin:26px auto 0;max-width:46ch;color:#fff;font-size:clamp(14px,1.5vw,17px);
  line-height:1.6;text-shadow:0 1px 16px rgba(4,14,13,.6)}
@media (max-width:640px){
  .aerial-hero{min-height:clamp(360px,56svh,520px)}
  .aerial-hero-mark{width:min(300px,72vw)}}

/* ---- Brochure typography ------------------------------------------------------------
   RESTORED 7 Oct 2026, lost in the same truncation. Cormorant Garamond is a light,
   high-contrast serif and wants a light weight at display sizes; Montserrat reads small,
   so body copy needs slightly more size and leading than the face it replaced. */
.brochure-theme h1,.brochure-theme h2,.brochure-theme h3,.brochure-theme .lead{
  font-family:var(--serif)}
.brochure-theme h1,.brochure-theme h2{font-weight:300;letter-spacing:.004em}
.brochure-theme h3{font-weight:400;letter-spacing:.006em}
.brochure-theme .lead{font-weight:300}
.brochure-theme p,.brochure-theme li,.brochure-theme td,.brochure-theme th{
  font-family:var(--sans);letter-spacing:.002em}
.brochure-theme .section p,.brochure-theme .section li{font-size:15.6px;line-height:1.75}
.brochure-theme .eyebrow,.brochure-theme .btn{font-family:var(--sans);letter-spacing:.16em}

/* ---- Text over photography: the remaining two blocks --------------------------------
   Found 7 Oct 2026 by scanning every page for text whose container holds an image, then
   reading the ::after/::before alpha. .intro-hero had NO scrim at all and .location-card
   fades to .25 exactly where its heading sits. Both were using the bronze text colour,
   which is a mid-tone and unreadable over a photograph whichever way the image goes.
   Over imagery the type is white, the headings cream, and the scrim is real. */
.brochure-theme .location-card{position:relative;isolation:isolate}
.brochure-theme .location-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,20,18,.50) 0%,rgba(6,20,18,.72) 42%,
    rgba(6,20,18,.86) 100%)}
.brochure-theme .location-card > *{position:relative;z-index:2}
.brochure-theme .location-card :is(h1,h2,h3,h4,p,li,span,label,strong,b,em,a:not(.btn)){
  color:#fff}
.brochure-theme .location-card :is(h1,h2,h3,h4){color:#f0e2c8}
.brochure-theme .location-card .eyebrow{color:#e8d9b6}
.brochure-theme .location-card :is(h1,h2,h3,h4,p,li,span){
  text-shadow:0 1px 16px rgba(4,14,13,.7)}
/* the route-check form inside the location card must stay legible and usable */
.brochure-theme .location-card :is(input,select,textarea){
  background:rgba(255,255,255,.94);color:#14231c;border-color:rgba(255,255,255,.5)}
.brochure-theme .location-card ::placeholder{color:#55605c;opacity:1}

/* Light panels INSIDE the location card keep dark type: the white-on-image rule above was
   also hitting the route dropdown, the text input and the pale button, giving white on
   white. Found 7 Oct 2026 by listing every opaque light background inside the block. */
.brochure-theme .location-card :is(.route-suggest,.btn--light,input,select,textarea,option),
.brochure-theme .location-card :is(.route-suggest,.btn--light) *{
  color:#14231c!important;text-shadow:none!important}
.brochure-theme .location-card .route-suggest li{color:#14231c!important}

/* A primary button must never take its background from --b-bronze-dk: inside a dark panel
   that variable is redefined to cream so headings read, and the button then rendered white
   on cream at 1.28:1. Literal colours here so a panel override cannot reach it. */
.brochure-theme .btn--primary,
.brochure-theme .cta-panel .btn--primary,
.brochure-theme .cta-band-inner .btn--primary,
.brochure-theme .section--dark .btn--primary{
  background:#7d6444;border-color:#7d6444;color:#fff}
.brochure-theme .btn--primary:hover,
.brochure-theme .cta-panel .btn--primary:hover{background:#654f31;border-color:#654f31;color:#fff}

/* .intro-hero has no background of its own: it sat directly under the scroll-film section,
   which supplied the dark backdrop its white type was designed for. Removing that film on
   6 Oct left white text on light paper. Giving it the dark ground it always appeared to have.
   Its own background-image is a decorative inline SVG, not a photograph, so no scrim here. */
.brochure-theme .intro-hero{background:#0b302e;position:relative}
.brochure-theme .intro-hero :is(h1,h2,h3,p,li,span,a:not(.btn)){color:#fff}
.brochure-theme .intro-hero :is(h1,h2){color:#f0e2c8}
.brochure-theme .intro-hero .eyebrow{color:#e8d9b6}
.brochure-theme .intro-hero .lead{color:rgba(255,255,255,.94)}
.brochure-theme .intro-hero .btn--ghost{border-color:rgba(255,255,255,.6);color:#fff;
  background:rgba(255,255,255,.08)}
.brochure-theme .intro-hero .btn--light,.brochure-theme .intro-hero .btn--light *{color:#14231c!important}