:root{
  --bg0:#07101f;
  --bg1:#0b1730;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.55);
  --shadow:0 18px 55px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:24px;

  /* Header tokens (LOCKED) */
  --header-h:56px;
  --header-pad-y:10px;
  --header-gap:14px;
}

/* View Mode: Soft/Light */
html[data-theme="soft"],
html[data-theme="light"],
html[data-theme="paper"]{
  --bg0:#f2f6ff; --bg1:#ffffff;
  --card:rgba(0,0,0,.04); --card2:rgba(0,0,0,.03);
  --border:rgba(0,0,0,.10);
  --text:rgba(0,0,0,.88);
  --muted:rgba(0,0,0,.66);
  --muted2:rgba(0,0,0,.52);
  --shadow:0 18px 55px rgba(0,0,0,.16);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1100px 650px at 15% 5%, rgba(120,180,255,.16), transparent 58%),
    radial-gradient(850px 560px at 95% 25%, rgba(120,70,255,.12), transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1120px,calc(100% - 32px));margin:0 auto}

/* =======================================================================
   LOCKED HEADER v1
   ======================================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
  background:rgba(7,16,31,.72);
}

/* Make soft header more “solid” so logos + pills read cleanly */
html[data-theme="soft"] .topbar,
html[data-theme="light"] .topbar,
html[data-theme="paper"] .topbar{
  background:rgba(255,255,255,.92);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--header-gap);
  padding:var(--header-pad-y) 0;
  min-height:var(--header-h);
  flex-wrap:nowrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  min-width:0;
}

#brandLogo{
  height:26px;
  width:auto;
  /* Helps logo pop on dark hero/photo edges */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

html[data-theme="soft"] #brandLogo,
html[data-theme="light"] #brandLogo,
html[data-theme="paper"] #brandLogo{
  filter:none;
}

#brandWordmark{display:none}

.badge{
  font-size:12px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  white-space:nowrap;
}

@media (max-width: 980px){ .badge{display:none} }

.menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:1 1 auto;
  min-width:0;

  /* Anti-wrap */
  flex-wrap:nowrap !important;
  white-space:nowrap;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.menu::-webkit-scrollbar{display:none}

.pill{
  font-size:13px;
  padding:7px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text);
  background:rgba(255,255,255,.04);
  white-space:nowrap;
  flex:0 0 auto;
}
html[data-theme="soft"] .pill,
html[data-theme="light"] .pill,
html[data-theme="paper"] .pill{
  background:rgba(0,0,0,.03);
}

.pill.primary{
  border-color:rgba(110,160,255,.7);
  background:rgba(110,160,255,.20);
}

.pill-btn{
  cursor:pointer;
  display:inline-flex;
  gap:8px;
  align-items:center;
}

@media (max-width: 720px){
  .nav{align-items:flex-start}
  .brand{align-items:flex-start}
  .badge{display:none}
}
/* =======================================================================
   END LOCKED HEADER v1
   ======================================================================= */


/* =========================
   HERO (FIXED)
   ========================= */
.hero-figma{
  position:relative;
  min-height:300px;
  padding:64px 0 42px;
  border-bottom:1px solid var(--border);
  overflow:hidden;
}

.hero-figma__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.25)),
    url("images/hero-private-property-parking.png") center/cover no-repeat;
  filter:saturate(1.0) contrast(1.02);
  transform:scale(1.02);
}

/* HERO layering + contrast hardening (EN lock) */
.hero-figma__bg{z-index:0;pointer-events:none;}
.hero-figma__inner{z-index:1;position:relative;}

/* Hero text readability (LOCKED) */
.hero-figma h1,
.hero-figma .h1,
.hero-figma .lead,
.hero-figma p{
  color: rgba(255,255,255,.97) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.hero-figma, .hero-figma h1, .hero-figma .h1, .hero-figma .lead{color:rgba(255,255,255,.96)!important;text-shadow:0 10px 32px rgba(0,0,0,.55);}

/* ✅ Keep readability even in soft mode: still use a dark overlay */
html[data-theme="soft"] .hero-figma__bg,
html[data-theme="light"] .hero-figma__bg,
html[data-theme="paper"] .hero-figma__bg{
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.35)),
    url("images/hero-private-property-parking.png") center/cover no-repeat;
}

.hero-figma__inner{
  position:relative;
  z-index:1;
  padding-top:12px;
}

/* ✅ Unbreakable: hero text ALWAYS white */
.hero-figma, .hero-figma h1, .hero-figma .h1, .hero-figma .lead{
  color:rgba(255,255,255,.96) !important;
  text-shadow:0 2px 16px rgba(0,0,0,.40);
}

.h1{
  font-size:clamp(38px,5vw,62px);
  line-height:1.05;
  margin:0 0 12px;
  letter-spacing:-0.7px;
}

.lead{
  max-width:70ch;
  color:var(--muted);
  font-size:18px;
  line-height:1.55;
  margin:0 0 18px;
}

.heroActions{margin-top:12px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  font-weight:800;
}
html[data-theme="soft"] .btn,
html[data-theme="light"] .btn,
html[data-theme="paper"] .btn{background:rgba(0,0,0,.03)}
.btn.primary{
  background:rgba(110,160,255,.85);
  border-color:rgba(110,160,255,.85);
  color:#0b1020;
}

.section{padding:34px 0}
.card{
  border:1px solid var(--border);
  border-radius:var(--radius2);
  background:var(--card);
  box-shadow:var(--shadow);
}
.pad{padding:22px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}

.list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.tick{
  display:inline-flex;
  width:18px;height:18px;
  border-radius:6px;
  align-items:center;
  justify-content:center;
  background:rgba(110,160,255,.20);
  border:1px solid rgba(110,160,255,.45);
  font-size:12px;
}

.form label{
  display:block;
  font-size:13px;
  margin:10px 0 6px;
  color:var(--muted);
  font-weight:700;
}
.form input,.form textarea{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  padding:12px 12px;
  color:var(--text);
  outline:none;
}
html[data-theme="soft"] .form input,
html[data-theme="soft"] .form textarea,
html[data-theme="light"] .form input,
html[data-theme="light"] .form textarea,
html[data-theme="paper"] .form input,
html[data-theme="paper"] .form textarea{
  background:rgba(0,0,0,.02);
}
.form textarea{min-height:120px;resize:vertical}

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.footerbar{
  border-top:1px solid var(--border);
  padding:18px 0;
  margin-top:40px;
}

@media (max-width: 860px){
  .split{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
}
/* =========================================================
   HERO TEXT LOCK — UNIVERSAL (EN + FR)
   Forces hero text readable in ALL modes, regardless of markup.
   ========================================================= */

/* 1) Force hero headings/lead to be white inside any hero section */
.hero,
.hero * ,
section.hero,
section.hero * {
  /* we will re-allow normal text later, only for specific elements */
}

.hero h1,
.hero .h1,
.hero p,
.hero .lead,
section.hero h1,
section.hero .h1,
section.hero p,
section.hero .lead{
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.40) !important;
}

/* 2) Ensure background overlay stays dark even in soft/light themes */
html[data-theme="soft"] .hero::before,
html[data-theme="light"] .hero::before,
html[data-theme="paper"] .hero::before,
html[data-theme="soft"] section.hero::before,
html[data-theme="light"] section.hero::before,
html[data-theme="paper"] section.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  pointer-events:none;
  z-index:0;
}

/* 3) Keep hero content above overlay */
.hero > :not(.hero-figma__bg),
section.hero > :not(.hero-figma__bg){
  position:relative;
  z-index:1;
}