/* ============================================================
   Property Zone Gibraltar — home page (luxe direction)
   Black · bone · brass. Cormorant Garamond + Jost.
   Continues home-luxe-v2 — the approved language.
   ============================================================ */
:root{
  --ink:#0B0B0C; --ink-2:#131315; --bone:#EFEAE1; --stone:#8E8880; --brass:#A8875A;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(1.5rem,5vw,5.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);
  font-family:"Jost",system-ui,sans-serif;font-weight:300;font-size:1.1rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.ui{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;font-weight:400}
.display{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;line-height:1.02}
.wrap{max-width:1500px;margin:0 auto;padding-inline:var(--gutter)}
.pill{display:inline-flex;align-items:center;gap:.9rem;border:1px solid rgba(239,234,225,.35);
  padding:.95rem 1.6rem;transition:.35s var(--ease);background:none;color:inherit;cursor:pointer;font:inherit}
.pill:hover{border-color:var(--brass);color:var(--brass)}

/* ── MOTION SYSTEM ───────────────────────────────────────── */
.rise{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise[data-d="1"]{transition-delay:.12s} .rise[data-d="2"]{transition-delay:.24s}
.rise[data-d="3"]{transition-delay:.36s} .rise[data-d="4"]{transition-delay:.48s}
.wipe{clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease)}
.wipe.in{clip-path:inset(0 0 0 0)}
.par{will-change:transform}

/* ── HERO ────────────────────────────────────────────────── */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;display:grid;grid-template-rows:auto 1fr auto}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media video{width:100%;height:100%;object-fit:cover;object-position:58% 45%;transform:scale(1.12)}
/* Hero background video fades in once it can play (avoids the black flash on load). */
.hero__media video,.hero .elementor-background-video-container{opacity:0;transition:opacity 1.4s var(--ease)}
.hero.hero--ready .hero__media video,.hero.hero--ready .elementor-background-video-container{opacity:1}
@media (prefers-reduced-motion:reduce){.hero__media video,.hero .elementor-background-video-container{opacity:1!important;transition:none!important}}
/* Desktop: the looping video IS the hero. Drop the still poster (set as the
   section background image) so it doesn't sit under the fading-in video and
   crossfade oddly — the poster's crop doesn't match the video's scale(1.12)/
   offset. The poster stays on smaller screens as the intended LCP still. */
