/*
Theme Name: AW Arancia LP
Theme URI: https://aw-realestate.com
Author: BetaEdge Systems & Software Design L.L.C
Description: Single-purpose conversion landing page for Arancia at The Yards (AW Real Estate). Front page renders the full LP; no builder, no page-builder bloat.
Version: 1.4
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: aw-arancia
*/

/* ==================== TOKENS ==================== */
:root{
  /* AW brand — dark chrome, used above the fold and in the footer */
  --navy:#0D1B2A;
  --navy-deep:#081320;
  --navy-line:rgba(255,255,255,.14);
  --gold:#C9A961;
  --gold-soft:#E3CFA0;

  /* Arancia — editorial cream system, used for every project section */
  --cream:#F7F2EA;
  --cream-2:#EFE8DD;
  --ink:#1A1A18;
  --ink-2:#4A4A45;
  --ink-3:#8A867E;
  --rule:#DCD3C6;
  --arancia:#C4552B;

  --white:#fff;
  --maxw:1200px;
  --pad:clamp(20px,5vw,40px);

  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--arancia)}
.eyebrow--gold{color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.14;letter-spacing:-.01em}
.h2{font-size:clamp(30px,4.4vw,52px)}
.lede{color:var(--ink-2);font-size:clamp(16px,1.6vw,18px);max-width:62ch}
.disclaimer{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:18px;margin-top:40px}