@media(min-width:1025px){.hero{background-image:none!important;background-color:#0b0b0c}}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 74% 46% at 50% 50%,rgba(11,11,12,.5) 0%,rgba(11,11,12,.2) 48%,rgba(11,11,12,0) 74%),linear-gradient(180deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.6) 13%,rgba(11,11,12,.4) 28%,rgba(11,11,12,.36) 55%,rgba(11,11,12,.88) 100%)}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.75rem var(--gutter);gap:2rem}
.topbar nav{display:flex;gap:1.7rem}
.topbar nav a,.topbar__right a{letter-spacing:.13em}
.brand{text-align:center;line-height:1.1}
.brand__mark{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:1.5rem;letter-spacing:.42em;text-transform:uppercase;padding-left:.42em}
.brand__sub{font-size:.748rem;letter-spacing:.46em;text-transform:uppercase;color:var(--stone);margin-top:.45rem;padding-left:.46em}
.topbar__right{display:flex;justify-content:flex-end;gap:1.75rem;align-items:center}
.hero__stage{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter)}
.hero__title{font-size:clamp(2.4rem,7vw,7rem);margin:0;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.45)}
.hero__title em{font-style:italic;color:#c4a672}
.hero__rule{width:2px;height:clamp(2.5rem,7vh,5rem);background:linear-gradient(180deg,#c4a672,rgba(196,166,114,.12));margin-top:2.2rem;box-shadow:0 0 10px rgba(0,0,0,.5)}
.hero__foot{padding:0 var(--gutter) clamp(1.75rem,4vh,3rem);display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.hero__count{color:var(--stone)} .hero__count b{color:var(--bone);font-weight:400}

/* ── PROOF BAND ──────────────────────────────────────────── */
.proof{padding:clamp(4rem,10vh,8rem) 0;border-bottom:1px solid rgba(239,234,225,.1)}
.proof__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.proof__n{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(2.8rem,5.5vw,5rem);
  line-height:1;color:var(--brass);font-variant-numeric:tabular-nums}
.proof__l{color:var(--stone);margin-top:.9rem;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase}

/* ── PROPERTY MOMENTS — full-bleed ───────────────────────── */
.moment{position:relative;isolation:isolate;height:105svh;min-height:660px;overflow:hidden;display:flex;align-items:flex-end}
.moment__bg{position:absolute;inset:-12% 0;z-index:-2}
.moment__bg img{width:100%;height:100%;object-fit:cover}
.moment::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,11,12,.55) 0%,transparent 38%,rgba(11,11,12,.86) 100%)}
.moment__body{width:100%;padding:0 var(--gutter) clamp(3rem,8vh,6rem);
  display:grid;grid-template-columns:1fr auto;align-items:flex-end;gap:2rem}
.moment__idx{color:#C6A56E;margin-bottom:1.1rem;font-size:.925rem}
.moment__name{font-size:clamp(2.4rem,6vw,5.4rem);margin:0;color:#fff}
.moment__loc{color:#D4CEC2;margin-top:1rem;font-size:.925rem}
.moment__price{font-family:"Cormorant Garamond",serif;font-size:clamp(1.6rem,2.6vw,2.4rem);
  text-align:right;font-variant-numeric:tabular-nums}
.moment__specs{margin-top:.6rem;color:#D4CEC2;font-size:.885rem;letter-spacing:.22em;text-transform:uppercase;text-align:right}

/* ── AREAS — the seven districts, luxe grid ──────────────── */
.section{padding:clamp(5rem,12vh,9rem) 0}
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vh,3rem)}
.sec-title{font-size:clamp(2rem,4.2vw,3.6rem);margin:.6rem 0 0}
.sec-eyebrow{color:var(--brass)}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(239,234,225,.12);
  border:1px solid rgba(239,234,225,.12)}
.area{position:relative;isolation:isolate;aspect-ratio:5/6;overflow:hidden;background:var(--ink);display:flex;align-items:flex-end}
.area--wide{grid-column:1 / -1;aspect-ratio:16/6}
@media(max-width:900px){.area--wide{aspect-ratio:16/8}}
@media(max-width:560px){.area--wide{aspect-ratio:5/6}}
.area__img{position:absolute;inset:0;z-index:-2}
.area__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.72);
  transition:transform 1.1s var(--ease),filter .8s var(--ease)}
.area:hover .area__img img{transform:scale(1.06);filter:grayscale(0) brightness(.85)}
.area::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 40%,rgba(11,11,12,.82) 100%)}
.area__b{padding:clamp(1.4rem,3vw,2.2rem);width:100%}
.area__i{color:var(--brass);display:block;margin-bottom:.7rem}
.area__n{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(1.7rem,2.6vw,2.4rem);color:#fff;line-height:1}
.area__c{color:var(--stone);margin-top:.5rem;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase}
@media(max-width:900px){.areas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.areas{grid-template-columns:1fr}}

/* ── PINNED STATEMENT ────────────────────────────────────── */
.pinned{position:relative}
.pinned__sticky{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.pinned__bg{position:absolute;inset:-10% 0;z-index:-2}
.pinned__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25)}
.pinned__sticky::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,11,12,.68)}
.pinned__six{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(9rem,26vw,24rem);
  line-height:.8;color:var(--brass);opacity:.22;position:absolute;z-index:-1;user-select:none}
.pinned__copy{max-width:52rem;padding:0 var(--gutter);position:relative}
.pinned__q{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(2rem,5vw,4.2rem);
  line-height:1.14;margin:0;text-wrap:balance}
.pinned__q em{font-style:italic;color:var(--brass)}

/* ── DREAM BAND ──────────────────────────────────────────── */
.dream{position:relative;isolation:isolate;height:88svh;min-height:520px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.dream video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.1)}
.dream::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,11,12,.6)}
.dream__t{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(2rem,5.25vw,4.5rem);
  line-height:1.06;margin:0 0 2rem;max-width:18ch}
.dream__t em{font-style:italic;color:var(--brass)}

/* ── SERVICES — editorial, hairline dividers, no gimmicks ── */
.serv-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(239,234,225,.14)}
.serv{padding:clamp(2rem,4vw,3rem) clamp(1.3rem,2vw,2rem) clamp(2.4rem,5vw,3.4rem);
  border-bottom:1px solid rgba(239,234,225,.14);border-right:1px solid rgba(239,234,225,.14)}
.serv:nth-child(4n){border-right:0}
.serv__img{aspect-ratio:4/3;overflow:hidden;margin-bottom:clamp(1.3rem,2.2vw,1.9rem)}
.serv__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.82);
  transition:transform 1.1s var(--ease),filter .7s var(--ease)}
.serv:hover .serv__img img{transform:scale(1.05);filter:grayscale(0) brightness(1)}
.serv:nth-child(1) .serv__img img,.serv:nth-child(4) .serv__img img{object-position:center 18%}
.serv__t{font-size:clamp(1.7rem,2.4vw,2.3rem);color:#fff;margin:0;font-weight:300}
.serv p{color:var(--stone);margin:1.1rem 0 1.7rem;font-size:1.08rem;max-width:28ch}
.serv__link{color:var(--brass);transition:letter-spacing .4s var(--ease)}
.serv:hover .serv__link{letter-spacing:.5em}
@media(max-width:900px){.serv-grid{grid-template-columns:1fr 1fr}
  .serv:nth-child(4n){border-right:1px solid rgba(239,234,225,.14)} .serv:nth-child(2n){border-right:0}}
@media(max-width:560px){.serv-grid{grid-template-columns:1fr} .serv{border-right:0!important}}

/* ── AWARDS — EPA ribbon badges + editorial roll ── */
.awards{background:var(--ink-2)}
.award-badges{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:clamp(1.1rem,3vw,2.6rem);margin-bottom:clamp(3rem,6.5vh,5.5rem)}
.award-badges img{height:clamp(150px,21vh,220px);width:auto;box-shadow:0 22px 55px rgba(0,0,0,.55)}
.award-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(239,234,225,.16)}
.aw{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  padding:clamp(1.4rem,3.2vh,2.1rem) 0;border-bottom:1px solid rgba(239,234,225,.16)}
.aw__n{font-size:clamp(1.35rem,2.4vw,2rem);color:#fff;margin:0;font-weight:300;line-height:1.12}
.aw__m{color:var(--stone);display:block;margin-top:.55rem}
.aw__y{color:var(--brass);white-space:nowrap;font-family:"Cormorant Garamond",serif;
  font-weight:300;font-size:clamp(1.2rem,1.8vw,1.6rem);letter-spacing:.04em}
@media(max-width:600px){.aw{flex-direction:column;gap:.45rem}.aw__y{white-space:normal}}

/* ── TESTIMONIALS ── */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(239,234,225,.12);
  border:1px solid rgba(239,234,225,.12)}
.quote{background:var(--ink);padding:clamp(2.4rem,4vw,3.6rem)}
.quote__mark{font-family:"Cormorant Garamond",serif;font-size:3.6rem;color:var(--brass);
  line-height:.6;opacity:.55;display:block;height:1.4rem}
.quote__t{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;
  font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.38;color:var(--bone);margin:0;text-wrap:balance}
.quote__who{color:var(--stone);margin-top:1.7rem;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase}
.quote__who b{color:var(--bone);font-weight:400;display:block;letter-spacing:.1em;margin-bottom:.25rem;font-size:.72rem}
/* Make each quote card fill its (stretched) grid cell so the grey divider
   background never shows as an empty block below a shorter quote. */
.quotes .e-loop-item{display:flex;height:100%}
.quotes .e-loop-item>*{flex:1 1 auto;height:100%}
.quotes .quote{height:100%;box-sizing:border-box}
@media(max-width:760px){.quotes{grid-template-columns:1fr}}

/* ── PARTNERS — dark name grid, description beneath ── */
.partners{background:var(--ink-2)}
.partner-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:rgba(239,234,225,.12);border:1px solid rgba(239,234,225,.12)}
.partner{background:var(--ink-2);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;padding:clamp(2.6rem,5.5vh,4rem) 1.2rem;text-align:center;transition:background .4s var(--ease)}
.partner:hover{background:var(--ink)}
.partner__k{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(1.5rem,1.9vw,2rem);color:#fff;line-height:1.05}
.partner__t{color:var(--stone);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;max-width:16ch}
@media(max-width:920px){.partner-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.partner-grid{grid-template-columns:1fr}}

/* ── PROPERTY PULSE — journal grid ── */
.pulse-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.8rem);margin-top:clamp(2rem,4vh,3rem)}
.post{display:flex;flex-direction:column}
.post__img{aspect-ratio:3/2;overflow:hidden;margin-bottom:1.4rem}
.post__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.28) brightness(.9);
  transition:transform 1s var(--ease),filter .6s var(--ease)}