section{padding:clamp(64px,9vw,110px) 0}
.sec-cream{background:var(--cream)}
.sec-cream-2{background:var(--cream-2)}
.sec-white{background:var(--white)}
.sec-navy{background:var(--navy);color:#EDE9E2}
.sec-navy h2,.sec-navy h3{color:#fff}

/* ==================== NAV ==================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:90;background:rgba(13,27,42,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--navy-line);transition:background .3s}
.nav-in{display:flex;align-items:center;gap:28px;height:72px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.logo{font-family:var(--serif);font-size:26px;color:#fff;letter-spacing:.02em;line-height:1}
.logo small{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.34em;color:var(--gold);margin-top:3px}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:#C9CEd6;padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--gold);border-color:var(--gold)}
.wa{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy);padding:11px 18px;border-radius:2px;font-size:12.5px;font-weight:600;letter-spacing:.06em;transition:background .2s}
.wa:hover{background:var(--gold-soft)}
.burger{display:none;margin-left:auto;color:#fff;font-size:24px;padding:8px}

/* ==================== HERO ==================== */
.hero{position:relative;background:var(--navy-deep);color:#fff;padding-top:132px;padding-bottom:72px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:
   linear-gradient(90deg,rgba(8,19,32,.96) 0%,rgba(8,19,32,.72) 45%,rgba(8,19,32,.5) 100%),
   linear-gradient(180deg,#12293f 0%,#1d3a52 40%,#3b4f60 100%);
   z-index:0}
/* swap the second gradient for: url('hero-dubai.jpg') center/cover */
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.hero h1{font-size:clamp(38px,5.6vw,64px);color:#fff;margin:14px 0 20px}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero p{color:#C9CED6;max-width:44ch;margin-bottom:14px}
.hero p.sub{color:#9AA4AF;font-size:15px}

.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.benefit .ic{width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);margin-bottom:12px}
.benefit b{display:block;font-size:13.5px;font-weight:500;color:#fff;line-height:1.4}

/* ==================== FORM ==================== */
.form-card{background:#0F2233;border:1px solid var(--navy-line);border-radius:4px;padding:30px 28px}
.form-card .eyebrow{margin-bottom:8px}
.form-card h2{font-size:27px;color:#fff;margin-bottom:22px;line-height:1.22}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:#9AA4AF;margin-bottom:5px}
input,select{width:100%;background:#16293A;border:1px solid rgba(255,255,255,.16);color:#fff;padding:13px 14px;border-radius:3px;font-size:14.5px;font-family:var(--sans);transition:border-color .2s}
input::placeholder{color:#7D8894}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'><path d='M1 1l5 5 5-5' stroke='%239AA4AF' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,169,97,.18)}
.consent{display:flex;gap:10px;align-items:flex-start;margin:16px 0 18px;font-size:12.5px;color:#9AA4AF;line-height:1.5}
.consent input{width:16px;height:16px;flex:0 0 16px;margin-top:2px;accent-color:var(--gold)}
.consent a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.btn-gold{width:100%;background:var(--gold);color:var(--navy);padding:15px;border-radius:3px;font-weight:600;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;transition:background .2s,transform .1s}
.btn-gold:hover{background:var(--gold-soft)}
.btn-gold:active{transform:translateY(1px)}
.btn-gold[disabled]{opacity:.55;cursor:wait}
.secure{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:14px;font-size:11.5px;color:#7D8894}
.err{color:#E8836B;font-size:12px;margin-top:5px;display:none}
.field.invalid input,.field.invalid select{border-color:#E8836B}
.field.invalid .err{display:block}
.form-done{display:none;text-align:center;padding:34px 6px}
.form-done .tick{width:54px;height:54px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;margin:0 auto 18px;font-size:26px}
.form-done h3{font-size:24px;color:#fff;margin-bottom:10px}
.form-done p{color:#9AA4AF;font-size:14px}
.iti{width:100%}
.iti__country-list{background:#16293A;color:#fff}
.iti__country.iti__highlight{background:#22384C}

/* ==================== INVEST ==================== */
.invest-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.rule-top{width:56px;height:2px;background:var(--gold);margin-bottom:22px}
.pill-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.pill .ic{width:40px;height:40px;border:1px solid var(--rule);border-radius:3px;display:grid;place-items:center;color:var(--arancia);margin-bottom:10px}
.pill b{display:block;font-size:14.5px;font-weight:600;margin-bottom:3px}
.pill span{font-size:13px;color:var(--ink-2);line-height:1.55}
.ph{border-radius:4px;background:linear-gradient(140deg,#1d3a52,#3b4f60 60%,#8a7f6d);aspect-ratio:4/3;position:relative}
.ph::after{content:attr(data-slot);position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.62);text-transform:uppercase}

/* ==================== FEATURED ==================== */
.center{text-align:center}
.center .lede{margin-inline:auto}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px}
.card{background:var(--white);border:1px solid var(--rule);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(26,26,24,.10)}
.card .ph{aspect-ratio:16/10;border-radius:0}
.tag{position:absolute;top:12px;left:12px;background:var(--gold);color:var(--navy);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;padding:5px 9px;text-transform:uppercase;z-index:2}
.card-b{padding:20px 20px 22px;display:flex;flex-direction:column;gap:5px;flex:1}
.card-b h3{font-size:19px}
.card-b .meta{font-size:13px;color:var(--ink-3)}
.card-b .price{font-family:var(--mono);font-size:14px;color:var(--arancia);margin-top:6px}
.btn-line{display:inline-block;margin-top:16px;border:1px solid var(--rule);padding:11px 20px;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;text-align:center;transition:border-color .2s,color .2s}
.btn-line:hover{border-color:var(--arancia);color:var(--arancia)}

/* ==================== PROCESS ==================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:50px;counter-reset:s}
.step{border-top:1px solid var(--rule);padding-top:20px}
.step .n{font-family:var(--mono);font-size:12px;color:var(--arancia);letter-spacing:.14em;margin-bottom:10px}
.step h3{font-size:19px;margin-bottom:7px}
.step p{font-size:14px;color:var(--ink-2)}

/* ==================== DEVELOPERS ==================== */
.devs{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:40px}
.dev{border:1px solid var(--navy-line);padding:20px 34px;font-family:var(--serif);font-size:20px;color:#EDE9E2;letter-spacing:.08em;border-radius:3px}

/* ==================== CTA BAND ==================== */
.cta-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.cta-i{border:1px solid var(--navy-line);padding:26px;text-align:center;border-radius:3px;transition:border-color .2s}
.cta-i:hover{border-color:var(--gold)}
.cta-i b{display:block;color:var(--gold);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px}
.cta-i span{font-size:16px;color:#fff}

/* ==================== VIDEO ==================== */
.videos{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.vid{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#000;border:1px solid var(--rule)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid button.play{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55))}
.vid button.play img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.vid .tri{position:relative;z-index:2;width:66px;height:66px;border-radius:50%;background:rgba(196,85,43,.92);display:grid;place-items:center;color:#fff;font-size:20px;padding-left:4px;transition:transform .2s}
.vid:hover .tri{transform:scale(1.08)}

/* ==================== MASTERPLAN / STATS ==================== */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:52px}
.stat{background:var(--cream);padding:28px 20px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(30px,3.6vw,42px);line-height:1;margin-bottom:9px}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.link-arrow{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--arancia);border-bottom:1px solid var(--arancia);padding-bottom:3px}
.link-arrow:hover{gap:14px}

/* ==================== PRICING TABLE ==================== */
.tbl{width:100%;border-collapse:collapse;margin-top:44px}
.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);text-align:left;font-weight:400;padding:0 0 14px;border-bottom:1px solid var(--rule)}
.tbl td{padding:24px 16px 24px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
.tbl td:first-child{font-family:var(--serif);font-size:21px;white-space:nowrap}
.tbl td.cfg{font-size:14.5px;color:var(--ink-2)}
.tbl td.pr{font-family:var(--mono);font-size:14px;color:var(--arancia)}
.tbl td.pr.muted{color:var(--ink-3)}
.tbl td.act{text-align:right}
.fp{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--arancia);border-bottom:1px solid var(--arancia);padding-bottom:2px}
.fp:hover{color:var(--ink);border-color:var(--ink)}

/* ==================== PAYMENT ==================== */
.pay{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:48px}
.pay-i{background:var(--white);padding:30px 24px}
.pay-i .pc{font-family:var(--serif);font-size:38px;color:var(--arancia);line-height:1;margin-bottom:6px}
.pay-i .pl{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.pay-i p{font-size:14px;color:var(--ink-2)}
.bignum{font-family:var(--mono);color:var(--arancia)}

/* ==================== LOCATION ==================== */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.times{border-top:1px solid var(--rule)}
.time-r{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 0;border-bottom:1px solid var(--rule)}
.time-r b{font-weight:400;font-size:15.5px}
.time-r span{font-family:var(--mono);font-size:13px;color:var(--arancia);white-space:nowrap}

/* ==================== BUYING STEPS ==================== */
.buy{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px}
.buy-i{border-top:2px solid var(--arancia);padding-top:20px}
.buy-i .n{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--arancia);margin-bottom:9px}
.buy-i h3{font-size:20px;margin-bottom:8px}
.buy-i p{font-size:14px;color:var(--ink-2)}

/* ==================== FAQ ==================== */
.faq{margin-top:44px;border-top:1px solid var(--rule)}
.q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;text-align:left;padding:22px 0;border-bottom:1px solid var(--rule);font-family:var(--serif);font-size:clamp(17px,2vw,20px);transition:color .2s}
.q:hover{color:var(--arancia)}
.q .pm{font-family:var(--sans);font-size:22px;color:var(--arancia);flex:0 0 auto;transition:transform .25s;line-height:1}
.q[aria-expanded="true"] .pm{transform:rotate(45deg)}
.a{max-height:0;overflow:hidden;transition:max-height .32s ease;border-bottom:1px solid var(--rule)}
.a-in{padding:4px 0 26px;max-width:78ch;color:var(--ink-2);font-size:15px}

/* ==================== FOOTER ==================== */
.foot{background:var(--navy);color:#9AA4AF;padding:74px 0 0}
.foot-g{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px}
.foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:500}
.foot .logo{margin-bottom:16px}
.foot p{font-size:14px;max-width:40ch}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot ul a{font-size:14px;transition:color .2s}
.foot ul a:hover{color:var(--gold)}
.foot-b{margin-top:56px;border-top:1px solid var(--navy-line);padding:22px 0 26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:#6E7884}

/* ==================== MOBILE STICKY CTA ==================== */
.sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;background:rgba(13,27,42,.97);border-top:1px solid var(--navy-line);padding:10px var(--pad);gap:10px}
.sticky a,.sticky button{flex:1;text-align:center;padding:14px;border-radius:3px;font-size:13px;font-weight:600;letter-spacing:.05em}
.sticky .s1{background:var(--gold);color:var(--navy)}
.sticky .s2{border:1px solid var(--navy-line);color:#fff}

/* ==================== LEGAL MODAL ==================== */
.modal{position:fixed;inset:0;z-index:120;background:rgba(8,19,32,.72);display:none;padding:var(--pad);overflow-y:auto}
.modal.open{display:block}
.modal-in{background:var(--cream);max-width:820px;margin:5vh auto;padding:clamp(28px,5vw,54px);border-radius:4px;position:relative}
.modal-in h2{font-size:32px;margin-bottom:6px}
.modal-in h3{font-size:19px;margin:26px 0 8px}
.modal-in p,.modal-in li{font-size:14.5px;color:var(--ink-2);margin-bottom:9px}
.modal-in ul{padding-left:20px}
.modal-x{position:absolute;top:16px;right:18px;font-size:28px;color:var(--ink-3);line-height:1;padding:6px}

/* ==================== RESPONSIVE ==================== */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr 380px;gap:36px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stats .stat:nth-child(5){grid-column:span 2}
  .pay,.buy,.steps{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-in .wa{display:none}
  .hero{padding-top:110px}
  .hero-in{grid-template-columns:1fr}
  .invest-grid,.loc,.videos{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .cta-3{grid-template-columns:1fr}
  .foot-g{grid-template-columns:1fr}
  .sticky{display:flex}
  body{padding-bottom:70px}
  html{scroll-padding-top:82px}
  .tbl td:first-child{font-size:18px}
}
@media (max-width:560px){
  .benefits,.pill-grid,.stats,.pay,.buy,.steps{grid-template-columns:1fr 1fr}
  .stats .stat:last-child{grid-column:1/-1}
  .tbl thead{display:none}
  .tbl tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:18px 0;border-bottom:1px solid var(--rule)}
  .tbl td{border:0;padding:0}
  .tbl td.cfg{grid-column:1/-1;margin-top:4px}
  .tbl td.pr{grid-column:1;margin-top:6px}
  .tbl td.act{grid-column:2;grid-row:3;align-self:end}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--arancia);outline-offset:3px}
.nav :focus-visible,.hero :focus-visible,.foot :focus-visible{outline-color:var(--gold)}

/* =====================================================================
   Admin bar — the WP toolbar is 32px of fixed chrome that would sit on
   top of our own fixed header for logged-in users.
   ===================================================================== */
body.admin-bar .nav{top:32px}
body.admin-bar .mobile-menu{top:calc(72px + 32px)}
@media screen and (max-width:782px){
  body.admin-bar .nav{top:46px}
  body.admin-bar .mobile-menu{top:calc(72px + 46px)}
}

/* =====================================================================
   Header scroll state
   ===================================================================== */
.nav.scrolled{background:rgba(8,19,32,.97);box-shadow:0 1px 0 rgba(255,255,255,.06)}

/* =====================================================================
   Mobile menu
   ===================================================================== */
.mobile-menu{
  position:fixed;top:72px;left:0;right:0;bottom:0;
  background:#081320;                 /* fully opaque: the hero must not read through */
  border-top:1px solid var(--navy-line);
  padding:10px var(--pad) 34px;
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  z-index:89;
}
.mobile-menu .mm-wa{margin-bottom:8px}
.mobile-menu.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
.mobile-menu a{
  padding:17px 2px;border-bottom:1px solid rgba(255,255,255,.09);
  color:#D6DAE0;font-size:15px;letter-spacing:.01em;
}
.mobile-menu a:active{color:var(--gold)}
.mobile-menu .mm-cta{
  margin-top:22px;border:0;background:var(--gold);color:var(--navy);
  text-align:center;font-weight:600;font-size:13.5px;letter-spacing:.09em;
  text-transform:uppercase;border-radius:3px;padding:16px;
}
.mobile-menu .mm-wa{
  margin-top:10px;border:1px solid var(--navy-line);border-radius:3px;
  text-align:center;color:#fff;padding:15px;font-size:13.5px;
}
.burger{font-size:26px;line-height:1}

/* =====================================================================
   Phone field — dark-theme overrides for intl-tel-input
   ===================================================================== */
.iti__flag{background-image:url("vendor/iti/img/flags.png")}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .iti__flag{background-image:url("vendor/iti/img/flags@2x.png")}
}
.iti--separate-dial-code .iti__selected-flag{background:rgba(255,255,255,.06);border-radius:3px 0 0 3px}
.iti--separate-dial-code .iti__selected-dial-code{color:#D6DAE0;font-size:14.5px}
.iti__arrow{border-top-color:#9AA4AF}
.iti__arrow--up{border-bottom-color:#9AA4AF}
.iti__country-list{
  background:#16293A;color:#E6E9ED;border:1px solid rgba(255,255,255,.16);
  border-radius:3px;box-shadow:0 16px 40px rgba(0,0,0,.45);
  max-height:260px;font-size:14px;
}
.iti__country{padding:9px 12px}
.iti__country.iti__highlight{background:#22384C}
.iti__divider{border-bottom-color:rgba(255,255,255,.14)}
.iti__dial-code{color:#8A94A0}
/* dropdownContainer:body detaches the list from the form, so it needs to
   outrank the sticky header and the mobile CTA bar */
.iti--container{z-index:200}

/* =====================================================================
   Image slots — a real photo replaces the labelled gradient placeholder
   ===================================================================== */
.ph.has-img{
  background-color:var(--navy-deep);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.ph.has-img::after{content:none}
.card .ph.has-img{border-radius:0}

/* Property card images are 818px wide at source but render up to ~380px —
   pin the crop so the building sits in frame rather than drifting. */
.card .ph.has-img{background-position:center 45%}