.post:hover .post__img img{transform:scale(1.05);filter:grayscale(0) brightness(1)}
.post__meta{color:var(--brass);margin-bottom:.9rem}
.post__t{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(1.55rem,2.2vw,2rem);
  color:#fff;margin:0 0 .8rem;line-height:1.12}
.post__ex{color:var(--stone);font-size:1rem;line-height:1.62;margin:0 0 1.4rem;flex:1}
.post__link{color:var(--brass);transition:letter-spacing .4s var(--ease)}
.post:hover .post__link{letter-spacing:.4em}
@media(max-width:860px){.pulse-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pulse-grid{grid-template-columns:1fr}}

/* ── FOOTER ── */
.footer{background:var(--ink-2);border-top:1px solid rgba(239,234,225,.1);
  padding:clamp(3.5rem,8vh,6rem) 0 clamp(1.8rem,3.5vh,2.6rem)}
.footer__top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(2rem,4vw,4rem);
  padding-bottom:clamp(2.5rem,5vh,4rem);border-bottom:1px solid rgba(239,234,225,.1)}
.footer__addr{color:var(--stone);margin-top:1rem;text-transform:none;letter-spacing:.03em}
.footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.footer__h{color:var(--brass);margin-bottom:.4rem}
.footer__col a{color:var(--stone);transition:color .3s var(--ease)}
.footer__col a:hover{color:var(--bone)}
.footer__bottom{display:flex;justify-content:space-between;gap:1.2rem 2rem;flex-wrap:wrap;
  align-items:center;padding-top:clamp(1.5rem,3vh,2.4rem)}
.footer__bottom p{color:var(--stone);margin:0}
.footer__legal a{color:var(--stone);transition:color .3s var(--ease)}
.footer__legal a:hover{color:var(--brass)}
@media(max-width:760px){.footer__top{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1;margin-bottom:.5rem}}
@media(max-width:460px){.footer__top{grid-template-columns:1fr}}

:where(a,button,select):focus-visible{outline:1px solid var(--brass);outline-offset:4px}
/* Collapse the top nav once the labels no longer clear the centred wordmark (real build gets a mobile menu). */
@media (max-width:1300px){
  .topbar{grid-template-columns:1fr auto} .topbar nav,.topbar__right{display:none}
}
@media (max-width:980px){
  .topbar{grid-template-columns:1fr auto} .topbar nav,.topbar__right{display:none}
  .proof__grid{grid-template-columns:1fr 1fr;gap:2.5rem 1rem}
  .moment__body{grid-template-columns:1fr}
  .moment__price,.moment__specs{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .rise,.wipe{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .par{transform:none!important}
}

/* ── Global Kit override ───────────────────────────────────
   The Elementor Global Kit sets `.elementor-kit-358 h2/h3` sizes
   (2rem, specificity 0,1,1) that outrank this page's single-class
   heading rules and flatten every heading to 32px. Re-assert the
   editorial type scale here with compound selectors (0,2,0) so the
   design — including the two doubled headings — renders as intended. */
.hero .hero__title{font-size:clamp(2.4rem,7vw,7rem)}
.moment .moment__name{font-size:clamp(2.4rem,6vw,5.4rem)}
.sec-top .sec-title{font-size:clamp(2rem,4.2vw,3.6rem)}
.pinned .pinned__q{font-size:clamp(2rem,5vw,4.2rem)}
.dream .dream__t{font-size:clamp(2rem,5.25vw,4.5rem)}
.serv .serv__t{font-size:clamp(1.7rem,2.4vw,2.3rem)}
.post .post__t{font-size:clamp(1.55rem,2.2vw,2rem)}

/* ── Native Loop Grid integration ──────────────────────────────
   Elementor wraps heading widgets in an inner .elementor-heading-title
   (an <h2>) that the Global Kit styles directly, so wrapper-class font
   rules don't win. Target the inner tag for headings used natively. */
.moment .moment__name .elementor-heading-title{font-size:clamp(2.4rem,6vw,5.4rem);color:#fff;line-height:1.02;font-weight:300}

/* Native: Elementor's background-video layer must be absolute/out-of-flow (else it
   becomes a grid/flex item and consumes a row), and sit behind the scrim + content. */
.hero .elementor-background-video-container,
.dream .elementor-background-video-container{
  position:absolute !important; inset:0 !important; z-index:-2 !important;
}

/* Native: Elementor Image widget wraps <img> in figure/.elementor-widget-container
   that don't inherit height, so full-bleed image blocks collapse. Bridge the chain. */
.moment__bg .elementor-widget-image,
.moment__bg .elementor-widget-image .elementor-widget-container,
.moment__bg .elementor-widget-image figure{ height:100% !important; width:100%; margin:0; }
.moment__bg .elementor-widget-image img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Moment name heading (theme-post-title inner tag) */
.moment .moment__name .elementor-heading-title,
.moment .moment__name{ font-size:clamp(2.4rem,6vw,5.4rem) !important; color:#fff; line-height:1.02; font-weight:300; }

/* ── Native Button (.pill) fixes ───────────────────────────────
   `_css_classes` puts `.pill` on the button WIDGET WRAPPER, not the inner <a>.
   So the wrapper drew the .pill border AND the inner .elementor-button drew its
   own default chrome (the "double border"). Neutralise the wrapper, paint the
   pill onto the inner button, and restore the trailing "+". */
.elementor-widget-button.pill{ border:0 !important; padding:0 !important; background:none !important; display:inline-block; }
.elementor-widget-button.pill .elementor-button{
  background:none !important; border:1px solid rgba(239,234,225,.35) !important;
  border-radius:0 !important; box-shadow:none !important; color:var(--bone) !important;
  padding:.95rem 1.6rem !important;
  font-family:"Jost",system-ui,sans-serif; font-size:.8rem; letter-spacing:.3em; text-transform:uppercase; font-weight:400;
}
.elementor-widget-button.pill .elementor-button:hover{ border-color:var(--brass) !important; color:var(--brass) !important; }
.elementor-widget-button.pill .elementor-button-content-wrapper{ display:inline-flex; align-items:center; gap:.9rem; }
.elementor-widget-button.pill .elementor-button-content-wrapper::after{ content:"+"; opacity:.7; font-weight:400; }

/* Hero background video: frame it like the approved design (was object-position
   58% 45% + scale 1.12 on .hero__media video). */
.hero .elementor-background-video-container video,
.hero .elementor-background-video-hosted{
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:58% 45% !important; transform:scale(1.12);
}

/* Elementor forces flex-direction:column on flex containers at (0,2,0); these
   sections rely on the default row. Re-assert row at (0,2,1) so home.css wins
   (direction only — the responsive wrap/columns above still apply). */
body.home .hero__foot,
body.home .sec-top,
body.home .moment,
body.home .award-badges,
body.home .aw,
body.home .footer__bottom,
body.home .pz-viewall{ flex-direction:row; }

/* Elementor's default 10px container padding inset the full-bleed section
   backgrounds (a black border on the featured + "advantage" bands), framed the
   district grid with a thick light edge, and fattened the hero rule. And the
   testimonials Loop Grid fell back to Elementor's 30px gap instead of the 1px
   hairline. Restore the intended edge-to-edge / hairline look. */
body.home .hero__rule,
body.home .areas,
body.home .moment,
body.home .pinned,
body.home .pinned__sticky{ padding:0 !important; }
body.home .quotes .elementor-loop-container{ gap:1px !important; }

/* Discover Gibraltar district cards: Elementor forced them to flex-column, so the
   intended bottom-aligned label landed at the top. Push it back to the bottom. */
body.home .area{ justify-content:flex-end; }
/* The "two continents" band: the .dream__t heading has a max-width but margin:0,
   so the whole (centre-aligned) text block sat pinned to the left. Centre the
   block itself. */
body.home .dream__t{ margin-inline:auto !important; }

/* Brand lockup: mark over sub (they're spans in the native Text Editor). */
.brand__mark,.brand__sub{ display:block; }

/* District tiles: the image widget carries .area__img (absolute full-bleed);
   bridge Elementor's figure/container so the photo fills the 5/6 tile, text overlaid. */
.area__img{ position:absolute; inset:0; z-index:-2; }
.area__img .elementor-widget-container,
.area__img figure{ height:100% !important; width:100%; margin:0; }
.area__img img{ width:100%; height:100%; object-fit:cover; }

/* ── Home topbar: brand hover + responsive burger menu ─────────
   The topbar is a single Text Editor (.pz-topbar) so the checkbox-hack burger
   works. Brand must NOT change colour on hover (kill the kit's blue link-hover). */
.hero .brand, .hero .brand:hover, .hero .brand:focus,
.hero .brand:hover .brand__mark{ color:inherit !important; }
.hero .brand .brand__sub{ color:var(--stone) !important; }
.pz-topbar .topbar-nav a:hover, .pz-topbar .topbar__right a:hover, .pz-topbar .pz-mobile a:hover{ color:var(--brass) !important; }

/* Layout — Elementor wraps the TE content, so grid lives on the widget container. */
.pz-topbar .elementor-widget-container{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; position:relative; }
.pz-topbar .topbar-nav{ display:flex; gap:1.7rem; }
.pz-topbar .brand{ text-align:center; line-height:1.1; }
.pz-topbar .topbar__right{ display:flex; justify-content:flex-end; gap:1.75rem; align-items:center; }
.pz-topbar .topbar-nav a, .pz-topbar .topbar__right a{ letter-spacing:.13em; }
.pz-navcheck, .pz-burger, .pz-mobile{ display:none; }

@media(max-width:1300px){
  .pz-topbar .elementor-widget-container{ grid-template-columns:1fr auto; }
  .pz-topbar .topbar-nav, .pz-topbar .topbar__right{ display:none; }
  .pz-topbar .brand{ text-align:center; width:max-content; justify-self:start; } /* brand on the left, Gibraltar centred under Property Zone */
  .pz-burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:28px; height:22px; cursor:pointer; justify-self:end; }
  .pz-burger span{ display:block; height:1.5px; width:100%; background:var(--bone); transition:.3s var(--ease); }
  .pz-navcheck:checked ~ .pz-burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .pz-navcheck:checked ~ .pz-burger span:nth-child(2){ opacity:0; }
  .pz-navcheck:checked ~ .pz-burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .pz-mobile{ position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; gap:1.1rem;
    background:rgba(11,11,12,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid rgba(239,234,225,.12); padding:1.6rem var(--gutter); z-index:60; text-align:left; }
  .pz-navcheck:checked ~ .pz-mobile{ display:flex; }
  .pz-mobile a{ color:var(--bone); letter-spacing:.13em; }
}

.pz-topbar > .elementor-widget-container{ padding:1.75rem var(--gutter); }

/* Phones: the full-size wordmark is width:max-content (~326px) and sits in the
   1fr column, eating the whole row and pushing the burger off the right edge.
   Shrink the wordmark on small screens so brand + burger fit on one line. */
@media(max-width:600px){
  .pz-topbar .brand__mark{ font-size:1.08rem; letter-spacing:.14em; }
  .pz-topbar .brand__sub{ font-size:.5rem; letter-spacing:.38em; }
}

/* Stronger full-bleed image fill for the wide district tile + the pinned bg
   (Elementor's image-widget wrappers weren't fully stretched). */
.area__img, .area__img > *, .area__img .elementor-widget-container, .area__img figure, .area__img figure > a{ width:100% !important; height:100% !important; margin:0 !important; }
.area__img img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.pinned__bg, .pinned__bg > *, .pinned__bg .elementor-widget-container, .pinned__bg figure, .pinned__bg figure > a{ width:100% !important; height:100% !important; margin:0 !important; }
.pinned__bg img{ width:100% !important; height:100% !important; object-fit:cover !important; }

/* Services: whole-card cover link (the Elementor container `link` setting didn't
   render an anchor, so each card gets a full-cover <a>). */
.serv{ position:relative; }
.serv__cover{ position:absolute; inset:0; z-index:3; }

.area__cover{ position:absolute; inset:0; z-index:3; }
/* The cover shortcodes ([pz_*_cover]) render inside an Elementor widget wrapper
   (.area__cover-w / .post__cover-w / .serv__cover-w) that is position:relative and
   0-height; it became the overlay's containing block and collapsed it to 0x0, so
   nothing was clickable. Make the wrapper ITSELF the full-card overlay. */
.area__cover-w, .post__cover-w, .serv__cover-w{ position:absolute !important; inset:0 !important; z-index:3; }
.area__cover, .post__cover, .serv__cover{ width:100%; height:100%; }

/* ── Fine-tuning ───────────────────────────────────────────────
   Halve the EST 2004 → title gap (was ~50px). */
.hero__stage > .elementor-element{ margin:0 !important; }
.hero__stage .ui p{ margin:0 0 25px !important; }

/* Property "moment" price +20% (was clamp(1.6,2.6vw,2.4rem)). */
.moment .moment__price, .moment .moment__price *{ font-size:clamp(1.92rem,3.12vw,2.88rem) !important; }

/* Tighten the pinned statement so it isn't a tall dark void (the "apparent gap"). */
.pinned__sticky{ min-height:68svh !important; }

/* Moment price +20% must beat the search-card rule (.e-loop-item .elementor-widget-property-price)
   which leaks in because moments are also loop items — needs higher specificity. */
.moment .moment__price.elementor-widget-property-price,
.moment .moment__price.elementor-widget-property-price *{ font-size:clamp(1.92rem,3.12vw,2.88rem) !important; }

/* ── Testimonial + Pulse Loop Grid integration ─────────────────
   Bridge Elementor's widget wrappers so the native quote/post cards render right. */
/* Pulse post featured image fills the 3:2 frame */
.post__img .elementor-widget-image, .post__img .elementor-widget-image .elementor-widget-container,
.post__img figure, .post__img figure > a{ height:100% !important; width:100%; margin:0; }
.post__img .elementor-widget-image img{ width:100% !important; height:100% !important; object-fit:cover; }
/* Pulse title (theme-post-title inner heading) */
.post .post__t .elementor-heading-title{ font-size:clamp(1.55rem,2.2vw,2rem) !important; color:#fff; font-weight:300; line-height:1.12; margin:0; }
/* Pulse excerpt spacing */
.post .post__ex p{ margin:0; }
/* Whole pulse card clickable via cover link */
.post{ position:relative; }
.post__cover{ position:absolute; inset:0; z-index:3; }
.post .post__link{ position:relative; z-index:4; }
/* Testimonial author name (theme-post-title inner heading styled like the old <b>) */
.quote .quote__who .elementor-heading-title{ color:var(--bone); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; font-family:"Jost",system-ui,sans-serif; font-weight:400; margin:0; }
.quote .quote__t p{ margin:0; }

/* Broaden heading bridges to any heading tag theme-post-title emits */
.quote .quote__who h1,.quote .quote__who h2,.quote .quote__who h3,.quote .quote__who .elementor-heading-title{
  font-size:.72rem !important; color:var(--bone); letter-spacing:.1em; text-transform:uppercase;
  font-family:"Jost",system-ui,sans-serif; font-weight:400; margin:0; }
.post .post__t h1,.post .post__t h2,.post .post__t h3,.post .post__t .elementor-heading-title{
  font-size:clamp(1.55rem,2.2vw,2rem) !important; color:#fff; font-weight:300; line-height:1.12; margin:0; }

/* ── Loop Grid columns fix ─────────────────────────────────────
   .quotes / .pulse-grid land on the Loop Grid WIDGET wrapper, but the real grid
   is the inner .elementor-loop-container. Reset the wrapper to full width and
   put the multi-column grid on the container (Elementor rendered it as block). */
.quotes, .pulse-grid{ display:block !important; background:none !important; border:0 !important; }
.quotes .elementor-loop-container{ display:grid !important; grid-template-columns:1fr 1fr; gap:1px;
  background:rgba(239,234,225,.12); border:1px solid rgba(239,234,225,.12); }
.pulse-grid .elementor-loop-container{ display:grid !important; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3vw,2.8rem); }
@media(max-width:760px){ .quotes .elementor-loop-container{ grid-template-columns:1fr; } }
@media(max-width:860px){ .pulse-grid .elementor-loop-container{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .pulse-grid .elementor-loop-container{ grid-template-columns:1fr; } }

/* Fix: the pinned bg must keep its inset:-10% bleed (my earlier fill-bridge forced
   height:100%, which shrank it to the section height and left a black band at the
   bottom). Let inset define the height; the inner image still fills it. */
.pinned__bg{ height:auto !important; }
/* Featured "moment" cards: whole card clickable via the image's post-URL link */
.moment{ position:relative; }
.moment .moment-link a{ position:static; }
.moment .moment-link a::after{ content:""; position:absolute; inset:0; z-index:6; }
.moment{ cursor:pointer; }
/* Let clicks pass through the non-interactive overlay text to the image link */
.moment .moment__body{ pointer-events:none; }
.moment .moment__body a, .moment .moment__body button{ pointer-events:auto; }
/* Featured "moments" loop: two full-bleed property photos side by side. A 1px bone
   hairline (as used on the districts / quotes grids) is invisible between two bright
   images, so the pair read as one continuous picture. Restore a clear seam: a small
   gap of the dark luxe ground (--ink) between the cards, still full-bleed. */
body.home .pz-moments{ padding:0 !important; }
body.home .pz-moments .elementor-loop-container{ gap:6px !important; background:var(--ink); }
.moment .moment-link, .moment .moment-link a{ display:block; height:100%; }
/* Transparent full-card link overlay (on top) makes the moment clickable */
.moment .moment-cover{ position:absolute !important; inset:0; z-index:8; margin:0 !important; }
.moment .moment-cover .elementor-button, .moment .moment-cover a{ position:absolute; inset:0; width:100%; height:100%; opacity:0; padding:0 !important; border:0 !important; min-height:0 !important; }
/* shortcode-based cover link overlay */
.moment .moment-cover, .moment .pz-cover-link{ position:absolute; inset:0; z-index:9; display:block; }
.moment{ position:relative; cursor:pointer; }
/* Featured properties section header spacing */
.pz-moments-head{ padding-top:clamp(3rem,7vh,5.5rem); }
/* View all properties button: centre it */
.pz-viewall{ display:flex; justify-content:center; }
/* Solid pill variant (brass fill, ink text) for home buttons */
.elementor-widget-button.pill--solid .elementor-button{ background:var(--brass) !important; border-color:var(--brass) !important; color:var(--ink) !important; }
.elementor-widget-button.pill--solid .elementor-button:hover{ background:transparent !important; color:var(--brass) !important; border-color:var(--brass) !important; }

/* Header auth state — show "Login / Register" when logged out, "My Account" when
   logged in (toggled by WordPress's body.logged-in class; no PHP needed). */
.lx-auth-in{ display:inline-block; }
body:not(.logged-in) .lx-auth-in{ display:none !important; }
body.logged-in .lx-auth-out{ display:none !important; }

/* ── Option B logo (PREVIEW) ───────────────────────────────────
   Swap the text wordmark for the buildings + framed PROPERTY / ruled ZONE
   mark, on BOTH the home hero header (.topbar) and the inner-page header
   (.pz-topbar), without touching Elementor. The PNG is transparent so it
   reads only on the dark bar. Horizontal lockup ratio 600:200 -> box 3:1. */
.topbar .brand, .pz-topbar .brand{
  display:block; width:370px; height:84px;
  background:url(../../../../../uploads/pzg-luxe/site-assets/property-zone-logo.png) center/contain no-repeat;
  text-indent:-9999px; white-space:nowrap; overflow:hidden;
}
.topbar .brand__mark, .topbar .brand__sub,
.pz-topbar .brand__mark, .pz-topbar .brand__sub{ display:none !important; }
@media(max-width:600px){
  .topbar .brand, .pz-topbar .brand{ width:229px; height:52px; justify-self:start; }
}



/* ── HERO: static graded Queensway Quay still (real, owned image) ──────
   Chosen direction: a still hero, not video — sharper, faster, and a
   truthful depiction of the real place (Property Zone's own photo, graded).
   Hide the Elementor background-video layers and paint the still. */
.hero .hero__media,
.hero .elementor-background-video-container,
.hero .elementor-background-overlay{ display:none !important; }
.hero{ background-image:url(../../../../../uploads/pzg-luxe/pz-hero-queensway.jpg) !important;
       background-size:cover !important; background-position:center 42% !important; background-color:#0b0b0c !important; }
@media(min-width:1025px){ .hero{ background-image:url(../../../../../uploads/pzg-luxe/pz-hero-queensway.jpg) !important; background-color:#0b0b0c !important; } }